HTML - Listes

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
<ol>
<lh>Titre</lh>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</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 :

<ol type=I start=2>

  • item 1
  • item 2
  • item 3
  • </ol>

    <ol type=I start=2>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </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
    <ul>
    <lh>Titre</lh>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </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) :

    <ul compact type=circle>

  • item 1
  • item 2
  • item 3
  • </ul>

    <ul compact type=circle>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </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
  • <menu>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </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
    <dl>
    <dt>Terme</dt>
    <dd>def 1</dd>
    <dd>def 2</dd>
    <dd>def 3</dd>
    </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 :

    <ol type=I>

  • item 1
  • Terme
    def 1

    </ol>

    <ol type=I>
    <li>item 1</li>
    <dl>
    <dt>Terme</dt>
    <dd>def 1</dd>
    </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 !!
    <ul>
    <img src="img/pucemini.gif" />Personnalisez
    <br>
    <img src="img/pucemini.gif" />vos puces !!
    </ul>