CyberZoïde

Webzine de vulgarisation des sciences et techniques.

Informatique
Sciences
Projets

membre de

Developpez.com
 

IX. Listes d'items

Par Hugo ETIEVANT

  1. Introduction
  2. Liste simple non ordonnée
  3. Type de puce
  4. Liste ordonnée
  5. Type de numérotation
  6. Début de numérotation
  7. Titre de liste
  8. Liste de termes avec définitions
  9. Liste avec puces personnalisées
  10. Listes imbriquées
  11. Feuilles de styles spécifiques aux listes

Introduction

Les listes d'items sont énorméments utilisées sur le web au même titre que dans les documents électroniques ou manuscrits. Ils permettent d'énumérer des items en les numérotant ou non. Les listes sont pratiques dans le cadre de sommaires.

Liste simple non ordonnée

Une liste doit être encadrée par le conteneur UL et chaque item doit être introduit par la balise LI. Le conteneur provoque une tabulation.

Syntaxe :
<UL>
<LI>item n°1
<LI>item n°2
<LI>item n°3
</UL>

Exemple :

  • Rouge
  • Vert
  • Bleu

Type de puce

Par défaut, les puces d'une liste non ordonnée sont des disques pleins. On peut les modifier avec l'attribut TYPE qui peux prendre les valeurs : square (carré plein), circle (cercle), disc (rond plein).

Syntaxe :
<UL TYPE="square">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</UL>

Exemple :

  • Rouge
  • Vert
  • Bleu

Syntaxe :
<UL TYPE="circle">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</UL>

Exemple :

  • Rouge
  • Vert
  • Bleu

Liste ordonnée

Une liste ordonnée doit être encadrée par le conteneur OL et chaque item doit être introduit par la balise LI.

Syntaxe :
<OL>
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

  1. Rouge
  2. Vert
  3. Bleu

Type de numérotation

La numérotation d'une liste ordonnée est par défaut les chiffres arables. On peut en changer avec l'attribut TYPE qui peut prendre les valeurs suivantes :

ValeurDesciption
1chiffres arables
Ichiffres romains
ichiffres romains miniscules
Alettres de l'alphabet
alettres minuscules de l'alphabet

Syntaxe :
<OL TYPE="I">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

  1. Rouge
  2. Vert
  3. Bleu

Syntaxe :
<OL TYPE="i">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

  1. Rouge
  2. Vert
  3. Bleu

Syntaxe :
<OL TYPE="A">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

  1. Rouge
  2. Vert
  3. Bleu

Syntaxe :
<OL TYPE="a">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

  1. Rouge
  2. Vert
  3. Bleu

Début de la numérotation

La numérotation d'une liste ordonnée commence par défaut par le premier élément du type de la numérotation choisie. Mais on peut contraindre la numérotation à commender au ième élément grâce à l'attrbut START.

Syntaxe :
<OL START="8">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

  1. Rouge
  2. Vert
  3. Bleu

Attention ! La valeur de START doit être numérique (les chiffres romains ne sont pas interprétés).

Syntaxe :
<OL TYPE="I" START="8">
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

  1. Rouge
  2. Vert
  3. Bleu

Titre de liste

On peut ajouter un titre aux listes ordonnées comme aux listes non ordonnées avec la balise LH

Syntaxe :
<UL>
<LH>titre de la liste
<LI>item n°1
<LI>item n°2
<LI>item n°3
</UL>

Exemple :

    Les couleurs primaires
  • Rouge
  • Vert
  • Bleu

Syntaxe :
<OL>
<LH>titre de la liste
<LI>item n°1
<LI>item n°2
<LI>item n°3
</OL>

Exemple :

    Les couleurs primaires
  1. Rouge
  2. Vert
  3. Bleu

Liste de termes avec définitions

Une telle liste est encadrée par le conteneur DL et contient une liste de termes spcécifiés par la balise DT. Un terme ayant lui-même une liste de définitions chacune introduite par la balise DD.

Syntaxe :
<DL>
<DT>terme n°1
<DD>définition n°1
<DD>définition n°2
<DT>terme n°2
<DD>définition n°1
</DL>

Exemple :

Etoile
Objet célecte étudié par les astrophysiciens.
Danseur confirmé d'un ballet.
Liste
Ensemble d'éléments.

Liste non ordonnée avec puces personnalisées

Il est possible de remplacer la balise LI d'une liste non ordonnée par une image afin de personaliser la liste afin de lui donner un style plus coloré... Ne pas oublier d'ajouter une balise de saut de ligne BR.

Syntaxe :
<UL>
<IMG SRC="images/puce.gif">item n°1<BR>
<IMG SRC="images/puce.gif">item n°2<BR>
<IMG SRC="images/puce.gif">item n°3<BR>
</UL>

Exemple :

    Rouge
    Vert
    Bleu

Listes imbriquées

Il est possible d'imbriquer les listes entre elles afin d'avoir des listes de listes... pour créer, par exemple des menus détaillés.

Code :
<OL type="I">
<LI>Liste d'items</LI>
<OL type="1">
<LI>Liste ordonnée</LI>
<LI>Type de numérotation</LI>
<LI>Début de numérotation</LI>
</OL>
<LI>Liens hyper-texte</LI>
<OL type="1">
<LI>La balise de base </LI>
<LI>Les liens internes </LI>
<LI>Les info-bulles </LI>
<LI>Les e-mail </LI>
<LI>Les autres protocols </LI>
<UL type="disc">
<LI>FTP</LI>
<LI>Wais</LI>
<LI>Telnet</LI>
</UL>
<LI>Les cadres </LI>
</OL>
</OL>

Exemple :

  1. Liste d'items
    1. Liste ordonnée
    2. Type de numérotation
    3. Début de numérotation
  2. Liens hyper-texte
    1. La balise de base
    2. Les liens internes
    3. Les info-bulles
    4. Les e-mail
    5. Les autres protocols
      • FTP
      • Wais
      • Telnet
    6. Les cadres

Feuilles de styles spécifiques aux listes

Il existe des propriétés des feuilles de styles spécifiques aux listes.

AttributValeursDescription
displayblock | inline | list-item | noneManière dont sont appliqués les styles à la balise. Avec "block", ils s'applique jusqu'en fin de ligne (comme avec DIV). Avec "inligne" jusqu'au dernier caractère (comme avec SPAN). Avec "list-item" pour chacun des items.
white-spacenormal | pre | nowrapPermet l'affichage ou non des espaces surnuméraires. Par défaut, ne les affiche pas (contrairement à PRE).
list-style-typedisc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | noneSpécifie le type de numérotation et de puce.
list-style-imageurl(http://monsite.com/image.gif)Permet de personaliser ses puces avec une image qui sera commune à tous les items de la liste.
list-style-positioninside | outsideNéglige ou pas l'alinéa en cas de retour à la ligne dans un item.
list-style [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [ url() | none]Compilation des trois attributs précédents.