CHAPITRE 7 : LES LIENS HYPERTEXTES : LES LIENS INTERNES

Video du chapitre : chaine GeniusClassrooms

Deux sens pour « lien interne »

L'expression recouvre deux réalités qu'il faut distinguer : les liens d'une page à l'autre de votre site, et les liens à l'intérieur d'une même page (les ancres). Ce chapitre traite les deux.

1. Circuler entre vos pages

Imaginons cette arborescence :

monsite/
├── index.html
├── contact.html
├── cours/
│   ├── html.html
│   └── css.html
└── images/
    └── logo.png

../ signifie « remonter d'un dossier ». On peut l'enchaîner : ../../fichier.html remonte de deux niveaux. C'est la source d'erreur numéro un chez les débutants : comptez toujours depuis le fichier où vous écrivez, jamais depuis la racine du site.

2. Les ancres : se déplacer dans une page

Sur une page longue, une ancre amène directement à une section. Deux étapes.

Étape 1 : marquer la destination avec id

<h2 id="les-listes">Les listes</h2>

Étape 2 : pointer vers cet id avec #

<a href="#les-listes">Aller a la section Les listes</a>

Un id doit être unique dans la page, sans espace ni accent. Préférez les tirets : id="mise-en-forme".

3. Construire un sommaire

<nav>
    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#les-balises">Les balises</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
    </ul>
</nav>

<h2 id="introduction">Introduction</h2>
<h2 id="les-balises">Les balises</h2>
<h2 id="conclusion">Conclusion</h2>

4. Une ancre dans une autre page

<a href="cours/html.html#les-listes">Voir la section Les listes</a>

On combine le chemin et le # : le navigateur ouvre la page, puis descend à la section.

5. Remonter en haut

<body id="haut">
...
<a href="#haut">Retour en haut de page</a>

À retenir

• Les chemins relatifs se comptent depuis le fichier courant
• ../ remonte d'un dossier et peut s'enchaîner
• Une ancre : un id sur la cible, un # dans le lien
• Un id est unique, sans espace ni accent