Programmez par plaisir! 31-07-2014
19:34
Prog-Info > (X)HTML/CSS > Cours de HTML 4 > Les listes. Sommaire

Les listes

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.


Les listes ordonnées

Intro
En HTML, une liste de base est un conteneur identifiant une liste et une balise du style de la liste. Tous les éléments de la liste utilisent la balise <li> alors que les différents types de listes ont leur propre balise conteneur. Une liste ordonnée est aussi appelée liste numérotée. En effet, lorsque le navigateur rencontre cette balise, il numérote chaque élément de la liste. (1, 2, 3, ...)
La balise <ol>
Toute liste ordonnée commence par la balise <ol> et se finit par </ol>. A l'intérieur, vous pouvez mettre un titre à la liste avec la balise <lh> et ensuite chaque élément de la liste utilisera la balise <li>. A noter qu'un saut de ligne est automatique avant et après la liste. Dans vos listes, vous pouvez utilisez des balises comme <em> </em> pour mettre un titre en italique par exemple.

Exemple :

Source Résultat
<ol>
    <lh><em>
Exemple de liste ordonnée</em></lh>
    <li>
Pique</li>
    <li>
Coeur</li>
    <li>
Carreau</li>
    <li>
Trèfle</li>
</ol>
    Exemple de liste ordonnée
  1. Pique
  2. Coeur
  3. Carreau
  4. Trèfle

Exemple d'imbriquation :

Source Résultat
<ol>
    <li>
Fleurs
    <ol>
        <li>
Rose</li>
        <li>
Tulipe</li>
        <li>
Iris</li>
    </ol></li>
    <li>
Plantes
    <ol>
        <li>
Caroube</li>
        <li>
Combava</li>
        <li>
Surelle</li>
    </ol></li>
</ol>
  1. Fleurs
    1. Rose
    2. Tulipe
    3. Iris
  2. Plantes
    1. Caroube
    2. Combava
    3. Surelle

Divers attributs de la balise <ol>
La balise <ol> comporte de nombreux attributs permettant de modifier l'apparence de vos listes.
compact : met la liste dans une forme plus compacte.
type="A" : numérotation en lettres majuscules A, B, C, ...
type="a" : numérotation en lettres minuscules a, b, c, ...
type="I" : numérotation en chiffres romains I, II, III, IV, ...
type="i" : numérotation en chiffres romains i, ii, iii, iv, ...
type="1" : numérotation par défaut 1, 2, 3, ...
start="n" : définit la valeur de départ du marqueur de la liste en cours.

Exemple :

Source Résultat
<ol type="I">
    <li>
Fleurs
    <ol type="A">
        <li>
Rose</li>
        <li>
Tulipe</li>
        <li>
Iris</li>
    </ol></li>
    <li>
Plantes
    <ol type="A">
        <li>
Caroube</li>
        <li>
Combava</li>
        <li>
Surelle</li>
    </ol></li>
</ol>
  1. Fleurs
    1. Rose
    2. Tulipe
    3. Iris
  2. Plantes
    1. Caroube
    2. Combava
    3. Surelle


Les listes non ordonnées

La balise <ul>
Les listes non ordonnées (ou à puces) utilisent les balises <ul> et </ul>. Elles ressemblent aux listes ordonnées puisque entre chaque élément, il y a un saut de ligne automatique et qu'il est possible d'y inclure à l'intérieur d'autres balises HTML. Les éléments de la liste ne sont pas repérés par une numérotation mais par des petites icônes qui peuvent varier suivant le navigateur web utilisé.

Exemple :

Source Résultat
<ul>
   <lh><em>
Exemple de liste non ordonnée</em></lh>
   <li>
Pique</li>
   <li>
Coeur</li>
   <li>
Carreau</li>
   <li>
Trèfle</li>
</ul>
    Exemple de liste non ordonnée
  • Pique
  • Coeur
  • Carreau
  • Trèfle

Divers attributs de la balise <ul>
La balise <ul> comporte certains attributs permettant de modifier l'apparence de vos listes. Voici les différents attributs que l'on peut utiliser :
type="square" : les icônes prennent la forme de carrés.
type="circle" : les icônes prennent la forme de cercles.
type="disc" : les icônes prennent la forme de disques.

Exemple :

Source Résultat
<ul type="square">
    <li>
Fleurs
    <ul type="circle">
        <li>
Rose</li>
        <li>
Tulipe</li>
        <li>
Iris</li>
    </ul></li>
    <li>
Plantes
    <ul type="circle">
        <li>
Caroube</li>
        <li>
Combava</li>
        <li>
Surelle</li>
    </ul></li>
</ul>
  • Fleurs
    • Rose
    • Tulipe
    • Iris
  • Plantes
    • Caroube
    • Combava
    • Surelle


Les listes menu

