100 Días de Código en Python — Día 41: Fundamentos web — Introducción a HTML

🎯 Objetivo de aprendizaje#

Al finalizar, podrás explicar con tus palabras el recorrido de una petición web: cliente → proveedor de Internet → DNS → dirección IP → servidor → cliente.

🧠 ¿Qué aprenderemos?#

Cliente, servidor, ISP, DNS, dirección IP, IP dinámica, CDN y cables submarinos.

📖 Explicación conceptual#

La profesora desmonta un mito: Internet no es una nube. Es, en esencia, una enorme red de cables que conecta computadores entre sí.

El recorrido cuando escribes google.com:

1. Tu navegador envía la petición a tu ISP.
2. El ISP la pasa a un servidor DNS, que busca la dirección IP de google.com.
3. La IP regresa a tu navegador.
4. Tu navegador hace una petición directa a esa IP, donde están los servidores de Google.
5. Los servidores responden con los archivos de la página.

IP dinámica y CDN: si buscas hoy la IP de Google y la buscas en un mes, puede cambiar. Muchos sitios usan redes de distribución de contenidos (CDN), que te conectan al servidor más cercano a ti. Por eso la profesora pide no copiar la IP que aparece en su video, sino buscar la tuya.

Los océanos: los continentes se conectan con cables submarinos de fibra óptica que transmiten datos con láser. Se pueden explorar en submarinecablemap.com.

🔎 Ejemplo explicado: buscar la IP de un sitio#

El curso propone la página nslookup.io. En Windows también existe el comando nslookup y, como ya sabes Python, puedes preguntarle al DNS desde un programa:

import socket

sitio = "google.com"
ip = socket.gethostbyname(sitio)   # le pide al DNS la IP del nombre
print(f"La IP de {sitio} es {ip}")

• Qué problema resuelve: traduce un nombre legible por humanos a la dirección que usan las máquinas.
• Resultado esperado: una dirección del tipo 142.250.x.x. Tu resultado será diferente al de tus compañeros si están en otra red, y puede cambiar otro día (CDN e IP dinámica).
• Prueba final del curso: copia la IP en la barra del navegador. En el video de la profesora aparece la página de Google.

🛠️ Nota técnica: hoy abrir una IP directamente en el navegador no siempre funciona. Muchos servidores alojan varios sitios en la misma IP y usan HTTPS con certificados emitidos para el nombre (no para la IP), así que el navegador puede mostrar un error de certificado o una página vacía. Eso no contradice la idea central: el DNS sí traduce el nombre a una IP.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: usa nslookup en la terminal o el programa de Python para buscar la IP de tres sitios que visites a menudo. Anota los resultados en una tabla.
• 🟡 Reto 2 — Ampliación: modifica el programa para que reciba una lista de sitios y muestre la IP de cada uno. Si un nombre no existe, debe mostrar "No encontrado" en lugar de detenerse (pista: try/except socket.gaierror, Día 30).
• 🟠 Reto 3 — Desafío: repite la búsqueda de un sitio desde la red del colegio y desde la red de tu casa (o datos móviles). ¿Obtienes la misma IP? Explica el resultado usando los conceptos de CDN e IP dinámica.
• 🔴 Reto 4 — Pensamiento computacional: dibuja un diagrama del recorrido de una petición desde el computador de la sala de informática hasta el servidor de la plataforma académica del colegio. Identifica cliente, ISP, DNS y servidor. ¿Qué pasaría si el DNS dejara de funcionar pero Internet siguiera activo?

🎯 Objetivo de aprendizaje#

Distinguir la función de HTML, CSS y JavaScript y usar las herramientas para desarrolladores del navegador para inspeccionar una página.

📖 Explicación conceptual#

El navegador (Chrome, Safari, Firefox…) recibe del servidor, en general, tres tipos de archivos. La profesora usa la analogía de construir una casa:

Ejemplo del curso con la página de Google: el HTML pone el logo, la caja de búsqueda y dos botones; el CSS les da el aspecto que conocemos; el JavaScript hace que funcionen.

🔎 Ejemplo explicado: editar una página "en vivo"#

1. Abre en Chrome un sitio de noticias (el curso usa techcrunch.com).
2. Haz clic derecho sobre un titular → Inspeccionar.
3. Se abren las herramientas para desarrolladores (DevTools), con el código resaltado.
4. Haz doble clic sobre el texto del titular en el panel y cámbialo.
5. Recarga la página (F5): tu cambio desaparece.

¿Por qué? Porque editaste la copia local que descargó tu navegador. Al recargar, el navegador hace una nueva petición al servidor y recibe el archivo original. No cambiaste nada en el servidor ni para otras personas.

🏫 Para el aula (adaptación): el curso sugiere usar este truco como broma. Con este mismo método se pueden fabricar capturas falsas de noticias o de notas. Una captura de pantalla no es una prueba de lo que dice un sitio web. Úsalo solo para aprender, y nunca para engañar a otras personas.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: inspecciona la página de inicio del sitio web de tu colegio o de tu municipio. Encuentra en el código el texto del título principal.
• 🟡 Reto 2: en la misma página, identifica un elemento que sea estructura (HTML), uno que sea apariencia (por ejemplo, un color) y uno que tenga comportamiento (un menú que se abre, un botón). Justifica cada uno.
• 🟠 Reto 3: cambia un texto con DevTools, toma una captura y luego recarga. Escribe un párrafo que explique a un familiar por qué una captura de pantalla puede no ser confiable.
• 🔴 Reto 4: si HTML, CSS y JavaScript fueran tres personas en un equipo, ¿qué pasaría si una sola persona hiciera todo? Relaciónalo con la idea de dividir un programa en funciones que trabajaste en Python.

📝 Contenido original del curso#

1. Visual Studio Code, el editor gratuito de Microsoft (code.visualstudio.com).
2. Extensiones de VS Code:
   • Live Preview (Microsoft): muestra la página mientras escribes.
   • Prettier: da formato automático al código.
   • vscode-icons: íconos para identificar tipos de archivo.
3. Google Chrome, recomendado por sus herramientas para desarrolladores, aunque uses otro navegador en tu día a día.

🛠️ Nota técnica: el curso advierte que algunos videos muestran el editor Atom. GitHub retiró Atom en diciembre de 2022, así que donde el video diga "Atom" debes usar VS Code.

🏫 Para el aula#

• Cómo previsualizar: clic derecho sobre index.html → Show Preview (Live Preview).
• Organización recomendada por el curso: crea una carpeta llamada Proyectos de Desarrollo Web y guarda allí cada ejercicio descomprimido.
• En los computadores del colegio, si no puedes instalar extensiones, abre el archivo .html directamente en el navegador (doble clic) y recarga (F5) cada vez que guardes.

⚠️ Errores frecuentes#

🎯 Objetivo de aprendizaje#

Explicar qué significan hipertexto y lenguaje de marcado, y reconocer una etiqueta HTML.

📖 Explicación conceptual#

HTML = HyperText Markup Language (lenguaje de marcado de hipertexto).

• Se puede hacer una página solo con HTML, pero no solo con CSS ni solo con JavaScript. Las primeras páginas web eran solo HTML.
• Hipertexto: texto que enlaza con otros documentos. Es la base de la web. El curso muestra el primer sitio web, creado por Tim Berners-Lee, lleno de enlaces azules que llevan a otros archivos HTML.
• Lenguaje de marcado: marcas que indican qué es cada parte de un texto. En español, las comillas "marcan" una cita. Un editor de periódico marca con un garabato lo que va en negrita. En HTML, las marcas se llaman etiquetas.

La profesora aclara que existen muchísimas etiquetas, pero en la práctica se usa un grupo pequeño. No hay que memorizarlas: se aprenden a medida que se necesitan.

🛠️ Nota técnica: el video dice que Tim Berners-Lee es "el inventor de Internet". En realidad inventó la World Wide Web (la web: HTML, HTTP y las URL) en 1989–1991. Internet (la red de redes que transporta los datos) existía desde antes, gracias al trabajo de muchas personas, como Vint Cerf y Bob Kahn (protocolo TCP/IP).

Pregunta para discutir#

Si HTML "marca" el texto, ¿qué parte de un libro de texto del colegio sería un título, qué parte un párrafo y qué parte un enlace a otro documento?

🎯 Objetivo de aprendizaje#

Escribir encabezados HTML con la jerarquía correcta y distinguir etiqueta de elemento.

🧠 ¿Qué aprenderemos?#

Etiqueta de apertura, etiqueta de cierre, contenido, elemento y los seis niveles de encabezado.

📖 Explicación conceptual#

<h1>Hola mundo</h1>

Cualquier cosa entre paréntesis angulares < > es una etiqueta. El elemento incluye las etiquetas y el contenido.

¿Para qué sirven los encabezados? La idea viene de los libros: el índice tiene una jerarquía (título del libro → capítulos → secciones → subsecciones). En HTML hay seis niveles, de h1 (el más importante y, por defecto, el más grande) a h6 (el menos importante). No existe h7.

Reglas de buena práctica del curso:

1. Un solo h1 por página: es el título principal, como el título del libro.
2. No saltar niveles: de h1 pasa a h2, no directamente a h3.

Estas reglas no rompen la página si no se cumplen: son convenciones profesionales. Ayudan a los lectores de pantalla y a los buscadores a entender la estructura.

La profesora recomienda consultar MDN Web Docs (Mozilla Developer Network) cuando uses un elemento nuevo.

🔎 Ejemplo explicado#

<h1>Manual del estudiante</h1>
<h2>Capítulo 1: Convivencia</h2>
<h3>1.1 Derechos</h3>
<h3>1.2 Deberes</h3>
<h2>Capítulo 2: Evaluación</h2>

• Qué problema resuelve: muestra que "Derechos" y "Deberes" pertenecen a "Convivencia", y que "Evaluación" es otro capítulo del mismo nivel.
• Resultado esperado: cinco líneas de tamaños distintos; las de nivel h2 se ven iguales entre sí, y también las de nivel h3.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: el índice de un libro (2.1 Heading Element)#

• Enunciado: el index.html de inicio tiene el índice de un libro escrito como texto plano: todo aparece en una sola línea. Hay que usar encabezados para que la vista previa quede igual a la imagen objetivo.
• Objetivo: reflejar la jerarquía del índice con h1 a h4.
• Conceptos: etiquetas de apertura y cierre, jerarquía de encabezados.
• Resultado esperado (según el video): "Book" como h1; "Chapter 1", "Chapter 2" y "Chapter 3" como h2; las secciones de cada capítulo como h3; y "Diagram 1", que está dentro de la sección 1 del capítulo 2, como h4.
• Restricción: solo agregar etiquetas; no cambiar el texto.

🔍 Antes de programar#

• ¿Cuál es el elemento más importante de la página? ¿Cuántos hay?
• ¿Qué elementos están al mismo nivel entre sí?
• ¿"Diagram 1" pertenece a un capítulo o a una sección? ¿Qué nivel le corresponde entonces?
• ¿Cómo comprobarás que terminaste? (Pista: compara con la imagen goal.png.)

<h1>Book</h1>
<h2>Chapter 1</h2>
<h3>Section 1</h3>
<!-- ... continúa con el resto de capítulos y secciones ... -->

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: escribe con encabezados la tabla de contenidos de un libro de texto que uses en otra asignatura (mínimo tres niveles).
• 🟡 Reto 2 — Ampliación: encuentra en el índice de ese libro un punto que necesitaría siete niveles. ¿Cómo lo resolverías si no existe h7? Propón una reorganización.
• 🟠 Reto 3 — Desafío (depuración): este fragmento tiene tres errores. Encuéntralos sin abrir el navegador y después comprueba:

  <h1>Feria de la ciencia</h1>
  <h3>Categorías<h3>
  <h2>Física</h1>
  <h2>Biología</h2>

• 🔴 Reto 4 — Pensamiento computacional: el reglamento de un torneo deportivo del colegio tiene título, tres deportes, reglas generales y reglas específicas por deporte. Diseña primero en papel el árbol de jerarquía y después escríbelo en HTML. Justifica cada nivel elegido.

🎯 Objetivo de aprendizaje#

Separar un texto en párrafos con <p> y explicar por qué importa para la accesibilidad.

📖 Explicación conceptual#

<p>Este es un párrafo.</p>

¿Por qué no basta con escribir el texto con Enter? Porque el navegador ignora los saltos de línea del archivo: todo el texto plano queda en una sola línea continua. Con <p>, cada párrafo queda separado por un espacio.

