Médiaforma

Listes à puces

Print Friendly

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 :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply