Tutorial HTML: lecciones y ejemplos

Etapa uno: documento y mensaje

Crea index.html con doctype, idioma, codificación, título y cuerpo. Dentro del cuerpo escribe un encabezado que identifique el sitio y un párrafo que diga qué encontrará la persona. Abre el archivo desde su carpeta. Comprueba que el título de la pestaña y el encabezado visible pueden cambiar por separado. Guarda una copia antes de continuar para poder volver a esta base si un cambio posterior rompe algo.

<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><title>Mi sitio</title></head>
<body>
  <h1>Bienvenido a mi sitio</h1>
  <p>Aquí explico un proyecto pequeño.</p>
</body>
</html>

Si el navegador muestra etiquetas en lugar de interpretarlas, comprueba la extensión del archivo. Si el texto no cambia al recargar, verifica que abriste la copia que acabas de guardar.

Etapa dos: enlaces y recorrido

Añade una sección “Sobre el proyecto” con un id y un enlace desde la parte superior que apunte a ese fragmento. Después crea contacto.html y enlázalo con una ruta relativa. Comprueba el trayecto de ida y vuelta. El texto de cada enlace debe describir el destino; “leer sobre el proyecto” ayuda más que “haz clic aquí” cuando alguien recorre solo los enlaces.

Si un enlace interno no salta a la sección, compara lo escrito después de # con el valor de id. Si la segunda página no se abre, compara nombres y carpetas. No cambies simultáneamente el texto, la ruta y la estructura: una corrección pequeña te deja reconocer la causa.

Etapa tres: imagen con contexto

Coloca una imagen que tengas derecho a usar dentro de images. Enlázala desde el HTML y describe en alt la información que aporta. Si la imagen no añade ninguna información, considera si realmente se necesita. Desactiva temporalmente su carga y lee la página: el texto restante debe explicar todavía el proyecto. Añade CSS para limitar el ancho de la imagen sin alterar el orden del contenido.

Abre la página a un ancho estrecho. Si aparece desplazamiento horizontal, comprueba el tamaño de la imagen y los anchos fijos antes de reducir toda la tipografía. La presentación debe ayudar a leer el mismo contenido en distintos tamaños.

Etapa cuatro: formulario y revisión

Crea un formulario de práctica con un campo de nombre y una etiqueta label asociada mediante for e id. No prometas que el mensaje se enviará si aún no existe un destino de procesamiento. Puedes usarlo como ejercicio local de estructura y validación del navegador. Recorre los controles con teclado y comprueba que cada etiqueta identifica su campo.

La entrega final es una carpeta con las dos páginas, la imagen y la hoja de estilos. Ábrela desde otra ubicación para descubrir rutas absolutas accidentales. Pide a alguien que identifique de qué trata el sitio, llegue a la segunda página y vuelva. Si puede hacerlo sin indicaciones tuyas, la progresión de este tutorial produjo algo más útil que una colección de etiquetas sueltas.