Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Les listes

  • Introduction
  • Informations

Les listes sont des éléments particulièrement utiles dans une page Web (pour les menu par exemple).
Ce cours aborde les 3 types de listes que vous pouvez utiliser dans vos documents XHTML.

 
Netger
  • Auteur : Netger
  • Publication : 6 juil. 2007 09:14
  • Consultations : 1461
 

1. Des listes pour ordonner...

Les listes sont un élément important de Xhtml car ce sont des outils très pratiques pour présenter l'information.
Celles-ci permettent entre-autre de construire des menu aussi clairement consultables avec un navigateur texte (comme Lynx) qu'avec un navigateur graphique.

XHTML met à votre disposition 3 différents types de listes :
  • Les listes non-ordonnées
  • Les listes ordonnées
  • Les listes de définitions
Voyons tout cela plus en détails dans les chapitres ci-dessous.

2. Les listes non-ordonnées

Elles permettent de lister diverses informations dont l'ordre d'affichage n'a pas d'importance.
Ainsi un symbole (un disque noir par défaut) indique le début de chaque nouvel élément mais tout cela peut bien sur être adapté comme vous le souhaitez grâce à Css.
Pour déclarer l'utilisation d'une liste, on utilise la balise <ul> ... </ul>
Chaque élément de la liste est introduit par les balises <li> ... </li>

Voici donc un exemple de liste non-ordonnée :
Code-source xhtml
  1. <ul>
  2. 	<li> Element 1 </li>
  3. 	<li> Element 2 </li>
  4. 	<li> Element 3 </li>
  5. </ul>
 
Si cela vous est utile vous pouvez également imbriquer les listes :
Code-source xhtml
  1. <ul>
  2. 	<li> Element 1 </li>
  3. 	<li> Element 2
  4. 		<ul>
  5. 			<li> Element 2.1 </li>
  6. 			<li> Element 2.2 </li>
  7. 			<li> Element 2.3 </li>
  8. 		</ul>
  9. 	</li>
  10. 	<li> Element 3 </li>
  11. </ul>
 

3. Les listes ordonnées

Celles-ci permettent donc de lister des informations ordonnées.
Ici ce n'est donc pas un symbole qui marque le début de chaque élément mais un nombre.

Pour cette liste on utilise la balise <ol> ... </ol>
Les élément de cette liste sont ici aussi déclarés grâce à la balise <li> ... </li>

Voici donc un exemple de liste ordonnée :
Code-source xhtml
  1. <ol>
  2. 	<li> Element 1 </li>
  3. 	<li> Element 2 </li>
  4. 	<li> Element 3 </li>
  5. </ol>
 
Tout comme pour les listes non-ordonnées vous pouvez ici aussi les imbriquer comme bon vous semble :
Code-source xhtml
  1. <ol>
  2. 	<li> Element 1 </li>
  3. 	<li> Element 2
  4. 		<ol>
  5. 			<li> Element 2.1 </li>
  6. 			<li> Element 2.2 </li>
  7. 			<li> Element 2.3 </li>
  8. 		</ol>
  9. 	</li>
  10. 	<li> Element 3 </li>
  11. </ol>
 
Et si cela ne vous suffit pas vous pouvez aussi imbriquer des listes ordonnées avec des listes non-ordonnées et inversement :
Code-source xhtml
  1. <ol>
  2. 	<li> Element 1 </li>
  3. 	<li> Element 2
  4. 		<ul>
  5. 			<li> Element 2.1 </li>
  6. 			<li> Element 2.2 </li>
  7. 			<li> Element 2.3 </li>
  8. 		</ul>
  9. 	</li>
  10. 	<li> Element 3 </li>
  11. </ol>
 

4. Les listes de définitions

Ce dernier type de liste permet d'afficher une série de termes accompagnés de leur définitions.

On utilise ici la balise <dl> ... </dl>
Les termes de cette liste sont déclarés avec la balise <dt> ... </dt> et la définition associée avec la balise <dd> ... </dd>

Voici donc un exemple de liste de définitions :
Code-source xhtml
  1. <dl>
  2. 	<dt> Terme 1 </dt>
  3. 	<dd> Definition 1 </dd>
  4. 	<dt> Terme 2 </dt>
  5. 	<dd> Definition 2 </dd>
  6. </dl>
 
Vous savez maintenant tout ce qu'il y a à savoir sur les listes en Xhtml
N'oubliez pas de tester tout ça par vous-même avant de passer à l'étape suivante  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire