Accueil Membres Forum Articles Download Sondages Outils Scriptland ProgBoards
Morbleu ! La démocratie française de 1848 à nos jours


login	bug	contact	RSS

\| Internet \|
		Créer son site web

\| Langages \|
		HTML
		JavaScript
		Langage C
		PHP
		QBasic
		Turbo Pascal

\| Programmation \|
		Algorithmie
		Maths appliquées
		Windows

\| Trucs & astuces \|
		Lexique
		Oeufs de Pâques (easter eggs)
		Registre et Windows

\| Téléchargements \|
		Flash
		Freeware
		JavaScript
		NASM
		PHP
		QBasic
		Turbo Pascal
		Visual Basic / VBScript

HTML - Les listes

Autre langage disponible pour cet article :

Rubrique : HTML
lundi 25 mars 2002 18:38

Voir les commentaires pour HTML - Les listes

Autres articles :

- HTML - Introduction à l'HTML
- HTML - Structure d'un document HTML
- HTML - Le texte
- HTML - Mise en forme sommaire du texte
- HTML - Les titres et sous-titres
- HTML - Les attributs
- HTML - Le texte préformaté
- HTML - Les commentaires
- HTML - Les entités de caractère
- HTML - Les liens
- HTML - Les images
- HTML - Les listes
- HTML - Tableaux
- HTML - Les cadres (FRAMES)
- HTML - Les formulaires
- HTML - Les méta-informations et le réferencement
- HTML - Formatage poussé du texte
- HTML - Les feuilles de style
- HTML - Les couleurs
- HTML - Les images réactives
- HTML - Le son
- HTML - Et le reste...
- HTML - Les objets
- HTML - Les effets de transitions avec Microsoft Internet Explorer

<< - >>

Liste à puces
Les listes ordonnées
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">disc</LI>)
circle (<LI type="circle">circle</LI>)
square (<LI type="square">square</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 :

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

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 :

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

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 :

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

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 chiffres arabes (<LI type="1">1 chiffres arabes</LI>)
i chiffres romains en minuscules (<LI type="i">i chiffres romains en minuscules</LI>)
I chiffres romains en majuscules (<LI type="I">I chiffres romains en majuscules</LI>)
a lettres en minuscules (<LI type="a">a lettres en minuscules</LI>)
A lettres en majuscules (<LI type="A">A 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 :

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 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

Voir les commentaires pour HTML - Les listes