INSTITUTO DE EDUCACIÓN SUPERIOR CIBERTEC

DIRECCIÓN ACADÉMICA
CARRERA PROFESIONALES

CURSO : Arquitectura de Entornos Web

PROFESOR : Jorge Villavicencio Diaz
SEMESTRE : 2023 – 2
NOTA
CICLO : Primero
SECCIÓN : Todas
GRUPO : 01
FECHA : 20 de Noviembre

ALUMNO (A) :

CASO DE LABORATORIO 3 (T3)

Logro:

Tenga presente que el logro de esta evaluación es que usted realice la maquetación de la web
usando etiquetas HTML5 y estilos CSS3. También, agregando elementos multimedia.

Consideraciones generales:
 Si dos o más alumnos presentan la misma solución, recibirán la nota 99 (cero anulado).
 Utilice sus propias imágenes y contenidos siguiendo el mismo formato de la muestra.
 Resuelva el examen en la carpeta de trabajo y al finalizar renómbrela con sus nombres y
apellidos en la forma ApellidosNombres. Por ejemplo: GarciaPradoDavid.
 Comprima la carpeta renombrada y súbala al aula virtual.
 Solo serán calificadas las soluciones presentadas a través de la plataforma de Blackboard en
el tiempo indicado.

Consolidado

Puntaje Llenar solo en caso de Recalificación justificada

Pregunta
Máximo Obtenido Sustento Puntaje
1 20

Nota Recalificada

IESTP CIBERTEC 1
Pregunta 1 (20 puntos)

Diseñe la página web que se muestra (cambie de tema):

Considere las siguientes especificaciones:

1. Bloque div: Contenedor principal, 1200px de ancho y centrado.

2. Bloque banner: Agregue como contenido interior un encabezado h1 (Welcome), un texto

descriptivo y una imagen de fondo. Asigne estilos apropiados para centrar el encabezado y
para que el ancho de la imagen sea 100% de su contenedor.

IESTP CIBERTEC 2
 3. Bloque encabezado: Agregue un LOGO y una barra de navegación que tenga como
contenido cuatro hipervínculos (páginas externas libres). Asigne estilos apropiados para
quitar el subrayado de los hipervínculos y para que al pasar el mouse (a:hover) sobre
cualquier de ellos se muestre con un color de fondo diferente.

4. Bloque aside izquierdo (20% de ancho): Agregue como contenido cuatro hipervínculos.
Asigne estilos apropiados para quitar el subrayado de los hipervínculos y para que al pasar
el mouse sobre cualquier de ellos se muestre subrayado.
5. Bloque section (60% de ancho): Agregue cuatro bloques en su interior. Cada bloque
contendrá una imagen img (80% de ancho) y un texto descriptivo (titulo y precio). Asigne
estilos apropiados de manera que se muestren centrados.
6. Bloque aside derecho (20% de ancho): Agregue un video de youtube (ver muestra).
7. Bloque footer: Agregue un párrafo p para los derechos de autor y dos imágenes img con
las imágenes de las redes sociales. Asigne estilos apropiados de manera que el párrafo y
las imágenes se muestren centrados.

Las reglas de estilo deben definirse en el archivo estilos.css. Use rellenos, márgenes y colores
apropiados.

Rúbrica
Pregunta Excelente Bueno Deficiente
Contenedor Añade el bloque, crea la regla Añade el bloque pero no crea la regla No añade el bloque.
(1.0p) de estilo correspondiente y la de estilo correspondiente.
aplica.
1.0 puntos 0.5 puntos 0 puntos
Bloque banner Diseña el bloque y sus elementos, Diseña el bloque y sus elementos pero no No añade el bloque.
(2.0p) crea las reglas de estilo crea las reglas de estilo correspondientes.
correspondientes y las aplica.
2.0 puntos 1.0 puntos 0 puntos
Bloque nav Diseña el bloque y sus elementos, Diseña el bloque y sus elementos pero no No añade el bloque.
(3.0p) crea las reglas de estilo crea las reglas de estilo correspondientes.
correspondientes y las aplica.
3.0 puntos 1.5 puntos 0 puntos
Bloque aside Diseña el bloque y sus elementos, Diseña el bloque y sus elementos pero no No añade el bloque.
(3.0p) crea las reglas de estilo crea las reglas de estilo correspondientes.
correspondientes y las aplica.
3.0 puntos 1.5 puntos 0 puntos
Bloque section Diseña el bloque y sus elementos, Diseña el bloque y sus elementos pero no No añade el bloque.
(6.0p) crea las reglas de estilo crea las reglas de estilo correspondientes.
correspondientes y las aplica.
6.0 puntos 3.0 puntos 0 puntos
Bloque aside Diseña el bloque y sus elementos, Diseña el bloque y sus elementos pero no No añade el bloque.
(3.0p) crea las reglas de estilo crea las reglas de estilo correspondientes.
correspondientes y las aplica.
3.0 puntos 1.5 puntos 0 puntos
Bloque footer Diseña el bloque y sus elementos, Diseña el bloque y sus elementos pero no No añade el bloque.
(2.0p) crea las reglas de estilo crea las reglas de estilo correspondientes.
correspondientes y las aplica.
2.0 puntos 1.0 puntos 0 puntos

IESTP CIBERTEC 3