Médiaforma

All posts tagged li

Les listes numérotées sont une variante des listes à puces. Pour les mettre en œuvre, il suffit de remplacer la balise <ul></ul> par une balise <ol></ol>.

Pour suivre cette formation, vous avez besoin :
<ol>
<li>d’un ordinateur ;</li>
<li>d’une connexion Internet ;</li>
<li>d’un navigateur Web ;</li>
<li>de une à deux minutes par jour.</li>
</ol>

Voici le résultat dans Internet Explorer :

Tout comme pour les listes à puces, il est possible d’utiliser un attribut type dans la balise <ol> pour modifier le type de la liste numérotée :

  • A affiche une numérotation en lettres capitales ;
  • a affiche une numérotation en lettres minuscules ;
  • I affiche une numérotation en chiffres romains ;
  • i affiche une numérotation en chiffres romains minuscules.

Pour mettre en évidence ces quatre numérotations alternatives, nous effectuons quatre copies du code compris entre les lignes 10 et 16, puis nous ajoutons un attribut type dans la balise <ol> de chaque bloc dupliqué.

Voici le résultat dans Internet Explorer :


Rien de tel qu’une liste à puces pour afficher une énumération.

En HTML, vous devez utiliser deux balises pour créer une liste à puces :

  • <ul> et </ul> pour délimiter le début et la fin de la liste ;
  • <li> et </li> pour délimiter chacune des lignes de la liste.

Ici par exemple, la liste contient quatre éléments facilement repérables par les balises <li> et </li>. Les éléments de la liste ont été décalés vers la droite pour rendre le code plus facile à comprendre.

Ce décalage n’a aucune incidence sur le rendu dans le navigateur : les éléments de la liste sont automatiquement indentés dans le navigateur, qu’ils le soient ou non dans le code.

Pour suivre cette formation, vous avez besoin :
<ul>
<li>d’un ordinateur ;</li>
<li>d’une connexion Internet ;</li>
<li>d’un navigateur Web ;</li>
<li>de une à deux minutes par jour.</li>
</ul>

Après avoir sauvegardé le document, nous l’affichons dans Internet Explorer. Voici le résultat :

Par défaut, les éléments d’une liste à puces sont précédés d’un point épais. En utilisant l’attribut type dans la balise <ul>, vous pouvez choisir deux autres types de puces :

  • type=”square” affiche un carré plein ;
  • type=”circle” affiche un rond vide.

Pour mettre en évidence les trois types de listes à puces, nous effectuons deux copies du code compris entre les lignes 10 et 16. Puis nous insérons un attribut dans le premier bloc dupliqué et un attribut type=”circle” dans le deuxième.

Après avoir sauvegardé ce code, nous l’affichons dans Internet Explorer. Voici le résultat :