Vous êtes sur la page 1sur 5

Exercices HTML

www.rahmouni.ma

Listes, texte prformat


Thme
Savoir utiliser les diffrents types de listes HTML et le mode "prformat".

Balises

Liste puce ("Unnumbered") : <UL {TYPE="disc|circle|square"}> <LI> lment {</LI>} <LI> lment {</LI>}
</UL>

ou dfinition d'une puce-image par la proprit CSS "liststyle-image" (pour N>4 et IE3)
<UL STYLE="list-style-image: URL(image.gif)">

Liste numrote ("Ordered") : <OL {START="no"} {TYPE="1|a|A|i|I"}> <LI> lment {</LI>} <LI> lment {</LI>}
</OL>

Liste descriptive (glossaire) : <DL {COMPACT}> <DT> terme {</DT>} <DD> description du terme {</DD>}
</DL>

Texte prformat : <PRE> portion de texte affiche en police "chasse fixe" et dans laquelle les caractres "espaces", "tab" et "cr" sont interprts </PRE>

Les diffrents types de listes dcrits ci-dessus peuvent tre emboits les uns dans les autres !

Exercices HTML

www.rahmouni.ma

Exercice
Ralisez les diffrentes listes suivantes :
Etape Liste puce :

Adresse : EPFL, CH1015 Lausanne Tl : +41 (0)21 693 27 73 Fax : +41 (0)21 693 27 27 E-mail : Jules.Ducommun@epfl.c h

Liste dont les puces sont constitues d'une image : 2


blabla blabla blabla bla blabla

Combinaison de listes numrote et puce : 1. Ecole primaire : 1re : Yverdon 2e-3e : Echallens 2. Ecole secondaire : o 1re-3e : Echallens o 4e-6e scient. : Lausanne, Bthusy 3. Gymnase : Lausanne, La Cit 4. Universit : Lausanne, facult Physique

4 Liste descriptive : 5 1990 Certificat de fin d'tudes

Exercices HTML
secondaires 1993 1998 Maturit scientifique Licence en physique. Travail de mmoire ralis dans le domaine des capteurs...

www.rahmouni.ma

6 Affichez le petit dessin cidessous (texte prformat) 7


|| /==||====\ / \ /============\ | _ __ | | | | |__| | |_|_|______|

Exercices HTML

www.rahmouni.ma

Solution
Etape Liste puce :

Solution

Adresse : EPFL, CH1015 Lausanne Tl : +41 (0)21 693 27 73 Fax : +41 (0)21 693 27 27 E-mail : Jules.Ducommun@epfl.c h

<UL> <LI>Adresse : EPFL, CH-1015 Lausanne <LI>Tl : +41 (0)21 693 27 73 <LI>Fax : +41 (0)21 693 27 27 <LI>E-mail : Jules.Ducommun@epfl.ch </UL>

Liste dont les puces sont constitues d'une image : 2


blabla blabla blabla bla blabla

<UL STYLE="list-style-image: URL(star.gif)"> <LI>blabla blabla <LI>blabla bla blabla </UL>

ou
<IMG SRC=star.gif> blabla blabla<BR> <IMG SRC=star.gif> blabla bla blabla<BR> <OL> <LI>Ecole primaire : <UL TYPE="disc"> <LI>1re : Yverdon <LI>2e-3e : Echallens </UL> <LI>Ecole secondaire : <UL TYPE="circle"> <LI>1re-3e : Echallens <LI>4e-6e scient. : Lausanne, Bthusy </UL> <LI>Gymnase : <UL TYPE="square"> <LI>Lausanne, La Cit </UL> <LI>Universit : <UL TYPE="square"> <LI>Lausanne, facult Physique </UL> </OL>

Combinaison de listes numrote et puce : 5. Ecole primaire : 1re : Yverdon 2e-3e : Echallens 6. Ecole secondaire : o 1re-3e : Echallens o 4e-6e scient. : Lausanne, Bthusy 7. Gymnase : Lausanne, La Cit 8. Universit : Lausanne, facult Physique

Testez l'effet des attributs START et TYPE dans la liste numrote cidessus <DL> Liste descriptive : 1990 Certificat de fin d'tudes
<DT><B>1990</B> <DD>Certificat de fin d'tudes secondaires <DT><B>1993</B>

Exercices HTML
secondaires 1993 1998 Maturit scientifique

www.rahmouni.ma
<DD>Maturit scientifique <DT><B>1998</B> <DD>Licence en physique. Travail de mmoire ralis dans le domaine des capteurs... </DL>

Licence en physique. Travail de mmoire ralis dans le domaine des capteurs... 6 Testez l'effet de l'attribut COMPACT dans la liste descriptive ci-dessus <PRE> Affichez le petit dessin ci|| dessous (texte prformat) 7
|| /==||====\ / \ /============\ | _ __ | | | | |__| | |_|_|______| /==||====\ / \ /============\ | _ __ | | | | |__| | |_|_|______| </PRE>