Les listes ordonnées HTML

Les listes ordonnées HTML

  1. Objectifs

    • ِ Connaitre les listes ordonnées HTML.
  2. Les listes ordonnées HTML

    • Pour créer une liste dans laquelle la notion d’ordre a une importance, nous pouvons utiliser une liste ordonnée dont chaque item sera numéroté par défaut à l’aide d’entiers incrémentés de 1 à N, suivis d’un point puis du contenu de chaque item.
    • Une liste ordonnée doit commencer par l’élément <ol> (pour Ordered List) qui doit obligatoirement contenir au moins un élément <1i> qui lui-même renferme le contenu visible de chaque item.
    • Il faut donc que <ol> contienne autant d’éléments <1i> qu’il y a d’items dans la liste désirée.
    • L’élément <01> ne peut rien contenir d’autre, même pas de texte brut.
    • En plus des attributs globaux, cet élément possède l’attribut start dont la valeur est un nombre pour que la numérotation ne commence pas à 1, comme c’est le cas par défaut, mais à un nombre ou une lettre précisés.
    • Son attribut type permet de choisir le style de la numérotation ; nous avons les choix suivants :
      • type=”1″ : numérotation décimale : I, 2, 3…
      • type=”a” : numérotation alphabétique minuscule : a, b, c, d…
      • type=”A” : numérotation alphabétique majuscule : A, B, C, D…
      • type=”i”: numérotation en chiffres romains minuscules : i,ii,iii,iv…
      • type=”I” : numérotation en chiffres romains majuscules : I, II, III, IV…
    • La structure d’une liste ordonnée est par exemple la suivante :
      • <ol type="a" start="5" >
        <li>Listes ordonnées</li>
        <li>Listes non-ordonnées</li>
        <li>Listes imbriquées</li>
        <li>Listes de définition</li>
        <li>Le menu de listes</li></ol>

      Les listes ordonnées HTML

    • Les éléments <li> peuvent avoir un contenu très varié, qu’il s’agisse de texte, de titres et de tous les éléments de la catégorie Flow.



  3. Continuer la numérotation

    • Nous pouvons reprendre la numérotation là où nous nous sommes arrêtés. Pour cela, nous devons utiliser le paramètre start, et ce, directement dans la balise <ol>.
        <ol>
        <li>Listes ordonnées</li>
        <li>Listes non-ordonnées</li>
        </ol>
        <p>Coupure</p>
        <ol start="3">
        <li>Listes imbriquées</li>
        <li>Listes de définition</li>
        <li>Le menu de listes</li></ol>

      Les listes ordonnées HTML

  4. Inverser la numérotation

    • Pour inverser la numérotation d’une liste, il suffit d’ajouter le paramètre reversed au sein de la balise <ol>.
      • <ol reversed>
        <li>Listes ordonnées</li>
        <li>Listes non-ordonnées</li>
        <li>Listes imbriquées</li>
        <li>Listes de définition</li>
        <li>Le menu de listes</li></ol>

      Les listes ordonnées HTML

  5. Sélectionner manuellement le numéro de chaque élément de la liste

    • En spécifiant la valeur du paramètre value de chaque entrée <li>, nous pouvons définir nous-même la numérotation de la liste.
      • <ol>
        <li value="2">Listes ordonnées</li>
        <li value="1">Listes non-ordonnées</li>
        <li value="5">Listes imbriquées</li>
        <li value="3">Listes de définition</li>
        <li value="4">Le menu de listes</li></ol>

      Les listes ordonnées HTML

  6. Changer l’apparence de la numérotation d’une liste ordonnée

    • Nous allons réutiliser la propriété “list-style-type” avec l’élément HTML “ol” ainsi que de nouvelles valeurs que nous allons les voir de suite pour modifier les puces ordonnées.
    • Plusieurs styles existent pour les puces d’une liste ordonnées, voici une partie des valeurs possibles :
      • Chiffres décimaux : list-style-type: decimal;
      • Chiffres décimaux avec un zéro devant : list-style-type: decimal-leading-zero;
      • Chiffres romains en majuscules : list-style-type: upper-roman;
      • Chiffres romains en minuscules : list-style-type: lower-roman;
      • Alphabet en majuscules : list-style-type: upper-alpha;
      • Alphabet en minuscules : list-style-type: lower-alpha;
      • Chiffres grecs : list-style-type: lower-greek;

      Exemple:

        <!DOCTYPE html>
        <html>
          <head>
            <title>Exemple liste</title>
          </head>
          <body>
            <h2>Exemple de la propriété list-style-type </h2>
            <ol type="I">
              <li>Apéritifs</li>
              <li>Plat principal</li>
              <li>Salades</li>
        </ol>
        <ol type="I" start="5">
        <li>Boissons gazeuses</li>
              <li>Boissons chaudes</li>
              <li>Glaciers</li>
        
        
            </ol>
            <ol type="a">
              <li>Boissons gazeuses</li>
              <li>Boissons chaudes</li>
              <li>Glaciers</li>
            </ol>
          </body>
        </html>
  7. Exercice d’application

    • Reproduire la liste suivante:
    • Les listes ordonnées HTML




Abonnez vous à notre chaîne YouTube gratuitement