Les listes
Introduction
Comme dans un logiciel de traitement de texte, il existe deux types de liste :
les listes à puces ;
les listes chronologiques.
Les éditeurs web proposent par défaut les listes à puces et à numérotation. Certains proposent différents types de liste chronologique (voir plus bas).
Les niveaux
Les niveaux d'une liste s'appliquent par l’attribution d'un retrait.
Le retrait à gauche n'est possible qu'après avoir effectué un retrait à droite.
Vous pouvez effectuer autant de retraits que souhaité.
Liste à puces
La liste à puce permet de lister des éléments en les démarquant par une illustration et un retrait. L'illustration et la taille du retrait peuvent changer selon la feuille de style CSS de l'habillage du site.
- Première ligne
- Seconde ligne
- Troisième ligne
La liste à puces a des illustrations différentes pour trois niveaux, le quatrième reprenant l'illustration du troisième.
- Premier niveau
- Second niveau
- Troisième niveau
Quatrième niveau
Vous pouvez changer l'illustration d'une puce par l'attribution d'un style xhtml qui parfois peut s'appliquer directement par l'éditeur.
- Puce disque : style="list-style-type: disc;"
- Puce cercle : style="list-style-type: circle;"
- Puce carré : style="list-style-type: square;"
Une liste à puce est composée de deux balises imbriquées : ul qui représente le bloc de la liste, et li qui représente la puce.
Voici le code d'une liste à puce avec trois lignes au même niveau :<ul>
<li>Première ligne</li>
<li>Seconde ligne</li>
<li>Troisième ligne</li>
</ul>Lorsque un niveau (retrait) est ajouté, un nouveau bloc de liste (balise ul) s'imbrique dans celui du niveau précédent.
Voici le code d'une liste à puce avec trois lignes sur trois niveaux :<ul><li>Premier niveau
<ul><li>Second niveau
<ul><li>Troisième niveau</li></ul>
</li></ul>
</li></ul>
Liste chronologique
La liste chronologique permet de lister des éléments en les démarquant par une illustration (des chiffres par défaut) et un retrait. La police d'écriture de l'illustration et la taille du retrait peuvent changer selon la feuille de style CSS de l'habillage du site.
Première ligne
- Seconde ligne
- Troisième ligne
Vous pouvez changer l'illustration d'une liste chronologique par l'attribution d'un style xhtml qui parfois peut s'appliquer directement par l'éditeur.
Liste à chiffre romain en minuscule
style="list-style-type: lower-roman;
- Première ligne
- Seconde ligne
- Troisième ligne
Liste à chiffres romains en majuscule
style="list-style-type: upper-roman;"
- Première ligne
- Seconde ligne
- Troisième ligne
Liste à lettres de l'alphabet en minuscule
style="list-style-type: lower-alpha;"
- Première ligne
- Seconde ligne
- Troisième ligne
Liste à lettres de l'alphabet en majuscule
style="list-style-type: upper-alpha;"
- Première ligne
- Seconde ligne
- Troisième ligne
Liste à lettres de l'alphabet grec
style="list-style-type: lower-greek;"
- Première ligne
- Seconde ligne
- Troisième ligne
Une liste chronologique est composée de deux balises imbriquées : ul qui représente le bloc de la liste, et ol qui représente l'illustration.
Voici le code d'une liste chronologique avec trois lignes au même niveau :<ul>
<ol>Première ligne</ol>
<ol>Seconde ligne</ol>
<ol>Troisième ligne</ol>
</ul>Lorsque un niveau (retrait) est ajouté, un nouveau bloc de liste (balise ul) s'imbrique dans celui du niveau précédent.
Voici le code d'une liste chronologique avec trois lignes sur trois niveaux :<ul><ol>Premier niveau
<ul><ol>Second niveau
<ul><ol>Troisième niveau</ol></ul>
</ol></ul>
</ol></ul>