<-  Documents numériques
<-  TP HTML
->  TP XML
Des exercices sur les CSS et des exemples montrant l'utilisation de feuilles de style dans la mise en forme de document HTML.

Exercices

 
Sommaire

[ 1 ] Observations

  1. Parcourir les démonstrations CSS ci-dessous.
  2. Évaluer les navigateurs disponibles vis-à-vis des recommandations CSS du W3C (voir les Acid Tests par exemple).
 

[ 2 ] Transformation de pages HTML en un site HTML/CSS

  1. Créer un fichier CSS minimal et l'associer à chaque page HTML déjà créée.
  2. Reprendre le contenu de chacune de ces pages pour faire disparaître tout élément de mise en forme et associer un style à chaque élément sémantique.
    En particulier, il est demandé d'utiliser les propriétés CSS relatives aux couleurs de texte et de fond, aux styles de bordures, aux marges internes et externes, aux polices et à leurs tailles, etc.
  3. Modifier le DOCTYPE de vos pages pour un DOCTYPE XHTML (respect des règles XML) strict (interdiction des balises de mise en forme). 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. Valider la feuille CSS auprès du W3C.
  5. Valider chaque page HTML auprès du W3C.
 
Sommaire

[ 3 ] Feuille de style CSS pour l'impression

Aux pages HTML précédentes, ajouter une nouvelle feuille de style dédiée à l'impression : utilisation minimale des couleurs, recherche d'une impression compacte réduite au seul contenu pertinent. Vérifier l'aperçu avant impression.

 

[ 4 ] CSS pour le XML

Reprendre un fichier XML (mais non HTML) existant (par exemple ici) et lui associer une feuille de style dédiée au format XML utilisé.

En XML, l'instruction permettant de lier le document à une feuille de style a la forme suivante : 

<?xml-stylesheet type="text/css" href="style.css" ?>
 
Sommaire

[ 5 ] Menus en CSS

  1. Produire un menu horizontal qui propose plusieurs items placés l'un à côté de l'autre, chacun renvoyant à une page différente.
  2. Reprendre les mêmes items pour produire un menu vertical : celui devra être contenu dans une boite restant fixe à gauche de la page, le contenu défilant à sa droite.
 
Sommaire

[ 6 ] CSS et HTML5

Reprendre un document HTML5 utilisant les nouvelles balises sémantiques et proposer une feuille de style les mettant en forme. Tester dans différents navigateurs.

 

Démonstrations

Premier exemple

Comme premier exemple, considérons ce code HTML.

Sans autre précison, nous obtenons ceci.

Mais, en l'associant à cette feuille de style, nous produisons ce résultat.

Application à un curriculum vitæ

Comme point de départ, observons cette page de CV et son code HTML. Ce code, produit par Dreamweaver, est tout simplement illisible (imbrication de plusieurs tableaux sans raison claire, changement de couleurs et de polices fréquent) et n'encourage donc pas à le modifier directement. Notons également le poids de ce fichier : 13.7 ko.

Nous commençons par nettoyer ce code, pour obtenir un code HTML lisible (remarquons en particulier, la disparition des tableaux et de la balise FONT, et l'utilisation de commentaires HTML). Ce code nettoyé produit ce document. Cette page ne pèse plus que 3.3 ko, soit un rapport de 1 pour 4 entre le poids du fichier nettoyé et le poids du fichier Dreamweaver.

L'étape suivante est naturellement d'y associer une feuille de style, celle-ci donnant une apparence comparable à celle du document dont nous sommes partis.

Mais, sans pour autant modifier le contenu du CV lui-même, nous pouvons tout aussi bien donner une autre apparence en utilisant une seconde feuille de style.

Styles associés à ce site

Nous pouvons également regarder les feuilles de style de ce site :

  • la première définit les différentes couleurs et ornements des titres de section ;
  • la seconde produit un affichage plus sobre destiné à l'impression des documents.

Une modification de ces feuilles provoque des changements sur toutes les pages du site.

À vous de jouer

Pour terminer, jouons avec des générateurs automatiques de feuilles de style et récupérons les différents styles pour les inclure dans nos propres pages.

Voir aussi...

<-  Documents numériques
<-  TP HTML
->  TP XML