INSTITUTO SUPERIOR TECNOLÓGICO PRIVADO CIBERTEC

DIRECCIÓN ACADEMICA
CARRERAS PROFESIONALES

CURSO : ARQUITECTURA DE ENTORNOS WEB

CICLO : Primero
SECCIONES : Todas
PROFESORES : Todos

PRÁCTICA DIRIGIDA DE LABORATORIO – SEMANA 11

Ejercicio_1

Diseñe la siguiente página web:

div id=“contenedor”
header, h1-img

nav, a
main (aside section aside)

aside, h3-a aside, img

section, figure-img-figcaption

footer, p-img

Consideraciones para el archivo estilos.css

 Selector Propiedades
*  Margen: 0
 Borde: 0
body  Color de fondo: orange
#contenedor  Ancho ajustado al 95% de la página
 Margen superior e inferior: 30px
 Margen derecho e izquierdo: automático
header  Color de fondo: beige
header h1  Relleno: 20px
 Alineación del texto: centrado
 Color del texto: chocolate
header img  Ancho ajustado al 100% de la página
 Alineación vertical: inferior
nav  Color de fondo: yellow
nav a  Relleno: 10px
 Desplegar como elemento de bloque en línea
 Decoración de texto: ninguno
 Color del texto: red
main  Desplegar como caja flexible
aside  Ancho ajustado al 25% de la página
 Relleno: 20px
 Color de fondo: antiquewhite
aside h3  Relleno superior e inferior: 20px
 Relleno derecho e izquierdo: 0px
aside a  Relleno superior e inferior: 5px
 Relleno derecho e izquierdo: 0px
 Desplegar como elemento en bloque
 Color del texto: firebrick
aside img  Ancho ajustado al 70% de la página
 Margen superior e inferior: 20px
 Margen derecho e izquierdo: automático
 Desplegar como elemento en bloque
section  Ancho ajustado al 50% de la página
 Relleno: 5px
 Desplegar como caja flexible
 Dirección de la caja flexible: en fila
 Justificación de la caja flexible: espacio alrededor
 Envoltura de la caja flexible: envolvente
 Color de fondo: white
section figure  Ancho ajustado al 30% de la página
 Margen superior e inferior: 10px
 Borde: 1px, estilo sólido, color blue
section figure img  Ancho ajustado al 80% de la página
 Margen superior e inferior: 10px
 Margen derecho e izquierdo: automático
 Desplegar como elemento en bloque
section figure figcaption  Margen: 10px
 Alineación del texto: centrado
footer  Relleno: 10px
 Alineación del texto: centrado
 Color de fondo: green
footer p  Margen inferior: 10px
 Color del texto: white
Ejercicio_2

Diseñe la siguiente página web:

Considere las siguientes especificaciones:

1. Añada un bloque div (95% de ancho) que servirá como contenedor general.

2. Añada al contenedor general los bloques header, nav, main y footer.

3. Añada al bloque header un título h1 y una imagen img (100% de ancho) que servirá como
banner.

4. Añada al bloque nav cinco enlaces a tal como se muestra en la imagen.

5. Añada al bloque main los bloques aside (izquierda, 25% de ancho), section (centro, 50%
de ancho) y aside (derecha, 25% de ancho).

6. Añada al bloque aside izquierdo dos títulos h2 y dos listas: ul y ol tal como se muestra en
la imagen.
 7. Añada al bloque aside derecho un párrafo p y una imagen img (40% de ancho y
centrada).

8. Añada al bloque section cuatro bloques figure (50% de ancho). Cada bloque figure
contendrá una imagen img (90% de ancho) y un bloque figcaption. Disponer las figuras
tal como se muestra en el gráfico.

9. Añada al bloque footer un párrafo p y dos imágenes img con las imágenes de las redes
sociales.

Cree y aplique las reglas de estilo apropiadas con la finalidad de que la página sea idéntica a la
imagen de muestra. Las reglas de estilo deben definirse en el archivo estilos.css.

Use rellenos, márgenes y colores apropiados.

“El don de la virtud es la joya más valiosa que Dios puede darle al hombre.”
MP