Comment faire un lien, non pas d’une page à une autre, mais vers un point précis d’une même page web ? En cliquant sur le lien, je veux afficher la page directement “scrollée” sur la partie de contenu qui m’intéresse… Tuto HTML : voyons comment créer des “Ancres” dans une page web et faire des liens vers elles.
Donc un petit cours de HTML à destination du WebMaster : les ancres nommées, ou comment faire un lien à l’intérieur d’une même page.
Et commençons par un exemple, vous pouvez cliquer sur ces liens pour aller :
directement au titre 1 D’abord jetons l’ancre…
directement au titre 2 Créons des liens vers les ancres…
D’abord “jetons l’ancre” !
A tous les endroits où on veut scroller la fenêtre on pose des ancres. Ce sont les points de repères.
Ces repères dans le code HTML sont invisibles à l’écran. Pour créer ces repères, il suffit de rajouter l’attribut id à une balise qui va alors servir de repère. Ce peut être n’importe quelle balise du code HTML de la page, un titre par exemple, ou une image.
Voyons 2 exemples où un titre et une image pourront être utilisés comme ancre :
// Sur une image <img src="chemin-vers-image.jpg" id="il-faut-aller-ici"> // Sur un titre <h2 id="il-faut-aller-ici">Ici mon titre</h2>
Dans ce code HTML, que vous pouvez copier, on remplace “il-faut-aller-ici” par des noms distincts d’ancres. Des noms comme “haut”, ou “titre1”, ou encore “titre2”
Ces noms ne doivent pas contenir d’espaces, ni de caractères spéciaux… On peut choisir de A à Z de 1 à 0, des “ – “ ou des “ _“… C’est à peu près tout !
Surtout pas de “é”, ni de “à” de “ç” ou de “/”, “§”, “#”, “@”, pas de “point”, etc.
Il faudra également faire attention à ce que les attributs id des éléments soient uniques, ils ne peut y avoir 2 id qui portent le même nom
Cliquez ici pour aller en haut de la page
Créons des liens vers des ancres
Le lien classique est constitué du nom de l’ancre, simplement précédé du symblole #
Par exemple : #il-faut-aller-ici
Et pour une ancre dans une page (truc.html par exemple), à partir d’une autre, cela donne :
truc.html#il-faut-aller-ici
Un lien super complet pourrait-être : http://www.mon-site.com/truc.html#il-faut-aller-ici
Ce dernier lien appelle la page web truc.html sur le site web http://www.mon-site.com et scrolle la page au niveau de l’ancre #il-faut-aller-ici
On insère le lien classiquement dans une page.
3 exemples en HTML :
<a href="#il-faut-aller-ici"> Cliquez ici </a> <a href="truc.html#il-faut-aller-ici"> Cliquez ici </a> <a href="http://www.mon-site.com/truc.html#il-faut-aller-ici"> Cliquez ici </a>
Les mêmes exemples en Textile :
"Cliquez ici()":#il-faut-aller-ici "Cliquez ici()":truc.html#il-faut-aller-ici "Cliquez ici()":http://www.mon-site.com/truc.html#il-faut-aller-ici
Voilà pour la mise en place de liens internes sur une page web en HTML !
1/ On place des ancres invisibles dans le code, aux endroits adhoc :
<h1 id="il-faut-aller-ici">Le titre de mon article</h1>2/ On crée les liens vers ces ancres en ajoutant # devant leur nom :
<a href="#il-faut-aller-ici"> Cliquez ici </a>Cliquez ici pour aller en haut de la page
A lire aussi :
A propos du pseudo langage de marquage Textile