Faire une ancre en HTML

Ahh les ancres !! Mine de rien, elles sont bien pratiques en HTML, surtout si tu as une longue longue longue page avec pleins de petites choses intéressantes.


En HTML, une ancre est un lien qui renvoie à un endroit précis de la page sur laquelle nous nous trouvons.

Voici un exemple concret : ce tutoriel utilise un sommaire dans le premier message :

Code:

•<a href="#811">Première partie : Onglet Accueil </a>
•<a href="#812">Deuxième partie : Onglet Général </a>
•<a href="#813">Troisième partie : Onglet Affichage </a>
•<a href="#814">Quatrième partie : Onglet Utilisateurs & Groupes </a>
•<a href="#815">Cinquième partie : Onglet Modules </a>
•<a href="#816">Sixième partie : Onglet Divers</a>

Chaque lien renvoie vers un message de la page

Il est à noter que l'ancre s'affichera toujours en haut de la page, idéal si tu veux qu'une page HTML s'ouvre à un certain endroit


Pour coder une ancre, il faut 2 élements :
• Un lien cliquable,
• une cible.


En HTML, un lien se code de cette façon :

Code:

<a href="http://">texte cliquable</a>

Pour indiquer à notre lien qu'il va renvoyer vers une ancre (= cible) et non pas vers une page, on va utiliser le dièse (#) et préciser le nom de l'ancre. Par exemple :

Code:

<a href="#finTopic">Clique moi, je t'emmèrai à la fin de ce message.</a>

C'est bien beau tout ça, mais, après avoir fait notre lien, il faut lui donner une cible à laquelle se rattacher. Pour cela, c'est tout simple, on va utiliser "id", comme on le fait pour le CSS

On aura donc un code de ce type :

Code:

<balise id="nom">mon ancre</balise>

Par exemple :

Code:

<div id="ancre">ancre</div>

<p id="ancre">ancre</p>

<span id="ancre">ancre</span>

Tu ne rêves pas ! Tu peux appliquer ce principe sur toutes les balises HTML

Remarques :
• Les ancres #top et #bottom sont prédéfinies dans les navigateurs. Tu peux donc les utiliser sans avoir de "cible de destination"
• N'oublie pas que pour avoir un HTML conforme aux normes, tu ne peux pas avoir plusieurs id ayant le même nom sur la même page.


• Accès direct au paragraphe 2
• Accès direct au paragraphe 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet ullamcorper quam, et scelerisque dolor adipiscing in. Donec id scelerisque urna, eget pellentesque massa. Donec ornare felis sed massa consectetur congue. Suspendisse magna justo, varius at pretium id, suscipit eu felis. Phasellus eget eros accumsan, tempus orci et, viverra mi. Donec ut risus sed libero pulvinar egestas. Phasellus fringilla eu elit eu imperdiet. Aliquam imperdiet vulputate pulvinar.

Paragraphe 2 Sed egestas gravida libero, vel lobortis nibh adipiscing sed. Sed turpis augue, vulputate a augue eget, posuere pretium mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla lobortis molestie dignissim. Aenean imperdiet, arcu a posuere cursus, mi tellus egestas enim, ac adipiscing lorem risus et enim. Nunc sagittis ullamcorper leo in venenatis. Nullam eget mattis odio. Quisque mollis est sed erat pharetra faucibus. Phasellus condimentum viverra ipsum dignissim lacinia. Cras ac auctor purus. Vivamus tincidunt feugiat nunc. Ut iaculis sem in euismod aliquam. Praesent sagittis nisi magna, vel adipiscing arcu venenatis a. Integer volutpat nulla sit amet odio eleifend, vitae cursus mauris auctor. Curabitur molestie urna eu magna feugiat, sed congue sem pulvinar.

Paragraphe 3Sed at semper turpis, sit amet aliquet lacus. Vestibulum sollicitudin eget est in egestas. Donec mollis mauris quis metus venenatis elementum. Nullam commodo erat a hendrerit tempus. Morbi ac ante quis lacus ultrices molestie. Sed et cursus nunc. Donec rhoncus blandit risus, luctus dignissim tortor rutrum fringilla.

Code:

• <a href="#p2">Accès direct au paragraphe 2</a>
• <a href="#p3">Accès direct au paragraphe 3</a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet ullamcorper quam, et scelerisque dolor adipiscing in. Donec id scelerisque urna, eget pellentesque massa. Donec ornare felis sed massa consectetur congue. Suspendisse magna justo, varius at pretium id, suscipit eu felis. Phasellus eget eros accumsan, tempus orci et, viverra mi. Donec ut risus sed libero pulvinar egestas. Phasellus fringilla eu elit eu imperdiet. Aliquam imperdiet vulputate pulvinar.

<span id="p2">[b]Paragraphe 2[/b]</span> Sed egestas gravida libero, vel lobortis nibh adipiscing sed. Sed turpis augue, vulputate a augue eget, posuere pretium mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla lobortis molestie dignissim. Aenean imperdiet, arcu a posuere cursus, mi tellus egestas enim, ac adipiscing lorem risus et enim. Nunc sagittis ullamcorper leo in venenatis. Nullam eget mattis odio. Quisque mollis est sed erat pharetra faucibus. Phasellus condimentum viverra ipsum dignissim lacinia. Cras ac auctor purus. Vivamus tincidunt feugiat nunc. Ut iaculis sem in euismod aliquam. Praesent sagittis nisi magna, vel adipiscing arcu venenatis a. Integer volutpat nulla sit amet odio eleifend, vitae cursus mauris auctor. Curabitur molestie urna eu magna feugiat, sed congue sem pulvinar.

<span id="p3">[b]Paragraphe 3[/b]</span>Sed at semper turpis, sit amet aliquet lacus. Vestibulum sollicitudin eget est in egestas. Donec mollis mauris quis metus venenatis elementum. Nullam commodo erat a hendrerit tempus. Morbi ac ante quis lacus ultrices molestie. Sed et cursus nunc. Donec rhoncus blandit risus, luctus dignissim tortor rutrum fringilla.

---

Eh voilà, c'est tout ! Tu connais à présent la technique pour ajouter des ancres en HTML sur tes pages