TP 06 : Images de fond

Objectifs

Dans ce TP, on manipule les images de fond en CSS.

Travail personnel

Exercice 1 — Champignons et images de fond #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW1-2026/TP06/ex1/champignon.html

(en remplaçant LOGIN par votre nom de login). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGINS" />

en remplaçant LOGINS par les noms de login des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Télécharger cette archive, elle contient une arborescence avec un fichier HTML (vous pouvez voir ici l'apparence initiale de la page), un fichier CSS et une image. Créer un répertoire bien nommé au bon endroit sur votre serveur (voir les instructions dans l'encadré rouge ci-dessus), et décompressez l'archive dedans. Ouvrez l'URL correspondante sur votre navigateur (NB: l'URL dans la barre d'adresse doit commencer par https://, sinon c'est que vous ne regardez pas la bonne page ; demandez de l'aide).

Suivez les instructions dans le fichier HTML. Attention, vous ne devez (quasiment) pas le modifier, et vous ne devez pas changer l'arborescence des fichiers !

Au cas où, je mets à votre disposition une capture d'écran de la page une fois toutes les questions faites. Cela peut aider si vous ne comprenez pas ce qui est attendu sur une question, ou si vous voulez vérifier le résultat.

Exercice 2 (optionnel) — Le retour des fraises des bois #

Inspiré d’un exercice d’Hervé Le Crosnier

NB: cet exercice n'est pas à rendre. Il est destiné à celles et ceux qui ne sont pas en retard sur les TP — finissez en priorité les TP précédents !

On reprend la page sur les fraises des bois d'un précédent TP. Commencer par copier-coller l'ensemble du répertoire correspondant, pour pouvoir travailler sur ce nouvel exercice sans risquer de casser l'ancien.

Tout d'abord, on va mettre en couleur toutes les occurrences des mots « fraise » et « fraisier ». Pour ce faire, ajoutez une classe fraise aux mots en question, grâce à des éléments span (qui n'ont pas de sémantique intrinsèque). Modifiez ensuite le CSS pour que les éléments de la classe fraise soient colorés, par exemple avec le rendu suivant :

Capture d’écran d’une partie de la page avec les mots « fraise » en couleur
(cliquer pour accéder à l’image pleine taille)
Ensuite, récupérer cette image (source : PinClipArt) et l'utiliser dans le CSS pour que la liste s'affiche comme sur la capture suivante.

Capture d’écran de la liste
(cliquer pour accéder à l’image pleine taille)
Ensuite, faire en sorte que la légende de la première image (et uniquement celle-là) s'affiche par-dessus l'image elle-même, comme dans la capture suivante. Il va falloir modifier la position de la légende : renseignez-vous sur la propriété CSS position et ses différentes valeurs, par exemple ici (en français) ou ici (en anglais mais plus clair).

Capture d’écran de l’image avec sa légende
(cliquer pour accéder à l’image pleine taille)
Optionnel (pour les plus à l'aise) : essayer de faire en sorte que cette légende n'apparaisse que quand l'internaute survole l'image avec sa souris :

Capture animée de l’apparition de la légende au survol par la souris
(cliquer pour accéder à l’image pleine taille)