Les listes HTML

sibylassana95HTML

Afin de pouvoir bien organiser l’affichage des pages web, le langage HTML est doté d’un nombre de balises permettant d’organiser et et présenter le contenu sous forme d’une liste.

1 – Les listes ordonnées

Pour organiser un contenu web sous forme d’une liste ordonnée, on utilise la balise <ol> ( ordered list ), et ensuite chaque élément de la liste doit être inséré  à l’aide de la balise <li>

<ol>
<li>élément 1</li>
<li>élément 2</li>
<li>élément 3</li>
.............
</ol>

Exemple :

<ol>
<li>Voitures</li>
<li>Computers</li>
<li>Télévisions</li>
</ol>

Ce qui vas nous afficher :

  1. Voitures
  2. Computers
  3. Télévisions

Si on veut maintenant mettre à la place des numéros 1 , 2,  3… des lettres a) , b), c)… ou des chiffres I, II, III… Il suffit d’ajouter la commande type=””  :

<ol type="I">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ol>
<ol type="a">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ol>

Ce qui vas afficher au navigateur  :

  1. Voitures
  2. Computers
  3. Télévisions
  1. Voitures
  2. Computers
  3. Télévisions

Si on veut maintenant démarrer le compteur à une position autre que la première qui est 1, par exemple à la 7ème position on utilise la commande start=” “ :

<ol start="7">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ol>

Ce qui va afficher au navigateur :

  1. Voitures
  2. Computers
  3. Télévisions

Vous pouvez aussi imbriquer des sous listes à l’intérieur d’une liste :

Exemple :  Si vous voulez par exemple spécifier les marques des voitures, vous pouvez utiliser le code :

<ol>
<li>Voitures
<ol>
<li>Renault</li>
<li>Peugeot</li>
<li>Golf</li>
</ol>
</li>

</ol>

Ce qui affiche à l’écran :

  1. Voitures
    1. Renault
    2. Peugeot
    3. Golf

2 – Les listes non ordonnées

Parfois on souhaite présenter un contenu web ou l’ordre ne semble avoir aucune importance ! Dans ce cas on utilise les listes non ordonnées, ces dernières on peut les créer facilement à l’aide des balises <u> et </ul>

Exemple :

<ul>
<li>Voiture</li>
<li>Maison</li>
<li>Arbre</li>
</ul>

Ce qui affiche au navigateur :

  • Voiture
  • Maison
  • Arbre

On souhaite parfois mettre des petites icônes à la place des puces, pour cela il suffit d’ajouter la commande : imagesrc=”http://www.adresse-de-l-image” :

<ul imagesrc="http://www.tresfacile.net/crayon.jpg">
	<li>Voitures</li>
	<li>Computers</li>
	<li>Télévisions</li>
</ul>

Ce qui affiche au na vigateur :

listes dont les puces sont des images

3 – Les listes combinées

Prenons l’exemple simple ci-dessus de la liste : Voiture, Maison, Arbre, et on souhaite par exemple spécifier la marque de la voiture : 1 – Renault, 2- Peugeot, 3- Golf, tout en respectant l’ordre, on peut à ce moment là insérer une liste ordonnée au sein de la liste première liste : Voiture, Maison, Arbre :

<ul>
<li>Voitures
<ol>
<li>Renault</li>
<li>Peugeot</li>
<li>Golf</li>
</ol>
</li>
<li>Maison
<ol>
<li>Maison 2 pièces</li>
<li><code>Maison </code>3 pièces</li>
<li><code>Maison </code>4 pièces</li>
</ol>
</ul>

Ce qui affiche à l’écran :

  • Voitures
    1. Renault
    2. Peugeot
    3. Golf
  • Maison
    1. Maison 2 pièces
    2. Maison 3 pièces
    3. Maison 4 pièces
     

4 – Les listes de définitions

Vous souhaitez parfois présenter une page web contenant une liste de définitions, cette liste s’introduit facilement à l’aide des balises <dl> et </dl>, vous introduisez ensuite le terme à définir entre les balises <dt> et </dt> et  vous introduisez ensuite votre définition entre les balises <dd> et </dd>

Exemple :

<dl>
<dt>Serveur</dt>
<dd>Ordinateur dédié à l'administration d'un réseau informatique. 
Il gère l'accès aux ressources et aux périphériques et les connexions 
des différents utilisateurs.</dd>
<dt>Adresse IP</dt>
<dd>
Une adresse IP (avec IP pour Internet Protocol) est un numéro 
d'identification qui est attribué de façon permanente 
ou provisoire à chaque appareil connecté
</dd>

</dl>

Ce qui affiche  :ServeurOrdinateur dédié à l’administration d’un réseau informatique. Il gère l’accès aux ressources et aux périphériques et les connexions des différents utilisateurs.Adresse IPUne adresse IP (avec IP pour Internet Protocol) est un numéro d’identification qui est attribué de façon permanente ou provisoire à chaque appareil connecté

Post Views: 82