Estructura y texto
Uso de encabezados, párrafos, énfasis y citas.
- <h1>...<h6>
- <p>, <strong>, <em>
Buenas prácticas semánticas
Módulos de práctica HTML
El laboratorio está organizado en módulos progresivos para que cada estudiante domine la estructura de una página.
Listas y navegación
Creación de menús y agrupación de información.
- Listas ordenadas
- Listas no ordenadas
- Listas de definiciones
Formularios y control
Interacción del usuario con campos y validaciones.
- Input
- Texto, email, fecha, rango y color.
- Select
- Selección de opciones y grupos.
Tarjetas explorables
Pasa el cursor sobre cada tarjeta para abrir un panel flotante con una explicación más detallada.
Estructura base
Bloques principales
¿Qué practicar?
Usa <header>, <main> y <footer> para separar zonas claras.
Meta: que tu documento sea entendible sin estilos.
Texto semántico
Jerarquía de contenido
¿Qué practicar?
Combina títulos h1-h3, párrafos y énfasis para construir lectura guiada.
Meta: evitar usar solo <div> para todo.
Enlaces
Navegación útil
¿Qué practicar?
Incluye enlaces internos con #id y externos con rel=\"noopener\".
Meta: que el usuario siempre sepa a dónde irá.
Imágenes
Comunicación visual
¿Qué practicar?
Agrega alt descriptivo y acompaña con <figcaption> cuando aplique.
Meta: accesibilidad y contexto para cada recurso.
Tablas
Datos ordenados
¿Qué practicar?
Define <caption>, encabezados de columna y scope para claridad.
Meta: que los datos sean legibles y escalables.
Formularios
Captura de datos
¿Qué practicar?
Relaciona cada campo con su <label> y agrupa con <fieldset>.
Meta: formularios claros y fáciles de completar.
Bitácora de lanzamientos
Ejemplo de tabla para practicar filas, columnas y etiquetas de datos.
| Día | Tema | Nivel | Estado |
|---|---|---|---|
| Lunes | Etiquetas base | Inicial | Completado |
| Miércoles | Enlaces e imágenes | Inicial | En curso |
| Viernes | Formularios | Intermedio | Pendiente |
Zona de experimentos
<img>.Fragmento HTML de ejemplo
<section>
<h2>Misión 01</h2>
<p>Explora etiquetas semánticas.</p>
</section>Consejo del instructor
Usa nombres de clase descriptivos para facilitar estilos y mantenimiento.
Video de apoyo: Introducción a HTML
Si el navegador o la red bloquean el embed, ábrelo aquí: ver en YouTube.
"HTML no se memoriza: se domina construyendo."
Academia interactiva
Programa tus prácticas como si fueras control de misión: escribe, ejecuta, valida y mide tu progreso.
Editor en línea
Puedes tocar HTML, CSS y JS. La salida se actualiza en la vista previa.
Vista previa de misión
Listo para ejecutar.
Constructor guiado para principiantes
Completa una misión por vez en el editor HTML. Cuando termines un paso, se desbloquea el siguiente.
- Paso 1: agrega un título con
<h1>. - Paso 2: agrega un párrafo
<p>. - Paso 3: agrega un enlace
<a href=\"...\">. - Paso 4: agrega una imagen con
alt.
Pista: escribe un <h1> simple como título de tu misión.
Estado: listo para iniciar.
Checklist automática
Incluye estas piezas en tu HTML y pulsa Evaluar misión.
- Agregar un encabezado con
<h1>o<h2>. - Incluir al menos un párrafo
<p>. - Añadir un enlace con
<a href="...">. - Agregar una imagen con atributo
alt. - Incluir una lista
<ul>o<ol>.
Sin evaluar todavía.
Mini quiz de repaso
Completa el quiz para ver tu puntaje.
Panel de progreso
Tu avance combina checklist + quiz para dar una métrica clara de aprendizaje.
0%