Práctico 1 - 2020
<HTML> + {CSS} - Parte II
SITIO COMPLETO (LINKS Y RUTAS)
1. Relacionar las dos noticias elaboradas en el Práctico 1 - Parte I por medio de
hipervínculos sobre el título de las noticias.
2. Relacionar una imagen o texto de una de las noticias a cualquier página de la Web
utilizando un hipervínculo. El vínculo se debe abrir en una pestaña nueva.
LAYOUT & BOX MODEL
3. ¿Qué es el concepto Box Model y para qué se utiliza? ¿A qué tipo de páginas se
aplica?
4. Comente las diferencias entre las partes de los contenedores/bloques (content,
padding, border, y margin). ¿Cómo se calcula el tamaño total de un contenedor?
5. En Box Model existen elementos que contienen a otros. ¿Cómo influye en la
indentación y escritura clara del código ?
BÁSICO
6. Relacionar las dos noticias elaboradas en el Práctico 1 - Parte I por medio de
hipervínculos sobre el título de las noticias.
7. Relacionar una imagen o texto de una de las noticias a cualquier página de la
Web utilizando un hipervínculo. El vínculo se debe abrir en una pestaña nueva.
8. Cree una página que incluya diferentes divs. Asigne tamaños de los divs en
pixeles (px), porcentaje (%). Experimente que sucede al cambiar el tamaño de la
ventana del navegador y obtenga conclusiones.
9. Analice y experimente con los parámetros de los estilos escritos es
https://codepen.io/webUnicen/pen/GeLeBZ . Concluya cómo influyen en ejemplo las
propiedades margin, padding, border.
INTERMEDIO
10. Mediante el uso de Box Layout diseñe el siguiente layout para una página:
Práctico 1 - 2020
HEADER
CONTENT
FOOTER
11. Mediante el uso de listas, agregue una barra de navegación horizontal dentro del
header del punto anterior.
12. Modifique el ejercicio 10 para lograr el siguiente layout:
HEADER
LEFT
CONTENT RIGHT
FOOTER
AVANZADO
13. Vuelva a diagramar el sitio de noticias del práctico anterior utilizando Box Model.
Deberá tener un encabezado (donde puede ir un logo), una barra de navegación
horizontal debajo del encabezado, el contenido donde van las noticias, una barra lateral
para publicidades, y un footer con los datos del periódico.
● Las imágenes de las noticias deberán tener un margen de 5 px, y un contorno de
5px con color a elección.
● Las noticias deberán tener un extracto, que usted considere importante de la
noticia, resaltado en un rectángulo con un fondo de un color claro, con una
fuente diferente y diferente tamaño, centrado, con un borde de color.
● Los links no deberán estar subrayados
● Agregar al periódico una barra de vínculos a redes sociales con sus iconos.
Antes de comenzar, realice un esquema del layout con las posiciones y medidas deseadas.
14. En la página principal establecer tamaños de las fuentes con medidas relativas.
La primer letra de los párrafos deberá ser el doble de la del párrafo. Los títulos de h1 a
h4 deberán ir decreciendo su tamaño en un 20%.
Práctico 1 - 2020
Ejercicios Adicionales Layout
INTERMEDIO
14. Buscar en Wikipedia un tema de su interés y crear una página de contenido acerca del
mismo que contenga un índice con al menos 5 links de referencia a la misma página
(anclas, links locales).
a. Definir el elemento title que aparecerá en la barra de título de la página.
b. Definir los metadatos para indicar autor, palabras claves para buscadores,
descripción de la página y copyright.
15. Agregar un contenido a un div el cual desborde las dimensiones de altura. Pruebe las
distintas alternativas de la propiedad overflow. ¿Qué alternativa usaría para una altura
fija? ¿Y para una altura que puede variar?
16. Modificar el siguiente pen para darle un estilo particular al tooltip sin que se solape
sobre el texto.
Extras: Considerar que no se solape con una línea inferior que también tenga tooltip.
Sin cursor por encima:
Con cursor por encima:
https://codepen.io/webUnicen/pen/WpWovg
17. Agregar un menú horizontal de manera que permanezca fijo en la parte superior aun
cuando en la página se realice scroll hacia abajo.
18. Agregar un pie de página que siempre quede en la parte inferior del navegador
independientemente del largo del contenido. Esto es conocido como sticky footer.
TABLAS Y FORMULARIOS
1. ¿ Cuáles son los tags necesarios para generar un tabla ?
Práctico 1 - 2020
Determine la función de cada uno de los tags:
● <table>
● <tr>
● <td>
● <thead>
● <tbody>
● <tfoot>
2. Enuncie los tags para construir un formulario y liste los tipos del tag <input> que puede
utilizar y cual es la función de cada uno.
BÁSICO
3. Crear un formulario de registración a un sitio web que le permita ingresar al usuario los
siguientes datos y enviarlos con un botón “Registrarse”.
Datos personales
Apellido y nombre
Documento de identidad
Fecha de nacimiento
Dirección
Datos Laborales
Nombre de la empresa
Actividad
Dirección
Observaciones
Registrarse
3. A la página de noticias incluir una tabla con datos y/o estadísticas, y darle un estilo
particular, acorde al diseño.
INTERMEDIO
4. Crear una página en HTML que tenga los siguientes elementos de formulario:
● radio buttons
● checklists
● botones comunes
● text tarea
● select en sus tres tipos
● inputs ocultos con valores pre-fijados
Darle estilo al formulario para:
o Alinear todos los campos.
o Cambiar el estilo a los botones.
Práctico 1 - 2020
5. ¿Cuáles son las diferencias entre organizar una página usando división por tablas y
división mediante capas (etiqueta DIV)?
AVANZADO
6. Diseñe un formulario con el propósito que alumnos puedan inscribirse de manera
organizada en las 3 comisiones de la práctica de la asignatura. Además de los datos
que considere necesarios para el formulario debe permitir el ingreso del DNI de cada
alumno con la restricción que el número ingresado sea como máximo de 8 caracteres.
● Asigne estilos a los inputs, por ejemplo bordes, fondo y fuente
● Asignar estilo diferente cuando un input de texto es seleccionado para completar
7. Construya una tabla con las siguientes características:
● Incluya celdas combinadas
● Estilo particular para el encabezado de la tabla
● Asignar un estilo distinto para las filas pares e impares.
Ejercicios Adicionales Tablas y Formularios
INTERMEDIO
8. Crear un formulario para realizar un inventario de libros de una librería . Debe contener
Nombre del libro, Autor, Editorial, Precio, Código de Inventario, Si está en stock o no.
Debe asignar estilos y el input debe ser acorde al tipo de dato que debe ser ingresado.
9. Realice una tabla para poder listar los libros ingresados por el formulario. (Por ahora los
datos de la tabla se escriben en el archivo html, mas adelante se podrá haciendolo con
JS ). Asigne estilos a dicha tabla para que se vea distinguido el encabezado, las filas
pares e impares diferentes. Crear un estilo distinto no_stock (la lógica para que se
aplique se verá luego con JS)
