mardi 2 novembre 2010

Utilisation des ancres

L'utilisation des liens hypertexte permet de sauter d'un point d'un message à un autre point très précis par un simple clic.

On peut en trouver l'intérêt lors de la création d'une table des matières ou d'un lexique par exemple, ou pour insérer des retours vers le haut de la page (autre exemple). Nous sommes ici dans le cas de renvoi sur la même page.
On peut, tout aussi bien, sauter directement sur un point situé dans un autre message ou même carrément vers un autre site.

Le lien qui servira de référence, est appelé une ancre.
ce qui donnera en code :
<a href="http://adressedelapagedublog.html name=home>toute cette ligne peut comporter une ancre appelée home.</a>

Lien hypertexte sur une ancre de la même page

Lorsque l'on a créé une ancre, il est donc possible de poser un lien dans le même message pour renvoyer vers cette ancre.
Par exemple, dans la page de ce message il y a une ancre fin déposée à la fin du message.

Pour l'atteindre, il me suffit de mettre la ligne suivante :
Vous pouvez aller directement à la
<a href=http://adressedelapagedublog.html#fin>fin de ce message</a>.
Ce qui donnera :
Vous pouvez aller directement à la fin de ce message.

Liens hypertexte sur une autre page

Maintenant que l'on a compris le principe du lien dans la même page, il suffit de voir comment faire la même chose pour un lien vers un autre message.

Par exemple, si je dis :
Vous pouvez consulter cet
<a href=http://adressedelapagedublog.html>autre message</a>.
Cela donnera :
Vous pouvez consulter cet autre message.

Une fois cette page du nouveau message consultée, on peut vous faire reprendre le fil de cette lecture depuis cette ligne où l'on a inséré l'ancre retour.

Liens hypertexte sur le Web

Ici, pour atteindre une autre page hébergée à une autre adresse, vous pouvez vous servir tout simplement de la fonctionnalité intitulée Associer dans l'interface de rédaction d'un message sous Blogger.

Ainsi pour dire :
Rendez-vous sur mon autre blog De tout et du reste

le système écrira de lui-même :
Rendez-vous sur mon autre blog
<a href="http://detoutetdureste.blogspot.com/">De tout et du reste</a>
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
Vous êtes à la fin du message

Vous pouvez retourner au début du message en utilisant l'ancre home avec un lien codé ainsi :
<a href="http://adressedelapagedublog.html#home>Retour au début du message</a>
qui donnera en lien actif :
Retour au début du message

Nota : Pour ne pas vous arracher des cheveux, il faut commencer avec un article déjà publié c'est à dire avec des références absolues (l'adresse complète) et non celle du brouillon qui vous sert à travailler.

A+

