Curso de HTML

Construye la estructura de la web.

Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.

Construye tu página

Es hora de llenar el esqueleto con contenido real. Esta página combina, en un solo documento, casi todo lo que aprendiste en el curso: texto, imágenes, listas, tabla, formulario y multimedia.

Cargando editor...

Resultado

Preparando resultado...

Recorre el resultado de arriba a abajo: cada sección corresponde a algo que ya construiste por separado en un módulo anterior del curso, ahora combinado en una sola página real.

Explicación

Esta página combina, en un solo documento, casi todo el curso. Revisa qué aporta cada sección:

header + nav

Organización semántica + enlaces de ancla (<a href="#sobre-mi">) para navegar dentro de la misma página.

#sobre-mi

Texto y contenido (<strong>, <em>), una imagen con alt y un <audio> de presentación.

#habilidades

Lista desordenada (<ul>) del módulo de Listas.

#experiencia

Una <table> completa con encabezados (<th scope="col">) y colspan, del módulo de Tablas.

#proyectos

<article> con un <video> de demostración y un enlace externo seguro (target="_blank" rel="noopener noreferrer").

#preguntas-frecuentes

Lista de definición (<dl>/<dt>/<dd>) del módulo de Listas.

#contacto

Un <form> con validación nativa (required, minlength) y un <iframe> de ubicación.

Reto rápido

En este formulario el label "Correo" tiene for="email" pero el input tiene id="correo": no coinciden. Corrige el for para que coincida con el id.

En esta lección

Ejemplo interactivo
Explicación de cada etiqueta
Cuándo usarlo
Errores comunes

Consejo

No necesitas memorizar todo esto de una vez: vuelve a la lección de cada módulo cuando no recuerdes un detalle. Este proyecto es la referencia que puedes reusar en tu propia página.

Dato extra

Esta misma estructura —header, main con varias section, footer— es la que usan la mayoría de páginas de presentación personal reales en la web.

Error común

Escribir el for del <label> distinto al id de su <input> (por ejemplo for="nombre" con id="name"): el navegador ya no relaciona la etiqueta con el campo, y hacer clic en el texto deja de enfocar el input.

Siguiente paso

Tu página está completa. Ahora aprende cómo publicarla para que cualquiera pueda verla en internet, no solo tú en este editor.

Ir a la siguiente lección