RETOUR SOMMAIRE

Listes ordonnées
Pour créer une liste ordonnée, on utilise la balise de type conteneur <ol>.
Puis, à l'intérieur de cette balise, on saisira chaque élément de la liste à l'aide de la balise de type conteneur <li>.(facultatif </li>)
Si on veut mettre un titre à une liste, on utilisera la balise <lh>
Exemple liste avec titre:
<ol>
<lh>Titre de la liste
<li>item 1
<li>item 2
<li>item 3
</ol>

Titre de la liste
1. item 1
2. item 2
3. item 3

Attributs de la balise <ol> :

• start=n : permet de choisir la valeur de départ de la liste (si on veut démarrer à 2 ou 3 par exemple).
• type=1 : numérotation en chiffres arabes (valeur par défaut si type non spécifié)
• type=i : chiffres romains en minuscules
• type=I : chiffres romains en majuscules
• type=a : lettres en minuscules
• type=A : lettres en majuscules

Note :
- Les attributs type peuvent être directement employés avec la balise <li> pour modifier un seul élément.
- La balise <li> peut avoir l'attribut value=n. n étant une valeur choisie et non une valeur incrémentée automatiquement (pour établir une liste décroissante par exemple).

Listes à puces
Même procédure, mais avec la balise <ul>.
La balise de titre utilisée dans ce cas est <Ih>
Attributs de la balise <ul> :

• type=disc
• type=circle
• type=square

Ce qui donne respectivement:

• disc
• circle
• square

Note :
- L'attribut type peut être employé directement avec la balise <li> pour modifier un seul élément.
- Si la balise <li> est employé directement sans la balise <ul>, on obtient la liste mais sans décalage par rapport à la marge:
<li>item 1
<li>item 2
<li>item 3

item 1

item 2

item 3

Créer ses puces
2 solutions:

Soit en utilisant l'attribut src="puce.gif" si, par exemple le fichier graphique de la puce personnalisée se nomme puce.gif, mais cet attribut est spécifique à I.Explorer.

Soit en remplaçant la balise <li> par la balise <img> et ajouter le marqueur <br> entre les lignes. Cette solution est meilleure car compatible avec tous les navigateurs.
Exemple:
<ul>
<img src="images/puce1.gif" border=0 width=16 height=16>Personnaliser<br>
<img src="images/puce1.gif">ses puces </ul>

Personnaliser
ses puces

Liste de définition
Une liste de termes et de définitions correspondantes s'obtient avec la balise <dl> qui est accompagnée des balises <dt> et <dd>.
<dt> représente le terme et <dd> la définition du terme.
Exemple:
<dl>
<dt>Terme 1
<dd>définition 1 du terme 1
<dd>définition 2 du terme 1
<dt>Terme 2
<dd>définition du terme 2
</dl>

Terme 1

définition 1 du terme 1

définition 1 du terme 2

Terme 2

définition du terme 2

Combiner les types de listes

RETOUR SOMMAIRE