:: Enseignements :: ESIPE :: E3INFO :: 2021-2022 :: Programmation Web avec JavaScript ::

Feuille de Style, boite et inline

Chaque TP est à faire individuellement, devant sa machine seul !

Pour tous les TPs, on vous demanderas un compte rendu au format HTML (avec sa feuille de style CSS). Le compte rendu du TP2 s'appel compte-rendu-tp2.html, et la feuille de style CSS correspondante compte-rendu-tp2.css.
On vous demande pendant le TP de prendre des notes qui serviront de base à votre compte rendu, si vous rédigez trop les notes de votre compte rendu, vous n'aurez pas le temps de finir le TP dans les 2h imparties. Il est plus important de prendre des notes rapides lorsque vous avez accès aux machines puis de tranquillement rediger le compte rendu de TP chez vous.
Un compte rendu de TP doit indiquer ce que vous avez fait, ce que la machine affiche/fait, et votre analyse et ce pour chaque item des exercices suivantes. Un copier/coller ou une capture d'écran de la réponse de la machine sont bienvenus mais pas suffisant si il n'y a pas d'explication autour.
Chaque compte rendu de TP doit être envoyé sur la plateforme elearning, au plus tard, le vendredi soir qui suis la sécance de TP.

Exercice 1 - Style de base

Un petit exercice pour voir comment appliquer des styles s'appuyant sur les balises du document.

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 rouge brique.
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.
Faites en sorte que la balise h1 corresponde à une police de 24 points, la balise h2 à une police de 20 points et la balise h3 à une police 18 points.
Faites en sorte que les balises h2 soient affichées en gris clair (lightgray), à part le titre de cet exercice (qui doit rester en rouge brique).
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é.
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.
Ajoutez un lien vers le cours http://forax.github.io/course/progweb/ puis faites en sorte que le lien soit en gras 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

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

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.
Pour la suite du TP, nous ne modifierons plus la balise style du compte rendu mais le fichier compte-rendu-tp2.css
Faites en sorte que la liste des questions de cet exercice et de l'exercice précédent utilise les chiffres romains (en majuscule) 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 les données (en fait, uniquement le rang, le titre du film et les recettes actuelles (Gross) pour les 5 films ayant rapporté le plus d'argent (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.
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.
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.
Changez la couleur de fond des lignes paires (even) pour mettre du vert clair 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 à 18 sur 255 de rouge, 32 sur 255 de vert et 43 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

Pour ce premier exercice, on souhaite afficher des images d'animaux sous forme de vignettes.
Pour cette exercice et l'exercice suivant, vous ne devez pas modifier le compte rendu pour l'affichage de l'exercice mais utiliser le fichier exo3.html.

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.
Faites en sorte que toutes les images à l'intérieur des boites (pas les autres) aient une largeur (width) de 220 pixels.
Note: on suppose aue l'on peut ajouter des images pas dans les boites 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 boite qui les contient.
Jouez de plus avec la propriété padding pour avoir un espacement convenable.
Espacez les unes des autres les boites contenant les images avec la propriété margin.
Faites en sorte que les images à l'intérieur des boites aient une bordure d'un pixel de largeur de couleur #aaaaaa.
Changez l'opacité (propriété opacity) lorsque l'utilisateur passe sa souris au-dessus d'une image dans une boite.
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

Cet exercice propose d'afficher une liste HTML (ul/li) sous forme d'une barre de menu horizontal. Comme base de travail vous allez utiliser le fichier exo4.html présent dans le même répertoire que l'exercice précédent.

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 Courrier (ou sinon 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 120 pixels et ajoutez un espacement d'une dizaine de pixel entre les items.
Changez le fond du menu pour qu'il soit de couleur bleu tirant sur le vert (teal), puis en chantant yellow submarine, changez la couleur des items pour qu'ils soient en jaune.
Fixez la hauteur (height) du menu à 48 pixels puis faites en sorte que le menu occupe toute la largeur (width).
Faites en sorte d'avoir un item 'Help' 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 5 - Faire un sous-menu (Optionnel)

Décommentez dans le HTML la partie qui affiche un sous-menu. L'idée est d'afficher ce sous-menu lorsque la souris survole l'item 'Web'.

Positionnez le sous-menu juste en dessous de l'item web (avec relative/absolute).
Utilisez la propriété display pour ne pas afficher le sous-menu par défaut.
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.
N'oubliez pas de jouer avec la propriété z-index pour mettre le sous menu au-dessus du reste de la page.
Vous pouvez maintenant vous amuser à rendre le menu plus beau, par exemple, en mettant une ombre portée, des coins ronds ou d'autres effets de votre choix.