Une
ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut
id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut
id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :
Code : HTML | <h2 id="mon_ancre">Titre</h2>
|
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut
href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :
Code : HTML | <a href="#mon_ancre">Aller vers l'ancre</a>
|
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres (j'ai mis n'importe quoi dans le texte pour remplir ) :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <h1>Ma grande page</h1>
<p>
Aller directement à la partie traitant de :<br />
<a href="#cuisine">La cuisine</a><br />
<a href="#rollers">Les rollers</a><br />
<a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="arc">Le tir à l'arc</h2>
<p>... (beaucoup de texte) ...</p>
|
S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de texte, soit réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le côté.
L'attribut id sert à donner un nom « unique » à une balise, pour s'en servir de repère. Et, croyez-moi, vous n'avez pas fini d'entendre parler de cet attribut. Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il nous sera très utile pour « repérer » une balise précise, vous verrez.
Évitez cependant de créer des id avec des espaces ou des caractères spéciaux, utilisez simplement, dans la mesure du possible, des lettres et chiffres pour que la valeur soit reconnue par tous les navigateurs.
Lien vers une ancre située dans une autre page
Alors là je vous préviens, on va faire le Mégamix !
L'idée, c'est de faire un lien qui ouvre une autre page ET qui amène directement à une ancre située plus bas sur cette page.
En pratique c'est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (
#), suivi du nom de l'ancre.
Par exemple :
<a href="ancres.html#rollers">
… vous amènera sur la page
ancres.html, directement au niveau de l'ancre appelée
rollers.
Voici une page qui contient trois liens, chacun amenant vers une des ancres de la page de l'exemple précédent :
Code : HTML | <h1>Le Mégamix</h1>
<p>
Rendez-vous quelque part sur une autre page :<br />
<a href="ancres.html#cuisine">La cuisine</a><br />
<a href="ancres.html#rollers">Les rollers</a><br />
<a href="ancres.html#arc">Le tir à l'arc</a><br />
</p>
|
Créer des liens
titom89
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook
Google+