HTML nous permet de disposer des collections d'objets sous une forme structurée appelée liste.
Les listes à puces sont utilisées lorsque l'ordre des éléments n'a pas d'importance. Chaque item est alors précédé d'une même puce. On utilise le conteneur <UL>...</UL>. et les marqueurs <LI>...</LI>.
Code HTML | Affichage |
Exemple de liste à
puces: <UL><LI>pomme<LI>orange</LI> <LI>banane </UL> |
Exemple de liste à puces:
|
Avec des carrés:<UL
type="square"> <LI>banane <LI>orange <LI>pomme </UL> |
Avec des carrés:
|
Avec des cercles: <UL
type="circle"> <LI>raisin <LI>tangerine <LI>kiwi </UL> |
Avec des cercles:
|
On peut aussi produire des listes avec une image quelconque. Nous le verrons dans une leçon ultérieure.
On peut aussi définir des listes dont les éléments sont numérotés à l'aide du conteneur <OL>...</OL>.
Code HTML | Affichage |
Exemple de liste
numérotée: <OL><LI>pomme<LI>orange</LI> <LI>banane </OL> |
Exemple de liste numérotée:
|
Avec des carrés:<OL
start="9"> <LI>banane <LI>orange <LI>pomme <LI value=15>cerise <LI>bleuet </OL> |
Avec des carrés:
|
En chiffres romains: <OL
type="I" start=10> <LI>César <LI>Marcus <LI>Calligula </OL> |
En chiffres romains:
|
Avec des lettres minuscules: <OL type=a> <LI>banane <LI>orange <LI>pomme </OL> |
Avec des lettres minuscules:
|
Les listes de définitions sont très utiles lorsqu'on désire présenter un glossaire. On se servira du conteneur <DL>...</DL> et des balises <DT> et <DD>.
Code HTML | Affichage |
<DL> <DT>pomme <DD>fruit du pommier <DT>banane</DT> <DD>fruit du bananier <DT>orange <DD>fruit de l'oranger </DL> |
|
Les listes peuvent facilement être imbriquées.
Code HTML | Affichage |
<DL> <DT>pomme<DD>fruit du pommier <DT>banane</DT> <DD>fruit du bananier <DT>orange<DD><OL> <LI>fruit de l'oranger <LI>couleur bien connue </OL></DL> |
|
Le chapitre 4 de votre manuel