Les listes en HTML

Il existe 4 commandes pour créer des listes:

Ces commandes sont : UL, OL, MENU, DIR.

Quelques exemples :

REMARQUE : toutes les listes peuvent être imbriquées. Différents styles de liste peuvent être imbriqués entre eux.

Liste simple :

En général il s'agit de listes de paragraphes pouvant faire plusieurs lignes. Les paragraphes seront séparés par des 'bullet' ou par des carrés selon les niveau d'imbrication (toutes les listes peuvent avoir des sous listes).

Ce code : 

<ul>
  <li> One 
  <li> Two 
  <li> Three 
  <li> Four 
</ul>
Produira ce résultat :

Liste numérotée :

Identique aux listes simples, sauf que les paragraphes de la liste seront numérotés.

Ce code : 

<ol> 
  <li> One 
  <li> Two 
  <li> Three 
  <li> Four 
</ol>
Produira ce résultat :

  1. One
  2. Two
  3. Three
  4. Four

Listes de type MENU :

En général on utilise ce type de liste lorsque les paragraphes ne font qu'une ligne. Le résultat est plus compact que celui obtenu avec les listes simples

Remarque : l'exemple ci-dessous produit les mêmes résultats que celui pour les listes simples car les paragraphes ne font qu'une ligne.

Ce code : 

<menu> 
  <li> One 
  <li> Two 
  <li> Three 
  <li> Four 
</menu>
Produira ce résultat :

  • One
  • Two
  • Three
  • Four

    • Les listes de type DIR :

    Pour faire des listees dont les entrées sont des paragraphes très courts, moins de 20 caractères.

    Remarque :les listes de type DIR sont censées s'afficher en colunnes de 24 caractères. Cela ne fonctionne pas encore sous Xmosaic, mais marche sous MacMosaic.

    Ce code : 

    <dir> 
  <li> One 
  <li> Two 
  <li> Three 
  <li> Four 
</dir>
    Produira ce résultat :

  • One
  • Two
  • Three
  • Four

    • Pour faire des glossaires :

    Un glossaire (ou une liste de définitions) est une liste de paragraphes précédés d'un court titre. <DL> et </DL> servent à encadrer la liste.

    <DT> sert a préciser le titre qui précède un ou plusieurs paragraphes.

    <DD> spécifie les Définitions (paragraphes).

    Par exemple, ce code : 

    <DL> 
<DT> Titre 1
  <DD> Definition 1
  <DD> Definition 2
<DT> Titre 2
  <DD> Definition 1
  <DD> Definition 2
</DL>
    Produira ce résultat :

    Titre 1
    Definition 1
    Definition 2
    Titre 2
    Definition 1
    Definition 2
    Remarque : Les éléments <DT> et <DD> sont généralement associés en paires, bien que <DT> seul soit toléré (équivalent à <DT> suivi d'un paragraphe vide).

    Pour plus de renseignements, consultez la doc du CERN sur les listes: The CERN List Documentation.

    REMARQUE : Vous pouvez utiliser le menu File/View Source ou bien taper la touche 'd' pour voir le source de cette page.

    1994 - michel.buffa@essi.fr