Header

Partagez | 

Faire une ancre en html

Message Sujet: Faire une ancre en html   Dim 13 Oct - 9:38

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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
Revenir en haut Aller en bas
Faire une ancre en html
Page 1 sur 1
 Sujets similaires
-
» Infobulles et code HTML (voir même CSS)
» Est-ce que l'on peut faire un journal?
» Utiliser les pages HTML et les iframes sur votre forum
» Balises pour faire clignoter du texte
» Une image dans le cadre intérieur - CSS
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens