Exercice 3.1 · 5 min · 0 tentative
Une tête et des pieds
🎯 Objectif
Grande nouvelle : le FC Courtételle veut un vrai site, et c'est toi le webmaster ! Première mission : donner une vraie structure à la page avec un en-tête <header> et un pied de page <footer>.
📖 Exemple
Presque toutes les pages web ont la même silhouette : un en-tête en haut, du contenu au milieu, un pied de page en bas. Voici la page de la chorale du village :
<header>
<h1>La Chorale du Village</h1>
<p>Chanter ensemble, c'est mieux.</p>
</header>
<p>Répétitions tous les jeudis à la salle communale.</p>
<footer>
<p>© 2026 La Chorale du Village — contact@chorale.ch</p>
</footer>
Le pied de page, c'est le coin des infos de fin : le copyright, les mentions légales, un moyen de contact — et souvent les liens vers les réseaux sociaux.
Pourquoi ces balises, alors qu'elles n'ont aucun effet visuel ? Elles créent des repères : un lecteur d'écran annonce « en-tête » et « pied de page », et son utilisateur saute de zone en zone d'une touche, sans tout écouter. Structurer, c'est déjà rendre accessible.
📝 Consigne
Même silhouette pour la page du club — le contenu est déjà écrit, à toi de l'organiser :
- Le titre FC Courtételle et le slogan vont ensemble dans un en-tête
- La ligne du copyright va dans un pied de page
- Le paragraphe de bienvenue reste entre les deux, sans enveloppe
Résultat attendu
La page a l'air identique — et c'est normal ! La structure est invisible à l'écran, mais la checklist, elle, la voit passer au vert.
Ce qui est vérifié
- Créer un en-tête avec <header>
- Placer le titre <h1> dans l'en-tête
- Garder le titre du club : « FC Courtételle »
- Placer le slogan dans l'en-tête aussi
- Créer un pied de page avec <footer>
- Placer le copyright du club dans le pied de page
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)