Les listes numérotées ou avec une image
La balise <ol>
Si vous avez lu les listes à puces, alors vous constaterez que le principe
est le même pour la balise <ol>.
Vous pouvez choisir la valeur de départ de votre liste pour reprendre une numérotation et changer le style comme les chiffres romain ou des lettres.
Liste numérotée avec titre
| Code | Résultat |
<ol>
<lh>Le titre de ma liste</lh>
<li>Mon texte 1</li>
<li>Mon texte 2</li>
<li>Mon texte 3</li>
</ol>
|
Le titre de ma liste- Mon texte 1
- Mon texte 2
- Mon texte 3
|
Personnalisation des numéros
Avec l'utilisation de l'attribut START vous pouvez décider la valeur de
départ de votre numérotation et type de changer le style. Rappel : utiliser de préférence la
mise en forme CSS.
| Code | Résultat |
<ol start="5">
<li>Mon texte 1</li>
<li>Mon texte 2</li>
<li>Mon texte 3</li>
</ol>
|
- Mon texte 1
- Mon texte 2
- Mon texte 3
|
Vous avez envie de changer de style de numérotation, c'est
possible avec l'attribut type qui vous permettra de définir un type de numérotation.
| Code | Résultat | Les styles |
<ol type="A">
<li>Mon texte 1</li>
<li>Mon texte 2</li>
<li>Mon texte 3</li>
</ol>
|
- Mon texte 1
- Mon texte 2
- Mon texte 3
|
- 1 : arabic-numbers 1, 2, 3, ...
- a : lower-alpha a, b, c, ...
- A : upper-alpha A, B, C, ...
- i : lower-roman i, ii, iii, ...
- I : upper-roman I, II, III, ...
|
En appliquant une numérotation lower-alpha démarrant à la 8éme position
| Code | Résultat |
<ol type="a" start="8">
<li>Mon texte 1</li>
<li>Mon texte 2</li>
<li>Mon texte 3</li>
</ol>
|
- Mon texte 1
- Mon texte 2
- Mon texte 3
|
Définir le style en CSS
Voici comment incorporer un style CSS pour vos puces, mais pour des
facilités de mise à jour de votre site, préférez une feuille de style externe ou définissez le
style (<style></style>) dans la tête (head) de votre document.(voir rubrique CSS)
| Code | Résultat |
<ol style="list-style-type:upper-roman;">
<li>Mon texte 1</li>
<li>Mon texte 2</li>
<li>Mon texte 3</li>
</ol>
|
- Mon texte 1
- Mon texte 2
- Mon texte 3
|
Remplacer la numérotation par une images
| Code | Résultat |
<ol style="list-style-image:url(images/fleche.png);">
<li>Mon texte 1</li>
<li>Mon texte 2</li>
<li>Mon texte 3</li>
</ol>
|
- Mon texte 1
- Mon texte 2
- Mon texte 3
|
|