Vous êtes sur la page 1sur 4

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:

modele.pdf

Structure de la page:index.html

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 index.html l'aide d'une feuille de style CSS


externe nomme MonStyle.css destine l'affichage sur cran de telle sorte qu'il
rponde aux exigences suivantes:

Attribut Style
Dans le fichier index.html, 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 MonStyle.css, dclarez les slecteurs suivants en leur


appliquant les proprits demandes:

Slecteurs de balises
Elment

Proprits
Couleur #142f97 de fond associe l'image Background.jpg 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: puce.gif;
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


BackMiddle.jpg 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


twopoints.gif 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