Vous êtes sur la page 1sur 8

Exercice 1

Création et mise en forme d'une page Web avec une feuille de style

Si besoin, les exercices se trouvent dans un fichier zippé à l'adresse suivante : 
http://www.ext.upmc.fr/urfist/html/exercicescss2006.tar.gz

Ouvrez la page index.htm qui se trouve dans le dossier exercices2006 sur le bureau de votre ordinateur

Insérez une feuille de style externe qui a pour nom presse.css avec pour type de média « screen » entre 
les balises <head> </head>.

Ouvrez ensuite un éditeur de texte style Notepad et enregistrez la page sous le nom de presse.css dans 
le dossier exercices2006. 

Nous commencerons par styler la balise html en lui donnant un arrière plan (background­color) de 
couleur gris (#C2CACF). Les marges externe (margin) et interne (padding) sont à zéro.  

{          background­color: #C2CACF;
padding: 0;
margin: 0;}

1/8
Maintenant, il faut paramétrer la balise body. Les marges externe (margin) et interne (padding) sont à 
zéro. On ajoute le même arrière plan couleur que pour la balise html et une image de fond 
(background­image) que vous trouverez dans le dossier images du dossier exercices 2006. Cette image 
ne sera pas répété (background­repeat) et aura une position de 0px en valeur horizontale et verticale 
(background­position). Ensuite, nous fixerons l'image par rapport à la fenêtre (background­
attachment), elle restera donc en place quelque  soit la position de l'ascenseur. 

{          margin: 0;
padding: 0;
background­color: #C2CACF;
background­image: url(images/fond.jpg);
background­repeat: no­repeat;
background­position: 0px 0px;
background­attachment: fixed;}

Il est nécessaire ensuite de positionner le texte par rapport à la bande noire. Nous allons créer  un bloc 
avec un identifiant unique qui aura pour nom entry (div#entry). Il n'y aura pas de marge interne mais 
une marge externe de 0 en verticale qui se positionnera automatiquement par rapport à la marge de 
droite avec une marge fixe pour le bas de 10 et une marge fixe de gauche de 102. Il est à noter que 
102px est la largeur de la bande noire. Le bloc aura une largeur fixe de 650px (width) et sa propre 
couleur d'arrière plan de préférence clair (#fefefe) pour contraster avec le gris de l'arrière plan principal. 
On applique au bloc une bordure (border) en trait plein, fine (1px).

{          padding: 0em;
width: 650px;
margin: 0 auto 10px 102px;

2/8
background­color: #fefefe;
border­width: 1px;
border­style: solid;}

Une fois la partie principale de la mise en page terminée, nous allons pouvoir nous centrer sur la mise 
en forme des caractères. Dans le body, nous allons inclure comme police par défaut l'Arial sans­serif. 
La police par défaut est ici entre guillemet, préciser plusieurs familles augmente la probabilité que le 
visiteur disposera d'au moins de l'une d'entre elles. 

{ margin: 0;
padding: 0;
font-family: "arial",verdana,lucida,sans-serif;
background-color: #C2CACF;
background-image: url(images/fond.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
background-attachment: fixed;}

Nous traiterons ensuite de la balise de titre principal ou h1. Le titre sera de taille 2em en petite capitale 
(font­size) avec une barre en dessous pour marquer une rupture entre le contenu et le titre. On 
appliquera  une bordure (border) de couleur noire en trait plein, fine (1px). La marge externe est à 0. 
On souhaite cependant grâce à la marge interne (padding) décaler le titre sur la gauche pour qu'il 
n'empiète pas sur la bande noire, 5px suffiront et le décaler un peu en hauteur de 6px (pure raison 
esthétique).

{          margin: 0 ;

3/8
padding: 6px 0 0 5px;
border­bottom: #000;
border­width: 0 0 1px 0;
border­style: none none solid none;
font­size: 2em;
font­variant: small­caps;}

La balise de titre h2 sera définit un peu comme la balise de titre h1. Le titre aura pour taille 1.6em. La 
marge interne sera décalé de 5px sur la gauche comme pour h1 et de 5px en hauteur. 
{              margin: 0;
padding: 5px 0 0 5px;
font-size: 1.6em;
font-variant: small-caps;}

H3 suivra le modèle des titres h1 et h2. Le titre aura pour taille 1.4em. La marge interne sera décalé de 
5px sur la gauche comme pour les deux autres et de 7px en hauteur. La marge externe sera à 0.

{ margin: 0;
padding: 7px 0 0 5px;
font-size: 1.4em;}

4/8
La mise en forme des liens ne concernera ici que les liens contenus dans le bloc #entry. L'attribut 
a:link ou lien correspondant au lien non visité, c'est à dire non présent dans le cache de votre 
navigateur, seront de couleur #768. Les liens visités ou a:visited, sont ceux déjà contenu dans le cache 
de votre navigateur. Pour les distinguer des liens non­visités, ils sont d'une couleur légèrement 
différente #777. Par défaut, les liens visités et non visités seront soulignés (text­decoration: 
underline). 
Il est d'usage d'utiliser des couleurs différentes pour les liens visités et non vus. Modifier la couleur 
d'un lien selon sa visualisation ou non est une méthode de base pour faciliter la navigation. On peut 
utiliser une couleur plus présente pour les nouveaux liens et une couleur moins forte pour les liens 
cliqués, afin d'indiquer aux lecteurs qu'ils ont été visités. 

