Prog-Info > (X)HTML/CSS > Cours de HTML 4 > Les listes.

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 Pique Coeur Carreau 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>`	Fleurs Rose Tulipe Iris Plantes Caroube Combava 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>`	Fleurs Rose Tulipe Iris Plantes Caroube Combava 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>`	Développement EasyPHP Dev-C++ Crimson Editor 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>`	Rouge Vert Bleu