SHANUKI · Módulo 1 · Fundamentos de HTML

¿Cómo funciona la web?

Antes de escribir tu primera línea de código, vale la pena entender qué es esto que vas a construir. La idea central es muy simple.

🖥️ ¿Qué es una página web?

Una página web es, en el fondo, un archivo de texto con instrucciones. Nada más que eso: un documento que termina en .html y que podés abrir con cualquier editor de texto.

El navegador (Chrome, Firefox…) lee ese archivo, entiende sus instrucciones y dibuja el resultado: textos, imágenes, colores. Vos ves la página terminada, sin notar el texto con instrucciones que hay por detrás.

Una página web es como una hoja de instrucciones que el navegador lee y convierte en lo que ves en pantalla.

Los tres protagonistas

📄 Un archivo .html con instrucciones

🌐 El navegador lo lee y lo dibuja

👀 Vos ves la página terminada

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

✈️ El viaje de una página

Cuando escribís una dirección en el navegador, pasa esto, paso a paso:

Tu navegador le pide la página a otra computadora llamada servidor (donde la página "vive").
El servidor le envía el archivo HTML (texto plano con marcas).
El navegador interpreta esas marcas y dibuja la página: títulos grandes, párrafos, imágenes, enlaces.

Tu navegador es el cliente: pide. El servidor: entrega. Todo lo que ves en la web es ese ida y vuelta, millones de veces por día.

El ida y vuelta, en tres pasos

1 · El navegador PIDE la página →

3 · El navegador INTERPRETA y dibuja

Quién	Qué hace
🧭 Navegador (cliente)	Pide la página y la dibuja en pantalla
🗄️ Servidor	Guarda y entrega las páginas web

🧩 ¿Lo entendiste? · El viaje, en orden

Ordená los pasos que ocurren desde que escribís una dirección hasta que ves la página.

🛣️ Internet y la web NO son lo mismo

Internet es la red física: cables, antenas, computadoras conectadas entre sí alrededor del mundo.

La web es uno de los servicios que viaja por esa red: el de las páginas conectadas con enlaces. Por internet también viajan otras cosas: el correo, los juegos en línea, las videollamadas.

Internet es como las rutas; la web, como los ómnibus que circulan por ellas. Por las mismas rutas también circulan camiones y motos.

	Internet	Web
Qué es	La red física	Un servicio sobre la red
Analogía	Las rutas	Los ómnibus
También viajan…	correo, juegos en línea, videollamadas

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

🖍️ ¿Qué es un lenguaje de marcado?

Un lenguaje de marcado sirve para describir y organizar contenido. HTML es como marcar un texto con resaltadores de colores: cada marca le dice al navegador qué es cada cosa. "Esto es un título", "esto es un párrafo", "esto es una imagen".

Es muy distinto de un lenguaje de programación (como JavaScript o Python), que da órdenes lógicas: "si pasa esto, hacé aquello", "repetí 10 veces".

HTML no toma decisiones ni hace cálculos: describe.

Concepto	Qué hace	Ejemplo
Lenguaje de marcado	Describe y organiza el contenido	HTML
Lenguaje de programación	Da instrucciones y toma decisiones	JavaScript
Navegador	Lee el marcado y lo dibuja en pantalla	Chrome, Firefox
Servidor	Guarda y entrega las páginas web	servidor de Ceibal

🎯 ¿Lo entendiste? · Cada concepto en su lugar

Arrastrá cada palabra del banco hasta el hueco que le corresponde. ⚠️ Hay palabras trampa que no van en ningún hueco.

navegador servidor HTML web CSS JavaScript

El … lee el código y lo convierte en la página que ves.

Las páginas web se guardan y se entregan desde un ….

… es el lenguaje de marcado de la web.

La … conecta documentos entre sí mediante hipervínculos.

🔤 HTML, palabra por palabra

HTML significa HyperText Markup Language. Desarmemos cada palabra:

HyperText (hipertexto): texto que tiene enlaces a otros textos. Es lo que hace que la web sea una "telaraña" de documentos conectados.
Markup (marcado): las marcas o etiquetas que envuelven el contenido para darle significado.
Language (lenguaje): tiene reglas de escritura (sintaxis) que el navegador entiende.

🧭 El navegador es un intérprete: "traduce" el HTML a lo que vos ves. Si el HTML está mal escrito, el navegador intenta adivinar… y a veces el resultado es un desastre. Por eso aprender a escribirlo bien importa.

