Chronique familiale




La chronique familiale pas à pas

Les listes

 

 Définition et exemples


Dans une page web on entend par liste une énumération d'éléments présentés de façon structurée. Elles sont notamment utilisées dans les menus (déroulants entre-autres). Le sommaire des pages de votre chronique ainsi que celui de ce tutoriel sont aussi des listes.

On distingue deux types de listes :

- les listes non ordonnées où l'ordre de succession des éléments de la liste n'a aucune importance comme dans cet exemple d'une liste de courses :
  • Huile
  • Beurre
  • Café
  • Sucre
  • Farine

- Les listes ordonnées où l'ordre de succession des éléments doit être respecté, telle que cette liste de tâches :

1 . Ouvrir la caisse à outils
2 . Prendre le marteau
3 . Enfoncer le clou
4 . Ranger le marteau
5 . Fermer la caisse à outils

Évacuons tout de suite le sujet des listes ordonnées, GeneWeb ne reconnait plus ni la syntaxe wiki, ni la syntaxe HTML permettant de créer des listes ordonnées et incrémentées automatiquement. A titre d'information, l'exemple ci-dessus est le rendu exact d'une liste ordonnée en HTML sur une page web quelconque.
 

 Les listes non ordonnées

 

 Les listes wiki


On peut créer des listes non ordonnées en langage wiki. Hélas les divers types de puce (rond plein, cercle, carré plein) ne sont plus supportés par GeneWeb et on doit se contenter des ronds pleins.

La syntaxe en est très simple, il suffit de faire précéder chaque élément de la liste d'un ou plusieurs astérisques * selon le niveau occupé par l'élément. Par exemple :

*Les animaux
**Les mammifères
***Les vaches
***Les chevaux
**Les oiseaux
***Les moineaux
***Les pigeons
*Les végétaux
**Les fleurs
**Les légumes


Et voici le résultat :
  • Les animaux
    • Les mammifères
      • Les vaches
      • Les chevaux
    • Les oiseaux
      • Les moineaux
      • Les pigeons
  • Les végétaux
    • Les fleurs
    • Les légumes

Vous pouvez voir que le nombre d'astérisques détermine l'indentation des éléments mais que comme je le disais plus haut, il n'existe plus qu'un type de puce. Notez que les balises de liste ne conservent pas les consignes de taille du texte si elle diffère de celle d'origine.
 

 Les listes html

 

 Les balises <ul> et <li>


Pour créer une liste en HTML, nous utiliserons la balise <ul> (pour unordered list, liste non ordonnée) qui crée une liste et la balise <li> (pour list item, élément de liste) qui encadre chaque élément. Comme ceci :

<ul>
<li>Huile</li>
<li>Beurre</li>
<li>Café</li>
<li>Sucre</li>
<li>Farine</li>
</ul>


Avec ce résultat :
  • Huile
  • Beurre
  • Café
  • Sucre
  • Farine
On se rend compte là aussi que les balises de liste n'ont pas conservé les consignes de taille de texte 1.
 

 Indenter la liste


Comme en wiki il est possible d'indenter la liste. Il suffit pour cela de créer des sous-niveaux en incluant une balise <ul> entre deux balises <li>.J'ai privilégié une présentation du code elle aussi indentée même si ce n'est pas obligatoire. Cependant cela facilite sa lisibilité, ce qui permet notamment d'éviter l'oubli de balises de fermeture et je ne saurais trop vous conseiller de faire de même.

Exemple :

<ul>

<li>Les animaux</li>

<ul>

<li>Les mammifères</li>

<ul>

<li>Les vaches</li>

<li>Les chevaux</li>

</ul>

</ul>

</ul>
Je crée la liste

Élément de 1er niveau

Je crée un 2ème niveau

Élément de 2ème niveau

Je crée un 3ème niveau

Élément de 3ème niveau

Élément de 3ème niveau

Je referme le 3ème niveau

Je referme le 2ème niveau

Je referme la liste



Et le résultat :
  • Les animaux
    • Les mammifères
      • Les vaches
      • Les chevaux

 

 Changer les puces


Les diverses puces ne sont pas reconnues sur la chronique mais on peut forcer leur affichage. Il suffit pour cela de stipuler à chaque niveau de la liste le type de puce souhaité avec la propriété list-style-type. Elles sont de trois types 2 :

- Le rond plein noté disc en HTML. C'est la puce par défaut qu'il n'est pas besoin de spécifier (voir les exemples ci-dessus).

- Le cercle creux noté circle.

- Le carré plein noté square.


Reprenons l'exemple ci-dessus et modifions les puces :

<ul style="list-style-type:circle;">

<li>Les animaux</li>

<ul style="list-style-type:square;">

<li>Les mammifères</li>

<ul>

<li>Les vaches</li>

<li>Les chevaux</li>

</ul>

</ul>

</ul>


Et le résultat :

  • Les animaux
    • Les mammifères
      • Les vaches
      • Les chevaux


À titre d'exemple vous pouvez également voir que j'ai forcé l'affichage des divers types de puces dans le sommaire de ce tutoriel.
 

 Notes

 
1. En revanche la police, la graisse, le style (normal ou italique) et la couleur du texte sont conservés. Il n'y a donc que dans le cas où vous modifiez la taille du texte de votre page que vous serez obligé de la stipuler à nouveau dans chaque balise <li> ; pour ce faire vous utiliserez bien entendu l'attribut style avec la propriété font-size.
 
2. Il existe une quatrième possibilité, affecter la valeur none à la propriété list-style-type ce qui supprime l'affichage de la puce.



───── oOo ─────


Index des pages