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 :
- Sur quels éléments HTML agissent les propriétés affectées au
sélecteur BODY ?
- 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)
?
- A quoi sert le sélecteur H1.centered ? Comment l'utiliser
depuis HTML ? Faites un essai.
- 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.
- Les attributs du sélecteur LI ont-ils un effet sous netscape ?
Sous mozilla ou netscape 6 ?
- A quoi servent les attributs du sélecteur IMG.left-floating
?
- 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 ?
- Comment feriez-vous pour marquer du texte clignotant en
utilisant les CSS ?
- 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 :
- 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 -----------------
- Que voit-on à la place du logo lorsque l'on utilise Lynx ? Si
rien, que doit-on faire ?
- 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?
- "Linker" la moitié gauche du logo à la Home page de l'UNSA, et
la moitié droite à votre Home page.
- Comment peut-on obtenir un titre de section encadré comme suit?
-------------------------------------------------------------
| Titre de Section Encadré |
-------------------------------------------------------------
Commentaires?
- 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:
- fond blanc
- texte noir
- liens hypertextes en vert
- liens hypertextes actifs dans la couleur RGB hexa: #FF0
- liens hypertextes visités dans la couleur RGB deci: 125, 125,
125
- police de caractère: sans-serif
- Centrer le titre (H1) à l'aide de l'attribut style.
- Définir une classe "important" de telle sorte que les mots
"très" soient en italiques rouges.
- Transformer l'élément STYLE en une feuille de style externe
appelée "docstyle.css".
- A l'aide de l'attribut id, donner au second paragraphe une
police de caratère "monospace".
- Mettre les deux paragraphes dans un cadre avec un fond gris
(#ddd).