Pour soigner et améliorer la présentation de nos pages web, nous allons voir comment créer en HTML des listes de présentation. On en rencontre sur la plupart des sites sous des formes variées, de la liste simple à la liste graphique la plus complexe. 

Il est souvent plus facile d'appréhender des données si elles sont présentées en liste plutôt que sous la forme d'un paragraphe traditionnel : le lecteur se repère aisément dans cette suite d'idées ou de renseignements ordonnés. La liste peut prendre n'importe quelle forme de la liste des courses, le plus souvent griffonnée sur un bout de papier, au dictionnaire où des listes imbriquées sont parfaitement mises en page. Le langage HTML est capable de créer différents types de liste pour répondre à des besoins différents.

Le conteneur <OL>, pour Ordered List, est utilisé pour la définition d'une liste ordonnée. On parle également de liste numérotée. A l'intérieur du conteneur, chaque élément de la liste est précédé du marqueur <LI>. Un saut de ligne est automatiquement inséré devant ce marqueur de manière à créer une liste. Il est donc inutile d'insérer manuellement le marqueur de fin de ligne, <BR>. Toutefois, en fonction du résultat attendu, il est possible d'insérer d'autres sauts de ligne de manière traditionnelle avec le marqueur <BR> ou <P> pour la fin de paragraphe. Comme vous pouvez le voir sur l'exemple précédent, une liste ordonnée est numérotée par défaut avec des chiffres arabes. Il est possible de modifier cette numérotation avec l'attribut TYPE. Cet attribut se place derrière le premier conteneur <OL> de cette manière <OL TYPE=valeur>. L'attribut TYPE peut prendre les valeurs <OL TYPE=A> pour un comptage en lettres majuscules, <OL TYPE=A> pour un comptage en lettres minuscules, <OL TYPE=I> pour un comptage en chiffres romains majuscules, <OL TYPE=I> pour un comptage en chiffres romains minuscules, <OL TYPE= 1 > pour un comptage en chiffres arabes (c'est le choix par défaut). Un autre attribut permet de démarrer le comptage d'une liste numérotée à partir d'un chiffre donné : l'attribut START, qui se code <OL START=chiffre de départ>. Il est ainsi aisé de reprendre une liste interrompue plus loin dans la page en conservant la même séquence de numérotation. Une liste, qu'elle soit ordonnée ou non, peut être imbriquée dans une autre liste. En combinant le type de numérotation et l'imbrication d'une ou plusieurs listes, il est possible d'obtenir des listes très élaborées qui restent toutefois lisibles.

Dans le bloc-notes, situé à gauche sur celle illustration, vous pouvez voir le code HTML de définition d'une liste numérotée. La liste est encadrée par le conteneur <OL> etchaque élément est précédé par le marqueur <LI>. A droite de l'illustration, le résultat est visible dans un navigateur. Nous obtenons bien une liste numérotée.	Nous avons complété l'exemple précédent afin d'obtenir une liste imbriquée à trois niveaux. Chacun des niveaux dispose de son propre type de numérotation.

Il est tout à fait possible de créer des listes non numérotées. Dans ce cas, on parle le plus souvent de liste àpuce, La puce, bullet en anglais, est un petit symbole typographique qui marque le début de chaque ligne de la liste. Ce symbole, habituellement un point noir, permet de repérer rapidement chaque élément de la liste et aide à la lecture. Le principe de création d'une liste à puce est similaire à celui des listes numérotées. Seule différence : il faut employer le conteneur <UL>, qui signifie Unordered List, à la place du conteneur <OL>. Là aussi, chaque élément de la liste doit être précédé du marqueur <LI>. Toutes les listes fonctionnant sur le même principe, il est possible d'imbriquer plusieurs listes à puce. Le symbole typographique servant de puce sera modifiée pour chacune des listes imbriquées, de manière à bien repérer visuellement la liste d'appartenance de chaque élément. L'attribut TYPE peut également être appliqué au conteneur <UL>. Il permet d'indiquer le type de puce à afficher. Outre le point noir, qui représente la puce par défaut et dont il n'est pas nécessaire de spécifier de type, il est possible d'utiliser un carré noir ou un cercle vide en utilisant respectivement les valeurs square et cercle. Notez que square affiche un carré plein alors que circle affiche un cercle vide.

une liste de définition resseùble à un glossaire et peut être employée pour créer des listes de type annuaire oudictionnaire. La liste est créée avec le conteneur <DL>. Chaque terme ou titre de définition est signalé par le marqueur <DT> et chaque définition est introduite par le marqueur <DD>. Dans cet exemple, chaque définition a été séparée du terme suivant par une ligne horizontale affichée avec le marqueur <HR>.

Une liste #7on numérotée est visible dans le navigateur internet Le code HTML correspondant a été rajouté à litre d'exemple. Le conteneur <OL> a simplement été remplacé par le conteneur <UL>.

Listes de définitions

Une liste de définitions affiche une série de termes suivis de leur définition, un peu à la manière d'un dictionnaire. La série de termes peut être une série de mots dont on va donner la définition, mais cela peut être aussi une série de phrases courtes. La définition suit immédiatement le terme et se trouve dans un paragraphe mis en légèrement en retrait. Certains auteurs appellent ce type de liste des listes de glossaire. Là encore, le même principe de création de liste est appliqué : un conteneur indique le type de la liste et un ou plusieurs marqueurs signalent chaque élément de la liste. Une liste de définition se crée avec le conteneur <DL> qui signifie Definition List. Chaque terme est introduit avec le marqueur <DT> et chaque définition est signalée par le marqueur <DD>. Comme pour les autres listes, il est possible d'employer d'autres marqueurs, et particulièrement des marqueurs de style émettant de mettre une partie de texte en gras, en italique, etc.

Pour créer une liste graphique, indiquez de manière explicite où se trouve le fichiercontenant l'image source.

Nous venons de voir les principales listes proposées en standard par la codification HTML. Ces listes permettent d'organiser facilement des documents en classant les idées ou les points importants selon une forme facilement lisible. Reconnaissons toutefois que ces possibilités manquent un peu de fantaisie. En effet, pour l'instant, nous disposons de trois sortes de listes modifiables à l'aide de deux ou trois paramètres seulement. Heureusement, afin de remédier à cette relative pauvreté, il est possible de créer ses propres listes en incluant des graphiques en guise de puces. En fait, la puce proposée en standard par HTML, que ce soit le point noir, le cercle ou le carré noir, est remplacé par une puce graphique. Là, plus de limites si ce n'est celles de votre imagination. Une courte navigation sur le web suffira à trouver des dizaines de puces différentes. Pour créer une liste graphique, il est conseillé d'utiliser le conteneur <UL> utilisé pour les listes non ordonnées. Ce conteneur permettra d'afficher les divers éléments de la liste légèrement en retrait. Ensuite, il faut créer une ligne pour chacun des éléments, sans oublier d'insérer un saut de ligne <BR> à la fin de chaque élément. Enfin, devant chaque élément, il faut indiquer l'image à utiliser en employant le marqueur <IMG SRC="nom du fichier graphique">. Généralement, afin d'assurer une certaine cohérence, le même graphique est utilisé pour toute la liste. Toutefois, l'utilisation de dessins différents peut donner un bon résultat. Essayez d'utiliser une puce graphique de tonne invariable, mais dont la couleur change à chaque ligne. Enfin, notez que vous pouvez employer des fichiers Gif animés de manière à obtenir un effet de clignotement des puces. Nous avons vu qu'il est possible d'imbriquer plusieurs listes entre elles. De la même manière, vous pouvez aussi imbriquer plusieurs types de listes entre elles afin de combiner, par exemple, une liste numérotée avec une liste à puce et une liste graphique. Il suffit de choisir le conteneur définissant la liste souhaitée et surtout de bien lui faire correspondre le conteneur de fin, celui précédé par le signe /, afin de ne pas perturber le format des listes suivantes. Signalons enfin qu'il existe d'autres types de listes qui n'apportent pas grand chose aux types vus plus haut, comme les listes de menus et les listes de répertoires. D'apparence similaire aux listes déjà décrites, elles mettent en retrait une liste d'éléments comme le font les listes ordonnées ou non ordonnées.