✖ Texto plano: el navegador no sabe qué es cada cosa

Mi escuela
Estudio en el liceo de mi barrio.

✔ Con marcas: todo tiene significado

<h1>Mi escuela</h1>
<p>Estudio en el liceo de mi barrio.</p>

✔ Hipertexto: un enlace conecta documentos

<p>Aprendé más en
  <a href="https://ceibal.edu.uy">Ceibal</a>.
</p>

✏️ ¿Lo entendiste? · Completá la definición

Completá los espacios escribiendo la palabra que falta.

HTML significa HyperText  Language.
Es un lenguaje de  que usa 
para indicarle al  qué es cada parte del contenido.

Paso 1 de 5

🎬 Video de referencia

📺 Video por TodoCode (@TodoCode) · todocodeacademy.com · "Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."

⚙️ Tu primera marca HTML

HTML

<!-- Una etiqueta envuelve al contenido -->
<h1>Mi primera página</h1>
<p>Estoy aprendiendo HTML.</p>

<!-- Las etiquetas le dan SIGNIFICADO
     al texto: el navegador las lee
     y dibuja cada cosa como corresponde -->

🖥️ Simulador · probá y ejecutá

<h1>Mi primera página</h1>
<p>Estoy aprendiendo HTML en Ciencias de la Computación.</p>

El esqueleto de toda página web

Toda página HTML del mundo —desde la más simple hasta YouTube— comparte el mismo esqueleto básico. Lo vamos a desarmar pieza por pieza.

🗺️ Primero mirá el mapa completo

Este es el esqueleto que vas a escribir en cada página de tu vida. Seis líneas clave, cada una con su trabajo.

Las etiquetas se organizan como un árbol genealógico: hay elementos padre que contienen elementos hijo. <html> es la raíz; de ella nacen <head> y <body>.

En los siguientes pasos desarmamos este esqueleto pieza por pieza. Por ahora, solo miralo.

La estructura mínima, línea por línea

<!DOCTYPE html>        <!-- 1) "soy HTML5" -->
<html lang="es">       <!-- 2) raíz -->
  <head>               <!-- 3) lo que NO se ve -->
    <meta charset="UTF-8">
    <title>Mi página</title>
  </head>
  <body>               <!-- 6) lo que SÍ se ve -->
    <h1>¡Hola mundo!</h1>
  </body>
</html>

🧩 ¿Lo entendiste? · Armá el esqueleto

Arrastrá las líneas para dejar la estructura en el orden correcto, de arriba hacia abajo.

📄 <!DOCTYPE html> y 🌳 <html>

El <!DOCTYPE html> es siempre la primera línea. No es una etiqueta común: es una declaración, como la portada de un documento que dice "esto es HTML moderno, interpretalo con las reglas actuales".

⚠️ Si falta: el navegador puede entrar en un "modo antiguo" y dibujar la página con reglas viejas e impredecibles.

Después viene <html lang="es">, el elemento raíz: envuelve todo lo demás, como el tronco del que nacen todas las ramas. El atributo lang="es" indica el idioma: ayuda a los lectores de pantalla y a los buscadores.

<html lang="es"> ▲ ▲ atributo valor

✔ El orden correcto

<!DOCTYPE html>
<html lang="es">
  ...todo lo demás...
</html>

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

🧠 <head> · lo que NO se ve

El <head> contiene los metadatos: información sobre la página que el navegador necesita pero que no se dibuja. Adentro van:

<title>: el texto que aparece en la pestaña del navegador. Obligatorio.
<meta charset="UTF-8">: la codificación. Sin ella, las tildes y la ñ pueden verse como símbolos raros (�).
<meta name="viewport">: cómo adaptar la página a celulares y tablets.

Atributo	Qué hace	Ejemplo
`lang`	Idioma del documento	`<html lang="es">`
`charset`	Codificación (tildes, ñ, emojis)	`<meta charset="UTF-8">`
`name` + `content`	Pares metadato y valor	`<meta name="viewport" …>`

🎯 ¿Lo entendiste? · Completá la estructura

Arrastrá cada etiqueta del banco al hueco correcto. ⚠️ Hay etiquetas trampa que no van en ningún lugar.

DOCTYPE head title body div span

<!… html>

<…>

<…>Mi página</…>

</head>

<…> … contenido visible … </…>

</html>

