Feuille de style CSS et boîtes

Le but de ce TP est de jouer avec les feuilles de style et les boîtes CSS.
Il vous faudra rendre quatre (ou cinq) documents :

Le fichier exo2.html, dont les informations de style seront contenues entre les balises style de l'en-tête.
Le fichier exo3.html, dont les informations de style seront contenues entre les balises style de l'en-tête.
Le fichier compte-rendu-tp3.html, où vous expliquerez ce que vous avez fait pendant le TP (ça vous permet de bien mieux retenir ce que vous avez fait), et qui ne contiendra aucune information de style.
Le fichier compte-rendu-tp3.css, qui contient toutes les informations de style utilisées pour l'affichage du fichier compte-rendu-tp3.html (et des compte-rendus qui viendront lors des prochaines séances).
De façon optionnelle, le fichier compte-rendu.css, qui contient toutes les informations de style utilisées pour l'affichage des compte-rendus qui viendront lors des prochaines séances. Si vous ne rendez pas ce fichier cette semaine, ce ne sera pas grave, mais il sera attendu que vous le rendiez avec les prochains TP, donc autant créer dès que possible un fichier de style simple et fonctionnel !

Comme les TPs précédents, nous allons utiliser le compte-rendu en HTML de ce TP comme base sur laquelle nous allons appliquer différents styles.
Ouvrez un terminal, puis créez le répertoire "tp3" dans le répertoire "progweb", puis dans le répertoire "tp3", utilisez "gedit" pour ouvrir un document compte-rendu-tp3.html.
Ajoutez la structure de base d'un document HTML à votre compte-rendu, c'est-à-dire, la déclaration DOCTYPE, les balises html, head et body puis ajouter les balises nécessaires pour indiquer qu'il s'agit du compte-rendu du TP3 et pour indiquer votre nom.
Pour la suite du compte-rendu de TP, vous utiliserez <h2> pour le titre d'un exercice, et <ol> et <li> pour les items d'un exercice.

Exercice 1 : Feuille de style externe, liste et table

Cet exercice propose de changer le style d'une liste et d'une table.

Reprendre le compte-rendu HTML créé au TP précédent, pour n'en conserver que l'en-tête et le dernier exercice, que vous renommerez Exercice 0 : Mon compte-rendu est trop stylé ! et dont vous supprimerez les informations de style. On devrait donc avoir quelque chose comme :

<!DOCTYPE html>
<html lang="fr">
  <head>
   <meta charset="UTF-8">
   <title>Compte-rendu du TP3</title>
   <style>
     …
   </style>
  </head>
  <body>
   <h1>Compte-rendu de TP3</h1>
   <p>Vincent Jugé</p>
   <h2>Exercice 0&nbsp;: Mon compte-rendu est trop stylé&nbsp;!</h2>
   …
   <h2>Exercice 1&nbsp;: Feuille de style externe, liste et table</h2>
   …
 </body>
</html>

