I. TP2: HTML (suite)

Université de Provence
L3 Info
Année 2009-2010
OUTILS WEB
I. TP2: HTML (suite)
L’énoncé de ce TP disponible sur http://www.lif.univ-mrs.fr/∼belkhir/OW/tp2.pdf
Images réactive
• Télécharger l’image se trouvant sur:
http://elfevalou.unblog.fr/files/2006/10/orage.lumiere.jpg, et créer une page HTML ne comportant que cette image.
• La rendre globalement active : en cliquant sur cette image, on arrive à une URL par défaut au choix.
• Définir dans l’image une zone circulaire, une zone rectangulaire et une zone polygonale, en essayant de
les faire coı̈ncider avec des parties reconnaissables, et rendre ces zones actives en les liant à des URL.
Cadres (frames)
Créer une page index.html qui continedera trois cadre: Left, Middle1, Middle2 et Middle3 comme le montre
la figure suivante
Middle1: L=70%, H=40%
Left: L=30%,
H=100%
Middle2: L=70%, H=30%
Middle3: L=70%, H=30%
Le cadre left affichera la page left.html, il continedera une liste non ordonnée des liens :
• CV
• Chessbase
• Image
Le lien CV affichera la page CV.html ( celle du TP1) sur le cadre Middle1, et Chessbase est un lien vers
http://chessbase.com/ qui s’affichera sur le cadre Middle2. L’item Image affichera une image de votre
choix sur le cadre Middle3.
1
Feuilles de Style CSS
1. Création de la feuille de style: Créez une page style.css qui définira le style suivant :
• Une classe titre sur la balise <DIV> où le texte sera noir sur fond gris, gras, de police Arial 18 pts
et centré. Les minuscules devront être converties en capitales minuscules, et lorsque le curseur
passera au-dessus de cette zone il devra se transformer en sablier.
• Une classe photo sur la balise <IMG> qui affichera une image en haut à droite de la page (à 30
pixels du haut et 50 du bord droit), encadrée par une bordure noire en pointillés larges d’un pixel.
• Une classe diplôme sur la balise <TABLE> qui affichera une table centrée sur la page, de bordure
2 pixels telle que :
–
–
–
–
les bordures des cellules soient larges d’un pixel,
la première colonne soit alignée à gauche et en gras (Année),
la seconde colonne soit centrée (Diplôme),
la troisième colonne soit alignée à gauche, en italique (Lieu d’obtention)
• Pour les listes, la couleur des éléments sera le bleu et la puce sera un cercle vide (listes non
ordonnées) ou une numérotation romaine majuscule (listes ordonnées)
• dans le cas général, la police utilisée sera noire, de taille 14 pts, et par ordre de préférence.
Verdana, Times New Roman, Serif
2. Création de la page HTML: Créez une page cv.html utilisant le style définit précédemment, et contenant les données du TP1 auxquelles on ajoutera une image en haut à droite.
3. Modifications
Sauvegardez une copie de votre feuille de style et de votre page html, puis :
• Modifiez la classe photo de sorte que l’image ne soit plus soumise au defilement
• Ajoutez une contrainte dans le document html sur la couleur de fond (bleu) des balises <DIV>
de la classe titre. Que constatez-vous ?
• Faites de votre image un lien vers http://www.debian.org. De quelle couleur sera la bordure
avant d’avoir cliqué sur l’image ? Comment la rendre noire dans tous les cas ? Dans le navigateur,
imposez que la taille des polices affichées soit 8 pts. Que constatez- vous ?
NB. Complément sur les feuilles de style CSS:
http://www.commentcamarche.net/contents/css/cssproperty.php3
2