div#entry a {text-decoration: underline;}


div#entry a:visited { color: #777; }
div#entry a:link { color: #768; }

Les paragraphes contenus dans le bloc #entry auront la même marge interne sur la gauche que les 
balises titre.

div#entry p {padding: 0 0 0 5px;}

5/8
Nous souhaitons pour mettre en valeur les sources, les positionner autrement. Pour cela, nous allons 
utiliser un élément de type classe, c'est à dire que vous pouvez l'insérer dans différentes balises, ici nous 
l'avons inséré au sein de la balise paragraphe et nous l'appellerons cat.
Ainsi dans le code html, toutes les balises paragraphes contenant un class="cat" apparaîtront, aligné à 
droite en petite capitale et italique, avec une taille de 0.9em. Pour que le texte ne touche pas le cadre, 
une marge externe de droite de 5px est préférable, accompagné d'une marge pour le bas de 5px. 

p.cat
{ font-size: 0.9em;
font-variant: small-caps;
text-align: right;
margin: 0 5px 5px 0;
font-style:italic;}

6/8
Pour embellir le texte, nous avons décidé de mettre en valeur la première lettre
de chaque texte. Il existe une balise first-letter qui permet, adjoint à la balise
paragraphe de ne modifier que la première lettre. Mais comme, nous ne souhaitons
pas que les classes .cat subissent ces transformations, il est préférable
d'utiliser une autre technique.
On isolera manuellement, en la plaçant dans la balise neutre span, la première
lettre en lui attribuant une classe ici .lettrine. Ainsi dans le code html, toutes
les lettres contenues entre les balises suivantes, <span class="lettrine"></span>,
seront affichée en gras, avec pour police par défaut Georgia serif. La taille de
la lettre sera de 2em avec une marge interne de 3px pour intégrer un petit
espacement entre la lettre et le paragraphe et un float:left. Float signifie que
l'élément génère un bloc qui flotte à gauche. Essayez la feuille de style avec et
sans float:left, vous verrez la différence.

{ font-weight : bold;
font-family:"Georgia", Times New Roman, Times, serif;
font-size:2em;
float:left;
padding: 0 3px 0 0;}

7/8
On pourrait juger que la mise en forme est terminée, mais je souhaiterais réussir à ce que le bandeau 
noir aille juste au bout de la page. Pour cela, j'utilise le pseudo­élément after qui sert à insérer un 
contenu généré après celui d'un élément, ici body. On obtient donc un body:after avec un texte généré 
automatiquement content: "Page crée le 4 avril 2006 inspiré du blog de Karl Dubost" d'une taille de 
1em et une marge externe de gauche de 200px. 

{ content: "Page crée le 4 avril 2006 inspiré du blog de Karl Dubost";


font-size: 1em;
margin-left:200px;}

8/8