TP 04 : Introduction à CSS

Licence Humanités Numériques 1ère année

Jean-Marc Lecarpentier — Justine Reynaud

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Expérimenter avec 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/1HU91/TP04/ex1/tbl.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 vendredi 29 janvier pour terminer l'exercice et le déposer sur votre serveur web.

La page web fournie dans cette archive servira de terrain d'expérimentation.

Créer un fichier CSS et ajouter la balise link permettant de lier la page HTML au fichier CSS créé.

Utiliser cet index des propriétés CSS ou ce mémento CSS pour trouver les propriétés à appliquer, leur syntaxe correcte et les valeurs possibles.

Compléter le fichier CSS pour appliquer les mises en forme suivantes :

  1. Mettre une police sans empattement pour les textes de la page et une taille de police de 16 pixels
  2. mettre le titre principal aligné au centre et en italique et augmenter la taille de sa police
  3. mettre la police du pied de page en bleu et en plus petit
  4. mettre les titres de section en bleu et avec une police à empattement
  5. enlever le soulignement des liens
  6. mettre des puces carrées à la place des puces rondes dans la liste de la 2e section
  7. mettre le titre de la navigation en police Arial italique
  8. enlever les puces de la liste de navigation
  9. mettre les liens de navigation (seulement ceux-là) en vert et soulignés, et au survol de la souris ces liens deviennent rouges et non soulignés
  10. ajouter un cadre autour de la figure (essayer plusieurs styles et plusieurs épaisseurs)
  11. changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes
  12. mettre le premier paragraphe de chaque section en italique et avec une largeur de 70% de la page