TP 10 : Pratique CSS avancée

Licence Humanités Numériques 1ère année

Jean-Marc Lecarpentier — Justine Reynaud

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Une page sur les dinosaures #

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

https://dev-NUMETU.users.info.unicaen.fr/1HU91/TP10/ex1/dinosaures.html
(en remplaçant NUMETU par le numéro correspondant). 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="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

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

Vous avez jusqu'au vendredi 19 février pour terminer l'exercice et le déposer sur votre serveur web.

Cette archive contient le texte et les images nécessaires à l'exercice. Conserver la structure du dossier.

On veut réaliser la page ayant le rendu final suivant :

Capture d'écran de la page sur les dinosaures
Capture d'écran de la page sur les dinosaures

Dans un premier temps, compléter le HTML là où cela est demandé (Commentaires <!--TODO ... --> dans le code). Une fois que c'est fait, vous pouvez supprimer les commentaires. Vous ne devez rien modifier d'autre dans le code !

Dans un deuxième temps, vous devrez compléter le CSS, qui se présente comme un texte à trous. Il n'y a aucun nouveau style à définir, à vous de retrouver les bons sélecteurs et attributs !

La mise en forme de la liste des dinosaures se décompose en plusieurs étapes :

  1. Mettre une couleur de fond à tous les éléments <li>.
  2. Mettre une couleur de fond à un élément <li> sur deux. À ce stade, le rendu devrait être le suivant :
    Capture d'écran de la liste sans la grille
    Capture d'écran de la page sans la grille
  3. Disposer la liste sous forme de grille.
  4. Enfin, ajouter une couleur différente lors du survol de l'élément :
    Capture d'écran du changement de couleur au survol
    Capture d'écran du changement de couleur au survol

Pour les plus avancés : ajoutez un sélecteur et un style qui permettent de changer l'aspect du premier paragraphe de chaque section