Chapitre suivantIndex des CoursChapitre prcedentChapitre 4

Les listes.

 

  1. Liste ordonnée
  2. Liste non ordonnée
  3. Liste menu
  4. Liste avec définition
  5. Combiner les types de listes
  6. Créer vos propres puces

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.

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

<OL> 
 Titre 
 <LI>item 1 
 <LI>item 2 
 <LI>item 3 
 </OL>

Titre

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

Les autres attributs pour la balise <OL>

  1. TYPE=A : Marqueurs en majuscules.
  2. TYPE=a : Marqueurs en minuscules.
  3. TYPE=I : Marqueurs en chiffres romains (majuscules).
  4. TYPE=i : Marqueurs en chiffres romains (minuscules).
  5. TYPE=1 : Marqueurs en nombres (choix par défaut).
  6. 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> 
 <LI>item 1 
 <LI>item 2 
 <LI>item 3 
 </OL> 
  1. item 1
  2. item 2
  3. item 3

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.

<UL> 
 <LH>Titre 
 <LI>item 1 
 <LI>item 2 
 <LI>item 3 
 </UL> 
  • item 1
  • item 2
  • item 3

Les autres attributs pour la balise <UL>

  1. COMPACT : Spécifie une liste compacte.
  2. TYPE=DISC : Puce en forme de disque plein (valable que sous netscape).
  3. TYPE=CIRCLE : Puce en forme de disque vide (valable que sous netscape).
  4. TYPE=SQUARE : Puce en forme de carré (valable que sous netscape).


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

<UL COMPACT TYPE=CIRCLE> 
 <LI>item 1 
 <LI>item 2 
 <LI>item 3 
 </UL> 
  • item 1
  • item 2
  • item 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.

<MENU> 
 <LI>item 1 
 <LI>item 2 
 <LI>item 3 
 </MENU> 
  • item 1
  • item 2
  • item 3
  •  

    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.

    <DL> 
     <DT>Terme 
     <DD>def 1 
     <DD>def 2 
     <DD>def 3 
     </DL> 
    Terme
    def 1
    def 2
    def3


    Combiner les types de listes.


    Vous pouvez bien entendu combiner plusieurs listes.

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

    <OL TYPE=I> 
     <LI>item 1 
     <DL> 
     <DT>Terme 
     <DD>def 1 
     </DL> 
     </OL>
    1. item 1
      Terme
      def 1



    Créer vos propres puces.

    Deux solutions s'offrent à vous pour créer vos propres puces
    1- Soit vous passez par l'attribut SRC="puces.gif" si par exemple le fichier graphique de vos puces personnalisées se nomme puces.gif, mais cet attribut est spécifique à I.Explorer.
    2- 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.

    <UL>
    <IMG SRC="gif/image1.gif" BORDER=0 WIDTH=16 HEIGHT=16>Personnalisez
    <BR>
    <IMG SRC="gif/image1.gif" BORDER=0 WIDTH=16 HEIGHT=16>vos puces !!
    </UL>

     

    Chapitre prcedentIndex des CoursChapitre suivant

    Révisé le :21-Jan-2009|©2009 www.technologuepro.com