On veut maintenant créer une feuille de style externe, c'est-à-dire une feuille de style déclarée non pas à l'intérieur de compte-rendu-tp3.html mais dans un fichier externe nommé compte-rendu-tp3.css.
Modifiez votre travail pour que le compte-rendu utilise ce fichier de style.
Testez le fichier compte-rendu-tp3.css en mettant en commentaire toutes les informations de style compte-rendu-tp3.html et recopiez celles-ci dans compte-rendu-tp3.css.
Attention aux balises <style> !
Pour la suite du TP, nous ne modifierons plus la balise style du compte-rendu mais le fichier compte-rendu-tp3.css
Faites en sorte que la liste des questions de cet exercice et de l'exercice précédent utilise les chiffres romains (en minuscules) plutôt que les traditionnels chiffres 1, 2, 3, etc.
Le site https://en.wikipedia.org/wiki/List_of_2021_box_office_number-one_films_in_the_United_States contient un tableau des films au box office.
On souhaite recopier le titre et le montant des recettes pour les 5 plus gros succès (il y a des flèches pour trier) pour les mettre dans une table dont nous allons changer l'aspect.
Donc dans un premier temps, créez la table HTML dans votre compte-rendu, par exemple en utilisant des balises telles que table, tr, th, td …
Faites en sorte que la table occupe toute la largeur du compte rendu.
Centrez les titres et changer la police de caractères des titres pour utiliser des petites majuscules (small caps).
Aérez la table avec la propriété padding pour que le texte ne soit pas collé aux bordures des cases (qui sont invisibles a priori, mais que vous pouvez toujours rendre visibles si ça vous aide).
Faites en sorte que les valeurs du tableau soient alignées à gauche, sauf celles de la dernière colonne, qui doivent être centrées.
Changez la couleur de fond des lignes paires (even) pour mettre du bleu (80% de rouge, 80% de vert et 90% de bleu) en utilisant la pseudo-classe :nth-child.
Faites en sorte que si l'on survole une ligne avec la souris la couleur du fond corresponde à 28 sur 255 de rouge, 120 sur 255 de vert et 12 sur 255 de bleu en utilisant un codage hexadécimal.
Note: 26 en décimal correspond à 1A en hexadecimal car pour les dizaines, 26 / 16 = 1, et pour les unités 26 - 1 * 16 = 10 (qui s'écrit 'A').

Exercice 2 : La ferme des animaux

Pour ce second exercice, on souhaite afficher des images d'animaux sous forme de vignettes.

Récupérez six images d'animaux dans un fichier zippé ainsi que le fichier exo2.html.
Vérifiez que les images s'affichent correctement lorsque vous visualisez le document.
Note 1 : On rappelle que le fichier exo2.html ne doit être modifié que en ajoutant des classes aux boîtes, et des informations de style, la structure du document doit rester la même.
Note 2 : Le fichier resultat-exo2.png correspond à l'affichage que l'on souhaite avoir à la fin de cet exercice.
Faites en sorte que toutes les images à l'intérieur des boîtes (pas les autres) aient une largeur (width) de 180 pixels.
Note : on suppose que l'on peut ajouter des images pas dans les boîtes par la suite.
Au lieu d'afficher les images verticalement, on souhaite les afficher horizontalement.
Utilisez pour cela l'attribut float.
Que se passe-t-il si l'on fait varier la taille de la fenêtre du navigateur horizontalement ?
Vérifiez que vous pouvez aussi mettre toutes les images à droite en changeant juste un mot dans la partie CSS du document.
Puis remettez les images alignées à gauche.
Faites en sorte que les titres (animal1, animal2, etc.) soient affichés en blanc sur fond noir et soient centrés horizontalement par rapport à la boîte qui les contient.
Jouez de plus avec la propriété padding pour avoir un espacement convenable.
Espacez les unes des autres les six boîtes contenant les images avec la propriété margin.
Attention : on ne veut pas ajouter de marge aux six boîtes ne contenant pas d'image, par exemple les six boîtes contenantles titres des images.
Faites en sorte que les images à l'intérieur des boîtes aient une bordure de trois pixels de largeur de couleur #aaaaaa.
Changez l'opacité (propriété opacity) lorsque l'utilisateur passe sa souris au-dessus d'une image dans une boîte.
Faites en sorte que les titres soient accolés par le bas à l'image et mordent légèrement sur l'image (de 5 pixels par exemple).
Note: l'idée est de placer la boîte contenant le texte relativement par rapport à la boîte contenant l'image.
Faites en sorte que le texte à mettre après soit situé en-dessous des images et de leurs titres, et non pas à leur droite.

Exercice 3 : Barre de menu

Cet exercice propose d'afficher une liste HTML (ul/li) sous forme d'une barre de menu horizontal.
Le fichier resultat-exo3.png correspond à l'affichage que l'on souhaite avoir à la fin de cet exercice. Vous travaillerez à partir du fichier exo3.html.

Faites en sorte que la liste ait une position fixe, en haut à gauche de la partie affichage du navigateur.
Retirez le style par défaut des items de liste (avec list-style-type) pour qu'il n'y ait pas de style par défaut.
Affichez les items en gras et avec une police Arial (ou sinon sans-serif).
Faites en sorte que les items soient affichés horizontalement collés à gauche et non plus verticalement.
Faites en sorte que les items aient une largeur de 100 pixels et ajoutez un espacement d'une dizaine de pixel entre les items.
Changez le fond du menu pour qu'il soit de couleur violette (purple), en chantant purple rain, et changez la couleur des items pour qu'ils soient blancs.
Fixez la hauteur (height) du menu à 50 pixels puis faites en sorte que le menu occupe toute la largeur (width).
Faites en sorte que l'item 'About' soit affiché à droite de la barre de menu.
Affichez une ligne de 2 pixels en bas du menu.
L'astuce est de mettre une bordure de 2 pixels seulement en bas.

Exercice 4 : Faites vous plaisir (optionnel — à la maison)

On cherche à créer une feuille de style que l'on pourra réutiliser pour les compte-rendus de TP suivant (on utilisera pas cette feuille de style pour le compte-rendu du TP3).
Créez un fichier compte-rendu-tp.css à partir d'une copie du fichier compte-rendu-tp3.css.
Modifiez ce document pour personnaliser vos styles (polices, couleurs…) pour les titres (les balises h), les sections, les paragraphes, les listes, les liens, les tables, etc.