maquetacion de pagina web adriana

Ejecutamos el programa Notepad C++.

Este es el código HTML de la pagina que vamos a maquetar.

Colocamos un formulario en el aside de derecha

Después de escribir table para nuestro formulario colocamos filas escribiendo <tr> y lo cerramos.

Una de las casillas tendrá como opción iniciar sesión.

Al ejecutarlo con un navegador aparecerá una casilla que diga iniciar sesión.

Agregamos otra casilla con la opción de usuario mediante <label>.

Ahí esta la casilla debajo de iniciar sesión.

Agregamos propiedades a la fila

Nos aparece otro cajoncito en blanco al frente de usuario

Le escribimos la etiqueta para contraseña.

Aparece la opción de contraseña

agregamos una opción para que aparezca frente a contraseña.

Aparece la opción para ingresar la contraseña

Colspan nos permite que un texto ocupe 2 columnas.

Aparece en el centro iniciar sesión.

También podemos agregar un vinculo en este caso esta una fecha.

Debajo de nuestra tabla esta el vinculo que dice articulo 1 acompañado de una fecha.

Si queremos otros vínculos no es mas que copiemos la estructura y le cambiamos el texto.

Ahí tenemos los otros vínculos.

Creando un link de referencia dentro del código de nuestra pagina nos permitirá vincularla a otra documento que crearemos de tipo CSS para maquetar nuestra pagina.

Después de crear el link de vinculación creamos un archivo nuevo para escribir las

propiedades de nuestra pagina.

Lo guardamos en una carpeta llamada estilo con el nombre de estilo.css todo

en la misma carpeta donde este nuestra pagina.

En la hoja de tipo CSS creada le damos propiedades a nuestra pagina en este caso tiene que aparecer centrada utilizamos la

variable todo para que esto ocurra.

Toda la pagina aparece centrada

También podemos agregarle una margen al encabezado declarando header.

Overflow hiddent nos permitirá que solo aparezca la cabecera.

Si quitamos el overflow hidden aparecerá el texto que pasa de la cabecera

Ahora vamos a maquetar el aside izquierda de nuestra tabla de usuario.

Nos aparece nuestra tabla a la izquierda.

Ahora el centro maquetamos el centro de nuestra pagina mediante section.

Continuamos maquetando el aside de la parte derecha de la pagina.

En la parte central nos aparecen nuestros artículos.

Colocamos en el centro nuestro contenido footer nos permite ajustar el tamaño de nuestra margen central.

Al ejecutarlo nuestra margen central esta se ajusta entre los vínculos y el formulario.

Creamos un archivo nuevo

Al guardarlo lo llamamos header.css tiene que estar dentro de la carpeta del anterior archivo css.

Descargamos un tipo de fuente llamada destroyed y la guardamos en una carpeta llamada fuente en la carpeta de nuestra pagina y referenciamos nuestro

archivoo de fuente dentro del header.

Luego redondeamos la margen de nuestro encabezado.

Nos aparece nuestros titulos con sombra roja gracias a shadow.

Le damos un tamaño en pixeles y le damos una sombra a nuestros títulos.

Luego agregamos sombra a nuestra margen de encabezado.

Los botones de nuestras filas