Les listes
Les listes HTML
Définition
Les listes permettent de faire des énumérations d’éléments. Il en existe deux sortes : listes ordonnées et listes non ordonnées. Elles permettent d'apporter
de l'ordre et de la clareté dans les documents
Les listes non ordonnées
Elle permettent de lister un ensemble d'éléments sans hiérarchie
Pour créer une liste, on utilise un jeu de balises <ul>et<li>
- Pour introduire la liste, on place une balise <ul/>
- Pour chaque élément de cette liste, on utilise un couple de balises <li></li>
Par exemple
- <h4>Liste des ingrédients</h4>
<ul>
- <li>200 grammes de beurre</li>
- <li>75 grammes de chocolat</li>
- <li>180 grammes de sucre</li>
</ul>
Liste des ingrédients
- 200 grammes de beurre
- 180 grammes de Sucre
- 75 grammes de chocolat
Les listes numériques (ordonnées)
Les listes numériques sont calquées sur la même structure qu'une liste simple
- Pour introduire la liste, on place le couple balises <ol/>
- Pour chaque élément de cette liste, on utilise un
couple de balises <li></li>
l'incrémentation numérique se fera automatiquement
- <ol>
- <li> dans une casserole faites fondre le beurre </li>
- <li>Versez le sucre en mélangeant </li>
- <li>Versez le chocolat </li>
</ol>
- dans une casserole faites fondre le beurre
- Versez le sucre en mélangeant
- Versez le chocolat
Il est possible de changer l'indice d'énumération en utilisant
la propriété Start Par exemple je souhaite commencer mon énumération à partir du quatrième point <ol start=4>[...]</ol>
Changer le type de puce d'une liste
Pour modifier le type de puce d’une liste, on utilise la propriété "type" assigné à la balise <ul> ou <ol> Comme Suit :
<ul type="square">
Voici une liste des valeurs que peut prendre la propriété type
| 1 |
- Item 1
- Item 2
|
square |
|
| A ou a |
- Item 1
- Item 2
|
circle |
|
| I ou i |
- Item 1
- Item 2
|
disc |
|
Les différents types de listes
Il s’agit de listes non ordonnées mais apportant une valeur sémantique
Les listes de définition
Elles sont utilisées afin de mettre en forme un ensemble de définitions (dictionnaire)
-
Pour introduire le dictionnaire, utilisez le couple balises <dl/> (Data List)
-
Pour chaque éléments à définir, utilisez un couple de balises <dt/> (Data Term)
-
Pour attribuer une définition à l'élément, utilisez le couple <dd/> (Data Definition)
- HTML
- HyperText Transfer Protocol
- FTP
- File Transfer Protocol
- SMTP
- Send Mail Transfer Protocol
- <dl>
- <dt>HTML
- <dd>HyperText Transfer Protocol </dd>
</dt>
- <dt> FTP
- <dd> File Transfer Protocol </dd>
</dt>
- <dt> SMTP
- <dd> Send Mail Transfer Protocol </dd>
</dt>
</dl>
Les listes de répertoire
Elle permet d’introduire une liste de contacts ou de fichier par exemple, elles sont encadrées par les balises <dir></dir>
- <dir>
- <li>Item1 </li>
- <li>Item2 </li>
- <li>Item3 </li>
</dir>
Item 1
Item 2
Item 3
Les listes de menu
Elle permet d’introduire des menus propres à la navigation, elles sont encadrées par les balises <menu></menu>
- <menu>
- <li> Accueil </li>
- <li>Page1 </li>
- <li>Page2> </li>
</menu>
Liste imbriquée
Il est possible d'intégrer une liste dans une autre liste.
Pour cela il suffit d'introduire une liste aprés un élément la la liste <li>
- <ul type="disc">
- <li>Element 1
- <ul type="circle">
- <li>Element 1-1 </li>
- <li>Element 1-2 </li>
</ul> </li>
- <li>Element 2</li>
</ul>