Introduction au Web
TD 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 à Andrea.TETTAMANZI@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][td 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 TD et vous joindrez le fichier oldstyle.css que vous aurez créé.
  • Ce courriel devra être envoyé au plus tard à l'heure de fin du créneau de votre session de TD (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, pour mettre à l'épreuve la puissance des feuilles de style et notre maîtrise de cette technique, nous allons prendre un vieu livre de mathématiques des années '60, « Algèbre », de M. Queysanne, publié par la Librairie Armand Colin en 1964, et traduire sa conception graphique (c'est-à-dire sa mise en forme, le choix des polices, l'aspect typographique) en CSS.

Vous aurez à disposition une transcription partielle des contenus du livre en HTML, avec un marquage qui met en évidence la structure logique du document et son organisation en parties.

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, qui, à son tour, est une imitation fidèle, avec quelques petites adaptations, de l'original.

Le fichier HTML fourni ne doit absolument pas être modifié : votre intervention doit être limitée au fichier oldstyle.css référencé par le fichier HTML.

Vous devez créer, dans un fichier nommé oldstyle.css, une feuille de style conçue de telle sorte que le fichier HTML algebre.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 oldstyle.css.

En particulier :

• La partie préliminaire, identifiée par une balise div de classe "frontmatter", est mise en forme différemment du reste du livre, avec une marge de 1 cm tout autour de la page et avec une indentation de 1 em pour les paragraphes.
• Les titres des chapitres doivent être affichés en majuscules dans une police sans serif et leur numéro doit utiliser une police de taille double par rapport au reste du titre ; le numéro et le titre sont alignés à droite et séparés par une ligne horizontale qui couvre un quart de la largeur du texte.
• Les titres des chapitres sont suivis par une petite table des matières avec une marge de gauche de 1 cm, numérotée en nombres romains majuscules.
• Les numéros des titres des sections et des paragraphes dépassent, respectivement, de 2 cm et de 1,5 cm la marge de gauche du texte, qui, elle, se trouve à 3 cm du bord de la page ; les titres, par contre, sont alignés avec le texte.
• Comme expliqué dans le dernier paragraphe de l'avant-propos, les paragraphes sont numérotés d'un bout à l'autre du livre, sans recommencer de 1 à chaque chapitre.
• Les paragraphes de la partie principale du livre n'ont pas d'indentation.
• Les listes pointées utilisent le symbole "---" pour marquer chaque point. Cette marque ne dépasse pas la marge du texte.
• Le texte utilise une police de corps 12, mais les exemples sont en corps 10.
• Les tables accompagnées par une légende sont numérotées. Leur légende apparaît au dessous de la table, séparée de celle-ci par un espace de 1/2 em.
• La bordure externe des tables est plus épaisse des lignes internes.
• Les formules affichées sur une ligne séparée sont centrées ; celles qui sont numérotées ont leur nombre aligné à la marge de gauche, entre parenthèses.
• Les énoncés mathématiques (axiomes, définitions, théorèmes, etc.) commencent par leur type en gras ; il sont mis en évidence par une ligne verticale épaisse à gauche de leur texte, qui commence au dessous de leur type.
• Il serait trop long de donner tous les autres détails, qui peuvent néanmoins être observés directement en analysant le fichier HTML et son rendu en PDF.