TP 04 : Propriétés CSS et sélecteurs

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP on utilise un peu plus en profondeur les sélecteurs de base, et on introduit certaines propriétés CSS qu'on utilisera plus tard pour faire de la mise en page.

Notes de cours

Exercice 1 — Manipulation des balises HTML et reproduction d’un modèle #

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

Attention, si vous avez déjà commencé cet exercice lors de précédents TP, notez bien que dans cette version on vous demande le CSS, et qu'il y a des consignes précises !

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/TP04/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.

On vous fournit deux images de la même page web : la première est est la version avec les styles de base du navigateur, tandis que pour la seconde on a appliqué une feuille de style. Les images de Marylin et Tom, les modèles et le texte sont disponibles dans cette archive.

Écrire en HTML5 valide, sans CSS, le code permettant d'obtenir le premier modèle. On s'efforcera d'utiliser des éléments ayant une sémantique correcte. Il peut être utile de jeter un œil à la 2e version pour repérer les parties qui auront besoin d’être stylées, mais attention : interdiction d'utiliser les éléments div et span, et les attributs id et class ! Ne pas hésiter à s'inspirer de la liste des éléments HTML.

Ajouter ensuite une feuille de style en essayant d'obtenir le second modèle, sans changer le corps du HTML. Attention, si le HTML a été fait correctement, la seule modification nécessaire est l'ajout de la feuille de style ! Il est toujours interdit d'utiliser les éléments div et span, et les attributs id et class ! Certains détails ne sont pas faciles à reproduire pour les débutant·e·s : ce n'est pas grave si vous n'y arrivez pas. Faites ce que vous pouvez.

NB : les images fournies montrent le rendu obtenu avec Firefox (ce sera toujours le cas dans ce cours). Il est possible que le résultat ne soit pas tout à fait le même sous Chrome. Il est donc recommandé d'utiliser Firefox pour faire les TP.

Exercice 2 — Le retour de l’épagneul #

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

On reprend la page sur l'épagneul du TP précédent. Commencer par copier-coller l'ensemble du répertoire correspondant, pour pouvoir travailler sur ce nouvel exercice sans risquer de casser l'ancien.

  1. Tout d'abord, utiliser cette image icône de patte de chien et modifier le CSS pour que la liste s'affiche comme sur la capture suivante.
    Capture d'écran de la liste
    Capture d'écran de la liste
  2. Ensuite, faire en sorte que la légende de la 2e image (et uniquement celle-là) s'affiche par-dessus l'image elle-même, comme dans la capture suivante. Il va falloir modifier la position de la légende : renseignez-vous sur la propriété CSS position et ses différentes valeurs, par exemple ici (en français) ou ici (en anglais mais plus clair).
    Capture d'écran de l'image avec sa légende
    Capture d'écran de l'image avec sa légende
  3. Optionnel (pour les plus à l'aise) : essayer de faire en sorte que cette légende n'apparaisse que quand l'internaute survole l'image avec sa souris.

Exercice 3 — Listes et menus #

Réaliser un menu avec une liste d'items contenant des liens, puis rédiger des feuilles de style pour présenter le menu sous différentes formes. On pourra réaliser un menu vertical puis horizontal, par exemple.

menu vertical
Un menu vertical.
menu horizontal
Un menu horizontal (regarder la propriété display).

Exercice 4 (optionnel) — Reproduction d’un modèle #

C'est le même exercice optionnel que dans le TP précédent.

On vous donne une image d'une page web, version simplifiée d'une page du site WikiHow.

Exemple de page à réaliser
Capture d'écran de la page
(Cliquer pour voir en taille réelle ; attention, le fond noir qu'affiche Firefox ne fait pas partie de l'image !)

On vous demande de créer du code HTML5 (valide) et CSS reproduisant ce modèle, aussi fidèlement que possible. Télechargez cette archive, qui contient les images nécessaires et les textes (fichier textes.txt), ainsi qu'une feuille de style CSS qui ajuste la police de la page.

Informations complémentaires

Les couleurs de fond sont le blanc, le vert #93B874, le gris clair #F6F5F4, et le gris foncé #ECEBE8. Les bordures sont en gris #E5E5E5 ou en vert #89AC6C (menu).

La couleur de base du texte est #545454 (brun très sombre). Les autres couleurs de texte sont le blanc (pied de page), le gris #737373 (fil d'Ariane), le noir #242424 (titres), et le vert très sombre #336633 (liens).