Le lien hypertexte (h ref)

Publié le par
Mini-site Pop Art (3 pages reliées)

Mini-site Pop Art : 3 pages HTML reliées

Objectif : créer 3 pages (index.html, page1.html, page2.html) et les relier avec des liens.

Schéma (fil de fer / wireframe)

┌──────────────────────────────┐
│           index.html         │
│  Titre + texte (20 mots)     │
│  Menu : [Page 1] [Page 2]    │
└───────────────┬──────────────┘
                │
      ┌─────────┴─────────┐
      │                   │
┌──────────────┐   ┌──────────────┐
│  page1.html  │   │  page2.html  │
│  texte 20    │   │  texte 20    │
│  Liens menu  │   │  Liens menu  │
└───────┬──────┘   └───────┬──────┘
        └───────────┬──────┘
                    │
              retour index

Étape 1 — Créez 3 fichiers

  • index.html
  • page1.html
  • page2.html

Étape 2 — Copiez/collez le code de chaque page

1) index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Pop Art — Accueil</title>
</head>
<body>

  <h1>Pop Art — Accueil</h1>

  <nav>
    <a href="index.html">Accueil</a> |
    <a href="page1.html">Page 1</a> |
    <a href="page2.html">Page 2</a>
  </nav>

  <hr>

  <p>Le Pop Art transforme objets quotidiens en images frappantes, mêle publicité et art, répète des icônes et questionne la consommation moderne.</p>

</body>
</html>

2) page1.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Pop Art — Page 1</title>
</head>
<body>

  <h1>Pop Art — Page 1</h1>

  <nav>
    <a href="index.html">Accueil</a> |
    <a href="page1.html">Page 1</a> |
    <a href="page2.html">Page 2</a>
  </nav>

  <hr>

  <p>Couleurs vives, aplats et contours nets : le Pop Art détourne la culture de masse et met l’image au premier plan.</p>

</body>
</html>

3) page2.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Pop Art — Page 2</title>
</head>
<body>

  <h1>Pop Art — Page 2</h1>

  <nav>
    <a href="index.html">Accueil</a> |
    <a href="page1.html">Page 1</a> |
    <a href="page2.html">Page 2</a>
  </nav>

  <hr>

  <p>Warhol sérigraphie des célébrités, Lichtenstein imite la BD : le Pop Art joue avec reproduction, ironie et fascination médiatique.</p>

</body>
</html>

Contrôle rapide

  1. Enregistrez les 3 fichiers dans le même dossier.
  2. Ouvrez index.html dans votre navigateur.
  3. Cliquez sur Page 1 et Page 2 : les liens doivent fonctionner dans les deux sens.