Accesibilidad: las personas ciegas usan lectores de pantalla, que detectan el inicio de cada párrafo y permiten saltar de uno a otro. Sin <p>, el lector no sabe dónde empieza y termina cada idea.

Lorem ipsum: texto de relleno para diseñar cuando aún no hay contenido real. Proviene de un texto de Cicerón de hace más de 2 000 años y se usa en la imprenta desde el siglo XVI. Es mejor que escribir "contenido contenido contenido", porque imita la longitud y el ritmo de un texto natural. Se genera en lipsum.com, y hay variantes divertidas (Bacon Ipsum, Bro Ipsum, Pirate Ipsum…).

🔎 Ejemplo explicado#

<p>El reciclaje reduce la cantidad de residuos que llegan al relleno sanitario.</p>
<p>En el colegio hay tres canecas: blanca, negra y verde.</p>

Resultado esperado: dos bloques de texto separados por un espacio vertical. Si quitas las etiquetas, verás ambas frases pegadas en la misma línea.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: tres párrafos (2.2 Paragraph Element)#

• Enunciado: el index.html tiene tres párrafos de texto en latín (Lorem ipsum) que se ven mezclados en una línea. Hay que separarlos.
• Objetivo: que la vista previa muestre tres párrafos distintos.
• Conceptos: elemento p.
• Resultado esperado: cada párrafo en su propio bloque, igual que en la imagen objetivo.

🔍 Antes de programar#

• ¿Cómo sabes dónde termina un párrafo si el texto está en latín y no lo entiendes? (Pista: mira el archivo, no la vista previa.)
• ¿Cuántas etiquetas de apertura y cuántas de cierre necesitas en total?

Reto extra del curso: genera tu propio texto de relleno (Lorem, Bacon o Bro Ipsum) y crea un "artículo" con varios párrafos.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: crea un artículo sobre tu deporte favorito con un h1, dos h2 y al menos dos párrafos bajo cada h2, usando texto de relleno.
• 🟡 Reto 2: reemplaza el texto de relleno por contenido real escrito por ti. Compara: ¿cambia el aspecto visual? ¿Por qué los diseñadores prefieren Lorem ipsum al empezar?
• 🟠 Reto 3: activa el lector de pantalla de tu sistema (Narrador en Windows: Ctrl + Win + Enter) y escucha tu página con y sin etiquetas <p>. Describe la diferencia.
• 🔴 Reto 4: escribe un pequeño programa en Python que reciba un texto largo con párrafos separados por líneas en blanco y genere el HTML con cada párrafo dentro de <p>...</p> (pista: texto.split("\n\n") y un ciclo for). Así conectas lo que ya sabes con lo nuevo.

🎯 Objetivo de aprendizaje#

Usar correctamente los elementos vacíos <hr /> y <br />, y decidir cuándo no usarlos.

📖 Explicación conceptual#

Un elemento vacío (void element) no puede tener contenido. Por eso tiene una sola etiqueta y no tiene etiqueta de cierre.

¿Dónde va la barra?

• Etiqueta de cierre: </p> → la barra va después de <.
• Elemento vacío: <br /> → la barra va antes de >, normalmente con un espacio.
• Cuidado: es la barra /, no la barra invertida \.

¿<br> o <br />? Las dos son válidas. En HTML5 el navegador ignora la barra final. La profesora recomienda escribirla porque así un humano distingue a simple vista un elemento vacío de uno que necesita cierre.

🔎 Ejemplo explicado: el poema de William Blake#

<p>
  To see a World in a Grain of Sand<br />
  And a Heaven in a Wild Flower,<br />
  Hold Infinity in the palm of your hand<br />
  And Eternity in an hour.
</p>

• Por qué un solo <p>: el poema es una unidad; no son cuatro párrafos.
• Por qué <br />: sin saltos, los versos quedarían en una sola línea y se perdería el ritmo.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: la página de William Blake#

• Enunciado: el index.html contiene el nombre del poeta, su dirección y dos párrafos de Wikipedia sobre él, todo desordenado.
• Resultado esperado (según el video):
  1. El nombre como h1.
  2. La dirección en un párrafo, con cada línea separada por <br />.
  3. Un <hr /> entre la dirección y la descripción.
  4. La descripción en dos párrafos separados.
