ISN
Introduction HTML et CSS
2012-2013
Formatage d'une page Web l'aide de CSS1
Consignes
Le langage HTML a t conu pour structurer des documents Web l'aide de
paragraphes, de titres, d'images, de tableaux, de listes, de liens hypertextes, de
formulaires de saisie, etc... Paralllement HTML, le langage CSS a t, quant lui,
dvelopp afin de dcrire la prsentation de documents Web. L'un des enjeux de CSS
est de permettre la mise en forme hors des documents. Cette sparation entre
structure et prsentation fournit un certain nombre de bnfices: la structure du
document et sa prsentation sont gres dans des fichiers spars, la prsentation
d'un site est uniformise, un mme document peut donner lieu plusieurs
prsentations, la complexit de l'architecture d'un document est rduite.
Afin de vous familiariser avec ce nouveau langage de description de documents, nous
vous proposons d'tudier le tutoriel propos ci-dessous et de mettre en pratique les
connaissances que vous y acqurez au travers de la mise en forme d'un document
HTML statique. Pour accomplir votre tche, vous disposerez du matriel suivant:
Editeur: NotePad++ ou NotePad
Navigateur:
Tutoriel tudier
Voir site moodle du cours
Rfrence CSS:
Voir site moodle du cours
Rsultat obtenir:
[Link]
Structure de la page:[Link]
Firefox
Objectifs
Au terme de cet exercice, vous serez en mesure de:
dcrire la prsentation gnrale d'un fichier HTML l'aide de l'attribut
style, d'une feuille de style CSS interne ou externe et expliquer l'hritage
des proprits en cascade;
construire une rgle CSS en identifiant clairement le slecteur, la
dclaration, les proprits et leurs valeurs respectives;
diffrencier les slecteurs simples de balises, de classes, de pseudoclasses et d'identifiants et expliquer leur champ d'application;
distinguer les mesures d'unit relative et absolue;
Bas sur le cours de Jrme Charrire et Cdric Doner, Collge de Bulle
1/4
ISN
Introduction HTML et CSS
2012-2013
appliquer une couleur partir de son code RGB;
grer les polices de caractres du document (choix, taille, style, graisse
de la police);
grer la mise en forme d'un texte (alignement, soulignement,
indentation, interligne,...);
appliquer une couleur ou une image d'arrire-fond (positionnement,
rptition, attachement);
grer la position (float, fixed), le contenu, la zone d'ajustement,
l'encadrement et la marge d'une bote;
grer la mise en forme d'une liste (non) numrote.
Descriptif du formatage
Mettez en forme le fichier [Link] l'aide d'une feuille de style CSS
externe nomme [Link] destine l'affichage sur cran de telle sorte qu'il
rponde aux exigences suivantes:
Attribut Style
Dans le fichier [Link], appliquez directement l'attribut style aux balises div
suivantes en leur confrant les proprits demandes:
Proprits
Applique
Taille de police: 11px;
Transformation de police: majuscules;
3me balise div (ligne 14)
Hauteur: 41px;
Image de fond www20_ad.gif positionne en haut
gauche de l'lment sans rptition;
4me balise div (ligne 15)
5me balise div (ligne 16)
Largeur: 400px;
Taille de police: 9px;
Alignement du texte: droit;
Largeur: 200px
7me balise div (ligne 32)
8me balise div (ligne 42)
Largeur: 250px
9me balise div (ligne 52)
Dans la feuille de style [Link], dclarez les slecteurs suivants en leur
appliquant les proprits demandes:
Slecteurs de balises
Elment
Proprits
Couleur #142f97 de fond associe l'image [Link] positionne
en haut gauche de l'lment et rpte horizontalement;
Polices de caractres: Verdana, Arial, Helvetica ou sans-serif;
body
2/4
ISN
Introduction HTML et CSS
h2
Taille de police: 1 hauteur de caractre
Couleur de caractres: DarkBlue;
Taille de police: 150% de la taille du texte du body;
Graisse de police: Gras;
Padding suprieur: 12 px;
h3
h4
hr
li
2012-2013
Couleur de caractres: DarkBlue;
Taille de police: 120% de la taille du texte du body;
Graisse de police: Normal;
Couleur de caractres: DarkBlue;
Taille de police: 90% de la taille du texte du body;
Graisse de police: Normal;
Interligne: 130% de l'interligne par dfaut;
Largeur: 50% de la largeur de l'lment parent;
Marge de gauche: 0px;
Taille de police: 90% de la taille par dfaut;
Interligne: 130% de l'interligne par dfaut;
Alignement du texte: justifi;
Indentation du texte: 2 hauteurs de caractres;
Style de puces: [Link];
Taille de police: 90% de la taille par dfaut;
Interligne: 150% de l'interligne par dfaut;
Slecteurs de classes
Classe
emph
caption
Proprits
Applique
Police de caractres: Lucida Console, sans-
Taille de police: 80% de la taille par dfaut;
Alignement du texte: centr;
Marges: 0px partout;
Padding: 0px partout;
sherif
Balise span
Balises p situes aux lignes 33, 43
et53
hometext
Largeur: 752px;
Couleur White de fond associe l'image
[Link] positionne en haut gauche de
l'lment et rpte verticalement;
Marge du bas: 50px
Padding: 10px en bas, 12px gauche, 36px
droite;
phr
phl
Bote flottante droite du contenu principal;
Bordure: 2px d'pais, pointill, DarkBlue;
Couleur d'arrire-fond: WhiteSmoke;
Marges: 15px gauche, 15px en bas;
Padding: 4px partout;
6me balise div (ligne 20)
7me balise div (ligne 32)
9me balise div (ligne 52)
Bote flottante gauche du contenu principal;
8me balise div (ligne 42)
Bordure: 2px d'pais, pointill, DarkBlue;
Couleur d'arrire-fond: WhiteSmoke;
3/4
ISN
Introduction HTML et CSS
2012-2013
Marges: 15px droite, 15px en bas;
Padding: 4px partout;
Slecteurs d'identifiants
Identifiant
Proprits
Largeur: 800px;
Marge de gauche: automatique;
Marge de droite: automatique;
Padding: 0px partout;
article
top
Appliqu
sherif;
1re balise div (ligne 11)
Couleur White de fond
Largeur: 780px;
Police de caractres: Verdana, sans-
2me balise div (ligne 12)
Soulignement: aucun;
Padding: 10px partout;
Position: fix 0px du bas;
Largeur: 800px;
Hauteur: 20px;
Couleur White de fond associe l'image
[Link] positionne en haut gauche de
l'lment et rpte horizontalement;
Padding: 12px en haut, 12px en bas;
Alignement du texte: centr;
Taille de police: x-small;
footer
10me balise div (ligne 63)
Slecteurs de pseudo-classes
Pseudo-classe
Proprits
p:first-letter
a:link
a:visited
a:hover
Police de caractres: fantasy;
Taille de police: 150% de la taille par dfaut;
Graisse de police: gras;
Couleur: DarkBlue;
Couleur: DarkBlue sauf dans la div #top o la couleur est rouge;
Soulignement: soulign;
Couleur: DarkGrey sauf dans la div #top o la couleur est rouge;
Soulignement: soulign;
Couleur: DarkGrey sauf dans la div #top o la couleur est bleu;
Soulignement: clignotement;
4/4