25 commentaires:

  1. Bonjour,
    Je vous remercie pour vos publications, riches d'enseignements.
    Mais dans le cas présent, mes neurones patinent et je n'arrive pas à mettre en oeuvre vos conseils.
    J'ai créé sur mon blog un onglet "Argile, Bois, Pierre", dans lequel des informations apparaissent chronologiquement. J'ai positionné une table des matières et je souhaite que chacun des points de cette table renvoie par lien aux chapitres chronologiques concernés qui viennent à la suite dans cet onglet.
    Mais voilà... Je suis novice et je n'arive pas à comprendre :
    - comment fait-on pour "poser" ou "déposer" une ancre ?
    - où doit-on écrire la ligne de code que vous donnez en exemple ? Doit-on l'écrire dans "modifier les pages / rédiger" ? Ou dans "modifier les pages / modifier le code HTML ?

    Lorsque je clic sur "modifier le code HTML", la totalité du code du contenu de mon onglet s'affiche. Comment savoir où écrire (ligne, emplacement sur la ligne ?) si c'est bien dans ce code que le lien doit s'écrire ?

    Si l'on doit insérer du code ici, doit le faire 2 fois ? Une fois sur un élément de la table des matières - puis, une seconde fois et avec un code différent, sur la cible qui, dans le corps du texte, est désignée par cet élément de la table des matières ?

    Bref, le novice est perdu et pourtant il aurait bien besoin des dits liens !

    Merci pour votre réponse.

    http://stephane-devillers.blogspot.com/

    PS : si vous avez quelques minutes de plus : comment - le plus clairement possible, procéder pour référencer mon blog de sorte qu'il soit visible sur le net ? Actuellement si je tape le nom du blog ou mon nom et blog, etc., je ne le trouve nulle part !

    Bien cordialement,

    RépondreSupprimer
  2. Bonjour Stéphane,

    Que de questions ! Je vais essayer de préciser.

    Dans la page "Argile, Bois, Pierre", vous allez aller dans le 1er texte :
    "1999 - Journées du Patrimoine". Vous sélectionnez cette zone et vous allez dans l'onglet Html.
    Vous écrivez à cet endroit :
    <a href="http://stephane-devillers.blogspot.com/p/argile-et-pierre.html name=patrimoine>1999 - Journées du Patrimoine</a>

    Ensuite vous remontez dans votre table des matières.
    Vous retrouvez la ligne d'appel de cette ancre, vous la sélectionnez et vous mettez :
    <a href=http://stephane-devillers.blogspot.com/p/argile-et-pierre.html#patrimoine>1999 - Journées du Patrimoine</a>.

    Pour votre référencement, votre blog est très récent, il faut un peu de temps. En attendant vous pouvez relire ceci
    Faire apparaître son blog sur les moteurs de recherche
    Ajouter des balises meta tags pour améliorer votre référencement
    et voir si des préconisations sont à ajouter chez vous.

    Cordialement

    RépondreSupprimer
  3. Merci beaucoup pour tout le travail fait et toutes ces précisions.
    Cela nous aide beaucoup.
    A bientôt.

    RépondreSupprimer
  4. Bonjour Nadji,

    Merci d'être repassée par ici pour déposer ce gentil message.
    Bien à vous.

    RépondreSupprimer
  5. Un grand merci, c'est absolument génial, une mine d'info, j'adore apprendre tout ça, j'ai découvert votre blog ce soir et j'y reviendrai c'est sûr!

    RépondreSupprimer
  6. Votre blog est excellent et riche. MERCI...Je reviendrais piocher.

    RépondreSupprimer
  7. Bonjour,
    Je ne trouve pas de réponse au problème suivant: Je souhaiterais créer une nouvelle page ou apparaisse directement une page d'un site extérieur. En l'occurence, il s'agirait d'un onglet " Don " et qui dirigerait directement vers la page " don " d'un site externe et existant déjà.
    Merci pour le tuyau.
    Eric

    RépondreSupprimer
  8. Bonjour SNSM,

    Une explication vous est fourni ici avec les nouvelles pages.
    Intégrer un menu à la suite des pages

    Il suffit de corriger le a href pour mettre en lien l'adresse du site.

    RépondreSupprimer
  9. Je viens de te poser une question concernant les liens, sur la page "Intégrer un menu à la suite des pages".
    L'article "utilisation des ancres" semblait répondre à ma question, seulement je ne trouve pas la fonction "ancre" dans la rédaction des pages du blog. L'onglet "associer" ne semble permettre qu'un lien vers une autre page ou un autre site. Quelle astuce proposes-tu pour faire un lien vers un autre mot de la même page ?

    Merci encore !

    RépondreSupprimer
  10. Bonjour Yohan,

    Il n'y a pas de fonction "ancre" dans Blogger, il faut la créer dans la page et lui faire un lien pour y arriver.
    C'est l'objet de cet article (que j'avais cru rendre plus simple, snif ;-) ainsi que de celui-çi publié auparavant :
    Insérer une ancre

    RépondreSupprimer
  11. Merci pour la réponse, et j'ai lu aussi celle que tu avais faite à Stéphane à ce sujet.
    Ton protocole semble assez précis mais je me casse la tête pour le faire, sans résultat pour le moment.
    Travailler dans le HTML reste quand même réservé aux initiés !

    RépondreSupprimer
  12. Bonjour Yohan,

    Je ne pense pas que cela soit réservé aux initiés : la preuve, je m'y suis mis ;-) mais cela demande beaucoup de temps surtout lorsque l'on part de rien, ce qui était mon cas.
    J'ai essayé de rendre les choses plus compréhensible, désolé, si c'est encore hard.

    RépondreSupprimer
  13. awesome blog, do you have twitter or facebook? i will bookmark this page thanks. lina holzbauer

    RépondreSupprimer
  14. Super blog !

    Petite question en passant : lorsqu'on utilise les ancres, est-il impératif que le lien renvoie à une nouvelle fenêtre ? N'est-il pas possible d'avoir une table des matière en tête de page qui renvoie à des infos en bas de page et qu'on utilise ces liens sans qu'une nouvelle fenêtre ne s'ouvre ?


    Merci d'avance ! Mille fois !

    RépondreSupprimer
  15. Bonjour Anne-So,

    Merci, c'est gentil.

    Oui bien sûr on peut rester sur la même page.
    Mais il faut prendre le soin de bien la référencer et la nommer même si c'est dans la même page.
    Car sinon, selon les navigateurs, cela peut ne pas marcher.

    RépondreSupprimer
  16. Bonjour,

    je vous remercie pour ces informations, pourtant j'ai toujours du mal à publier mettre des ancres qui renvoient à d'autres liens de la page

    http://nuvempreta.blogspot.com/p/filmes-por-categoria.html

    En fait, il y a plusieurs listes de films, et je voudrais qu'une liste avec les titres des catégories soit au début de la page, pour qu'on clique dessus afin d'accéder aux listes détaillées en bas. J'ai essayé avec le code que vous avez suggéré, mais je n'y arrive pas.

    Qu'est-ce que je peux faire ? Je vous remercie d'avance.

    RépondreSupprimer
  17. Re Bonjour
    Un petit "Blême" avec les ancres
    Sur une page complémentaire de mon blog : L'exposition" (http://alphagard-photo.blogspot.com/) j'ai implanté une ancre "haut"de page et le lien "qui va avec en bas de page. Jusque là tout est OK et ça marche.
    Grrrrr!
    Si par hasard j'ai besoin d'éditer cette page (changer une photo, corriger un "phot d'ortograf", modifier le HTML, une fois le message re-publié, le lien de renvoi de l'ancre ne marche plus quand je vérifie son fonctionnement en cliquant sur "haut de page" dans la page du blog (ça me renvoie a la page de modification du message dans le tableau de bord!
    Y aurais pas un "bug" quelque par par hasard?
    Merci!
    Pierre

    RépondreSupprimer
  18. Bonjour Pierre,
    J'aimerais qu'il y ait un problème. Mais j'ai peur qu'il ne vienne pas du code mais de Blogger.
    En effet, à chaque modification, il faut revoir le code et le corriger au besoin.
    C'est très frustrant.
    Merci d'être passé par là et de m'avoir fait connaître votre blog. Je vais essayer de m'améliorer en photo.

    RépondreSupprimer
  19. Merci
    C'est bien ce que je pensais car j'ai déjà employé moult fois ces "codes" dans du HTML sur des sites que j'ai créé "Hand Made" avec DW5
    C'est bien ce que je dis leur truc est un peu "bouse" faudrait qu'ils revoient un peu tout ça
    Merci et continuez, vous êtes dans mes favoris
    A+
    Pierre

    RépondreSupprimer
  20. Bonjour,
    Je réalise un blog familial prive avec accès réservé aux personnes ayant le lien.
    Mes pages sont très denses et j'aimerais les rendre plus lisibles et pour cela réaliser des sous chapitres ex:
    page histoire de la famille
    sous chapitres: 1.histoire de pierre et marie 2. histoire de Paul 3.
    pour cela l'ideal aurait été d'avoir une page principale avec le sommaire qui renvoie vers les pages sous chapitres. N'y arrivant pas j'ai essayé de créer des ancres mais ça ne marche pas. est-ce parce que mon blog est d'accès limité?
    Si c'est la raison quelle solution pour une débutante comme moi?
    Merci!
    Sophie

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      L'utilisation des ancres n'est pas aisée. C'est même assez déroutant car on perd tout à chaque modification. Vous risquez comme moi de patater pendant un moment avant de baisser les bras. Il vaut mieux, je pense, s'orienter différemment dès maintenant.
      Vous parlez de pages. De pages générées par le blog ou de pages statiques ?
      Il est difficile d'en parler comme cela sans voir.
      Vous pouvez éventuellement me lancer une invitation à l'adresse que vous trouverez sur l'onglet Contact de "Detoutetdureste". Je vous dirais ce que je pense qu'il est possible de faire dans mon domaine de compétence ;-)

      Supprimer
  21. Je teste les ancres dans tous les sens mais, comme précisé dans le dernier message de Waldorf, blogger modifie automatiquement les liens dès qu'une modification intervient, bref il semble que les ancres avec blogger cela ne fonctionne pas... snif...snif...

    RépondreSupprimer
  22. Merci pour la solution qui fonctionne parfaitement!!

    RépondreSupprimer
  23. PS pour le message merci pour la solution qui fonctionne parfaitement! :

    adresse du blog: 14matic.blogspot.fr

    RépondreSupprimer
  24. Rien compris,
    Ce n'est pas clair du tout
    quel est le code pour par exemple pointer le mot départ qui renvoie sur le mot fin
    Merci
    Jean louis

    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