Produit
Catégorie
Auteur
Référence
Prix
entre et
arrow Home » Tutoriaux » Les types de listes en html

Les types de listes en html

(X)HTML / CSS - 28 Aug 2005 - j0n3s
ou comment énumérer certains points...


Le langage HTML offre la possibilité de réaliser 3 types de listes : à puces, ordonées ou "glossaire". Nous allons étudier chacune d'entre elles...

1) Listes à puces

Ces lites sont ordonnées via des puces de formes géométriques : circulaires (pleines ou vides) ou carrées.

Le code HTML est le suivant :


Code
<ul>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ul>


Par défaut, les puces sont pleines et circulaires (disc). Pour définir un style de puce, il faut utiliser l'attribut type dans <ul> avec pour valeur :
  • disc : circulaires et pleines (défaut)

  • circle : circulaires et vides

  • square : carrées et pleines




Notez que <ul> et </ul> peuvent être remplacés par <menu> et </menu>.

2) Listes ordonées

Ce type de liste permet d'énumérer des éléments avec des chiffres ou letres par ordre alphabétique.

Le code HTML est le suivant :


Code
<ol>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ol>


Il existe 5 types de "puces" dans ce cas qui se définissent aussi via l'attribut type dans la balise <ol> :
  • 1 : liste de chiffres arabes (1,2,3...) (défaut)



  • i : liste de chiffres romains minuscules (i, ii, iii...)



  • I : liste de chiffres romains majuscules (I, II, III...)



  • a : liste de lettres minuscules (a, b, c...)



  • A : liste de lettres majuscules (A, B, C...)



A cela s'ajoute l'attribut start dans la balise <ol> qui permet de définir un chiffre à partir du quel commencer. Par exemple start="3" a été utilisé pour les exemples ci dessus.

3) Listes "Glossaire"

Les lites "glossaire" comme je les appelle permettent de définir un mot par exemple.

Le code HTML est le suivant :


Code
<dl>
<dt>Mot 1</dt>
<dd>Une définition du mot 1...</dd>
<dt>Mot 2</dt>
<dd>Une définition du mot 2...</dd>
<dd>sur plusieurs lignes !</dt>
</dl>




Aucun attribut particulier...
Précédent : FTP : les CHMODSuivant : Méthodes de formulaire


6.4 /10 (1135 votes)


Commentaires

Aucun commentaire !

Postez un commentaire !
Vous devez être inscrit(e) et connecté(e) pour ajouter un article !