LE GUIDE DU CODE HTML


HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,...

image
Source code HTML
image



Fotolia


LES LISTES ET ÉNUMÉRATIONS HTML

SOMMAIRE
  • <dl>, <dt> et <dd>
  • <lh>
  • <li>
  • <ol>
  • <ul>
  • Listes imbriquée (plusieurs niveaux)


  • Les "listes HTML" sont très pratiques pour énumérer des listes d'items ou d'éléments. Un exemple d'application le sommaire ci-dessus.

    <dl>...</dl>, <dt>...</dt> et <dd>...</dd> : Liste de définitions
  • </dl> : Est le conteneur de la liste de définitions
  • </dt> : Est le conteneur d'un terme à définir
  • </dd> : Est le conteneur de la définitions
  • Ex :
    <dl>
    <dt>Banane</dt>
    <dd>Fruit jaune alongé</dd>
    <dt>Pomme</dt>
    <dd>Fruit vert sphérique</dd>
    </dl>
    Résultat :
    Banane
    Fruit jaune alongé
    Pomme
    Fruit vert sphérique
    Compatibilité : IE Firefox
    Attribut : aucun
    Top of Page
    <lh>...</lh> : Titre d'une liste
    Ex :
    <lh>Titre liste</lh>
    <li>Item 1</li>
    <li>Item 2</li>
    Résultat :
    Titre liste
  • Item 1
  • Item 2
  • Compatibilité : IE Firefox
    Attribut : aucun
    Top of Page
    <li>...</li> : Item ou élément d'une liste
    Ex :
    <li>Item 1</li>
    <li>Item 2</li>
    Résultat :
  • Item 1
  • Item 2
  • type="..." :
  • Dans les listes ordonnées "<ol>" : spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules).
  • Dans les listes non-ordonnées "<ul>" : spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein).
  • Ex :
    <ol>
    <li type="1">Item 1 - En chiffres</li>
    <li type="a">Item 2 - En lettres minuscules</li>
    <li type="A">Item 3 - En lettres majuscules</li>
    <li type="i">Item 4 - Romains minuscules</li>
    <li type="I">Item 5 - Romains majuscules</li>
    </ol>
    Résultat :
    1. Item 1 - En chiffres
    2. Item 2 - En lettres minuscules
    3. Item 3 - En lettres majuscules
    4. Item 4 - Romains minuscules
    5. Item 5 - Romains majuscules
    Ex :
    <ul>
    <li type="disc">Item 1 - Disque plein</li>
    <li type="circle">Item 2 - Disque creux</li>
    <li type="square">Item 3 - Carré</li>
    </ul>
    Résultat :
    • Item 1 - Disque plein
    • Item 2 - Disque creux
    • Item 3 - Carré
    value="..." : Utilisé dans les listes ordonnées "<ol>". Permet d'imposer un numéro de départ
    Ex :
    <ol>
    <li value="15">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ol>
    Résultat :
    1. Item 1
    2. Item 2
    3. Item 3
    Compatibilité : IE Firefox
    Top of Page
    <ol>...</ol> : Listes ordonnées
    Ex :
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol>
    Résultat :
  • Item 1
  • Item 2
  • type="..." : Spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules).
    Ex :
    <ol type="1">
    <li>Item 1 - En chiffres</li>
    <li>Item 2</li>
    </ol>
    Résultat :
    1. Item 1 - En chiffres
    2. Item 2
    Ex :
    <ol type="a">
    <li>Item 1 - En minuscules</li>
    <li>Item 2</li>
    </ol>
    Résultat :
    1. Item 1 - En minuscules
    2. Item 2
    Ex :
    <ol type="A">
    <li>Item 1 - En majuscules</li>
    <li>Item 2</li>
    </ol>
    Résultat :
    1. Item 1 - En majuscules
    2. Item 2
    Ex :
    <ol type="i">
    <li>Item 1 - En romain minuscule</li>
    <li>Item 2</li>
    </ol>
    Résultat :
    1. Item 1 - En romain minuscule
    2. Item 2
    Ex :
    <ol type="I">
    <li>Item 1 - En romain majuscule</li>
    <li>Item 2</li>
    </ol>
    Résultat :
    1. Item 1 - En romain majuscule
    2. Item 2
    value="..." : Spécifie le numéro de départ de l'énumération
    Ex :
    <ol value="15">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ol>
    Résultat :
    1. Item 1
    2. Item 2
    3. Item 3
    Compatibilité : IE Firefox
    Top of Page
    <ul>...</ul> : Listes non ordonnées
    Ex :
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>
    Résultat :
  • Item 1
  • Item 2
  • img src="..." : Permet de remplacer les puces standards par celles que vous aurez choisi.
    Ex :
    <ul>
    <img src="images/puce.gif">Item 1<br>
    <img src="images/puce.gif">Item 2<br>
    <img src="images/puce.gif">Item 3<br>
    </ul>
    Résultat :
      Item 1
      Item 2
      Item 3
    type="..." : Spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein).
    Ex :
    <ul type="disc">
    <lh>Disque plein</lh>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>
    Résultat :
      Disque plein
    • Item 1
    • Item 2
    Ex :
    <ul type="circle">
    <lh>Disque creux</lh>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>
    Résultat :
      Disque creux
    • Item 1
    • Item 2
    Ex :
    <ul type="square">
    <lh>carré</lh>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>
    Résultat :
      Carré
    • Item 1
    • Item 2
    Compatibilité : IE Firefox
    Top of Page
    Listes imbriquées ou à plusieurs niveaux : Vous pouvez concevoir des listes à plusieurs niveaux et même mélanger les types de listes. Voyez les exemples ci-dessous.
    Premier exemple : Voyez le résultat avec 3 niveaux de listes à puces. Remarquez le changement de type de puce (automatiquement) à chaque niveau de l'arborescence. Cet exemple étant devenu plus complexe, il est bon d'indenter les lignes de code afin d'avoir une bonne visualisation des balises ouvertes et fermées, cela évite bien des erreurs.
    Ex :
    <ul>
       <li>Item 1</li>
          <ul>
             <li>Item 1.1</li>
                <ul>
                   <li>Item 1.1.1</li>
                   <li>Item 1.1.2</li>
                </ul>	 
             <li>Item 1.2</li>
          </ul>	 
       <li>Item 2</li>
          <ul>
             <li>Item 2.1</li>
             <li>Item 2.2</li>
          </ul>	 
    </ul>
    Résultat :
    • Item 1
      • Item 1.1
        • Item 1.1.1
        • Item 1.1.2
      • Item 1.2
    • Item 2
      • Item 2.1
      • Item 2.2
    Deuxième exemple : Ici les listes à puces (non ordonnées) et listes ordonnées ont été alternées.
    Ex :
    <ul>
       <li>Item 1</li>
          <ol>
             <li>Item 1.1</li>
                <ul>
                   <li>Item 1.1.1</li>
                   <li>Item 1.1.2</li>
                </ul>	 
             <li>Item 1.2</li>
          </ol>	 
       <li>Item 2</li>
          <ol type="A">
             <li>Item 2.1</li>
             <li>Item 2.2</li>
          </ol>	 
    </ul>
    Résultat :
    • Item 1
      1. Item 1.1
        • Item 1.1.1
        • Item 1.1.2
      2. Item 1.2
    • Item 2
      1. Item 2.1
      2. Item 2.2
    Compatibilité : IE Firefox
    Top of Page
    image

    image
    Accueil - Code HTML - Littératures - Liens utils - Référencés par... - Contact - Plan du site
    image
      © Copyright 2007 ;© VDC
      Tout droits réservés
      Date de création : 26/12/2007
      Dernière mise à jour : 09/02/2016
         image