Cours HTML / Créer un petit site web de plusieurs pages

Un petit site multipage rassemble la structure du document, les zones sémantiques, les liens et les formulaires. Dans ce projet, vous allez créer des pages Accueil, À propos et Contact dans un même dossier, naviguer entre elles et vérifier le résultat. HTML seul ne peut pas recevoir ni stocker les messages de contact, donc le formulaire ici est une démonstration de saisie, pas un service de contact fonctionnel.

Préparez les fichiers

Créez un nouveau dossier et enregistrez ces trois fichiers texte simples UTF-8 à l'intérieur. Leurs noms de fichiers doivent correspondre exactement aux valeurs href du menu. Comparez d'abord comment les chemins relatifs se résolvent à partir des emplacements de fichiers dans Liens : chemins, Fragments de page et Email.

small-site/

  index.html

  about.html

  contact.html

Assurez-vous que l'éditeur n'a pas ajouté une autre extension telle que .txt. Garder les trois fichiers ensemble permet à href="about.html" de trouver la page À propos en utilisant un chemin relatif. Si vous déplacez plus tard un fichier dans un autre dossier, mettez à jour les liens pertinents. Terminez d'abord la version texte uniquement ; puis vous pouvez ajouter les images que vous avez le droit d'utiliser, avec un texte alternatif approprié.

Créez la page d'accueil

Enregistrez le document complet suivant sous le nom index.html. Utilisez les mêmes trois destinations de menu sur chaque page. Les rôles de header, nav et main suivent la mise en page sémantique dans Structurer une page avec les éléments sémantiques.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Accueil | Petit Jardin</title>
  <meta name="description" content="Accueil du site d’exercice Petit Jardin, avec des liens vers la présentation et un exercice de formulaire de contact.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigation principale">
      <a href="index.html" aria-current="page">Accueil</a>
      <a href="about.html">À propos</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Petit Jardin</h1>
    <p>Un petit guide pour les personnes qui commencent à cultiver des plantes.</p>
  </main>
  <footer><p>Site d’exercice Petit Jardin</p></footer>
</body>
</html>

L'ouverture de index.html devrait afficher un menu et le titre « Petit Jardin ». Les liens À propos et Contact ne fonctionneront pas tant que vous n'aurez pas créé leurs fichiers dans le même dossier. Le h1 ici appartient à la page d'exemple, pas à ce tutoriel.

Créez les pages À propos et Contact

Enregistrez le document complet suivant sous le nom about.html. Il conserve les mêmes destinations de menu tout en donnant à À propos son propre titre, description et état de menu actuel. La distinction entre l’inspection des valeurs GET et la réception des messages suit l’explication de la requête dans Structure du formulaire et GET vs. POST.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>À propos | Petit Jardin</title>
  <meta name="description" content="Présentation du site d’exercice Petit Jardin, destiné aux personnes qui commencent à cultiver des plantes.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigation principale">
      <a href="index.html">Accueil</a>
      <a href="about.html" aria-current="page">À propos</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h1>À propos</h1>
    <p>Petit Jardin est un site d’exercice pour les personnes qui commencent à cultiver des plantes.</p>
  </main>
  <footer><p>Site d’exercice Petit Jardin</p></footer>
</body>
</html>

Enregistrez le document complet suivant sous le nom contact.html. Son formulaire pratique soumet au document actuel en utilisant GET et ne délivre pas de message réel.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact | Petit Jardin</title>
  <meta name="description" content="Exercez-vous à saisir et valider un nom et un message de test, sans envoyer de demande de contact réelle.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigation principale">
      <a href="index.html">Accueil</a>
      <a href="about.html">À propos</a>
      <a href="contact.html" aria-current="page">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Exercice de formulaire de contact</h1>
    <p>Cet exemple n’envoie aucun message. Utilisez uniquement du texte de test.</p>
    <form method="get">
      <p><label for="visitor-name">Nom</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">Message</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">Examiner les valeurs saisies</button>
    </form>
  </main>
  <footer><p>Site d’exercice Petit Jardin</p></footer>
</body>
</html>

Chaque bloc est un document complet, donc enregistrez-le en tant que fichier entier au lieu de placer un autre html ou main à l'intérieur d'une copie existante. Conservez les mêmes destinations de menu, mais mettez aria-current="page" uniquement sur le lien représentant ce document.

« Inspecter les valeurs saisies » n'envoie de message à personne. Le navigateur vérifie les champs obligatoires et soumet au document actuel en utilisant GET. Testez uniquement avec du texte de remplissage, car les valeurs soumises peuvent apparaître dans l'URL. Un vrai service de contact nécessite un gestionnaire côté serveur, des protections de confidentialité, des contrôles anti-spam et une réponse claire de succès ou d'échec.

Utilisez ce tableau pour comparer les écrans terminés. Le lien actuel apparaît en gras, tandis que aria-current communique son statut indépendamment de ce traitement visuel.

Vérifiez les critères de réalisation et les extensions optionnelles

Complétez la version de base avant d'ajouter une extension à la fois : une liste utile sur À propos, une image avec un texte alternatif approprié ou des informations facultatives dans un élément details. Répétez les vérifications de navigation, de syntaxe et de clavier après chaque ajout afin qu'un nouveau problème puisse être lié à un seul changement.

Lors de la mise à jour d'un menu partagé, mettez à jour les trois copies, mais placez aria-current sur le lien approprié dans chacune d'elles. Retestez les chemins relatifs après le déploiement : la casse du nom de fichier et le répertoire de déploiement peuvent différer de l'environnement local.

Vérifiez le site terminé

1. Ouvrez index.html et confirmez que chaque lien de menu ouvre le fichier correct.
2. Depuis À propos et Contact, naviguez également vers les deux autres pages ; ne testez pas uniquement le menu d'accueil.
3. Vérifiez que chaque titre d'onglet et h1 visible décrit cette page.
4. Utilisez Tab pour atteindre chaque lien et contrôle de champ de contact.
5. Essayez de soumettre des champs vides, puis entrez des valeurs de test et observez l'URL.
6. Vérifiez chaque fichier avec le Nu HTML Checker, corrigez les erreurs, puis vérifiez à nouveau.

Si un lien échoue, vérifiez d'abord le nom du fichier et le chemin relatif. Lorsque vous modifiez un menu partagé, mettez à jour les trois copies. À mesure qu'un site web se développe, il devient important de maintenir de manière cohérente le balisage répété. Dans cet exercice, un formulaire qui ne délivre pas réellement de message est attendu ; l'objectif est de construire et de vérifier l'interface HTML. Séparez les résultats du validateur du comportement réel en utilisant les instructions de Trouver les erreurs et valider un document HTML.