100 Días de Código en Python — Día 42: Fundamentos web — HTML intermedio

🎯 Objetivo de aprendizaje#

Escribir de memoria la plantilla básica de un documento HTML5 y explicar la función de cada línea.

🧠 ¿Qué aprenderemos?#

<!DOCTYPE html>, html y el atributo lang, head, meta charset, title, meta viewport, body, anidamiento e indentación, y el atajo ! de VS Code.

📖 Explicación conceptual#

Así como una carta tiene partes fijas (dirección, saludo, cuerpo, despedida y firma), un archivo HTML tiene una estructura fija llamada boilerplate:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi sitio web</title>
  </head>
  <body>
    <h1>Hola</h1>
  </body>
</html>

La analogía de la hamburguesa (del curso): <html> y </html> son el pan de arriba y el de abajo; head y body son capas intermedias; el contenido del body es "la carne". Todo lo que se abre dentro de algo debe cerrarse dentro de ese mismo algo.

Indentación: cada nivel de anidamiento se desplaza (por ejemplo, dos espacios) para ver de un vistazo qué está dentro de qué. Un elemento corto puede ir en una sola línea (<title>Mi sitio</title>); sigue teniendo apertura y cierre.

Atajo de VS Code: en un archivo que termine en .html, escribe ! y presiona Enter: VS Code (con su herramienta Emmet) inserta la plantilla. La profesora recomienda escribirla a mano las primeras veces para aprenderla.

🛠️ Nota técnica: en el video, el atajo ! inserta también <meta http-equiv="X-UA-Compatible" content="IE=edge">. Esa línea solo servía para Internet Explorer, que ya no tiene soporte. La profesora recomienda borrarla, y las versiones recientes de VS Code ya no la incluyen. Además, el atajo pone lang="en": si tu página está en español, cámbialo a lang="es".

💡 Ver el código de cualquier página: clic derecho → Ver código fuente de la página. Verás el DOCTYPE, el html, el head con su charset y el title.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: construye tu propia hamburguesa#

• Enunciado: escribe en VS Code una "hamburguesa" en código HTML, inventando elementos como <bun>, <tomato> o <lettuce>, cada uno con etiqueta de apertura y de cierre, y agrega atributos (nombre, signo igual y valor).
• Objetivo: practicar anidamiento, indentación y la sintaxis de los atributos.
• Condición: mantener la indentación correcta; todo lo que se abre, se cierra.

Ejemplo del formato que muestra la profesora (el resto lo inventas tú):

<bun type="sesame">
  <lettuce fresh="true"></lettuce>
  <!-- ...tus capas... -->
</bun>

🛠️ Nota técnica: los elementos inventados como <bun> no son HTML válido. El navegador no da error: los trata como elementos desconocidos sin significado. Sirven para practicar la sintaxis del anidamiento, pero no se usan en páginas reales. (Existen los custom elements de JavaScript, pero su nombre debe llevar un guion, como <mi-hamburguesa>, y se estudian mucho más adelante.)

🔍 Antes de programar#

• ¿Qué capa es "la raíz" de tu hamburguesa, la que contiene a todas las demás?
• ¿Qué capas van dentro de otras y cuáles están al mismo nivel?
• ¿Qué información extra (atributo) tiene sentido para cada ingrediente?

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: escribe de memoria la plantilla completa, sin usar el atajo !. Compárala con la de esta guía y anota qué olvidaste.
• 🟡 Reto 2: cambia lang a "en" en una página escrita en español y escúchala con el lector de pantalla (Narrador: Ctrl + Win + Enter). Describe qué cambia.
• 🟠 Reto 3 — Depuración: esta plantilla tiene cuatro errores. Encuéntralos:

  <html lang="es">
  <!DOCTYPE html>
    <head>
      <title>Club de lectura</title>
      <h1>Bienvenidos</h1>
    </head>
    <body>
      <p>Nos reunimos los martes.</p>
    </html>
  </body>

