Article avec tâble des matières

Vous désirez écrire un article ayant plusieurs chapitres.
Pour faciliter sa lecture vous désirez y ajouter une table des matières permettant, en cliquant sur un des items de la table, de se positionner sur la chapitre désiré.

Cette article va vous apporter une solution en utilisant un peu d’HTML.


Table des matières


Art-UpNotion de lien et d’ancre en HTML

En HTML un lien (Url) désigne une chaîne de caractères utilisée pour adresser les ressources d’internet (page d’un site web, document, etc.).

Exemple classique d’URL : un texte pointant sur une adresse web – texte : monsite – adresse : https://www.pbasoft.com = monsite

Ces Url peuvent également adresser un emplacement spécifique à l’intérieur d’une page web pour autant que l’on puisse identifier cet emplacement.
Cet emplacement doit être une balise HTML du genre <h1>, <p>, <hr /> etc. auquel nous lui assignerons un identifiant (ancre)


Art-UpBloc à utiliser pour rédiger l’article

Comme nous allons devoir passer en mode HTML pour ajouter quelques éléments le « Bloc Standard » convient parfaitement.

 


Art-UpDivision des chapitres et insertion des ancres

Pour diviser les chapitres on va utiliser une ligne horizontale. Ce qui sera bien pratique par la suite pour lui assigner une ancre.

En HTML, une ligne horizontale s’écrit avec la balise <hr />

Pour insérer nos balises <hr> et nos ancres on va passer en mode « HTML »
Remarque : l’insertion d’ancre via l’éditeur ne fonctionne pas sur les balise <hr /> des lignes horizontales.

Basculer l’éditeur en mode HTML en cliquant sur le bouton  (situer juste dessous l’éditeur à droite)
Art-Chap_02

Descendez dans votre texte jusqu’à la balise HTML <hr /> situé au-dessus de votre premier chapitre et ajoutez-lui un identifiant.

Exemple : <hr id="Insertion" />

Art-Chap_03

Répéter l’opération sur les autres balises situées justes au-dessus de vos chapitres.

Attention un identifiant doit toujours être unique !

Après avoir insérer toute vos ancres, repasser en mode « Visuel »
Art-Chap_04

 


Art-UpConstitution de la table des matières

Pour constituer notre table des matières on va utiliser un bloc « Liste ».

Chaque ligne correspondra à un des nos chapitres.
Art-Chap_05

Pour chaque ligne:

  1. Sélectionner la ligne.
  2. Cliquer sur le bouton d’insertion de lien.
  3. Ajouter l’identifiant du chapitre (inséré précédemment dans la balise <hr>) précédé du caractère #.
    Exemple : #Insertion

Art-UpConclusion

En jouant avec un peu d’HTML, on peut faciliter la lecture d’articles long.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *