 |
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="numéro"} {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 être emboités les uns dans les autres !
Exercice
Réalisez les différentes listes suivantes :
| |
Etape |
Solution |
| 1 |
Liste à puce :
- Adresse : EPFL, CH-1015 Lausanne
- Tél : +41 (0)21 693 27 73
- Fax : +41 (0)21 693 27 27
- E-mail : Jules.Ducommun@epfl.ch
|
<ul>
<li>Adresse : EPFL, CH-1015 Lausanne</li>
<li>Tél : +41 (0)21 693 27 73</li>
<li>Fax : +41 (0)21 693 27 27</li>
<li>E-mail : Jules.Ducommun@epfl.ch</li>
</ul>
|
| 2 |
Liste dont les puces sont constituées d'une image :
- blabla blabla
- blabla bla blabla
|
<ul style="list-style-image: url(images/lism.gif)">
<li>blabla blabla</li>
<li>blabla bla blabla</li>
</ul>
ou
<img src="images/lism.gif" /> blabla blabla<br>
<img src="images/lism.gif" /> blabla bla blabla<br>
|
| 3 |
Combinaison de listes numérotée et à puce :
- Ecole primaire :
- 1ère : Yverdon
- 2e-3e : Echallens
- Ecole secondaire :
- 1ère-3e : Echallens
- 4e-6e scient. : Lausanne, Béthusy
- Gymnase :
- Université :
- Lausanne, faculté Physique
|
<ol>
<li>Ecole primaire :
<ul type="disc">
<li>1ère : Yverdon</li>
<li>2e-3e : Echallens</li>
</ul>
</li>
<li>Ecole secondaire :
<ul type="circle">
<li>1ère-3e : Echallens</li>
<li>4e-6e scient. : Lausanne, Béthusy</li>
</ul>
</li>
<li>Gymnase :
<ul type="square">
<li>Lausanne, La Cité</li>
</ul>
</li>
<li>Université :
<ul type="square">
<li>Lausanne, faculté Physique</li>
</ul>
</li>
</ol>
|
| 4 |
Testez l'effet des attributs START et TYPE dans la liste numérotée ci-dessus |
| 5 |
Liste descriptive :
- 1990
- Certificat de fin d'études secondaires
- 1993
- Maturité scientifique
- 1998
- Licence en physique.
Travail de mémoire réalisé dans le domaine...
|
<dl>
<dt><strong>1990</strong></dt>
<dd>Certificat de fin d'études secondaires</dd>
<dt><strong>1993</strong></dt>
<dd>Maturité scientifique</dd>
<dt><strong>1998</strong></dt>
<dd>Licence en physique.<br>
Travail de mémoire réalisé dans le domaine...</dd>
</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>
|
|
|
[ 1 129 544 ]
Vous êtes ici : 
[436] Posts sur le forum
[514] Membres inscrits
0 Membre
Publicité 
Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers.