• 🔴 Reto 4 — Pensamiento computacional: representa el horario semanal de tu curso como una hamburguesa HTML inventada (<semana>, <dia nombre="lunes">, <clase hora="7:00">…). Luego responde: ¿cómo representarías la misma información en Python? Escribe la estructura equivalente con listas y diccionarios y compara ambas.

🎯 Objetivo de aprendizaje#

Elegir entre lista desordenada y lista ordenada según el significado del contenido.

📖 Explicación conceptual#

Internet está lleno de listas: los artículos de "10 cosas que…", la lista de "Los diez más buscados del FBI" (que, como muestra la profesora con Inspeccionar, está hecha con una lista)…

<ul>
  <li>Leche</li>
  <li>Huevos</li>
  <li>Pan</li>
</ul>

ul y ol no llevan texto directamente: su contenido son elementos li. En una ol, el número de cada ítem depende de su posición.

Estilo de escritura: la profesora prefiere cada <li> en una sola línea para contar los ítems de un vistazo. Si el texto es largo, VS Code puede pasar el cierre a la siguiente línea. Las dos formas son válidas.

🔎 Ejemplo explicado#

<h2>Para la salida pedagógica</h2>
<ul>
  <li>Gorra</li>
  <li>Bloqueador solar</li>
  <li>Agua</li>
</ul>

<h2>Protocolo en caso de sismo</h2>
<ol>
  <li>Mantén la calma.</li>
  <li>Aléjate de ventanas.</li>
  <li>Sigue la ruta de evacuación.</li>
</ol>

¿Por qué dos tipos? Da igual si empacas primero la gorra o el agua, pero en un protocolo de sismo el orden salva vidas.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: receta de rollos de canela (3.0 List Elements)#

• Enunciado: el index.html trae el texto de una receta de rollos de canela. Hay que convertirlo en una página con encabezados y listas.
• Resultado esperado (según el video):
  • Un h1 para el nombre de la receta.
  • h2 para "Ingredientes" e "Instrucciones".
  • h3 para las subsecciones de ingredientes (la masa y el relleno). El nivel exacto de los encabezados es libre; lo que importa son las listas.
  • Una ul con los ingredientes de la masa y otra ul con los tres ingredientes del relleno.
  • Una ol con los pasos de preparación.
• Restricción: el texto ya está escrito; solo se agregan etiquetas.

🔍 Antes de programar#

• ¿Importa el orden en que se listan los ingredientes? ¿Y el de los pasos?
• ¿Cuántas listas hay en total? ¿De qué tipo es cada una?
• Si alguien leyera solo los encabezados, ¿entendería cómo está organizada la receta?

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: escribe la receta de un plato típico de tu región (arepas, sancocho, empanadas…) con ingredientes en ul y pasos en ol.
• 🟡 Reto 2: consulta en MDN el atributo reversed de <ol> y úsalo para un "conteo regresivo" de las 5 mejores canciones del año.
• 🟠 Reto 3: convierte los útiles escolares pedidos para grado décimo en una lista agrupada por asignatura. ¿Cuál es la forma más clara sin usar todavía listas anidadas?
• 🔴 Reto 4: escribe un programa en Python que reciba una lista de Python (["Leche", "Huevos", "Pan"]) y un valor booleano ordenada, y genere el código HTML de la lista (<ol> o <ul> con sus <li>). Pruébalo con dos listas distintas.

🎯 Objetivo de aprendizaje#

Crear listas anidadas correctamente y usar la indentación para encontrar errores de cierre.

📖 Explicación conceptual#

Se puede poner una lista dentro de un elemento de lista. La regla clave del curso:

Cuando anidas una lista, el </li> del elemento "padre" no va justo después de su texto: va después de cerrar la lista anidada.

<ul>
  <li>A</li>
  <li>
    B
    <ol>
      <li>B1</li>
      <li>B2</li>
    </ol>
  </li>          <!-- aquí se cierra el li de "B" -->
  <li>C</li>
</ul>

¿Por qué indentar? Mira este mismo código sin sangría:

