Costruisci una piccola pagina

Un sito completo di una sola pagina per la panetteria del quartiere sta in circa 50 righe di HTML, e ogni elemento che contiene viene dalle nove unità precedenti.

Pianifica prima di scrivere

Prima di scrivere una sola riga di HTML, annota che cosa deve dire la pagina, con parole semplici e in ordine. Per una piccola panetteria potrebbe essere: il nome, un breve menu di link, che cosa si sforna oggi, gli orari di apertura, una foto del pane, un modo per iscriversi alle novità e l'indirizzo. Ogni voce suggerisce poi un elemento: il nome è un <h1> in un <header>, i link vanno in un <nav>, gli orari sono una tabella, l'elenco dei pani è un <ul>, l'iscrizione è un modulo, e l'indirizzo va nel <footer>. Pianificare prima i contenuti è ciò che fanno anche i gruppi di professionisti; l'HTML ne deriva.

La struttura finita

<!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>

Due righe di head sono nuove. <meta name="viewport" content="width=device-width, initial-scale=1"> dice ai telefoni di usare la larghezza reale dello schermo invece di fingersi uno schermo da computer e rimpicciolire la pagina; il corso di CSS lo spiega nell'unità sul design responsivo. Il menu è un elenco di link dentro <nav>, che gli screen reader annunciano come navigazione, elenco, 3 voci. Ogni link del menu punta all'id di una sezione, così la pagina funziona come un unico documento da scorrere.

Controllala come farebbe un revisore

Quando la pagina è scritta, percorrila come farebbe un revisore attento. Leggi solo i titoli: raccontano la storia della pagina? Premi Tab partendo dall'alto: riesci a raggiungere ogni link e ogni campo del modulo, in un ordine sensato, e vedi dov'è il focus? Guarda ogni immagine: il suo testo alternativo dice che cosa si perderebbe senza di essa, oppure è vuoto perché l'immagine è decorativa? Fai clic su ogni label: mette il focus sul suo campo? Infine, incolla la pagina nel W3C Markup Validation Service su validator.w3.org, che elenca errori come elementi non chiusi o id duplicati.

La pagina avrà un aspetto semplice: testo nero su bianco, link blu, i caratteri predefiniti del browser. Va bene, ed è perfino utile. Una pagina con un buon HTML è già leggibile su ogni dispositivo, funziona con la tastiera e con uno screen reader e si può stampare. Il corso di CSS parte proprio da una pagina come questa e aggiunge sopra colori, spaziature e impaginazione, senza cambiare una riga dell'HTML.

Costruiscila a piccoli passi

Scrivi la pagina a piccoli passi e guarda il risultato dopo ciascuno: prima lo scheletro, poi l'intestazione e il menu, poi una sezione alla volta. Se qualcosa non va, hai solo poche righe nuove da controllare. Sul tuo computer, salva il file come index.html e aprilo con un doppio clic; il browser lo mostra direttamente dal disco. Per pubblicarlo, carichi lo stesso file su un servizio di hosting, e il server lo invia a chiunque chieda l'indirizzo, proprio come all'inizio della prima unità.