Savoir utiliser les différents types de listes HTML et le mode "préformaté".
<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)">
<ol {start="numéro"} {type="1,a,A,i,I"}>
<li> élément {</li>}
<li> élément {</li>}
</ol>
<dl {compact}>
<dt> terme {</dt>}
<dd> description du terme {</dd>}
</dl>
<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 !
Réalisez les différentes listes suivantes :
| Etape | Solution | |
|---|---|---|
| 1 | Liste à puce :
|
<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 :
|
<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 :
|
<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 :
|
<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>
|