<ul><li>A</li><li>B<ol><li>B1</li><li>B2</li></ol></li><li>C</li></ul>

Funciona igual, pero para entenderlo hay que leer cada etiqueta. Con indentación, la estructura se ve a simple vista. "Cuando escribes código, piensa en cómo lo van a leer otras personas" (idea de la profesora).

VS Code te ayuda: al guardar (Ctrl + S), el formateador vuelve a indentar todo, y unas líneas verticales guía conectan cada apertura con su cierre.

🔎 Ejemplo explicado: diagnosticar un cierre faltante (del curso)#

La profesora muestra que, si falta un </ol>, la letra C aparece dentro de la lista numerada en vez de en la lista principal. Siguiendo las líneas guía de VS Code descubre que un <ol> "se empareja" con un </li>: señal de que falta una etiqueta de cierre. A esto se le llama depuración.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: la lista anidada compleja#

• Enunciado: reproducir exactamente la estructura de la imagen objetivo.
• Estructura esperada (según el video):
  • Lista desordenada: A, B, C.
  • Dentro de B: lista ordenada B1, B2, B3.
  • Dentro de B2: lista desordenada B2a, B2b, B2c.
  • Dentro de B2a: lista desordenada B2aa, B2ab.
  • Dentro de B3: lista ordenada B31, B32.
• Consejo del curso: los nombres (B2a, B2ab…) indican dónde va cada ítem. Usa la vista previa mientras escribes.
• Palabras de la profesora: "No vas a aprender a programar solo viéndome programar". Inténtalo antes de ver cualquier solución.

🔍 Antes de programar#

• Dibuja la estructura como un árbol en papel. ¿Cuántos niveles de profundidad tiene?
• ¿Cuántas listas (ul + ol) hay en total? ¿Cuántos li?
• Para cada li que contiene una sublista, ¿dónde irá su </li>?

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: crea el plan de estudios del área de Tecnología: periodos (lista ordenada) y, dentro de cada uno, los temas (lista desordenada).
• 🟡 Reto 2: representa la organización del gobierno escolar (rector, consejo directivo, consejo académico, personero, consejo estudiantil con sus representantes) con al menos tres niveles de anidamiento.
• 🟠 Reto 3 — Depuración: este código muestra "Postres" dentro de "Bebidas". Encuentra el error sin abrir el navegador y corrígelo:

  <ul>
    <li>Bebidas
      <ul>
        <li>Jugo</li>
        <li>Agua</li>
    </li>
    <li>Postres</li>
  </ul>

• 🔴 Reto 4 — Pensamiento computacional: escribe en Python la estructura del ejercicio original como listas anidadas (por ejemplo, ["A", ["B", [...]], "C"]) y una función recursiva que imprima cada ítem con una sangría proporcional a su profundidad. ¿Qué tienen en común la recursión y el anidamiento de HTML?

🎯 Objetivo de aprendizaje#

Crear enlaces con <a href="..."> y distinguir entre atributos específicos y globales.

📖 Explicación conceptual#

Atributo: información adicional sobre un elemento. Se escribe en la etiqueta de apertura, después del nombre y separado por un espacio:

<a href="https://www.mintic.gov.co">Ministerio TIC</a>
<!-- nombre de la etiqueta · nombre del atributo = "valor" · contenido -->

• Puede haber varios atributos, separados por espacios.
• El valor va entre comillas dobles porque es un texto. Así se distingue de las palabras reservadas del lenguaje (a, li, href…).

El elemento ancla (a): crea hipervínculos. Sin el atributo href, el texto aparece pero no es un enlace activo. Con href, el navegador lo muestra en azul y subrayado, y al hacer clic lleva a la dirección indicada.

La documentación de MDN lista los atributos de cada elemento. Algunos están marcados como obsoletos (deprecated): no se deben usar en HTML5.

🛠️ Nota técnica: el video demuestra el atributo global draggable="true" sobre un enlace y dice que, sin él, el enlace no se puede arrastrar. En realidad, en Chrome los enlaces con href y las imágenes ya son arrastrables por defecto (verificado: draggable vale true sin escribir nada). El atributo sí cambia el comportamiento en elementos que no lo son, como un <p> o un <a> sin href. Prueba <p draggable="true">Arrástrame</p>.

🔎 Ejemplo explicado#

<ol>
  <li><a href="https://www.colombiaaprende.edu.co">Colombia Aprende</a></li>
  <li><a href="https://developer.mozilla.org/es/">MDN en español</a></li>
</ol>

Hay tres capas de anidamiento: a dentro de li, dentro de ol. El número de la lista no es azul, porque pertenece al li, no al enlace.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: mis 5 sitios web favoritos#

• Enunciado: el h1 ya está escrito. Crea una lista ordenada con cinco enlaces a tus sitios web favoritos.
• Resultado esperado: números del 1 al 5 (no azules) y el nombre de cada sitio como enlace que funcione. (La profesora usa, por ejemplo, Product Hunt.)
• Reto extra del curso: consulta en MDN los atributos de <ol> y usa start para que la lista empiece en 5 (y termine en 9).

🔍 Antes de programar#

• ¿En qué orden se anidan ol, li y a?
• ¿Qué parte del enlace ve el usuario y qué parte usa el navegador?
• Para el reto extra: ¿en qué etiqueta va el atributo start, en ol o en li?

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: crea una lista de recursos para estudiar (diccionario de la RAE, calculadora en línea, biblioteca digital) con enlaces cuyo texto describa el destino.
• 🟡 Reto 2: investiga en MDN el atributo target="_blank" y úsalo para abrir un enlace en una pestaña nueva. Averigua qué se recomienda escribir en el atributo rel en ese caso y por qué.
• 🟠 Reto 3: investiga cómo crear un enlace que abra el correo (mailto:) y otro que marque un teléfono (tel:). Úsalos en una tarjeta de contacto de la secretaría del colegio (con datos ficticios).
• 🔴 Reto 4 — Pensamiento computacional: crea dos archivos, index.html y horario.html, en la misma carpeta, enlazados entre sí (pista: href="horario.html"). ¿Por qué aquí no hace falta escribir https://? Esta idea de rutas relativas se profundiza en el Día 43.

🎯 Objetivo de aprendizaje#

Insertar imágenes con src y escribir textos alternativos (alt) útiles.

📖 Explicación conceptual#

<img src="https://picsum.photos/200" alt="Paisaje aleatorio de ejemplo" />

• img es un elemento vacío (como hr y br): una imagen no tiene "contenido de texto", su contenido es el archivo que indica src.
• src (source, fuente): la ubicación de la imagen.
• alt (texto alternativo): lo que el lector de pantalla lee a una persona ciega o con baja visión. También aparece si la imagen no carga. La profesora lo muestra con la extensión Silktide en el sitio de la BBC: el lector anuncia "Delfín saltando del mar — Imagen", y ese texto está en el alt.
• picsum.photos: "el Lorem ipsum de las fotos". https://picsum.photos/200 entrega una imagen aleatoria de 200 × 200 píxeles.
• Los GIF animados funcionan igual que JPG o PNG: se ponen en src y se animan solos.
• alt vacío (alt=""): para imágenes decorativas que no aportan información. Así el lector de pantalla las omite. Vacío no es lo mismo que ausente: si falta el atributo, algunos lectores leen el nombre del archivo.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: ¿gatos o perros?#

• Enunciado: el index.html trae dos URL de ejemplo (un perro y un gato). Crea un h1 que diga "Me gustan los gatos" o "Me gustan los perros" y, debajo, un img con la URL correspondiente.
• Detalles del video: el perro es un GIF animado (un cachorro cavando en la arena); el gato es un JPG estático.
• Parte final: agrega un alt que describa la imagen. Visualmente no cambia nada, pero la página se vuelve accesible.

🔍 Antes de programar#

