TP 06 : Images de fond et sélecteurs simples

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on manipule les images de fond en CSS et on révise les sélecteurs simples au passage.

Avant de commencer, terminez (si ce n'est déjà fait) l'exercice avec Marylin et Tom du TP 4. Il est à rendre en même temps que ce TP, c'est-à-dire au plus tard au début du TP 8.

Notes de cours

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-2022/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.

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 !