Partagez | 
 

 Faire une ancre en html

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: Faire une ancre en html   Dim 13 Oct - 9:38
Ahh les ancres !! Mine de rien, elles sont bien pratiques en HTML, surtout si vous avez 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. Par exemple, les #top et #bottom de l'ascenseur du forum sont des ancres qui nous permettent d'aller en haut ou en bas de la page sur laquelle nous nous trouvons.

Il est à noter que l'ancre s'affichera toujours en haut de la page, idéal si vous voulez 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 :)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>
Vous ne rêvez pas ! Vous pouvez appliquer ce principe sur toutes les balises html Wink

IdeaRemarques :
les ancres #top et #bottom sont prédéfinis dans les navigateurs. Vous pouvez donc les utiliser sans avoir de "cible de destination" Wink

Un petit exemple





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:
[list][*]<a href="#p2">Accès direct au paragraphe 2</a>
[*]<a href="#p3">Accès direct au paragraphe 3</a>[/list]

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.



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Faire une ancre en html" tel que je l'ai rédigé.[/justify]

Mot de la fin Wink
 

Faire une ancre en html

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» Faire bouger un objet au passage de la souris [ RESOLU ]
» Faire un texte qui défile et qui marque le nom de la personne connecté
» Affiches comment être et faire pour apprendre

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants