Zoom sur les ancres HTML

Caché parmi les nombreux éléments du menu « Insérer » de WebAcappella, il existe un outil qui passe inaperçu et pourtant au potentiel fort sympathique. Aujourd’hui, embarquez avec la team WebAcappella à la découverte des ancres HTML.

Des ancres dans votre site

Créer une FAQ (Foire aux questions) ou créer un mini-site construit autour d’une page unique avec une navigation s’appuyant sur le scroll vertical (la barre de défilement vertical affichée sur le côté droit de votre navigateur qui permet de descendre dans la page et de remonter).

Pour réaliser tout cela, un seul outil mis à votre disposition par les développeurs de WebAcappella : les ancres HTML.

Ces ancres disponibles dans WebAcappella sont là pour servir à la navigation à l’intérieur d’une seule et même page ayant une hauteur très importante.

Elles fonctionnent sur le principe suivant :

> Etape 1 : insertion d’un élément « ancre » dans un endroit précis de votre page.

> Etape 2 : dans un élément « Texte », création d’un lien hypertexte qui pointera vers cette ancre dans la page courante.

Ces ancres HTML sont visibles uniquement dans votre espace de travail WebAcappella. Une fois votre site publié, l’élément « ancre html » sera invisible dans votre navigateur.

Etude de cas : Comment réaliser une FAQ ?

Imaginons un instant que vous êtes dans le cas suivant : vous souhaitez réaliser une foire aux questions avec une dizaine de questions et donc de réponses.

tuto-ancrePour pouvoir afficher votre FAQ dans son intégralité sur une seule et même page, commencez par créer une page que vous allez nommer « FAQ » dans l’explorateur de pages.

Ecrivez dans un premier temps, en haut de votre page, toutes vos questions, les unes en dessous des autres puis rédigez vos réponses.

Insérez un élément « ancre html » et attribuez lui un nom dans l’inspecteur de propriétés. Pour le nom, indiquez par exemple « Reponse4 ». Déplacez l’élement au niveau de la réponse n°4, enregistrez les modifications apportées à votre page en cliquant sur « Sauver ».

Revenez à la zone de texte où sont rédigés vos questions et sélectionnez l’intitulé de votre question n°4 en la surlignant à l’aide de votre souris.

Créez maintenant un lien hypertexte en cliquant sur l’icône « Créer un nouveau lien ». Sélectionnez ensuite « Lien vers une page du site » et sélectionnez la page que vous avez nommée « FAQ ». Dans la section « Cible », cliquez sur « Fenêtre courante » et dans le menu déroulant placé juste en dessous, cliquez sur le nom de votre ancre à savoir « #Reponse4 ». Validez en cliquant sur « OK ».

Testez pour vérifier le bon fonctionnement des ancres. Désormais, quand votre visiteur cliquera sur la question n°4, l’affichage basculera automatiquement vers le bas de la page à l’endroit précis où est situé votre réponse.

Répétez l’opération pour toutes les autres questions et réponses. Maintenant vous n’avez plus qu’à publier pour faire profiter vos visiteurs d’une Foire aux Questions pratique et fonctionnelle.

Vous savez désormais tout sur les ancres HTML alors à votre tour de jouer avec la navigation de votre site !

9 Comments

  1. Kezaco Studio

    Vous pouvez aussi associer aux ancres un menu flottant, cela vous permet d’avoir constamment le menu lors du déroulement de la page. Je l’ai réalisé facilement sur ma page actualités en utilisant une maquette WebAcappella associé à un petit code html (code ci-dessous, pour ceux que ça intéresse).

    <div style="position:fixed; float:left">
    <p style="color:#931d7e; font-family:'Arial';font-size:21px; font-weight:normal">Sommaire</p>
    <a style="font-family:'Arial';font-size:14px;font-weight:normal; color:#495259" href="#anchor-Nom-de-votre-ancre">Titre de votre menu</a><br />
    </div>

    En tout cas merci, c’est super votre blog. Continuez, j’en apprends plus tous les jours.

    • Designatic Créations

      Merci @Kezaco !! Excellente ressource très très utile qu’il va falloir que je conserve très précieusement. Merci Beaucoup 😉

  2. Violonisme

    Ravi d’avoir découvert ce blog, très bonne initiative. Cet article notamment me permets de résoudre un « problème » très récent: timing parfait pour votre publication. ce qui serait parfait, ça serait un article l’articulation de WA4 et d’un éditeur d HTML 5, Hype au hasard… bonne continuation

    • Team WebAcappella

      Bonjour et merci pour votre commentaire !
      Nous ne connaissons pas cet éditeur « Hype », nous prenons notre de votre suggestion et allons regarder ça de plus près ! 😉

  3. MetalOS

    Votre blog est super mais pouvons nous avoir un tuto pour la création de design de site spécial écran de smartphone ou tablette ?

    • Kezaco Studio

      ah OUI, ce serait absolument génial, un tuto smartphone.

    • Team WebAcappella

      Bonjour !
      Merci pour votre message et pour cette proposition d’article 🙂
      Nous transmettons ce thème à l’équipe éditoriale !
      Bonne journée !

      • noobactu

        Je suis entièrement d’accord sachant que sur téléphone le site doit avoir un mode responsive ce qui n’est pas le cas et ce qui es demandé par beaucoup de personne c’est tout de même une belle nouveauté du web!

  4. Designatic Créations

    Concernant les ancres HTML, j’aurai aimé savoir si quelqu’un a trouvé comment obtenir un « smooth scroll » (dispo avec jQuery), lorsque l’action est réalisée et que la page vient se placer sur l’ancre ? C’est à dire que la page descend (ou monte) comme avec un mouvement doux de roulette de souris, et non brusquement comme avec une ancre… Si oui je vous en serai reconnaissant !! 😉 Merci et bonne journée.

Commentaires fermés