AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Les sommaires internes

    Partagez
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Mar 20 Mai 2014 - 20:52

    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:

    1. Comment faire?
    2. Les ancres
    3. Mise en page

    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



    Neva
    FémininAge : 25Messages : 18542

    le Jeu 5 Juin 2014 - 18:18

    Bon sujet, Nyo ! On en parle pas assez, des ancres !
    Merci



     
    EricSouvaltzis
    MasculinAge : 17Messages : 47

    le Lun 28 Juil 2014 - 1:25

    merci
    A-Lice
    FémininAge : 22Messages : 4939

    le Lun 30 Mar 2015 - 19:26

    Plop ~ 

    Je ne savais pas utiliser les ancres :hum: On va voir si j'ai compris Razz

    Ma première ancre
    Ma seconde ancre

    Ma première ancre


    Pour ce faire je te remercie Nyo si ça marche u_u et je complète avec un Lorem /pan

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere volutpat lorem, vitae dignissim quam vulputate ac. Curabitur in ipsum et nisi malesuada iaculis a pellentesque eros. Quisque in ultrices metus, vel efficitur leo. Phasellus tempus rhoncus purus, eget sagittis lorem lobortis quis.

    Ma seconde ancre


    Donec efficitur, eros vitae pulvinar faucibus, nisi orci ultrices dui, vel gravida turpis ante sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis bibendum ipsum et vestibulum. Mauris efficitur tristique dui ac congue. Nulla rutrum nec diam id accumsan. Nunc hendrerit velit eget lacus elementum pellentesque. Nam et lobortis elit. Donec vestibulum sapien metus, ac vestibulum est tincidunt quis.

    Ça à l'air de marcher *-*
    Merci pour ce tuto \o/

    Anazera
    MasculinAge : 20Messages : 37

    le Mar 14 Avr 2015 - 23:47

    Merci bien, je ne connaissais pas !
    Contenu sponsorisé

    Aujourd'hui à 1:15


      La date/heure actuelle est Dim 11 Déc 2016 - 1:15