• Consejo del curso: para comparar tu código con la solución, usa diffchecker.com: pega ambos textos y resalta las diferencias. La profesora muestra que un espacio extra no importa, pero una etiqueta de cierre mal escrita cambia toda la página.

🔍 Antes de programar#

• ¿Cuántos párrafos hay en total? ¿La dirección es un párrafo o varios?
• ¿Qué elemento separa dos temas distintos?
• ¿Dónde exactamente va cada <br />: al principio o al final de la línea?

💡 Alternativa (adaptación): HTML tiene el elemento <address> para datos de contacto. No lo pide el curso, pero puedes consultarlo en MDN y compararlo con la solución que usa <p>.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: escribe la letra de una canción o un poema colombiano que te guste (por ejemplo, de José Asunción Silva) con un <p> por estrofa y <br /> por verso.
• 🟡 Reto 2: crea la "tarjeta de contacto" del colegio: nombre como h1, dirección en un párrafo con saltos, <hr />, y un párrafo sobre su historia.
• 🟠 Reto 3 — Depuración: un compañero usó ocho <br /> seguidos para separar dos secciones. Explica por qué es mala práctica y reescribe el código correctamente.
• 🔴 Reto 4: decide para cada caso si usarías <p>, <br /> o <hr />, y justifica: (a) una receta con ingredientes y pasos; (b) el cambio de tema entre "Noticias" y "Eventos"; (c) una dirección postal; (d) dos ideas distintas sobre el mismo tema.

Problema#

Cuando alguien te pide una recomendación de película, no recuerdas cuáles has visto y te gustaron. La profesora se inspiró en rogerebert.com, el sitio de un famoso crítico de cine que registraba críticas de todo lo que veía.

Contexto#

Este proyecto sirve para cualquier lista personal: películas, series, libros, videojuegos o canciones. Es tu primera página web completa hecha desde cero.

Objetivo#

Construir una página web que muestre al menos tres películas favoritas y explique por qué te gustan.

Requisitos funcionales (originales del curso)#

1. Un h1 como título de la página.
2. Un h2 como subtítulo.
3. Un <hr /> como elemento vacío después del subtítulo.
4. Tres películas, cada una con un h3.
5. Un párrafo (<p>) que explique por qué te gustó cada película.

Solución de la profesora (resumen del video): h1 "Las mejores películas de todos los tiempos según Angela"; h2 "Mis 3 mejores películas"; <hr />; y como h3: El viaje de Chihiro (su anime favorito), Ex Machina (ciencia ficción) y Drive (por su fotografía), cada una con un párrafo corto.

Restricciones técnicas#

Solo puedes usar lo aprendido hoy: h1–h6, p, hr y br.

Planificación#

1. Comprender: ¿qué información mostrará la página?
2. Entradas: tus tres películas y tus razones.
3. Proceso: organizar la información por jerarquía.
4. Salida: una página que se vea como la imagen objetivo, pero con tu contenido.
5. Dividir: encabezado de la página / separador / película 1 / película 2 / película 3.
6. Diseñar: escribe primero en papel el "esqueleto" con los nombres de las etiquetas.
7. Implementar, 8. Probar, 9. Corregir, 10. Mejorar (ver abajo).

Construcción paso a paso#

• Versión 1 — Esqueleto: solo el h1 y el h2. Previsualiza.
• Versión 2 — Separador: agrega <hr />. Comprueba que aparece la línea.
• Versión 3 — Las películas: agrega los tres h3. Lee solo los títulos: ¿se entiende la estructura?
• Versión 4 — Contenido: agrega un párrafo por película.
• Versión final — Personalización: agrega lo que quieras con <br />, más párrafos o un poema sobre tu película favorita (idea de la profesora).

Pruebas#

🧪 Prueba y depuración#

Este código tiene cuatro errores. Encuéntralos, explica qué efecto produce cada uno y corrígelos:

<h1>Mis películas favoritas<h1>
<h2>Top 3 de 2026</h2>
<hr></hr>
<h3>Encanto</h3>
<p>Porque muestra la cultura colombiana y su música.
<h4>Coco</h4>
<p>Por su historia sobre la familia.</p>
<h3>Intensamente 2</h3>
<p>Porque explica las emociones <br\> de forma divertida.</p>

