Feuille de Style, boite et inline

Exercice 1 - Style de base

1. Ajoutez en utilisant la balise <h2> le titre de l'exercice courant puis ajoutez à la balise h2 un attribut style qui permet de mettre le titre de l'exercice en orange.
2. Déclarez une balise style à l'intérieur des balises head du document, puis faites en sorte que tout le document utilise une police sans-serif.
3. Faites en sorte que la balise h1 corresponde à une police de 24 points, la balise h2 à une police de 18 points et la balise h3 à une police 16 points.
4. Faites en sorte que les balises h2 soient affichées en bleu, à part le titre de cet exercice (qui doit rester en orange).
5. Faites en sorte que le titre du compte rendu de TP soit centré.
   Pour cela, vous allez créer une classe "centered" et ajouter un attribut class à la balise englobant le titre du compte rendu. Déclarez ensuite que le style pour la classe "centered" est centré.
6. On veut que votre nom soit aligné à droite. Commencez par déclarer votre nom entre des balises div puis ajoutez une classe right permettant d'aligner le texte à droite.
7. Ajoutez un lien vers le cours http://forax.github.io/course/progweb/ puis faites en sorte que le lien soit en vert si la souris n'est pas sur le lien et en teal si la souris survole le lien.
   Conseil: Vous utiliserez pour cela les pseudo-classes des liens.

Exercice 2 - Style de liste et de table

1. 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-tp2.html mais dans un fichier externe nommé compte-rendu-tp2.css.
   Modifiez votre travail pour que le compte rendu utilise ce fichier de style.
   Testez le fichier compte-rendu-tp2.css en mettant en commentaire les styles correspondant à h1 et h2 dans le fichier compte-rendu-tp2.html et recopiez ceux-ci dans compte-rendu-tp2.css.
2. 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 minuscule) plutôt que les traditionnels chiffres 1, 2, 3, etc.
3. Le site https://en.wikipedia.org/wiki/List_of_2018_box_office_number-one_films_in_the_United_States contient un tableau des films au box office.
   On souhaite recopier les données (en fait, uniquement le rang, le titre du film et les recettes actuelles) pour les 5 premiers films (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 en utilisant les balises table, th et td dans votre compte rendu.
4. Faites en sorte que la table occupe toute la largeur du compte rendu.
5. Centrez les titres et changer la police de caractères des titres pour utiliser des petites majuscules (small caps).
6. Aérez la table avec la propriété padding pour que le texte ne soit pas collé aux bordures.
7. Faites en sorte que les valeurs des deux premières colonnes (rang et titre) soient alignées à gauche et que les valeurs de la dernière colonne soient centrées.
8. 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.
9. Faites en sorte que si l'on survole une ligne avec la souris la couleur du fond corresponde à 18 sur 255 de rouge, 18 sur 255 de vert et 130 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 3 - Vignettes

1. Récupérez les 6 images d'animaux ainsi que le fichier exo1.html dans ce répertoire.
   Le fichier resultat.png correspond à l'affichage que l'on souhaite avoir à la fin de cet exercice.
   Vérifiez que les images s'affichent correctement lorsque vous visualisez le document.
   Note: Le jeu est d'arriver à écrire le CSS sans changer le HTML, si vous avez du mal, vous avez le droit d'ajouter des classes, mais pas de faire d'autres modifications de la partie HTML.
2. Faites en sorte que toutes les images à l'intérieur des boites (pas les autres) aient une largeur (width) de 180 pixels.
   Note: on suppose aue l'on peut ajouter des images pas dans les boites par la suite.
3. Au lieu d'afficher les images verticalement, on souhaite les afficher horizontalement.
   Utilisez pour cela l'attribut float.
4. Que se passe-t-il si l'on fait varier la taille de la fenêtre du navigateur horizontalement ?
5. 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.
6. 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 boite qui les contient.
   Jouez de plus avec la propriété padding pour avoir un espacement convenable.
7. Espacez les unes des autres les boites contenant les images avec la propriété margin.
8. Faites en sorte que les images à l'intérieur des boites aient une bordure d'un pixel de largeur de couleur #aaaaaa.
9. Changez l'opacité (propriété opacity) lorsque l'utilisateur passe sa souris au-dessus d'une image dans une boite.
10. 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 boite contenant le texte relativement par rapport à la boite contenant l'image.

Exercice 4 - Barre de menu

1. Faites en sorte que la liste ait une position fixe, en haut à gauche de la partie affichage du navigateur.
2. 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.
3. Affichez les items en gras et avec une police Arial (ou sinon sans-serif).
4. Faites en sorte que les items soient affichés horizontalement collés à gauche et non plus verticalement.
5. Faites en sorte que les items aient une largeur de 100 pixels et ajoutez un espacement d'une dizaine de pixel entre les items.
6. Changez le fond du menu pour qu'il soit de couleur jaune (yellow), en chantant yellow submarine, et changez la couleur des items pour qu'ils soient gris foncés.
7. Fixez la hauteur (height) du menu à 50 pixels puis faites en sorte que le menu occupe toute la largeur (width).
8. Faites en sorte que l'item 'About' soit affiché à droite de la barre de menu.
9. Affichez une ligne de 2 pixels en bas du menu.
   L'astuce est de mettre une bordure de 2 pixels seulement en bas.

Exercice 5 - Faire un sous-menu (Optionnel)

1. Positionnez le sous-menu juste en dessous de l'item web (avec relative/absolute).
2. Utilisez la propriété display pour ne pas afficher le sous-menu par défaut.
3. Faites en sorte d'afficher le sous-menu si l'on passe la souris sur l'item 'Web'.
   L'astuce est d'avoir un sélecteur CSS qui correspond à la liste à l'intérieur de l'item Web si celui-ci est survolé par la souris et de lui appliquer la propriété display à block.
4. N'oubliez pas de jouer avec la propriété z-index pour mettre le sous menu au-dessus du reste de la page.
5. Vous pouvez maintenant vous amuser à rendre le menu plus beau, par exemple, en mettant une ombre portée ou d'autres effets de votre choix.