 |
Ma Liste Non Ordonnée :
|
Les listes peuvent présenter des éléments d'information dans un format facile à lire. En fait, il y a une liste juste ici, tapie sous le prochain titre !
Après cette leçon, vous pourrez :
Bien des pages web affichent des listes d'éléments -- soit des éléments précédés d'une "puce" (Liste Non Ordonnée) ou numérotés séquentiellement (Liste Ordonnée).
Ces listes sont faciles à créer en HTML et elles peuvent même être imbriquées (listes de listes) pour présenter un plan. Les listes sont également très utiles pour créer un index ou une table des matières pour une série de documents ou de chapitres.
Les listes non ordonnées, ou tags <ul> .. </ul> ( pour Unordered List), sont celles qui apparaissent comme des listes d'éléments avec des "puces" ou des marqueurs au début. Les styles de puces dépendent de la version de votre navigateur et de la police spécifiée pour afficher du texte WWW simple (e.g. pour Macintosh, les puces sont faites avec le caractère option-8 -- en police Times, c'est un petit carré, en Geneva, c'est un gros point,...).
Voici un exemple de liste Non Ordonnée :
|
Ma Liste Non Ordonnée :
|
Et voici le code HTML pour produire ce format :
<B>Ma Liste Non Ordonnée :</B>
<ul>
<li> Elément 1
<li> Elément 2
<li> Elément 3
</ul>
Le tag <ul> marque le début et la fin de la liste, et chaque <li> représente un élement de la liste (list item).
Les listes Ordonnées sont celles où le navigateur numérote chaque élément de la liste en commençant par "1." Notez que la seule différence est le changement du tag ul en tag ol (pour Ordered List).
En utilisant l'exemple précédent :
|
Ma Liste Ordonnée :
|
Et voici le code HTML pour produire ce format :
<B>Ma Liste Ordonnée :</B>
<ol>
<li> Elément 1
<li> Elément 2
<li> Elément 3
</ol>
Les listes ordonnées et non ordonnées peuvent avoir différents niveaux ; chaque niveau sera géré correctement par votre navigateur. Votre souci principal sera de vérifier que chaque liste se termine bien et que l'ordre d'imbrication est correct.
Ca peut commençer à paraître compliqué avec tous ces tags <ol> <li> </ul> <li> se promenant par là, mais essayez simplement de vous souvenir de la structure de base :
<ul> <ol>
<li> <li>
<li> <li>
</ul> </ol>
Voici un exemple de liste non ordonnée avec des sous-niveaux d'autres listes :
|
Liste Non Ordonnée Imbriquée
|
Remarquez comment les puces changent pour les différents niveaux de la liste.
Et voici le code HTML pour réaliser cela :
<B>Liste Non Ordonnée Imbriquée</B>
<ul>
<li>Ceci est le premier élément
<li>Ceci est le deuxième élément
<ul>
<li> Ceci est le premier sous-élément du deuxième élément
<ul>
<li> Et ceci est un sous-élément d'un sous-élément
<li> Vous suivez toujours ?
</ul>
<li> Ceci est le deuxième sous-élément du deuxième élément
<li> Ceci est le troisième sous-élément du deuxième élément
</ul>
<li>Ceci est le troisième élément
</ul>
Non seulement vous pouvez inclure des listes ordonnées dans des listes ordonnées, mais vous pouvez également mélanger les types de listes. Accrochez-vous ! Le HTML commence à avoir l'air assez vilain, mais regardez comment certaines listes en contiennent d'autres.
Par exemple, cette liste ordonnée inclut une liste non ordonnée imbriquée :
|
Liste Non Ordonnée Imbriquée
|
Et voici le code HTML pour écrire cette liste. Notez comment nous avons indenté le HTML pour le rendre plus facile à lire :
<B>Liste Non Ordonnée Imbriquée</B>
<ol>
<li> Ceci est le premier élément
<li> Ceci est le deuxième élément
<ul>
<li> Ceci est le premier sous-élément du deuxième élément
<ol>
<li> Et ceci est un sous-élément numéroté d'un sous-élément
<li> Et ceci est un autre sous-élément numéroté du même sous-élément
<li> Vous suivez toujours ?
</ol>
<li> Ceci est le deuxième sous-élément du deuxième élément
<li> Ceci est le troisième sous-élément du deuxième élément
</ul>
<li> Ceci est le troisième élément
</ol>
Note : Si vous n'avez pas le document de la leçon précédente, téléchargez une copie maintenant.
En utilisant les tags de listes, vous allez maintenant ajouter une liste ordonnée et une liste non ordonnée dans votre page Web Volcan.
Combien en connaissez-vous ?
<ul>
<li>caldera
<li>vésicularité
<li>pahoehoe
<li>rhéologie
<li>lahar
</ul>
Votre mission est de trouver des informations et de faire un rapport sur un volcan
autre que ceux listés ci-dessus, où une éruption s'est produite dans
les 100 dernières années. Vos rapports doivent inclure :
<ol>
<li> Le type de volcan
<li> Position géographique
<li> Nom, distance et population de la grande ville la plus proche
<li> Dates des éruptions les plus récentes et les plus destructrices.
<li> Autres évènements associés aux récentes éruptions
(Tremblements de terre, inondations, coulées de boue, etc)
</ol>
<p>
Ensuite, rédigez une description d'une page sur les dangers majeurs pour les humains
au voisinage de ce volcan. Spéculez sur les actions que vous prendriez si
vous aviez la responsabilité de minimiser les risques pour la population.
Vous voudrez peut-être comparer votre document avec l'exemple pour cette section. Si votre liste est différente de la liste de l'exemple, vérifiez comment vous avez entré la liste dans votre éditeur de texte. Assurez-vous que vous avez bien suivi les instructions de la section Placer Des Listes Dans Votre Document HTML de cette leçon.
Vous pouvez peut-être essayer de changer la liste ordonnée que vous avez créée en une liste non ordonnée. Vous pouvez également essayer d'insérer une liste ordonnée ou non ordonnée d'éléments dans votre propre document WWW. Vérifiez qu'elle s'affiche correctement dans votre navigateur. Pouvez-vous créer une liste qui inclue des sous-listes ?
Faire plus que juste du texte -- ajouter des images dans votre page.
Ecrire le HTML : Leçon 6: Des Listes, des Listes et des Listes
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut6.html