La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.99 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4428

Faire une ancre en HTML Empty Faire une ancre en HTML

Jeu 27 Juin 2019 - 15:45

   
C'est utile

   
Faire une ancre en HTML

   
Ahh les ancres !! Mine de rien, elles sont bien pratiques en HTML, surtout si tu as une longue longue longue page avec pleins de petites choses intéressantes.

Les Ancres, c'est quoi ?

En HTML, une ancre est un lien qui renvoie à un endroit précis de la page sur laquelle nous nous trouvons.

Idea Voici un exemple concret : ce tutoriel utilise un sommaire dans le premier message :
Code:
•<a href="#811">Première partie : Onglet Accueil </a>
•<a href="#812">Deuxième partie : Onglet Général </a>
•<a href="#813">Troisième partie : Onglet Affichage </a>
•<a href="#814">Quatrième partie : Onglet Utilisateurs & Groupes </a>
•<a href="#815">Cinquième partie : Onglet Modules </a>
•<a href="#816">Sixième partie : Onglet Divers</a>
Chaque lien renvoie vers un message de la page Smile

Il est à noter que l'ancre s'affichera toujours en haut de la page, idéal si tu veux qu'une page HTML s'ouvre à un certain endroit Wink

Comment coder une ancre ?

Pour coder une ancre, il faut 2 élements :
• Un lien cliquable,
• une cible.

Le lien cliquable

En HTML, un lien se code de cette façon :
Code:
<a href="http://">texte cliquable</a>
Pour indiquer à notre lien qu'il va renvoyer vers une ancre (= cible) et non pas vers une page, on va utiliser le dièse (#) et préciser le nom de l'ancre. Par exemple :
Code:
<a href="#finTopic">Clique moi, je t'emmèrai à la fin de ce message.</a>

La cible

C'est bien beau tout ça, mais, après avoir fait notre lien, il faut lui donner une cible à laquelle se rattacher. Pour cela, c'est tout simple, on va utiliser "id", comme on le fait pour le CSS Smile

On aura donc un code de ce type :
Code:
<balise id="nom">mon ancre</balise>

Par exemple :
Code:
<div id="ancre">ancre</div>

<p id="ancre">ancre</p>

<span id="ancre">ancre</span>

Tu ne rêves pas ! Tu peux appliquer ce principe sur toutes les balises HTML Wink

IdeaRemarques :
• Les ancres #top et #bottom sont prédéfinies dans les navigateurs. Tu peux donc les utiliser sans avoir de "cible de destination" Wink
• N'oublie pas que pour avoir un HTML conforme aux normes, tu ne peux pas avoir plusieurs id ayant le même nom sur la même page.

Un petit exemple

Accès direct au paragraphe 2
Accès direct au paragraphe 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet ullamcorper quam, et scelerisque dolor adipiscing in. Donec id scelerisque urna, eget pellentesque massa. Donec ornare felis sed massa consectetur congue. Suspendisse magna justo, varius at pretium id, suscipit eu felis. Phasellus eget eros accumsan, tempus orci et, viverra mi. Donec ut risus sed libero pulvinar egestas. Phasellus fringilla eu elit eu imperdiet. Aliquam imperdiet vulputate pulvinar.

Paragraphe 2 Sed egestas gravida libero, vel lobortis nibh adipiscing sed. Sed turpis augue, vulputate a augue eget, posuere pretium mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla lobortis molestie dignissim. Aenean imperdiet, arcu a posuere cursus, mi tellus egestas enim, ac adipiscing lorem risus et enim. Nunc sagittis ullamcorper leo in venenatis. Nullam eget mattis odio. Quisque mollis est sed erat pharetra faucibus. Phasellus condimentum viverra ipsum dignissim lacinia. Cras ac auctor purus. Vivamus tincidunt feugiat nunc. Ut iaculis sem in euismod aliquam. Praesent sagittis nisi magna, vel adipiscing arcu venenatis a. Integer volutpat nulla sit amet odio eleifend, vitae cursus mauris auctor. Curabitur molestie urna eu magna feugiat, sed congue sem pulvinar.

Paragraphe 3Sed at semper turpis, sit amet aliquet lacus. Vestibulum sollicitudin eget est in egestas. Donec mollis mauris quis metus venenatis elementum. Nullam commodo erat a hendrerit tempus. Morbi ac ante quis lacus ultrices molestie. Sed et cursus nunc. Donec rhoncus blandit risus, luctus dignissim tortor rutrum fringilla.

Code:
• <a href="#p2">Accès direct au paragraphe 2</a>
• <a href="#p3">Accès direct au paragraphe 3</a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet ullamcorper quam, et scelerisque dolor adipiscing in. Donec id scelerisque urna, eget pellentesque massa. Donec ornare felis sed massa consectetur congue. Suspendisse magna justo, varius at pretium id, suscipit eu felis. Phasellus eget eros accumsan, tempus orci et, viverra mi. Donec ut risus sed libero pulvinar egestas. Phasellus fringilla eu elit eu imperdiet. Aliquam imperdiet vulputate pulvinar.

<span id="p2">[b]Paragraphe 2[/b]</span> Sed egestas gravida libero, vel lobortis nibh adipiscing sed. Sed turpis augue, vulputate a augue eget, posuere pretium mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla lobortis molestie dignissim. Aenean imperdiet, arcu a posuere cursus, mi tellus egestas enim, ac adipiscing lorem risus et enim. Nunc sagittis ullamcorper leo in venenatis. Nullam eget mattis odio. Quisque mollis est sed erat pharetra faucibus. Phasellus condimentum viverra ipsum dignissim lacinia. Cras ac auctor purus. Vivamus tincidunt feugiat nunc. Ut iaculis sem in euismod aliquam. Praesent sagittis nisi magna, vel adipiscing arcu venenatis a. Integer volutpat nulla sit amet odio eleifend, vitae cursus mauris auctor. Curabitur molestie urna eu magna feugiat, sed congue sem pulvinar.

<span id="p3">[b]Paragraphe 3[/b]</span>Sed at semper turpis, sit amet aliquet lacus. Vestibulum sollicitudin eget est in egestas. Donec mollis mauris quis metus venenatis elementum. Nullam commodo erat a hendrerit tempus. Morbi ac ante quis lacus ultrices molestie. Sed et cursus nunc. Donec rhoncus blandit risus, luctus dignissim tortor rutrum fringilla.




Eh voilà, c'est tout ! Tu connais à présent la technique pour ajouter des ancres en HTML sur tes pages Smile

Mot de la fin Wink

   

Yue
Yue
Messages : 114

Faire une ancre en HTML Empty Re: Faire une ancre en HTML

Sam 12 Oct 2019 - 17:42
Merci beaucoup pour ce tuto ♥ Je vais surement utiliser des ancres pour les pages administratives /o/
fascicularia
fascicularia
Messages : 36
https://altitudetropicale.forums-actifs.com/

Faire une ancre en HTML Empty Re: Faire une ancre en HTML

Ven 29 Nov 2019 - 20:03
Bonjour Pénélope,
merci pour ce tuto.

Pêpêche
Pêpêche
Mascotte
Messages : 4428

Faire une ancre en HTML Empty Re: Faire une ancre en HTML

Sam 30 Nov 2019 - 6:45
Coucou Smile

De rien ^^ Contente qu'il soit utile bounce
Contenu sponsorisé

Faire une ancre en HTML Empty Re: Faire une ancre en HTML

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses