Introduction au Web
TP sur Machine noté - CSS
- ÉNONCÉ -

• Vous avez le droit à vos cours. De plus, vous avez accès à Internet.
• Vous disposez d'une séance pour avancer le plus dans le sujet ci-dessous.
• L'heure de début et l'heure de fin de la séance sont celles de votre emploi du temps.
• A la fin de la séance, vous devez rendre votre travail par courriel (courrier électronique) via ent.unice.fr, puis BV et message une fois conenctés :
  • Ce message électronique est à envoyer à alexis.zubiolo@i3s.unice.fr avant la fin de votre séance, quelque soit votre état d'avancement dans le sujet.
  • Le sujet de ce message doit être [intro web][tp css] et votre nom (ne recopiez pas littéralement "et votre nom", mais remplacez par vos nom et prénom).
  • Dans ce message, vous préciserez votre nom, la séance à laquelle vous avez fait ce TP et vous joindrez uniquement le fichier style.css que vous aurez complété.
  • Ce courriel devra être envoyé au plus tard à l'heure de fin du créneau de votre session de TP (l'heure d'envoi est dans les entêtes du courriel.) Tout retard sera sanctionné par une pénalisation de la note et les copies envoyes avec plus de 15 minutes de retard ne seront même pas corrigées.

Dans cet exercice, nous allons créer une feuille de style CCS pour la mise en forme d'une page HTML qui vous rappellera quelque chose.

Vous aurez à disposition une page HTML index.html à ne pas modifier.

Vous devrez écrire des règles CSS qui exploitent le marquage du fichier HTML afin d'obtenir une mise en forme identique à celle montrée dans ce fichier PDF (voir ci-dessous).

Le fichier html et l'embryon de fichier css sont présents dans l'archive wushucss.zip à extraire dans votre dossier www et à renommer immédiatement en wushucss-votre-login (en remplaçant votre-login par votre nom d'utilisateur.)

Vous devez compléter, dans le fichier nommé style.css, une feuille de style conçue de telle sorte que le fichier HTML index.html, fourni avec cet énoncé, s'affiche exactement comme montré dans ce fichier PDF quand il est placé dans le même répertoire du fichier style.css (le fichier PDF comporte deux pages, une ou aucun élément n'est survolé par la souris, une autre ou le sommaire, un paragraphe et une cellule du tableaux sont survolés par la souris. Les marges blanches sur les bords du pdf sont à ignorer.)

En particulier :

• La page tiendra sur 800 pixels de large et sera centrée.
• Le fond de la page sera de couleur #eee.
• Le texte doit utiliser une police sans sérif, sauf pour les lettrines.
• Le paragraphe suivant chaque titre de troisième niveau doit comporter une lettrine. Celle-ci doit être de taille double, graissée, dans une police avec sérif et idéalement tenir sur deux lignes (pour que l'habillage de la lettre soit optimal, on utilisera l'attribut « float »).
• Les paragraphes doivent être sur fond de couleur #ddd en temps normal, et #fff lorsqu'ils sont survolés par la souris.
• Le titre de premier niveau doit être sousligné par deux traits d'une épaisseur totale de 4 pixels, de couleur gray.
• Les titres de second niveau doivent être numérotés et souligné par un trait simple d'une épaisseur de 1 pixel, de couleur gray.
• Les titres de troisième niveau doivent être numérotés (en numérotation romaine minuscule).
• Le sommaire doit être tronqué à 4 em de hauteur à 1 em du bord dans le coin supérieur droit du corps de la fenêtre. Il doit demeurer visible à cette même position lors de la navigation dans la page.
• Le sommaire doit être encadré avec une bordure en tirets en bas et comporter une marge intérieure latérale de 1 em. Le fichier CSS fourni définit déjà la couleur à utiliser pour la bordure.
• Le titre du sommaire ne doit pas être numéroté. En revanche, les éléments du sommaires doivent l'être et la numérotation doit correspondre à celle du document.
• Lors du survol de celui-ci, la hauteur doit être ajustée pour contenir tout le menu, et la bordure du bas doit être changée pour une ligne simple.
• Le tableau doit occuper 80% de la largeur de la page, et être centré.
• Le texte du tableau doit être centré également. Les cellules de données surovlées doivent être sur fond blanc, les autres sur fond #ddd.
• Les cellules de titre sont écrit en blanc sur fond noir.