L'affichage par défaut des navigateurs pour ces listes menus est très similaires aux listes non ordonnées. Dans les futures versions du HTML, ces listes deviendront plus fonctionnelles.
C'est la balise <menu> qui permet de faire ce type de listes. Ces listes fournissent aussi un saut de ligne avant et après, et peuvent, bien sûr, inclure d'autres éléments HTML. L'élément ancre est utilisé à l'intérieur pour créer des liens à l'intérieur du document ou vers d'autres sites ou même vers des ressources.

Exemple :

Source Résultat
<menu>
    <lh><em>
Exemple de liste menu</em></lh>
    <li><a
href="http://www.google.fr/">Google</a></li>
    <li><a
href="http://fr.altavista.com/">Altavista</a></li>
    <li><a
href="http://www.voila.fr/">Voila</a></li>
    <li><a
href="http://www.lycos.fr/">Lycos</a></li>
</menu>
Exemple de liste menu
  • Google
  • Altavista
  • Voila
  • Lycos


  • Les listes répertoires

    L'élément <dir> permet de créer des menus répertoires. Il fonctionne presque comme <menu>. Il fournit une identification HTML de la section texte (utilité potentielle). Les listes répertoires affichent les mêmes paramètres par défaut que les listes non ordonnées. Le conteneur <dir> est conçu pour limiter les éléments à 24 caractères et les afficher en ligne. Cet élément n'est pas fait pour inclure d'autres éléments HTML, bien que cela marche!

    Exemple :

    Source Résultat
    <dir>
       <lh><em>
    Exemple de liste répertoire</em></lh>
       <li>
    Rouge</li>
       <li>
    Vert</li>
       <li>
    Jaune</li>
    </dir>
    Exemple de liste répertoire
  • Rouge
  • Vert
  • Bleu


  • Les listes avec définitions

    Elles ont le format d'un dictionnaire : un terme identifiable et un paragraphe de définitin qui est en retrait d'une ou deux tabulations. La balise <dl> fournit un saut de ligne au début et à la fin de la liste. A l'intérieur, la balise <dt> marque le terme et la balise <dd> marque le paragraphe. Il est préférable de faire tenir le terme sur une ligne! Un attribut facultatif compact existe pour la balise <dl> mais il n'est par forcément pris en compte par le navigateur. Cet attribut permet de mettre la liste sous une forme plus compacte (taille de la police).

    Exemple :

    Source Résultat
    <dl>
       <dt>
    Spam</dt>
       <dd>
    L'encombrement délibéré d'un forum de discussion ou un compte e-mail par l'envoi de messages non sollicités, telles les annonces à caractère publicitaire.</dd>
       <dt>
    Forum</dt>
       <dd>
    Service permettant l'échange et la discussion sur un thème donné : chaque utilisateur peut lire à tout moment les interventions de tous les autres et apporter sa propre contribution sous forme d'articles.</dd>
    </dl>
    Spam
    L'encombrement délibéré d'un forum de discussion ou un compte e-mail par l'envoi de messages non sollicités, telles les annonces à caractère publicitaire.
    Forum
    Service permettant l'échange et la discussion sur un thème donné : chaque utilisateur peut lire à tout moment les interventions de tous les autres et apporter sa propre contribution sous forme d'articles.


    Combiner les types de listes

    Le HTML supporte les sous-listes de type différents dans la même liste. Vous pouvez par exemple dans un document avoir besoin d'une liste numérotée qui inclut à l'intérieur de chaque élément une liste non ordonnée ou une liste définition.

    Exemple :

    Source Résultat

    <ol>
        <li>
    Développement
        <ul>
            <li>
    EasyPHP</li>
            <li>
    Dev-C++</li>
            <li>
    Crimson Editor</li>
        </ul></li>
        <li>
    Sécurité
        <ul>
            <li>
    Ad-Aware</li>
            <li>
    ZoneAlarm</li>
            <li>
    Kerio Personal FireWall</li>
        </ul></li>
    </ol>

    1. Développement
      • EasyPHP
      • Dev-C++
      • Crimson Editor
    2. Sécurité
      • Ad-Aware
      • ZoneAlarm
      • Kerio Personal FireWall


    Mise en forme manuelle

    Il est possible dans le langage HTML de créer des listes avec ses propres puces (des images)... Pour créer ce genre de listes, il faut utiliser les balises <ul> et </ul> pour délimiter la liste. A l'intérieur, au lieu d'utiliser les balises <li> et </li>, il faut simplement utiliser la syntaxe suivante pour chaque élément de la liste : <img src="icone.gif" align="top">Elément<br>. La balise <ul> permet le retrait des éléments de la liste, la balise <img> permet d'afficher la "puce" de la liste et la balise <br> permet le retour à la ligne.

    Exemple :

    Source Résultat

    <ol>
        <img
    src="RondRouge" align="top">Rouge<br>
        <img
    src="RondVert" align="top">Vert<br>
        <img
    src="RondBleu" align="top">Bleu<br>
    </ol>

    1. Rouge
    2. Vert
    3. Bleu


    Les liens Les images 
            réactives
    [Plan Plan] [A propos A Propos] [ 1427554 ]
    Copyright ©2002-2009 Prog-info Tous droits réservés.