Comment créer des liens vers des ancres dans une page web ?

Vous avez peut-être un jour eu envie de faire un lien vers un point précis de votre article ? Où d’inviter vos lecteurs à aller sur une page, à un paragraphe donné ? Faire ce genre de liens est très simple.

  • La structure de la balise <a>

Comme vous le savez probablement, pour faire un lien, on utilise la balise <a> avec la syntaxe suivante :

<a href="http://le-chemin-vers-ma-page.html" 
title="texte affiché au survol" rel="dofollow" > Le texte de mon lien </a>

Avec les attributs :

 title="texte affiché au survol" 
rel="dofollow ..." suivi par les moteurs de recherche, etc
  • Lien vers une ancre dans une même page <a>

 

Pour faire un lien vers une partie d’un article, il suffit de remplacer l’adresse de destination par une ancre du type :

 
<a href="#destination" > Le texte de mon lien</a>

et de placer

id="destination"

dans une balise à l’endroit où on veut amener le visiteur.

Par exemple :

 <p id="destination"> Le texte qu'il faut absolument lire </p>

Ce texte est placé en bas de page.
Pour y accéder, cliquez sur le lien

balise a href


  • Lien vers une ancre dans une autre page <a>

Pour aller à un endroit précis d’un autre article, il suffit de rajouter l’id de l’ancre ou l’on souhaite se rendre, à la suite de l’adresse de la page et précédé de #.
Par exemple :
Cliquez sur ce lien, pour aller au résultat final de l’article précédent
La syntaxe du lien est la suivante :

<a href="http://outils-web.fr/comment-enlever-le-fond-dune-image/ 
  #destination2" >Cliquer ici pour aller au résultat final de 
l'article précédent</a>

N’oubliez pas l’espace entre l’adresse et #destination2

Un espace jusqu’à la fin de l’article

Le texte qu’il faut absolument lire

Vous venez d’être dirigé vers cette partie de l’article.
Pour remonter, on peut faire la même chose, avec un autre lien.

<p id="retour"> Retour vers le haut de page </p>
<a href="#retour">Retour vers le haut de page</a>

Un id= »retour » a été placé dans une balise en début d’article.
Retour vers le haut de page

Add a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
SquizMorph
Sqirlz Morph : un freeware de morphing.

Sqirlz Morph est un petit logiciel de morphing entièrement gratuit, qui permet de réaliser des effets de morphing très sympathique...

mp3-player
Un lecteur MP3 pour site web.

Cet article vous propose des lecteurs MP3 embed pour sites web provenant de ReverbNation. Pour un lecteur audio Flash, vous pouvez...

Convertir et traiter tous vos PDF : les meilleurs sites

Les PDF sont très pratiques pour partager des documents sans problèmes de compatibilités. Les choses se compliquent lorsqu'on souhaite convertir...

Fermer