TP 03 : Introduction à CSS

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

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

Notes de cours

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/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="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.

Reprendre la page simple sur Tim Berners-Lee créée au TP précédent et appliquer les styles suivants, en utilisant une balise <style> (pas un attribut !) :

  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 l’épagneul #

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

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/TP03/ex3/epagneul.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 une image d'une page web.

Capture d'écran de la page
Capture d'écran de la page

On vous fournit également une archive contenant une arborescence avec

  • un squelette HTML
  • un fichier textes.txt avec les textes de la page
  • les images (dans un répertoire images/)
  • un répertoire styles/ contenant une feuille de style CSS ainsi qu'une police de caractères

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

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

Cet exercice optionnel, plus difficile, est destiné à celles et ceux qui sont à l'aise et auraient terminé tous les exercices précédents.

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).