Scribd
Cargar
4 vistas

Practico 01 - HTML y CSS (Parte I)

El documento detalla un práctico de HTML y CSS que incluye la creación de una página web para un periódico, abordando desde la estructura básica de un documento HTML hasta la implementación de estilos y corrección de errores en el código. Se plantean ejercicios básicos, intermedios y avanzados que incluyen la confección de secciones de noticias, aplicación de estilos corporativos y reconocimiento de malas prácticas en el código. Además, se sugiere la renovación del estilo visual del periódico y la aplicación de un formato de codificación de caracteres UTF-8.

Cargado por

Pedro Petersen
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
4 vistas

Practico 01 - HTML y CSS (Parte I)

El documento detalla un práctico de HTML y CSS que incluye la creación de una página web para un periódico, abordando desde la estructura básica de un documento HTML hasta la implementación de estilos y corrección de errores en el código. Se plantean ejercicios básicos, intermedios y avanzados que incluyen la confección de secciones de noticias, aplicación de estilos corporativos y reconocimiento de malas prácticas en el código. Además, se sugiere la renovación del estilo visual del periódico y la aplicación de un formato de codificación de caracteres UTF-8.

Cargado por

Pedro Petersen
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Práctico 1 - 2020

HTML+CSS - Parte I
1. ¿Cómo es la estructura de un documento HTML? Investigar para qué sirve cada
sección del documento.

2. ¿Para qué sirven los estilos web? ¿Cómo se aplican los estilos al contenido de una
página web?

3. ¿Qué tipos de selectores existen en CSS? ¿Cuándo conviene usar cada uno de ellos?

Sitio Web de un periódico

BÁSICO
4. Confeccionar la página principal del periódico con las marcas mínimas que debe
tener e incluyendo los elementos:
● <doctype>
● <html>
● <head>
● <body>
5. Colocar un título de nivel 1 al sitio web que funcione como nombre del
periódico.
6. Agregar una hoja de estilos para asignar color y tamaño de la fuente del título.
7. Acceder al código escrito en https://codepen.io/webUnicen/pen/qvJBbj . Detectar
errores y malas prácticas.

INTERMEDIO
8. Confeccionar dos títulos de segundo nivel con los textos Noticias Políticas y
Noticias Deportivas, en cada una de estas secciones definir dos titulares de tercer
nivel con un párrafo cada una que funcionen como resumen de cada noticia.
9. Agregar un titular de cuarto nivel con el pie de página del sitio que incluya el
nombre del periódico y el año actual.

AVANZADO
10. Terminar de implementar las noticias del sitio web que viene realizando. Cada noticia
completa debe cumplir las siguientes consignas.
● Hacer una página diferente para cada una de las noticias.
● Cada noticia debe tener el nombre del periódico y el pie de página al igual que la
página principal.
● Las noticias deben tener imágenes y al menos una debe tener una lista.
Práctico 1 - 2020

● En alguna de las noticias que tengan varios párrafos, aplicar un estilo particular y
diferente a solo uno de ellos.
11. Aplicar estilos al sitio para darle una imagen corporativa. Cada una de las páginas debe
tener una imagen visual unificada. Asigne dentro del sitio colores a las fuentes, diversos
tipos de fuentes, tamaños y estilos de texto. Utilice tamaños relativos de fuentes en las
diferentes secciones del sitio.

Ejercicios Adicionales

INTERMEDIO
12. Agregar a la pagina del periodico el formato de codificación de caracteres UTF-8
(8-bit Unicode Transformation Format).
13. Aplicar un estilo especial al texto que se encuentra en las listas.
14. El periódico decide cambiar su imagen corporativa con una renovación del estilo
visual del diario. ¿Que sugiere al periódico que haga con su sitio web?. Si las noticias
viejas también deben estar con el nuevo estilo que les recomendaría hacer?

AVANZADO
15. Reconocer errores y malas prácticas en el código escrito en
https://codepen.io/webUnicen/pen/moGWQr
-Linea 3 a 9, la class definina titulo y su llave va en el CSS
-Falta el <body></body>
-En el h2 la tipografia y caracteristicas del texto debe de ser definida en el css, el
<b> podria quitarse y definir el negrita en el css
-No definio el h3 y paso directamente al h4
-<br> no esta cerrado con </br>, aunque tampoco es necesario
-En la linea 56 usa la class=”titulo” pero luego no define las propiedades en CSS
-en la linea 58 inserta una imagen a la que le podria haber dado las propiedades en
CSS en lugar de en abrir un <p>, el cual al cerrar lo dejo dentro de la misma linea en
lugar de en la siguiente.

16. Transcribir el código del ejercicio anterior para que funcione en su navegador
local, con las correcciones realizadas y modificaciones que crea necesarias.
17. En el proyecto de https://codepen.io/webUnicen/pen/bZQZgx, se ha escrito una
parte del estilo css, pero ha quedado inconcluso. Escriba el archivo html y complete el
estilo css para que la web se vea como lo muestra la siguiente captura del navegador:
Práctico 1 - 2020

También podría gustarte