Accueil > HTML > HTML – Les listes

HTML – Les listes

This entry is part 12 of 23 in the series HTML - Tutoriel
  1. Liste à puces
  2. Les listes ordonnées
  3. Les listes de définition

Une liste, c’est en quelques sortes une énummération. On distingue 3 types de listes, référencées
justement dans la liste ci-dessous :


  • Les listes à puces (comme celle-ci)

  • Les listes ordonnées

  • Les listes de définition


Liste à puces


Pour créer une liste à puces, on utilise la balise de type conteneur <UL>. Puis,
à l’intérieur de cette balise (entre <UL> et </UL>), on va disposer les différents
élements, à l’aide de la balise de type conteneur <LI> :

<UL>
<LI>Premier élement de la liste</LI>
<LI>Deuxième élement de la liste</LI>
<LI>Troisième élement de la liste</LI>
<LI>Quatrième élement de la liste</LI>
<LI>Cinquième élement de la liste</LI>
</UL>

Résultat :

  • Premier élement de la liste

  • Deuxième élement de la liste

  • Troisième élement de la liste

  • Quatrième élement de la liste

  • Cinquième élement de la liste


Dans ce contexte, la balise <LI> peut être utilisée avec l’attribut type. Cet attribut
spécifie le type de puce. Voici les valeurs qu’il peut avoir :

  • disc (<LI type=disc »><B>disc</B></LI>)

  • circle (<LI type= »circle »><B>circle</B></LI>)

  • square (<LI type= »square »><B>square</B></LI>)


Mais on peut aussi utiliser cet attribut dans la balise <UL>. Employé comme ceci, tout
les élements de la liste seront modifiés. Ainsi :

<UL type= »square »>
<LI>Premier élement de la liste</LI>
<LI>Deuxième élement de la liste</LI>
<LI>Troisième élement de la liste</LI>
<LI>Quatrième élement de la liste</LI>
<LI>Cinquième élement de la liste</LI>
</UL>

Résultat :

  • Premier élement de la liste

  • Deuxième élement de la liste

  • Troisième élement de la liste

  • Quatrième élement de la liste

  • Cinquième élement de la liste


Les listes ordonnées


Une liste ordonnée, c’est une liste où chaque élement est précédé d’un chiffre, qui généralement,
est croissant d’élement en élement.

Cette liste reprend la même architecture que la liste à puce. Seulement, au lieu d’utiliser la
balise <UL>, on utilise la balise <OL> :

<OL>
<LI>Premier élement de la liste</LI>
<LI>Deuxième élement de la liste</LI>
<LI>Troisième élement de la liste</LI>
<LI>Quatrième élement de la liste</LI>
<LI>Cinquième élement de la liste</LI>
</OL>

Résultat :

  1. Premier élement de la liste

  2. Deuxième élement de la liste

  3. Troisième élement de la liste

  4. Quatrième élement de la liste

  5. Cinquième élement de la liste


Si on veut faire commencer la liste à 2 plutôt qu’à 1, on utilisera l’attribut start,
dans la balise <OL>. Cette attribut spécifie le premier numéro à laquelle
commence la liste :

<OL start= »2″>
<LI>Premier élement de la liste</LI>
<LI>Deuxième élement de la liste</LI>
<LI>Troisième élement de la liste</LI>
<LI>Quatrième élement de la liste</LI>
<LI>Cinquième élement de la liste</LI>
</OL>

Résultat :

  1. Premier élement de la liste

  2. Deuxième élement de la liste

  3. Troisième élement de la liste

  4. Quatrième élement de la liste

  5. Cinquième élement de la liste


Quand à la balise <LI>, elle posséde dans ce contexte l’attribut value.
Il sert à spécifier un autre numéro que celui attribué par défaut :

<OL>
<LI value= »5″>Premier élement de la liste</LI>
<LI value= »4″>Deuxième élement de la liste</LI>
<LI value= »3″>Troisième élement de la liste</LI>
<LI value= »2″>Quatrième élement de la liste</LI>
<LI value= »1″>Cinquième élement de la liste</LI>
</OL>

