Website X5 pour tous

Rechercher

Aller au contenu

Textes longs: Insérer des signets et ancrages

Étape 3 > Textes

Création de points d'ancrage

Si vous devez absolument placer un texte très long dans une seule page, vous voudrez sûrement aider le lecteur à le parcourir plus facilement. Vous pouvez insérer des signets (ou points d'ancrage, anchors, en anglais) au début de certains paragraphes ou de certains chapitres, et vous pouvez placer dans votre texte des hyperliens qui permettront d'accéder à ces signets d'un simple clic de la souris. Voici comment procéder:

Dépendant de la longueur de votre texte, il serait aussi utile de placer à des endroits stratégiques un ou plusieurs liens , qui permettront à votre lecteur de revenir immédiatement au début du texte. Un tel lien devrait aussi être positionné à la toute fin de votre texte.

1 - Commençons donc par créer un signet qui identifie le début du texte. Ce signet sera placé sur la première ligne de votre texte. Vous devrez placer dans votre texte, comme dans l'exemple ci-contre, le code HTML <a name="haut" id="haut"</a> en toute première ligne du texte. Veuillez noter que la couleur des caractères présentée dans l'exemple est à titre indicatif seulement, afin de mieux voir le code. Elle n'a aucun effet sur le code lui-même.

La balise HTML
a name associe une fonction de signet (ou point d'ancrage) au libellé "haut". Vous pouvez utiliser le libellé ou les termes de votre choix.

2 - Il vous faut maintenant placer dans votre texte, aux endroits désirés, le code qui créera chacun des signets ou points d'ancrage requis. Ces signets seront plus tard définis comme étant le point de destination (ou point d'arrivée) des hyperliens placés ailleurs dans le texte (généralement au début). Vous pouvez placer autant de signets que vous le désirez, à la condition que chacun d'eux soit nommé différemment.

Plaçons le premier signet. Insérez le code suivant: <a name="signet_1" id="signet_1"</a> au début du chapitre ou du paragraphe désiré dans votre texte. Encore une fois, la couleur de la police utilisée dans l'exemple n'a aucun effet sur l'éxécution du code. Vous pouvez utiliser le libellé de votre choix, en respectant toutefois la condition décrite plus haut.

3- Nous procédons de la même manière pour chacun des signets installés dans le texte. Notez que dans l'exemple ci-contre, le libellé du deuxième signet installé se lit comme suit:
<a name="signet_2" id="signet_2"</a>.

4 - Nous allons maintenant créer les liens requis pour la navigation à l'intérieur du texte.
Choisissez le ou les mots qui serviront de lien (le point d'origine du lien) pour aller vers le
premier signet mettez en surbrillance et cliquez sur l'outil Insérer lien.

5 - Dans la fenêtre qui apparaît, choisissez l'option Fichier local ou ressource web

  • Choisissez l'option Fichier déjà présent sur Internet
  • Dans la boîte prévue à cet effet, tapez: #signet_1 (ou le libellé que vous aurez choisi d'utiliser à l'étape précédente)
  • (le signe #, ou dièse, est absolument requis. Il agit comme indicatif, au code HTML, pour signaler la référence à un signet. Ne l'omettez pas!)
  • Choisissez l'option Ouvrir dans la même fenêtre
  • Cliquez sur OK

6 - Répétez l'opération pour les autres signets.

7 - Portez une attention particulière au libellé de chacun de vos signets, qui doivent être tous différents. Dans notre exemple, le deuxième signet s'appelle signet_2. Nous aurons donc tapé #signet_2 pour identifier le lien.

8 - Nous allons maintenant assurer le retour vers le début du texte, en insérant les liens requis. Dans votre texte, sélectionnez les mots Haut de la page, mettez en surbrillance, cliquez sur l'outil Insérer lien.

9 - À titre de lien, utilisez cette fois-ci le libellé #haut, qui correspond au premier signet (ou balise d'ancrage) créé au début de ce tutoriel.

N.B.: La mention Haut de la page pourrait apparaître plusieurs fois dans votre texte. Afin de simplifier votre travail, copiez le lien que vous venez de créer et collez-le, dans votre texte, aux endroits désirés, ainsi qu'à la toute fin du document. Les attributs et les propriétés du lien seront conservés.

10 -Finalement, afin que vos signets fonctionnent correctement, vous devez activer le code HTML, dans l'objet Texte. Cliquez sur le bouton approprié, cliquez sur OK, testez votre travail, corrigez en cas d'erreur (le plus souvent, vous aurez omis le signe #, ou vous aurez mal othographié un lien).

Lorsque tout fonctionne,
téléchargez votre travail.

Points à considérer et une variante pour les signets multi-pages

  • Les liens textuels peuvent évidemment être remplacés par liens sous forme d'images.
  • Vous pouvez utilisez l'onglet Description, dans l'outil Insérer un lien, pour ajouter une info-bulle explicative sur vos liens.
  • Vous pouvez créer des signets pour un texte contenu dans un seul et même objet Texte, d'une seule et même page.
  • Il est également possible de créer des signets qui permettront la navigation entre des textes contenus dans plusieurs objets Textes, d'une seule et même page, pourvu que les libellés des signets soient tous différents. Vous pouvez même utiliser cette technique en combinant des objets Textes et des objets Tableaux, dans une même page.


Note: Vous pouvez voir le résultat final
ICI

Il est également possible de placer des signets et des ancrages pour des
pages multiples d'un même site ( un gros merci à Azazel,du forum Website, pour cette trouvaille).

Supposons un site qui contient deux pages.

  • Dans la page 2 du site, on place un objet texte et on y insère, où on veut, la ligne de code pour créer un point d'ancrage:

<a name="ancrage" id="ancrage"</a>

  • Dans la page 1, dans un objet texte, on crée un lien vers ce point d'ancrage:
  • on sélectionne le mot que l'on souhaite lier, on ouvre l'outil Lien, on choisit l'option Fichier local ou ressource web
  • On choisit l'option Fichier déjà présent sur Internet
  • On insère l'adresse coreespondant au nom de la page: http://www.monsite.com/page_2.html
  • et on ajoute le nom du point d'ancrage, créé précédemment, ( #ancrage ), ce qui donnera:

http://www.monsite.com/page_2.html#ancrage

Accueil | Étape 1 | Étape 2 | Étape 3 | Étape 4 | Étape 5 | Divers | Avancées | Liens | Contacts | Plan du site


Sous-menu


Revenir au contenu | Revenir au menu