👀 <body> · lo que SÍ se ve

El <body> es donde vive todo el contenido visible: textos, imágenes, enlaces, listas, botones.

HEAD = lo que la página piensa (configuración invisible). BODY = lo que la página muestra.

🔍 Para diagnosticar: si algo debería verse y no aparece… revisá que no lo hayas puesto en el <head> por error.

Quién ve qué

<head> · title, meta → invisible en la página

<body> · h1, p, img → lo que todos ven

✏️ ¿Lo entendiste? · Completá el código

Escribí lo que falta en cada espacio para que la estructura quede completa y válida.

<!DOCTYPE >
<html lang="es">
<head>
  <meta charset="">
  <>Mi primera página</title>
</head>
<>
  <!-- contenido visible -->
</body>
</html>

📝 Comentarios · notas al margen

Los comentarios  son notas privadas dentro del código. El navegador los ignora por completo: no se muestran en la página. Solo los ve quien lee el código.

💡 Buenas prácticas: usalos para explicar por qué hiciste algo, para marcar el inicio de cada sección, o para dejarte recordatorios. No abuses: si el código es claro, no necesita un comentario en cada línea.

✔ Comentarios que organizan

<body>
  <!-- ===== Sección: presentación ===== -->
  <h1>Sobre mí</h1>

  <!-- ===== Sección: hobbies ===== -->
  <h2>Mis hobbies</h2>
</body>

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

Paso 1 de 5

🎬 Video de referencia

📺 Video por TodoCode (@TodoCode) · todocodeacademy.com · "Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."

⚙️ El esqueleto en acción

HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Pestaña</title>
  </head>
  <body>
    <!-- contenido visible -->
    <h1>Título</h1>
    <p>Texto…</p>
  </body>
</html>

🖥️ Simulador · modificá el esqueleto

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Probando la estructura</title>
</head>
<body>
  <!-- Probá cambiar este contenido -->
  <h1>¡Funciona!</h1>
  <p>Este texto está dentro del body.</p>
</body>
</html>

🚀 Reto final de la sección — tocá para desplegar

⌨️ Reto BÁSICO · Completá las tres piezas

La estructura ya está armada, pero le faltan tres cosas marcadas con ✏️: (1) un título de pestaña dentro de <title>, (2) un comentario que indique dónde empieza el contenido, y (3) un <h1> con el nombre de tu liceo.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title><!-- ✏️ 1) Escribí aquí el título de la pestaña --></title>
</head>
<body>
  <!-- ✏️ 2) Reemplazá este comentario por uno tuyo que diga dónde empieza el contenido -->

  <!-- ✏️ 3) Escribí aquí un <h1> con el nombre de tu liceo -->

</body>
</html>

🚀 Reto AVANZADO · Estructura completa desde cero

Creá desde cero la estructura HTML completa de una página sobre un tema que te guste (música, deporte, videojuegos…). Debe tener: <!DOCTYPE html>, <html lang="es">, un <head> con <meta charset> y <title>, y un <body> dividido en al menos 3 secciones, cada una marcada con su propio comentario y un poco de contenido.

Mi código empieza con <!DOCTYPE html> El <head> tiene charset y un título de pestaña Mi <body> tiene 3 secciones, cada una con su comentario Todas las etiquetas que abrí están cerradas

Dándole forma al texto

Ya sabés armar el esqueleto. Ahora vamos a llenarlo de contenido bien organizado: estas etiquetas son las que más vas a usar en toda tu vida como creador o creadora web.

🔠 Encabezados <h1> a <h6>

Los encabezados marcan los títulos y subtítulos de tu página. Son como los títulos de un libro: el título del libro (<h1>), los capítulos (<h2>), las partes de cada capítulo (<h3>)… y así hasta <h6>.

La jerarquía es semántica, no decorativa: no elegís <h3> "porque se ve más chico", sino porque ese contenido es un sub-subtítulo.

🏆 Regla de oro: un solo <h1> por página, y nunca saltearse niveles (de h1 directo a h4 ✖).

Los 6 niveles (tamaño decreciente)

h1 · Título principal

h2 · Sección grande

h3 · Subsección

h5 · Nota menor

h6 · El más pequeño

🧩 ¿Lo entendiste? · Jerarquía de encabezados

Arrastrá los encabezados para ordenarlos de mayor a menor jerarquía (el más importante arriba).

📄 Párrafos, <br> y <hr>

