[en-tête : HTML pour les pressés]


Nelson OUELLET
Professeur adjoint
Département d'histoire et de géographie
Université de Moncton


La création de listes

Les listes sont l'un des éléments les plus anciens du langage HTML. Elles sont aussi l'un des moyens les plus simples d'organiser nos informations sur une page Web. Cette section du guide présentera quatre types de listes : non-ordonnées (<ul>), ordonnées (<ol>), glossaire (<dl>) et emboîtées.

Listes non-ordonnées

Ce premier type de listes est produit grâce aux marqueurs <ul> et <li>. Il est souvent utilisé pour présenter une collection de sites Internet. Pour produire une liste non-ordonnée, vous avez seulement à suivre l'exemple suivant :


<ul>

<li><a href="http://www.umoncton.ca">Université de Moncton</a>
<li><a href="http://www8.umoncton.ca/umcm-noweb/HR/HI3010/3010.html">HI 3010 - L'histoire américaine par les chiffres</a>
<li><a href="ex01.html">Exemple 1</a>
<li><a href="http://www.yahoo.com">La page d'accueil de Yahoo!</a>
<li><a href="http://www.umoncton.ca/nohstgeo/HST/histoire.html">La page d'accueil du secteur Histoire</a>

</ul>

Cliquez ici pour voir le résultat.


Une liste non-ordonnée peut aussi servir à énumérer des items qui ne sont pas obligatoirement des sites Internet. Par exemple, pour faire ressortir des éléments importants, j'ai seulement à utiliser les marqueurs <ul> et <li> de la façon suivante :


Mes activités favorites sont :

<ul>

<li>La natation
<li>Le cinéma
<li>Les voyages
<li>Manger un spaghetti!!!
<li>La musique


</ul>

Cliquez ici pour voir le résultat.


Listes ordonnées

Les listes ordonnées sont produites grâce aux marqueurs <ol> et <li>. On utilise les listes ordonnées lorsque la séquence des éléments est importante. Par exemple, si je voulais classer "mes activités favorites" en ordre d'importance, la liste devrait ressembler à ceci :


Mes activités favorites sont :

<ol>

<li>Manger un spaghetti!!!
<li>Les voyages
<li>La musique
<li>Le cinéma
<li>La natation


</ol>

Cliquez ici pour voir le résultat.


Par défaut, les items seront numérotés, en commençant par le chiffre "1". Par contre, vous pouvez modifier la séquence de numérotation (grâce à l'attribut "start") et le type de la valeur produite par une liste ordonnée. Dans ce dernier cas, vous avez seulement à choisir entre les chiffres (romains ou arabes), les lettres, les majuscules ou les minuscules pour déterminer le mode de présentation de votre séquence. L'exemple suivant devrait vous permettre de mieux comprendre :


Mes activités favorites sont :

<ol start=5 type="i">

<li>Manger un spaghetti!!!
<li>Les voyages
<li>La musique
<li>Le cinéma
<li>La natation


</ol>

Cliquez ici pour voir le résultat.


Listes de type glossaire

Les listes de type glossaire sont celles qui permettent de construire un document en respectant le principe du dictionnaire (mot et sa définition). C'est très utile pour ceux et celles qui veulent maintenir un inventaire d'expressions ou de concepts propres à leur discipline ou à leurs domaines d'études. Pour produire une liste de type glossaire, on doit utiliser trois marqueurs différents (dl, dd, dt).



<dl>

<dt>Jim Crow
<dd>Expression utilisée aux États-Unis pour désigner 
l'ère de la ségrégation. De façon générale, 
la période couvre les années 1877 à 1964.

<dt>Reconstruction
<dd>Ce terme est utilisé pour désigner une période 
(1863-1877) caractérisée par ses nombreux bouleversements sociaux, 
politiques et économiques. L'Émancipation des esclaves fut au 
coeur de cette période de l'histoire américaine que certains 
ont qualifié de "révolutionnaire".


</dl>

Cliquez ici pour voir le résultat.


L'emboîtement des listes

Il est possible, et parfois intéssant, d'emboîter des listes à l'intérieur d'une même page Web. Comme tous les trucs qu'on peut exploiter avec HTML, il ne faut toutefois pas en abuser.


<ul>

<li>MES LISTES DE "TOP CINQ" :
<p>
<ul>
<li>Mes films préférés

<ul>
<li>Orange Mécanique
<li>Manhattan
<li>Until the End of the World
<li>Paris, Texas
<li>Un zoo la nuit
</ul>

</ul>
<p>
<ul>
<li>Mes mets préférés

<ul>
<li>Spaghetti aux tomates et ail
<li>Hot 'n Sour Soup (Peninsula)
<li>Corn Beef Sandwich (Schwartz's)
<li>Moules et frites
<li>Boeuf et brocoli
</ul>

</ul>

</ul>


Cliquez ici pour voir le résultat.


Responsable du site: Nelson Ouellet
Courrier électronique: nelson.ouellet@umoncton.ca