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 de messagerie 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 :
lien en relation
En relation avec : les trois meilleurs Plugins WordPress.

Pour débuter cette année, nous allos nous intéresser aux plugins WordPress proposant des articles en rapport avec l'article lu. Pourquoi utiliser...

Photo collage
Comment créer des collages photos en ligne gratuits ?

Le photo collages est une manière amusante de partager de jolies photos avec des amis sur faceBook ou sur d'autres...

banniere flash
5 générateurs flash pour créer des bannières en ligne.

Voici un petit article vous présentant 5 sites pour créer des bannières Flash facilement. Pour des animations flash plus importante, je...

Fermer