Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer des listes en html

Par celynette (celine moulard), le 25 mai 2011

Quand on crée son site internet, on a souvent besoin d'organiser son contenu. Menus, sommaire, formulaires en vrac … ça devient vite illisible! Les listes sont là pour nous venir en aide alors c'est parti mettons un peu le liste dans notre quotidien!

Dans ce premier chapitre, nous verrons quels sont les différents types de listes et comment les crée-t-on.

Tout d'abord, qu'est-ce qu'une liste? Une liste c'est série de mots, de noms, de nombres etc, mis à la suite les uns des autres.

Il en existe de trois sortes différentes:

  • La liste non ordonnée (Unordered List)
  • La liste ordonnée (Ordered List)
  • La liste de définition

Liste non ordonnée

A quoi ressemble une liste non ordonnée?

Une liste non ordonnée ressemble à ça:

C'est une liste dans laquelle l'ordre des éléments n'a pas d'importance. Le symbole devant chaque élément est appelé puce. Nous verrons dans un prochain chapitre que, grâce au css, il est possible de changer son apparence.

La balise <ul></ul>

La balise <ul></ul> sert à créer une liste à puces, non ordonnée.

Comment coder une liste non ordonnée?

Pas de blabla, voici tout de suite un exemple:

On commence toujours la liste par <ul>, ensuite chaque élément de la liste est entouré par la balise <li></li> et on referme la balise ul, pour indique que la liste est terminée!

En vrai ça donne ça:

Liste ordonnée

A quoi ressemble une liste ordonnée?

Une liste ordonnée ressemble à ça:

  1. pain au chocolat
  2. croissant
  3. pain au lait

C'est une liste dans laquelle, l'ordre des éléments a une importance! Dans l'exemple du dessus, on peut imaginer l'ordre de préférence de viennoiseries pour le petit-déjeuner :D.

La balise <ol></ol>

En xhtml, lorsqu'on veut coder une liste ordonnée, on utilise la balise <ol></ol>.

Code-moi une liste ordonnée!

Rien de plus simple puisqu'on reprend les éléments de la liste non ordonnée à savoir <li></li>. Exemple avec mes délicieuses viennoiseries:

Ce qui donnerait:

A noter que les 1. , 2. , etc sont les puces par défaut d'une liste ordonnée, mais rassurez-vous ça se changer sans problème avec un peu de CSS ;)

Liste de définitions

A quoi ressemble une liste de définitions?

Il s'agit d'une liste ou tous les éléments trouve sa correspondance avec un autre élément. Mot⇒ définition

Voici un exemple:

Structure de la liste de définitions

La liste de définitions a une structure un peu plus complexe que les précédentes listes puisqu'elle fait intervenir 3 balises différentes! Attention aux mélanges !!

On commence toujours la liste par la balise <dl></dl>. C'est l'abréviation de definition list. Jusque là rien de bien compliqué! Chaque type d'éléments de la liste a ensuite sa propre balise:

  • <dt></dt> pour le mot
  • <dd></dd> pour sa définition

Exemple de code:

Si on avait voulu rajouter une définition au terme “pomme de terre”, il aurait fallu rajouter une ligne <dt></dt> vide, puis une nouvelle ligne <dd></dd>, avec la seconde définition.

Voilà vous avez toutes les cartes pour créer des listes, au prochain chapitre nous verrons comment les personnaliser.