• ¿Qué atributos necesita la imagen como mínimo?
• ¿Cómo describirías la imagen a alguien por teléfono? Ese es tu alt.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: descarga una imagen libre, guárdala en una carpeta imagenes/ junto a tu index.html y muéstrala con una ruta local (src="imagenes/huerta.jpg").
• 🟡 Reto 2: convierte una imagen en enlace: pon el <img> dentro de un <a>. ¿Qué debería decir el alt en ese caso: lo que muestra la imagen o a dónde lleva?
• 🟠 Reto 3 — Evaluación de accesibilidad: escribe el alt de estas cinco imágenes y justifica cuál debería tener alt="": (a) el logo del colegio en el encabezado; (b) una línea decorativa de flores; (c) un gráfico con los resultados de las elecciones del personero; (d) la foto del equipo campeón; (e) un ícono de lupa junto a la palabra "Buscar".
• 🔴 Reto 4: investiga en MDN los atributos width y height de img. ¿Por qué se recomienda indicarlos aunque luego se cambie el tamaño con CSS? (Pista: lo que pasa con el resto de la página mientras la imagen carga.)

Problema#

"Las invitaciones de papel y las de WhatsApp son para quien no sabe crear sitios web", bromea la profesora. Vas a crear una página de invitación para tu próxima celebración.

Contexto#

El resultado tendrá un aspecto "retro de los 90", porque aún no sabemos dar estilo (eso llega mañana con CSS). La página debe informar de qué se trata, cuándo es, qué llevar y dónde es.

Objetivo#

Combinar en una sola página todo lo aprendido: plantilla, encabezados, listas, enlaces e imágenes.

Requisitos funcionales (originales del curso)#

El curso lo plantea como proyecto, no como ejercicio evaluado: "no hay nada bueno o malo". Como mínimo debe tener:

1. Una imagen.
2. Una lista.
3. Un enlace (ancla).

El código de inicio trae una URL de imagen de ejemplo y un enlace de Google Maps de ejemplo (con una "sorpresa": un lugar de Tokio lleno de palomas).

Solución de la profesora (resumen del video): h1 "¡Es mi cumpleaños!"; h2/h3 para la fecha, "qué llevar" y "dónde"; una imagen con src y alt; una ul con lo que hay que llevar; y un <a href="..."> al mapa.

Restricciones técnicas#

• Plantilla HTML completa con lang="es" y charset UTF-8.
• Solo HTML (nada de CSS todavía).
• Toda imagen con alt descriptivo.

Planificación#

1. Comprender: ¿qué necesita saber un invitado?
2. Entradas: motivo, fecha, hora, lugar, qué llevar, una imagen.
3. Proceso: decidir qué elemento HTML representa cada dato.
4. Salida: una página clara que se entienda en 10 segundos.
5. Dividir: plantilla / encabezado / imagen / fecha / lista / ubicación.
6. Diseñar en papel → 7. Implementar → 8. Probar → 9. Corregir → 10. Mejorar.

Construcción paso a paso#

• Versión 1 — Plantilla: ! o escrita a mano. Cambia el title y el lang.
• Versión 2 — Encabezados: el h1 y los h2 de cada sección, sin contenido.
• Versión 3 — Contenido: la fecha en un párrafo, la imagen con su alt.
• Versión 4 — Lista: "Qué llevar" en una ul.
• Versión final — Ubicación: enlace al mapa con un texto descriptivo ("Ver la ubicación en Google Maps", no "clic aquí").

Pruebas#

🧪 Prueba y depuración#

Encuentra los cinco problemas de esta invitación (cuatro son errores; uno no rompe la página, porque el navegador cierra ciertos elementos solo, pero es mala práctica y hace el código inconsistente):

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Fiesta de Sofía</title>
  </head>
  <body>
    <h1>¡Cumpleaños de Sofía!</h1>
    <img href="https://picsum.photos/300" />
    <h2>Qué llevar</h2>
    <ol>
      <li>Traje de baño
      <li>Toalla</li>
    </ul>
    <a>Ver ubicación</a>
  </body>
