Bouw een kleine pagina

Een complete pagina voor een buurtbakkerij past in ongeveer 50 regels HTML, en elk element erin komt uit de laatste negen eenheden.

Plan voordat je typt

Schrijf voordat je HTML schrijft op wat de pagina moet zeggen, in gewone woorden en op volgorde. Voor een kleine bakkerij kan dat zijn: de naam, een kort menu met links, wat er vandaag wordt gebakken, de openingstijden, een foto van het brood, een manier om je aan te melden voor nieuws, en het adres. Elk punt suggereert dan een element: de naam is een <h1> in een <header>, de links gaan in een <nav>, de openingstijden zijn een tabel, de broodlijst is een <ul>, de aanmelding is een formulier en het adres komt in de <footer>. Eerst de inhoud plannen doen ook professionele teams; de HTML volgt daaruit.

De afgeronde structuur

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

Twee regels in de head zijn nieuw. <meta name="viewport" content="width=device-width, initial-scale=1"> zegt telefoons de echte schermbreedte te gebruiken in plaats van te doen alsof ze een bureaubladscherm zijn en de pagina te verkleinen; de CSS-cursus legt het uit in de eenheid over responsief ontwerp. Het menu is een lijst met links in <nav>, die schermlezers melden als navigatie, lijst, 3 items. Elke menulink wijst naar de id van een sectie, zodat de pagina werkt als één doorlopend scrollend document.

Controleer het als een beoordelaar

Loop de pagina als hij klaar is door zoals een zorgvuldige beoordelaar zou doen. Lees alleen de koppen: vertellen ze het verhaal van de pagina? Druk vanaf de bovenkant op Tab: kun je elke link en elk formulierveld bereiken, in een zinnige volgorde, en zie je waar de focus is? Kijk naar elke afbeelding: zegt de alt-tekst wat er zonder haar verloren zou gaan, of is ze leeg omdat de afbeelding decoratie is? Klik op elk label: zet het de focus op zijn veld? Plak de pagina tot slot in de W3C Markup Validation Service op validator.w3.org, die fouten zoals niet-gesloten elementen of dubbele ids opsomt.

De pagina ziet er eenvoudig uit: zwarte tekst op wit, blauwe links, de standaardlettertypen van de browser. Dat is prima en zelfs nuttig. Een pagina met goede HTML is al leesbaar op elk apparaat, werkt met een toetsenbord en een schermlezer, en kan worden afgedrukt. De CSS-cursus begint precies bij zo'n pagina en voegt er kleur, ruimte en indeling aan toe, zonder één regel HTML te veranderen.

Bouw het in kleine stappen

Schrijf de pagina in kleine stappen en kijk na elke stap naar het resultaat: eerst het skelet, dan de header en het menu, dan één sectie tegelijk. Ziet er iets mis uit, dan hoef je maar een paar nieuwe regels te controleren. Sla het bestand op je eigen computer op als index.html en open het met een dubbelklik; de browser toont het rechtstreeks vanaf de schijf. Om het te publiceren upload je hetzelfde bestand naar een webhost, en de server stuurt het naar iedereen die om het adres vraagt, zoals de eerste eenheid begon.