TP 03 : Introduction à CSS

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on ajoute un peu de style à nos pages.

Notes de cours

Important : ce TP doit être effectué dans le respect de la distanciation sociale. Une personne par poste maximum ! En conséquence, les rendus par binômes ne seront pas acceptés : chaque étudiant·e devra rendre son propre travail individuel.

Exercice 1 — Expérimentation du CSS #

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/2020/L1-TW1/TP03/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="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

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.

Reprendre la page simple sur Tim Berners-Lee créée au TP précédent (vous pouvez en télécharger une correction ici) et appliquer les styles suivants, en utilisant un élément style (pas un attribut ! un élément, avec une balise ouvrante et une balise fermante) :

  1. mettre les titres de section en bleu ;
  2. mettre le titre principal en italique ;
  3. mettre les liens en gras ;
  4. mettre des puces carrées à la place des puces rondes dans la liste ;
  5. enlever le soulignement des liens.

Appliquer ensuite les styles suivants, en expérimentant :

  1. augmenter la taille de la police du titre principal ;
  2. ajouter un « cadre » autour des images (essayer plusieurs styles et plusieurs épaisseurs) ;
  3. changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes.

Exercice 2 — Utilisation de l’inspecteur de Firefox #

L'inspecteur de Firefox est un outil fondamental pour qui s'essaie au CSS. (Des équivalents existent pour les autres gros navigateurs.)

  1. Aller sur un site quelconque, faire un clic droit sur un élément, et choisir « Examiner l'élément » (ou Inspect Element). Une fenêtre apparaît, avec trois parties :
    • à gauche, le HTML ;
    • au milieu, les règles CSS appliquées ;
    • à droite, les propriétés CSS calculées (et d'autres onglets utiles).
  2. Dans la partie centrale, décocher des propriétés CSS et observer l'effet sur la page.
  3. Dans la partie centrale, modifier des valeurs de propriétés CSS et observer l'effet sur la page (et sur les valeurs calculées à droite).
  4. Cliquer sur la flèche en haut à gauche de l'inspecteur, et parcourir les éléments de la page.
  5. Aller voir l'onglet « Modèle de boîte » (« Box model ») du cadre de droite.

Ce qui est particulièrement important, c'est que l'inspecteur ne vous montre pas le code que vous avez écrit, mais ce que le navigateur en a compris, ce qui permet de détecter de nombreuses erreurs.

  1. Aller sur cette page et regarder le code source (clic droit puis « Code source de la page », ou alors « Control-U »).
  2. Retourner sur la page, ouvrir l'inspecteur et regarder la partie HTML ; comparer au code source de la page. Comprenez-vous ce qui se passe avec le paragraphe et la liste ?
  3. Inspecter le footer : quelles sont les propriétés CSS que « voit » vraiment le navigateur ? Trouver l'erreur dans le code.

L'intérêt de l'inspecteur peut vous sembler anecdotique pour l'instant, mais il deviendra vite incontournable quand vous commencerez à faire de la mise en page.

Exercice 3 — Une page sur les fraises des bois #

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/2020/L1-TW1/TP03/ex3/fraises.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="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

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.

Reproduction de la page

On vous fournit une image d'une page web.

Capture d'écran de la page
Capture d'écran de la page (cliquer pour accéder à l'image)

On vous fournit également une archive contenant ce modèle ainsi qu'une arborescence avec

  • un squelette HTML
  • un fichier textes.txt avec les textes de la page
  • les images (dans un répertoire img/)
  • un répertoire style/ contenant une feuille de style CSS

Placer l'arborescence sur votre serveur, puis lier la page HTML à la feuille de style CSS : tant que les couleurs de fond n'ont pas changé, c'est que ça n'a pas marché — inutile de continuer !

Compléter ensuite la page HTML et la feuille de style pour obtenir un rendu aussi proche que possible de la page demandée. Votre page HTML doit être valide W3C.

Pour info, les couleurs utilisées sont #fcfcea (couleur de fond du texte), #b71236 (couleur de fond du titre et séparations entre sections) et #c7ccbd (bordures du pied de page).

Améliorations sur la page

  1. Tout d'abord, on va mettre en couleur toutes les occurrences des mots « fraise » et « fraisier ». Pour ce faire, ajoutez une classe fraise aux mots en question, grâce à des éléments span (qui n'ont pas de sémantique intrinsèque). Modifiez ensuite le CSS pour que les éléments de la classe fraise soient colorés, par exemple avec le rendu suivant :
    Capture d'écran d'une partie de la page avec les fraises en couleur
    Capture d'écran
  2. Ensuite, récupérer cette image icône de fraise (source : PinClipArt) et l'utiliser dans 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
  3. Ensuite, faire en sorte que la légende de la première 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
  4. 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 :
    Capture animée de l'apparition de la légende au survol par la souris
    Capture vidéo du survol de l'image par la souris

Exercice 4 (optionnel) — 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).