2 - Exercice HTML Listes a Puces Listes Numerotees Listes Descriptives Texte Preform Ate

5/10/2018 2 - Exercice HTML Listes a Puces Listes Numerotees Listes Descriptives Texte Preform At...

http://slidepdf.com/reader/full/2-exercice-html-listes-a-puces-listes-numerotees-listes-descriptives-

Exercices HTML www.rahmouni.ma

Listes, texte préformaté

Thème

Savoir utiliser les différents types de listes HTML et le mode"préformaté".

Balises

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

<LI> élément { </LI> } </UL>

ou définition d'une puce-image par la propriété CSS "list-style-image" (pour N>4 et IE≥3)

<UL STYLE="list-style-image: URL(image.gif )"> Liste numérotée ("Ordered") :

<OL {START="no "} {TYPE="1|a|A|i|I"}> <LI> élément { </LI> } <LI> élément { </LI> }

</OL> Liste descriptive (glossaire) :

<DL {COMPACT}> <DT> terme { </DT> }

<DD> description du terme { </DD> } </DL>

Texte préformaté : <PRE> portion de texte affichée en police "chasse fixe" et dans laquelle les caractères "espaces", "tab" et "cr"

sont interprétés </PRE>

Les différents types de listes décrits ci-dessus peuvent êtreemboités les uns dans les autres !




Exercice

Réalisez les différentes listes suivantes :

Etape

1

Liste à puce :

Adresse : EPFL, CH-1015 Lausanne

Tél : +41 (0)21 693 2773

Fax : +41 (0)21 693 2727

E-mail :[email protected]

2

Liste dont les puces sontconstituées d'une image :

blabla blabla blabla bla blabla

3

Combinaison de listesnumérotée et à puce :

1. Ecole primaire : 1ère : Yverdon 2e-3e : Echallens

2. Ecole secondaire :o 1ère-3e :

Echallenso 4e-6e scient. :

Lausanne, Béthusy3. Gymnase :

Lausanne, La Cité4. Université :

Lausanne, facultéPhysique

4

5

Liste descriptive :

1990 Certificat de fin d'études




secondaires

1993 Maturité scientifique

1998 Licence en physique.Travail de mémoireréalisé dans le domainedes capteurs...

6

7

Affichez le petit dessin ci-dessous (texte préformaté)

||

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




Solution

Etape Solution

1

Liste à puce :

Adresse : EPFL, CH-1015 Lausanne

Tél : +41 (0)21 693 2773

Fax : +41 (0)21 693 2727

E-mail :[email protected]

<UL> <LI>Adresse : EPFL, CH-1015 Lausanne <LI>Tél : +41 (0)21 693 27 73 <LI>Fax : +41 (0)21 693 27 27 <LI>E-mail : [email protected] </UL>

2

Liste dont les puces sontconstituées d'une image :

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 <IMG SRC=star.gif> blabla bla blabla 

3

Combinaison de listes

numérotée et à puce :

5. Ecole primaire : 1ère : Yverdon 2e-3e : Echallens

6. Ecole secondaire :o 1ère-3e :

Echallenso 4e-6e scient. :

Lausanne, Béthusy

7. Gymnase : Lausanne, La Cité

8. Université : Lausanne, faculté

Physique

<OL>

<LI>Ecole primaire : <UL TYPE="disc"> <LI>1ère : Yverdon <LI>2e-3e : Echallens </UL>

<LI>Ecole secondaire : <UL TYPE="circle"> <LI>1ère-3e : Echallens <LI>4e-6e scient. : Lausanne,

Béthusy </UL>

<LI>Gymnase : <UL TYPE="square">

<LI>Lausanne, La Cité </UL> <LI>Université :

<UL TYPE="square"> <LI>Lausanne, faculté Physique </UL>

</OL>

4Testez l'effet des attributs START et TYPE dans la liste numérotée ci-dessus

5

Liste descriptive :

1990 Certificat de fin d'études

<DL> <DT>1990

<DD>Certificat de fin d'étudessecondaires <DT>1993




secondaires

1993 Maturité scientifique

1998 Licence en physique.Travail de mémoireréalisé dans le domainedes capteurs...

<DD>Maturité scientifique <DT>1998

<DD>Licence en physique. Travailde mémoire

réalisé dans le domaine des

capteurs... </DL>

6 Testez l'effet de l'attribut COMPACT dans la liste descriptive ci-dessus

7

Affichez le petit dessin ci-dessous (texte préformaté)

||

/==||====\/ \

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

<PRE> ||

/==||====\

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

</PRE>

Documents

2 - Exercice HTML Listes a Puces Listes Numerotees Listes Descriptives Texte Preform Ate