¿De dónde viene la web?
Antes de escribir tu primera línea de código, vale la pena entender qué es esto que vas a construir. Una página web no apareció de la nada: es el resultado de más de 50 años de historia. Y lo mejor es que la idea central es muy simple.
📜 Línea de tiempo de la Web
ARPANET
Estados Unidos conecta las primeras computadoras entre universidades. Es el "abuelo" de internet: una red para compartir información.
Nace la idea de la WWW
Tim Berners-Lee, un científico del CERN, propone un sistema de documentos conectados entre sí mediante enlaces: la World Wide Web.
Primera página web
Se publica la primera página web de la historia. Era solo texto y enlaces… ¡y todavía existe online!
Web 2.0
La web se vuelve social: las personas dejan de solo leer y empiezan a publicar. Blogs, YouTube, redes sociales.
Web 3.0 y web actual
Aplicaciones inteligentes, datos conectados, web en el celular. Pero por debajo… ¡sigue funcionando con HTML!
🖥️ ¿Qué es una página web?
Una página web es, en el fondo, un archivo de texto con instrucciones. La analogía perfecta: una página web es como una hoja de instrucciones que el navegador lee y convierte en lo que ves en pantalla.
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.
🖍️ ¿Qué es un lenguaje de marcado?
Un lenguaje de marcado sirve para describir y organizar contenido. La analogía: 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".
Esto 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 |
🔤 HTML: HyperText Markup Language
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.
Ejemplo 1 · Un texto plano sin marcas (el navegador no sabe qué es cada cosa):
Mi escuela Estudio en el liceo de mi barrio.
Ejemplo 2 · El mismo texto con marcas HTML (ahora todo tiene significado):
<h1>Mi escuela</h1> <p>Estudio en el liceo de mi barrio.</p>
Ejemplo 3 · Hipertexto en acción (un enlace conecta documentos):
<p>Aprendé más en <a href="https://ceibal.edu.uy">el sitio de Ceibal</a>.</p> <!-- Esto de arriba es HIPERTEXTO: texto con un enlace adentro -->
🎬 Video de referencia
📺 Video por TodoCode (@TodoCode) · todocodeacademy.com · 273K suscriptores · "Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."
⚙️ Tu primera marca HTML
A la izquierda ves la sintaxis explicada. A la derecha tenés un Simulador: escribí o modificá el código y tocá ▶ Ejecutar para ver el resultado al instante. La tecla Tab agrega 2 espacios de indentación.
<!-- Una etiqueta envuelve al contenido --> <p>Hola, soy un párrafo.</p> <!-- Apertura + contenido + cierre --> <h1>Soy un título grande</h1> <!-- Las etiquetas le dan SIGNIFICADO al texto: el navegador las lee y dibuja cada cosa como corresponde -->
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá las tarjetas para ordenar los hitos de la historia de la web del más antiguo al más reciente (el más antiguo arriba). Cuando creas que está listo, tocá Verificar.
Arrastrá cada palabra del banco hasta el hueco que le corresponde. ⚠️ Atención: hay palabras trampa que no van en ningún hueco.
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.
Completá los espacios resaltados en amarillo escribiendo la palabra que falta. Después tocá Verificar para recibir tu corrección.
HTML significa HyperText Language. Es un lenguaje de que usa para indicarle al qué es cada parte del contenido.
Elegí la opción correcta en cada pregunta. Vas a recibir una explicación inmediata. ⚠️ Una vez que elegís, no podés cambiar la respuesta: ¡pensá antes de tocar!
Consigna: abajo tenés una estructura base ya cargada. Tu tarea es completar las dos partes marcadas con comentarios: (1) escribir un comentario HTML explicando con tus palabras qué es la web, y (2) escribir un párrafo <p> contando quién inventó la WWW y en qué año. Ejecutá para ver el resultado y descargá tu solución.
¡Ahora el desafío es tuyo! Investigá (en el video, en la teoría de arriba o en internet) y creá desde cero una mini página HTML sobre la historia de la web. El editor está completamente vacío a propósito: vos construís todo. Tu página debe incluir: un título <h1> con el nombre de tu página, al menos dos párrafos <p> contando hitos de la historia (ARPANET, Tim Berners-Lee, Web 2.0…), y al menos un comentario <!-- --> explicando qué hace tu código.
Autoevaluación — marcá lo que cumpliste:
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. En esta sección lo vamos a desarmar pieza por pieza, para que entiendas qué hace cada parte y por qué va donde va.
📄 <!DOCTYPE html> — la portada del documento
Es siempre la primera línea de todo archivo HTML. No es una etiqueta común: es una declaración que le avisa al navegador "esto es HTML moderno (HTML5), interpretalo con las reglas actuales".
Analogía: es como la portada de un documento que dice "esto es HTML moderno". Si falta, el navegador puede entrar en un "modo antiguo" y dibujar la página con reglas viejas e impredecibles.
🌳 <html lang="es"> — el elemento raíz
Es la etiqueta que envuelve todo lo demás. Por eso se llama "raíz": como en un árbol, de ella nacen todas las ramas. El atributo lang="es" indica el idioma de la página; ayuda a los lectores de pantalla (accesibilidad) y a los buscadores.
🧠 <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 en el cuerpo de la página. Adentro van:
<title>: el texto que aparece en la pestaña del navegador. Es obligatorio en toda página.<meta charset="UTF-8">: define la codificación de caracteres. Sin ella, las tildes y la "ñ" pueden verse como símbolos raros (�).<meta name="viewport">: le dice al navegador cómo adaptar la página a pantallas de celular o tablet.
| Atributo | Qué hace | Ejemplo |
|---|---|---|
lang | Indica el idioma del documento | <html lang="es"> |
charset | Define la codificación (tildes, ñ, emojis) | <meta charset="UTF-8"> |
name + content | Pares de metadato y su valor | <meta name="viewport" content="width=device-width"> |
👀 <body> — lo que SÍ se ve
El <body> es donde vive todo el contenido visible: textos, imágenes, enlaces, listas, botones. Si <head> es el cerebro (configura cosas en silencio), <body> es el cuerpo: lo que todos pueden ver.
📝 Comentarios <!-- ... -->
Los comentarios son notas privadas dentro del código. El navegador los ignora por completo: no se muestran en la página. Analogía: son como notas al margen que solo ve quien escribe 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.
🌲 El árbol del documento (jerarquía)
Las etiquetas se organizan como un árbol genealógico: hay elementos padre que contienen elementos hijo. Así se ve la jerarquía mínima de toda página:
- <head> ← metadatos (no visible)
- <meta charset="UTF-8">
- <title> ← texto de la pestaña
- <body> ← contenido visible
- <h1>, <p>, <img>… ← lo que ves
Ejemplo 1 · Estructura mínima completa, línea por línea:
<!DOCTYPE html> <!-- 1) Declara: "soy HTML5" --> <html lang="es"> <!-- 2) Raíz: envuelve todo, idioma español --> <head> <!-- 3) Metadatos: lo que NO se ve --> <meta charset="UTF-8"> <!-- 4) Tildes y ñ funcionan --> <title>Mi página</title> <!-- 5) Texto de la pestaña --> </head> <body> <!-- 6) Contenido visible --> <h1>¡Hola mundo!</h1> </body> </html>
Ejemplo 2 · Comentarios bien usados para organizar:
<body> <!-- ===== Sección: presentación ===== --> <h1>Sobre mí</h1> <!-- ===== Sección: hobbies ===== --> <h2>Mis hobbies</h2> </body>
Ejemplo 3 · ¿Qué pasa con el <title>? (no se ve en el cuerpo):
<head> <title>Liceo 5 · Tareas</title> <!-- Aparece en la PESTAÑA, no en la página --> </head>
<head> por error.🎬 Video de referencia
📺 Video por TodoCode (@TodoCode) · todocodeacademy.com · 273K suscriptores · "Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."
⚙️ El esqueleto en acción
<!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>
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá las líneas para dejar la estructura HTML en el orden correcto, de arriba hacia abajo.
Arrastrá cada etiqueta del banco al hueco correcto del esqueleto. ⚠️ Hay etiquetas trampa que no van en ningún lugar.
<html lang="es">
<_____>
<_____>Mi página</...>
</head>
<_____> … contenido visible … </...>
</html>
Escribí lo que falta en cada espacio amarillo 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>
Cinco preguntas para comprobar si entendiste el esqueleto. Elegí con cuidado: no se puede cambiar la respuesta.
Consigna: la estructura ya está armada, pero le faltan tres cosas marcadas con comentarios: (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. Completá, ejecutá y descargá.
¡Desafío total! 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 (ej: <!-- Sección: introducción -->) y un poco de contenido.
Autoevaluación — marcá lo que cumpliste:
Dándole forma al texto
Ya sabés armar el esqueleto. Ahora vamos a llenarlo de contenido bien organizado: títulos, párrafos, separadores y listas. 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. Analogía: son como los títulos y subtí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>.
Importante: la jerarquía es semántica, no decorativa. No elegimos <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 ❌).
Así se ven los 6 niveles (tamaño decreciente):
📄 Párrafos <p>
Un párrafo es un bloque de texto con una idea. El navegador agrega automáticamente espacio antes y después de cada <p>, separándolo visualmente. Cada idea nueva → un <p> nuevo.
<br> repetidos para separar párrafos. Está mal: <br> es un salto de línea, no un separador de ideas. Si son ideas distintas, usá dos <p>. El navegador (y los lectores de pantalla) entienden mejor tu contenido.↩️ <br> y <hr> — etiquetas vacías
<br> produce un salto de línea dentro del mismo párrafo. Es una etiqueta vacía (void element): no tiene contenido adentro y no se cierra. ¿Cuándo usarla bien? En direcciones, poemas o letras de canciones, donde el corte de línea es parte del contenido.
<hr> dibuja una línea horizontal: un separador temático entre partes del contenido. También es vacía y tampoco se cierra.
📋 Lista desordenada <ul>
<ul> (unordered list) agrupa elementos donde el orden no importa: ingredientes, hobbies, útiles escolares. Cada elemento va dentro de un <li> (list item). Por defecto se ven con viñetas (puntos).
🔢 Lista ordenada <ol>
<ol> (ordered list) se usa cuando el orden importa: pasos de una receta, instrucciones, un ranking. Los ítems se numeran automáticamente.
| Atributo | Qué hace | Ejemplo |
|---|---|---|
type | Cambia el tipo de numeración: 1, A, a, I, i | <ol type="A"> → A, B, C… |
start | Define desde qué número empieza | <ol start="5"> → 5, 6, 7… |
🪆 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.
Ejemplo 1 · Encabezados y párrafos bien jerarquizados:
<h1>Mi banda favorita</h1> <!-- Único h1 de la página --> <p>Los descubrí el año pasado.</p> <h2>Sus mejores canciones</h2> <!-- Subtítulo: nivel 2 --> <p>Acá va mi top personal.</p>
Ejemplo 2 · <br> y <hr> usados correctamente:
<p>Liceo N° 5<br> <!-- salto de línea: misma idea --> Av. Italia 1234<br> Montevideo, Uruguay</p> <hr> <!-- separador temático: cambia el tema --> <p>Otro tema totalmente distinto.</p>
Ejemplo 3 · Lista anidada (una lista dentro de un ítem):
<ul> <li>Deportes <ul> <!-- sub-lista DENTRO del <li> --> <li>Fútbol</li> <li>Básquetbol</li> </ul> </li> <li>Música</li> </ul>
<!-- --> son tus aliados para organizar secciones.🎬 Videos de referencia
📺 Video 1 · Encabezados y párrafos · por TodoCode (@TodoCode) · todocodeacademy.com · 273K suscriptores · "Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."
📺 Video 2 · Listas en HTML · por TodoCode (@TodoCode) · todocodeacademy.com · 273K suscriptores · "Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."
⚙️ Texto con estructura
<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" start="1"> <!-- con orden --> <li>Primer paso</li> <li>Segundo paso</li> </ol> <hr> <!-- separador, sin cierre -->
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá los encabezados para ordenarlos de mayor a menor jerarquía (el más importante arriba).
Para cada situación, arrastrá la etiqueta correcta desde el banco. ⚠️ Cuidado con las etiquetas trampa.
Lista de ingredientes (sin orden) → _____
Cada elemento dentro de una lista → _____
Separador temático (línea horizontal) → _____
Salto de línea en un poema → _____
Completá las etiquetas que faltan (sin escribir los signos < >, solo el nombre de la etiqueta).
<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>
Demostrá lo que entendiste sobre encabezados, párrafos y listas.
Consigna: esta página de útiles escolares está incompleta. Seguí los comentarios: (1) agregá un subtítulo <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.
¡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> organizando secciones ("Sobre mí", "Mis gustos"…), dos párrafos, una <ul> con tus hobbies, una <ol> con tu top 3 de algo (canciones, comidas, juegos), un <hr> separando secciones y comentarios organizando el código.
Autoevaluación — marcá lo que cumpliste:
🔗 Enlaces: las puertas de la web
La etiqueta <a> · el hipervínculo
Si la web fuera una ciudad gigante, los enlaces serían las puertas que conectan un edificio con otro. Sin enlaces no existiría "navegar": cada página estaría aislada. La etiqueta que crea enlaces es <a>, que viene de anchor ("ancla" en inglés), porque "ancla" un texto a otro destino.
El atributo 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: una URL completa, como
href="https://www.ceibal.edu.uy". A esto se le llama URL absoluta: tiene la dirección entera, con https:// incluido. - Otra página de tu propio sitio: solo el nombre del archivo, como
href="contacto.html". Es una URL relativa: relativa a dónde está tu página. - Un lugar dentro de la misma página: un ancla interna, como
href="#glosario". ¡De esto hablamos más abajo!
<!-- Ejemplo 1: enlace externo (URL absoluta) --> <a href="https://www.ceibal.edu.uy">Visitá el sitio de Ceibal</a>
target="_blank" · abrir en nueva pestaña
Por defecto, un enlace reemplaza la página actual. Si querés que el destino se abra en una pestaña nueva (por ejemplo, para que el lector no pierda tu página), agregá target="_blank".
Cuando uses target="_blank", agregá también rel="noopener noreferrer". Es una medida de seguridad: evita que la página nueva pueda "espiar" o manipular la pestaña original.
<!-- Ejemplo 2: enlace que abre en pestaña nueva, con seguridad --> <a href="https://todocodeacademy.com" target="_blank" rel="noopener noreferrer">Canal TodoCode</a>
Anclas internas · saltar dentro de la misma página
En páginas largas podés crear "atajos" internos. Funciona en dos pasos:
- Paso 1: marcá el destino con un
idúnico. Ej:<h2 id="contacto">Contacto</h2> - Paso 2: creá el enlace con
href="#contacto"(el numeral#+ el id).
<!-- Ejemplo 3: ancla interna --> <a href="#contacto">Ir a la sección Contacto</a> <!-- ...mucho contenido después... --> <h2 id="contacto">Contacto</h2>
Buenas prácticas con enlaces
- Texto descriptivo: el texto del enlace debe decir a dónde lleva. ❌ "clic aquí" · ✅ "Descargá la guía de estudio".
- <a> sin href: un enlace sin
hrefqueda desactivado (no se puede hacer clic). Se usa a veces como marcador temporal mientras se construye un sitio.
| Atributo | Qué hace | Ejemplo |
|---|---|---|
href | Define el destino del enlace | href="https://ceibal.edu.uy" |
target | Dónde se abre el destino (_blank = pestaña nueva) | target="_blank" |
rel | Relación con el destino; con _blank usar por seguridad | rel="noopener noreferrer" |
id (en el destino) | Marca un punto de la página para anclas internas | <h2 id="inicio"> |
📺 Video por TodoCode (@TodoCode) · todocodeacademy.com · 273K suscriptores · "Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."
⚙️ Sintaxis en acción
<!-- 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>
🎮 Actividades de comprensión — tocá para desplegar
Estas tarjetas son las partes de una etiqueta <a> completa, pero están desordenadas. Arrastrá las tarjetas hasta dejarlas en el orden correcto de escritura (de izquierda a derecha como se escribiría en el código) y tocá «Verificar».
Arrastrá cada palabra del banco hasta su hueco en el código. ⚠️ Atención: hay palabras trampa que no van en ningún lugar.
<a ________="https://www.ceibal.edu.uy" ________="________" ________="noopener noreferrer"> Visitá Ceibal </a>
Escribí en los espacios amarillos lo que falta para que el enlace funcione y se abra en una pestaña nueva. Después tocá «Verificar».
<a ="https://www.youtube.com" =""> Ver videos </a>
Leé cada pregunta y elegí la opción correcta. Vas a recibir una explicación con cada respuesta. No podés cambiar tu respuesta, así que pensala bien.
Consigna: esta página de "Sitios recomendados" tiene los enlaces sin terminar. Seguí los comentarios marcados con ✏️ y completá los destinos y atributos que faltan. Cuando funcione, descargá tu solución.
¡Construí un menú de navegación interna! Creá desde cero una página larga con un menú arriba que use anclas internas. Debe incluir: estructura HTML completa; un <h1> con el título de la página; un menú con al menos 3 enlaces <a href="#...">; tres secciones, cada una con un <h2> que tenga su id correspondiente y un párrafo de contenido; y un enlace externo al final que se abra en pestaña nueva con rel="noopener noreferrer".
Autoevaluación — marcá lo que cumpliste:
🖼️ Imágenes & Sintaxis HTML
Parte A · La etiqueta <img>
Una página solo con texto puede ser aburrida. La etiqueta <img> inserta imágenes. Es una etiqueta vacía (void element): no tiene cierre, porque no envuelve contenido; la imagen "vive" en la propia etiqueta.
<img> es como un marco de cuadro colgado en la pared: el marco (la etiqueta) no "contiene texto adentro", solo señala dónde va el cuadro y cuál es.src · ¿qué imagen mostrar?
El atributo src (source, fuente) indica dónde está la imagen. Puede ser:
- Una URL externa (absoluta):
src="https://ejemplo.com/foto.jpg"— la imagen está en internet. - Un archivo local (relativa):
src="fotos/perro.png"— la imagen está en una carpeta junto a tu archivo HTML.
alt · el texto alternativo (¡nunca lo omitas!)
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 a entender tu página (SEO).
alt. Si la imagen es puramente decorativa, se escribe vacío: alt="" — así el lector de pantalla la salta sin molestar.width y height · el tamaño
Los atributos width (ancho) y height (alto) definen el tamaño en píxeles. Indicar el tamaño ayuda al navegador a reservar el espacio antes de que cargue la imagen, y así la página no "salta" mientras carga (mejor rendimiento).
Formatos de imagen
| Formato | Cuándo usarlo |
|---|---|
| JPG | Fotografías. Buena compresión, sin transparencia. |
| PNG | Logos, capturas, imágenes con fondo transparente. |
| GIF | Animaciones simples. Pocos colores. |
| WebP | Formato moderno: pesa menos con buena calidad. Ideal para la web. |
<!-- Ejemplo 1: imagen desde URL externa, con alt y tamaño --> <img src="https://picsum.photos/300/200" alt="Fotografía de paisaje de ejemplo" width="300" height="200">
Parte B · Anatomía de una etiqueta
Repasemos cómo se arma cualquier etiqueta HTML. La estructura general tiene 3 partes:
<!-- Ejemplo 2: anatomía completa --> <p>Hola mundo</p> ↑apertura ↑contenido ↑cierre
- Etiqueta de apertura:
<p>— abre el "envoltorio". - Contenido: lo que va adentro (texto u otras etiquetas).
- Etiqueta de cierre:
</p>— igual a la de apertura pero con barra/.
Etiquetas vacías (void elements)
Algunas etiquetas no tienen cierre porque no envuelven contenido: <br>, <hr>, <img>, <input>. Escribir </br> o </img> es un error.
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. Algunos atributos son booleanos: con solo estar presentes ya valen "sí", sin necesidad de valor. Ej: <input disabled> (campo desactivado).
Anidamiento correcto e incorrecto
Cuando una etiqueta va dentro de otra, la que se abre último se cierra primero (como cajas dentro de cajas):
<!-- Ejemplo 3 --> ✅ CORRECTO: las cajas se cierran en orden <p>Me encanta <strong>aprender HTML</strong> en clase</p> ❌ INCORRECTO: las etiquetas se "cruzan" <p>Me encanta <strong>aprender HTML</p></strong>
Mayúsculas y minúsculas
HTML5 no distingue mayúsculas de minúsculas (<P> funciona igual que <p>), pero la convención universal es escribir todo en minúsculas. Tu código se ve más profesional y ordenado.
📋 Tabla resumen · todas las etiquetas del recurso
| 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
<!-- 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="">
🎮 Actividades de comprensión — tocá para desplegar
Arrastrá los atributos de <img> y ordenalos del más imprescindible al más opcional, según lo que viste en la teoría. Después tocá «Verificar».
Arrastrá cada etiqueta a su grupo: etiquetas vacías (sin cierre) o etiquetas con cierre. ¡Todas las tarjetas tienen lugar en algún grupo!
Completá los espacios amarillos: el atributo de la fuente de la imagen, 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 -->
Leé cada pregunta y elegí la opción correcta. Vas a recibir una explicación con cada respuesta. No podés cambiar tu respuesta, así que pensala bien.
Consigna: esta galería tiene 3 imágenes incompletas. Seguí los comentarios marcados con ✏️ y completá los atributos que faltan en cada una. Ejecutá para verlas aparecer y descargá tu solución.
¡Tu página enciclopedia! Elegí un tema que te apasione (un animal, un deporte, un juego, una banda…) y creá desde cero una página completa que use TODAS las etiquetas del recurso: estructura completa (<!DOCTYPE>, <html>, <head> con <title> y <meta charset>, <body>), encabezados jerárquicos, párrafos, una lista de cada tipo, un separador <hr>, un enlace externo seguro, al menos una imagen con alt descriptivo y comentarios organizando todo.
Autoevaluación — marcá lo que cumpliste:
¡Tu primera página web real está a un paso! 🚀
Usás todo lo que aprendiste para crear algo tuyo.
🚀 MISIÓN: Mi Página Web Personal
Creá tu propia página web personal usando TODOS los elementos que aprendiste. Tu página debe incluir obligatoriamente:
- Un título principal con tu nombre (
<h1>) - Una sección "Sobre mí" con al menos 2 párrafos (
<p>) - Una lista de tus hobbies o cosas favoritas (
<ul>o<ol>) - Al menos 3 subtítulos organizando la página (
<h2>,<h3>) - Un enlace a tu red social favorita o a un sitio que te guste (
<a>) - Una imagen que te represente — podés usar una URL de internet (
<img>) - Comentarios explicando cada sección (
<!-- -->) - La estructura HTML correcta y completa (
<!DOCTYPE>,<html>,<head>,<body>)
Antes de entregar, revisá tu trabajo y marcá cada punto que cumpliste:
📖 Glosario interactivo
Tocá cualquier tarjeta para girarla y ver su definición, un ejemplo y el link a la sección donde se explica. Usá el buscador para filtrar.
No encontramos resultados para tu búsqueda. Probá con otra palabra. 🔎