Chronique familiale




La chronique familiale pas à pas

Les notes de bas de page

 

 Exemple


Voici l'histoire de tonton Jules 1, un fieffé coquin (Un clic sur le numéro de la note vous envoie vers celle-ci en bas de page)

et celle de tata Marcelle 2, une bien brave femme.

 

 Le principe


Afin de se déplacer dans une page HTML d'un point à un autre de celle-ci, il faut dans un premier temps créer une ancre ↗3 (qui sera la "cible"), puis créer un lien ↗ qui en cliquant dessus permettra d'aboutir à cette ancre.

 

 Créer une note et le lien


 Créer la note

Voici donc une ancre avec la syntaxe classique : <span id="nom_de_ancre">texte libre</span>

Nous allons déroger à la règle qui veut qu'on n'utilise pas la balise <a>, destinée à créer un lien, pour créer une ancre. En effet dans le cas présent les ancres serviront aussi de liens.

Reprenons la note qui nous a servi d'exemple :

1. Né en 1923 à Trifouillis-les-Oies.


En voici la syntaxe :

1. <a id="note_1" href="#texte_1">↑</a> Né en 1923 à Trifouillis-les-Oies.


Et le détail :

1. est du texte qui sert simplement à numéroter la note.

Ici c'est la flèche (qu'on obtient avec le code clavier Alt+24) qui va servir à la fois d'ancre avec l'attribut id et de lien cliquable (pour revenir vers le texte de départ) avec l'attribut href.

note_1 est le nom que j'ai donné à l'ancre affectée à la note.

texte_1 est le nom que j'ai donné à l'ancre affectée au texte de départ. Ne pas oublier le # dans l'adresse !

Né en 1923 à Trifouillis-les-Oies. est le texte de la note.


 Créer le lien vers la note

Nous avons appris à mettre des nombres en exposant ↗, ça va nous être utile ici.

Reprenons là aussi l'exemple du haut de la page :

Voici l'histoire de tonton Jules1

En voici la syntaxe :

Voici l'histoire de tonton Jules&#8239;<a id="texte_1" href="#note_1"><sup>1</sup></a>

&#8239; est le code ISO pour une espace fine insécable qui permet qu'en cas de retour à la ligne l'exposant ne soit pas séparé du texte.

texte_1 est le nom de l'ancre dans le corps de la page.

note_1 est comme nous l'avons vu plus haut le nom de l'ancre dans les notes.

<sup>...</sup> est la balise qui permet de mettre le numéro de la note en exposant.

Ici (comme précédemment la flèche) c'est le chiffre 1 en exposant qui sert à la fois d'ancre et de lien cliquable pour accéder à la note.

 

 Un petit coup de pouce


Il est tout à fait inutile de récrire à chaque fois le code. Aussi ceux qui voudraient l'utiliser n'ont qu'à copier ceux-ci :

- dans le texte : &#8239;<a id="texte_1" href="#note_1"><sup>1</sup></a>

- dans la note : 1. <a id="note_1" href="#texte_1">↑</a>

et les recoller à l'endroit ad hoc. Il suffit ensuite de remplacer les six 1 par le numéro de la note.

 

 Quelques améliorations


J'ai pour ma part amélioré un peu la présentation, mais bien entendu cela n'a rien d'obligatoire :


- Je vous en avais parlé dans le paragraphe sur les exposants, ceux-ci peuvent augmenter l'interligne d'un texte.

Aussi j'ajoute vertical-align:top dans le code ce qui permet d'aligner le haut de l'exposant sur le haut d'une majuscule et donc ne modifie pas l'interligne. Comme ceci :

TONTON JULES&#8239;<a id="texte_1" href="#note_1"><sup style="vertical-align:top">1</sup></a>

Pour ce résultat : TONTON JULES1


- Si le début de la note (la flèche) sert d'ancre, comme dans les exemples ci-dessus, lors d'un clic vers cette note le navigateur va vous positionner juste au dessus de la première ligne de celle-ci. Faites le test, cliquez sur le numéro de la note :

Renvoi vers une note 4

J'ai donc "déplacé" l'ancre avec cette syntaxe :

<span id="note_5">&nbsp;</span>  Je "déplace" l'ancre et je mets un caractère "vide" (&nbsp;) dans la balise

<br>  Je vais à la ligne

5. <a href="#texte_5">↑</a>  Je mettrai ici le texte de la note

Cliquez pour voir le résultat : note5


- La flèche à la taille "normale" peut paraître un peu riquiqui pour cliquer dessus 6, aussi je l'agrandis un peu avec la syntaxe suivante :

5. <a href="#texte_5"><span style="font-size:1.3em">↑</span></a>

Taille normale dans les notes :

Version "agrandie" :

 

 Notes

 
1. Né en 1923 à Trifouillis-les-Oies. (un clic sur la flèche verticale vous renvoie au texte de départ.)
 
2. Née en 1928 à Pétaouchnock.
 
3. N'hésitez pas à cliquer sur ce lien et le suivant si vous avez oublié comment créer une ancre et un lien vers celle-ci.

4. La note est collée tout en haut de l'écran, ce n'est pas très élégant.
 
5. Il y a bien une ligne vide entre le haut de l'écran et la note.
 
6. Encore qu'après vérification, il s'avère qu'elle est un tantinet plus grande que celles des notes de Wikipedia dont je me suis inspiré.



───── oOo ─────


Index des pages