Curso de HTML / Construir y revisar un pequeño sitio de varias páginas

Un pequeño sitio de varias páginas combina estructura de documento, regiones semánticas, enlaces y formularios. En esta práctica crearás Home, About y Contact en una sola carpeta y comprobarás la navegación entre los tres archivos. El formulario es una demostración de entrada y validación: HTML por sí solo no recibe ni guarda mensajes de contacto.

Preparar los tres archivos

Crea una carpeta nueva y guarda dentro los tres archivos de texto UTF-8 siguientes, conservando nombres y extensiones:

small-site/

  index.html

  about.html

  contact.html

Verifica que el editor no añade .txt. Al estar juntos, href="about.html" puede resolver la presentación desde cualquiera de las tres páginas. Si mueves un documento, revisa las rutas de los enlaces desde su nueva ubicación, según la práctica de rutas relativas.

Empieza con la versión de texto. Así puedes distinguir un problema de navegación de un recurso de imagen que todavía no has preparado. Las etiquetas y textos ingleses de estos ejemplos pertenecen al sitio de práctica; si lo adaptas al español, traduce el contenido y ajusta también lang.

Crear la página de inicio

Guarda todo el bloque siguiente como index.html. Incluye metadatos, estilos básicos y una navegación que se repetirá en las otras páginas:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home | Small Garden</title>
  <meta name="description" content="Home of the Small Garden practice site, with links to About and a contact-form exercise.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html" aria-current="page">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Small Garden</h1>
    <p>A short guide for people starting to grow plants.</p>
  </main>
  <footer><p>Small Garden practice</p></footer>
</body>
</html>

Al abrirlo deben aparecer el menú y “Small Garden”. Los enlaces About y Contact no funcionarán hasta que hayas creado sus archivos. El h1 pertenece a este documento independiente, no es un encabezado adicional que debas copiar fuera del ejemplo.

La región principal expresa el contenido propio de la página. Los elementos semánticos explican las funciones de header, nav, main y footer. El CSS aporta espacio, tamaño y foco; no transforma por sí mismo el significado de esas regiones.

Crear la presentación y el contacto

Guarda el siguiente bloque completo como about.html. Conserva los tres destinos, pero tiene su propio título, descripción y enlace actual:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About | Small Garden</title>
  <meta name="description" content="An introduction to the Small Garden practice site for people beginning to grow plants.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html" aria-current="page">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h1>About</h1>
    <p>Small Garden is a practice site for people beginning to grow plants.</p>
  </main>
  <footer><p>Small Garden practice</p></footer>
</body>
</html>

Después guarda el siguiente como contact.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact | Small Garden</title>
  <meta name="description" content="Practice entering and validating a name and test message without delivering a real contact request.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html" aria-current="page">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Contact-form practice</h1>
    <p>This example does not deliver a message. Use test text only.</p>
    <form method="get">
      <p><label for="visitor-name">Name</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">Message</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">Inspect entered values</button>
    </form>
  </main>
  <footer><p>Small Garden practice</p></footer>
</body>
</html>

Cada bloque es un documento completo. Sustituye el contenido entero del archivo, en lugar de anidar otro html o main dentro de una copia anterior. Coloca aria-current="page" únicamente en el enlace que corresponde al archivo actual.

El botón del contacto comprueba los campos obligatorios y realiza una práctica GET al documento actual. No entrega mensajes a nadie. Usa valores ficticios, porque pueden aparecer en la consulta de la URL. Un servicio real necesitaría un manejador, protección de los datos, controles contra abuso y respuestas de éxito o error. La diferencia entre interfaz y procesamiento del formulario permite separar esas tareas.

Comprobar navegación y estado actual

Desde inicio, abre presentación y contacto. Repite el recorrido desde cada una de las otras páginas: probar únicamente el primer menú deja enlaces sin comprobar. El enlace actual se ve en negrita por CSS, mientras aria-current comunica su estado independientemente del estilo.

Compara también las pestañas y las descripciones de los archivos. Cada documento debe tener metadatos propios que correspondan a su contenido, como se explica en título, descripción, idioma y codificación. Si un enlace falla, revisa nombre, extensión, mayúsculas y carpeta antes de cambiar varios destinos.

Revisar lectura, formulario y sintaxis

Usa Tab para llegar a cada enlace y a los controles del contacto. Identifica el foco y prueba campos vacíos antes de introducir textos de prueba. En una página servida por HTTP puedes inspeccionar la consulta GET; no interpretes esa navegación como recepción de un mensaje.

Reduce el ancho y amplía el texto. Los campos deben seguir siendo utilizables y no ocultar información esencial. Comprueba cada archivo con Nu HTML Checker, corrige los problemas y vuelve a revisar la última copia guardada. La validación del documento distingue este resultado de la navegación y la interacción reales.

Añadir mejoras sin perder la versión que funciona

Primero completa la base: tres páginas, seis recorridos hacia las otras dos, un único estado actual por menú y metadatos coherentes. Después añade una mejora cada vez, como una lista útil en About, una imagen con permiso y alternativa adecuada o información opcional en details.

Tras cada cambio, repite rutas, sintaxis y teclado para localizar de dónde surge un problema nuevo. Si cambias el menú común, actualiza las tres copias, pero conserva aria-current en el elemento propio de cada página. Después de desplegar, vuelve a revisar las rutas relativas: la sensibilidad a mayúsculas o la carpeta de publicación pueden diferir del equipo local.