DébutantNon commencé

Exercice 3.7 · 10 min · 0 tentative

Défi : le site du FC Courtételle

🎯 Objectif

Le grand final du module : construire la page complète du club, seul, de A à Z. Squelette HTML5 + structure sémantique — tout ce que tu sais faire, réuni. Et garde cette page précieusement : c'est elle que tu mettras en beauté avec le CSS dans les prochains modules.

📝 Consigne

L'éditeur est vide, comme devant un vrai projet. Prends une seconde pour visualiser l'arbre avant de taper, puis construis la page d'accueil du FC Courtételle :

  1. Le squelette complet : la déclaration HTML5, puis les balises <html>, <head> et <body>
  2. Sur la balise <html> : l'attribut qui annonce une page en français
  3. Dans le <head> : l'encodage UTF-8 et un <title> avec le nom du club
  4. Un <header> avec un <h1> qui affiche FC Courtételle (et un slogan si tu veux)
  5. Un <nav> avec une liste de 3 liens — les pages existent :
    • galerie.html → texte Galerie
    • contact.html → texte Contact
    • blog.html → texte Blog
  6. Un <main> unique contenant 2 <section>, chacune titrée en <h2> (par exemple « Le club » et « Actualités »)
  7. Dans une des sections : 1 <article> avec un titre <h3> et un paragraphe — une actualité de ton invention
  8. Un <footer> avec le copyright du club

Résultat attendu

La page d'accueil du club, complète et bien structurée :

  • le grand titre « FC Courtételle » en haut
  • le menu de trois liens
  • deux sections, dont une actualité
  • le copyright tout en bas

Ton plus beau match ! 🚀

Ce qui est vérifié

  • Refermer le <head> avant d'ouvrir le <body>
  • Poser le squelette : doctype, html, head et body
  • Déclarer la langue de la page (lang)
  • Déclarer l'encodage (charset) et le titre (title)
  • Créer un <header> avec le titre <h1> du club
  • Nommer le club dans le grand titre
  • Garder un seul <h1> sur la page
  • Construire un menu <nav> de 3 liens
  • Créer le lien « Galerie » vers galerie.html
  • Créer le lien « Contact » vers contact.html
  • Créer le lien « Blog » vers blog.html
  • Garder un seul <main> pour le contenu principal
  • Découper le <main> en deux <section>
  • Publier une actualité en <article>
  • Conclure la page par un <footer>
  • Écrire un code HTML bien formé

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé