Programación WEB-TP1 2020

Trabajo Práctico N° 1
HTML y CSS

1. Piense en un pequeño proyecto o tome uno actual acotando su alcance. El proyecto

debe ser simple, por ejemplo un catálogo de productos de rubros a su elección.
2. Todos los archivos del proyecto necesarios deberán estar guardados según su
función. El contenido en un archivo con extensión html, la apariencia (CSS) en un
archivo CSS. y también todos los documentos de imágenes.
3. Una vez planteado su proyecto desarrolle un prototipo no funcional que cumple con
los siguientes requerimientos de maquetado y el bosquejo guia:
a. Tome como punto de partida la estructura básica en ​HTML5​:
i. Encabezado​: contiene menú horizontal de navegación.
ii. Cuerpo Principal​: donde se ubicará el contenido.
iii. Pie​: donde irá el nombre del proyecto, comisión, año e integrantes del
grupo
b. Seleccione una fuente de ​GOOGLE​ y agreguela a su proyecto.
c. Es recomendable usar css flexbox para organizar el contenido en el
documento.
d. La barra de navegación superior:
i. Contendrá hipervínculos para permitir saltar de una página a otra.
ii. Las opciones del menú deben resaltar cuando un usuario ubique el
puntero del mouse sobre las opciones.
iii. Resaltar la opción de menú que se encuentra activa.
e. Tabla ​Lista de Productos:
i. Las tablas de datos deben tener un color de fondo gris oscuro
#333,fuente verdana de 12px.
ii. Las cabeceras de columnas deben tener un color de fondo color gris
claro y con texto con una transformación siempre en mayúscula.
iii. Las celdas de datos deben tener una transformación de texto
capitalizado y un espacio desde el exterior de 2px.
iv. Las filas de las tablas de datos que sean pares deben tener un color
de fondo blanco.
v. Las filas de las tablas de datos que sean impares deben tener un
color de fondo gris claro.
vi. Cuando el usuario pase el mouse sobre las filas pares e impares
debe cambiar el color de fondo a amarillo.
f. En el archivo “Quienes Somos”
i. Generar una tarjeta para cada integrante del grupo.
ii. Colocar los datos personales de cada integrante del grupo.
Programación WEB-TP1 2020

Maqueta web de documento Index.html

Programación WEB-TP1 2020

Maqueta web de documento quienes_somos.html