</html>

⭐ Extensión del proyecto#

• Agrega un cronograma de la fiesta en una ol (llegada, juegos, torta…).
• Agrega un enlace mailto: para confirmar asistencia.
• Crea una segunda página, galeria.html, con fotos de la celebración anterior, y enlaza ambas páginas.

Situación#

El colegio organiza una Feria de Emprendimiento con puestos de estudiantes. Necesitan una página informativa para compartir con las familias.

Requisitos#

1. Plantilla completa y válida.
2. Una presentación de la feria (fecha, lugar, objetivo).
3. Una agenda del día (lista ordenada).
4. Los emprendimientos agrupados por categoría (alimentos, artesanías, tecnología…) en una lista anidada: categoría → emprendimiento → datos (curso, qué venden).
5. Al menos dos imágenes con alt adecuado (una puede ser decorativa, con alt="").
6. Al menos tres enlaces: la ubicación del colegio en un mapa, una página interna (reglamento.html) y un recurso externo (por ejemplo, información sobre emprendimiento juvenil de una entidad oficial).

Decisiones que debes tomar (y justificar)#

• ¿Qué tipo de lista usas en cada caso y por qué?
• ¿Qué imagen es informativa y cuál decorativa?
• ¿Cuántos niveles de anidamiento son necesarios sin volver la página confusa?

Casos de prueba#

• El validador W3C no reporta errores.
• Todos los enlaces funcionan, incluido el enlace a reglamento.html.
• Leyendo solo la estructura (encabezados y listas), un familiar entiende la organización de la feria.

Etapa 2 (hoy): un documento HTML completo#

1. Envuelve tu index.html de la etapa 1 en la plantilla completa (lang="es", charset, viewport, un title descriptivo).
2. Convierte en listas la información que lo permita (actividades, logros, requisitos para unirse). Usa al menos una lista anidada.
3. Agrega al menos dos imágenes con alt bien escrito (preferiblemente fotos propias o con licencia libre, en una carpeta imagenes/).
4. Crea una segunda página, unete.html, con los pasos para unirse (lista ordenada), y enlaza ambas páginas en los dos sentidos.
5. Agrega un enlace externo relacionado con el tema del grupo.
6. Entregable de la etapa: carpeta del proyecto con index.html, unete.html, imagenes/ y una captura del validador W3C sin errores.

Conceptuales#

1. ¿Qué pasa si falta <!DOCTYPE html>? ¿Y si falta <meta charset="UTF-8" />?
2. ¿Cuál es la diferencia entre head y body?
3. ¿Cuándo usarías ul y cuándo ol? Da un ejemplo de cada una tomado del colegio.
4. ¿Qué es un atributo? ¿En qué se diferencian los atributos específicos de los globales?
5. ¿Para qué sirve alt? ¿Cuándo debe estar vacío?

Análisis de código#

Explica qué muestra este código y cuántos niveles de anidamiento tiene:

<ol start="3">
  <li>Revisar la tarea</li>
  <li>Resolver dudas
    <ul>
      <li>Matemáticas</li>
      <li>Física</li>
    </ul>
  </li>
</ol>

Predicción#

¿Qué número tendrá "Resolver dudas"? ¿Qué símbolo tendrán "Matemáticas" y "Física"? Compruébalo en el navegador.

Depuración#

<ul>
  <li><a href="https://www.sena.edu.co">SENA</li></a>
  <li><img src="logo.png"></img></li>
</ul>

Encuentra tres problemas (uno de anidamiento, uno de sintaxis de un elemento vacío y uno de accesibilidad).

Modificación#

Toma tu lista de "5 sitios favoritos" y haz que cada sitio tenga debajo una sublista con dos razones por las que te gusta.

Creación#

Crea la página "Ruta del bus escolar": una lista ordenada de paradas; en cada parada, una sublista con la hora de paso; un enlace a un mapa, y una imagen del bus con su alt.