SELFHTML

Listes

Page d'information: vue d'ensemble

vers le bas Définir des listes énumératives
vers le bas Définir des listes numérotées
vers le bas Définir des listes de définitions
vers le bas Définir une liste de menus ou de répertoires
vers le bas Propriétés HTML pour les listes
vers le bas Formater des listes avec les CSS
vers le bas Autres informations

 vers le bas 

HTML 2.0XHTML 1.0MSIE 1.0Netscape 1.0 Définir des listes énumératives

Des listes énumératives prennent tout leur sens par exemple pour représenter clairement les propriétés d'un produit ou les arguments pour une thèse. Dans une liste énumérative, tous les éléments de la liste sont marqués avec une puce (bullet).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
<h1>Liste de rimes importantes</h1>

<ul>
<li>L'exp�rience fait la science </li>
<li>L'amour, c'est question de chance</li>
<li>La robe de ma tante Hortense</li>
</ul>

</body>
</html>

Explication:

<ul> introduit une liste énumérative (ul = unordered list = liste non triée). Avec <li> commence un nouveau point dans la liste (li = list item = élément de liste). Le repère de fermeture</li> marque la fin de l'élément de la liste. Il est certes permis d'après le standard HTML d'omettre le repère de fermeture </li>, le faire est pourtant déconseillé. </ul> termine la liste.

Comment la puce sera représentée dépend du navigateur Web.

L'imbrication de listes est possible.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
<h1>Ici et l� sur le Web</h1>

<ul>
<li>Moteurs de recherche
  <ul>
   <li>Google</li>
   <li>Altavista</li>
   <li>Fireball</li>
 </ul>
</li>
<li>R�pertoires
  <ul>
   <li>Yahoo</li>
   <li>Tiscali.fr</li>
   <li>Chez.com</li>
 </ul>
</li>
<li>Autre chose</li>
<li>Encore autre chose</li>
</ul>

</body>
</html>

Explication:

Entre <li> et </li> une autre liste complète peut figurer. Même d'autres types de liste sont permis.

 vers le hautvers le bas 

HTML 2.0XHTML 1.0MSIE 1.0Netscape 1.0 Définir des listes numérotées

Les listes numérotées ont tout leur sens pour, par exemple, représenter de façon claire des actions à accomplir les une après les autres ou des suites rangées dans l'ordre. Dans une liste numérotée tous les éléments de la liste sont numérotés dans l'ordre.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
<h1>Liste de t�ches</h1>

<ol>
<li>passer voir Annette</li>
<li>passer voir Brigitte </li>
<li>passer voir Christine </li>
<!--etc... -->
</ol>

</body>
</html>

Explication:

<ol> introduit une liste numérotée (ol = ordered list = liste numérotée). Avec <li> commence un nouveau point de la liste (li = list item = élément de la liste). </li>termine l'élément de la liste. Il est certes permis d'après le standard HTML d'omettre le repère de fermeture </li>, le faire est pourtant déconseillé. </ol> termine la liste.

Attention:

L'imbrication de listes numérotées est lui aussi possible sans pourtant générer de numérotation continue.. Des hiérarchies automatiques de numérotation comme 1, 1.1, 1.1.1, ne sont pas possibles en HTML.

 vers le hautvers le bas 

HTML 2.0XHTML 1.0MSIE 1.0Netscape 1.0 Définir des listes de définitions

Les listes de définitions sont conçues pour des glossaires. Les glossaires comprennent une liste d'éléments. Les éléments d'un glossaire sont constitués par une expression à définir (par exemple un terme spécialisé) et la définition qui le concerne. .

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
<h1>Abr�viations concernant la transmission de donn&eacute;es</h1>

<dl>
<dt>AA</dt>
<dd>Auto Answer (Modem)</dd>
<dt>AARP</dt>
<dd>Appletalk Address Resolution Protocol</dd>
<dt>ACE</dt>
<dd>Advanced Computing Environment (constructeur)</dd>
<!-- etc. -->
</dl>

</body>
</html>

Explication:

<dl> introduit une liste de définitions (dl = definition list = liste de définitions).
<dt> introduit une expression à définir (dt = definition (list) term = terme dans la liste de définitions).
<dd> introduit la définition d'une expression (dd = definition (list) definition = définition dans la liste de définitions).
</dl> termine la liste. Les repères de fermeture </dt> et </dd> peuvent certes également être omis, pourtant le faire est déconseillé.

Attention:

