Download - Maquetacion de pagina web adriana
![Page 1: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/1.jpg)
Ejecutamos el programa Notepad C++.
![Page 2: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/2.jpg)
Este es el código HTML de la pagina que vamos a maquetar.
![Page 3: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/3.jpg)
Colocamos un formulario en el aside de derecha
![Page 4: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/4.jpg)
Después de escribir table para nuestro formulario colocamos filas escribiendo <tr> y lo cerramos.
![Page 5: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/5.jpg)
Una de las casillas tendrá como opción iniciar sesión.
![Page 6: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/6.jpg)
Al ejecutarlo con un navegador aparecerá una casilla que diga iniciar sesión.
![Page 7: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/7.jpg)
Agregamos otra casilla con la opción de usuario mediante <label>.
![Page 8: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/8.jpg)
Ahí esta la casilla debajo de iniciar sesión.
![Page 9: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/9.jpg)
Agregamos propiedades a la fila
![Page 10: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/10.jpg)
Nos aparece otro cajoncito en blanco al frente de usuario
![Page 11: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/11.jpg)
Le escribimos la etiqueta para contraseña.
![Page 12: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/12.jpg)
Aparece la opción de contraseña
![Page 13: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/13.jpg)
agregamos una opción para que aparezca frente a contraseña.
![Page 14: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/14.jpg)
Aparece la opción para ingresar la contraseña
![Page 15: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/15.jpg)
Colspan nos permite que un texto ocupe 2 columnas.
![Page 16: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/16.jpg)
Aparece en el centro iniciar sesión.
![Page 17: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/17.jpg)
También podemos agregar un vinculo en este caso esta una fecha.
![Page 18: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/18.jpg)
Debajo de nuestra tabla esta el vinculo que dice articulo 1 acompañado de una fecha.
![Page 19: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/19.jpg)
Si queremos otros vínculos no es mas que copiemos la estructura y le cambiamos el texto.
![Page 20: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/20.jpg)
Ahí tenemos los otros vínculos.
![Page 21: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/21.jpg)
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.
![Page 22: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/22.jpg)
Después de crear el link de vinculación creamos un archivo nuevo para escribir las
propiedades de nuestra pagina.
![Page 23: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/23.jpg)
Lo guardamos en una carpeta llamada estilo con el nombre de estilo.css todo
en la misma carpeta donde este nuestra pagina.
![Page 24: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/24.jpg)
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.
![Page 25: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/25.jpg)
Toda la pagina aparece centrada
![Page 26: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/26.jpg)
También podemos agregarle una margen al encabezado declarando header.
![Page 27: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/27.jpg)
Overflow hiddent nos permitirá que solo aparezca la cabecera.
![Page 28: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/28.jpg)
Si quitamos el overflow hidden aparecerá el texto que pasa de la cabecera
![Page 29: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/29.jpg)
Ahora vamos a maquetar el aside izquierda de nuestra tabla de usuario.
![Page 30: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/30.jpg)
Nos aparece nuestra tabla a la izquierda.
![Page 31: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/31.jpg)
Ahora el centro maquetamos el centro de nuestra pagina mediante section.
![Page 32: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/32.jpg)
![Page 33: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/33.jpg)
Continuamos maquetando el aside de la parte derecha de la pagina.
![Page 34: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/34.jpg)
En la parte central nos aparecen nuestros artículos.
![Page 35: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/35.jpg)
Colocamos en el centro nuestro contenido footer nos permite ajustar el tamaño de nuestra margen central.
![Page 36: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/36.jpg)
Al ejecutarlo nuestra margen central esta se ajusta entre los vínculos y el formulario.
![Page 37: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/37.jpg)
Creamos un archivo nuevo
![Page 38: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/38.jpg)
Al guardarlo lo llamamos header.css tiene que estar dentro de la carpeta del anterior archivo css.
![Page 39: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/39.jpg)
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.
![Page 40: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/40.jpg)
![Page 41: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/41.jpg)
Luego redondeamos la margen de nuestro encabezado.
![Page 42: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/42.jpg)
![Page 43: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/43.jpg)
Nos aparece nuestros titulos con sombra roja gracias a shadow.
![Page 44: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/44.jpg)
Le damos un tamaño en pixeles y le damos una sombra a nuestros títulos.
![Page 45: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/45.jpg)
Luego agregamos sombra a nuestra margen de encabezado.
![Page 46: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/46.jpg)
![Page 47: Maquetacion de pagina web adriana](https://reader036.vdocuments.pub/reader036/viewer/2022062304/55900a041a28ab31218b45a6/html5/thumbnails/47.jpg)
Los botones de nuestras filas