Download - 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