L'imbrication de listes de définitions est également possible. Ainsi vous pouvez former des structures arborescentes dans le texte. Netscape utilise par exemple lors de la construction de son fichier de signets (fichier bookmark.htm dans le répertoire programme) des listes de définitions imbriquées pour gérer les signets de structure arborescente. Les listes "à l'intérieur" doivent alors être notées à l'intérieur de l'élément dd.

La suite d'éléments dt et dd à l'intérieur d'une liste dl n'est pas strictement réglementée. Plusieurs éléments dt- ou dd peuvent figurer à la suite.

 vers le hautvers le bas 

HTML 2.0XHTML 1.0en cours d'abandonMSIE 1.0Netscape 1.0 Définir une liste de menus ou de répertoires

Dans la pratique, les listes de menus et de répertoires sont à peine employées et sont entre-temps classées comme en cours d'abandon et doivent donc dans le futur disparaître du standard HTML. Elles ne sont soit plus représentées par les navigateurs actuels, soit représentées sous la même forme que des listes énumératives normales.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
<h1>R&eacute;pertoires et menus</h1>

<dir>
<li>/usr/home/</li>
<li>/usr/home/web/</li>
<li>/usr/home/web/data/</li>
</dir>

<menu>
<li>Fichier</li>
<li>&Eacute;diter</li>
<li>Affichage</li>
</menu>

</body>
</html>

Explication:

Vous introduisez une liste de répertoires avec <dir> et la terminez avec </dir> (dir = directory = répertoire). Vous introduisez une liste de menus avec<menu> et la terminez avec </menu>. Avec <li> commence dans ces deux types de liste un nouveau point de la liste (li = list item = élément de liste). Le repère de fermeture </li> à la fin d'un élément de la liste n'est pas absolument nécessaire mais recommandé.

Attention:

Contrairement aux listes énumératives, les listes de menus ne peuvent comprendre d'éléments créant des paragraphes entre <li> et </li> dans le texte du menu. Ils ne sont prévus que pour des listes d'éléments à une ligne.

 vers le hautvers le bas 

HTML 3.2XHTML 1.0en cours d'abandonMSIE 2.0Netscape 1.1 Propriétés HTML pour les listes

Il existe une série d'attributs qui modifient l'apparence de listes. Ainsi par exemple, les listes numérotées peuvent aussi l'être en chiffres romains ou alphabétiquement, et pour les listes énumératives, il est possible de fixer le type du signe. Cependant, tous ces attributs HTML ont été classés entre-temps comme en cours d'abandon et doivent disparaître à l'avenir du standard HTML. À la place, vous devez vers le bas formater les listes avec les feuilles de style CSS.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Propri�t�s HTML pour les listes</title>
</head>
<body>
<h1>Listes avec des attributs HTML</h1>

<h2>Listes �num�ratives</h2>

<ul type="square">
<li>l'exp�rience fait la science</li>
<li>l'amour, c'est question de chance</li>
<li>la robe de ma tante Hortense</li>
</ul>

<h2>Listes num�rot�es</h2>

<ol type="I">
<li value="10">passer voir Annette</li>
<li>passer voir Brigitte</li>
<li>passer voir Christine</li>
</ol>

<h2>Liste de d�finitions</h2>

<dl compact>
<dt>AA</dt>
<dd>Auto Answer (Modem)</dd>
<dt>AARP</dt>
<dd>Appletalk Address Resolution Protocol</dd>
<dt>ACE</dt>
<dd>Advanced Computing Environment (constructeur)</dd>
</dl>

</body>
</html>

Explication:

Pour des listes énumératives, vous pouvez déterminer le type de puces:
Avec <ul type="circle"> vous déterminez une puce ronde (circle = cercle).
Avec <ul type="square"> vous déterminez une puce carrée (square = carré).
Avec <ul type="disc"> vous déterminez une puce circulaire pleine (disc = disque).

Pour les listes numérotées vous pouvez déterminer le type de numérotation:
Avec <ol type="I"> vous pouvez numéroter les listes en chiffres romains avec I., II., III., IV. etc..
Avec <ol type="i"> Vous pouvez numéroter les listes en chiffres romains minuscules i., ii., iii., iv. etc..
Avec <ol type="A"> les éléments de liste seront numérotés avec A., B., C. etc.
Avec <ol type="a"> les éléments de liste seront numérotés avec a., b., c. etc. .

Avec start= dans le repère d'ouverture de <ol> vous pouvez fixer une valeur de départ pour la numérotation par exemple <ol start="7">. La numérotation commence alors à 7.

