Comment lier dans une page en utilisant HTML?
L'élément «ancre» définit un endroit sur la page vers lequel vous pouvez créer un lien.
Bien qu'un menu ou une table des matières puisse aider, il est fastidieux de visiter le haut d'une longue page Web, puis de faire défiler vers le bas pour trouver ce que vous recherchez. Économisez un voyage à vos visiteurs en vous connectant directement à une ancre à la place. Une ancre peut apparaître n'importe où sur la page et possède un court «identifiant de fragment» provenant de l'attribut id. Ajoutez le symbole # suivi de l'identifiant du fragment à la fin de l'URL, et vous pouvez créer un lien directement vers l'ancre.
Partie 1 sur 2: créer une ancre de destination
- 1Créez un élément d'ancrage. L'élément "anchor" <a></a> définit un endroit sur la page vers lequel vous pouvez créer un lien. Tout ce qui se trouve à l'intérieur des balises <a> et </a>, généralement du texte ou une image, peut être la destination du lien.
- 2Placez quelque chose à l'intérieur de l'élément d'ancrage. Bien qu'il soit HTML valide de laisser l'élément d'ancrage vide, certains navigateurs ne le trouveront pas s'il n'y a rien entre les balises <a> et </a>. Tapez simplement le texte vers lequel vous souhaitez créer un lien:
- <a>Ma recette de lasagne</a>
- La balise a ne modifie généralement pas le style du texte. Dans cet exemple, "Ma recette de lasagne" apparaîtra sous forme de texte ordinaire.
- 3Ajoutez un attribut id à votre élément d'ancrage. L'attribut id donne à l'ancre un identifiant unique afin que vous puissiez vous y connecter. Placez-le à l'intérieur de la balise <a> comme suit:
- <a id="anchor-name-1">Ma recette de lasagne</a>
- 4Choisissez une valeur pour votre identifiant. L'exemple ci-dessus utilisait "anchor-name-1", mais il est préférable de donner à vos ancres une valeur descriptive, telle que "lasagne" dans ce cas. Cette valeur doit être unique pour cet identifiant. Si un autre identifiant dans le même document a la même valeur, le navigateur ne peut pas identifier l'ancre unique vers laquelle vous essayez de créer un lien.
- En HTML4, la valeur doit commencer par une lettre. Peut utiliser des lettres, des chiffres, des traits d'union, des traits de soulignement, des deux-points et des points.
- En HTML5, vous pouvez utiliser n'importe quel caractère à l'exception des espaces.
- Soyez prudent avec vos cas. «Polish» et «Polish» sont considérés comme la même valeur et ne doivent pas apparaître dans le même document.
- 5Insérez l'identifiant dans n'importe quel élément à la place. Vous n'avez pas besoin d'utiliser la balise <a> à chaque fois que vous souhaitez créer une ancre. L'attribut id peut en fait aller dans n'importe quel élément HTML. Tous les navigateurs modernes (qui remontent à un bon bout de temps) devraient être capables d'interpréter cela. Voici quelques exemples:
- Ancre dans un en-tête: <h2 id="biblio">Bibliographie</h2>
- Ancre dans une image: <img id="logo" src="/logo.png" />
- Ancre dans un paragraphe: <p id="introparagraph">(paragraphe d'introduction)</p>
- N'oubliez pas que chaque identifiant ne peut apparaître qu'une seule fois par page.
L'attribut id peut en fait aller dans n'importe quel élément HTML.
Partie 2 sur 2: lien vers l'ancre de destination
- 1Lien vers l'ancre d'ailleurs sur la même page. Ceci est similaire à n'importe quel lien, utilisant le format <a href=""> </a>. Cependant, au lieu d'une URL comme valeur de l'attribut href, utilisez le symbole # suivi de la valeur d'ancrage. Pour créer un lien vers la recette de lasagne dans l'exemple ci-dessus, vous devez taper:
- <a href="#lasagna">Cliquez ici pour voir ma recette de lasagne.</a>
- Utilisez exactement la même casse que lors de la création de l'ancre. Certains navigateurs ne reconnaîtront pas "#Lasagna" comme lien vers "lasagna".
- 2Lien vers l'ancre d'une autre page Web. Vous pouvez également créer un lien vers votre ancre à partir de n'importe quel autre site Web. Incluez simplement l'URL suivie de # et la valeur d'ancrage. Voici quelques exemples:
- Lien depuis une autre page du même domaine:
<a href=".html#lasagna">Aller sur ma page de recettes pour voir ma recette de lasagne.</a> - Lien depuis n'importe où:
<aHR0cDovL3dpa2ljb29raW5nLm9yZy9yZWNpcGVzLmh0bWwjbGFzYWduYQ==">Consultez le site de mon ami avec une recette de lasagne.</a>
- Lien depuis une autre page du même domaine:
- 3Transformez une image en lien. Comme pour une URL ordinaire, vous pouvez créer un lien vers une ancre à l'aide d'une image:
- <a href="#lasagna"><img src=".png" /></a>
L'attribut id donne à l'ancre un identifiant unique afin que vous puissiez vous y connecter.
- C'est un bon moyen de faire des notes de bas de page. La convention est de créer un lien vers les notes de bas de page avec un nombre en exposant et entre crochets. Par exemple:
Julius Caesar<sup><a href="#ftn1">[1]</a></sup> renvoie
vers:
<a id="ftn1">Roman célèbre et ami proche.</a > - Si vos liens d'ancrage ne vous amènent qu'en haut de la page, vérifiez si votre site Web ne redirige pas le navigateur vers une URL légèrement différente. Par exemple, certains navigateurs supprimeront (incorrectement) l'ancre après avoir redirigé de http://example.com vers http://example.com. Vous pouvez résoudre ce problème en vous assurant que tous vos liens d'ancrage pointent vers http://example.com/#anchor-name, afin que la redirection ne se produise pas.
Une ancre peut apparaître n'importe où sur la page et possède un court «identifiant de fragment» provenant de l'attribut id.
- Une erreur courante consiste à utiliser le symbole # lors de la création de l'ancre de destination. N'utilisez # que lors de la liaison à l'ancre, à l'intérieur d'un attribut href.
- Les traits de soulignement dans les valeurs d'identification peuvent causer des problèmes lors de l'utilisation de CSS pour styliser votre document.
- HTML5 et XHTML ne prennent pas en charge l'attribut name dans les éléments d'ancrage. Utilisez plutôt l'attribut id comme décrit dans cet article. Si vous vous attendez à ce que les visiteurs de votre site utilisent des navigateurs très obsolètes (plus de dix ans), vous pouvez inclure deux attributs d'identifiant et de nom identiques (<a id="example-anchor" name="example-anchor">Example Texte</a>). HTML4 ne prend officiellement en charge cela que pour les éléments a, applet, form, frame, iframe, img et map.
Questions et réponses
- Comment puis-je créer une page?Vous pouvez créer une page Web ou un site Web en vous connectant à Google, en sélectionnant Google Sites et en sélectionnant Nouveaux sites Google. Ensuite, allez à Créer un nouveau site Web et Créer une page Web.
