On a inséré les en-têtes et les paragraphes, des citations. Qu'est-ce qui reste encore Ahh ouais les listes, comment j'ai pu oublier une chose aussi importante

• Introduction aux listes xhtml

• Exemple de listes <ul> et <ol>

• Exemple d'imbrication des listes <ul> et <ol>

Introduction aux listes html/xhtml

Utilisez les deux balises <ul> et </ul> pour marquer le début et la fin d'une liste non ordonnée, <ul> veut dire "unordoned list" en anglais bien sûr et chaque élément dans cette liste doit être délimité par <li></li>, li veut dire list item. Pour créer une liste numérotée (ordonnée), les balises appropriées sont <ol></ol> ( ordonned list).

Exemple de listes <ul> et <ol>

Code

    <h3>Les quatre points cardinaux :</h3>
      <ul>
         <li>le sud ;</li>
         <li>le nord ;</li>
         <li>l'est ;</li>
         <li>l'ouest.</li>
      </ul>
    <h3>Un jour comporte :</h3>
      <ol>
         <li>le matin ;</li>
         <li>le midi ;</li>
         <li>l'après-midi ;</li>
         <li>le soir ;</li>
         <li>la nuit ;</li>
         <li>le minuit ;</li>
      </ol>

Aperçu

Les quatre points cardinaux

• le sud ;
• le nord ;
• l'est ;
• l'ouest.

Un jour comporte

1. le matin ;
2. le midi ;
3. l'après-midi ;
4. le soir ;
5. la nuit ;
6. le minuit.

Explications pour les listes numérotées (ordonnées) et listes non ordonnées

• pour insérer une liste énumérative on doit tout d'abord signaler au navigateur de quelle liste s'agit-il : une liste numérotée (ordonnée) ou liste non ordonnée. Et puis pour introduire un élément de liste on doit l'entourer par les deux balises <li> </li> (li : list item : élément de liste).
• les listes numérotées <ol> qui sont précédées d'un chiffre ou une lettre permettent d'introduire une liste d'éléments dont l'ordre est important, tandis qu'une liste non ordonnée fait peu de cas de l'ordre des éléments.
• vous pouvez imbriquer des listes <ol> et <ul>, mettre une balise <ul> dans <ul>, <ul> dans <ol>, <ol> dans <ul> ou <ol> dans <ol>.
• les deux balises <ul> et <ol> sont de type bloc (block), la balise <li> n'est ni de type bloc ni de type en-ligne mais elle est de type "list-item" (la propriété css display).
• la balise de fermeture </li> (pour <ol> et <ul>) n'est pas obligatoire en html, la balise <li> suivante marque la fin de la balise <li> précédente, mais si vous codez en xhtml vous n'avez pas le droit de l'omettre.
• les deux balises <ul> et <ol> ne doivent contenir que les éléments enfants : <li> (donc pas de texte ni un autre élément, seule la balise <li> qui est autorisée à l'intérieur des deux balises <ul> et <ol>).
• les deux éléments <ol> et <ul> peuvent être placés dans les éléments suivants : blockquote, body, button, dd, del, div, fieldset, form, ins, li (dans ce cas il s'agit d'imbrication de listes <ol> et <ul>), map, noscript, object, td et th.
• la balise <li> est si puissante qu'elle peut contenir n'importe quel élément qu'il soit de type bloc ou en-ligne.
• il y a plusieurs propriétés css qui permettent de formater les listes (formatage des listes avec les propriétés css : list-style-type, list-style-image et list-style-position).

Extrait du DTD strict des balises <ul>, <ol> et <li>

<!-- Unordered list -->
<!ELEMENT ul (li)+>
<!ATTLIST ul
 %attrs;
 >
<!-- Ordered (numbered) list -->

<!ELEMENT ol (li)+>
<!ATTLIST ol
 %attrs;
 >

<!ELEMENT li %Flow;>
<!ATTLIST li
 %attrs;
 >

• les éléments ul et ol peuvent contenir un ou plusieurs éléments li "(li)+" ;
• les balises <ul> et <ol> n'ont pas d'attribut dans le DTD strict. Les attributs facultatifs type (ul/ol), compact (ul/ol) et start (ol) ne sont disponibles que dans les variantes "transitional" et "frameset" ;
• la balise <li> accepte tous (%Flow) : texte (PCDATA), éléments de type en-ligne et bloc.

Exemple d'imbrication des listes <ul> et <ol>

Code

<ul> 
   <li>Les balises de type bloc.
   </li> 
   <li>Les balises de type en-ligne : elles se subdivisent elles aussi en deux autres catégories :   
        <ul>    
            <li>Elément en-ligne remplacé.</li>   
            <li>Elément en-ligne non remplacé.</li>    
        </ul> 
   </li>
</ul> 
    

Aperçu

• les balises de type bloc ;
• les balises de type en-ligne : elles se subdivisent elles aussi en deux autres catégories :
  • élément en-ligne remplacé ;
  • élément en-ligne non remplacé.

Explications pour les listes numérotées (ordonnées) et listes non ordonnées

• pour imbriquer une liste énumérative vous devez insérer la balise <ul> ou <ol> dans la balise <li> : c'est-à-dire une nouvelle liste dans un élément de liste.
  • exemple juste : <ol><li></li><li><ul></ul></li></ol>
  • exemple faux : <ul><li></li><ol></ol><li></li></ul> (vous devez imbriquer la balise <ol> dans <li> et non pas <ul>).
• vous pouvez imbriquer infiniment des listes énumératives, et dans tous les sens : <ul> dans <ul>, <ul> dans <ol>, <ol> dans <ul> ou <ol> dans <ol>. A chaque fois que vous imbriquez une liste, elle sera déplacée un petit peu vers la gauche pour se distinguer de la liste mère.

Voilà, un nouveau chapitre passé avec succès Vous savez dorénavant comment utiliser les listes à bon escient. Mais reste encore une autre famille de listes, d'un usage moins fréquent : les listes de définition en XHTML : dl, dt et dd.