Résultat :

  1. Premier élement de la liste

  2. Deuxième élement de la liste

  3. Troisième élement de la liste

  4. Quatrième élement de la liste

  5. Cinquième élement de la liste


Un troisième et dernier attribut est l’attribut type. Comme pour les listes à puces, il
permet de modifier le type du numéro qui précedera les élements. On peut bien sûr, l’employer
soit dans la balise <LI> pour modifier un seul élements, soit dans <OL> pour modifier
tout les élements de la liste. Il peut avoir 5 valeurs :

  1. 1 chiffres arabes (<LI type= »1″><B>1</B> chiffres arabes</LI>)

  2. i chiffres romains en minuscules (<LI type= »i »><B>i</B> chiffres romains en minuscules</LI>)

  3. I chiffres romains en majuscules (<LI type= »I »><B>I</B> chiffres romains en majuscules</LI>)

  4. a lettres en minuscules (<LI type= »a »><B>a</B> lettres en minuscules</LI>)

  5. A lettres en majuscules (<LI type= »A »><B>A</B> lettres en majuscules</LI>)


Dans <OL>, on aurait pu avoir :

<OL type= »A »>
<LI>Premier élement de la liste</LI>
<LI>Deuxième élement de la liste</LI>
<LI>Troisième élement de la liste</LI>
<LI>Quatrième élement de la liste</LI>
<LI>Cinquième élement de la liste</LI>
</OL>

Résultat :

  1. Premier élement de la liste

  2. Deuxième élement de la liste

  3. Troisième élement de la liste

  4. Quatrième élement de la liste

  5. Cinquième élement de la liste


Les listes de définition


Les listes de définition permettent de créer un glossaire. Il y a d’une part le mot, et d’autre
part la définition.

Contrairement aux listes à puces et aux listes ordonnées dont la structure est relativement semblable
si on fait abstraction des balises <UL> et <OL>, une liste de définition posséde une
architecture complétement différente.

Pour commencer, on emploiera la balise de type conteneur <DL>. Puis, dans cette liste
(entre <DL> et </UL>), on écrit les différentes définitions.

Une définition se compose de deux balises du type conteneur :

  • <DT> contient le terme à définir

  • <DD> contient la défnition du terme


Voici un exemple d’application :

<DL>
<DT>ASSEMBLEUR</DT>
<DD>Langage de programmation utilisant des formes mnémoniques et
non numériques pour représenter les instructions directement exécutables
par un ordinateur.</DD>
<DT>BASIC</DT>
<DD>Langage de programmation conçu pour l’utilisation interactive
de terminaux ou de micro-ordinateurs.</DD>
<DT>C</DT>
<DD>Langage de programmation utilisé pour l’écriture de systèmes
d’exploitation.</DD>
<DT>COBOL</DT>
<DD>Langage de programmation utilisé pour résoudre les problèmes
de gestion.</DD>
<DT>FORTRAN</DT>
<DD>Langage de programmation à usage scientifique</DD>
<DT>PASCAL</DT>
<DD>Langage de programmation adapté au traitement d’applications
scientifiques.</DD>
</DL>
Sources : <I>Le Petit Larousse</I>

Ce qui donne :




ASSEMBLEUR

Langage de programmation utilisant des formes mnémoniques et non numériques pour
représenter les instructions directement exécutables par un ordinateur.

BASIC

Langage de programmation conçu pour l’utilisation interactive de terminaux ou de
micro-ordinateurs.

C

Langage de programmation utilisé pour l’écriture de systèmes d’exploitation.

COBOL

Langage de programmation utilisé pour résoudre les problèmes de gestion.

FORTRAN

Langage de programmation à usage scientifique

PASCAL

Langage de programmation adapté au traitement d’applications scientifiques.


Sources : Le Petit Larousse

Series Navigation«HTML – Les imagesHTML – Tableaux»
Categories: HTML Tags:
  1. Pas encore de commentaire
  1. Pas encore de trackbacks