Les listes
Les listes sont quasiment toujours présentes avec les nouveaux sites codés en XHTML strict. En effet, on les utilise très souvent pour créer des menus. Vous n'en avez peut-être pas conscience, mais le menu que vous voyez à gauche de ce site est une liste, décorée avec des CSS. Ne soyez donc pas rebuté si je vous parle aussi de menus dans ce chapitre, vous verrez qu'il est bien plus judicieux de créer des menus avec des listes qu'en utilisant des <br /> pour sauter des lignes. Les listes permettent d'être mieux compris par ceux qui utilisent des navigateurs spéciaux, et le rendu est identique sur les navigateurs graphiques. Vous n'avez donc rien à craindre à les utiliser. Nous allons voir maintenant quels sont les trois types de listes existants :- Les listes à puces non ordonnées : ce sont les listes à puce de base.
- Les listes à puces ordonnées : les puces disposent d'un numéro et sont donc ordonnées.
- Les listes de définitions : elles ne contiennent pas de puces, mais vont vous permettre de classifier l'information plus facilement. Nous verrons pourquoi un peu plus bas.
Les listes à puces non ordonnées
Les listes à puces non ordonnées sont majoritairement utilisées dans les sites web. Voici un exemple de liste à puces (non mise en forme) :- Element 1
- Element 2
- Element 3
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
Comme vous pouvez le voir, on débute la liste par la balise <ul> chaque élément est entouré de balises <li>, et on ferme ensuite la liste avec </ul>. Sachez que vous ne pouvez rien mettre comme texte ou balises en dehors des balises <li>. Je ne veux donc pas voir ça :
<ul>
<strong><li>Element 1</li></strong>
<li>Element 2</li>
<li>Element 3</li>
</ul>
Ni ça :
<ul>
Titre de ma liste
<li>Element 1</li></strong>
<li>Element 2</li>
<li>Element 3</li>
</ul>
Ces deux exemples à ne pas faire s'appliquent également aux autres types de listes, dont nous allons parler tout de suite :p
La liste à puces ordonnée
Elle diffère de la précédente par le fait qu'on ajoute des numéros aux puces. Il y a donc une notion d'ordre, pas forcément obligatoire dans les faits que vous allez énumérer, mais utile lorsque vous allez décrire des étapes. Cette liste diffère uniquement de la précédente par le fait que vous utiliserez cette fois la balise <ol> et non <ul> pour débuter la liste. Les éléments seront toujours matérialisés par des balises <li>.Voici un exemple :
<p>Montage d'une carte graphique :</p>
<ol>
<li>On ouvre le boîtier</li>
<li>On enlève l'ancienne carte graphique</li>
<li>On referme le boîtier et on démarre le PC</li>
<li>On installe les pilotes</li>
</ol>
Et voici ce que ça donne :
Montage d'une carte graphique :
- On ouvre le boîtier
- On enlève l'ancienne carte graphique
- On referme le boîtier et on démarre le PC
- On installe les pilotes
Les listes de définitions
Comme leur nom l'indique, les listes de définitions sont principalement utilisées pour lister des mots ainsi que leurs définitions associées. Elles peuvent toutefois avoir d'autres usages toujours grâce aux CSS, et il est possible de les employer dans des menus. Il y a quelques éléments qui changent par rapport aux deux autres listes que nous venons de voir :Tout d'abord, pour débuter une liste de définitions, on utilise la balise <dl>. Ensuite, pour dire qu'on va définir un mot, on utilise la balise <dt>. Pour enfin apporter la ou les définitions du mot, on utilise la balise <dd>. Voici un exemple qui va vous permettre de mieux comprendre :
<dl>
<dt>Boîtier</dt>
<dd>Définition 1</dd>
<dd>Définition 2</dd>
<dt>Vulgarisation informatique</dt>
<dd>Rendre l'informatique accessible au plus grand nombre</dd>
</dl>
Et voici ce que ça donne :
- Boîtier
- Définition 1
- Définition 2
- Vulgarisation informatique
- Rendre l'informatique accessible au plus grand nombre
Aucun commentaire:
Enregistrer un commentaire
le partage des astuces c'est la passion de BENNESTA.
ma preocupation c'est votre satisfaction.