Lien html vers un endroit précis d’une autre page

Le langage HTML

Le langage HTML est très simple mais tolère peu les erreurs.

Il est parfois nécessaire de s’y mettre, les éditeurs de pages ou articles, ne permettent pas certaines actions comme le lien vers un endroit précis d’une autre page.

Il faut créer une ancre et un lien vers cette ancre. Sur WordPress, on écrit l’article ou la page, puis on passe en mode HTML pour insérer les balises HTML.

Je ne sais pas si cet article va intéresser grand monde, désolé les amis… (Règle n°6 de Gibbs, https://bit.ly/3KtInWl), mais j’ai assez souvent besoin de cette notion d’ancre et à chaque fois je suis obligé de faire une recherche sur des sites où ce n’est pas forcément bien expliqué et le plus souvent je laisse tomber.

Alors la prochaine fois je n’aurai pas besoin de chercher ailleurs 😉.

Le point de départ du lien

Il est composé de l’URL de la page visée suivi du symbole # et du nom de l’ancre attaché au dièse.

En langage HTML, les noms d’ancres ne peuvent pas comporter d’espaces ni d’accents. Ils doivent être constitués de caractères alphanumériques et peuvent inclure des tirets. Ce n’est pas très gênant puisqu’au final ce nom n’apparaît pas en clair. Attention à la casse quand même.

La destination du lien

C’est une ancre quelque part dans une autre page.

L’ancre :

<div id=“nom2lancre”>…</div>

J’ai eu du mal avec les guillemets que WordPress voulait m’imposer, j’ai dû passer en mode HTML et mettre les codes correspondant &#8220; (ouvrant) et 8221(fermant )😩, pareil pour l’exemple :

Les 3 petits points, c’est juste pour vérifier que l’ancre a bien été créée on peut les enlever après, bien sûr.

Exemple

Le code HTML :

<a href=“https://humm.loverde.fr/?p=1066#Leibowitz” target=“_blank” rel=“noopener”>“Un quantique pour Leibowitz”</a>

Le résultat en mode visuel :

« Un quantique pour Leibowitz »

Insérer le code HTML du lien en mode HTML dans une page quelconque pour atteindre l’ancre Leibowitz de la page « la science-fiction, par quoi commencer » « Un quantique pour Leibowitz » définie auparavant.

Note

Habituellement je ne modifie jamais une page déjà écrite mais là ce n’est pas gênant car en ajoutant une ancre on ne modifie en rien cette page.

En écrivant cet article j’étais loin de me douter de la difficulté d’afficher du code HTML pour que mon texte ait la même apparence que dans mon éditeur de texte ! Je me souviens avoir déjà eu le même problème mais de l’eau a coulé sous les ponts depuis et c’était avant le réchauffement climatique.

Illustration

Bateaux ancrés à Saint Raphaël juillet 2023, vue depuis le Cœlacanthe (https://bit.ly/3qegxqn) où je vous conseille le poulpe grillé 😋 quand il est à la carte.

bit.ly/Christian_Loverde

Partager :

cloverde

Prof de physique dans une autre vie. L'informatique, les réseaux sociaux, la cuisine, la photo et les Beatles m'occupent un peu. Webmaster amateur.

Voir tous les articles de cloverde →

2 réflexions sur « Lien html vers un endroit précis d’une autre page »

  1. Il m’est arrivé autrefois d’utiliser le langage HTML quand je voulais absolument qu’aucune ligne ne soit sautée entre deux paragraphes… mais j’ai fini par me lasser de cette obligation et m’habituer à ces paragraphes de blog qui fonctionnent comme des chapitres!
    J’ai enseigné les conventions d’écriture des titres basiques ( normalement un titre ne se met pas entre guillemets mais soit se souligne soit se met en italiques et gras) mais il est impossible de les appliquer dans les titres d’articles ( du moins je n’y parviens pas dans le modèle de page que j’ai choisi)… alors j’ai abandonné exigences et langage HTML !!!

    1. Moi aussi je me contente de la mise en page imposée qui finalement convient la plupart du temps. Là j’ai eu une envie passagère en souvenir de mes périodes de formateur à la création de pages web, quand WordPress n’existait pas et qu’on faisait tout à la main

Laisser un commentaire

En savoir plus sur Humm !

Abonnez-vous pour poursuivre la lecture et avoir accès à l’ensemble des archives.

Continue reading