Un párrafo <p> es un bloque de texto con una idea. El navegador agrega espacio antes y después, separándolo visualmente. Cada idea nueva → un <p> nuevo.

<br> produce un salto de línea dentro del mismo párrafo. <hr> dibuja una línea separadora entre temas. Las dos son etiquetas vacías: no envuelven contenido y no se cierran.

⚠️ Error común: usar <br><br> para separar párrafos. Si son ideas distintas, van dos <p>. El <br> es para direcciones, poemas o letras de canciones, donde el corte de línea es parte del contenido.

✔ br y hr bien usados

<p>Liceo N° 5<br>
Av. Italia 1234<br>
Montevideo, Uruguay</p>

<hr>  <!-- cambia el tema -->

<p>Otro tema totalmente distinto.</p>

✖ br como separador de ideas

Una idea<br><br>Otra idea distinta

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

📋 Listas: <ul>, <ol> y <li>

<ul> (unordered list) agrupa elementos donde el orden no importa: ingredientes, hobbies, útiles. Se ven con viñetas.

<ol> (ordered list) es para cuando el orden importa: pasos de una receta, un ranking. Se numera automáticamente.

Cada elemento, sea de la lista que sea, va dentro de un <li> (list item).

Las dos listas, lado a lado

<ul>                <!-- sin orden -->
  <li>Cuaderno</li>
  <li>Lápiz</li>
</ul>

<ol type="1" start="1">  <!-- con orden -->
  <li>Primer paso</li>
  <li>Segundo paso</li>
</ol>

Atributo de <ol>	Qué hace
`type`	Tipo de numeración: 1, A, a, I, i
`start`	Desde qué número empieza

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

🪆 Listas anidadas

Podés poner una lista dentro de otra: una <ul> adentro de un <li>. Así se crean sub-niveles, como un índice con sub-puntos.

💡 Buenas prácticas: las listas son para listar, no para empujar texto hacia la derecha. Si tu contenido no es una colección de elementos, no lo metas en una lista.

✔ Sub-lista DENTRO del li

<ul>
  <li>Deportes
    <ul>
      <li>Fútbol</li>
      <li>Básquetbol</li>
    </ul>
  </li>
  <li>Música</li>
</ul>

✏️ ¿Lo entendiste? · Completá las listas

Completá las etiquetas que faltan (sin escribir los signos < >, solo el nombre).

<h2>Mis útiles escolares</h2>
<>
  <>Cuaderno</li>
  <li>Lápiz</>
</ul>

<h2>Cómo forrar un cuaderno</h2>
< type="1">
  <li>Cortar el papel</li>
  <li>Pegar con cinta</li>
</ol>

🧩 Todo el texto, junto

Ya tenés el kit completo del texto: títulos que jerarquizan, párrafos que agrupan ideas, saltos y separadores para casos puntuales, y listas para colecciones.

Antes de elegir la etiqueta, preguntate qué es el contenido: ¿un título? ¿una idea? ¿una colección? ¿pasos con orden?

Si el contenido es…	Va en…
El título principal	`<h1>` (uno solo)
Un subtítulo	`<h2>`–`<h6>`
Una idea completa	`<p>`
Colección sin orden	`<ul>` + `<li>`
Pasos con orden	`<ol>` + `<li>`
Cambio de tema	`<hr>`

🎯 ¿Lo entendiste? · ¿Qué etiqueta corresponde?

Para cada situación, arrastrá la etiqueta correcta desde el banco. ⚠️ Cuidado con las etiquetas trampa.

Pasos de una receta (el orden importa) → …

Lista de ingredientes (sin orden) → …

Cada elemento dentro de una lista → …

Separador temático (línea horizontal) → …

Salto de línea en un poema → …

Paso 1 de 5

🎬 Videos de referencia

📺 Video 1 · Encabezados y párrafos · por TodoCode (@TodoCode) · todocodeacademy.com

📺 Video 2 · Listas en HTML · por TodoCode (@TodoCode) · todocodeacademy.com

⚙️ Texto con estructura

HTML

<h1>Título principal</h1>
<p>Un párrafo con una idea.</p>

<h2>Mis útiles</h2>
<ul>                  <!-- sin orden -->
  <li>Cuaderno</li>
  <li>Lápiz</li>
</ul>

<ol type="1">          <!-- con orden -->
  <li>Primer paso</li>
