html Lien interne sur une même page

[Ziggy]

Bonjour à tous,
une petite question car je ne sais pas comment faire comme sur certains sites où l'on clique sur un lien et cela nous amène plus bas sur la page (ou plus haut d'ailleurs). Quelle est la technique ?

Merci.

 

[Jack]

Salut Ziggy,

C'est ce qu'on appelle des ancres en langages HTML. Ce n'est pas compliqué à mettre en place, voici un petit exemple.

Il y a une section de ta page qui s'appelle "Recette de la sauce carbonara" (désolé j'adore ça !), tu places cette section dans un conteneur (div ou section) et tu lui attribues un id:

<div id="carbonara">
    <h1>
        Recette de la sauce carbonara
    </h1>
    <p>
        Voici les ingrédients pour la recette
    </p>
</div>

Et bien dans ton menu de navigation par exemple, tu peux aller directement à cette section en créant un lien de cette façon:

<a href="#carbonara">Recette de la sauce carbonara</a>

l'adresse du lien est #id donc dans ce cas #carbonara puisque tu avais <div id="carbonara">
Il faut bien utiliser id et non class sinon cela ne fonctionne pas.

Et voilà !

 

[HenriK]

Salut, et du coup est-ce qu'il faut mettre title aussi dans la balise <a> ?

 

[Nicolas]

C'est un attribut facultatif qui permet de donner une information supplémentaire au lien.

Il ne faut pas y coller le texte entier du lien mais plutôt un info rapide, par exemple pour reprendre ce que disais Jack : dans chaque lien des ingrédients de la recette à la carbonara tu peux mettre title="ingrédients" et au survol du lien <a href="/recette/carbonara/parmesan.fr" title="ingrédients">Parmesan</a> une petite bulle affichera ingrédients.

Je ne crois pas qu'elle soit nécessaire à l'accessibilité des sites, il y a d'autres attributs pour cela.

 

[Eleven Up]

C'est comme ça qu'on crée le lien Haut de page sur les sites web !

<a href="#accueil" title="accueil">Haut de page</a>

Où un lien tout en haut des pages, en général le lien dans la navigation a l'attribut id="accueil" par exemple.

 

[Ziggy]

Ok j'ai compris !
Donc si je veux que le clic sur les liens arrivent sur chaque ingrédient je mets un id dans les liens des ingrédients c'est ça ?

 

[Cascadeur]

Ouais, un id différent à chaque fois hein !

Quelle est la différence entre une classe et un id ?

Chaque terme permet de créer des propriétés CSS personnalisées, que vous pouvez appliquer à vos balises, mais il existe des différences entre une classe (.toto) et un id (#toto)

www.alsacreations.com