Un mini-site — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 3)

Un mini-site

Liens et navigation · niveau 3 (difficile)

Énoncé

Créer un site de trois pages sur un sujet de son choix (par exemple, ses trois matières préférées) : une page d'accueil et deux pages rangées dans un sous-dossier matieres/. Chaque page porte le même menu ; les pages du sous-dossier ont un lien « Retour à l'accueil ». Donner l'arborescence et le code d'une page du sous-dossier.

Corrigé


mon-site/
├── index.html
└── matieres/
    ├── algorithmique.html
    └── java.html

La page matieres/java.html :


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Java — Mes matières préférées</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="../index.html">Accueil</a></li>
        <li><a href="algorithmique.html">Algorithmique</a></li>
        <li><a href="java.html">Java</a></li>
      </ul>
    </nav>
    <h1>Java</h1>
    <p>Un langage à objets, compilé vers une machine virtuelle.</p>
    <p><a href="../index.html">Retour à l'accueil</a></p>
  </body>
</html>

Le menu est identique sur toutes les pages, mais ses chemins dépendent du dossier de la page : ../index.html ici, index.html à l'accueil, où les matières sont en matieres/java.html.