[Tuto html] Faire des listes

Bonjour à tous !

Dans ce tuto, nous allons apprendre comment coder une page pour mettre en forme une liste.

1/ Faire une liste à puces

Ici nous allons utiliser la balise

Code:

Cette balise « indique » que nous allons commencer une liste à puce.

Ensuite, pour préciser chaque élément de notre liste, nous allons utiliser les balises :

Code:

Cette balise est utilisé quelque soit le type de liste.

Voici un exemple de liste à puce :

Et voici le code à mettre pour la réaliser :

Code:

Mes séries préférées
<ul><li> Science Fiction // Fantastique
<ul><li> Farscape</li>
   <li> 3ième planète après le soleil</li>
   <li> Heroes</li></ul></li>
<li> Policier
<ul><li> NCIS</li>
   <li> Colombo</li>
   <li>Arabesque</li></ul></li>
<li> Comédie
<ul><li> Desperate Housewives</li>
   <li> Friends</li>
   <li> Ma tribu</li>
   <li> That's 70's Show</li></ul> </li>
</ul>

Vous l’avez donc remarqué, vous pouvez mettre des listes dans des listes Smile

Ici par exemple, nous avons une plusieurs listes avec le genre des séries (science fiction, policier, comédie) et chaque type de séries à sa propre liste avec le nom des séries cette fois.

2/ Faire une liste numérotée

Ici nous n’allons pas utiliser la même balise que précédemment. Pour faire une liste numérotée, nous avons besoin de la balise suivante :

Code:

Et de la même balise « liste » que ci-dessus.

Voici un petit exemple :

Et le code utilisé : Mes séries préférées

Code:

<ol><li> Science Fiction // Fantastique
   <ol><li> Farscape</li>
      <li> 3ième planète après le soleil</li>
      <li> Heroes</li></ol>
</li>
<li> Policier
   <ol><li> NCIS</li>
      <li> Colombo</li>
      <li>Arabesque</li></ol>
</li>
<li> Comédie
   <ol><li> Desperate Housewives</li>
      <li> Friends</li>
      <li> Ma tribu</li>
      <li> That's 70's Show</li></ol>
</li>
</ol>

Et voilà, vous savez à présent insérer des listes dans vos pages html.

Si un des points ne vous semblent pas clair, dites le Smile

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]

_________________

SoP Story :: 2ème votes éliminatoires