Construire une petite page

Un site complet d'une page pour une boulangerie de quartier tient en environ 50 lignes de HTML, et chacun de ses éléments vient des neuf chapitres précédents.

Planifie avant de taper

Avant d'écrire la moindre ligne de HTML, note ce que la page doit dire, en mots simples et dans l'ordre. Pour une petite boulangerie, cela pourrait être : le nom, un petit menu de liens, ce qui est cuit aujourd'hui, les horaires d'ouverture, une photo du pain, un moyen de s'inscrire aux nouvelles, et l'adresse. Chaque point suggère alors un élément : le nom est un <h1> dans un <header>, les liens vont dans un <nav>, les horaires forment un tableau, la liste des pains est un <ul>, l'inscription est un formulaire, et l'adresse va dans le <footer>. Planifier d'abord le contenu, c'est aussi ce que font les équipes professionnelles ; le HTML en découle.

La structure terminée

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

Deux lignes du head sont nouvelles. <meta name="viewport" content="width=device-width, initial-scale=1"> dit aux téléphones d'utiliser la vraie largeur de l'écran au lieu de faire comme s'ils étaient un écran d'ordinateur et de réduire la page ; le cours de CSS l'explique dans le chapitre sur le design adaptatif. Le menu est une liste de liens dans <nav>, que les lecteurs d'écran annoncent comme navigation, liste, 3 éléments. Chaque lien du menu pointe vers l'id d'une section, si bien que la page fonctionne comme un seul document qu'on fait défiler.

Vérifie-la comme un relecteur

Quand la page est écrite, parcours-la comme le ferait un relecteur attentif. Lis seulement les titres : racontent-ils l'histoire de la page ? Appuie sur Tab depuis le haut : peux-tu atteindre chaque lien et chaque champ de formulaire, dans un ordre logique, et vois-tu où se trouve le focus ? Regarde chaque image : son texte alternatif dit-il ce qui serait perdu sans elle, ou est-il vide parce que l'image est décorative ? Clique sur chaque label : donne-t-il le focus à son champ ? Enfin, colle la page dans le service de validation du W3C, validator.w3.org, qui liste les erreurs comme des éléments non fermés ou des id en double.

La page aura l'air sobre : texte noir sur fond blanc, liens bleus, polices par défaut du navigateur. C'est très bien, et même utile. Une page au HTML soigné est déjà lisible sur tous les appareils, fonctionne avec un clavier et un lecteur d'écran, et peut s'imprimer. Le cours de CSS part exactement de ce genre de page et ajoute par-dessus la couleur, l'espacement et la mise en page, sans changer une ligne du HTML.

Construis-la par petites étapes

Écris la page par petites étapes et regarde le résultat après chacune : d'abord le squelette, puis l'en-tête et le menu, puis une section à la fois. Si quelque chose cloche, tu n'as que quelques nouvelles lignes à vérifier. Sur ton ordinateur, enregistre le fichier sous le nom index.html et ouvre-le d'un double-clic ; le navigateur l'affiche directement depuis le disque. Pour le publier, tu envoies le même fichier chez un hébergeur web, et le serveur l'envoie à toute personne qui demande l'adresse, exactement comme au début du premier chapitre.