mercredi 2 juin 2010

Insérer une ancre

Une fonction qui s'avère intéressante à la longue, surtout lorsque l'on a de longs messages : celle consistant à déposer des ancres.
Il s'agit tout simplement de liens qui facilitent la navigation dans le sens où l'on permet au lecteur de se déplacer vers une autre partie du message ou d'une page html.

Bien évidemment, on pense aussitôt au lien qui permet d'aller directement en bas de page (ou inversement de revenir en haut de page). Mais cela peut s'avérer tout aussi pratique lorsque l'on veut créer un sommaire avec un lien sur le titre renvoyant au développement de la partie correspondante.

Concrètement comment cela se passe ?

Dans l'onglet html de rédaction du message il faut entrer la syntaxe suivante :
<a href="#nom de l'ancre">départ : lien et messsage incitant à cliquer pour pointer vers votre ancre</a>
<a name="nom de l'ancre">destination : mot ou phrase vers lequel votre lien pointera</a>


Lorsque l'on veut faire un lien vers une ancre se situant sur un autre message la syntaxe est pratiquement la même en prenant tout simplement la précaution de citer la bonne page html du message.
- Sur le message d'origine on mettra :
<a href="http://lenomdemonblog.blogspot.com/nomdesapage.html#nom de l'ancre">départ : lien et messsage incitant à cliquer pour pointer vers l'ancre du second message</a>
- Sur le message de destination, on mettra :
<a name="nom de l'ancre">destination : mot ou phrase vers lequel votre lien pointera</a>

Important : Si vous prenez les références d'un message qui est encore à l'état de Brouillon, vous devrez penser à corriger ses coordonnées une fois que cet article sera publié.

D'autre part, il est tout à fait possible de laisser une ancre vide. Ainsi dans l'exemple cité précédemment, un retour vers le top de la page peut être fait sur une zone vide. Et l'occurrence voici le code html de ma première ligne :
<a href="" name="up"></a>
A+

