Les listes

Bonjour à toi, qui veut en savoir plus sur les listes !

Eh non, il ne suffit pas de faire des "-" et des retours à la ligne pour qu'une liste soit une liste ! Allons-y !

Il existe deux types de listes :

Pour lesquelles on va utiliser la balise "ol" :

rendu :

Code:

<ol>
  <li>Je suis le point 1</li>
  <li>Je suis le point 2</li>
  <li>Je suis le point 3</li>
</ol>

Pour lesquelles on va utiliser la balise "ul" :

rendu :

Code:

<ul>
  <li>Je suis un point</li>
  <li>Je suis un autre point</li>
  <li>Je suis encore un point</li>
</ul>

Comme vous le voyez, chaque "point" ou chaque "numéro" sera dans la balise "li". En effet, les balises "ol" et "ul" sont là pour dire si la liste sera ordonnée ou non, alors que la balise "li" indique juste qu'il y a un élément.

Pour ces deux types de liste on a plusieurs "puces" disponibles :

• Des chiffres dits "arabes", des chiffres "romains" ou encore "hébreux" !
  
• Des carrés, des ronds pleins, des cercles
  
• Mais également toutes les images de votre choix ! Nous verrons ça un peu plus loin
  

Moins souvent utilisées et pourtant, utiles, il existe un 3e type de liste : les listes de description. Ici, chaque "item" sera constitué de 2 éléments : un titre & une description/définition.

Ce type de liste est idéal pour un bestiaire, un dictionnaire ou un glossaire.

Les listes de descriptions s'écrivent de cette façon :

Code:


<dl>
    <!-- La liste sera ici -->
</dl>


Le "titre" s'écrira entre balise "dt" :

Code:

<dt>Titre</dt>

Et la "description/définition" sera mise entre balise "dd"

Code:

<dd>description/définition</dd>

Il est à noter que :
• un "titre" peut avoir une seule définition

Code:

<dt>Titre</dt>
<dd>description/définition</dd>

• Une définition peut avoir plusieurs titre :

Code:

<dt>Titre 1</dt>
<dt>Titre 2</dt>
<dd>description/définition</dd>

• Un seul titre peut avoir plusieurs définitions :

Code:

<dt>Titre</dt>
<dd>description/définition 1</dd>
<dd>description/définition 2</dd>

Et voici un exemple complet :

Code:

<dl>
    <dt>Titre</dt>
    <dd>description/définition</dd>

    <dt>Titre 1</dt>
    <dt>Titre 2</dt>
    <dd>description/définition</dd>

    <dt>Titre</dt>
    <dd>description/définition 1</dd>
    <dd>description/définition 2</dd>
</dl>

Rendu:

L'imbrication des listes est souvent le gros gros gros point noir, redouté par tout le monde ! Et pourtant ce n'est pas si compliqué : il suffit de retenir qu'une sous-liste doit être avant la fermeture de sa liste parente. Un exemple vaut mieux que 1 000 mots !

Si je veux coder ceci :
Je vais avoir une liste parente non ordonnée (ul) et sous le deuxième point j'aurai une sous-liste ordonnée. D'un coté on a notre liste à puce, et de l'autre notre liste ordonnée qu'on veut mettre en sous liste.

Liste à puce:

Liste ordonnée:

On va donc prendre le second point et revenir à la ligne avant le /li.

Code:

<ul>
 <li>Je suis un point</li>
 <li>Je suis un autre point

 </li>
 <li>Je suis encore un point</li>
</ul>

Et on va insérer la liste ordonnée :

Code:

<ul>
 <li>Je suis un point</li>
 <li>Je suis un autre point
 <ol>
   <li>Je suis le point 1</li>
   <li>Je suis le point 2</li>
   <li>Je suis le point 3</li>
 </ol>
 </li>
 <li>Je suis encore un point</li>
</ul>

Là, notre imbrication est bonne ! Et notre sous liste est bien l'enfant de notre second point de la liste principale.

Il existe beaucoup, beaucoup, beaucoup de type de puces différentes. Je vais essayer de vous faire une petite liste

Pour les listes ordonnées, on a un attribut qu'on appelle "type". Il permet de définir le style des listes. Voilà ceux de base :

type="1" :: le type par défaut, ce sont les chiffres comme au dessus.
type="A" :: les listes seront en grandes majuscule (A, B, C, etc...)
type="a" :: les listes seront en petites majuscule (a, b, c, etc...)
type="I" :: les listes seront en chiffre romain en majuscules (I, II, III, IV, etc...)
type="i" :: les listes seront en chiffre romain minuscule (i, ii, iii, iv, etc...)

Cependant, on peut aussi utiliser l'attribut "style" pour y mettre d'autres propriétés :

Code:

<ol style="mespropriétés;">
 <li>Je suis un point</li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ol>

Par exemple, on peut :
list-style-type:hebrew; :: nos "chiffres" seront en hébreux
list-style-type:armenian; :: nos "chiffres" seront arméniens ^^


Pour les listes non ordonnées, on ne peut pas utiliser l'attribut "type". On va utiliser l'attribut "style" et y mettre des propriétés.
Comme ceci :

Code:

<ul style="mespropriétés;">
 <li>Je suis un point</li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ul>

Voilà une petite liste des types "de base" :
list-style-type:disc :: le type par défaut, il va simplement mettre des points noirs.
list-style-type:circle :: les points seront en fait des "cercles".
list-style-type:square :: les listes seront des carrés.
list-style-type:none :: Il n'y aura rien devant la liste.

Mais on peut également mettre une image ! Par exemple je veux que cette image soit ma puce :  
Je vais utiliser la propriété : list-style-image.
Le code est le suivant :

Code:

<ul style="list-style-image:url(https://2img.net/i/fa/i/smiles/alien.png);">
  <li>Je suis un point</li>
  <li>Je suis un autre point</li>
  <li>Je suis encore un point</li>
  </ul>

Ce qui donne :

Et voilà ! Tu peux mettre ce que tu veux du coup


Il est important de noter que le style d'une liste parente sera transmis à la liste enfant ! Il faut donc ré-initialiser le style de la balise enfant
Par exemple ce code :

Code:

<ul style="list-style-image:url(https://2img.net/i/fa/i/smiles/alien.png);">
 <li>Je suis un point
   <ul >
    <li>Je suis un point</li>
    <li>Je suis un autre point</li>
    <li>Je suis encore un point</li>
   </ul>
 </li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ul>

donne :
Il faut donc annuler l'image sur la sous liste :

Code:

<ul style="list-style-image:url(https://2img.net/i/fa/i/smiles/alien.png);">
 <li>Je suis un point

   <ul style="list-style-image:none;">
    <li>Je suis un point</li>
    <li>Je suis un autre point</li>
    <li>Je suis encore un point</li>
   </ul>

 </li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ul>

et voilà :

---

Tu en sais à présent pas mal sur les listes ! Tu vas déjà pouvoir t'amuser