Exercice HTML : Listes, texte préformaté

Thème

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

Balises

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

Références

Exercice

Réalisez les différentes listes suivantes :

 EtapeSolution
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>Tél : +41 (0)21 693 27 73
<LI>Fax : +41 (0)21 693 27 27
<LI>E-mail : Jules.Ducommun@epfl.ch
</UL>
2 Liste dont les puces sont constitué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<BR>
<IMG SRC=star.gif> blabla bla blabla<BR>
3 Combinaison de listes numérotée et à puce :

  1. Ecole primaire :
    • 1ère : Yverdon
    • 2e-3e : Echallens
  2. Ecole secondaire :
    • 1ère-3e : Echallens
    • 4e-6e scient. : Lausanne, Béthusy
  3. Gymnase :
    • Lausanne, La Cité
  4. 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>
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 des capteurs...
<DL>
<DT><B>1990</B>
  <DD>Certificat de fin d'études secondaires
<DT><B>1993</B>
  <DD>Maturité scientifique
<DT><B>1998</B>
  <DD>Licence en physique. Travail de 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>


Exercices HTML © J.-D. Bonjour / ENAC-IT1, EPFL / Révision 2.6.2002