36 commentaires:

  1. Bonjour!

    J'ai essayé à plusieurs reprises d'appliquer ta méthode, mais il semble que je ne comprenne pas bien tes instructions. Je suis une visuelle; ça m'aiderait beaucoup si tu me donnais un exemple à partir de l'adresse que je te donne :http://econocroquesdrecettesante.blogspot.com/p/index-alphabetique.html

    Comme tu peux le voir, il s'agit d'un index alphabétique. Donc, je désire installer un alphabet dans le haut de la page, dont chaque lettre mènerait à la lettre correspondante dans la liste plus bas.

    Ce que je ne comprends pas, c'est cette histoire de lien : je le prend où, ce lien et je le fais comment? Je sais très bien faire des liens dans un texte normal, mais le HTML... Je commence tout juste à toucher au HTML, d'où mes questions de débutante!

    Merci de bien vouloir m'aider et pour les bons trucs que tu nous donne! Passe une bonne journée!

    RépondreSupprimer
  2. Bonjour Econolyne,

    Merci de ta question qui me permet de rebondir, dans un premier temps.

    Dans un second message, je vais m'efforcer de te répondre.

    Il faut absolument insister sur le fait qu'il est nécessaire de mettre l'adresse absolue (c'est à dire complète) du lien et non l'adresse relative sans cela il y a des problèmes avec certains navigateurs :
    <http://nomdublog/nomdelapage/#nomdelancre>

    RépondreSupprimer
  3. Re,

    Alors voilà, pour te répondre.

    Juste en dessous de "Bienvenue dans notre index :"
    Tu saisis dans l'onglet Html de ta page :
    <a href="http://econocroquesdrecettesante.blogspot.com/p/index-alphabetique.html#ancreA">Pour accéder aux articles commençant par A</a>

    Bien plus bas, avant , ou après le "A" plus grand et en caractère gras, tu saisis :
    <a name="ancreA">A</a>

    Maintenant lorsque tu cliqueras sur le lien "Pour accéder aux articles commençant par A" (que tu peux bien évidemment changer, si tu trouves quelque chose de plus parlant), tu devrais aboutir au "A" dont je parle juste au dessus.

    Tu pourras, enfin, effacer l'ancien "A" qui n'est pas une ancre.

    RépondreSupprimer
  4. Bonsoir!

    Je te remercie pour tes bons conseils, ils sont arrivés à point! Je croyais que ça fonctionnait, mais en voulant mettre mes liens en gras, j'ai bien vu que ça ne fonctionnait pas!

    Sans ton aide, j'y serais encore. Pour te remercier, j'ai publié ton lien dans un petit article http://econocroquesdrecettesante.blogspot.com/ , de plus, j'ai mis "Mes trucs pour Blogger" dans ma page de sites à voir.

    Je t'invite à aller admirer (que dis-je, T'EXTASIER!) mon Index Alpha. Bientôt, je vais améliorer mes autres pages de la même façon.

    Un gros merci! Ce petit truc a changé ma vie de bloggeuse!

    RépondreSupprimer
  5. Bonjour Econolyne,

    Content que cela t'ait rendu service.

    Merci pour le gentil petit mot et le lien sur ton blog.

    RépondreSupprimer
  6. Bonjour!

    Maintenant que je sais mettre des ancres sur une même page, je veux apprendre à en mettre sur une page, vers l'article d'une autre page.

    Mais voilà! J'ai beau suivre ta "recette", ça ne marche pas! Peux-tu me donner encore un exemple concret à partir de ce que je veux faire (avec cette méthode, je comprends fort bien).

    Je désire mettre l'ancre "carottes" dans la phrase "Les carottes" de l'article suivant http://econocroquesdrecettesante.blogspot.com/2010/10/congelation-des-carottes.html et je veux que ça mène à cet autre article http://econocroquesdrecettesante.blogspot.com/2010/10/ma-recette-de-carottes-et-oignons.html (je désire mettre mon ancre "carottes" dans la liste des ingrédients, là où ce mot est écrit.)

    Lorsque j'ai collé ma formule dans l'article sur la congélation, à la place du mot "carottes" dans "Les carottes", cela a fait disparaître tout tout le texte! Et j'imagine que j'aurais mal installé la seconde ancre aussi (sur la page de la recette).

    Je sais que je suis mêlée (ça, c'est évident! loll), mais où je me suis mêlée, ça je ne sais pas!

    Aurais-tu l'amabilité de me donner encore un petit coup de main (explique pour une visuelle svp)? Je te remercie à l'avance! Bonne soirée!

    RépondreSupprimer
  7. Bonjour,

    Lorsque l'on change de page, il faut mettre les références absolues de la page.
    Je vais refaire un autre article plus complet sur les ancres.

    RépondreSupprimer
  8. Bonjour!

    Oui, ça serait une bonne idée pour les débutants. Parce que moi, quand tu parles de mettre les "références absolues" de l'autre page, ça ne me dit pas grand chose!Je comprends qu'il s'agit de l'adresse, mais je ne sais où et comment écrire ça! Les instructions comme , ça me mêle plus qu'autre chose!

    Comme tous les débutants (et visuels), j'ai besoin d'un exemple avec des couleurs (le mot en rouge est l'ancre, en jaune la référence absolue, etc.). Ça serait bien que tu présentes un exemple où chaque partie du code est identifiée par une couleur plutôt que par des mots. Car ce qu'un débutant a besoin de savoir, c'est ce qu'il doit écrire précisément, lorsque tu dis d'inscrire "le nom de l'ancre", par exemple (doit-on écrire "nom" + un mot qui sert d'ancre, ou juste le mot qui sert d'ancre?).

    Merci à l'avance pour ton aide!

    RépondreSupprimer
  9. Bonjour!

    J'ai vu que tu as publié de nouveaux articles sur les ancres. Je compte bien m'en servir pour créer des liens entre mes pages. Seulement, j'ai un petit problème à régler avant. Je t'explique...

    Lorsque je clique sur le lien de départ, j'arrive bel et bien à l'ancre. Mais si je cliques sur l'ancre (point d'arrivée), je me retrouve sur la page de connection de Blogger. Suis ce lien http://econocroquesdrecettesante.blogspot.com/p/index-alphabetique.html#ancreC , puis cliques sur le C, au-dessus de l'image. Tu vas tout comprendre!

    Peux-tu me dire ce qui ne va pas avec mon code? Dois-je enlever ou ajouter quelque chose?

    J'ai utilisé les codes que tu m'as donnés,sauf que j'ai enlevé la partie du genre "cliquez sur...".

    Merci de m'aider à mieux comprendre.

    Bonne soirée!

    RépondreSupprimer
  10. Bonjour Econolyne,

    Il s'agit toujours des références absolues et non relatives de la page !

    C'est ce que je disais dans les commentaires de ce message ainsi que dans le nouveau que j'ai préparé, il est recommandé de publier son article et ensuite de mettre les références de la page.
    Sans cela Blogger met des références par défaut et cela ramène vers http://www.blogger.com comme dans ton cas.
    Il te faut donc revenir dans tes ancres et corriger tous les http://www.blogger.com en http://econocroquesdrecettesante.blogspot.com/p/index-alphabetique.html.
    Ce qui devrait rendre inutile tes liens de droite pour le retour Haut.

    RépondreSupprimer
  11. j'essaie sans succès d'installer une ancre pour accéder au bas de page, et
    on me répond que la page demandée n'existe pas une fois que le lien est en place. Comment dois-je faire? Je voudrais en fait que de l'accueil on puisse accéder aux horaires des marées qui sont tout en bas. Merci de m'aider

    RépondreSupprimer
  12. avec du mal et du temps j'ai réussi grâce a tes infos
    merci :D

    RépondreSupprimer
  13. Un gros MERCI à vous surtout, pour ce précieux blog, que je consulte très régulièrement !
    Je cherche depuis longtemps à insérer une ancre dans le widget "COMMENTAIRES RECENTS" placé en colonne de http://aceagain.blogspot.com/
    de façon à être renvoyé directement vers LE commentaire sur lequel on clique.
    (car les comms s'ouvrent, mais on reste sur le message, il faut descendre tout en bas pour trouver le dernier comm).
    Si vous avez une idée, d'avance un gros, gros MERCI !!!! ^^

    RépondreSupprimer
  14. bonjour et encore merci pour vos articles :)

    j'essaye d'insérer des ancres dans une page de mon blog (pas la page d'accueil, donc)

    j'ai un problème avec la balise "name". Il semble qu'elle soit utilisée pour l'éditeur, en tout cas, quand je publie ma page, lorsque je clique sur le lien, cela m'ouvre l'éditeur ! hé oui, blogger a remplacé mon code par un lien vers l'éditeur... bref, pour contourner j'ai utilisé son lien en y mettant l'URL de la page suivi du fameux "name", ça donne :

    <="" a="" href="http://annuaire-prezi.blogspot.com/p/guides-prezi.html" name="plusloin">aller plus loin</a>< pour l'ancre

    <="" a="" href="http://annuaire-prezi.blogspot.com/p/guides-prezi.html#plusloin">aller plus loin</a> pour le lien.

    si ça peut servir...

    RépondreSupprimer
  15. Bonjour

    Merci pour cet article très utile, je vais m'en servir pour faire une seule page avec plusieurs ancres au lieu de plein de pages parce que je suis limitée à 20 pages (d'ailleurs je me demande bien pourquoi cette limitation). Cette méthode marche à merveille.

    Par contre, une fois sur deux lorsque je mets <a name=" etc. avec le titre de ma sous-partie, et bien que je sauvegarde soigneusement, Blogger me transforme ça en <a href= etc. et j'obtiens un nouveau lien à l'endroit de la cible, qui pointe vers l'interface blogger. Ce n'est vraiment pas pratique, comment éviter ça?

    RépondreSupprimer
    Réponses
    1. Bonjour Janet,
      Voir les commentaires plus haut et cet article pour compléter : http://mestrucspourblogger.blogspot.fr/2010/10/utilisation-des-ancres.html
      Vous êtes peut être dans la configuration où il faut mettre des références absolues et non uniquement relatives.

      Supprimer
    2. Je mets effectivement des références absolues, j'y ai fait bien attention.

      Supprimer
    3. bonjour

      idem pour moi

      si j'ai un lien :
      href="#ancre_a"
      alors il va devenir :
      href="http://www.blogger.com/blogger.g?blogID=5168884413013579562#ancre_a"
      et ce, dès que je vais vouloir afficher le blog en format réel dans l'éditeur, ou dès que je veux en avoir l'apreçu ...

      tu as trouvé une solution Janet ?

      Supprimer
  16. Bonjour, je trouve votre blog très intéressant. J'essaie de mettre des ancres dans mon post qui comporte un petit sommaire mais je n'y arrive pas malgré avoir bien lu tous les conseils dans ce post.

    Mon post se trouve ici http://aedfupf.blogspot.com/2012/10/journees-du-patrinoine-foncier-2012.html

    j'ai mis dans le code HTML :

    1. Exposé des motifs

    puis plus bas :

    1. Exposé des motifs

    et j'ai une erreur : page introuvable, pouvez vous m'aidez? Merci d'avance =)

    RépondreSupprimer
  17. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  18. Bonjour,
    Comme dit plus haut j'ai le problème des ancres qui font office de liens et qui renvoient a ma page "vue d'ensemble"
    J'ai corriger comme vous l'avez expliqué et ma correction ne veut pas s’enregistrer. Il y a marquer que j'ai fait une erreur..
    Je ne comprend plus !
    Pourriez-vous m'aider s'il vous plait ?
    C'est dans ma page de James Patterson
    fabybook@blogspot.com
    Merci

    RépondreSupprimer
  19. Bonjour,
    j'ai fait 2 ou 3 articles concernant les ancres sur mon blog http://blogtricker.blogspot.com/ et j'ai trouvé un truc intéressant. Le code des ancres et des liens menant vers elles sont en effet systématiquement altérés par Blogger lorsque l'on a le malheur de passer en mode "rédiger". J'ai donc trouvé une astuce consistant à crypter en javascript le code HTML de ces ancres et liens pour empêcher Blogger de les transformer. Et ça marche!
    Patrice

    RépondreSupprimer
  20. Bonjour,
    il m'en aura fallu du temps pour arriver jusqu'aux ancres ... Mais personne n'est parfait :-)
    Ma première est ici : http://filsdep.blogspot.nl/2013/02/its-beyond-my-control.html !! Grâce à vous !
    Merci encore pour ce blog si riche et si précieux !!

    RépondreSupprimer
  21. Bonjour,

    J'ai une petite question, si jamais quelqu'un a la réponse...
    Je me suis aperçu que je pouvais utiliser sur mon blog dotclear l'ancre suivante http://monsite#comments pour renvoyer aux commentaires.
    Aujourd'hui, je souhaiterais faire la même chose pour renvoyer directement vers le formulaire qui permet de déposer un message (celui pouvant être beaucoup plus bas quand il y a beaucoup de commentaires). J'ai vu traîner l'ancre respond mais ça ne marche pas...

    Merci par avance si vous avez la solution !

    RépondreSupprimer
  22. Bonjour,
    J'ai fait des renvois vers une page statique de mon blog. Jusque-là, tout va bien.
    Mais je n'arrive pas à poser des ancre sur des endroits spécifiques de cette page. Cela oriente systématiquement sur le haut de page. Je pense pourtant avoir suivi tous vos conseils...
    Avez-vous une idée du problème ?
    Bonne journée

    RépondreSupprimer
  23. Bonjour précieux guide !
    Je bloque sur la fonction d'ancre, avec un problème récurrent : l'ancre se fait, mais si je clique dessus je reste sur mon haut de page où se trouve mon menu ancré... au lieu de descendre plus bas dans ma page jusqu'au sous-titre concerné.
    Du coup, j'ai testé ton lien vers le haut de page, dans ce message... même résultat, on tombe sur le haut de ton message... (cela peut-il venir de mon PC ?!

    Voici un exemple des lignes HTML que j'ai enregistrées : bon je n'arrive pas à copier les lignes, mon commentaire est alors refusé car présence de SPAN(e). Alors je mets des SPANE à la place e qui donne :
    "Historique

    Historique :
    "

    Y a t'il une erreur de ma part ?
    Merci par avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Yohan,
      Oui cela vient de toi : j'ai retesté et ça marche.

      Supprimer
  24. Salut,

    Le truc de l'ancre avec nom ne fonctionne pas. Après un essaie infructueux, blogger me donne ce résultat : hautdepage

    Avant je savais comment mais maintenant, je ne sais plus. Je crois que le problème vient de blogger même.

    https://draft.blogger.com/blogger.g?blogID=3577314259531669044" name="rochellais" ?

    RépondreSupprimer
  25. Désolé je ne comprends absolument rien pour faire une ancre dans la même page
    Comment le mot par exemple :
    DEBUT peut renvoyer sur le mot TOTO
    quel est le codage ?

    RépondreSupprimer
  26. Merci d'avoir édité mon commentaire précédent
    Apres multiples essais j'y suis arrivé voici le codage sur blogger

    Ancre appelée aussi signet c'est un lien au sein d'une même page

    explications
    l’ancre est le mot toto qui est à la fin du texte
    le mot début renvoie sur le mot toto et vis versa quand on clique dessus
    http://ufcsaintdizierchaumont.blogspot.fr/2014/03/essai-ancre.html est l’adresse internet de la page
    essai est un nom quelconque donné à cette liaison
    respecter la syntaxe et les blancs




    debut





    ca marche enfin sur blogger






    toto





    Merci et bonne journée en espérant avoir été clair
    Jean louis

    RépondreSupprimer
  27. Pourquoi le code n'apparait pas dans le message précédent ?
    Le code de l'ancre concerne blogger
    Contactez moi directement ce sera plus simple
    yoyoblog52@gmail.com
    ou sur mon blog
    http://machinesacoudre.over-blog.org/
    Bonne lecture
    Jean louis


    RépondreSupprimer
  28. Bonjour
    Tout d'abord un grand merci pour votre blog qui m'a aidé à me lancé dans l'aventure de mon blog.
    Je pense que je vais vous poser une question qu'une précédente personne vous a posé mais je n'ai pas compris. Je m'explique:
    Je fais un index alphabétique qui commence à être très important. Pour faciliter la navigation sur mon blog, j'aimerai que toute les lettres de l'alphabet (une photo par lettre) soit en haut de ma page et renvoie aux auteurs dans le nom commence par cette lettre mais je n'arrive pas à faire coïncider les deux même lettres. Je ne sais pas si je suis claire. Dans le doute je me permets de vous mettre l'adresse de mon index pour que vous puissiez voir.

    http://lachroniquedespassions.blogspot.fr/p/blog-page_4644.html


    Merci d'avance

    RépondreSupprimer
  29. j'essai depuis tout à l' heure mais ça n 'a pas l'air de fonctionner pourriez-vous m'aider pour que je puisse enfin utiliser des encres qui renvoient sur mon site ? www.lovemenu.fr

    RépondreSupprimer
  30. Merci!! Ton blog est vraiment GE-NIAL! A chaque fois que je cherche quelque chose pour améliorer mon blog, je retombe chez toi et je réussi à faire ce que je souhaitais en suivant tes conseils :) C'est fou, je n'y connaissais rien il y a encore quelques semaines et maintenant je m'amuse tellement! Merci encore et belle continuation!

    RépondreSupprimer
  31. hello , j'arrive pas a faire fonctionner l'astuce, je sais pas si le fait d'avoir un tableau m'empêche d'aller plus loin que le début de ce tableau ... http://matrixcodexinvestigation.blogspot.com/p/calendrier-2016.html#fevrier

    RépondreSupprimer
  32. finalement c'était bien du au fait que je n'avais qu'un seul tableau , je l'ai donc séparer en plusieurs parties et là ça fonctionne très bien

    RépondreSupprimer

Merci de prendre note des messages d'annonce en une du blog.
Et d'adresser vos questions sur notre
Communauté des Utilisateurs de Blogger hébergée sur Google+.

LinkWithin

Related Posts with Thumbnails