Construye una página pequeña

Un sitio completo de una página para la panadería del barrio cabe en unas 50 líneas de HTML, y todos sus elementos vienen de las nueve unidades anteriores.

Planifica antes de escribir

Antes de escribir nada de HTML, anota lo que la página tiene que decir, con palabras sencillas y en orden. Para una panadería pequeña podría ser: el nombre, un menú breve de enlaces, lo que se hornea hoy, el horario de atención, una foto del pan, una forma de suscribirse a las novedades y la dirección. Luego cada punto sugiere un elemento: el nombre es un <h1> en un <header>, los enlaces van en un <nav>, el horario es una tabla, la lista de panes es un <ul>, la suscripción es un formulario y la dirección va en el <footer>. Planificar primero el contenido es también lo que hacen los equipos profesionales; el HTML sale de ahí.

La estructura terminada

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Corner Bakery</title>
</head>
<body>
  <header>
    <h1>Corner Bakery</h1>
    <nav>
      <ul>
        <li><a href="#today">Today</a></li>
        <li><a href="#hours">Hours</a></li>
        <li><a href="#news">News</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="today">
      <h2>Baked today</h2>
      <ul>...</ul>
    </section>
    <section id="hours">
      <h2>Opening hours</h2>
      <table>...</table>
    </section>
    <section id="news">
      <h2>Get our news</h2>
      <form>...</form>
    </section>
  </main>
  <footer>
    <p>12 Mill Street, Springfield</p>
  </footer>
</body>
</html>

Hay dos líneas nuevas en el head. <meta name="viewport" content="width=device-width, initial-scale=1"> les dice a los teléfonos que usen el ancho real de la pantalla en lugar de fingir que son una pantalla de escritorio y achicar la página; el curso de CSS lo explica en la unidad de diseño adaptable. El menú es una lista de enlaces dentro de <nav>, que los lectores de pantalla anuncian como navegación, lista, 3 elementos. Cada enlace del menú apunta al id de una sección, así que la página funciona como un único documento que se desplaza.

Revísala como lo haría un revisor

Cuando la página esté escrita, recórrela como lo haría un revisor cuidadoso. Lee solo los títulos: ¿cuentan la historia de la página? Presiona Tab desde arriba: ¿puedes llegar a cada enlace y a cada campo del formulario en un orden razonable, y ves dónde está el foco? Mira cada imagen: ¿su texto alternativo dice lo que se perdería sin ella, o está vacío porque la imagen es decorativa? Haz clic en cada etiqueta: ¿pone el foco en su campo? Por último, pega la página en el servicio de validación de marcado del W3C, en validator.w3.org, que lista errores como elementos sin cerrar o id duplicados.

La página se verá sencilla: texto negro sobre blanco, enlaces azules, las fuentes por defecto del navegador. Está bien, e incluso es útil. Una página con buen HTML ya se puede leer en cualquier dispositivo, funciona con teclado y con lector de pantalla, y se puede imprimir. El curso de CSS parte exactamente de este tipo de página y le agrega color, espaciado y diseño encima, sin cambiar una sola línea del HTML.

Constrúyela en pasos pequeños

Escribe la página en pasos pequeños y mira el resultado después de cada uno: primero el esqueleto, luego el encabezado y el menú, luego una sección a la vez. Si algo se ve mal, solo tienes unas pocas líneas nuevas que revisar. En tu propia computadora, guarda el archivo como index.html y ábrelo con doble clic; el navegador lo muestra directamente desde el disco. Para publicarlo, subes el mismo archivo a un servicio de alojamiento web, y el servidor se lo envía a cualquiera que pida la dirección, igual que como empezó la primera unidad.