Ce chapitre est assez court comparé au précédent.

Vous allez apprendre à créer des listes à puces, et des listes numérotées. Elles vous seront bien pratiques quand vous devrez énumérer des actions à effectuer, par exemple.

Et surtout, elles mettent bien en valeur ce texte-là, puisque il est décalé par rapport au reste du texte.

Vous allez voir, c'est très simple.

Pour indiquer au navigateur où se trouvera votre liste à puces, placez le tag <ul> où vous le désirez puis refermez-le plus loin.

Entre ces deux tags se trouvera la liste à puces (ne mettez rien d'autre).

Pour indiquer une nouvelle ligne (avec une puce au début), créez un tag <li> et fermez-le plus loin.
Répétez autant de fois le tag <li> que vous le voulez, entre les deux tag <ul>.

Sur mon site vous trouverez :<p>
<ul>
<li>Les conseils du professionnel du boomerang</li>
<li>La vie de molière en 46 pages</li>
<li>Les liens intéressants</li>
<li>Une adresse super : Apprenez le html !</li>
</ul>

Notez que vous n'avez pas besoin d'écrire de tag <p> ou <br> à la fin de chaque ligne.

Pensez aussi que vous pouvez combiner des tags, ce n'est pas interdit ! Essayez par exemple de faire un lien pour chaque ligne de la liste, ou bien de tout mettre en gras...

Malheureusement, le html n'offre pas autant de puces qu'un traitement de textes...

Si il y a un ordre dans vos actions, une préférence... utilisez une liste numérotée.

A chaque ligne le numéro du début augmente d'un.

Pour ce faire, tapez le tag <ol> et refermez-le plus loin. Définissez chaque ligne avec le tag <li>, comme tout à l'heure.

Ma vie le dimanche :<p>
<ol>
<li>Je me lève</li>
<li>Je mange une tartine</li>
<li>Je retourne au lit</li>
</ol>

Liste numérotée avec des chiffres romains

Ajoutez un attribut au tag <ol> : "type". Précisez-le par un i ou un I, c'est tout.

Liste numérotée avec des lettres

Précisez l'attribut type par un A ou un a, selon votre choix.

Commencer une liste numérotée à partir de...

Il faut un autre attribut au tag <ol> : "start", que vous préciserez par le chiffre de votre choix.

Exemple :

Au choix dans le menu dégustation :<p>
<ol type="A">
<li>Sauce de crapaud baveux</li>
<li>Intestins de cheval avec un coulis de sang frais</li>
<li>Zombie du jour (déconseillé aux enfants)</li>
</ol>

Et voilà ! Elles vous seront très pratiques, les listes, vous verrez.

Prochain arrêt : les tableaux. Accrochez-vous bien, il y a pas mal de choses à dire dessus.