⭐ Extensión del proyecto#

• Agrega una calificación de 1 a 5 estrellas con el carácter ★ (pista: el Día 42 verás por qué la página necesita <meta charset="UTF-8"> para mostrar bien ese símbolo).
• Agrega una sección "Películas que no recomiendo" separada por otro <hr />.
• Escribe los datos (director, año, duración) en un párrafo con <br /> entre cada dato.

Situación#

La tienda escolar quiere publicar su menú para que los estudiantes sepan qué hay antes del descanso y no se formen filas largas preguntando precios.

Requisitos#

1. Un título principal y un párrafo de bienvenida con el horario de atención.
2. Al menos tres categorías (por ejemplo: bebidas, comidas, frutas).
3. Al menos tres productos por categoría, con su nombre, precio y una descripción corta.
4. Una sección final de "Información importante" (medios de pago, productos sin azúcar, etc.) separada del resto.
5. Solo puedes usar h1–h6, p, br y hr.

Decisiones que debes tomar (y justificar por escrito)#

• ¿Qué nivel de encabezado tiene cada producto?
• ¿El precio va en el mismo párrafo que la descripción, separado con <br />, o en otro párrafo?
• ¿Dónde tiene sentido un <hr /> y dónde sobraría?

Casos de prueba#

• Si alguien lee solo los encabezados, ¿entiende cómo está organizado el menú?
• ¿Hay un único h1?
• ¿Algún producto quedó con un nivel de encabezado diferente al de los demás de su categoría?

Situación problema#

Muchos grupos del colegio (el semillero de investigación, el club de robótica, el grupo de danza, el comité ambiental) no tienen un sitio web. La información sobre sus reuniones, sus logros y cómo unirse se pierde en grupos de chat.

Pregunta orientadora#

¿Cómo podemos construir un sitio web claro, accesible y atractivo que presente un grupo o proyecto del colegio a la comunidad educativa?

Etapa 1 (hoy): el contenido y la estructura#

1. Elige un grupo o proyecto real del colegio (o uno que te gustaría crear).
2. Escribe index.html solo con lo aprendido hoy:
   • h1 con el nombre del grupo.
   • Un párrafo de presentación (¿quiénes son?, ¿qué hacen?).
   • <hr />.
   • Al menos tres secciones con h2 (por ejemplo: "Qué hacemos", "Logros", "Cómo unirse"), cada una con uno o más párrafos.
   • Un dato de contacto o lugar de reunión en un párrafo con <br />.
3. Entregable de la etapa: el archivo index.html y una hoja con el "árbol de encabezados" dibujado a mano.

En las siguientes etapas agregarás: estructura completa, listas, enlaces e imágenes (Día 42); CSS externo y selectores (Día 43); colores, fuentes y modelo de caja (Día 44).

Conceptuales#

1. Explica la diferencia entre cliente y servidor con un ejemplo del colegio.
2. ¿Qué hace un servidor DNS? ¿Por qué se compara con una guía telefónica?
3. ¿Qué diferencia hay entre una etiqueta y un elemento?
4. ¿Por qué se recomienda un solo h1 por página si el navegador acepta varios?
5. ¿Qué es un elemento vacío? Da dos ejemplos.

Análisis de código#

¿Qué problema de accesibilidad tiene este código? ¿Cómo lo arreglarías?

<p>Primera idea sobre el agua.<br /><br />Segunda idea sobre el aire.<br /><br />Tercera idea sobre el suelo.</p>

Predicción#

Sin abrir el navegador, describe cómo se verá esta página. Luego compruébalo.

<h2>Horario</h2>
Lunes: matemáticas
Martes: sociales
<p>Miércoles: inglés</p>

Depuración#

Encuentra y corrige los errores:

<h1>Club de ajedrez</h2>
<p>Nos reunimos los jueves.</p
<hr/>
<h3>Integrantes</h3>

Modificación#

Toma tu Ranking de películas y conviértelo en un "Ranking de libros del plan lector", agregando un cuarto nivel de encabezado para las citas favoritas de cada libro.

Creación#

Crea desde cero la página "Mi horario de clases" con un h1, un h2 por día de la semana y un párrafo por día con cada materia separada por <br />. Justifica por qué aquí sí es adecuado usar <br />.