Lists
Tutoriaux, Sommaire
Html
Une présentation sous forme de liste
hiérarchique, c'est à dire ordonnée suivant un certain ordre, exemple menu,
sommaire, etc...
Exemple,
Sommaire
- Item 1
- Sous Item 1
- Sous Sous Item 1
- Sous Sous Item 2
- Sous Item 2
- Item 2
- Item 3
- Item 4
Cette présentation est fixe, vous ne pouvez pas dérouler un
niveau en cliquant dessus.
Plusieurs présentations sont possibles, les deux principales
sont les listes à puces et les listes ordonnées. La présentation ci-dessus
est une liste à puces.
Le tag de liste créé des décalages et rajoute des puces ou
une numérotation mais ne change aucun attribut du texte, (taille, couleur,
fonte).
Dans une liste à puces le texte est inscrit entre les tags,
<UL></UL>. Les lignes de texte sont précédées du tag <LI>,
(pas de tag de fermeture).
Exemple, (les décalages de texte sont purement pédagogiques
et non indispensable),
<ul>
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
Exercice, créer une liste de fruits,
Corrigé
Dans une liste vous pouvez vous servir des tags de texte pour
formater le texte.
Exercice,
Mettre le titre de la liste, (Fruits)
en taille +2
Mettre les lignes de la liste en
taille +1
Corrigé
Explication
Pour créer un sous-item dans une liste, on rajoute à
l'endroit voulu, une liste.
Exemple,
Sous Item
<ul>
<li> Item 1
<ul>
<li> Sous Item 1
<li> Sous Item 2
</ul>
<li> Item 2
</ul>
Voir l'exemple
dans la forme ci-dessus.
Exercice,
reprenant l'exemple des fruits
ci-dessus, rajouter deux sous catégories a Orange, normale et sanguine.
Corrigé
Rajouter deux sous catégories a
normale, non traité, traité.
Corrigé
Vous pouvez constater que les puces changent de forme à
chaque niveau. Vous avez la possibilité de d'imposer la forme de puces pour un
niveau déterminé en insérant dans le tag <UL>, l'instruction
Type="puce", où puce peut prendre une des trois valeurs suivante,
circle, disque, square.
Exemple, <ul type="square">
Exercice,
imposer le type square à tous les
niveaux de l'exercice précédent.
Corrigé
Dans une liste ordonnée les puces sont
remplacées par des lettres ou des numéros, la liste n'est pas triée par ordre
alphabétique.
La syntaxe est sensiblement la même que pour la liste à
puces, en remplaçant <UL> par <OL>, faites "Afficher la
page" dans la forme ci-dessous pour voir un exemple.
Nous pouvons changer le type de numérotation, syntaxe,
<OL type="num"> où
num peut prendre les valeurs,
"A"
donne une séquence de lettres majuscules.
"a"
donne une séquence de lettres minuscules.
"I", (i majuscule), donne une séquence de chiffres romains
majuscules.
"i", (i minuscules), donne une séquence de chiffres romains
minuscules.
"1", (le chiffre un), donne une séquence de chiffre, c'est la
condition par défaut.
Le changement de numérotation s'effectue niveau par niveau
comme pour le tag <UL>.
Exercice,
Changer le type du premier niveau de
l'exemple précédent pour des lettres majuscules.
Corrigé
Changer le type de tous les niveaux
de l'exemple précédent pour des chiffres romains majuscules.
Corrigé
