TP 05 : Classes et propriété position

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on continue à s'entraîner à modifier le style d'une page avec CSS ; on va un peu plus loin sur les sélecteurs, et on découvre certaines propriétés qui permettent de changer un peu la mise en page.

Avant de commencer, terminez (si ce n'est déjà fait) l'exercice sur les fraises des bois du TP 3. Il est à rendre en même temps que ce TP, c'est-à-dire au plus tard au début du TP 7.

Notes de cours

Exercice 1 — Le retour des fraises des bois #

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/TP05/ex1/fraises.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.

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.

  1. 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
    Capture d’écran d’une partie de la page avec les mots « fraise » en couleur
    (cliquer pour accéder à l’image pleine taille)
  2. Ensuite, récupérer cette image icône de fraise (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
    Capture d’écran de la liste
    (cliquer pour accéder à l’image pleine taille)
  3. 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
    Capture d’écran de l’image avec sa légende
    (cliquer pour accéder à l’image pleine taille)
  4. 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
    Capture animée de l’apparition de la légende au survol par la souris
    (cliquer pour accéder à l’image pleine taille)

Exercice 2 — Listes et menus #

Réaliser un menu avec une liste d'items contenant des liens, puis rédiger des feuilles de style pour présenter le menu sous différentes formes. On pourra réaliser un menu vertical puis horizontal, par exemple.

menu vertical
Un menu vertical.
menu horizontal
Un menu horizontal (regarder la propriété display).

Exercice 3 (optionnel) — Reproduction d’un modèle #

On vous donne une image d'une page web, version simplifiée d'une page du site WikiHow.

Exemple de page à réaliser
Capture d'écran de la page
(Cliquer pour voir en taille réelle ; attention, le fond noir qu'affiche Firefox ne fait pas partie de l'image !)

On vous demande de créer du code HTML5 (valide) et CSS reproduisant ce modèle, aussi fidèlement que possible. Télechargez cette archive, qui contient les images nécessaires et les textes (fichier textes.txt), ainsi qu'une feuille de style CSS qui ajuste la police de la page.

Informations complémentaires

Les couleurs de fond sont le blanc, le vert #93B874, le gris clair #F6F5F4, et le gris foncé #ECEBE8. Les bordures sont en gris #E5E5E5 ou en vert #89AC6C (menu).

La couleur de base du texte est #545454 (brun très sombre). Les autres couleurs de texte sont le blanc (pied de page), le gris #737373 (fil d'Ariane), le noir #242424 (titres), et le vert très sombre #336633 (liens).