</ol>
<hr>  <!-- separador, sin cierre -->

🖥️ Simulador · jugá con listas y títulos

<h1>Receta de torta fritas</h1>
<h2>Ingredientes</h2>
<ul>
  <li>Harina</li>
  <li>Agua</li>
  <li>Sal</li>
</ul>
<hr>
<h2>Pasos</h2>
<ol>
  <li>Mezclar todo</li>
  <li>Amasar</li>
  <li>Freír</li>
</ol>

🚀 Reto final de la sección — tocá para desplegar

⌨️ Reto BÁSICO · Completá la página de útiles

Esta página está incompleta. Seguí los ✏️: (1) agregá un <h2> que diga "Lista de materiales", (2) completá la lista con 2 ítems más, y (3) agregá un <hr> y un párrafo final de cierre.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mis útiles</title>
</head>
<body>
  <h1>Materiales para este año</h1>

  <!-- ✏️ 1) Agregá aquí un <h2> que diga "Lista de materiales" -->

  <ul>
    <li>Cuaderno de 96 hojas</li>
    <!-- ✏️ 2) Agregá aquí DOS ítems <li> más -->

  </ul>

  <!-- ✏️ 3) Agregá aquí un <hr> y un párrafo <p> de cierre -->

</body>
</html>

🚀 Reto AVANZADO · Tu carta de presentación digital

Creá desde cero una página de presentación personal. Debe incluir: estructura HTML completa, un <h1> con tu nombre, al menos dos <h2> ("Sobre mí", "Mis gustos"…), dos párrafos, una <ul> con tus hobbies, una <ol> con tu top 3 de algo, un <hr> separando secciones y comentarios organizando el código.

Usé un solo <h1> y al menos dos <h2> Tengo una lista desordenada y una ordenada, con 3+ ítems Usé <hr> como separador temático Agregué comentarios que organizan las secciones

Enlaces: las puertas de la web

Si la web fuera una ciudad gigante, los enlaces serían las puertas que conectan un edificio con otro. Sin ellos no existiría "navegar".

🚪 La etiqueta <a> · el hipervínculo

La etiqueta que crea enlaces es <a>, que viene de anchor ("ancla" en inglés), porque "ancla" un texto a otro destino.

El "HyperText" de HTML se refiere justamente a esto: texto con enlaces que te llevan a otros textos. Los enlaces son el corazón de la web.

💡 Texto descriptivo: el texto del enlace debe decir a dónde lleva. ✖ "clic aquí" · ✔ "Descargá la guía de estudio".

<a href="destino">texto visible</a> ▲ ▲ ▲ atributo a dónde va lo que se ve

✔ Enlace externo completo

<a href="https://www.ceibal.edu.uy">
  Visitá el sitio de Ceibal
</a>

🧩 ¿Lo entendiste? · Armá el enlace

Estas tarjetas son las partes de una etiqueta <a> completa. Ordenalas como se escribirían en el código, de izquierda a derecha.

🎯 href · ¿a dónde vamos?

Un <a> sin destino no sirve de nada. El atributo href (hypertext reference) indica a dónde lleva el enlace. Puede apuntar a:

Un sitio externo (URL absoluta): la dirección entera, con https:// incluido.
Otra página de tu sitio (URL relativa): solo el nombre del archivo, como contacto.html.
Un lugar de la misma página: un ancla interna como #glosario (paso 4).

Un <a> sin href queda desactivado: no se puede hacer clic.

Los tres tipos de destino

<!-- 1) Externo: URL absoluta -->
<a href="https://www.ceibal.edu.uy">Ceibal</a>

<!-- 2) Tu propio sitio: URL relativa -->
<a href="contacto.html">Contacto</a>

<!-- 3) Misma página: ancla interna -->
<a href="#glosario">Ir al glosario</a>

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

🪟 target="_blank" · pestaña nueva

Por defecto, un enlace reemplaza la página actual. Si querés que el destino se abra en una pestaña nueva (para que el lector no pierda tu página), agregá target="_blank".

🔒 Seguridad: cuando uses target="_blank", agregá también rel="noopener noreferrer". Evita que la página nueva pueda "espiar" o manipular la pestaña original.

✔ Pestaña nueva, con seguridad

<a href="https://todocodeacademy.com"
   target="_blank"
   rel="noopener noreferrer">
  Canal TodoCode
</a>

🎯 ¿Lo entendiste? · Arrastrá el atributo correcto

