Este documento describe los pasos para maquetar una página web utilizando HTML y CSS. Explica cómo agregar un formulario de inicio de sesión con casillas para usuario y contraseña, así como vínculos y una barra de navegación. También describe cómo centrar el contenido, agregar márgenes y sombras, y redondear bordes utilizando hojas de estilo en CSS para dar formato a la página.
7. Al ejecutar nuestro código con un navegador (en este caso opera) aparecerá una
casilla que dice iniciar sesión (podemos mirar en la imagen)
8. Agregaremos
otra casilla. En
la cual
encontraremos
la opción de
USUARIO
mediante
<label>
En la imagen
podemos
observar la
casilla que
hemos creado
(debajo de
iniciar sesión)
9. Ahora agregaremos propiedades a la fila
Como podemos observar en la imagen. Hemos creado un cajón el cual esta frente
de nuestra opción usuario
10. Le escribimos la etiqueta para crear una nueva opción CONTRASEÑA
Al ejecutar nuestro código miramos como nos aparece una nueva opción CONTRASEÑA
11. Agregaremos una opción la cual aparecera frente en cajón de contraseña
En este cajón podemos insertar nuestra contraseña para poder acceder
12. Colocaremos un código COLSPAN el cual nos permite que un texto ocupe 2 columnas
Al ejecutarlo podemos observar como iniciar sesión ocupa dos casillas de nuestra tabla
13. También podemos agregarle un vinculo a nuestra pagina en este caso agregaremos la fecha
Observamos en la imagen que en la parte inferior de nuestra tabla a aparecido
nuestro vinculo con la fecha
14. Si queremos crear otros vínculos copeamos la estructura y solo cambiamos el texto
Podemos observar en la imagen que hemos creado mas vínculos
15. Creando un link de referencia dentro del código de nuestra pagina podremos vincularla
a otro documento que crearemos en tipo CSS para maquetear nuestra pagina
Después de crear el link de vinculación
crearemos un archivo nuevo para
escribir las propiedades de nuestra
pagina
Lo guardaremos en una carpeta que le
pondremos como nombre ESTILO.CSS.
Todos los cambiamos los guardaremos en
esta misma carpeta
16. En la hoja creada de
tipo CSS le damos
propiedades a nuestra
pagina. En este caso
utilizamos la variable
TODO. La cual hará
que nuestra pagina
salga centrada
Nuestra pagina
aparecerá centrada
17. Ahora le
agregaremos una
margen al
encabezado de
nuestra pagina.
Para esto
declararemos la
variable header
Overflow hiddent
este nos
permitirá que
solo aparezca en
el encabezado de
nuestra pagina. Si
quitamos este
nos aparecerá
toda nuestra
pagina
18. Ahora vamos a maquetear el aside izquierda de nuestra tabla de usuario
Nuestra tabla nos aparecerá a la izquierda
19. Ahora maquetamos el centro de nuestra pagina mediante section
Al ejecutarlo podemos mirar nuestros cambios
20. Continuamos maquetando el aside de la parte derecha de nuestra pagina
En la parte central de la pagina nos aparecerán nuestros artículos
21. Footer nos permitirá
ajustar el tamaño de
nuestra margen
central
Al ejecutar nuestra margen central esta de ajustara entre los vínculos y el formulario
23. Ahora colocaremos el siguiente código para redondear el margen de nuestro encabezado
En la imagen podemos observar el redondeado que le hemos dado a nuestro encabezado
24. Ahora le colocaremos un
sombreado a nuestros titulos y
le colocaremos su tamaño en
pixeles
25. Ahora crearemos botones para nuestras opciones y también le colocaremos un
sombreado a su margen
