Définir l’en-tête et la navigation
Objectif : Construire l’en-tête du site et une navigation interne avec des landmarks explicites.
Une page de réservation doit permettre de repérer rapidement son identité et d’atteindre ses zones principales. Vous allez construire son en-tête et sa navigation interne sans ajouter de conteneurs ou de classes au projet.
La leçon précédente vous a appris à choisir un élément selon le rôle du contenu plutôt qu’à employer systématiquement un conteneur générique. Ici, header regroupe le contenu d’en-tête du site et nav identifie un ensemble de liens de navigation.
Construire l’en-tête du site
Dans le projet, l’élément header contient le nom de l’atelier et la navigation principale. La classe atelier-entete conserve le nom défini par le contrat ; elle sert de repère pour les règles de présentation dans style.css, sans remplacer le sens porté par la balise HTML.
Une navigation principale est un landmark : les technologies d’assistance peuvent la repérer parmi les zones importantes de la page. L’attribut aria-label lui donne un nom utile pour la distinguer, notamment si plusieurs zones de navigation existent. Le texte « Navigation principale » décrit ici sa fonction.
Relier les entrées aux zones de la page
Chaque entrée de la liste pointe vers une zone de la page à l’aide d’une destination qui commence par #. Par exemple, href="#presentation" correspond à un élément qui porte id="presentation". Le squelette du projet fournit déjà les destinations presentation, inscription et tarifs ; conservez exactement les mêmes identifiants des deux côtés.
Voici la page complète à l’état de cette leçon. L’en-tête et la navigation sont présents au début du document ; le reste du squelette est conservé pour que les liens internes aient leurs destinations. Les autres éléments de structure seront étudiés dans les leçons suivantes.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réservation de l’atelier</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="atelier-page">
<header class="atelier-entete">
<p>Atelier créatif</p>
<nav class="atelier-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#presentation">Présentation</a></li>
<li><a href="#inscription">Inscription</a></li>
<li><a href="#tarifs">Tarifs</a></li>
</ul>
</nav>
</header>
<main class="atelier-principal">
<section class="atelier-presentation" id="presentation" aria-labelledby="titre-atelier">
<h1 id="titre-atelier">Réservez votre place à l’atelier</h1>
<article class="atelier-article">
<h2>À propos de l’atelier</h2>
<p>Participez à une séance guidée et repartez avec votre création.</p>
<p>Durée : deux heures. Les places sont limitées.</p>
</article>
</section>
<section class="atelier-inscription" id="inscription" aria-labelledby="titre-inscription">
<h2 id="titre-inscription">Formulaire d’inscription</h2>
<form class="atelier-formulaire" action="#" method="post">
<div class="atelier-champ">
<label for="nom">Nom complet</label>
<input id="nom" name="nom" type="text" autocomplete="name" minlength="2" required>
</div>
<div class="atelier-champ">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
</div>
<div class="atelier-champ">
<label for="telephone">Téléphone</label>
<input id="telephone" name="telephone" type="tel" autocomplete="tel" pattern="[0-9 +()-]{8,20}" required>
</div>
<div class="atelier-champ">
<label for="date">Date souhaitée</label>
<input id="date" name="date" type="date" required>
</div>
<div class="atelier-champ">
<label for="participants">Nombre de participants</label>
<input id="participants" name="participants" type="number" min="1" max="8" value="1" required>
</div>
<div class="atelier-champ">
<label for="formule">Formule</label>
<select id="formule" name="formule" required>
<option value="">Choisissez une formule</option>
<option value="decouverte">Découverte</option>
<option value="complete">Complète</option>
</select>
</div>
<button class="atelier-bouton" type="submit">Envoyer la réservation</button>
</form>
</section>
<section class="atelier-tarifs" id="tarifs" aria-labelledby="titre-tarifs">
<h2 id="titre-tarifs">Tarifs des formules</h2>
<table class="atelier-tableau">
<caption>Tarifs par participant, en euros</caption>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Durée</th>
<th scope="col">Tarif</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Découverte</th>
<td>Deux heures</td>
<td>35 €</td>
</tr>
<tr>
<th scope="row">Complète</th>
<td>Trois heures</td>
<td>50 €</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer class="atelier-pied">
<p>Atelier créatif — Informations et réservations</p>
</footer>
</body>
</html> Chargement de l'aperçu…
Le document importe aussi style.css. Le contrat demande que les classes déjà placées sur les principales zones de la page aient des règles CSS ; le fichier suivant fournit ces règles en utilisant les variables autorisées. Il ne modifie ni les noms de classes ni la structure HTML.
:root {
--atelier-couleur-texte: #24313a;
--atelier-couleur-fond: #ffffff;
--atelier-couleur-accent: #145c52;
--atelier-espace-petit: 0.5rem;
--atelier-espace-standard: 1.5rem;
--atelier-rayon: 0.5rem;
--atelier-police: Arial, sans-serif;
--atelier-taille-texte: 1rem;
}
.atelier-page {
color: var(--atelier-couleur-texte);
background-color: var(--atelier-couleur-fond);
font-family: var(--atelier-police);
font-size: var(--atelier-taille-texte);
}
.atelier-entete {
padding: var(--atelier-espace-standard);
border-bottom: var(--atelier-rayon) solid var(--atelier-couleur-accent);
}
.atelier-navigation {
padding: var(--atelier-espace-petit);
}
.atelier-principal {
padding: var(--atelier-espace-standard);
}
.atelier-presentation {
margin-bottom: var(--atelier-espace-standard);
}
.atelier-article {
padding: var(--atelier-espace-petit);
}
.atelier-inscription {
margin-bottom: var(--atelier-espace-standard);
}
.atelier-formulaire {
padding: var(--atelier-espace-petit);
} Chargement de l'aperçu…
Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
Dans le navigateur, les trois entrées de navigation conduisent respectivement à la présentation, au formulaire et au tableau des tarifs. Le nom accessible du landmark se consulte aussi avec les outils d’accessibilité du navigateur : il doit apparaître comme « Navigation principale ». Les règles CSS appliquent les variables du projet aux classes déjà présentes, sans créer de nouveaux sélecteurs de classe.
À retenir
- Utilisez
headerpour identifier l’en-tête du site etnavpour le groupe de liens de navigation. - Donnez à la navigation un nom explicite avec
aria-label. - Faites correspondre chaque fragment de lien à l’identifiant exact de sa destination.
- Conservez les classes et les variables prévues par le contrat du projet.
Dans la prochaine leçon, vous délimiterez le contenu principal de la page avec main.