TD: Feuilles de style HTML4 (CSS2)

Travail à effectuer

Avant de commencer, il est nécessaire d'avoir lu au moins une fois complètement les supports de cours sur les CSS : celui de UNGI et celui de Luc Van Lancker. Ne commencez qu'après celà !

Les exercices suivants sont assez difficiles. Pour commencer avec les CSS, il est conseillé de prendre un exemple (copiez chez vous le fichier ~devernay/www/fd.css) et d'essayer de bien le comprendre, puis de le modifier à votre goût.

Essayez de répondre à ces questions sur la feuille de style fd.css :

  1. Sur quels éléments HTML agissent les propriétés affectées au sélecteur BODY ?
  2. Comment modifier la couleur de fond (Palette de couleurs), l'image de fond, et la façon dont se répète cette image (horizontalement/verticalement) ?
  3. A quoi sert le sélecteur H1.centered ? Comment l'utiliser depuis HTML ? Faites un essai.
  4. Modifiez la marge gauche du document. La marge gauche de l'élément H3 se mesure-t-elle par rapport à=au bord du navigateur ? Quelle est son unité ? Modifiez-la et observez.
  5. Les attributs du sélecteur LI ont-ils un effet sous netscape ? Sous mozilla ou netscape 6 ?
  6. A quoi servent les attributs du sélecteur IMG.left-floating ?
  7. A quoi sert le sélecteur SPAN.sc-ex (remarque: il ne marche que sous mozilla) ? Pourquoi a-t-on du le dériver de SPAN ?
  8. Comment feriez-vous pour marquer du texte clignotant en utilisant les CSS ?
  9. La dernière partie de la CSS, concernant le sélecteur P.navigationbar, sert à décorer une barre de navigation à placer en heut ou en bas de chaque page html, contenant des liens. Essayez ce sélecteur.

Viennent ensuite les questions plus difficiles :

  1. Reprendre le deuxième document du TD HTML. Insérer le logo de l'UNSA à gauche du premier paragraphe. Puis ajouter un deuxième paragraphe à la suite en faisant en sorte d'obtenir le flot suivant: 
    *********  premier paragraphe ---
|       |  ----------------------
|  logo |  ------
|       |  
*********
2eme paragraphe -----------------
  2. Que voit-on à la place du logo lorsque l'on utilise Lynx ? Si rien, que doit-on faire ?
  3. Peut-on créer la table des matières suivante ? 
        1. Première Section
      1.1 Première sous section
      1.2 Deuxième sous section
    2. Deuxième Section
    Commentaires?
  4. "Linker" la moitié gauche du logo à la Home page de l'UNSA, et la moitié droite à votre Home page.
  5. Comment peut-on obtenir un titre de section encadré comme suit? 
    -------------------------------------------------------------
| Titre de Section Encadré                                  |
-------------------------------------------------------------
    Commentaires?
  6. A partir du document HTML suivant: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <TITLE>Mon document</TITLE>
</HEAD>
<BODY>
<H1>Mon document</H1>
<p>Dimanche était une très bonne journée pour ceux qui pratiquent la
planche à voile. Le vent soufflait très fort et le soleil
brillait. <p>Mais tout ceci est déjà loin et maintenant nous devons
travailler <a href="http://www.w3.org/TR/REC-CSS2">CSS2</a>.
</BODY>

    Spécifier le style suivant à l'aide d'un élément STYLE:

  7. Centrer le titre (H1) à l'aide de l'attribut style.
  8. Définir une classe "important" de telle sorte que les mots "très" soient en italiques rouges.
  9. Transformer l'élément STYLE en une feuille de style externe appelée "docstyle.css".
  10. A l'aide de l'attribut id, donner au second paragraphe une police de caratère "monospace".
  11. Mettre les deux paragraphes dans un cadre avec un fond gris (#ddd).