Listes

Par j0k3r_n0ir le 14 Mars 2003 à 06:52

 

1. Liste ordonnée
Une liste ordonnée s'obtient avec la commande <ol> qui permet d'avoir une liste numérotée qui s'incrémente automatiquement. La balise <ol> est définie avec <li> qui représente un item. La balise <lh> indique le titre de la liste.

Exemple d'une liste ordonnée avec 3 items :

Titre

1. item 1
   
2. item 2
   
3. item 3
   

Code :

<ol> <lh>Titre <li>item 1 <li>item 2 <li>item 3 </ol>

Les autres attributs pour la balise <ol> :
- type=a : Marqueurs en majuscules
- type=a : Marqueurs en minuscules
- type=I : Marqueurs en chiffres romains (majuscules)
- type=i : Marqueurs en chiffres romains (minuscules)
- type=1 : Marqueurs en nombres (choix par défaut)
- start=n : Valeur de départ du marqueur

Exemple d'une liste en chiffres romains (majuscules) démarrant au chiffre 2 :

2. item 1
   
3. item 2
   
4. item 3
   

Code :

<ol type=I start=2> <li>item 1 <li>item 2 <li>item 3 </ol>

2. Liste non ordonnée
Une liste non ordonnée s'obtient avec la commande <ul> qui permet d'avoir une liste, précédée d'une puce.La balise <ul> est définie avec <li> qui représente un item. La balise <lh>indique le titre de la liste.

Exemple d'une liste non ordonnée avec 3 items :

Titre

• item 1
  
• item 2
  
• item 3
  

Code :

<ul> <lh>Titre <li>item 1 <li>item 2 <li>item 3 </ul>

Les autres attributs pour la balise <ul> :
- compact : Spécifie une liste compacte
- type=disc : Puce en forme de disque plein (valable seulement sous netscape)
- type=circle : Puce en forme de disque vide (valable seulement sous netscape)
- type=square : Puce en forme de carré (valable seulement sous netscape)

Exemple d'une liste compacte, avec des puces en forme de disque vide (valable que sous netscape) :

• item 1
  
• item 2
  
• item 3
  

Code :

<ul compact type=circle> <li>item 1 <li>item 2 <li>item 3 </ul>

3. Liste menu
La balise <menu> permet d'avoir une liste menu. A noter que la balise <menu> n'a que l'attribut compact.

Exemple d'une liste menu avec 3 items :

item 1

item 2

item 3

Code :

<menu> <li>item 1 <li>item 2 <li>item 3 </menu>

4. Liste avec 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. A noter que la balise <dl> n'a que l'attribut compact.

Exemple d'une liste de définition avec 1 terme et 3 définitions de 3 termes :

Terme

def 1

def 2

def 3

Code :

<dl> <dt>Terme <dd>def 1 <dd>def 2 <dd>def 3 </dl>

5. Combiner les types de listes
Bien entendu, vous pouvez combiner plusieurs listes.

Exemple d'une liste combinant une liste ordonnée avec une liste de définition :

1. item 1
   

   
   

   Terme
   

   def 1
   

   
   

Code :

<ol type=I> <li>item 1 <dl> <dt>Terme <dd>def 1 </dl> </ol>

6. Créer vos propres puces
Deux solutions s'offrent à vous pour créer vos propres puces :
- Soit vous passez par l'attribut src="puce.gif" si, par exemple, le fichier graphique de vos puces personnalisées se nomme puces.gif, mais cet attribut est spécifique à I.Explorer.
- Soit vous remplacez l'attribut la balise <li> par la balise <img>, en définissant votre image comme un simple fichier gif.
Cette solution est la meilleure car elle est valable pour tous les navigateurs. Attention de faire un break <br> après chaque ligne.

Exemple d'une liste non ordonnée avec un fichier gif :

Personnalisez


vos puces !!

Code :

<ul> <img src="img/pucemini.gif" />Personnalisez <br> <img src="img/pucemini.gif" />vos puces !! </ul>

 

Billet précédent :
Mise en forme

Billet suivant :
Annuaire : Ressources HTML