TP 9 : Sélecteurs avancés

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Le premier exercice vise à vous faire découvrir les sélecteurs avancés. Le deuxième est l'occasion de travailler encore la mise en page simple, mais aussi d'utiliser les sélecteurs avancés en pratique pour ajouter des éléments interactifs à une page.

Notes de cours

Exercice 1 — Application des sélecteurs avancés #

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/TW1/TP09/ex1/index.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="NUMETUS" />
en remplaçant NUMETUS par les numéros 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 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> 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.

Récupérer cette page HTML (archive) et l'utiliser pour tester les différents sélecteurs avancés en répondant aux questions suivantes, sans changer le code HTML (sauf pour mettre vos numétus dans l’entête).

  1. Pour commencer, réduire la largeur du body, par exemple à 40 em, ce qui permet d'avoir des lignes d'environ 80 caractères quelle que soit la taille de la police.
  2. Mettre en valeur la première lettre de chaque paragraphe, soit en modifiant sa taille ou sa couleur, soit en en faisant une lettrine (drop cap).
    1. Mettre en italique la première ligne de chaque paragraphe.
    2. Modifier votre règle pour que seule la première ligne du premier paragraphe de chaque partie soit en italique.
  3. Faire en sorte que l'alignement des titres soit alterné, une fois à gauche, une fois à droite. Les paragraphes doivent rester en place.
  4. Le dernier paragraphe contient uniquement une formule consacrée.
    1. Le mettre en valeur comme vous le voulez (centré, gras…).
    2. Est-ce que la méthode que vous avez employée vous semble correcte (c'est-à-dire propre, robuste, sémantique…) ? Si vous aviez le droit de modifier le HTML, auriez-vous choisi la même solution ?
  5. Ajouter le caractère de décoration suivant : « ❦ » au début et à la fin de chaque titre de partie. (NB : vous pouvez le copier tel quel dans le CSS, c'est un caractère comme un autre.)
  6. Mettre ce caractère de décoration en rouge.
  7. Faire en sorte qu'au survol d'un paragraphe, la couleur du texte qu'il contient change.
  8. Faire en sorte que lorsque l'on clique sur un titre (sans relâcher), un cadre de couleur apparaisse autour, et que le titre se retrouve centré dans ce cadre.
  9. Faire en sorte que lorsque l'on survole un paragraphe, les éléments em qu'il contient soient soulignés.
  10. Faire en sorte qu'au survol d'un paragraphe, sa couleur de fond et celle du paragraphe suivant (dans la même partie) changent.
  11. (Optionnel) En n'utilisant qu'une seule règle CSS, faire en sorte que tous les titres apparaissent en petites capitales, sauf lorsqu'ils sont survolés.
  12. (Optionnel) Faire en sorte qu'au survol d'un titre, les paragraphes de cette partie changent de couleurs de texte et de fond, mais pas les autres. Attention, la solution est simple, mais pas évidente à trouver ; ne pas hésiter à demander de l'aide. (Indice : ce n'est pas faisable avec une seule règle.)

Exercice 2 — Angry Birds et menus déroulants #

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

Attention, cet exercice n’est pas optionnel : il n’est pas indiqué comme étant à rendre car il est à cheval sur les TP 9 et 10. (Il sera évalué en même temps que l’autre exercice du TP 10.)

Il s'agit de réaliser une page HTML + CSS qui ressemble au mieux au modèle proposé.

Capture d'écran de la page
Capture d'écran de la page (cliquer pour afficher l'image)

Récupérez l'archive .zip contenant l'arborescence de la page, avec les images et les textes nécessaires à sa réalisation. (Notez bien que les images sont réparties à deux endroits différents.)

Vous devez compléter les deux fichiers angry-birds.html et styles/angry-birds.css (qui contiennent déjà quelques bases) pour obtenir le résultat souhaité. Les textes sont dans le fichier textes.txt du fichier zippé.

La page à réaliser est un peu interactive : la bannière change au survol de la souris, et il y a des menus déroulants. D'autre part, les images décoratives des titres de section sont ajoutées depuis le CSS. Ces aspects sont expliqués dans la suite.

En-tête

La bannière est composée d'une image de fond : styles/images/Angry-Birds.jpg. Quand la souris passe sur l'en-tête, on montre le bas de l'image et quand elle est en dehors de l'en-tête, le haut de l'image. Cherchez les propriétés qui permettent de décaler une image de fond par rapport à la boîte !

header quand hover
En-tête obtenu quand la souris passe sur l'image de fond

Menu déroulant

Le menu de navigation est un menu déroulant. Voici les images représentant les menus ouverts (cliquer pour voir en grand).

menu1
menu2
menu3

Pour réaliser cet effet, on va encore utiliser la pseudo-classe :hover. Suivre le tutoriel montré dans le cours.

Décoration des titres de section

Les titres de section sont décorés par une image, qui n'est pas un élément de contenu (par exemple elle ne mérite pas de légende). Il faut donc utiliser une image en CSS.

Cependant, en regardant bien le modèle, on constate que ce n'est pas une simple image de fond, puisqu'elle repousse également le texte qui suit le titre. C'est bien un élément flottant, mais on ne veut pas l'ajouter dans le HTML.

En fait, on a utilisé le pseudo-élément ::before pour ajouter l'image dans le document : on a vu que la propriété content peut prendre une chaîne de caractères comme valeur, mais elle peut en fait aussi prendre l'URL d'une image (même syntaxe que pour background-image).