Avec value= dans le repère <li> d'une liste numérotée, vous pouvez fixer une nouvelle valeur de départ pour la numérotation par exemple sur <li value="15">. La numérotation continue alors à partir de 15.

Avec l'attribut compact dans le repère d'ouverture d'une liste de votre choix vous obtenez une représentation plus compacte. En vérité cela n'a jamais été interprété par les navigateurs si ce n'est de façon passagère.

 vers le hautvers le bas 

HTML 4.0XHTML 1.0MSIE 3.0Netscape 4.0 Formater des listes avec les CSS

Vous ne pouvez pas influer avec HTML, sur l'aspect que revêtira exactement une liste. Les navigateurs utilisent des formatages par défaut pour représenter des listes. Avec les Chapitre: vue d'ensemble feuilles de style CSS vous pouvez cependant formater comme vous le désirez des listes complètes avec leurs éléments. Pour utiliser des feuilles de style CSS, il vous faut d'abord savoir comment Chapitre: vue d'ensemble définir des formats CSS. Ensuite vous serez en mesure d'appliquer les propriétés CSS. En relation avec ce qui vient d'être décrit les données de feuilles de style suivantes sont aussi intéressantes:
Autre page d'information formatage de liste
Autre page d'information Formatage de police
Autre page d'information alignement et paragraphes
Autre page d'information espaces marges extérieures

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
<h1>Listes avec les CSS</h1>

<h2>liste �num�rative</h2>

<ul style="list-style-type:disk; color:red; font-weight:bold;">
<li>l'exp�rience fait la science</li>
<li>l'amour, c'est question de chance</li>
<li>La robe de ma tante Hortense</li>
</ul>

<h2>Liste num�rot�e</h2>

<ol style="list-style-type:upper-roman; font-weight:bold;">
<li style="color:blue">passer voir Annette</li>
<li style="color:maroon">passer voir Brigitte</li>
<li style="color:olive">passer voir Christine</li>
</ol>

<h2>Liste de d�finitions</h2>

<dl style="font-size:0.7em; font-family:Verdana,Arial,sans-serif">
<dt>AA</dt>
<dd>Auto Answer (Modem)</dd>
<dt>AARP</dt>
<dd>Appletalk Address Resolution Protocol</dd>
<dt>ACE</dt>
<dd>Advanced Computing Environment (constructeur)</dd>

</dl>

</body>
</html>

Explication:

Dans l'exemple et pour la liste énumérative, (<ul>...</ul>) il a été déterminé qu'un symbole circulaire plein soit affiché comme puce en gras et de couleur rouge. Pour une liste numérotée (<ol>...</ol>) a été déterminé que la numérotation se fasse en chiffres romains majuscules, et que ses éléments soient représentés en caractères gras. Les différents points de cette liste seront en même temps représentés dans des couleurs différentes. Pour une liste de définitions (<dl>...</dl>) une taille de police plus petite que la normale et une sorte de police différente ont été fixées.

Attention:

Netscape 4.x a encore quelques problèmes avec les feuilles de style CSS et n'affiche pas l'exemple ci-dessus tout à fait comme souhaité.

 vers le hautvers le bas 

Autres informations

Dans le Chapitre: vue d'ensemble sommaire de référence HTML vous trouverez des données précisant où les différents types de liste peuvent être mis, quels autres éléments ils peuvent contenir, quels attributs ils peuvent avoir et ce à quoi il faut veiller pour ces différents attributs:
Autre page d'information référence pour les éléments pour listes les énumératives (<ul>...</ul>)
Autre page d'information référence pour les attributs pour listes les énumératives (<ul>...</ul>)
Autre page d'information référence pour les éléments pour les listes numérotées (<ol>...</ol>)
Autre page d'information référence pour les attributs pour les listes numérotées (<ol>...</ol>)
Autre page d'information référence pour les éléments pour les listes de définitions (<dl>...</dl>)
Autre page d'information référence pour les attributs pour les listes de définitions (<dl>...</dl>)
Autre page d'information référence pour les éléments pour les listes de répertoires (<dir>...</dir>)
Autre page d'information référence pour les attributs pour les listes de répertoires (<dir>...</dir>)
Autre page d'information référence pour les éléments pour les listes de menus (<menu>...</menu>)
Autre page d'information référence pour les attributs pour les listes de menus (<menu>...</menu>)

 vers le haut
page suivante Autre page d'information Citations et adresses
page précédente Autre page d'information Contrôle du passage à la ligne (retour du chariot)
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@selfhtml.com.fr