html Lien interne sur une même page

Ziggy

Membre
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.
 
  Solution
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:
HTML
<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:
HTML
<a href="#carbonara">Recette de la sauce carbonara</a>
l'adresse du lien est #id donc dans ce cas...

Jack

Membre
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:
HTML
<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:
HTML
<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à !
 

Nicolas

Membre actif
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.
 

Ziggy

Membre
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 ?

pasta carbonara GIF by Gifs Lab


😂
 

Ces discussions pourraient vous intéresser...

Salut, Juste pour vous faire découvrir un site intéressant sur JavaScript via un jeu de mots croisés sur la thématique de ce langage. Vous pouvez vous y essayer à cette adresse: http://odyssey.sdlm.be/javascript/95/cross.htm
  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Titre</h1>...
  • Résolue
Bonjour, Une question pour la mise à jour de Bootstrap quand une nouvelle version sort. Comment vous procédez ? J'utilise les CDN de bootstrap donc je me demandais ce que je devrais faire avant de les changer pour la nouvelle version ? Comment savoir ce qui va changer sur mon site internet ...
Haut