INTRODUCCION AL DESARROLLO WEB

Lab4. Maquetación Web HTML5 Y CSS

Objetivo: Aplicar los conocimientos de HTML y CSS a la maquetación Web.

Herramientas: IDE Visual Studio Code – Sublime Text

Procedimiento:

Para realizar el presente laboratorio debe crear una carpeta de trabajo con el nombre
LabMaquetaWeb y luego con el uso de una herramienta IDE(Visual Studio Code ó Sublime
Text) se pide maquetar los dos casos pedidos, se pide usar en lo posible unidades de medida
relativas de CSS y las etiquetas semánticas de HTML5.

Caso1.-
Usando HTML5 y CSS, se pide maquetar la siguiente estructura de una página Web, como
aprecia en la figura. Debe estructurar la información en HTML y la presentación en estilos
CSS

Ing. Tito Ale Nieto

titofale@gmail.com
INTRODUCCION AL DESARROLLO WEB

Como referencia se tiene el siguiente código HTML

Ing. Tito Ale Nieto

titofale@gmail.com
INTRODUCCION AL DESARROLLO WEB

Código de la hoja de estilos

Ing. Tito Ale Nieto

titofale@gmail.com
INTRODUCCION AL DESARROLLO WEB

Ing. Tito Ale Nieto

titofale@gmail.com
INTRODUCCION AL DESARROLLO WEB

Ing. Tito Ale Nieto

titofale@gmail.com
INTRODUCCION AL DESARROLLO WEB
Caso2.-
Maquetar el siguiente diseño Web usando como base el caso anterior de aplicación de
HTML5 y CSS, se recomienda trabajar con una copia.

Usando el editor, se pide crear el siguiente diseño web usando las etiquetas semánticas de
HTML5 y CSS que permiten separar el contenido de la presentación.

Se pide implementar el código HTML5 y la hoja de Estilos CSS

Debe crear los estilos para cada (tag) etiqueta de HTML5 y si es necesario trabajar con id
como identificador, debe cambiar el código CSS para los etiquetas semánticas de HTML5

EL diseño HTML5 y CSS debe quedar uniforme para todas las páginas del menú

Ing. Tito Ale Nieto

titofale@gmail.com
INTRODUCCION AL DESARROLLO WEB
Debe crear los estilos para cada (tag) etiqueta de html5 y si es necesario trabajar con id
como identificador,

Parte de la hoja de estilos del menú horizontal

Para presentar su laboratorio, se pide crear contenido para cada opción del menú de
navegación como puntos adicionales..

Ing. Tito Ale Nieto

titofale@gmail.com