SELFHTML/Aides à la navigation HTML/XHTML Éléments pour structurer le texte| SELFHTML/Aides à la navigation HTML/XHTML Éléments pour structurer le texte |
Définir des listes énumérativesDes 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).
<!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>
|
<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.
<!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>
|
Entre <li> et </li> une autre liste complète peut figurer. Même d'autres types de liste sont permis.
 
|
Définir des listes numérotéesLes 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.
<!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>
|
<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.
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.
|
|
Définir des listes de définitionsLes 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. .
<!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é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>
|
<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é.
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.
|
|
Définir une liste de menus ou de répertoiresDans 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.
<!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é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>Éditer</li>
<li>Affichage</li>
</menu>
</body>
</html>
|
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é.
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.
|
|
Propriétés HTML pour les listesIl 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 formater les listes avec les feuilles de style CSS.
<!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>
|
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.
|
|
Formater des listes avec les CSSVous 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 
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 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:
formatage de liste
Formatage de police
alignement et paragraphes
espaces marges extérieures
<!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>
|
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.
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é.
|
|
Dans le 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:
référence pour les éléments pour listes les énumératives (<ul>...</ul>)
référence pour les attributs pour listes les énumératives (<ul>...</ul>)
référence pour les éléments pour les listes numérotées (<ol>...</ol>)
référence pour les attributs pour les listes numérotées (<ol>...</ol>)
référence pour les éléments pour les listes de définitions (<dl>...</dl>)
référence pour les attributs pour les listes de définitions (<dl>...</dl>)
référence pour les éléments pour les listes de répertoires (<dir>...</dir>)
référence pour les attributs pour les listes de répertoires (<dir>...</dir>)
référence pour les éléments pour les listes de menus (<menu>...</menu>)
référence pour les attributs pour les listes de menus (<menu>...</menu>)
|
| |
 |
Citations et adresses
|
 |
Contrôle du passage à la ligne (retour du chariot)
|
| SELFHTML/Aides à la navigation HTML/XHTML Éléments pour structurer le texte |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
