Les sommaires internes
Mais de quoi je parle, vous allez-me dire! Eh bien tout simplement des sommaires que vous pouvez mettre en début de FAQ ou alors de prédéfinis pour avoir un lien directement vers l'endroit que vous voulez! Cela ne vous dit toujours rien? Voici un sommaire tout simple pour ce tuto:
Comme vous pouvez le voir, en cliquant simplement sur les liens, vous pouvez accéder à la section sur la même pas! Magie? Eh bien non, et vous allez très vite comprendre comment faire!
Comment faire?
Pour pouvoir faire un sommaire de la sorte, il suffit d'utiliser deux choses: les identificateurs et les liens (a). Ce principe est donc tout simple, et est bien couramment nommé les "ancres".
Donc si un jour vous entendez le terme "ancre" ailleurs que sur un bateau (et si possible dans un contexte informatisé) c'est probablement une référence à ces fameux liens qui permettent d'accéder à un endroit spécial sur une page, que ce soit celle-ci ou une autre.
Les ancres
Bon, c'est bien super, mais comment je crée tout ça moi? C'est très simple, la première étape est déjà de savoir où vous voulez poser votre ancre. Prenons ici comme exemple mon titre "Les ancres". Je veux donc avoir un lien qui va dessus.
Rien de plus simple: je lui rajoute un id, comme ceci:
- Code:
<h2 id="ancre">Les ancres</h2>
Un id (ou identificateur) doit être unique sur la page, c'est à dire que chaque objet doit avoir une id différente. C'est pour cela que plus vous êtes précis, mieux c'est! Si il y a plusieurs fois le même id sur une page, alors votre code ne marchera pas (ou mal, selon la sensibilité du navigateur).
Maintenant qu'on a notre petite id, c'est presque terminé! En effet, il suffit à présent de créer notre lien qui ira vers cette ancre. Pour cela, rien de plus simple : il suffit d'utiliser l'appel aux id que vous connaissez très certainement du CSS: le dièse (#) et de le mettre dans le lien en question. Cela donne donc ceci:
- Code:
<a href="#ancre">Les ancres</a>
Et voilà! Votre ancre est crée! Pour créer un sommaire complet, il ne vous reste à présent plus qu'à créer plusieurs id (tous uniques!) pour les différents éléments à lier dans votre sommaire de le mettre en place!
Pour mon exemple, j'ai:
- Code:
[list=1]
[*]<a href="#how">Comment faire?</a>
[*]<a href="#ancre">Les ancres</a>
[*]<a href="#mep">Mise en page</a>
[/list]
<h2 id="how">Comment faire?</h2>
<h2 id="ancre">Les ancres</h2>
<h2 id="mep">Mise en page</h2>
Imaginons à présent que vous voulez lier une ancre depuis une autre page, par exemple pour un QEEL avec des groupes, où vous voudriez que chacun des groupes du QEEL lie à la page spécifique où se trouve le sommaire de TOUS es groupes, et où chacun des groupes à votre ancrage.
Alors, il suffit d'ajouter l'url de la page, suivi de l'ancre appelée avec un dièse. par exemple: monsite.com/home#ancre
Si vous n'êtes pas sûrs de alors de l’adresse de l'ancre, il vous suffit de cliquer dessus et utiliser l’adresse se trouvant dans la barre de navigation de votre navigateur.
Pour notre exemple, nous aurions:
- Code:
<a href="http://www.never-utopia.com/t49291-tuto-les-sommaires-internes#ancre">Les ancres</a>
Mise en page
Vosu vous demandez alors très certainement comment vous pouvez mettre en forme, tant les choses ancrées que les liens? Et ce, sans à avoir à recopier cent fois le même code pour chaque id!
Eh bien sachez que l'on peut mettre à la fois un id ET une class à tout objet. Donc pour mettre en page tout ce beau monde, il vous suffit d'ajouter une class!
Exemple:
- Code:
[list=1]
[*]<a class="lien_ancre" href="#how">Comment faire?</a>
[*]<a class="lien_ancre href="#ancre">Les ancres</a>
[*]<a class="lien_ancre href="#mep">Mise en page</a>
[/list]
<h2 class="titre_tuto" id="how">Comment faire?</h2>
<h2 class="titre_tuto" id="ancre">Les ancres</h2>
<h2 class="titre_tuto" id="mep">Mise en page</h2>
C'est tout!
J'espère que ce tuto vous aura aidé, même sil est très simple! ^^
Dernière édition par NyoTheNeko le Jeu 22 Jan 2015 - 22:16, édité 1 fois
On va voir si j'ai compris 
