01- Les Listes

Semaine 2

1. Présentation des listes

La présentation sous forme de liste permet une bonne structuration de l’information. Les spécifications du html contiennent des balises pour la création de listes d’items. Vous pouvez créer des :

  • listes ordonnées <ol> (ordered list)
  • listes non ordonnées <ul> (unordered list)
  • listes de définitions <dl> (definition list)

 

1.1 Les listes ordonnées <ol>

Si votre liste a une notion d’ordre importante, vous pouvez utiliser une liste ordonnée.Voici un exemple d’affichage d’une liste dans votre fureteur (browser) :

  1. Voici mon Item #01
  2. Voici mon Item #02
  3. Voici mon Item #03
  4. Voici mon Item #04

Voici le code :

<ol>
<li>Voici mon Item #01</li>
<li>Voici mon Item #02</li>
<li>Voici mon Item #03</li>
<li>Voici mon Item #04</li>
</ol>

 

1.2 Les listes non ordonnées <ul> ou listes à puces

Si votre liste n’a pas besoin d’une notion d’ordre importante, vous pouvez utiliser une liste non ordonnée. Voici un exemple d’affichage d’une liste dans votre fureteur (browser) :

  • Voici mon Item #01
  • Voici mon Item #02
  • Voici mon Item #03
  • Voici mon Item #04

Voici le code :

<ul>
<li>Voici mon Item #01</li>
<li>Voici mon Item #02</li>
<li>Voici mon Item #03</li>
<li>Voici mon Item #04</li>
</ul>

 

1.3 Les listes de définitions <dl> ou liste à puce

Ce type de liste est particulièrement utile dans l’élaboration de glossaires, mais peut être utilisé dans toute listes qui couple un mot avec une phrase plus longue, donnant sa définition.

Vous devez commencer par la balise <dl> (definition list) pour ensuite utiliser la balise <dt>(defined term) qui représente ici l’identificateur de l’élément de la liste, qui sera suivit par la définition(<dd>).

La balise <dd> (definition data) débute le paragraphe de la définition, et fera l’indentation de toutes les lignes de celui-ci jusqu’à la rencontre d’une nouvelle balise <dt>, ou de la fin de la liste avec la balise </dl>.

Voici un exemple d’affichage d’une liste de votre fureteur (browser) :

Voici le code :

<dl>
<dt>Définition</dt>
<dd>Voici la définition de mon mot </dd>
<dt> 2 <sup> ième</sup> définition </dt>
<dd> Voici la définition de mon deuxième mot</dd>
</dl>

 

1.4 Présentation des listes imbriquées

Il est possible de faire l’imbrication de plusieurs listes de type semblable ou différentes. Dans l’exemple qui suit nous avons une liste à puces imbriquée dans une liste ordonnée.

 

Voici un exemple d’affichage d’une liste de votre fureteur (browser) :

  1. Voici mon Item numéroté #01
    • Voici mon Item à puce #01
    • Voici mon Item à puce #02
  2. Voici mon Item numéroté #02
    • Voici mon Item à puce #01
    • Voici mon Item à puce #02

Voici le code :

<ol>
<li>Voici mon Item numéroté #01

<ul>
<li>Voici mon Item à puce #01</li>
<li>Voici mon Item à puce #02</li>
<br />
</ul>

</li>

<li>Voici mon Item numéroté #02

<ul>
<li>Voici mon Item à puce #01</li>
<li>Voici mon Item à puce #02</li>
</ul>
</li>

</ol>

 

1.5 Utilisation des listes avec les CSS

Nous avons vu que la présentation sous forme de liste permet une bonne structuration de l’information. De plus, les listes sont très utilisées pour faire des menus en utilisant des css. Il est donc primordial de bien comprendre les listes, car très bientôt vous allez les utiliser pour organiser votre contenu et surtout pour créer des menus intéressants dont le poids est minuscule (ce qui est important lors de l’intégration d’un site Web).

 

 

1.6 Quelques règles d’écriture du HTML

 

  1. Écrire les noms de balise en bas de casse (minuscules).
  2. Écrire les noms d’attribut en bas de casse (minuscules).
  3. Refermer toute balise ouvrante avec une balise de fin. (<h2> 2.1 Signification des acronymes <img/>).
  4. Terminer toute balise vide avec une barre oblique précédée d’une espace (<img /> et non <img>).
  5. Encadrer les valeurs d’attribut de guillemets droits.
  6. Expliciter les valeurs d’attribut (<input … checked="checked" /> et non <input … checked>).
  7. Remplacer l’identificateur partiel NAME par ID.
  8. Assortir toute image d’un attribut ALT, même de valeur nulle.