A quoi sert une ancre ?
Par exemple, lors d'une présentation de personnages, vous pouvez faire une liste en début de page et, sur chaque nom, mettre un lien vers l'endroit exact de la page où se trouve la description de chacun. Vous me suivez ?
C'est souvent très utile pour réaliser
un sommaire, afin de se rendre directement à un chapitre précis, sur votre forum ou même un site web !
Comment créer une ancre ?
C'est très simple. Dans votre sujet, vous allez placer, là où vous voulez faire suivre votre lien, ceci, c'est à dire, l'
ancre :
- Code:
-
<a name="titre">Ancre dans ma page</a>
Ici, le nom (spécifié par la valeur de l'attribut
name
) de l'ancre est
titre, mais il va de soi que vous pouvez mettre ce que bon vous semble
Il n'est pas impératif de placer la balise <a>
autour d'un texte, vous pouvez parfaitement placer simplement <a name="titre"></a>
dans votre page.
Ensuite, pour diriger un lien vers l'ancre :
- Code:
-
<a href="#titre">Votre lien</a>
C'est très simple, il suffit de mettre
le nom de votre ancre après le fameux symbole # !
Ceux qui ont l'oeil reconnaîtront le symbole de l'identifiant, propre à l'attribut
id
. Il est en effet possible de pointer vers un élément (une
div
par exemple) ayant un identifiant spécifié. C'est à dire que le lien précédent marcherait tout à fait si vous pointiez vers une div portant cet identifiant (Ce qui vous évite de devoir rajouter l'ancre
<a name="titre"></a>
) :
- Code:
-
<div id="titre">Contenu de votre div</div>
Gare aux erreurs ! L'identifiant de l'ancre porte bien son nom : il identifie !
Il se doit donc de respecter certaines règles de nommage, à savoir pas d'accents, pas d'espaces et surtout, l'identifiant doit être unique !
URL externes
Enfin, si vous souhaitez faire une ancre qui mène à un endroit précis sur une autre page, il suffit de remplacer l'url externe par la page vers laquelle on se dirige et d'appliquer le même principe :
- Code:
-
<a href="url_externe#titre">Blablabla</a>
Un exemple ? C'est exactement comme ça que fonctionnent les liens sur l'image
, qui permettent de '
voir le dernier message de ce sujet'
Vous avez tout compris ? Essayez donc à votre tour !
Et vous voici à la fin du tutoriel ! Habile non ?
Cliquez ici si vous souhaitez revenir au début du tutoriel, le tour est joué !