Bonjour , après avoir créé ta première page, te voici maintenant en route vers ton premier site. Première étape: les listes.
Avant tout il me semble essentiel de faire le point sur la notion de liste, ce moyen de présentation bien commode pour les énumérations. Un petit dessin valant mieux qu'un long discours, voici pour illustrer mon propos, le nombre des cours disponibles jusqu'à présent :
<UL> </UL> (Unordered List) indique au navigateur le début et la fin d'une liste non ordonnée. En l'état, seule la zone de la page HTML dans laquelle se trouvera la liste est définie: la liste est vide.
Pour lui donner un contenu concret, chacun des éléments composant la liste est introduit à l'intérieur des deux balises par la paire <LI> </LI> (List Item).
Ainsi, la structure de base d'une liste à puces de 5 éléments sera la suivante:
<UL>
<LI> </LI>
<LI> </LI>
<LI> </LI>
<LI> </LI>
<LI> </LI>
</UL>
N.B. : Il est tout à fait possible de se contenter de mettre le tag <LI> seul, mais si l'on veut être strictement conforme au HTML, le tag de fermeture s'impose.
D'autre part, comme le confirmera un examen attentif du code source de cette page, il est possible d'utiliser des balises de mise en forme du texte, d'insertion de lien à l'intérieur du couple <LI> </LI>.
Le HTML n'offre pas autant de possiblité que le traitement de texte en matière de puces, dont l'affichage dépend aussi du navigateur utilisé. Toutefois, il est possible de substituer d'autres puces à celle par défaut. Ceci se fait par l'utilisation de l'attribut TYPE qui peut prendre les valeurs suivantes: disk (par défaut), circle ou square. L'ordre indiqué ici (disk, circle, square) est aussi celui de progression dans l'utilisation des puces pour des listes imbriquées si l'on ne spécifie pas de type pour les puces à employer.
Par exemple, le code source suivant:
<UL>
<LI> Livres </LI>
<UL>
<LI> Livre 1 </LI>
<LI> Livre 2 </LI>
</UL>
<LI> CDs </LI>
<UL>
<LI> Genre 1 </LI>
<UL>
<LI> Interpète 1 </LI>
<LI> Interpète 2 </LI>
</UL>
<LI> Genre 2 </LI>
</UL>
<LI> Vidéos </LI>
<LI> DVDs </LI>
</UL>
affichera
Le principe est le même que pour les listes non ordonnées: <OL> </OL> (Ordered List) indique au navigateur le début et la fin d'une liste ordonnée et la paire <LI> </LI> sert à en introduire chacun des éléments qui sera automatiquement numéroté par le navigateur.
De façon évidente, la structure de base d'une liste ordonnée de 3 éléments sera la suivante:
<OL>
<LI> </LI>
<LI> </LI>
<LI> </LI>
</OL>
Là aussi, on utilise l'attribut TYPE avec les valeurs suivantes: A (lettres majuscules), a (lettres minuscules), i (petits chiffres romains), I (grands chiffres romains) - 1 étant la valeur par défaut.
L'attribut START permet de spécifier à partir de quel niveau la numérotation doit commencer; ainsi, le code source suivant:
<OL TYPE="A" START="8">
<LI>Elément 1</LI>
<LI>Elément 2</LI>
<LI>Elément 3</LI>
</OL>
affichera :
Utilisées au départ pour répertorier des définitions (d'où le nom !) ces listes connaissent d'autres usages.
<DL> </DL> (Definition List) indique au navigateur le début et la fin d'une liste de définition et la paire <DT> (Definition Term) et <DD> (Definition Data) sert à en introduire les éléments: un terme et sa définition.
Le code source suivant :
<DL>
<DT>Elément 1
<DD>Remarque 1
<DD>Remarque 2
<DD>Remarque 3
<DT>Elément 2
<DD>Remarque 1
<DT>Elément 3
<DD>Remarque 1
<DD>Remarque 2
<DD>Remarque 3
<DD>Remarque 4
</DL>
affichera :
Créer des listes n'est pas bien compliqué mais cet exercice demande de la rigueur, surtout à partir du moment où l'on commence à imbriquer des listes. Plus que jamais, je renouvelle mon conseil de toujours faire suivre la frappe d'une balise de sa contre-balise et de travailler à l'intérieur de l'espace ainsi défini: c'est une bonne façon de limiter le risque d'erreur dans le code source.
La balise <MENU> </MENU> permet aussi de créer des listes non ordonnées, mais son usage est tombé en désuétude au profit de <UL> </UL>.
Phoebe 05/05/2001
www.ASP-PHP.net