Dans le vieil étang
Une grenouille saute
Un ploc dans l'eau !
Basho
Pour me contacter : igrimeau(at)univ-mlv.fr
Toute la documentation nécessaire à la compréhension de ce TD peut être trouvée dans les chapitres 8 à 11 de la norme:
Comme on l'a vu dans les TDs précédents on emploie en
HTML des balises pour formater un document. On peut
ainsi utiliser la balise <p>
pour
définir un paragraphe. Dans ce paragraphe on pourra
utiliser la balise <em>
pour mettre
en valeur une partie du texte. Mais si l'on veut pouvoir
tirer le maximum possible du couple HTML/CSS, il est
important de comprendre comment le navigateur interprète
ces balises lors du rendu du document à l'écran.
Pour comprendre comment le navigateur fonctionne il faut connaître les deux notions de base qui sont utilisées lors du rendu. La première notion de base est la notion de boite. La seconde est la notion de mise en page (layout en anglais).
Pour expliquer les choses simplement, le contenu de tout
élément appartient à une boite. Chaque boite en plus de
son contenu possède 3 bords imbriqués les uns
dans les autres: un padding, une border,
et une margin. La figure qu'on peut trouver dans
la norme à l'endroit suivant
montre à quoi correspondent ces bords. Les dimensions du contenu de la boite sont censées être contenues respectivement dans les attributs width
et height
.
Ensuite lorsque l'on parle de mise en page en HTML il
faut savoir que l'on manipule diverses catégories de boites
(la catégorie en question est définie par l'attribut
display
).
Il y a tout d'abord les blocs, qui sont entassés les
uns à coté des autres ou les uns au dessus des autres.
Par exemple un paragraphe est un bloc. On trouve ensuite
principalement des boites "en ligne" comme celles générées
par du simple texte ou encore par les balises telles
que <em>
ou bien <i>
qui
sont généralement employées pour changer les propriétés du texte.
On trouve également quelques autres catégories de boites
qui sont décrites dans la documentation.
Chaque boite en plus de son niveau possède un attribut
définissant comment il doit être positionné. Cet attribut
peut prendre 4 valeurs différentes:
static
,
absolute
,
relative
ou
fixed
.
Dans le cas d'un positionnement autre que static
on peut spécifier les valeurs top
, left
,
bottom
, right
pour indiquer la position
de la boite.
Une fois connu le type de boite auquel on a affaire, on peut les positionner dans le document. Les règles employées sont elles aussi décrites dans la documentation.
Utilisez les propriétés de padding
, de border
,
et de margin
de l'élément body de votre page de façon
à avoir:
Vous vous arrangerez pour utiliser le moins de propriétés CSS possibles.
On peut créer facilement une boite de type block
en utilisant un élément <div>. Modifiez votre feuille
de style pour appliquer le style défini ci dessus à un élément
de ce type. Ensuite vous transférerez le contenu de votre page
dans un tel élément. Que peut-on dire de la marge?
Créez une nouvelle page dans laquelle vous placerez 4 images différentes. La première devra être positionnée statiquement. La seconde devra être positionnée relativement avec un bord gauche situé à -10 pixels de l'endroit où il devrait être. La troisième devra être positionnée absolument en bas et à droite du document, à 7 pixels des bords. La quatrième enfin devra être positionnée de façon fixe en bas et au centre de l'écran.
Il existe dans la norme CSS ce que l'on appelle des
pseudo-classes. Pour avoir tous les détails regardez la
documentation.
Pour l'instant nous ne nous intéresserons qu'à une seule
d'entre elles: la pseudo-classe hover
.
Cette classe permet d'altérer le style d'un élément lorsque
l'on passe la souris au dessus de lui comme dans l'exemple
suivant:
<html> <head> <style type="text/css"> <!-- div.button { background: white; color: black; padding: 5px; border: thin solid black; } div.button:hover { background: black; color: white; border: thin solid white; } --> </style> </head> <body> <div class="button">bouton 1</div> <div class="button">bouton 2</div> <div class="button">bouton 3</div> </body> </html>
Ce petit bout de code permet d'obtenir des éléments
<div>
dont la couleur de fond et la
couleur de texte changent quand on passe au dessus:
Il est également possible de modifier le style d'un élément autre que l'élément sur lequel on pointe si l'élément en question est un descendant de l'élément pointé:
<html> <head> <style type="text/css"> <!-- p.hover_example:hover span { color: red; } --> </style> </head> <body> <p class="hover_example"> Si vous passez la souris au dessus de ce paragraphe alors toute la partie de ce paragraphe contenue dans le span changera de couleur: <span><span>la partie du paragraphe contenue dans le span</span></span>.</p> </body> </html>
Qui permet de changer la couleur du contenu d'un span descendant d'un paragraphe lorsque l'on passe la souris au dessus de ce dernier:
Si vous passez la souris au dessus de ce paragraphe alors toute la partie de ce paragraphe contenue dans le span changera de couleur: <span>la partie du paragraphe contenue dans le span</span>.
En utilisant cette technique, disposez 10 d'images dont
les id prendront les valeurs "b01" à "b10" sur une
nouvelle page et faites en sorte que lorsque l'on passe
sur l'une d'entre elles une image fixée en bas à gauche
de l'écran et contenant l'image à sa taille originale
apparaisse. Vous pourrez pour ce faire utiliser la
propriété display
en alternant sur les
valeurs block
et none
.
Vous tricherez bien évidemment... En effet rien ne vous
empêche d'avoir plusieurs boites avec les diverses
images plutôt qu'un boite dont vous changeriez le
contenu
Créez une page contenant 100 boites de largeur 1 pixel
positionnées les unes à cotés des autres. Ajouter à
cette page une image de superman. Faites en sorte que
lorsque l'on passe au dessus d'une des 100 boites l'image
de superman soit alignée à gauche avec cette image.
Amusez vous ensuite à faire voler superman en passant
plus ou moins vite de la gauche vers la droite sur les
100 boites !!! Amusez vous bien.
Envoyez votre travail par e-mail avec pour sujet "[IMAC1] HTML/CSS - TD3". Vous publierez également la sur votre compte étudiant.