Liens et une deuxième page · Code avec Martin

Ton site web n'est plus une seule page. Tu vas en construire une deuxième et les relier avec des liens.

Montre-moi : un lien

Un lien – l’élément cliquable qui t’emmène ailleurs – se fait avec la balise <a> :

<!-- A link to another page on your own website -->
<a href="lunch-menu.html">Lunch Menu</a>

<!-- A link out to somewhere else on the internet -->
<a href="https://www.si.edu">Our favorite museum's website</a>

href dit où va le lien.
Le texte entre <a> et </a> est ce qui est visible et cliquable.

Une deuxième page

Ton site web n’a que index.html pour l’instant. Ajoutons une deuxième page – c’est juste un autre fichier dans le même dossier :

Dans VS Code, crée un nouveau fichier. Nomme-le selon ton projet, comme lunch-menu.html, about-me.html, trips.html, ou roster.html. Encore une fois, minuscules, pas d’espaces ni d’accents.
Colle le squelette complet de page (le même que la leçon 1) et donne-lui son propre <title>, <h1>, et du contenu.
Relie les pages avec des liens : sur index.html, ajoute un lien vers la nouvelle page, et sur la nouvelle page, ajoute un lien retour – quelque chose comme <a href="index.html">Back home</a>.

À toi 💪

Crée une deuxième page et relie les deux pages ensemble. Fais en sorte qu’au moins un lien pointe vers quelque chose sur internet.

🏫 Site web d'école – solution (lunch-menu.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lunch Menu – Riverside Elementary</title>
  </head>
  <body>
    <h1>This Week's Lunch Menu</h1>
    <ul>
      <li>Monday: tomato soup with pasta</li>
      <li>Tuesday: chicken with rice</li>
      <li>Wednesday: pancakes with syrup 🎉</li>
      <li>Thursday: beef stew with dumplings</li>
      <li>Friday: fish and potatoes</li>
    </ul>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

Et sur index.html, ajoute :

<p><a href="lunch-menu.html">Check out the lunch menu</a></p>

🙋 Site web personnel – solution (about-me.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>More About Me – Jake</title>
  </head>
  <body>
    <h1>More About Me</h1>
    <p>I'm in 4th grade, I have a dog named Rocky, and I collect soccer cards.</p>
    <p>My favorite thing to listen to is <a href="https://www.youtube.com">music on YouTube</a>.</p>
    <p><a href="index.html">← Back home</a></p>
  </body>
</html>

🌍 Journal de voyage – solution (trips.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>All Trips – Where We've Been</title>
  </head>
  <body>
    <h1>All Our Trips</h1>
    <ol>
      <li>The mountains – a ridge hike</li>
      <li>Greece – island hopping</li>
      <li>Washington, D.C. – museums and monuments</li>
    </ol>
    <p>We plan our routes with <a href="https://maps.google.com">Google Maps</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

⚽ Site web de club – solution (roster.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Roster – Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Team Roster</h1>
    <ul>
      <li>Jake – goalkeeper (captain)</li>
      <li>Matt – defense</li>
      <li>Owen – midfield</li>
      <li>Tom – forward</li>
    </ul>
    <p>Check the league schedule at <a href="https://www.ussoccer.com">ussoccer.com</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

✅

Vérifie : Tu cliques sur un lien sur la page d’accueil → la deuxième page s’ouvre. Tu cliques sur « Retour » → tu es de nouveau à l’accueil. Ton site web a maintenant plus d’une page pour la première fois !

Ce que tu retiens de cette leçon

Un lien : <a href="where">link text</a>.
Une nouvelle page sur ton site web = un nouveau fichier .html dans le même dossier.
Les liens entre tes propres pages utilisent juste le nom du fichier (lunch-menu.html) ; les liens vers l’extérieur commencent par https://.