“Año de la Diversificación Productiva y del Fortalecimiento de la Educación”

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO

COMPUTACIÓN E INFORMÁTICAUNIDAD DIDACTICA : DISEÑO WEBDOCENTE : HANCCO QUISPE, Elar E.

ESTUDIANTE : QUISPE VILCA, Maricruz

CICLO ACADÉMICO : V-A

SEMESTRE : 2015

Juliaca - Puno - Perú.2015

“TECNOTRONIC”

MAQUETACIÓN WEB.UTILIZANDO HTML Y CSS.

PRACTICA: Maquetación Web utilizando CSS externo.

Para realizar la maquetación web tenemos que tener instalado nuestro editor de código ya que de esta manera se nos hará mucho más fácil Maquetar nuestro sitio Web.

PASO 1:

Crearemos una carpeta en el escritorio o donde sea mucho más rápido de

acceder a la carpeta para visualizar los archivos que crearemos más adelante. En

esta carpeta guardaremos todos los archivos que utilizaremos para maquetar

nuestra web.

PASO 2:

Abrimos nuestro editor de código en este caso yo utilizare Atom

un editor de código abierto, gratuito y además de ser

personalizable ya que se me es mucho más fácil de utilizarlo.

Al abrirlo nos mostrara las siguiente ventana:

PASO 3:

Presionamos las siguientes teclas para guardar el archivo:

Ctrl S

DISEÑO WEB

Nos mostrara las siguiente ventana:

Click en abrir

Lo llamaremos index.html y lo guardaremos:

Y por qué índex? Porque será nuestro principal archivo donde se ubicara la estructura

básica de HTML y visualizara todo lo que desarrollaremos.

PASO 4:

Escribiremos la estructura básica de HTML, de una forma mucho más rápida y sencilla

presionando las teclas de:

QUISPE VILCA, Maricruz Página 3

Ctrl Espacio

Ctrl

DISEÑO WEB

Y se nos colocara toda la estructura:

Ahora crearemos una carpeta donde irán nuestros archivos de estilos un archivo CSS para crear las CAPAS para esto crearemos una nueva fila presionando las teclas de:

Presionamos las siguientes teclas para guardar el archivo:

Nos mostrara las siguiente ventana:

QUISPE VILCA, Maricruz Página 4

Ctrl S

N

DISEÑO WEB

Lo llamaremos estilos.css y lo guardaremos:

Y por qué .css? Porque es una hoja de estilos donde ira el diseño.

Bien empecemos con el código:

CODIGO HTML:

QUISPE VILCA, Maricruz Página 5

DISEÑO WEB

QUISPE VILCA, Maricruz Página 6

DISEÑO WEB

QUISPE VILCA, Maricruz Página 7

DISEÑO WEB

CODIGO CSS:

SELECTOR UNIVERSAL:

CUERPO:

QUISPE VILCA, Maricruz Página 8

DISEÑO WEB

EL ENCABEZADO Y LO QUE VA EN EL COMO EL LOGO:

QUISPE VILCA, Maricruz Página 9

DISEÑO WEB

EL SECTION:

ARTICULO:

ASIDE:

DENTRO DEL ASIDE:

QUISPE VILCA, Maricruz Página 10

DISEÑO WEB

EL FOOTER:

El resultado será lo siguiente:

QUISPE VILCA, Maricruz Página 11