Arrastrá cada palabra hasta su hueco. ⚠️ Hay palabras trampa que no van en ningún lugar.

href target _blank rel src alt

<a …="https://www.ceibal.edu.uy"

…="…"

…="noopener noreferrer">Visitá Ceibal</a>

⚓ Anclas internas · saltar en la misma página

En páginas largas podés crear "atajos" internos. Funciona en dos pasos:

Marcá el destino con un id único: <h2 id="contacto">
Creá el enlace con href="#contacto" (el numeral # + el id).

Las anclas funcionan en pareja: href="#nombre" en el enlace + id="nombre" en el destino.

✔ El enlace y su destino

<a href="#contacto">Ir a Contacto</a>

<!-- ...mucho contenido después... -->

<h2 id="contacto">Contacto</h2>

Atributo	Qué hace
`href`	Define el destino del enlace
`target`	Dónde se abre (`_blank` = pestaña nueva)
`rel`	Con _blank, usar por seguridad
`id` (en el destino)	Marca un punto para anclas internas

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

Paso 1 de 4

🎬 Video de referencia

📺 Video por TodoCode (@TodoCode) · todocodeacademy.com

⚙️ Sintaxis en acción

HTML

<!-- Enlace externo en pestaña nueva -->
<a href="https://www.ceibal.edu.uy"
   target="_blank"
   rel="noopener noreferrer">
  Sitio de Ceibal
</a>

<!-- Ancla interna -->
<a href="#final">Ir al final</a>
<p id="final">¡Llegaste!</p>

🖥️ Simulador · probá cambiar el destino

<h1>Mis sitios favoritos</h1>
<p>
  <a href="https://www.ceibal.edu.uy" target="_blank" rel="noopener noreferrer">
    Plan Ceibal
  </a>
</p>
<p>Probá cambiar el destino del enlace.</p>

🚀 Reto final de la sección — tocá para desplegar

✏️ Calentamiento · Completá el código

Escribí lo que falta para que el enlace funcione y se abra en una pestaña nueva.

<a ="https://www.youtube.com"
   ="">
  Ver videos
</a>

⌨️ Reto BÁSICO · Sitios recomendados

Esta página tiene los enlaces sin terminar. Seguí los ✏️ y completá los destinos y atributos que faltan.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Sitios recomendados</title>
</head>
<body>
  <h1>Mis sitios recomendados</h1>

  <!-- ✏️ TAREA 1: completá el atributo que define el destino del enlace -->
  <p><a ="https://www.ceibal.edu.uy">Plan Ceibal</a></p>

  <!-- ✏️ TAREA 2: agregá target con el valor para abrir en pestaña nueva -->
  <p><a href="https://es.wikipedia.org" >Wikipedia</a></p>

  <!-- ✏️ TAREA 3: escribí un enlace completo a tu sitio favorito,
       con texto descriptivo (no uses "clic aquí") -->

</body>
</html>

🚀 Reto AVANZADO · Menú de navegación interna

Creá desde cero una página larga con un menú arriba que use anclas internas: estructura completa; un <h1>; un menú con al menos 3 enlaces <a href="#...">; tres secciones, cada una con un <h2> con su id y un párrafo; y un enlace externo al final que se abra en pestaña nueva con rel="noopener noreferrer".

Mi menú tiene 3+ enlaces con href="#id" Cada sección destino tiene su id único Al hacer clic, la página salta a la sección correcta Mi enlace externo usa target="_blank" y rel="noopener noreferrer" Ningún enlace dice "clic aquí"

Imágenes y la sintaxis de HTML

Primero, cómo poner imágenes. Después, el repaso definitivo de cómo se arma cualquier etiqueta.

🖼️ <img> y su src

La etiqueta <img> inserta imágenes. Es una etiqueta vacía (void element): no tiene cierre, porque no envuelve contenido. Es como un marco colgado en la pared: el marco no "contiene texto adentro", solo señala cuál es el cuadro.

El atributo src (source, fuente) indica dónde está la imagen:

URL externa (absoluta): la imagen está en internet.
Archivo local (relativa): la imagen está en una carpeta junto a tu HTML.

Los dos tipos de src

<!-- Externa: URL completa -->
<img src="https://ejemplo.com/foto.jpg">

<!-- Local: carpeta junto al HTML -->
<img src="fotos/perro.png">

✖ img no lleva cierre

<img src="foto.jpg"></img>

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

♿ alt · el texto que nunca se omite

El atributo alt describe la imagen con palabras. Se muestra si la imagen no carga, y es fundamental para la accesibilidad: los lectores de pantalla que usan las personas ciegas leen el alt en voz alta. También ayuda a los buscadores (SEO).

♿ Regla de oro: toda imagen lleva alt. Si es puramente decorativa, se escribe vacío: alt="" — así el lector de pantalla la salta sin molestar.

✔ Descriptivo cuando informa

<img src="gato.jpg"
     alt="Un gato durmiendo al sol">

✔ Vacío cuando decora

<img src="adorno.png" alt="">

✏️ ¿Lo entendiste? · Completá el código

Completá: el atributo de la fuente, el del texto alternativo, y el tipo de etiqueta que es <img>.

<img ="https://ejemplo.com/gato.jpg"
     ="Un gato durmiendo al sol">

<!-- <img> no lleva cierre porque es una
     etiqueta  -->

📐 Tamaño y formatos

Los atributos width (ancho) y height (alto) definen el tamaño en píxeles. Indicarlos ayuda al navegador a reservar el espacio antes de que cargue la imagen, y así la página no "salta" mientras carga.

Elegí el formato según el contenido: foto → JPG · logo con transparencia → PNG · animación simple → GIF · web moderna → WebP.

Formato	Cuándo usarlo
JPG	Fotografías. Buena compresión, sin transparencia.
PNG	Logos, capturas, fondos transparentes.
GIF	Animaciones simples. Pocos colores.
WebP	Formato moderno: pesa menos con buena calidad.

✔ Imagen completa

<img src="https://picsum.photos/300/200"
     alt="Fotografía de paisaje"
     width="300" height="200">

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

🔬 Anatomía de una etiqueta

Repasemos cómo se arma cualquier etiqueta. La estructura general tiene 3 partes:

Etiqueta de apertura: <p> — abre el "envoltorio".
Contenido: lo que va adentro (texto u otras etiquetas).
Etiqueta de cierre: </p> — igual a la apertura pero con barra /.

Algunas etiquetas no tienen cierre porque no envuelven contenido: <br>, <hr>, <img>, <input>. Escribir </br> o </img> es un error.

<p>Hola mundo</p> ▲ ▲ ▲ apertura contenido cierre

🎯 ¿Lo entendiste? · ¿Void o con cierre?

Arrastrá cada etiqueta a su grupo. ¡Todas tienen lugar en algún grupo!

⭕ Vacías (sin cierre)

🔄 Con cierre

⚙️ Atributos · información extra

Los atributos van dentro de la etiqueta de apertura y siguen el patrón nombre="valor", con el valor entre comillas. Ya usaste varios: lang, charset, href, src, alt.

💡 Atributos booleanos: algunos, con solo estar presentes, ya valen "sí", sin necesidad de valor. Ej: <input disabled> significa "este campo está desactivado".

<img src="foto.jpg" alt="Mi foto"> ▲ ▲ atributo valor entre comillas

✔ Booleano: presente = sí

<input disabled>

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

📦 Anidamiento · cajas dentro de cajas

Cuando una etiqueta va dentro de otra, la que se abre último se cierra primero, como cajas dentro de cajas. Si las etiquetas se "cruzan", el navegador intenta adivinar… y el resultado es impredecible.

✍️ Mayúsculas: HTML5 no distingue (<P> funciona igual que <p>), pero la convención universal es escribir todo en minúsculas.

✔ Las cajas se cierran en orden

<p>Me encanta <strong>aprender HTML</strong> en clase</p>

✖ Las etiquetas se cruzan

<p>Me encanta <strong>aprender HTML</p></strong>

🧠 ¿Lo entendiste? · Múltiple opción

Elegí la opción correcta. Pensala bien: no podés cambiarla.

Paso 1 de 6

🎬 Video de referencia

📺 Video por TodoCode (@TodoCode) · todocodeacademy.com

📋 Tabla resumen · todas las etiquetas del módulo

Etiqueta	Qué hace	¿Tiene cierre?
`<!DOCTYPE html>`	Declara HTML moderno	No (declaración)
`<html>`	Raíz del documento	Sí
`<head>`	Metadatos (no visibles)	Sí
`<title>`	Título de la pestaña	Sí
`<meta>`	Información del documento	No (void)
`<body>`	Contenido visible	Sí
`<h1>–<h6>`	Encabezados jerárquicos	Sí
`<p>`	Párrafo	Sí
`<br>`	Salto de línea	No (void)
`<hr>`	Línea separadora	No (void)
`<ul> / <ol>`	Lista desordenada / ordenada	Sí
`<li>`	Ítem de lista	Sí
`<a>`	Enlace (hipervínculo)	Sí
`<img>`	Imagen	No (void)
`<!-- -->`	Comentario (no visible)	—

⚙️ Sintaxis en acción

HTML

<!-- Imagen completa y accesible -->
<img
  src="https://picsum.photos/280/180"
  alt="Paisaje aleatorio de ejemplo"
  width="280"
  height="180">

<!-- Imagen decorativa: alt vacío -->
<img src="adorno.png" alt="">

🖥️ Simulador · cambiá el tamaño o quitá el src

<h1>Mi primera imagen</h1>
<img src="https://picsum.photos/280/180"
     alt="Fotografía aleatoria de ejemplo"
     width="280" height="180">
<p>Probá cambiar el tamaño o quitar el src
para ver qué pasa con el alt.</p>

🚀 Reto final de la sección — tocá para desplegar

⌨️ Reto BÁSICO · Completá la galería

Esta galería tiene 3 imágenes incompletas. Seguí los ✏️ y completá los atributos que faltan en cada una.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi galería</title>
</head>
<body>
  <h1>Mi galería de fotos</h1>

  <!-- ✏️ TAREA 1: completá el atributo que indica dónde está la imagen -->
  <img ="https://picsum.photos/200/140" alt="Primera foto de la galería">

  <!-- ✏️ TAREA 2: agregá el texto alternativo que falta -->
  <img src="https://picsum.photos/201/140" >

  <!-- ✏️ TAREA 3: agregá width y height de 200 por 140 -->
  <img src="https://picsum.photos/202/140" alt="Tercera foto de la galería" >

</body>
</html>

🚀 Reto AVANZADO · Tu página enciclopedia

Elegí un tema que te apasione y creá desde cero una página que use TODAS las etiquetas del módulo: estructura completa, encabezados jerárquicos, párrafos, una lista de cada tipo, un <hr>, un enlace externo seguro, al menos una imagen con alt descriptivo y comentarios organizando todo.

Estructura completa: DOCTYPE, html, head con title y charset, body Un solo <h1>, con h2/h3 jerarquizando Una <ul> y una <ol> Un enlace externo con target="_blank" y rel="noopener noreferrer" Una imagen con alt descriptivo Comentarios organizando las secciones

Construí tu página personal

Llegó el momento de juntar todo lo que aprendiste para crear algo tuyo.

🎯 Misión: mi página web personal

Creá tu propia página personal usando TODOS los elementos que aprendiste. Tu página debe incluir obligatoriamente:

La estructura HTML correcta y completa (<!DOCTYPE>, <html>, <head>, <body>).
Un título principal con tu nombre (<h1>).
Una sección "Sobre mí" con al menos 2 párrafos.
Al menos 3 subtítulos organizando la página (<h2>, <h3>).
Una lista de tus hobbies o cosas favoritas (<ul> o <ol>).
Un enlace a un sitio que te guste (<a>).
Una imagen que te represente, con su alt (<img>).
Comentarios explicando cada sección ().

El desafío: antes de escribir, hacete el plan en papel: ¿qué secciones va a tener?

El editor arranca vacío a propósito: acá no hay andamiaje. Todo lo que necesitás ya lo practicaste en las secciones anteriores. Si te trabás, volvé al paso correspondiente con el índice 📑 o espiá el glosario.

📝 mi-pagina-personal.html HTML

💡 Antes de entregar, revisá: ¿la estructura está completa? ¿Hay un solo <h1>? ¿Tu imagen tiene alt descriptivo? ¿El enlace abre en pestaña nueva con rel="noopener noreferrer"? ¿Los comentarios organizan tus secciones?

Glosario

Tocá cualquier tarjeta para darla vuelta. Buscá por palabra si necesitás algo puntual.

🚀 Lo que viene: ya sabés cómo funciona la web y cómo se escribe HTML: estructura, texto, enlaces e imágenes. En el Módulo 2 vas a aprender a darle significado a cada zona de tu página (semántica) y a identificar elementos con id y class. Todo lo que aprendiste acá es la base de eso.