COXHTML New2-2007

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :
NOTION DE XHTML ET CSS

DEUXIEME PARTIE : CSS
1
NOTION DE XHTML ET CSS >> DEUXIEME PARTIE : CSS
Support compil par A. ATADEGNON
Sommaire
Introduction....................................................................................................................................................................4
1. O mettre du CSS ?...................................................................................................................................................4
2. Rsum visuel.............................................................................................................................................................7
3. Appliquer un style des balises ..............................................................................................................................9
4. Appliquer un style plusieurs balises...................................................................................................................12
5. Des commentaires dans du CSS........................................................................................................................... 12
6. Utiliser les class et id .............................................................................................................................................. 13
7. Les balises universelles........................................................................................................................................... 15
8. Imbrications de balises........................................................................................................................................... 16
9. Formatage du texte en CSS (partie 1/2) ............................................................................................................. 17
Taille du texte ......................................................................................................................................................... 17
Polices ...................................................................................................................................................................... 20
Alignement .............................................................................................................................................................. 21
Alignements simples.......................................................................................................................................... 21
L'indentation....................................................................................................................................................... 23
10. Formatage du texte en CSS (partie 2/2) ...........................................................................................................24
Effets de style ......................................................................................................................................................... 24
Mettre en italique................................................................................................................................................ 24
Mettre en gras......................................................................................................................................................25
Les majuscules en CSS.......................................................................................................................................25
Un peu de dcoration ?......................................................................................................................................26
11. Les couleurs .......................................................................................................................................................... 27
Indiquer le nom de la couleur...........................................................................................................................27
La notation hexadcimale..................................................................................................................................29
La mthode RGB............................................................................................................................................... 29
Le fond .................................................................................................................................................................... 31
La couleur de fond............................................................................................................................................. 32
L'image de fond.................................................................................................................................................. 34
12. Des liens sympas .................................................................................................................................................. 38
Au passage de la souris...................................................................................................................................... 39
Au moment du clic.............................................................................................................................................41
Lorsque le lien est slectionn.......................................................................................................................... 41
Quand la page a dj t vue............................................................................................................................ 42
Premire lettre et premire ligne modifies........................................................................................................ 43
La premire lettre............................................................................................................................................... 43
La premire ligne................................................................................................................................................ 44
Avant / Aprs .........................................................................................................................................................44
Une image au lieu du texte ?............................................................................................................................. 46
13. Les listes puces .................................................................................................................................................. 47
Diffrents types de listes (XHTML).................................................................................................................... 47
Liste non ordonne............................................................................................................................................ 47
Liste ordonne.................................................................................................................................................... 48
Liste de dfinitions............................................................................................................................................. 48
Dcorez vos listes (CSS) ....................................................................................................................................... 50
Retrait des listes.................................................................................................................................................. 50
Reprsentation de la puce................................................................................................................................. 52
Changer l'image de la puce................................................................................................................................55
14. Mise en bote (partie 1/2).................................................................................................................................... 56
Rappel : Block et Inline ce nest pas pareil ! ...................................................................................................... 56
Quelques exemples.............................................................................................................................................57
Les balises universelles.......................................................................................................................................57
2
Respectez la smantique !..................................................................................................................................58

La taille .....................................................................................................................................................................58
Minimum et maximum...................................................................................................................................... 60
"Couper" un block avec un overflow..............................................................................................................61
Les bordures ........................................................................................................................................................... 62
En haut, droite, gauche, en bas.................................................................................................................. 64
Ca marche aussi sur des balises inline !........................................................................................................... 65
Les marges ...............................................................................................................................................................66
En haut, droite, gauche, en bas.................................................................................................................. 68
Centrer des blocks.............................................................................................................................................. 69
15. Mise en bote (partie 2/2).................................................................................................................................... 69
Transformer un inline en block (et vice-versa).................................................................................................. 70
Les flottants ............................................................................................................................................................ 71
Faire flotter une image.......................................................................................................................................72
Crer une lettrine (exercice).............................................................................................................................. 72
Stopper un flottant............................................................................................................................................. 73
Positionnement absolu, fixe et relatif ................................................................................................................. 74
Le positionnement absolu.................................................................................................................................75
Le positionnement fixe......................................................................................................................................77
Le positionnement relatif.................................................................................................................................. 78
16. TP : Crons le design de votre site web !.......................................................................................................... 79
17. Les tableaux ........................................................................................................................................................ 106
18. Les formulaires.................................................................................................................................................... 120
Crer un formulaire ............................................................................................................................................. 120
Les zones de saisie ............................................................................................................................................... 122
Zone de texte une ligne................................................................................................................................ 122
Les labels............................................................................................................................................................123
Quelques attributs supplmentaires.............................................................................................................. 124
Zone de mot de passe......................................................................................................................................124
Zone de texte multiligne................................................................................................................................. 125
Elments d'options .............................................................................................................................................. 128
Les cases cocher............................................................................................................................................ 128
Les zones d'options..........................................................................................................................................130
Les listes droulantes....................................................................................................................................... 132
Un formulaire accessible et design ? ................................................................................................................. 134
Dfinir un ordre de tabulation....................................................................................................................... 134
Dfinir des touches de raccourci................................................................................................................... 135
Organiser le formulaire en plusieurs zones.................................................................................................. 138
Les boutons........................................................................................................................................................... 139
19. RECAPITULATIF.............................................................................................................................................142
3
Introduction
CSS signifie : "Cascading Style Sheets", ce qui peut se traduire en francelais par "Feuilles de style en
cascade".
On dit "Feuille de style" car en rgle gnrale, on crit le code CSS dans un fichier part (
l'extension .css au lieu de .html). C'est un fichier dans lequel on crit l'apparence que notre site doit
avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image
de fond etc...
1. O mettre du CSS ?
On peut crire du code CSS 3 endroits diffrents, selon ce qu'on prfre :
Mthode A : dans un fichier .css (le moyen le plus recommand),

Mthode B : dans l'en-tte du fichier XHTML,
Mthode C : dans les balises.
Voici une description de chacune de ces techniques :

Dans un fichier .css (Mthode A) :
Le plus souvent on crit du code CSS dans un fichier spcial ayant l'extension .css (contrairement aux
fichiers XHTML qui ont l'extension .html).
C'est la mthode la plus pratique. Parmi les nombreux avantages que cette solution apporte, il y a la
possibilit de pouvoir proposer facilement plusieurs designs diffrents vos visiteurs.
Voici un exemple de fichier CSS sous Notepad++ :
4
Maintenant, retournez dans votre fichier XHTML. Il faut y ajouter une ligne entre les balises
<head> </head> qui va permettre de "dire" au fichier XHTML quel fichier CSS il doit charger :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3 <head>
4
<title>Exemple d'utilisation de CSS externe</title>
5
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
7 </head>
8 <body>
9
<p>Cette page comporte une feuille de style externe. C'est la meilleure mthode utiliser
10 quand on fait du CSS.</p>
11 </body>
</html>
La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d'entre eux
pour le moment :
o
title : c'est le nom que vous donnez votre feuille de style.

5
href : c'est l'emplacement o se trouve votre feuille de style sous forme de lien
relatif. Dans cet exemple le CSS se trouve dans le mme dossier.
Directement dans le header du fichier XHTML (Mthode B) :

Il est aussi possible de taper du CSS directement l'intrieur mme du fichier XHTML, entre
les balises <head> </head>. Vous devrez y mettre une balise <style> </style> l'intrieur,
comme ceci :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

1
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3
<head>
4
<title>Exemple de CSS dans le header</title>
5
6
<style type="text/css">
7
/* Vous taperez votre code CSS ici */
8
</style>
9
</head>
10
<body>
11
<p>Cette page comporte du CSS directement dans le header.</p>
12
</body>
13
</html>
Cette seconde mthode ressemble beaucoup la premire. Cependant, la premire solution

(utiliser un .css externe) est quand mme bien plus pratique, car elle vous permettra de faire
changer le design du site en un clin d'oeil. De plus, le fichier ne sera tlcharg qu'une seule
fois pour toutes les pages de votre site, ce qui allgera la taille des fichiers .html et rendra
donc votre site plus rapide !
Pour un emaintenace facile du site, il est recommand donc d'utiliser un fichier .css externe
(la premire solution propose) plutt que de mettre directement le CSS dans le fichier
XHTML
La mthode " l'arrache" dans les balises (Mthode C) :
Cette mthode est la troisime (et la moins recommande). Elle consiste ajouter un
attribut style sur les balises pour leur appliquer un style particulier. Cet attribut fonctionne
sur toutes les balises. Par exemple sur un titre :
Code : HTML
1 <h1 style="/* Votre style pour cette balise ici */">Titre</h1>

Cette mthode a tous les dfauts : non seulement le CSS sera peu lisible l'intrieur des
balises, mais en plus cela ne nous permet pas de profiter de tous les avantages du CSS,
comme la possibilit de changer la couleur de tous les titres du site en un clic.
Voil, vous venez de voir quelles sont les 3 mthodes que l'on peut utiliser pour insrer du
CSS. L'idal est donc d'utiliser une feuille de style externe (= mettre son CSS dans un fichier
.css) et c'est cette mthode qui sera utilise dans la suite du cours.
6
2. Rsum visuel
Dans le dossier de votre site, il doit y avoir au moins 2 fichiers : un .html et un .css.
Le fichier .html contient le code XHTML avec en particulier la ligne pour faire la liaison avec le
fichier .css :
7
Le fichier .css contient du code CSS (que nous allons apprendre partir de maintenant) :
8
Si vous voulez voir le rsultat, il faut ouvrir le fichier .html comme avant (double-cliquez sur l'icne
du fichier index.html dans l'explorateur). N'essayez pas d'ouvrir le .css : seul, ce fichier ne sert rien.
C'est le .html qui, lors de son ouverture, va charger le .css et appliquer les informations de style.
3. Appliquer un style des balises

Dans un CSS, on trouve 3 lments diffrents :
Des noms de balises : on crit les noms des balises dont on veut modifier l'apparence. Par
exemple, si on veut modifier l'apparence de tous les titres <h1>, on doit crire h1
Des proprits CSS : les "effets de style" de la page sont rangs dans des proprits. Il y a par
exemple la proprit color qui permet d'indiquer la couleur du texte, font-size qui permet
d'indiquer la taille du texte etc etc.
9
Les valeurs : chaque proprit CSS on doit indiquer une valeur. Par exemple, pour la
couleur, il faut indiquer le nom de la couleur. Pour la taille, il faut indiquer quelle taille on
veut etc etc...
Schmatiquement, une feuille de style CSS ressemble cela :

Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
balise1
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise2
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise3
{
propriete: valeur;
}
Vous reprez sur ce schma les balises, proprits et valeurs.

Comme vous le voyez, on crit le nom de la balise (par exemple h1), et on ouvre des accolades pour y
mettre les proprits et valeurs que l'on veut l'intrieur.
On peut mettre autant de proprits que l'on veut l'intrieur des accolades (enfin, il faut en mettre
au moins une sinon)
Chaque proprit est suivie du symbole "deux-points" (:) puis de sa valeur correspondante. Enfin,
chaque ligne se termine par un point-virgule (;)
Le point-virgule n'est pas obligatoire s'il n'y a qu'une seule proprit pour la balise (comme c'est le
cas pour la balise 3). Toutefois, il vaut mieux prendre l'habitude de le mettre tout le temps, c'est plus
sr
Supposons par exemple quon veuille modifier tous les paragraphes pour qu'ils soient crits en bleu,
avec une taille de 18 pixels.
Tous les textes des paragraphes sont entre des balises <p> </p>, on va donc crire le code CSS
suivant :
Code : CSS
1p
2{
3 color: blue;
4 font-size: 18px;
5}
10
Cela signifie en francelais : "Tous les paragraphes soient crits en bleu avec une taille de 18 pixels."
Ne mettez jamais d'espace entre "18" et "px", car sinon le code CSS ne fonctionnera pas !
Enregistrez ce code CSS dans un fichier "essai.css" par exemple.
Il va falloir maintenant crer un fichier XHTML banal pour tester notre CSS. Il ne faut pas oublier de
mettre la balise <link /> pour indiquer o se trouve notre fichier CSS.
Voici un fichier de test, gardez-le dans un coin car il contient de nombreuses balises et il est probable
qu'on s'en serve un moment pour les tests de nos futurs CSS :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<head>
<title>Page d'exemple pour tester le CSS</title>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
</head>
<body>
<h1>Dcouverte du CSS</h1>
1
2
3
4
5
6
7
8
9
10
<p>
11
Bonjour !<br />
12
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym
13 title="Cascading Style Sheets">CSS</acronym> pour les tutoriels du <a href="http://www.siteduzero.com">Site
14 du Zr0</a>
15
</p>
16
17
<h2>Ce n'est que du blabla</h2>
18
19
<p>
20
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q>C'est un petit pas pour l'Homme, un grand
21 pas pour l'Humanit</q><br />
22
J'aime la choucroute en conserve.<br />
23
Vive les frites !
24
</p>
25
<p>
26
Quoi, cela ne veut rien dire ce que j'cris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
27
</p>
</body>
</html>
On ouvre le fichier exemple.html (on n'ouvre jamais directement un fichier .css) :

Essayez de modifier le fichier CSS, en mettant une autre couleur ("red" pour rouge par exemple, et
"24px" pour avoir un texte crit trs gros).
11
4. Appliquer un style plusieurs balises

Prenons le code CSS suivant :
Code : CSS
1
2
3
4
5
6
7
8
h1
{
color: red;
}
h2
{
color: red;
}
Il signifie que nos balises h1 doivent tre en rouge, ainsi que nos balises h2.Oui mais voil, c'est
rptitif car c'est exactement la mme chose.
Heureusement, il existe un moyen en CSS d'aller plus vite si les styles de 2 balises doivent avoir la
mme prsentation. Il suffit de sparer les noms des balises par des virgules, comme ceci :
Code : CSS
1 h1, h2
2{
3 color: red;
4}
Cela signifie : "Que le texte des titres <h1> et <h2> soient crits en rouge".
Vous pouvez indiquer autant de balises la suite que vous le dsirez. Par exemple, si vous voulez
mettre en rouge vos titres, vos liens et vos citations, vous taperez :
h1, h2, a, q.
5. Des commentaires dans du CSS

Comme en XHTML, il est possible de mettre des commentaires. Les commentaires ne seront pas
affichs, ils servent simplement indiquer des informations pour vous.
D'ailleurs, vous allez vous en rendre compte, en gnral le fichier XHTML est assez petit, et la feuille
CSS assez grande (si elle contient tous les lments de style de votre site). Il est possible (et
recommand) de crer plusieurs fichiers CSS : un fichier pour le design, un autre pour le forum, un
autre pour le menu etc etc...
12
Pour faire un commentaire, vous tapez /*, suivi de votre commentaire, puis */ pour terminer votre
commentaire.
Vos commentaires peuvent tre sur une ou plusieurs lignes. Par exemple :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
/*
essai.css
--------Fichier cr le 10/10/2009
*/
p
{
color: blue; /* Les paragraphes seront bleus */

font-size: 18px; /* La taille de 18 pixels */
6. Utiliser les class et id

Comment faire pour que seulement certains paragraphes (ou certains titres, ou certaines citations)
soient crits d'une manire diffrente ?
On a la possibilit pour faire cela d'utiliser des attributs spciaux qui fonctionnent sur toutes les
balises :
L'attribut class
L'attribut id
Nous allons voir les choses suivantes dans l'ordre :

1. Ce que sont les class et id et comment s'en servir
2. Les balises dites "universelles" et leur utilit
3. Les imbrications de balises
Class et id
Les attributs class et id sont quasiment identiques. Il y a seulement une petite diffrence.
L'attribut class
Pour le moment et pour faire simple, on ne va s'intresser qu' l'attribut class. C'est un attribut que
l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image que etc...
<h1 class=""> </h1>
<p class=""></p>
<img class="" />
13
Que met-on comme valeur l'attribut class ?

En fait, vous mettez un nom. Ce que vous voulez.
Les class vous permettent de dfinir un style personnalis.
Supposons que vous vouliez dfinir un style appel "important" qui crive le texte en rouge / 18
pixels. Vous rajouterez l'attribut class="important" chacune des balises que vous voulez modifier.
Sur cet exemple, on rajoute un attribut class un paragraphe et la citation :
Code : HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

<head>
<title>Page d'exemple pour tester le CSS</title>
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
</head>
<body>
<h1>Dcouverte du CSS</h1>
<p>
Bonjour !<br />
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier
<acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriels du <a
href="http://www.siteduzero.com">Site du Zr0</a>
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q class="important">C'est un petit pas pour
l'Homme, un grand pas pour l'Humanit</q><br />
J'aime la choucroute en conserve.<br />
Vive les frites !
</p>
<p class="important">
Quoi, cela ne veut rien dire ce que j'cris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
</p>
</body>
</html>
Comment faire partir de l pour dire dans le CSS : "que toutes mes balises qui ont la class
"important" soient crits en rouge / 18 pixels" ?
C'est trs simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1),
vous devez crire un point suivi du nom de la class, comme par exemple :
.important
14
Ce qui nous donnerait le CSS suivant :

Code : CSS
1 important
2{
3 color: red;
4 font-size: 18px;
5}
Testez maintenant la page XHTML prcdente, et voyez comment la class "important" que nous
avons cre modifie le texte :
Lattribut id
Il fonctionne exactement de la mme manire que class, un dtail prs : il ne peut tre utilis
qu'une fois.
Un nom d'id doit commencer par une lettre et peut tre suivi ensuite de lettres et de chiffres. Un id
nomm "3tableaux" est invalide car il commence par un chiffre. Un id "tableau3" est en revanche
valide.
Nous avons dj vu l'attribut id dans le chapitre sur les liens (pour raliser des ancres).
En pratique, nous ne mettrons des "id" que sur des lments qui sont uniques sur votre page,
comme par exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo" />
Dans le CSS, ce n'est pas un point que vous devez mettre avant le nom de l'id, mais un dise (#) :
Code : CSS
1 #logo
2{
3 /* Mettez les proprits CSS ici */
4}
7. Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id mais c'est plus rare) certains
mots qui ne sont pas entours par des balises.
En effet, le problme des class c'est qu'il s'agit d'un attribut, vous ne pouvez donc en mettre que sur
une balise.
15
Par exemple, si on veut modifier uniquement "Neil Armstrong" dans le paragraphe suivant :
Code : HTML
1 <p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>
Ca serait facile faire s'il y avait une balise autour de "Neil Armstrong", malheureusement il n'y en a
pas. Heureusement, on a 2 balises importantes, la diffrence entre les deux est :
<span> </span> : c'est une balise de type inline. Vous vous souvenez ce qu'est une balise
inline ? C'est une balise qui se met l'intrieur d'un paragraphe, comme <strong>, <em>,
<q>. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous
servir pour colorer Neil Armstrong.
<div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle cre un nouveau
"bloc" dans la page, et provoque donc obligatoirement un retour la ligne. C'est une balise
trs trs utilise pour faire un design. Nous lui ddierons d'ailleurs 2 chapitres entiers dans la
suite du cours pour vous aider construire le design de votre site web.
Pour le moment donc, nous allons utiliser plutt la balise <span>.On la met autour de Neil
Armstrong, on lui rajoute une class, on cre le CSS.
Code : HTML
1 <p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>
Code : CSS
1 .nom
2{
3 color: blue;
4}
8. Imbrications de balises
Une des dernires notions "de base" sur le CSS est qu'on a la possibilit d'indiquer l'ordre
d'imbrication des balises dans le CSS. C'est en fait simple comprendre, et surtout utile.
Nous sommes dans notre fichier CSS. Nous souhaiterions dfinir un style uniquement pour les balises
<em> qui se trouvent l'intrieur d'un titre <h3>.On doit crire ceci :
Code : CSS
1 h3 em /* => tous les em situs l'intrieur d'un h3 */
2{
3 color: blue;
4}
16
Comme vous le voyez, on a juste spar les 2 noms de balises par un espace, et non pas par une
virgule comme on l'a fait plus haut.
Cela signifie "quon veut modifier le style de toutes les balises <em> situes l'intrieur de titres
<h3>". On a indiqu dans le CSS dans quel ordre devaient tre imbriques les balises.
L'ordre est trs important ! Si vous aviez mis "em h3" cela aurait voulu dire "Tous les <h3> situs
l'intrieur de balises <em>".Cela est d'ailleurs impossible faire car on ne peut pas mettre une balise
de type block dans une balise de type inline.
Voici un fichier XHTML pour que vous compreniez bien comment cela fonctionne :
Code : HTML
<h3>L'imbrication, c'est <em>pratique</em></h3>
1
2
<p>Cet exemple vous montre comment fonctionne l'imbrication.<br />Le mot "pratique" dans le titre sera
3
crit en bleu, mais pas celui-ci : <em>pratique</em>.</p>
Vous pouvez aussi mlanger des balises et des class :

p .important
Ce qui signifie : "Toutes les class "important" contenues dans des balises <p>".
Un petit exemple :
blockquote p strong, h1 .important
Alors l, attention de ne pas tout mlanger. La virgule "coupe" la ligne en deux, elle signifie "ET".
Pour bien voir que la ligne est coupe en deux, on va colorer les deux parties :
blockquote p strong, h1 .important
Ce qui veut dire : "Toutes les balises <strong> contenues dans un <p> elles-mmes contenues dans
un <blockquote> ET toutes les class "important" contenues dans un titre <h1>"
9. Formatage du texte en CSS (partie 1/2)

Cela signifie simplement que l'on va modifier l'apparence du texte (on dit qu'on le "met en forme").
Pas de surprise particulire : nous sommes toujours dans le CSS, et nous allons rutiliser ce que nous
venons d'apprendre dans le chapitre prcdent.
Cette fois, on passe au concret : nous allons voir successivement comment modifier la taille du
texte, changer la police, aligner le texte etc...
Taille du texte
17
Les possibilits pour modifier la taille du texte sont nombreuses (et varies !).
Ce que vous savez dj, c'est que la proprit CSS qui permet de changer la taille du texte est fontsize. Cela ne change pas. Mais par contre, on peut indiquer la taille du texte de diffrentes manires :
En pixels : c'est une faon trs prcise d'indiquer la taille du texte. C'est vous de dire
combien de pixels exactement doit faire le texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez crire :
font-size:16px;
Les lettres auront une taille de 16 pixels, comme le montre l'image suivante :
Voici un exemple d'utilisation

Code : CSS
1
2
3
4
5
6
7
8
p
{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 22px; /* Titres de 22 pixels */
}
Il est aussi possible d'indiquer une taille en centimtres ("2cm" par exemple) et en
millimtres ("14mm" par exemple).
Indiquer la taille du texte en pixels, centimtres et millimtres est trs pratique et trs prcis.
Certes. Mais il est prfrable d'indiquer une taille relative (comme nous allons le voir) afin
que la taille du texte s'adapte aux choix de tout le monde (certains prfrent avoir du texte
plutt gros, d'autres plutt petit etc...)
En donnant une valeur relative : c'est--dire en crivant carrment "gros", "trs gros",
"petit", "minuscule". Mais bien sr, comme tout c'est en anglais :p. Voici la liste des
diffrentes valeurs que vous pouvez mettre ainsi que leur signification :
o
o
o
o
o
xx-small : minuscule
x-small : trs petit
small : petit
medium : moyen
large : grand
18
o
o
x-large : trs grand

xx-large : gigantesque
Voici un exemple de CSS qui utilise des valeurs relatives :

Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.minuscule
{
font-size: xx-small;
}
.trespetit
{
font-size: x-small;
}
.petit
{
font-size: small;
}
.moyen
{
font-size: medium;
}
.grand
{
font-size: large;
}
.tresgrand
{
font-size: x-large;
}
.supermegagigatresgrand
{
font-size: xx-large;
}
La taille du texte n'est peut-tre pas exactement identique selon le navigateur... mais ce n'est
pas bien grave, car dans tous les cas "xx-small" correspond un texte trs petit, et "xx-large"
un texte trs grand.
Cest cette mthode qui est indique, pour exprimer la taille du texte plutt que d'utiliser des
pixels. Votre site sera ainsi bien plus "adaptable" aux diffrentes configurations de vos
visiteurs.
En em : c'est une autre faon d'indiquer de manire relative la taille du texte. Un peu dlicat
comprendre, mais c'est une mthode vraiment pratique.
On doit indiquer la taille du texte par rapport la taille normale de la police. Cest--dire :
"1em" signifie "Taille normale". Si vous mettez un nombre suprieur (gnralement un
nombre dcimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De mme
pour rduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.
19
Faites attention, il faut mettre un point la place de la virgule pour les nombres
dcimaux.Vous devez donc crire "1.4em" et non pas "1,4em" !
Code : CSS
1
2
3
4
5
6
7
8
.petit_em
{
font-size: 0.7em;
}
.grand_em
{
font-size: 1.3em;
}
En pourcentage : cela c'est facile. Si vous indiquez "100%", le texte aura une taille "normale".
Si vous mettez "130%", le texte aura une taille correspondant 130% de la taille normale. Ca
ressemble normment aux "em" (en fait c'est plus ou moins pareil).
En ce qui me concerne, la mthode des "em" (ou des %) est la plus pratique : elle a
l'avantage de s'adapter automatiquement aux prfrences du visiteur et d'tre facile
utiliser.
Polices
En effet, le problme c'est que, pour qu'une police s'affiche correctement, il faut que tous les
internautes l'aient. Si un internaute n'a pas la mme police que vous, son navigateur prendra une
police par dfaut (une police standard) qui n'aura peut-tre rien voir avec ce quoi vous vous
attendiez.
Certes, tout le monde a "Times new roman" et "Arial"... Et encore, sur Mac c'est "Time" et pas "Times
New Roman".
La proprit CSS qui permet d'indiquer la police est font-family. Vous devez indiquer le nom de la
police comme ceci :
font-family:police;
Seulement, pour viter qu'il n'y ait de problme si l'internaute n'a pas la mme police que vous, on
met en gnral plusieurs noms de police, spars par des virgules :
font-family:police1, police2, police3, police4;
Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il essaiera de mettre la police2. S'il
ne l'a pas, il essaiera la police3 et ainsi de suite.
En gnral, on met en tout dernier "serif", ce qui correspond une police standard (qui ne se met
que si aucune autre police n'a t trouve).
Oui, mais quelles sont les polices les plus courantes qu'on a le "droit" d'utiliser ?
20
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs et que vous pouvez
donc utiliser sans crainte :
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Ainsi, on peut crire :

font-family:Impact, "Arial Black", Arial, Verdana, serif;
... cela signifie : "Mets la police Impact, ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon
Verdana, ou si rien n'a march mets une police standard (serif)"
En gnral, il est bien d'indiquer un choix de 3-4 polices (+ serif) afin de s'assurer qu'au moins l'une
d'entre elles aura t trouve sur l'ordinateur du visiteur.
Si le nom de la police comporte des espaces, vous devez l'entourer de guillemets, comme pour "Arial
Black".
Code : CSS
1
2
3
4
5
6
7
8
9
h1
{
font-family: "Arial Black", Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorit */
}
p
{
/* La police Comic Sans MS est agrable lire pour les paragraphes je trouve */
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
Alignement
Alignements simples
Le langage CSS nous permet de faire tous les alignements que l'on connat : gauche, centr, droite
et justifi.
C'est tout simple. On utilise la proprit text-align, et on indique l'alignement dsir :
left : le texte sera align gauche (c'est le rglage par dfaut).

center : le texte sera centr.
right : le texte sera align droite.
21
justify : le texte sera "justifi". Justifier le texte permet de faire en sorte qu'il prenne toute la
largeur possible sans laisser d'espace blanc la fin des lignes. Les textes des journaux, par
exemple, sont tout le temps justifis.
Regardez les diffrents alignements sur cet exemple :

Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1
{
text-align: center; /* Pour centrer le titre */
font-family: "Arial Black", Arial, Verdana, serif; /* Un titre en Arial Black c'est mieux :o;) */
}
blockquote
{
text-align: justify; /* La citation sera justifie */
}
.signature
{
text-align: right; /* Pour aligner droite ma signature */
font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
font-size: 80%;
}
N'oubliez pas qu'il y a toujours du XHTML derrire, bien entendu. Sachez toutefois qu'il est toujours
possible d'afficher le code XHTML d'une page en faisant Clic droit / "Afficher le code source".
Voici donc le code XHTML de cet exemple permettant de tester les alignements :
Code : HTML
<h1>La parole du sage</h1>
<p>Un jour, un grand sage a dit :</p>
1
2
3
4
5
6
7
<blockquote><p>Morbi fermentum libero non libero. Nunc in turpis in justo adipiscing scelerisque. Donec id
elit non diam aliquet semper. Maecenas pede. Maecenas fringilla. Fusce eleifend dui quis lectus. Praesent
facilisis, ligula a consequat posuere, metus purus porta mi, at consectetuer justo wisi id dui. Maecenas mattis.
Ut imperdiet pharetra enim. Suspendisse quis leo nec arcu interdum aliquam. Vivamus dictum quam id tellus.
Maecenas in quam sit amet risus semper auctor. Integer leo dui, malesuada eu, fermentum at, vehicula at,
nisl. Pellentesque hendrerit. Proin ut libero. Curabitur sem ipsum, porta non, feugiat vel, mollis ut, justo. Sed a
orci id metus pretium lobortis. Morbi ultrices, quam a facilisis faucibus, odio nunc dignissim enim, eget
rhoncus purus erat ac quam.</p></blockquote>
<p class="signature">Sign : M@teo21</p>
Vous ne pouvez pas modifier l'alignement du texte d'une balise inline (comme span, a, em, strong...).
L'alignement ne fonctionne que sur des balises de type block (p, div, blockquote, h1, h2, ...), et c'est
un peu logique quand on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu
d'un paragraphe !
C'est donc en gnral le paragraphe entier qu'il vous faudra aligner.
22
L'indentation
Qu'est-ce que l'indentation ? C'est tout simplement la mise en retrait du texte. Cela permet par
exemple de faire commencer un paragraphe un peu plus droite, ce qui rend la lecture beaucoup
plus facile et agrable. C'est un procd que l'on retrouve dans la plupart des livres d'ailleurs.
Voici un exemple de paragraphe indent :
Texte indent
On utilise la proprit text-indent. On doit indiquer quelle est la taille du retrait : on peut le faire en
pixels, en centimtres, en millimtres...
Bref, l le mieux mon avis c'est d'utiliser les pixels. Regardez, comment on met tous les textes des
paragraphes en retrait avec text-indent :
Code : CSS
1p
2{
3 text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
4 text-align: justify; /* Ils seront justifis */
5 font-size: large; /* Allez, soyons fous, grossissons le texte :o;) */
6}
L'avantage en CSS, c'est qu'il vous suffit de dire une fois pour toutes : "On veut que tous mes
paragraphes soient indents de 30 pixels sur la droite" et chaque fois que vous crirez un nouveau
paragraphe, celui-ci sera automatiquement mis en retrait.
Avant le XHTML ( l'poque du HTML) ce genre de chose tait impossible, ou plutt difficile et
rptitif.
A noter 2 proprits similaires :
word-spacing : l'espace entre les mots (en pixels).

letter-spacing : l'espace entre les lettres (en pixels).
23
10. Formatage du texte en CSS (partie 2/2)

Effets de style
Il existe en CSS une srie de proprits tonnantes comme sympathiques qui permettent de donner
un peu plus de style vos pages web. Cela va de la mise en gras, italique, soulign la mise en
capitales, en passant par la possibilit de faire clignoter le texte !
Mettre en italique
On a la possibilit de mettre en italique en CSS, c'est donc utile juste des fins de prsentation.
Parce que, le CSS sert uniquement la prsentation de vos pages web.
Concrtement, pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :
italic : le texte sera mis en italique.

oblique : le texte sera mis en italique. "italic" et "oblique" reviennent au mme. Choisissez
donc l'un des deux.
normal : le texte sera normal (par dfaut). Cela vous permet d'annuler une mise en italique.
Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez
crire :
Code : CSS
1 em
2{
3 font-style: normal;
4}
Sur l'exemple suivant, on se sert par exemple de font-style pour mettre en italique tous mes titres
<h2> :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
}
h2
{
font-style: italic; /* Les titres h2 seront en italique ! */
text-indent: 30px; /* On dcale un peu les sous-titres */
font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif;
}
24
Mettre en gras
La mise en gras en CSS permet de mettre en gras par exemple les titres, certains paragraphes entiers
etc...
La proprit CSS pour mettre en gras est font-weight, et prend les valeurs suivantes :
bold : le texte sera en gras.

normal : le texte sera crit normalement (par dfaut).
On n'a qu' s'en servir pour mettre les paragraphes en gras, tenez :
Code : CSS
1p
2{
3 font-weight: bold;
4}
Les majuscules en CSS

Le CSS permet d'appliquer des effets trs intressants sur du texte, en modifiant automatiquement
les majuscules.
Nous allons voir 2 proprits CSS qui travaillent sur les majuscules.
Commenons par la proprit font-variant, toute simple, qui prend uniquement 2 valeurs diffrentes
:
small-caps : le texte sera crit en petites capitales.

normal : le texte sera crit normalement (par dfaut).
Code : CSS
1p
2{
3 font-variant: small-caps;
4}
Mais, il y a une seconde proprit CSS qui travaille sur les majuscules elle aussi : text-transform. Elle
peut prendre ces valeurs :
uppercase : tout le texte sera crit en majuscules.

lowercase : tout le texte sera en minuscules.
capitalize : la premire lettre de chaque mot sera en majuscule.
none : pas de transformation (par dfaut).
25
Regardez en particulier comment on se sert des class pour crer (entre autres) une class
pousser_une_gueulante.
Code : HTML
<h1>Je suis trs en colre...</h1>
1
2
3
4
5
<p>...mais je vais essayer de rester calme. Enfin, si possible, mais je promets rien hein...<br />
<span class="pousser_une_gueulante">ahhhh !!! non cette fois je craque ! qui c'est qui a mis de la mayo dans
mes frites !??<br />sacrilge !</span></p>
<p class="chuchoter">CECI EST UN PARAGRAPHE QUE JE CHUCHOTE, ALORS QUE POURTANT DANS LE CODE
XHTML IL EST ECRIT EN MAJUSCULES</p>
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
text-transform: capitalize; /* Les premires lettres des mots du titre seront en majuscules */
}
.pousser_une_gueulante
{
text-transform: uppercase; /* Si j'ai envie de me faire entendre, je mets en majuscules */
}
.chuchoter
{
text-transform: lowercase;
font-style: italic; /* Le texte chuchot sera en minuscules et italique */
}
Cette proprit text-transform est vraiment pratique pour changer l'apparence de tout un texte en
un clin d'oeil !
Comme quoi, le CSS n'est pas que bon aligner le texte et changer la police. Il peut aussi agir
directement sur un texte dj crit pour modifier ses majuscules / minuscules.
Un peu de dcoration ?
Cette proprit CSS porte bien son nom : text-decoration
Elle permet, entre autres, de souligner le texte. Voici les diffrentes valeurs qu'elle peut prendre :
underline : soulign.
line-through : barr.
overline : ligne au-dessus.
blink : clignotant. Attention, cette proprit ne marche pas sous Internet Explorer ni sous
Google Chrome. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont
Mozilla Firefox.
none : normal (par dfaut).
26
Ce CSS va vous permettre de tester les effets de text-decoration :

Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
h1
{
text-align: center;
font-family: "Arial Black", Arial, "Times New Roman", serif;
text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
}
.souligne
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus
{
text-decoration: overline;
}
Au passage, voici le XHTML qui va avec :

Code : HTML
1
2
3
4
5
6
<h1>A ne pas manquer !</h1>

<p>La proprit CSS <em>text-decoration</em> permet de dcorer un peu son texte :<br />
<span class="souligne">en le soulignant</span>...<br />
<span class="barre">en le barrant</span>...<br />
...ou encore <span class="ligne_dessus">en mettant une ligne au-dessus</span>.</p>
N'oubliez pas que l'intrt du CSS c'est aussi de pouvoir cumuler les styles. La class "souligne" ne fait
que souligner pour l'exemple, mais dans la pratique on cre souvent des class combinant les styles,
comme par exemple une class "important" qui souligne le texte, le met en gras, et l'crit en plus gros.
11. Les couleurs

Plusieurs possibilits pour indiquer une couleur, comme c'tait le cas avec la taille du texte.
Premire chose savoir : la proprit qui permet de changer la couleur du texte est color.
Indiquer le nom de la couleur

La mthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom (in
english, of course).
27
Le seul dfaut de cette mthode est qu'il n'existe que 16 couleurs dites "standard". D'autres couleurs
officieuses existent, mais comme elles ne fonctionneront pas forcment pareil sur tous les
navigateurs.
Voici les 16 couleurs que vous pouvez utiliser en tapant simplement leur nom :
Couleur
Aperu
Couleur
white
yellow
silver
olive
gray
blue
black
navy
red
fuchsia
maroon
purple
lime
aqua
green
teal
Aperu
Voici le CSS de test :

Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h1
{
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", serif;
color: green; /* Le titre en vert (pourquoi pas ?) */
}
p
{
text-indent: 20px;
color: blue; /* Les paragraphes en bleu */
}
strong /* ... et les mots importants en rouge clignotant ! */
{
color: red;
text-decoration: blink;
}
... et la page XHTML qui va avec :
28
Code : HTML
<h1>De toutes les couleurs</h1>
1
2
3
4
5
<p>Salut et bienvenue dans cette page haute en couleurs ! J'utilise des <strong>noms de couleurs
standards</strong> dans mon CSS pour gayer un peu la page. Ainsi, "red" signifie "rouge", "blue" signifie
"bleu" etc.</p>
<p>Grce l'attribut <em>color</em> du CSS, on a (entre autres) pu convertir
<strong>automatiquement</strong> tous les mots importants (dans une balise "strong" ;) ) en textes rouge
clignotant ! Comme cela, on ne risque pas de les louper ;o)</p>
Les textes importants en rouge clignotant...
La notation hexadcimale
Il existe plusieurs faons en CSS de choisir une couleur parmi toutes celles qui existent.
Un nom de couleur en hexadcimal, cela ressemble cela : #FF5A28. Pour faire simple, c'est une
combinaison de lettres et de chiffres qui indiquent une couleur.
On doit toujours commencer par crire un dise (#), suivi de 6 lettres ou chiffres allant de 0 9 et de
A F.
Ces lettres ou chiffres fonctionnent deux par deux. Les 2 premiers indiquent une quantit de rouge,
les 2 suivants une quantit de vert, et les 2 derniers une quantit de bleu. En mlangeant ces
quantits (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on
veut.
Ainsi, #000000 correspond la couleur noire et #FFFFFF la couleur blanche.

Il se peut que certains logiciels de dessin, comme Photoshop, vous indiquent les couleurs en
hexadcimal. Il vous sera alors facile de copier-coller le code hexadcimal d'une couleur dans votre
fichier CSS.
Voici par exemple comment on fait pour appliquer la couleur blanche en hexadcimal :
color:#FFFFFF;
La mthode RGB
Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'crit Red-Green-Blue, ce qui s'abrge en "RGB".
Comme pour la notation hexadcimale, on doit dfinir une quantit de rouge, de vert et de bleu pour
choisir une couleur.
29
Oui, mais l vous allez voir que c'est beaucoup plus pratique et qu'avec un logiciel de dessin tout
simple comme Paint, vous pouvez trouver la couleur que vous dsirez.Voici la marche suivre :
1. Lancez le logiciel Paint depuis le menu Dmarrer.
2. Rendez-vous dans le menu Couleurs / Modifier les couleurs :
3. Une fentre s'ouvre. Cliquez sur le bouton "Dfinir les couleurs personnalises" en bas. Dans
la zone qui apparat droite, faites bouger les curseurs pour slectionner la couleur qui vous
intresse.
4. Supposons quon veut crire les titres <h1> en rose barbie (supposons seulement). Je
slectionne la couleur dans la fentre, comme ceci :
30
5. On relve les quantits de Rouge-Vert-Bleu correspondantes indiques en bas droite de la

fentre (ici 243-65-243). On recopie ces valeurs dans cet ordre dans le fichier CSS, comme
ceci :
Code : CSS
1 h1
2{
3 text-align: center;
4 color: rgb(243,65,243);
5}
Comme vous avez pu le constater dans l'exemple, pour utiliser la mthode RGB il faut taper
rgb(Rouge, Vert, Bleu) en remplacelant "Rouge, Vert, Bleu" par les nombres correspondants. Pour
votre information, ces nombres vont de 0 255.
Le fond
Contrairement ce qu'on pourrait croire, le fond ne dsigne pas forcment le fond de toute une
page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore
certains mots d'un paragraphe.
Il faut tout d'abord savoir qu'il existe 2 types de fonds :
Les fonds comportant une couleur

Les fonds comportant une image de fond
Nous allons commencer nous intresser la couleur de fond dans un premier temps, puis nous
verrons comment faire pour avoir une image de fond.
31
La couleur de fond
Pour indiquer une couleur de fond, on utilise la proprit CSS background-color. Elle s'utilise de la
mme manire que la proprit color, c'est--dire que vous pouvez taper le nom d'une couleur,
l'crire en notation hexadcimale ou encore utiliser la mthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui, <body>
correspond toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la
couleur de fond de la page web.
Regardez trs attentivement ce fichier CSS :
32
Code : CSS
1 body /* On travaille sur la balise body, donc sur TOUTE la page */
2{
3 background-color: black; /* Le fond de la page sera noir */
4 color: white; /* Le texte de la page sera blanc */
5}
En CSS, si vous appliquez un style une balise, toutes les balises qui se trouvent l'intrieur de cette
balise prendront le mme style. Ce phnomne s'appelle l'hritage.
C'est en fait simple comprendre et intuitif. La balise <body>, vous le savez, contient entre autres les
balises de paragraphe <p> et de titre <h1>.
Si, on applique une couleur de fond noire et une couleur de texte blanche la balise <body>, tous les
titres et paragraphes auront eux aussi une couleur de fond noire et un texte de couleur blanche...
C'est ce phnomne qui s'appelle l'hritage : on dit que les balises qui se trouvent l'intrieur d'une
autre balise "hritent" de ses proprits.
Cela veut dire que TOUT le texte de la page web sera forcment crit en blanc ?
Non, pas obligatoirement. Si vous dites par la suite que vous voulez vos titres en rouge, ce style aura
la priorit et vos titres seront donc en rouge. En revanche, si vous n'indiquez rien de particulierp,
alors vos titres hriteront de la couleur blanche.
Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les proprits CSS
seront hrites : vous pouvez par exemple demander une taille de texte de "1.3em" dans la balise
<body>, et tous vos titres et paragraphes seront de cette taille-l.
Voici un exemple o je vous montre comment on "annule" l'hritage pour que nos titres ne soient
pas crits en blanc. On a profit pour crer une class "surligne" qui met le texte sur fond jaune pour
donner une impression de surlignage.
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body
{
background-color: black;
color: white; /* Toutes les balises contenues dans body verront leur texte color en blanc... */
}
h1
{
color: red; /* ... sauf si je demande expressment de changer la couleur par la suite */
}
.surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */
{
background-color: yellow;
color: black; /* Le texte surlign sera crit en noir, parce que le blanc sur fond jaune on voit rien ;o) */
}
33
Comme vous pouvez le constater, on n'a pas indiqu de couleur particulire pour les paragraphes
(<p>), donc ils ont hrit de la couleur blanche. En revanche, le titre n'a pas hrit de la couleur
blanche car on a crit qu'on voulait qu'il soit en rouge.
La class "surligne" vous montre qu'on peut sans problme appliquer une couleur de fond certains
mots d'un texte.
L'image de fond
Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcment la page entire,
on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc...
La proprit permettant d'indiquer une image de fond est background-image. Comme valeur, on doit
lui mettre url("nom_de_l_image.png"). Par exemple :
background-image:url("fond.png");
Le fond n'est pas forcment en PNG, il peut aussi tre en JPEG ou en GIF.
L'adresse indiquant o se trouve l'image de fond peut tre en absolu (http://...) ou en relatif
(fond.png).
Attention lorsque vous mettez une adresse en relatif dans le fichier CSS ! L'adresse de l'image doit
tre indique par rapport au fichier .css et non pas par rapport au fichier .html.
Ainsi, si votre site comporte 2 dossiers : "css" et "images", il vous faudra taper : "../images/fond.png"
pour rcuprer l'image de fond. Si vous ne mettez pas le chemin correct, votre image de fond ne
s'affichera pas.
Si on veut appliquer une image de fond toute la page, on doit l encore utiliser la balise <body> :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body
{
background-image: url("../images/neige.png");
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p /* Tous les paragraphes contenus dans un blockquote */
{
text-align: justify;
text-indent: 25px;
}
34
Il existe par ailleurs une proprit CSS qui permet de "fixer" le fond, pour ne pas qu'il bouge en
mme temps que le texte.
La proprit concerne rpond au doux nom de background-attachment et peut prendre 2 valeurs :
fixed : l'image de fond reste fixe.

scroll : l'image de fond dfile avec le texte (par dfaut).
En rutilisant le mme fichier XHTML que tout l'heure, mais en changeant un peu le CSS pour y
rajouter background-attachment, on obtient ceci :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body
{
background-image: url("../images/neige.png");
background-attachment: fixed; /* Le fond restera fixe */
}
h1
{
font-style: italic;
text-align: center;
}
blockquote p
{
text-indent: 25px;
}
Essayez de descendre plus bas dans la page avec les barres de dfilement, vous verrez que le fond
reste fixe
Il reste encore 2 proprits en rapport avec les images de fond.
La premire d'entre elle est celle qui gre la rptition de l'image de fond. Cette proprit s'appelle
background-repeat et peut prendre ces valeurs :
no-repeat : le fond ne sera pas rpt. L'image sera donc unique sur la page.
repeat-x : le fond sera rpt uniquement sur la premire ligne, horizontalement.
repeat-y : le fond sera rpt uniquement sur la premire colonne, verticalement.
repeat : le fond sera rpt (par dfaut).
On peut indiquer o doit se trouver l'image de fond avec background-position. Cette proprit n'est
intressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se rpte pas).
Vous devez donner background-position 2 valeurs en pixels pour indiquer la position du fond par
rapport au coin suprieur gauche de la page (ou du paragraphe si vous appliquez le fond un
paragraphe). Ainsi, si vous tapez :
background-position:30px 50px;
35
... votre fond sera plac 30 pixels de la gauche et 50 pixels du haut. Il est aussi possible de mettre
ces valeurs en anglais :
top : en haut.
bottom : en bas.
left : gauche.
center : centr.
right : droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut droite, vous
taperez : background-position: top right;
Allez, pour ce dernier exemple, on va rutiliser toutes les proprits sur le fond qu'on a apprises.
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body
{
background-image: url("../images/skieur.gif"); /* Le fond est l'image "skieur.gif" */
background-repeat: no-repeat; /* Le fond ne se rpte pas */
background-position: top right; /* Le fond est align en haut droite */
background-attachment: fixed; /* Le fond est fix */
}
h1
{
font-style: italic;
text-align: center;
}
blockquote p
{
text-indent: 25px;
}
Si vous utilisez beaucoup de proprits en rapport avec le background (comme c'est le cas sur cet
exemple), vous pouvez utiliser une sorte de "mga-proprit" background qui peut prendre plusieurs
valeurs combines des proprits background-image, background-repeat, background-attachment et
background-position.
C'est la premire "mga-proprit" qui est prsent. Pour toutes les "mga-proprits" comme
background, il faut savoir que :
L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe
quel ordre :
background: url("../images/skieur.gif") no-repeat top right fixed;
background: no-repeat fixed top right url("../images/skieur.gif");
Vous n'tes pas obligs de mettre toutes les valeurs. Ainsi, si vous ne voulez pas mettre fixed,
vous pouvez l'enlever sans problme :
background:url("../images/skieur.gif") no-repeat top right;
La "mga-proprit" n'est intressante que si vous avez plusieurs valeurs combiner bien entendu.
L'exemple ci-dessous donne le mme rsultat que l'exemple prcdent, mais il utilise background
36
pour combiner les valeurs et rendre le fichier CSS plus petit :
37
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body
{
background: url("../images/skieur.gif") no-repeat top right fixed;
}
h1
{
font-style: italic;
text-align: center;
}
blockquote p
{
text-indent: 25px;
}
Une dernire chose : dans tous ces exemples, on a appliqu un fond la page entire (body). Mais
cela ne doit pas vous faire oublier qu'on peut appliquer un fond n'importe quel lment (un titre,
un paragraphe, certains mots d'un paragraphe etc)...
12. Des liens sympas

Si vous avez bien suivi les sous chapitres prcdents, vous savez comment modifier l'apparence des
liens. Il suffit d'appliquer des styles la balise <a> et le tour est jou.
Par dfaut, les liens s'affichent en bleu et sont souligns. Supposons que vous ne vouliez pas du
soulignement, vous allez utiliser :
text-decoration:none;
... ce qui aura pour effet d'annuler le soulignement. Vos liens ne seront alors plus souligns.
Voici un CSS qui applique 2-3 styles aux liens pour changer des immondes liens bleus souligns.
Code : CSS
1a
2{
3 text-decoration: none; /* Les liens ne seront plus souligns */
4 color: red; /* Les liens seront en rouge au lieu de bleu */
5 font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
6}
Nous allons apprendre modifier l'apparence des liens :
... lorsque le visiteur pointe dessus avec la souris.

38
... lorsque le visiteur clique dessus.

... lorsque le visiteur a slectionn le lien.
... lorsque le visiteur a dj vu la page.
Au passage de la souris
Le premier pseudo-format s'appelle :hover. Comme tous les autres pseudo-formats que nous allons
voir, c'est une information que l'on rajoute aprs le nom de la balise (ou de la class) dans le CSS,
comme ceci :
Code : CSS
1 a:hover
2{
3
4}
":hover" signifie "Dessus".

"a:hover" signifie donc : "Quand la souris est sur le lien" (quand on pointe dessus).
A gauche, vous tapez comme d'habitude la balise concerne (en l'occurence <a>, la balise de lien), et
droite vous mettez le pseudo-format.
A partir de l, c'est vous de dfinir l'apparence que doivent avoir les liens lorsqu'on pointe dessus.
Laissez libre cours votre imagination, il n'y a pas de limite.
Voici un exemple de prsentation des liens :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
a
{
text-decoration: none; /* Les liens ne seront plus souligns */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-style: italic; /* Les liens seront en italique */
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline; /* Le lien deviendra soulign quand on pointera dessus */
color: green; /* Le lien sera crit en vert quand on pointera dessus */
}
La bonne nouvelle, c'est que vous pouvez appliquer le pseudo-format ":hover" n'importe quelle
balise.
La mauvaise nouvelle, c'est que pour Internet Explorer 6 le ":hover" ne marche que sur les liens. Sous
Internet Explorer 7, il marche en thorie sur toutes les balises, mais il y a quand mme quelques
bugs.
Sur tous les autres navigateurs cela fonctionne la perfection.
39
Voici un exemple d'utilisation du :hover sur un paragraphe ( tester avec un autre navigateur que IE):
40
Code : CSS
1 p:hover /* Quand on pointe sur un paragraphe */
2{
3 background-color: #CFE1EB; /* Le fond du paragraphe change de couleur */
4 text-indent: 20px;
5}
Au moment du clic
Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. Le lien gardera
cette apparence trs peu de temps : juste pendant que vous cliquez avec le bouton de la souris. En
clair, ce n'est pas forcment toujours bien visible.
Lapplication de :active ici, permettra de changer la couleur de fond du lien :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:active /* Quand le visiteur clique sur le lien */

{
background-color: #FFCC66;
}
{
color: green;
}
a /* Lien normal */
{
text-decoration: none;
color: red;
font-style: italic;
}
Lorsque le lien est slectionn

L, c'est peine diffrent. Le pseudo-format :focus applique un style lorsque le lien est slectionn.
C'est--dire... que cela revient un peu comme :active, c'est--dire au moment du clic (en tout cas
pour un lien).
Ce pseudo-format, appliqu d'autres balises XHTML que nous n'avons pas encore vues, permettra
de crer des effets assez sympas.
Pour ce qui est des liens, vous avez un exemple trs similaire au prcdent (on change le fond) pour
que vous puissiez comparer :
41
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a:focus /* Quand le visiteur slectionne le lien */

{
background-color: #FFCC66;}
{
color: green;
}
a /* Lien normal */
{
color: red;
font-style: italic;
}
Vous le voyez : le lien garde sa couleur de fond un peu plus longtemps.

Mais comme IE (dans ses anciennes versions) ne comprend pas le focus.
Code : CSS
1 a:active, a:focus /* Appliquer le mme style aux liens actifs et focus */
2{
3 background-color: #FFCC66;
4}
L'avantage de cette technique, c'est que si le navigateur est IE, il prendra uniquement le :active (et le
fond sera un peu color), tandis que si c'est un autre navigateur le fond restera plus longtemps grce
au :focus.
Quand la page a dj t vue...

Il est possible d'appliquer un style un lien vers une page qui a dj t vue. Par dfaut, le
navigateur colore le lien en un violet immonde (encore plus immonde que le bleu soulign :p)
Le pseudo-format qui nous intresse s'appelle :visited (qui signifie "visit"). Lapplication qui est
faite de ce pseudo-format est de barrer tous les liens qui ont t vus :
Code : CSS
1 a:visited /* Quand le visiteur a dj vu la page concerne */
2 {
3 text-decoration: line-through;
4 }
42
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a:focus /* Quand le visiteur slectionne le lien */

{
background-color: #FFCC66;
}
{
color: green;
}
a /* Lien normal */
{
color: red;
font-style: italic;
}
Bon, plus srieusement, si vous voulez appliquer un style prcis des liens dj visits, vous pouvez
les colorer les liens lgrement plus clairs que la normale. Si vos liens sont verts en temps normal,
mettez-les en vert clair lorsqu'ils ont t visits.
Premire lettre et premire ligne modifies

En CSS, il est possible de modifier automatiquement l'apparence de la premire lettre et de la
premire ligne du texte contenu dans une balise.
Il s'agit l encore de pseudo-formats. Si on a tendance utiliser ceux-l plutt sur des paragraphes,
n'oubliez pas que cela fonctionne aussi bien sur d'autres balises (comme les titres).
La premire lettre
Pour modifier l'apparence de la premire lettre, vous devez utiliser le pseudo-format :first-letter
On peut s'en servir pour crire en gras et en plus gros la premire lettre de tous les paragraphes de
votre page.
Code : CSS
1
2
3
4
5
6
7
8
9
10
p:first-letter /* La premire lettre de chaque paragraphe */

{
font-weight: bold; /* En gras */
font-size: 1.2em; /* Ecrit lgrement plus gros que la normale */
color: blue; /* En bleu */
}
p
{
text-indent: 20px;
}
43
La premire ligne
Un autre pseudo-format intressant permet de modifier cette fois la premire ligne. Il s'agit de :firstline.
Appliqu aux paragraphes, il permet d'inciter la lecture du texte. Par exemple, vous pourriez
automatiquement crire en petites capitales la premire ligne de chaque paragraphe, afin de les
rendre plus attrayants :
Code : CSS
1
2
3
4
5
6
7
8
p:first-line /* La premire ligne de chaque paragraphe */

{
font-variant: small-caps; /* En petites capitales */
}
p
{
text-indent: 20px;
}
Avant / Aprs
Les pseudo-formats que nous allons voir maintenant sont trs intressants et changent un peu de ce
qu'on a l'habitude de faire en CSS. C'est toutefois un peu plus difficile que le reste.
On parle de la possibilit d'ajouter automatiquement du texte au dbut et la fin de certains

paragraphes, afin de diminuer la quantit de texte que vous avez crire.
Par exemple, supposons que beaucoup de questions sont poses dans la page web. En temps
normal, on peut crire ceci en XHTML pour indiquer qu'une personne pose une question :
Code : HTML
1 <p>Question : quel est l'ge du webmaster ?</p>
Maintenant, supposons quon souhaite automatiser l'insertion du texte "Question : " au dbut et du
point d'interrogation la fin, pour ne pas avoir les rpter 50 fois dans le code XHTML.
On va crer une class "question" qui permettra de mettre en forme automatiquement toutes les
questions de mon texte.
44
Voici le code XHTML qui va vous permettre de comprendre ce exercice :

Code : HTML
<h1>Plein de questions</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<p>J'ai cr le Site du Zr0 parce que j'en avais marre de ne pas trouver de tutoriels corrects sur
Internet.</p>
<p class="question">De quand date ce site</p>
<p>Il a t cr aux alentours de 1999</p>
<p class="question">Quel a t le premier nom du site</p>
<p>Il n'a jamais chang de nom, il s'est toujours appel "Site"</p>
<p class="question">Combien de temps as-tu pass pour trouver un nom aussi ridicule</p>
<p>Environ 40 secondes. Oui je sais, c'est beaucoup vu le rsultat, mais que voulez-vous ;o)</p>
<p class="question">Quel est l'ge du webmaster</p>
<p>Eh quoi ? Qui cela moi ? Mon ge ne vous intresse pas allons allons.<br />Bon allez, une petite exclu,
avec cela vous saurez retrouver mon ge : j'ai commenc la cration de ce site l'ge de 14 ans.</p>
Utilisons maintenant les pseudo-formats suivants :
:before : qui signifie "avant"

:after : qui signifie "aprs"
On va utiliser une proprit CSS nouvelle et un peu particulire qui nous permettra d'insrer du texte
: content
Regardez comment on :before et :after sur les paragraphes quips de la class "question" :
Code : CSS
1
2
3
4
5
6
7
8
.question:before /* Avant chaque question */

{
content: "Question : "; /* Commencer par Question : */
}
.question:after /* Aprs chaque question */
{
content: " ?"; /* Rajouter un point d'interrogation */
}
Vous n'tes pas obligs de mettre uniquement la proprit content avec un :before ou :after, vous
pouvez aussi utiliser tous les styles CSS que vous connaissez. Ces styles s'appliqueront au texte
rajout par le :before ou :after.
45
Code : CSS
1
2
3
4
5
6
7
8
9
10
.question:before
{
content: "Question : ";
font-weight: bold; /* "Question" sera en gras */
color: blue; /* "Question" sera en bleu */
}
.question:after
{
content: " ?";
}
La mise en gras et en bleu s'appliquera donc au texte rajout par le :before.

Si vous appliquez le pseudo-format :first-letter la class question, pour mettre en gras par exemple
la premire lettre, c'est la premire lettre de "Question :" (le Q) qui sera mise en gras, et non pas la
lettre qui se trouve juste aprs "Question :" :first-letter s'appliquera donc la premire lettre du
texte crit avec le :before.
Une image au lieu du texte ?

Il est aussi possible d'indiquer une image la place du texte avec le :before et le :after.
On utilise toujours la proprit content, mais au lieu de taper du texte entre guillemets, on va mettre
une valeur "url" comme ceci :
Code : CSS
1
2
3
4
5
6
7
8
.question:before
{
content: url("../../images/qst.gif"); /* Mettre une image de question */
}
.question:after
{
content: " ?";
}
N'oubliez pas que le chemin relatif vers l'image se fait partir de la position du fichier CSS et non pas
du fichier XHTML. Si vous vous trompez dans le chemin, l'image ne s'affichera pas.
46
13. Les listes puces

Le plan de notre cours pourrait donc se rsumer ceci :
1. XHTML
2. CSS
3. XHTML & CSS, la puissance combine de ces deux langages
Diffrents types de listes (XHTML)

Ce chapitre a le mrite d'tre trs clair dans sa construction : dans un premier temps nous
apprendrons crer des listes puces d'un point de vue XHTML, et dans un second temps nous
apprendrons dcorer ces listes via de nouvelles proprits CSS. Tout d'abord, il faut savoir qu'il
existe 3 types de listes puces :
Les listes non ordonnes,

Les listes ordonnes,
Les listes de dfinitions (plus rares).
Nous allons voir comment on cre chacune de ces listes puces. En effet, contrairement ce qu'on
pourrait croire les listes puces sont trs utilises : elles servent notamment crer le menu de
votre site web !
Liste non ordonne

Une liste non ordonne ressemble ceci :
Fraises
Framboises
Cerises
C'est un systme qui nous permet de faire une liste d'lments, sans notion d'ordre (il n'y a pas de
"premier" ni de "dernier"). Crer une liste puce non ordonne est trs simple. Il suffit d'utiliser la
balise <ul> que l'on referme un peu plus loin avec un </ul>.
Commencez donc taper ceci :
Code : HTML
1 <ul></ul>
Et maintenant, voil ce qu'on va faire : on va crire chacun des lments de la liste entre 2 balises
47
<li></li>. Toutes ces balises doivent se trouver entre <ul> et </ul>. Vous allez comprendre de suite
avec cet exemple :
Code : HTML
1 <ul>
2 <li>Fraises</li>
3 <li>Framboises</li>
4 <li>Cerises</li>
5 </ul>
<ul></ul> indique le dbut d'une liste puce

<li></li> indique un nouvel lment de la liste puce.
Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez imbriquer des listes
puces (crer une liste puce DANS une liste puces). Si vous voulez faire cela, ouvrez une seconde
balise <ul> l'intrieur d'un lment <li></li>
Si vous fermez les balises dans le bon ordre, il ne devrait pas y avoir de problme.
Liste ordonne
Pour faire une liste ordonne, on ne va pas se fouler. On utilise <ol></ol>.
A l'intrieur, on utilise toujours des balises <li></li>.
L'ordre dans lequel vous mettez les lments de la liste est important. Le premier <li></li> sera
l'lment n1, le second sera le n2 etc...
Comme c'est particulirement intuitif, je vous laisse admirer la simplicit de cet exemple :
Code : HTML
1 <ol>
2 <li>Je me lve</li>
3 <li>Je mange et je bois</li>
4 <li>Je retourne me coucher</li>
5 </ol>
Liste de dfinitions
L par contre, c'est diffrent des exemples prcdents. Le principe de base est le mme. On indique
le dbut et la fin de la liste l'aide d'une balise. Ici il ne s'agit pas de <ul>, ni de <ol> mais de... <dl>
(c'est l'abrviation de "Definition List")
48
Commenons donc par taper ceci :

Code : HTML
1 <dl>
2
3
4 </dl>
En effet, dans le cas d'une liste de dfinitions, il y a 2 types d'lments diffrents :
Les mots
Et leur dfinition
Les mots se trouvent entre <dt></dt>, et les dfinitions entre <dd></dd>.

Ce qu'il faut bien comprendre, c'est qu'on doit mettre d'abord le mot (<dt>), ensuite sa dfinition
(<dd>). Si vous voulez mettre une seconde dfinition, il faut recommencer : un dt et ensuite un dd.
Regardez bien cet exemple :

Code : HTML
1 <dl>
2 <dt>Chat</dt>
3 <dd>Animal 4 pattes qui fait "Miaou !"</dd>
4 <dt>Chien</dt>
5 <dd>Animal 4 pattes qui fait "Ouaf Ouaf !"</dd>
6 <dt>Prof de maths</dt>
7 <dd>Extraterrestre venu d'une autre plante qui enseigne des choses que personne ne comprend</dd>
8 </dl>
Les lments de la liste puce fonctionnent donc ici par paire. Une fois qu'on a compris qu'il faut
taper d'abord le mot, puis sa dfinition.
49
Dcorez vos listes (CSS)

Il existe des proprits CSS spcialises dans la prsentation des listes puces. Il en existe 3. Nous
allons tudier le fonctionnement de chacune d'elles.
Retrait des listes

La premire des proprits permet d'indiquer si on veut que la liste soit mise en retrait ou non.
Cette proprit s'appelle list-style-position, et peut prendre 2 valeurs :
inside : la liste n'est pas mise en retrait.

outside : la liste est mise en retrait (par dfaut).
Ce schma qui vous explique la diffrence entre inside et outside :
Voici le CSS qui nous permettra de tester le retrait :

Code : CSS
1
2
3
4
5
6
7
8
9
.pas_de_retrait
{
list-style-position: inside;
}
.retrait
{
list-style-position: outside;
}
Et un code XHTML banal de liste puces :

50
51
Code : HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p>Voici une liste avec retrait (par dfaut) :</p>

<ul class="retrait">
<li>Liste<br /> puces</li>
<li>Ligne 1<br />Ligne 2</li>
<li>Vous pouvez voir<br />que le texte est dcal sur la droite</li>
</ul>
<p>Voici une liste sans retrait :</p>
<ul class="pas_de_retrait">
<li>Liste<br /> puces</li>
<li>Ligne 1<br />Ligne 2</li>
<li>Vous pouvez voir<br />que le texte n'est pas dcal sur la droite</li>
</ul>
En pratique, on ne dsactive pas le retrait des listes puces, sauf quand on se sert des listes pour
crer le menu de son site.
Reprsentation de la puce
Nettement plus intressante, la proprit list-style-type vous permet de changer l'apparence de la
puce. En effet, vous n'tes pas obligs d'avoir une puce sous forme de rond noir, pas plus que vous
n'tes obligs d'avoir des chiffres pour les listes numrotes (on peut utiliser des lettres : a, b, c, d...)
La proprit list-style-type peut prendre de nombreuses valeurs. Certaines d'entre elles concernent
uniquement les listes non ordonnes, d'autre concernent uniquement les listes ordonnes :
Pour les listes non ordonnes (<ul>) :

o disc : un disque noir (par dfaut).
o circle : un cercle.
o square : un carr.
o none : aucune puce ne sera utilise.
Pour les listes ordonnes (<ol>), le choix est vaste :
o decimal : des nombres 1, 2, 3, 4, 5... (par dfaut)
o decimal-leading-zero : des nombres commencelant par zro (01, 02, 03, 04, 05...).
o upper-roman : numrotation romaine, en majuscules (I, II, III, IV, V...)
o lower-roman : numrotation romaine, en minuscules (i, ii, iii, iv, v...)
o upper-alpha : numrotation alphabtique, en majuscules (A, B, C, D, E...)
o lower-alpha : numrotation alphabtique, en minuscules (a, b, c, d, e...)
o lower-greek : numrotation grecque.
Il existe en ralit d'autres valeurs possibles pour les listes ordonnes, comme la numrotation
armnienne, gorgienne, hbraque, japonaise etc...
Et si on testait quelques-unes de ces listes puces modifies ? Voici le code XHTML qui va nous servir
de test.
52
Code : HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<h2>Quelques listes non ordonnes</h2>

<p>Voici une liste puce non ordonne sans modification (= <em>disc</em>) :</p>
<ul>
<li>Liste</li>
<li></li>
<li>puces</li>
</ul>
<p>Avec <em>circle</em> :</p>
<ul class="cercle">
<li>Liste</li>
<li></li>
<li>puces</li>
</ul>
<p>Avec <em>square</em> :</p>
<ul class="carre">
<li>Liste</li>
<li></li>
<li>puces</li>
</ul>
<p>Avec <em>none</em> (sans puces) :</p>
<ul class="rien">
<li>Liste</li>
<li></li>
<li>puces</li>
</ul>
<h2>Quelques listes ordonnes</h2>
<p>Liste puces ordonne sans modification (= <em>decimal</em>)</p>
<ol>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>
<p>Avec <em>decimal-leading-zero</em> (<strong>Ne fonctionne pas sous IE)</strong>) :</p>
<ol class="commence_a_zero">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>
<p>Avec <em>lower-alpha</em> :</p>
<ol class="lettres_minuscules">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<li>Quatre</li>
</ol>
<p>Avec <em>upper-roman</em> :</p>
<ol class="chiffres_romains">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>
<p>Avec <em>lower-greek</em> (<strong>Ne fonctionne pas sous IE</strong>) :</p>
<ol class="lettres_grecques">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>
... Et le CSS qui va avec :

Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* Listes puces non ordonnes */

.cercle
{
list-style-type: circle;
}
.carre
{
list-style-type: square;
}
.rien
{
list-style-type: none;
}
/* Listes puces ordonnes */
.commence_a_zero
{
list-style-type: decimal-leading-zero;
}
.lettres_minuscules
{
list-style-type: lower-alpha;
}
.chiffres_romains
{
list-style-type: upper-roman;
}
.lettres_grecques
{
list-style-type: lower-greek;
}
54
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* Quelques styles supplmentaires juste pour la prsentation

En plus cela vous fait quelques rappels ;o) */
h2
{
text-indent: 20px;
font-family: Arial, Verdana, "Times New Roman", serif;
}
em
{
}
strong
{
color: red;
}
Changer l'image de la puce

On peut crer dautres puces, la proprit list-style-image, vous permet d'utiliser n'importe quelle
image la place d'une puce.
Vous devez lui indiquer comme valeur "url" suivi de l'adresse de l'image utiliser. Cela fonctionne
exactement comme la proprit background (qui permet d'indiquer une image de fond).
On va par exemple utiliser une petite image de dossier la place de la puce :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul /* Ma liste aura des puces en forme de dossiers */

{
list-style-image: url("dossier.png");
}
/* Juste pour amliorer la prsentation : */
a
{
color: blue;
}
a:hover
{
}
L'image de puce peut tre de n'importe quel type (PNG, GIF ou JPEG).
Attention cependant, l'image ne doit pas tre trop grande sinon elle sera coupe. Conseil : une taille
d'environ 15x15 pixels.
55
14. Mise en bote (partie 1/2)

Rappel : Block et Inline ce nest pas pareil !
On peut classer les balises XHTML dans une des 2 catgories suivantes : inline et block (en francelais :
"En ligne" et "Bloc").
Il faut que vous sachiez reconnatre si une balise est inline ou block.
Par exemple, <p></p> ?
C'est une balise block.
Et <a></a> ?
Ca c'est une balise inline.
Mais comment, reconnaitre une balise inline d'une balise block ?
C'est en fait assez facile :
block : une balise de type "block" sur votre page web cre automatiquement un retour la
ligne avant et aprs. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait
constitue d'une srie de blocks la suite les uns des autres. Mais vous verrez qu'en plus, il
est possible de mettre un block l'intrieur d'un autre, ce qui va augmenter
considrablement nos possibilits pour crer le design de notre site !
inline : une balise de type "inline" se trouve obligatoirement l'intrieur d'une balise "block".
Une balise inline ne cre pas de retour la ligne, le texte qui se trouve l'intrieur s'crit
donc la suite du texte prcdent, sur la mme ligne (c'est pour cela que l'on parle de balise
"en ligne").
Est-ce que <p></p> cre un retour en la ligne ?

C'est donc une balise de type block.
Est-ce que <a></a> cre un retour la ligne ?
Non, le texte contenu dans cette balise s'crit la suite du texte prcdent, il reste sur la mme
ligne. C'est donc une balise de type inline.
Voici ce shma simple pour reconnatre les balises block de inline :
56
Sur fond bleu, vous avez tout ce qui est de type block.
Sur fond jaune, vous avez tout ce qui est de type inline.
Comme vous pouvez le voir, les blocks sont les uns en-dessous des autres.
La balise inline <a></a> se trouve l'intrieur d'une balise block, et le texte vient s'insrer sur la
mme ligne.
Quelques exemples
Afin de mieux vous aider assimiler quelles balises sont inline et quelles balises sont block, voici un
petit tableau listant quelques balises courantes.
Balises blocks
Balises inline
<p>
<em>
<blockquote>
<strong>
<h1>
<q>
<h2>
<a>
<ul>
<sup>
<ol>
<img />
...
...
Les balises universelles

Ce sont des balises qui n'ont aucun sens particulier (contrairement <p> qui veut dire "paragraphe",
57
<strong> "important" etc...).

Le principal intrt de ces balises c'est de pouvoir appliquer une class (ou un id) pour le css quand
aucune autre balise ne convient.
Il existe 2 balises gnriques, et comme par hasard la seule diffrence entre les deux c'est que l'une
d'elle est inline, l'autre est block :
<span></span> (inline) :
Code : HTML
1 <p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>

<div></div> (block) : c'est aussi une balise qui n'a aucun sens, comme span, sauf que celle-l
est de type block.
Respectez la smantique !
Les balises universelles sont "pratiques" dans certains cas, certes, mais attention ne pas en abuser.
Voici 2 exemples :
Exemple d'un span inutile :

On ne devrait jamais voir dans un code :
<span class="important">
... alors qu'il existe la balise <strong> qui sert cela !
Exemple d'un div inutile :
De la mme manire, ceci est compltement absurde :
<div class="titre">
... puisqu'il existe des balises faites spcialement pour les titres (<h1><h2><h3>...)
Oui, vous allez me dire qu'au final le rsultat (visuel) est le mme.
Mais, tandis que les balises span et div ne signifient rien de particulier, les balises strong et h1
veulent dire quelque chose ! Strong signifie "important" et h1 signifie "titre principal".
En XHTML, on vous demande d'utiliser tant que possible des balises qui ont un sens : on appelle cela
respecter la smantique .
L'avantage c'est que si vous respectez ceci, votre code aura une certaine "logique". Lorsque le robot
de Google viendra rfrencer votre site, il "comprendra" le sens des balises et cela pourra amliorer
la position de votre position site dans le moteur de recherche.
La taille
Nous allons pour le moment travailler uniquement sur des balises de type "block".
Pour commencer, nous nous intressons la taille des blocks. Contrairement un inline, un block a
58
des dimensions prcises. Il a une largeur et une hauteur.

Ce qui fait, qu'on dispose de 2 proprits CSS :
width : c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%).

height : c'est la hauteur du block. On l'exprime soit en pixels (px), soit en pourcentage (%).
Par dfaut, et c'est trs important savoir, un block prend 100% de la largeur disponible. Regardez
par exemple ce code XHTML qui n'utilise aucune proprit CSS :
59
Code : HTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet.
Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus.
Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper.
1 Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim
eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat,
nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>
Rien de nouveau sur cet exemple. Cependant, il est trs important de noter que le paragraphe
(comme toutes les balises block) prend 100% de la largeur disponible par dfaut.
Maintenant, modifions le code CSS pour changer la largeur des paragraphes. Le CSS suivant montre
quon veut que tous mes paragraphes aient une largeur de 50%.
Code : CSS
1 p{
2 width: 50%;
3 text-align: justify; /* Texte justifi pour mieux voir la largeur du block */}
Les pourcentages seront utiles pour crer un design qui s'adapte automatiquement la rsolution de
lcran du visiteur.
Toutefois, il se peut que vous ayez besoin de crer des blocks ayant une dimension prcise en pixels :
Code : CSS
1 p{
2 width: 250px;
3 text-align: justify;
4}
Minimum et maximum
Il vous sera aussi trs pratique de demander ce qu'un block ait une taille minimale ou maximale.
C'est l qu'entrent en jeu les 4 proprits CSS suivantes :
min-width : largeur minimale

min-height : hauteur minimale
max-width : largeur maximale
max-height : hauteur maximale
60
Attention cependant, ces proprits ne fonctionnent pas sous IE 6 et fonctionnent partiellement sous
IE 7. Evitez de les utiliser tant qu'IE 6 est encore assez rpandu.
"Couper" un block avec un overflow

Supposons que vous ayez un long paragraphe et que vous vouliez qu'il fasse 250px de large et 100px
de haut.
Code : CSS
1 p{
2 width: 250px;
3 height: 100px;
5}
Si le texte n'a pas assez de place, le block va s'agrandir de manire ce que tout soit visible. Si vous
voulez "couper" votre paragraphe pour qu'il soit d'une dimension exacte de 250x100, vous allez
devoir utiliser la proprit CSS overflow.
Les valeurs que peut prendre overflow sont les suivantes :
visible (par dfaut) : si le texte dpasse les limites de taille, le block est agrandi de manire
ce que tout soit visible. C'est ce que nous venons de constater.
hidden : si le texte dpasse les limites, il sera tout simplement coup. On ne pourra pas voir
tout le texte.
scroll : l encore, le texte sera coup s'il dpasse les limites. Sauf que cette fois, le navigateur
mettra en place des barres de dfilement pour qu'on puisse voir tout le texte. C'est un peu
comme un cadre l'intrieur de la page.
auto : mode "pilote automatique" :p. En gros, c'est le navigateur qui dcide ou pas de mettre
des barres de dfilement (il en mettra si c'est ncessaire).
Avec ce CSS, nous allons pouvoir tester overflow :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
p /* Tous les paragraphes auront ces proprits CSS */{

width: 250px;
height: 100px;
}/* Et chacun des paragraphes aura en plus une valeur d'overflow diffrente */
.coupe{
overflow: hidden;
}
.barres_defilement{
overflow: scroll;
}
.auto{
overflow: auto;
}
61
En hidden, on ne peut pas voir tout le texte.

En scroll, le navigateur a mis des barres de dfilement verticales et horizontales (alors qu'on n'a pas
besoin de la barre horizontale).
En auto, le navigateur affichera la barre horizontale, si cest ncessaire.
En pratique, vous vous en doutez, on se sert plutt de overflow: auto;
L'overflow vous sera trs utile si vous avez besoin de crer des "cadres" l'intrieur de votre page
web.
Il existe une ancienne balise HTML, <iframe>, qui donne peu prs le mme rsultat. Toutefois, cette
balise n'existe plus en XHTML (elle est dpasse). Il vous faudra donc utiliser un overflow la place.
Les bordures
Le CSS vous offre un large choix de bordures pour dcorer votre page. Tellement large qu'il existe pas
mal de proprits CSS. Alors, nous allons ici montrer uniquement la mga-proprit qui regroupe
tout. : la mga-proprit : background, c'tait pour le fond de votre page web. La mga-proprit en
question, c'est border. C'est elle qui permet d'indiquer quelle bordure on applique au block.
Comme toute mga-proprit qui se respecte, vous pouvez lui mettre plusieurs valeurs (ici, il y a 3
valeurs utiliser). Vous n'tes pas obligs de mettre toutes les valeurs (vous pouvez vous contenter
de 2, ou d'une seule), et l'ordre dans lequel vous mettez ces valeurs n'a aucune importance.
La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px),
ou utilisez un des mots-cl suivants :
o thin : bordure fine
o medium : bordure moyenne
o thick : bordure paisse
C'est le navigateur qui choisit le nombre de pixels qui correspond thin, medium et thick. En
gnral, c'est peu prs pareil sur tous les navigateurs.
La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de
couleur ("black", "red"...), soit une valeur hexadcimale (#FF0000), soit une valeur rgb
(rgb(198, 212, 37)).
Le type de bordure : l, vous avez pas mal de choix. Votre bordure peut tre un simple trait,
ou des pointills, ou encore des tirets etc... Voici les diffrentes valeurs disponibles :
o none : pas de bordure (par dfaut)
o solid : un trait simple.
o dotted : pointills.
o dashed : tirets.
o double : bordure double.
o groove : en relief.
o ridge : effet 3D.
o inset : autre effet 3D (on a l'impression que le block forme un creux).
62
outset : encore un autre effet 3D (on a l'impression que le block est surlev).
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
p
{
}
width: 300px; /* Tous les paragraphes font 300px */

text-align: justify; /* Tous les paragraphes sont justifis */
.rien
{
border: none;
}
.solid
{
border: 2px solid black;
}
.dotted
{
border: 2px dotted green;
}
.dashed
{
border: 2px dashed red;
}
.double
{
border: 4px double maroon;
}
.groove
{
border: 4px groove teal;
}
.ridge
{
border: 4px ridge fuchsia;
}
.inset
{
border: 3px inset black;
}
.outset
{
border: 3px outset black;
}
63
En haut, droite, gauche, en bas...
Qui a dit que vous tiez obligs de mettre la mme bordure aux 4 cts de votre block ?
Si vous voulez mettre des bordures diffrentes en fonction du ct (haut, bas, gauche ou droite),
vous pouvez le faire sans problme. Dans ce cas, vous devrez utiliser ces 4 proprits :
border-top : bordure en haut.

border-bottom : bordure en bas.
border-left : bordure gauche.
border-right : bordure droite.
Ce sont aussi des mga-proprits, elles fonctionnent comme border mais ne s'appliquent donc qu'
un seul ct.
Voici quelques tests de bordures.
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
p
{
width: 350px;
}
h2
{
border-bottom: 2px solid black;
}
.haut_bas
{
border-top: 1px dashed red;
border-bottom: 1px dashed red;
}
.points
{
border-top: 3px dotted blue;
border-left: 2px solid green;
border-right: 2px solid green;
border-bottom: 3px dotted blue;
}
.tres_solide
{
border-left: 6px solid black;
border-right: 6px solid gray;
}
En particulier, vous remarquerez quon a appliqu une bordure en bas du titre. Cela n'a rien voir
avec un soulignement.
Par dfaut, un block (comme le titre) prend 100% de la largeur disponible. En l'occurence, le block
prend la largeur de toute la fentre. Le fait de mettre une bordure en bas du titre rvle qu'il prend
effectivement toute la largeur.
C'est une technique dcorative assez "classe" que d'utiliser un border-bottom sur un titre. Le titre
64
cre ainsi une ligne de sparation, ce qui rend votre page plus structure. En plus, c'est facile
utiliser.
Au fait, si vous voulez appliquer la mme bordure aux 4 cts de votre block, ne vous fatiguez pas
utiliser ces proprits. Utilisez plutt border qui s'applique tous les 4 cts simultanment.
Ca marche aussi sur des balises inline !

Toutes les proprits CSS que nous voyons dans ces chapitres s'appliquent le plus souvent aux
blocks... Mais pas toujours. Par exemple, on peut utiliser border sur des balises inline (mme si on le
fait un peu plus rarement).
Il y a une balise inline sur laquelle on utilise frquemment border : c'est <img /> (pour les images). En
effet, vous vous souvenez que si vous transformez une image en lien, elle se voit dote d'une
immonde bordure bleue :
Code : HTML
1
2
3
4
<p>
Vous souhaitez vous rendre vers un endroit magique ? Rien de plus simple, cliquez sur l'image ci-dessous
:<br />
<a href="http://www.siteduzero.com"><img src="images/hawai.jpg" alt="Photo de Hawaii" title="Clique
pour voyager !" /></a>
</p>
Maintenant, avec la proprit border du CSS vous allez pouvoir viter ce petit dsagrment :
Code : CSS
1 a img /* Toutes les images contenues dans un lien */
2{
3 border: none; /* Pas de bordure */
4}
Pour ceux qui auraient (dj) oubli, j'ai utilis l'imbrication. Si on tape "a img", cela signifie "Toutes
les balises <img> contenues dans un lien <a>"... Et si vous rflchissez bien, c'est exactement ce
qu'on veut : enlever la bordure qui apparat autour des images qui sont contenues dans des liens.
A la place de "border:none", on aurait pu utiliser "border:0px" ou encore "border:0" (cela marche

aussi). D'ailleurs, la plupart des webmasters ont tendance mettre "border:0" tout simplement
parce que c'est le plus court.
65
Les marges
Bien comprendre les marges, c'est vital. Si vous ne savez pas prcisment comment fonctionnent les
marges des blocks, vous serez bien embts lors de la cration de votre design !
Tous les blocks possdent des marges. Ce qui est important, c'est de savoir qu'il existe 2 types de
marges:
Les marges intrieures

Les marges extrieures
Regardez bien ce schma :
Sur ce block, on a mis une bordure pour qu'on repre mieux ses bords.
L'espace entre le texte et la bordure est la marge intrieure (en vert).
L'espace entre la bordure et le prochain block est la marge extrieure (en rouge).
En CSS, on peut modifier la taille des marges avec les 2 proprits suivantes :
66
padding : indique la taille de la marge intrieure. A exprimer en gnral en pixels (px).

margin : indique la taille de la marge extrieure. L encore, on utilise le plus souvent des
pixels.
Pour bien voir les marges, prenons 2 paragraphes auxquels on met simplement une petite bordure :
Code : CSS
1p
2{
3 width: 350px;
4 border: 1px solid black;
6}
Comme vous pouvez le constater, il n'y a par dfaut pas de marge intrieure (padding). En revanche,
il y a une marge extrieure (margin). C'est cette marge qui fait que 2 paragraphes ne sont pas colls
et qu'on a l'impression de "sauter une ligne".
Les marges par dfaut ne sont pas les mmes pour toutes les balises block. Essayez d'appliquer ce
CSS des balises <div> qui contiennent du texte par exemple, vous verrez que l il n'y a par dfaut ni
marge intrieure, ni marge extrieure !
Supposons quon veuille rajouter une marge intrieure de 12px aux paragraphes :
Code : CSS
1p
2{
3 width: 350px;
6 padding: 12px; /* Marge intrieure de 12px */
7}
Maintenant, on veut que les paragraphes soient plus espacs entre eux. on rajoute la proprit
margin pour demander ce qu'il y ait 50px de marge entre 2 paragraphes :
Code : CSS
1p
2{
3 width: 350px;
6 padding: 12px;
7 margin: 50px; /* Marge extrieure de 50px */
8}
67
Mais ??? Une marge s'est mise gauche aussi !

Margin (comme padding d'ailleurs) s'applique aux 4 cts du block.
Si vous voulez indiquer une marge en haut, en bas, gauche et droite, il va falloir utiliser des
proprits plus prcises... cela fonctionne comme pour border.
En haut, droite, gauche, en bas...

Il faut utiliser les termes anglais suivants :
top : haut,
bottom : bas,
left : gauche,
right : droite.
Voici la liste pour margin :
margin-top : marge extrieure en haut.

margin-bottom : marge extrieure en bas.
margin-left : marge extrieure gauche.
margin-right : marge extrieure droite
Et la liste pour padding :
padding-top : marge intrieure en haut.

padding-bottom : marge intrieure en bas.
padding-left : marge intrieure gauche.
padding-right : marge intrieure droite.
Bon, pour tester on va utiliser margin-bottom pour indiquer un espace en bas de chaque paragraphe,
ce qui nous vitera d'avoir une marge gauche comme tout l'heure.
On va rajouter une marge gauche pour le titre (h1) afin qu'il soit un peu dcal.
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
p
{
width: 350px;
padding: 12px;
margin-bottom: 50px;
}
h1
{
margin-left: 30px;
68
13 }
Quelle est la diffrence entre un margin-left et un text-indent ?

Visuellement le rsultat est le mme, certes. Si vous mettez une bordure, vous verrez une petite
diffrence: la bordure de gauche est dcale avec un margin-left, alors que ce n'est pas le cas avec
text-indent.
En pratique, n'utiliser le text-indent que sur des paragraphes, pour dcaler la premire ligne. Le reste
du temps, jouez avec les margin et les padding pour placer vos blocks.
Centrer des blocks

Il est tout fait possible de centrer des blocks, c'est mme trs pratique pour raliser un design
centr quand on ne connat pas la rsolution de lcran du visiteur.
Toutefois, et c'est trs important, cela ne fonctionne que si vous avez indiqu une largeur prcise
(width) au block. Si vous n'avez pas indiqu de largeur, le block ne sera pas centr !
Prenons le cas de petits paragraphes. On leur a dj donn une largeur prcise ; maintenant si on
veut les centrer sur notre cran nous allons mettre la valeur "auto" la proprit margin, comme
ceci
:
Code : CSS
1P
2{
3 width: 350px; /* On a indiqu une largeur (obligatoire) */
6 padding: 12px;
7 margin: auto; /* On peut donc demander ce que le block soit centr avec "auto" */
8 margin-bottom: 20px;
9}
Ainsi, le navigateur centre automatiquement les paragraphes. N'oubliez pas, que le margin:auto ne
peut fonctionner que si vous avez indiqu une largeur prcise pour votre block !
15. Mise en bote (partie 2/2)

Dans la premire partie de ce chapitre "Mise en bote", nous avons fait le tour des proprits CSS
permettant de modifier l'apparence et la taille des blocks. Pour rsumer rapidement, on a vu :
Comment modifier la taille des blocks

Comment modifier la bordure des blocks
Comment modifier la marge des blocks
69
Dans cette seconde partie, nous allons apprendre les positionner. Bah oui, il va bien falloir
apprendre dire : "Je veux que mon menu soit gauche, que mon contenu soit droite, qu'il y ait le
logo de mon site en haut droite 12 pixels du bord droit" etc...
Autant que les choses soient claires : le positionnement en CSS, c'est pas franchement vident... Il y a
la thorie, et il y a la pratique. Dans ce chapitre, nous verrons seulement la thorie (c'est un passage
oblig), et dans le chapitre suivant nous passerons la pratique (ce qui sera beaucoup plus concret
pour vous)
Une chose est sre, et vous devriez dj vous mettre cela en tte, c'est que vous ne pourrez jamais
avoir un site qui s'affiche pareil au pixel prs sur tous les navigateurs. A la place, nous apprendrons
faire en sorte que notre site s'affiche " peu prs correctement" sur chacun de ces navigateurs, et
cala sera dj pas si mal
Sommaire du chapitre :
Transformer un inline en block (et vice-versa)

Les images ( <img /> ) sont des balises de type inline, et vous prfreriez que ce soient des blocks ?
Pas de problme !
Les titres ( <h1> ) sont de type block, et vous prfreriez que cela soient des balises inline ? Aucun
problme !
Il existe une proprit CSS trs puissante, elle s'appelle display ( manipuler avec prcaution :p)
Cette proprit peut prendre les valeurs suivantes :
block : la balise concerne deviendra de type block.

inline : la balise concerne deviendra de type inline.
Pour transformer une balise inline en balise de type block, vous allez devoir taper :
display:block;
Par exemple, si nous voulons que TOUTES nos images soient de type block, nous crirons donc ceci :
Code : CSS
1
2
3
4
img
{
display: block;
}
Attention, aprs avoir fait cela toutes vos images vont aller automatiquement la ligne, comme le
font les autres balises de type block.
Rien n'impose que TOUTES les images soient de type block. On peut trs bien utiliser l'attribut "class"
70
sur une balise pour qu'elle ait une prsentation diffrente.

Par exemple :
Code : HTML
1
2
<img src="image.png" alt="Cette image est normale (type inline)" />

<img src="image.png" class="imageblock" alt="Cette image est modifie (type block)" />
Bien entendu, il faudra crire le code CSS suivant pour que la deuxime image soit de type block :
Code : CSS
1
2
3
4
.imageblock
{
display: block;
}
Et l'inverse alors ? Pour transformer une balise de type block en balise de type inline ?
C'est pareil, sauf qu'on utilise display:inline;
Petite remarque en passant : on transforme gnralement des inline en block, mais on fait plus
rarement l'inverse. Il faut dire que les balises block ont pas mal d'avantages : on peut modifier leur
taille, leur bordure, leurs marges etc...
Les flottants
La premire technique que nous allons voir, ce sont les flottants. Pour que vous voyiez bien de quoi
on parle, voici ce que nous allons apprendre faire :
Une image flottant gauche
Une image flottant droite
Cela permet en gros d'"entourer" un lment (ici une image) par du texte. Ca permet d'avoir une
jolie prsentation facilement. La proprit magique qui fait flotter est... float ("flottant" en anglais).
Cette proprit peut prendre 2 valeurs, que vous pourriez d'ailleurs avoir devin tous seuls :
left : l'lment flottera gauche.

right : l'lment flottera... droite !
L'utilisation des flottants est trs simple. En fait, il n'y a que 2 choses faire :
1. Vous appliquez un float une balise.
2. Puis vous continuez crire du texte la suite normalement.
On peut aussi bien utiliser la proprit float sur des balises block que sur des balises inline.
71
Faire flotter une image

Nous allons apprendre ici faire flotter une image (qui est de type "inline"). Voici le code XHTML que
nous devons taper dans un premier temps :
Code : HTML
1
2
3
4
<p><img src="../images/flash.gif" class="imageflottante" alt="Image flottante" /></p>

<p>Ceci est un texte normal de paragraphe, crit la suite de l'image mais qui l'"entourera" car l'image
est flottante.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mollis scelerisque nulla. Donec
feugiat augue et sem. Nulla ut purus. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nulla volutpat leo quis magna. Donec accumsan lobortis ligula. Donec
nec ante eu wisi tempus dictum. Sed nulla est, laoreet nec, consequat quis, iaculis non, tortor. Nunc sed
purus. Sed metus. Donec posuere. Pellentesque porttitor tortor non eros. Ut rutrum erat a nunc. Duis
non erat et orci viverra mollis. Sed lacinia velit a magna. Etiam aliquam, felis eu imperdiet auctor, ante
augue dignissim odio, a pharetra tellus neque vel urna. Cras gravida adipiscing lectus. Nullam lorem
ipsum, convallis eleifend, congue placerat, dictum non, leo. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae.</p>
Une erreur courante que l'on a tendance faire, c'est de mettre l'image flottante aprs le texte. Non,
il ne faut pas : le flottant doit tre avant le texte, qu'il flotte droite ou qu'il flotte gauche c'est
pareil.
Vous essaierez de mettre la balise <img /> aprs le paragraphe, et vous verrez que cela ne marche
plus
Ce qu'il faut bien comprendre maintenant, c'est qu'on a juste besoin de modifier le CSS de l'image, et
non pas du paragraphe. Le paragraphe n'a pas besoin d'tre modifi, il sera automatiquement plac
comme il faut.
Voici le seul bout de code CSS qu'on a besoin de taper, qui permet de faire flotter l'image gauche :
Code : CSS
1
2
3
4
.imageflottante
{
float: left;
}
Amusez-vous aussi faire flotter l'image droite : mettez float:right; et le tour est jou !
Crer une lettrine (exercice)

Une lettrine, c'est la premire lettre d'un paragraphe crite beaucoup plus grosse. On en voit tout le
temps dans les journaux (si vous lisez les journaux). Voici ce que vous devez arriver faire :
72
La seule consigne, c'est d'utiliser le code XHTML suivant, que vous n'avez pas le droit de changer :
Code : HTML
<p>Les visiteurs de l'hypermarch Carrefour de Haidian, un quartier nord de Pkin o sont installes les
universits et les entreprises high-tech, ne sont pas accueillis en ce moment par le Pre Nol mais par... la
Vnus de Milo. Carrefour a dcid de donner dans le culturel en prsentant, dans le cadre de l'anne de la
1
France en Chine, quarante reproductions de sculptures clbres issues de collections des muses francelais.
L'initiative remporte un grand succs, en croire le nombre de personnes qui se prennent en photo devant
les oeuvres, ou l'affluence aux visites commentes par des guides.</p>
Votre consigne, c'est de crer un fichier CSS qui permettra de crer cette prsentation sous forme de
lettrine. Vous ne pouvez pas modifier le fichier XHTML, mais par contre sur le CSS tous les coups sont
permis : vous pouvez utiliser les proprits que vous voulez.
Bien videmment il faut utiliser un float:left;, mais comment faire pour que la premire lettre
uniquement soit affecte ? Sans changer le XHTML ? Il faut utiliser le pseudo-lment : first-letter (=
"premire lettre").
Il faut penser en particulier utiliser font-size, pour modifier la taille de la premire lettre pour
qu'elle fasse disons... 3 hauteurs de lignes. Pour cela, on peut mettre la valeur "3em" (= 3 hauteurs
de lignes), mais si vous avez tap "300%" c'est tout aussi bon ! Par contre, il vaut mieux viter de
mettre une valeur en pixels comme "50px" parce qu'on ne connat pas la taille d'une ligne (cela peut
changer).
Voici le code que pour raliser la lettrine :
Code : CSS
1
2
3
4
5
6
7
8
p:first-letter /* Je veux que la premire lettre de mes paragraphes... */

{
float: left; /* Flotte gauche */
font-size: 3em; /* Fasse une hauteur de 3 lignes */
font-family: Arial, Georgia, "Times New Roman", Times, serif; /* Soit mise en Arial si possible*/
font-weight: bold; /* Soit crite en gras (c'est plus voyant) */
margin-right: 5px; /* Qu'il y ait une marge de 5px droite pour que cela ne colle pas trop au reste du
texte */
}
Stopper un flottant
Quand vous mettez en place un flottant, le texte l'"entoure".
Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en-dessous du
flottant? On pourrait faire plusieurs <br /> la suite, mais cela ne serait pas pratique ni trs propre...
73
En gros, on aimerait pouvoir faire cela :
Il existe en fait une proprit CSS qui permet de dire : "Stop, ce texte doit tre en-dessous du flottant
et non plus ct". C'est la proprit clear qui peut grosso modo prendre 3 valeurs :
left : le texte se poursuit en-dessous aprs un float:left;

right : le texte se poursuit en-dessous aprs un float:right;
both : le texte se poursuit en-dessous, que ce soit aprs un float:left; ou aprs un float:right;
Pour simplifier, on va utiliser tout le temps le clear:both, qui marche aprs un flottant gauche et
aprs un flottant droite (cela marche tous les coups quoi).
Pour illustrer son fonctionnement, on va prendre ce code XHTML :
Code : HTML
1 <p><img src="../images/flash.gif" class="imageflottante" alt="Image flottante" /></p>
2 <p>Ce texte est crit ct de l'image flottante.</p>
3 <p class="dessous">Ce texte est crit sous l'image flottante.</p>
Code : CSS
1
2
3
4
5
6
7
8
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
Et voil le travail
On applique un clear:both; au paragraphe que l'on veut voir continuer sous l'image flottante, et le
tour est jou !
Positionnement absolu, fixe et relatif

Hormis les flottants, il existe 3 faons de positionner un block en CSS :
Le positionnement absolu : il nous permet de placer un block n'importe o sur la page (en
haut gauche, en bas droite, tout au centre etc...)
Le positionnement fixe : c'est pareil que le positionnement absolu, mais cette fois le block
reste toujours visible, mme si on descend plus bas dans la page. C'est un peu comme le
background-attachment:fixed; (si vous vous en souvenez encore ;))
74
Le positionnement relatif : c'est le plus compliqu des trois. En gros, cela nous permet de
dplacer un block par rapport sa position normale.
Comme pour les flottants, le positionnement absolu, fix et relatif fonctionne aussi sur des balises de
type inline comme <img />
Toutefois, vous verrez qu'on l'utilise bien plus souvent sur des balises block que sur des balises inline.
Il faut d'abord faire son choix entre les 3 modes de positionnement disponibles. Pour cela, on utilise
la proprit CSS position laquelle on donne une de ces valeurs :
absolute : positionnement absolu.

fixed : positionnement fixe.
relative : positionnement relatif.
Nous allons tudier chacun de ces positionnements un un.
Le positionnement absolu
Vous savez que, pour effectuer un positionnement absolu, il faut taper :
position:absolute;
Mais cela ne suffit pas !
On a dit qu'on voulait un positionnement absolu, mais encore faut-il dire o on veut que le block soit
positionn sur la page.
Pour faire cela, on va rutiliser 4 proprits CSS que vous commencez certainement bien connatre:
left : position par rapport la gauche de la page.

right : position par rapport la droite de la page.
top : position par rapport au haut de la page.
bottom : position par rapport au bas de la page.
On peut leur donner une valeur en pixels, comme "14px", ou bien une valeur en pourcentage,
comme "50%".
Si ce n'est pas trs clair pour certains d'entre vous, ce schma devrait vous aider comprendre :
75
Avec cela, vous devriez tre capables de positionner correctement votre block
Il faut donc utiliser la proprit position et au moins une des 4 proprits ci-dessus (top, left, right ou
bottom). Si on crit par exemple :
position:absolute;
right:0px;
bottom:0px;
... cela signifiera que le block doit tre positionn tout en bas droite (0 pixels par rapport la droite
de la page, 0 par rapport au bas de la page).
Pour le coup, on va utiliser la balise universelle <div> (de type block).
Code : HTML
1
2
3
4
5
6
<p>
Ceci est un paragraphe normal.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Cras dolor. Quisque quis odio eget
justo pulvinar aliquet. Morbi luctus mi. Fusce leo. Integer eleifend condimentum felis. Phasellus vitae nibh.
Mauris pellentesque porta magna. Quisque at turpis. Praesent semper odio eget risus. Praesent bibendum
imperdiet massa. Quisque ac arcu ac augue dapibus vestibulum. Pellentesque gravida. Mauris turpis. Aenean
molestie. Praesent at quam et ligula pellentesque luctus.
</p>
<div>Block positionn</div>
76
Rien d'extraordinaire, vous avez un paragraphe suivi d'un block div qui contient un peu de texte.
Jusque l, rien de bien excitant.
Maintenant, ajoutons un peu de CSS pour positionner o on veut notre block div :
Code : CSS
1
2
3
4
5
6
7
8
9
div
{
border: 1px solid green;
position: absolute;
left: 35px;
top: 50px;
}
Le fond est jaune et une bordure pour qu'on repre mieux le block.
Comme vous pouvez le constater, le block se met au-dessus du paragraphe. Il le masque. Cela, c'est
un des grands avantages et dfauts du positionnement absolu : il n'y a aucun contrle, vous pouvez
mettre votre block vraiment o vous voulez sur la page, mais il faut faire attention ce qu'il ne
masque pas de texte.
Voici un autre exemple pour vous montrer qu'on peut vraiment mettre le block n'importe o :
Code : CSS
1
2
3
4
5
6
7
8
9
Div
{
position: absolute;
right: 50%;
bottom: 20px;
Une petite prcision technique : si vous positionnez un block A en absolu, et qu' l'intrieur de ce
block vous positionnez un autre block B en absolu, ce positionnement-l ne se fera plus par rapport
au coin en haut gauche de la fentre mais par rapport au coin en haut gauche du block A.
Le positionnement fixe
Le fonctionnement est exactement le mme que pour le positionnement absolu, sauf que cette fois
le block reste fixe, mme si on descend plus bas dans la page.
77
Au lieu de faire position:absolute;, on va taper position:fixed; dans notre CSS. Comme tout l'heure,
on s'aide de top, left, right et bottom pour placer notre block o on veut sur la page.
Le position:fixed; est particulirement utile pour faire un menu qui reste toujours visible :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div
{
width: 150px;
height: 250px;
position: fixed;
right: 40px;
top: 60px;
}
p
{
width: 300px;
Le positionnement relatif
Plus dlicat, le positionnement relatif peut vite devenir une grosse prise de tte si on n'y fait pas trs
attention. Le positionnement relatif sert gnralement faire des "ajustements".
Prenons par exemple un texte important, situ entre 2 balises <strong>.
Pour commencer, mettons le sur fond rouge pour qu'on puisse mieux le reprer :
Code : CSS
1
2
3
4
5
strong
{
background-color: red; /* Fond rouge */
color: yellow; /* Texte de couleur jaune */
}
Cette fois, le schma pour les positions absolue et fixe ne marche plus. Pourquoi ? Parce que l'origine
a chang : le point de coordonnes (0, 0) ne se trouve plus en haut gauche de votre fentre comme
c'tait le cas tout l'heure. Non, cette fois l'origine se trouve en haut gauche de la position actuelle
de votre lment.C'est une position relative. Ce schma devrait vous aider comprendre o se
trouve l'origine des points :
78
Donc, si vous faites un position:relative et que vous appliquez une des proprits top, bottom,
left, right, le texte sur fond rouge va se dplacer par rapport la position o il se trouve.
En fait, il faut faire des tests pour bien comprendre.
Prenons donc un exemple : On veut que le texte se dcale de 55 pixels vers la droite et de 10 pixels
vers le bas. On va donc demander ce qu'il soit dcal de 55 pixels par rapport au "bord gauche", et
de 10 pixels par rapport au "bord haut" :
Code : CSS
1
2
3
4
5
6
7
8
9
strong
{
background-color: red;
color: yellow;
position: relative;
left: 55px;
top: 10px;
}
Le texte s'est dcal par rapport sa position initiale, comme ceci :
16. TP : Crons le design de votre site web !

Quel est l'objectif de ce TP ?
Cest de crer le design de votre site web.
Crer un design, ce n'est pas une mince affaire : il faut de la crativit, du got pour les
couleurs, du talent et enfin de l'exprience.
Par quoi commencer ?

Vous le savez maintenant, une page web c'est une combinaison de 2 fichiers :
Un fichier XHTML (.html ou .htm) : c'est dans ce fichier que se trouve le contenu de
la page (le texte). Ce fichier est constitu de balises comme <strong> qui servent
indiquer si tel texte est important, si c'est un paragraphe ou une citation etc...
Un fichier CSS (.css) : c'est le fichier qui permet de crer la prsentation de la page
web. C'est lui qui indique qu'un texte est en rouge, qu'il est centr, dans la police
"Arial" etc... En thorie, le CSS est facultatif. Ceci dit, sans CSS, nos pages web
seraient bien moches.
79
Si vous avez bien suivi jusqu'ici et que vous avez fait quelques tests, vous savez par quoi on
commence :
1. En premier on tape le contenu de la page (XHTML),
2. Et ensuite on modifie la prsentation de la page (CSS).
Nous allons donc suivre cet ordre-l.

Vous allez voir que la cration du fichier XHTML sera (trs) rapide et facile. En revanche,
nous allons passer plus de temps sur le CSS. Parce que c'est dlicat, qu'il y a pas mal de
proprits CSS connatre, et aussi parce que des fois, on a beau tre un pro, le navigateur
n'affiche pas exactement les choses comme on voudrait.
Design fixe ou extensible ?

Un design fixe, c'est un design dont la largeur est de taille fixe (par exemple de 800 pixels).
Il y a en gnral une marge gauche et droite, et le contenu du site se trouve au milieu.
Voici un site au design fixe :
Un design de taille fixe

Un design extensible, c'est un design qui s'largit automatiquement en fonction de la
rsolution du visiteur. Si le visiteur est en 1024*768, le design fera 1024 pixels de large. Si le
visiteur est en 1600*1200, il fera 1600 pixels de large.
80
Un design de taille extensible

Un sondage montre quil ya plus de site extensibles que fixes.
Quel type de design allons-nous faire ?
La cration d'un design extensible est assez complexe, et comme c'est notre premier design,
nous allons donc raliser un design de taille fixe.
Lorsque vous vous serez amliors et que vous aurez un peu plus d'exprience, vous pourrez
vous lancer dans la cration d'un design extensible. Vous aurez tout le temps de vous y
intresser
Primo, le XHTML
Premire tape : on ouvre notre diteur de texte (Notepad++ par exemple), et vous crez un
nouveau fichier XHTML.
Pour commencer, on va taper le code de "base" d'une page XHTML :
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11
strict.dtd">
2
3
<head>
4
<title>Bienvenue sur mon site !</title>
5
6
</head>
7
<body>
8
9
</body>
10
</html>
Comme vous le savez, nous allons crire dsormais uniquement entre les balises
<body></body>.
81
La structure gnrale
Bien souvent, on structure sa page web l'aide de blocks <div>, la fameuse balise universelle
de type "block". On va avoir en gnral au moins 4 blocks, prsents comme ceci :
82
1. En haut, l'en-tte (aussi appel "header"). Cet en-tte contient en gnral le titre de
votre site, sous forme de bannire.
2. En-dessous, vous avez la partie principale de votre page avec :
A gauche ou droite, le menu.
De l'autre ct, le corps de la page, c'est--dire la partie qui contiendra le
texte de votre site.
3. Enfin, on met en gnral en bas un "pied de page" (aussi appel "footer"), dans
lequel on indique l'auteur du site, ventuellement son e-mail et un petit copyright
pour faire classe.
o
o
Voil pour les grandes lignes.

En XHTML, on va crer ces 4 blocks l'aide de 4 <div> diffrents :
Code : HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="en_tete">

</div>
<div id="menu">

</div>
<div id="corps">

</div>
<div id="pied_de_page">

</div>
C'est tout simple, on a mis un block <div> pour chaque gros block de la page. On verra tout
l'heure ce qu'on met dedans.
Particularit qui a d vous choquer : on utilise ici des attributs id et non des class comme on
a eu l'habitude d'en utiliser jusqu'ici. Si vous ne vous souvenez pas de la diffrence entre un
id et une class, retournez voir les premiers sous chapitres sur le CSS.
Grosso modo, un id et une class c'est quasiment la mme chose, sauf qu'on ne peut mettre
un id qu'une seule fois dans une page XHTML, contrairement aux class qu'on peut utiliser
plusieurs fois. Il y a peu d'id dans une page en gnral, on en met surtout pour les grands
"blocks" du design comme on vient de le faire ici.
Vous devez crire vos blocks dans l'ordre o ils seront affichs (de haut en bas) dans le code
XHTML. En premier l'en-tte, en dernier le pied de page.
83
Pour ce qui est du menu et du corps qui se trouvent au mme niveau, l'ordre entre eux deux
n'importe pas. On pourra modifier leur position dans le CSS (menu gauche, ou menu
droite).
On on va voir plus en dtail ce qu'on met dans chacun des 4 <div> :
L'en-tte
En gnral, un en-tte c'est juste une bannire (une image), voire pour ceux qui n'ont pas
envie de dessiner un simple titre <h1> (titre du site).
Pour cet exemple part, on mettre la bannire suivante :
Comment mettre cette image dans le <div> de l'en-tte ? On a 2 possibilits :
Soit on cre une balise <img /> l'intrieur, afin d'insrer notre bannire. C'est une
mthode facile pour insrer une image, cela on sait le faire.
Soit on ne met rien l'intrieur du <div id="en_tete"> et on mettra la bannire sous
forme d'image de fond tout l'heure dans le CSS.
La seconde solution n'est pas particulirement difficile mais un peu. En fait, on va crer un
bloc "vide" qui va servir uniquement afficher une image, et cette image sera affiche par
le CSS.
Le rsultat sera apparemment le mme que si on avait utilis <img /> mais nous verrons la
fin de ce chapitre que cette technique s'avrera payante si vous voulez pouvoir changer le
design de votre site facilement.
Code : HTML
1 <div id="en_tete">
2
3 </div>
On ne met donc rien entre le <div> et le </div>
Menu et sous-menus
Dans le block du menu (en bleu marine), on va avoir crer plusieurs sous-blocks (cela
s'embote) pour sparer les diffrents lments du menu.
84
Regardez-bien le schma ci-dessous : c'est un zoom sur le block "Menu" du schma de tout
l'heure :
Comme vous le voyez, il contient 2 sous-blocks (cadres verts) qui vont servir de sous-menus.
Comment faire cet embotement de blocs ? C'est trs simple en XHTML :
Code : HTML
1 <div id="menu"> 
2
3 <div class="element_menu"> 
4
Texte du premier menu
5 </div>
6
7 <div class="element_menu">
8
Texte du second menu
9 </div>
10
11 </div>
Il nous suffit d'imbriquer des balises <div>, ces fameuses balises blocks universelles (on les
appelle aussi "balises gnriques" d'ailleurs)
Bien, rajoutons maintenant le texte l'intrieur du menu pour faire comme dans le dernier
schma.
On va mettre dans chaque "element_menu" un titre de menu. Vous vous souvenez de la
balise qui sert faire des titres ? Oui, il y a 6 balises (selon l'importance du titre) : de <h1>
<h6>. Comme les titres de menus sont un peu moins importants, on va les mettre en <h3>.
85
Ensuite, on va mettre une liste puces (<ul>) pour avoir un menu bien organis.
Code : HTML
1 <div id="menu">
2
4
<h3>Titre menu</h3> 
5
<ul>
6
<li>Lien</li> 
7
<li>Lien</li>
8
<li>Lien</li>
9
</ul>
10 </div>
11
13
<h3>Titre menu</h3>
14
<ul>
15
<li>Lien</li>
16
<li>Lien</li>
17
<li>Lien</li>
18
</ul>
19 </div>
20
21 </div>
En gnral, on met souvent des listes puces pour les menus car cela permet de crer une
bonne organisation facilement.
Vous avez peut-tre remarqu que j'ai marqu des "Lien", mais que je n'ai pas mis de balise
<a href="...">. C'tait juste pour ne pas trop encombrer le schma de suite, bien entendu
qu'on va mettre des liens dans notre menu sinon il ne servirait pas grand chose
Code : HTML
1 <div id="menu">
2
4
<h3>Titre menu</h3>
5
<ul>
6
<li><a href="page1.html">Lien</a></li>
7
8
9
</ul>
10 </div>
11
13
<h3>Titre menu</h3>
14
<ul>
15
16
17
18
</ul>
19 </div>
20
21 </div>
86
Vous pouvez, si vous le dsirez, ajouter d'autres sous-menus. Il n'y a pas de limite, mais
attention ne pas trop abuser de sous-menus sinon le visiteur risque de se perdre
facilement.
Vous n'tes pas obligs (mme si c'est ce qu'on fait le plus souvent) de mettre des liens et
une liste puces dans un menu. Si vous voulez crire un peu de texte dedans, utilisez la
balise de paragraphe <p></p>.
Le corps
Le corps, c'est la partie principale de la page. C'est l qu'il y aura tout le contenu de votre
page.
Pour commencer, on va mettre un titre <h1> qui sera le titre principal de la page. En gnral,
on met le mme titre dans la balise <title> (dans <head>) que dans la balise <h1>.
Ensuite, on crira nos paragraphes <p> ventuellement spars par des sous-titres <h2>
pour un peu mieux structurer son texte.
Cela nous donne un code relativement simple pour le corps :
Code : HTML
<div id="corps">
<h1>Mon super site</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site gnial qui va parler de... heu... Je cherche encore un peu le thme de
mon site :-D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence privilgier certaines personnes, on va m'accuser de discrimination
;o)<br />
Que vous soyez fans de fusils pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (cela doit pas tre bien compliqu). Mon objectif est
d'attirer un maximum de visiteurs, de les rendre accros mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers
la recherche de nouveaux peuples soumettre ma terrible puissance.
MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
N'oubliez pas que cette zone est libre. Si vous voulez mettre des images, des liens, d'autres
paragraphes, faites-le ! C'est le contenu de votre site aprs tout
87
Allez le dernier : le pied de page

Le pied de page sert crire le nom de l'auteur en gnral, et si cela vous chante vous
pouvez mettre un copyright.
Code : HTML
1 <div id="pied_de_page">
2 <p>Copyright "Tout pourri Corporation" 2005, tous droits rservs</p>
3 </div>
Le code XHTML final

Nous avons vu en dtail ce que nous devions mettre dans chacun des 4 gros blocks du
design.
Maintenant, on va assembler tous les codes sur lesquels on a travaill, en n'oubliant pas de
mettre en haut les balises DOCTYPE, <html>, <head>, <body> etc...
Ca nous donne cela :
Code : HTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
4 <head>
5
<title>Mon super site</title>
6
7 </head>
8
9 <body>
10
11

12
13
<div id="en_tete">
14
15
</div>
16
17

18
19
<div id="menu">
20
<div class="element_menu">
21
<h3>Titre menu</h3>
22
<ul>
23
24
25
26
</ul>
27
</div>
28
29
<div class="element_menu">
30
<h3>Titre menu</h3>
88
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<ul>
</ul>
</div>
</div>

<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site gnial qui va parler de... heu... Je cherche encore un peu le thme
de mon site :-D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence privilgier certaines personnes, on va m'accuser de
discrimination ;o)<br />
Que vous soyez fans de fusils pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (cela doit pas tre bien compliqu). Mon objectif
est d'attirer un maximum de visiteurs, de les rendre accros mon site, puis de les mettre en mon
pouvoir.<br />
Je prendrai ensuite le contrle du Monde. Une fois que ce sera fait, j'irai explorer les confins de
l'Univers la recherche de nouveaux peuples soumettre ma terrible puissance.
MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>

<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005, tous droits rservs</p>
</div>
</body>
</html>
Vous venez de raliser votre premire vraie page XHTML !

Cependant, on n'a pas encore fini. En effet, un code XHTML comme cela tout seul sans CSS,
cela ne donne pas quelque chose de bien extraordinaire, voyez plutt :
Il ne nous reste qu' ajouter un peu de CSS, et notre site sera tout beau tout propre !
89
Secundo, le CSS
Nous attaquons maintenant la partie CSS.
C'est une partie trs importante, car il faut bien que vous compreniez comment chaque ligne
de code modifie le design.
Centrer le design
Pour commencer, nous allons travailler juste sur la balise <body>. <body>, c'est la balise qui
englobe tout le contenu de votre page web. Si on dit que notre <body> fait tant de pixels de
large (pour avoir un design de taille fixe) et qu'on veut le centrer (avec margin:auto;).
Pour la taille de la page, on va mettre 760 pixels. Pourquoi 760 ? Parce que c'est moins que
800px, et ainsi les visiteurs qui sont en rsolution 800*600 n'auront pas se dplacer vers la
droite pour voir le reste de la page.
Pour ce qui est des marges, un margin:auto suffira centrer le design.
On rajoutera une marge en haut (top) et en bas (bottom) de 20 pixels pour viter que notre
page soit trop "colle" avec le haut et le bas du navigateur.
Enfin, on mettra une petite image de fond (background-image) la page pour faire un peu
moins vide.
Voil ce que cela devrait donner :
Code : CSS
body
1{
2 width: 760px;
3 margin: auto; /* Pour centrer notre page */
4 margin-top: 20px; /* Pour viter de coller avec le haut de la fentre du navigateur. Essayez d'enlever pour
5 voir ! */
6 margin-bottom: 20px; /* Idem pour le bas du navigateur */
7 background-image: url("images/fond.png"); /* Une petite image de fond pour viter d'avoir un vieux fond
8 blanc :p */
}
On peut essayer d'enlever quelques lignes pour observer le rsultat sur la page :
Si vous enlevez le fond (background-image), vous retrouverez un fond blanc de base.

Si vous enlevez le margin-top ou le margin-bottom, vous verrez que votre page sera
un peu trop "colle" avec les bords de la page.
Si vous enlevez le margin:auto, votre page ne sera plus centre et se retrouvera
gauche. Notez que le margin:auto ne marche pas sous IE 5 : ces visiteurs-l auront un
design plac gauche, mais ce n'est pas bien grave.
90
L'en-tte
Nous allons afficher la bannire du site l'aide du CSS (avec background-image). On a fait un
truc un peu nouveau tout l'heure : on n'a rien mis dans le <div> de l'en-tte.
C'est une technique que vous pourrez utiliser si besoin est pour faire en sorte que tout votre
design soit compris dans le fichier CSS. Ca sera trs pratique (entre autres) pour raliser un
site qui propose plusieurs designs diffrents.
A nous maintenant d'afficher notre bannire avec uniquement du CSS :
1. La premire chose faire, si on veut que la bannire soit visible, ce sera d'agrandir la
taille du block "en_tete" afin qu'il puisse contenir la bannire entire.
Comme notre bannire fait 758x100pixels, on va dfinir une largeur et une hauteur
de ces dimensions :
width:758px;
height:100px;
2. Ensuite, on va indiquer quelle image de fond on veut mettre notre grand block qui
est pour l'instant vide :
background-image:url("images/banniere.png");
3. Normalement notre fond n'a la place d'apparatre qu'une seule fois, mais cela ne
nous cote pas grand chose de s'assurer que cette image ne sera pas rpte en
mosaque avec background-repeat :
background-repeat:no-repeat;
4. Enfin, c'est un dtail mais afin d'viter que l'en-tte ne soit trop coll avec ce qui se
trouvera dessous (le menu et le corps), on va dfinir une petite marge en-dessous
(margin-bottom) de quelques pixels :
margin-bottom:10px;
Nous y sommes. Ca donne finalement cela :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body
{
width: 760px;
margin: auto;
margin-top: 20px;
background-image: url("images/fond.png");
}
/* L'en-tte */
#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
91
18 background-repeat: no-repeat;
19 margin-bottom: 10px;
20 }
A partir d'un block vide, nous avons pu afficher notre bannire uniquement en CSS.
Dsormais, si vous voulez changer la bannire de votre site, il faudra modifier le fichier CSS
et non le fichier XHTML. Et cela, c'est une bonne chose vous le comprendrez tout l'heure
Pourquoi il y a un # devant "en_tete" ? C'est pas un point normalement qu'on met ???
Non, comme rappelle pour ceux qui l'auraient oubli :
Pour une class, on met un "." (point) devant le nom dans le CSS.
Pour un id, on met un "#" (dise) devant le nom. Or, regardez le code XHTML,
"en_tete" est un id !
Le menu
Cela c'est un peu plus difficile.
Il va nous falloir placer le menu " gauche" du corps, alors que pour l'instant le menu se
trouve au-dessus.
Pour faire cela, la technique la plus courante et la plus rapide, c'est d'utiliser la proprit CSS
float. C'est une proprit un peu particulire comme nous l'avons vu, et elle va tre trs
pratique ici pour placer correctement le menu et le corps.
On va aussi donner une taille de 120 pixels au menu, pour qu'il ne soit pas trop grand.
Ensuite, nous allons travailler sur notre class "element_menu" (qui correspond une partie
de menu). On va lui mettre une couleur de fond un peu plus gris fonc, une image de fond
en repeat-x (qui se rptera uniquement horizontalement).
Ensuite, on rajoutera une bordure chaque lement de menu pour qu'on voie bien ses
limites. "2px" solid black cela devrait tre bon.
Enfin, on mettra un margin-bottom chaque lment de menu pour viter qu'ils ne soient
trop colls les uns par rapport aux autres.
Code : CSS
1
2
3
4
5
6
7
8
9
10
body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tte */
92
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#en_tete
{
width: 760px;
height: 100px;
background-repeat: no-repeat;
}
/* Le menu */
#menu
{
float: left; /* Le menu flottera gauche */
width: 120px; /* Trs important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
}
margin-bottom: 20px; /* Pour viter que les lments du menu ne soient trop colls */
Encore une fois, si vous voulez comprendre, il faut essayer d'enlever quelques lignes du CSS
pour voir ce que cela change.
Comme vous pouvez le constater si vous testez ce code, ce n'est pas encore termin mais
cela s'amliore. On distingue dj bien nos bouts de menus, par contre le corps se retrouve
sous le menu une fois qu'il l'a dpass par le bas.
C'est normal car c'est comme cela que fonctionne un float, rappelez-vous ce petit schma
simple sur une image flottante :
Comment faire alors pour que le corps de la page ne passe pas sous le menu flottant ?
Il nous faudra rajouter une marge gauche sur le corps (margin-left). On fera cela quand on
93
travaillera sur le corps.

Si cela peut vous rassurer, c'est une astuce toute simple
On n'a pas encore fini de travailler sur les menus. On va rajouter quelques effets.
Le principal qu'il faut bien comprendre ici, c'est que on se sert des "imbrications de balises".
Vous vous souvenez, quand on crit par exemple :
.element_menu ul
... cela signifie "Ce CSS va concerner les balises <ul> se trouvant l'intrieur d'un
element_menu".
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tte */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
}
/* Quelques effets sur les menus */

.element_menu h3 /* Tous les titres de menus */
94
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
.element_menu ul /* Toutes les listes puces se trouvant dans un menu */

{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les cts ont une marge intrieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-l fera finalement 20
pixels */
margin: 0px; /* Idem pour margin, cela nous vite d'avoir en crire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Mme chose que tout l'heure, on modifie ensuite juste margin-bottom, mais
tous les autres sont 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #B3B3B3;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
En plus, l'effet du :hover sur les liens du menu est trs facile raliser, donc c'est tout
bnfique pour nous
Petite prcision quand mme, c'est un dtail pour que tout soit clair. Vous avez vu quon a
enchan un "padding" (qui modifie toutes les marges intrieures) et un "padding-left" (qui
modifie uniquement la marge intrieure gauche).
En fait c'est une technique pour gagner de la place. Il faut lire les lignes dans l'ordre :
1. Premirement, on modifie toutes les marges et on leur met toutes la valeur "0px"
avec padding
2. Deuximement, on modifie la marge de gauche. Elle valait 0px, dsormais on change
sa valeur et on lui met 20px avec padding-left (on dit qu'on "crase" l'ancienne
valeur)
On peut aussi mettre la place :
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:20px;
Mais cela aurait t plus long.
95
Le corps
Pour le corps, il va tre important de dfinir de bonnes marges.

Le problme qu'on veut rgler en priorit, c'est le texte du corps qui passe "sous" le menu
quand il est trop long. Comme on l'avait expliqu, c'est un comportement normal car on a
fait un float:left sur le menu.
Comment viter que le texte passe sous le menu alors ?
Il suffit de modifier la marge " gauche" du corps. C'est une marge extrieure, donc un
margin-left.
On lui met une valeur suffisamment grande pour "pousser" le corps sur la droite, afin qu'il ne
passe plus sous le menu (donc une valeur suprieure la largeur du menu). Ici par exemple,
on va mettre une valeur de 140px. Comme par magie, vous allez voir, le corps sera
correctement plac !
Ne nous arrtons pas en si bon chemin
On va rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop
"coll" au corps :
margin-bottom:20px;
On va aussi mettre un petit padding (marge intrieure) sur tous les cts afin que le texte ne
colle pas trop avec les bords du corps :
padding:5px;
On va aussi mettre une couleur de fond, une petite image de fond qui se rpte
horizontalement, une bordure... Bref, tout cela c'est de la dcoration.
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tte */
#en_tete
{
width: 760px;
height: 100px;
96
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
}

.element_menu h3
{
color: #B3B3B3;
text-align: center;
}
.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
.element_menu a:hover
{
color: black;
}
/* Le corps de la page */
#corps
97
75 {
76 margin-left: 140px; /* Une marge gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
77 margin-bottom: 20px; /* Ca c'est pour viter que le corps colle trop au pied de page en-dessous */
78 padding: 5px; /* Pour viter que le texte l'intrieur du corps ne colle trop la bordure */
79
80 color: #B3B3B3;
81 background-color: #626262; /* Une couleur de fond pour le corps */
82 background-image: url("images/motif.png");
83 background-repeat: repeat-x; /* Une petite image de fond qui se rptera horizontalement en haut */
84
85 border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
86 }
Il nous reste quand mme quelques petits trucs dcorer dans notre corps. Par exemple, les
titres : on va changer leur police pour mettre une "Arial" pour les titres.
On va aussi rajouter une image de fond sur les titres h2, avec background-repeat:no-repeat;,
ce qui signifie que le fond ne se rptera pas (il restera donc gauche).
Pour viter que le texte du titre ne s'crive sur l'image de fond, on met un padding-left de
quelques pixels. Comme cela, on aura une image d'engrenage devant chaque titre <h2>
automatiquement !
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tte */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
98
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

}

.element_menu h3
{
color: #B3B3B3;
text-align: center;
}
.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
{
color: black;
}
#corps
{
margin-left: 140px;
padding: 5px;
color: #B3B3B3;
}
#corps h1 /* Tous les titres h1 du corps */
{
color: #B3B3B3;
text-align: center;
99
92
93
94
95
96
97
98
99
100
101
102
103
104
105
#corps h2 /* Tous les titres h2 du corps */

{
height: 30px;
background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se rptera pas, elle sera gauche du titre */
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
Le pied de page
Pour le pied de page, rien de compliqu ni d'extraordinaire, ce sont des modifications
similaires au reste. On met une couleur de fond, on met une bordure, on vrifie si les marges
nous plaisent... Notez quon fait un "clear: both" pour supprimer l'effet flottant du menu.
Cela permet de s'assurer que le pied de page est bien sous le menu.
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
Design d'exemple
Ralis par
*/
body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tte */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left;
100
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
width: 120px;
.element_menu
{
}
.element_menu h3
{
color: #B3B3B3;
text-align: center;
}
.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
{
color: black;
}
#corps
{
margin-left: 140px;
padding: 5px;
color: #B3B3B3;
101
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

}
#corps h1
{
color: #B3B3B3;
text-align: center;
}
#corps h2
{
height: 30px;
background-image: url("images/titre.png");
padding-left: 30px;
color: #B3B3B3;
text-align: left;
/* Le pied de page (qui se trouve tout en bas, en gnral pour les copyrights) */
#pied_de_page
{
padding: 5px;
clear: both;
text-align: center;
color: #B3B3B3;
}
C'tait notre dernier CSS, le design est termin !

Et voil notre site fin prt. Bon ce design "Mechanical Spirit" invent pour l'occasion ne vous
conviendra srement pas.
Maintenant que le design est fini, vous savez comment procder, quelles sont les grandes
lignes suivre. C'est vous de crer le design entier de votre site, d'y mettre vos couleurs,
vos images de fond, vos effets, vos polices...
Vous tes autoriss (et invits) vous inspirer de ce CSS.
102
Pour terminer
Rappel : insrer un CSS dans le XHTML
Cela peut paratre simple mais vous l'avez peut-tre dj oubli : pour que notre fichier
XHTML s'affiche avec la prsentation indique dans le CSS, il faut rajouter la ligne suivante
entre <head> et </head> :
<link rel="stylesheet" media="screen" type="text/css" title="Exemple"
href="design_mecanique.css" />
Cette ligne indique que l'on utilise le fichier "design_mecanique.css" pour la prsentation.
Changez le CSS, changez le design !

En modifiant le CSS, on peut changer tout le design sans toucher au code XHTML !
En fait, regardez nouveau attentivement le code XHTML final qu'on a crit : il ne contient
aucune information sur le design. C'est tout juste s'il dit qu'il y a un en-tte, un menu qui
contient tels liens, un corps qui contient tel texte etc. Et c'est tout !
Le XHTML c'est le contenu de votre page, le CSS c'est la prsentation de votre page.
En gros, changer de CSS c'est comme changer de vtement : on modifie son look (son
apparence), mais la personne l'intrieur est toujours la mme
Pour illustrer ce quon vient de vous dire, nous allons prendre un second design sans toucher
au code XHTML. Seul le CSS a t modifi, et regardez tout ce qu'on peut changer sur un site
rien qu' coup de CSS :
Regardez la diffrence. Un seul fichier XHTML, 2 fichiers CSS, des rsultats trs diffrents :
103
Avec design_mecanique.css :
104
Avec design_poney_rose.css
Regardez le code source XHTML, c'est le mme que tout l'heure. Avec le CSS, on a :
Chang la couleur de fond de la page

Chang l'image de fond de l'en-tte, donc on a chang la bannire
Chang les bordures
Chang le menu de position (il suffit de remplacer le float:left par un float:right !)
etc...
Laissez le visiteur choisir le design

Une dernire chose que je souhaite vous montrer : les feuilles de styles alternatives.
En fait, si vous avez fait plusieurs designs pour votre site (comme c'est le cas avec lexemple),
vous pouvez proposer aux visiteurs de changer d'un seul coup le design.
Pour cela, vous devez rajouter des balises <link /> entre <head> et </head>.
En plus de la balise quon viens de rappeler (qui indiquera le design "par dfaut" de votre
site), vous pourriez rajouter cette ligne la suite :
<link rel="alternate stylesheet" media="screen" type="text/css" title="Design rose pour les
105
filles" href="design_poney_rose.css" />

Cette ligne indique qu'il existe une feuille de style alternative ("alternate stylesheet"). Le
visiteur pourra choisir le design de votre site qui lui plat.
Pour info, si vous utilisez Firefox il suffit d'aller dans le menu "Affichage > Style de la page" et
de choisir le design que vous voulez.
Les sites qui proposent des feuilles de style alternatives sont plutt rares. Beaucoup de
webmasters ne savent mme pas que cela existe, d'autres ont tout simplement un peu la
flme de raliser plusieurs designs.
Vous pouvez mettre autant de feuilles de style alternatives que vous le dsirez. Il vous
faudra crire une balise <link rel="alternate stylesheet" /> par design diffrent que vous
proposez.
Un exemple :
Code : HTML
<head>
1 <title>Bienvenue sur mon site !</title>
2 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
3
4 
5 <link rel="stylesheet" media="screen" type="text/css" title="Mcanique" href="design_mecanique.css" />
6 
7 <link rel="alternate stylesheet" media="screen" type="text/css" title="Rose pour les filles"
8 href="design_poney_rose.css" />
9 <link rel="alternate stylesheet" media="screen" type="text/css" title="Sombre et terrifiant"
10 href="sombre.css" />
11 <link rel="alternate stylesheet" media="screen" type="text/css" title="Aquatique" href="aquatique.css" />
</head>
17. Les tableaux

Voici un... tableau !
Nom
Anne
Carmen
Michelle
Ogasaku Nyagatosoka
Age
27 ans
33 ans
26 ans
18 ans
Pays
France
Espagne
Etats-Unis
Japon
C'est un tableau assez primaire. Bien entendu, nous apprendrons faire des tableaux plus
complexes afin que vous puissiez raliser tout ce dont vous avez besoin.
Encore une fois, CSS sera de passage et vous permettra de rendre vos tableaux super classe
en un clin d'oeil. Bonne nouvelle de ce ct : il n'y a pas vraiment de nouvelles proprits
CSS apprendre, vous connaissez dj pratiquement tout !
106
Un tableau se construit l'aide de balises XHTML. Commenons par voir la structure de

base...
Un tableau simple
Premire balise connatre : <table> </table>. C'est cette balise qui permet d'indiquer le
dbut et la fin d'un tableau.
Cette balise est de type block, donc il faut la mettre en dehors d'un paragraphe.
Exemple :
Code : HTML
1
2
3
4
5
6
7
<p>Ceci est un paragraphe avant le tableau.</p>

<table>

</table>
<p>Ceci est un paragraphe aprs le tableau.</p>
Que met-on l'intrieur du tableau ?

Pour commencer, voici 2 nouvelles balises trs importantes :
<tr> </tr> : indique le dbut et la fin d'une ligne du tableau.

<td> </td> : indique le dbut et la fin du contenu d'une cellule.
En XHTML, votre tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le
contenu des diffrentes cellules (<td>).
Schmatiquement, notre tableau de tout l'heure se construit comme cela :
On a une balise de ligne (<tr>) qui "entoure" chacune des cellules (<td>)
Par exemple, si on veut faire un tableau deux lignes, avec 3 cellules par lignes (donc 3
colonnes), je devrai taper ceci :
107
Code : HTML
1 <table>
2 <tr>
3
<td>Carmen</td>
4
<td>33 ans</td>
5
<td>Espagne</td>
6 </tr>
7 <tr>
8
<td>Michelle</td>
9
<td>26 ans</td>
10
<td>Etats-Unis</td>
11 </tr>
12 </table>
Le texte s'est crit la suite, et y'a mme pas de bordures !

Oui, un tableau sans CSS c'est tout vide. Alors justement, rajouter des bordures c'est trs
simple, vous connaissez dj le code CSS qu'il faut crire !
Code : CSS
1 td /* Toutes les cellules des tableaux... */
2{
3 border: 1px solid black; /* ... auront une bordure de 1px */
4}
Ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait
qu'une seule bordure entre 2 cellules, or ce n'est pas le cas ici.
Heureusement, il existe une proprit CSS spcifique aux tableaux : border-collapse, qui
signifie "coller les bordures entre elles".
Cette proprit peut prendre 2 valeurs :
collapse : les bordures seront colles entre elles, c'est l'effet qu'on recherche.
separate : les bordures seront dissocies (valeur par dfaut)
Code : CSS
1
2
3
4
5
6
7
8
table
{
border-collapse: collapse; /* Les bordures du tableau seront colles (plus joli) */
}
td
{
}
Nous verrons plus loin dans ce sous chapitre d'autres options CSS. Nous essaierons aussi
d'gayer un peu les tableaux qui sont pour le moment un peu moches.
108
La ligne d'en-tte
Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tte du tableau. Dans
notre exemple, les en-ttes sont "Nom", "Age" et "Pays".
La ligne d'en-tte se cre avec un <tr> comme on a fait jusqu'ici, mais les cellules l'intrieur
sont cette fois des <th> et non pas des <td> !
Code : HTML
1 <table>
2 <tr>
3
<th>Nom</th>
4
<th>Age</th>
5
<th>Pays</th>
6 </tr>
7
8 <tr>
9
<td>Carmen</td>
10
<td>33 ans</td>
11
<td>Espagne</td>
12 </tr>
13 <tr>
14
<td>Michelle</td>
15
<td>26 ans</td>
16
<td>Etats-Unis</td>
17 </tr>
18 </table>
La ligne d'en-tte est trs facile reconnatre pour 2 raisons :
Les cellules sont des <th> au lieu des <td> habituels.

C'est la premire ligne du tableau.
Comme le nom des cellules est un peu diffrent pour l'en-tte, il faut penser mettre jour
le CSS pour lui dire d'appliquer une bordure sur les cellules normales ET sur l'en-tte :
Code : CSS
1
2
3
4
5
6
7
8
table
{
border-collapse: collapse;
}
td, th /* Mettre une bordure sur les td ET les th */
{
}
109
Et voil le travail !
Comme vous pouvez le constater, votre navigateur a mis le texte des cellules d'en-tte en
gras. C'est ce que font en gnral les navigateurs, mais si vous le dsirez vous pouvez
changer cela coup de CSS : modifier la couleur de fond des cellules d'en-tte, leur police,
leur bordure etc...
Nous verrons des exemples de CSS de tableaux un peu plus complets.
Titre du tableau
Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le
visiteur sur le contenu du tableau.
Dans notre exemple, on a une liste de personnes... oui mais alors ? Qu'est-ce que cela
reprsente ? Sans titre de tableau, vous le voyez, on est un peu perdus
Heureusement, il y a <caption> !
Cette balise se met tout au dbut du tableau, juste avant l'en-tte. C'est elle qui indique le
titre du tableau :
Code : HTML
1 <table>
2 <caption>Passagers du vol 377</caption>
3
4 <tr>
5
<th>Nom</th>
6
<th>Age</th>
7
<th>Pays</th>
8 </tr>
9 <tr>
10
<td>Carmen</td>
11
<td>33 ans</td>
12
<td>Espagne</td>
13 </tr>
14 <tr>
15
<td>Michelle</td>
16
<td>26 ans</td>
17
<td>Etats-Unis</td>
18 </tr>
19 </table>
110
Des tableaux plus labors

Nous avons appris faire des petits tableaux simples. Ces petits tableaux suffisent dans la
plupart des cas, mais il arrivera que vous ayez besoin de faire des tableaux plus... complexes.
Nous allons voir 2 techniques particulires :
Pour les gros tableaux, il est possible de les diviser en 3 parties :

o
o
o
En-tte
Corps du tableau
Pied de tableau
Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules
entre elles.
Commenons par le premier point : vous avez un gros tableau, et vous devez le diviser en
plusieurs parties.
Diviser un gros tableau

Si votre tableau est assez gros, vous aurez tout intrt la dcouper en plusieurs parties.
Pour cela, il existe des balises XHTML qui permettent de dfinir les 3 "zones" du tableau :
L'en-tte (en haut) : il se dfinit avec les balises <thead></thead>

Le corps (au centre) : il se dfinit avec les balises <tbody></tbody>
Le pied du tableau (en bas) : il se dfinit avec les balises <tfoot></tfoot>
Que mettre dans le pied de tableau ? Gnralement, si c'est un long tableau, vous recopiez
les cellules d'en-tte. Cela permet de voir mme en bas du tableau quoi se rapporte
chacune des colonnes.
Schmatiquement, un tableau en 3 parties se dcoupe donc comme cela :
111
La seule chose un peu droutante, c'est qu'il faut mettre les balises dans l'ordre suivant :
1. <thead>
2. <tfoot>
3. <tbody>
On met donc dans le code d'abord la partie du haut, ensuite la partie du bas, et enfin la
partie principale (tbody). Le navigateur se chargera d'afficher les lments au bon endroit.
Voici donc le code crire pour faire le tableau en 3 parties :
Code : HTML
1 <table>
3
4 <thead> 
5
<tr>
6
<th>Nom</th>
7
<th>Age</th>
8
<th>Pays</th>
9
</tr>
10 </thead>
11
12 <tfoot> 
13
<tr>
14
<th>Nom</th>
15
<th>Age</th>
16
<th>Pays</th>
17
</tr>
18 </tfoot>
19
20 <tbody> 
21
<tr>
22
<td>Carmen</td>
23
<td>33 ans</td>
24
<td>Espagne</td>
25
</tr>
26
<tr>
112
27
<td>Michelle</td>
28
<td>26 ans</td>
29
<td>Etats-Unis</td>
30
</tr>
31
<tr>
32
<td>Franois</td>
33
<td>43 ans</td>
34
<td>France</td>
35
</tr>
36
<tr>
37
<td>Martine</td>
38
<td>34 ans</td>
39
<td>France</td>
40
</tr>
41
<tr>
42
<td>Jonathan</td>
43
<td>13 ans</td>
44
<td>Australie</td>
45
</tr>
46
<tr>
47
<td>Xu</td>
48
<td>19 ans</td>
49
<td>Chine</td>
50
</tr>
51 </tbody>
52 </table>
Il n'est pas obligatoire d'utiliser ces 3 balises (thead, tbody, tfoot) sur son tableau. En fait,
vous vous en servirez surtout si votre tableau est assez gros et que vous avez besoin de
l'organiser plus clairement
Pour les "petits" tableaux vous pouvez garder l'organisation qu'on a vu au dbut (un peu
plus simple), il n'y a pas de problme.
Fusion de cellules
Sur certains tableaux complexes, vous aurez besoin de "fusionner" des cellules entre elles.
Un exemple de fusion ? Regardez, ce tableau liste des films et indique qui ils s'adressent :
Pour le dernier film, vous voyez que les cellules ont t fusionnes : elles ne font plus qu'un.
C'est exactement l'effet qu'on cherche obtenir.
Pour effectuer une fusion, il faut rajouter un attribut la balise <td>. Il faut savoir qu'il existe
2 types de fusion :
113
La fusion de colonnes : c'est ce quon trouve sur cet exemple. La fusion s'effectue
horizontalement.
On utilisera l'attribut colspan.
La fusion de lignes : l, deux lignes seront groupes entre elles. La fusion s'effectuera
verticalement.
On utilisera l'attribut rowspan.
Comme vous le savez, vous devez donner une valeur l'attribut (que ce soit colspan ou
rowspan).
Cette valeur, c'est le nombre de cellules fusionner entre elles. Sur notre exemple, on a
fusionn deux cellules : celle de la colonne "Pour enfants ?", et celle de "Pour adolescents ?".
On devra donc crire :
<td colspan="2">
Qui signifie : "Cette cellule est la fusion de 2 cellules"
Il est possible de fusionner plus de cellules la fois (3, 4, 5... tant que vous voulez).
Voil le code XHTML qui me permet de raliser la fusion de tout l'heure :
Code : HTML
1 <table>
2 <tr>
3
<th>Titre du film</th>
4
<th>Pour enfants ?</th>
5
<th>Pour adolescents ?</th>
6 </tr>
7 <tr>
8
<td>Massacre la trononneuse</td>
9
<td >Non, trop violent</td>
10
<td>Oui</td>
11 </tr>
12 <tr>
13
<td>Les bisounours font du ski</td>
14
<td>Oui, adapt</td>
15
<td>Pas assez violent...</td>
16 </tr>
17 <tr>
18
<td>Lucky Luke, seul contre tous</td>
19
<td colspan="2">Pour toute la famille !</td>
20 </tr>
21 </table>
Le texte des cellules nest pas color pour ne pas compliquer le code XHTML. Ceci tant, on
peut le faire en 'utiliser des class.
Remarque importante : vous voyez que la dernire ligne ne contient que 2 cellules au lieu de
3 (il n'y a que 2 balises <td>).
C'est tout fait normal, car on a ai fusionn les deux dernires cellules entre elles. Le <td
colspan="2"> indique que cette cellule prend la place de 2 cellules la fois.
114
Et pour le rowspan, on fait comment ?

Cela complique un petit peu. Pour notre exemple, on va "inverser" l'ordre de notre tableau :
au lieu de mettre les titres de films gauche, on va les mettre en haut.
C'est une autre faon de voir le tableau : au lieu de le faire en hauteur, on peut le faire en
longueur.
Du coup, le colspan n'est plus adapt, c'est un rowspan qu'il faut faire pour dire que Lucky
Luke est pour toute la famille.
Prenez le temps de lire et de comprendre cet exemple, cela vaut le coup d'oeil
Code : HTML
1 <table>
2 <tr>
3
<th>Titre du film</th>
4
<td>Massacre la trononneuse</td>
5
<td>Les bisounours font du ski</td>
6
<td>Lucky Luke, seul contre tous</td>
7 </tr>
8 <tr>
9
<th>Pour enfants ?</th>
10
<td>Non, trop violent</td>
11
<td>Oui, adapt</td>
12
<td rowspan="2">Pour toute la famille !</td>
13 </tr>
14 <tr>
15
<th>Pour adolescents ?</th>
16
<td>Oui</td>
17
<td>Pas assez violent...</td>
18 </tr>
19 </table>
Il n'empche que nos tableaux ne sont pas trs "design" pour le moment. Comme promis,
nous allons voir dans la dernire partie de ce chapitre comment embellir un tableau grands
coups de CSS
Tableau avec un peu de CSS...

Vous connaissez dj la plupart des proprits CSS dont nous aurons besoin pour embellir le
tableau. Quelques exemples :
Pour modifier la bordure des cellules, il suffit d'utiliser border.

Pour modifier la couleur de fond d'une cellule, on utilisera background-color.
Pour modifier l'image de fond d'une cellule, on utilisera background-image
Mais on peut aussi modifier la taille (font-size) et la police (font-family) du texte des
cellules d'en-tte, en appliquant les proprits adaptes aux balises <th>
On peut aussi agrandir le tableau tout entier (width), le centrer (margin:auto car le
tableau est un block).
On peut centrer le texte l'intrieur des cellules (text-align:center), modifier les
marges intrieures des cellules (padding) pour arer le tableau.
115
Le tout est de penser les utiliser, et les utiliser sur les bonnes balises. Par exemple, si vous
mettez une couleur de fond noire la balise <table>, tout le tableau sera noir. Tandis que si
vous mettez la couleur de fond sur les balises <th>, seules les cellules d'en-tte changeront !
Rien qu'avec des proprits CSS connues

Vous vous souvenez du tableau en 3 parties qu'on est parvenu faire ? Revoyons le code
encore une fois :
Code : HTML
1 <table>
3
4 <thead> 
5
<tr>
6
<th>Nom</th>
7
<th>Age</th>
8
<th>Pays</th>
9
</tr>
10 </thead>
11
12 <tfoot> 
13
<tr>
14
<th>Nom</th>
15
<th>Age</th>
16
<th>Pays</th>
17
</tr>
18 </tfoot>
19
20 <tbody> 
21
<tr>
22
<td>Carmen</td>
23
<td>33 ans</td>
24
<td>Espagne</td>
25
</tr>
26
<tr>
27
<td>Michelle</td>
28
<td>26 ans</td>
29
<td>Etats-Unis</td>
30
</tr>
31
<tr>
32
<td>Franois</td>
33
<td>43 ans</td>
34
<td>France</td>
35
</tr>
36
<tr>
37
<td>Martine</td>
38
<td>34 ans</td>
39
<td>France</td>
40
</tr>
41
<tr>
42
<td>Jonathan</td>
43
<td>13 ans</td>
44
<td>Australie</td>
45
</tr>
116
46
<tr>
47
<td>Xu</td>
48
<td>19 ans</td>
49
<td>Chine</td>
50
</tr>
51 </tbody>
52 </table>
Rien qu'en modifiant le CSS avec des proprits qu'on connat, il va avoir d'un coup
beaucoup plus d'allure !
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
caption /* Titre du tableau */

{
margin: auto; /* Centre le titre du tableau */
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-bottom: 20px; /* Pour viter que le titre ne soit trop coll au tableau en-dessous */
}
table /* Le tableau en lui-mme */
{
margin: auto; /* Centre le tableau */
border: 4px outset green; /* Bordure du tableau avec effet 3D (outset) */
border-collapse: collapse; /* Colle les bordures entre elles */
}
th /* Les cellules d'en-tte */
{
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td /* Les cellules normales */
{
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center; /* Tous les textes des cellules seront centrs*/
padding: 5px; /* Petite marge intrieure aux cellules pour viter que le texte touche les bordures */
}
Sur les tableaux, plus que partout ailleurs, vous aurez intrt travailler votre CSS. Il suffit de
comparer. Lequel de ces 2 tableaux prfrez-vous ?
117
Quelques nouvelles proprits CSS

Il existe quelques nouvelles proprits CSS qui sont propres aux tableaux.
Voici quelques unes :
caption-side : indique o doit se trouver le titre du tableau. Cette proprit peut

prendre les valeurs suivantes :
top : le titre sera plac en haut du tableau (par dfaut).
bottom : le titre sera plac en bas du tableau.
left : le titre sera plac gauche du tableau.
right : le titre sera plac droite du tableau.
border-collapse : on l'a dj vue tout l'heure, cette proprit indique que les
bordures des cellules seront colles entre elles. On utilise souvent cette proprit car
l'effet qu'elle procure est intressant. Les valeurs possibles sont :
o
o
o
o
separate : les bordures seront spares les unes par rapport aux autres (par
dfaut).
o collapse : les bordures seront colles entre elles.
vertical-align : alignement vertical du contenu d'une cellule. Si une cellule a une
hauteur importante, il est possible de placer son contenu en haut, en bas ou au
milieu de la cellule :
o
o
o
o
top : le contenu sera align en haut de la cellule

middle : le contenu sera align au milieu de la cellule
bottom : le contenu sera align en bas de la cellule
118
Comme on connat dj border-collapse, on va se contenter de vous montrer un CSS de

tableau qui utilise le vertical-align et le caption-side.
On utilise les mmes fichiers XHTML et CSS, mais on rajoute dans le CSS les deux proprits
qu'on vient d'apprendre :
Code : CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
caption
{
caption-side: bottom; /* Le titre sera plac en bas du tableau */
margin: auto;
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-top: 20px; /* La marge doit se faire au-dessus et non en-dessous maintenant */
}
table
{
margin: auto;
border: 4px outset green;
border-collapse: collapse;
}
th
{
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td
{
height: 80px; /* J'agrandis la hauteur des cellules pour que l'on puisse voir l'alignement vertical */
vertical-align: bottom; /* Alignement vertical, le contenu des cellules sera plac en bas */
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
}
Les lignes qui ont chang sont commentes

Le
titre
est
plac
en
bas
du
tableau
grce
caption-side.
Petit dtail, on a modifi le margin-bottom de tout l'heure en margin-top : maintenant que
le titre se trouve en bas du tableau, la marge s'effectue au-dessus du titre !
Pour pouvoir tester l'alignement vertical, on a d modifier la hauteur des cellules. En effet,
pour que l'alignement vertical se voie, il faut que les cellules soient suffisamment grandes.
Ensuite, le vertical-align a permis de dire "on veut que le texte soit plac en bas de chaque
cellule" !
119
18. Les formulaires

Les formulaires permettent aux visiteurs dinteragir avec le document. Ils servent collecter
des informations qui seront ensuite renvoyes vers le serveur pour tre traites. Il peut
sagir dune recherche ou encore dun formulaire de contact. Une chose est importante
quand on cre un formulaire, cest de bien penser lusage que lon veut faire. Un
formulaire doit tre comprhensible et ordonn pour tre utilisable.
L'ide est simple : vous avez cr un site, et vous aimeriez par exemple que vos visiteurs
puissent vous donner leur avis dessus, en cochant des cases, en entrant leurs commentaires,
leurs suggestions....
Crer un formulaire
Lorsqu'il vous prend subitement l'envie d'insrer un formulaire dans votre page XHTML, vous
devez obligatoirement crer une balise <form></form>. C'est la balise principale du
formulaire, elle permet d'en indiquer le dbut et la fin.
Code : HTML
<p>Texte avant le formulaire</p>
1
2
<form>
3
<p>Texte l'intrieur du
4
formulaire</p>
5
</form>
6
7
<p>Texte aprs le formulaire</p>
Notez qu'il faut obligatoirement mettre des balises de type block (comme <p></p>)
l'intrieur de votre formulaire si vous avez besoin d'crire du texte dedans.
Il faut savoir qu'un formulaire est fait pour tre envoy.
Exemple : Supposons que votre visiteur vienne de taper un commentaire dans votre
formulaire, comme par exemple "Veuillez ajouter le plan du site !". Ce message doit tre
envoy pour que vous puissiez le recevoir, et afin que vous sachiez ce que le visiteur pense
de votre site.
120
Les problmes que l'on va se poser :
Problme n1 : comment envoyer le texte rentr par le visiteur ? Par quel moyen ?
Problme n2 : une fois que les donnes ont t envoyes, comment les traiter ?
Souhaitez-vous recevoir le message automatiquement par mail, ou prfrez-vous
qu'un programme se charge de l'enregistrer quelque part, puis de l'afficher sur une
page visible par tout le monde ?
Vous devez indiquer 2 attributs la balise <form> afin de donner les rponses ces 2
problmes :
method : cet attribut indique par quel moyen les donnes vont tre envoyes
(problme n1). Il existe 2 moyens pour envoyer des donnes sur le web :
o method="get" : c'est une mthode en gnral assez peu adapte, car elle est
limite 255 caractres. La particularit vient du fait que les informations
seront envoyes dans l'adresse de la page (http://...), mais ce dtail ne nous
intresse pas vraiment pour le moment. La plupart du temps, il est
recommand d'utiliser l'autre mthode : "post".
o method="post" : c'est la mthode la plus utilise pour les formulaires car on
peut rentrer un grand nombre d'informations grce elle.
action : c'est l'adresse de la page ou du programme qui va traiter les informations
(problme n2). Cette page se chargera de vous envoyer un mail avec le message si
c'est ce que vous voulez, ou bien d'enregistrer le message avec tous les autres dans
une base de donnes.
Cela ne peut pas se faire en XHTML / CSS, on utilisera en gnral un autre langage : le
PHP par exemple.
On va donc maintenant complter la balise <form> avec les 2 attributs qu'on vient de voir.
Pour method, on va mettre la valeur "post".
Pour action, on va taper le nom d'une page spciale en PHP ("traitement.php"). C'est cette
page qui sera appele lorsque le visiteur cliquera sur le bouton "Envoyer le formulaire".
Code : HTML
1
2
3
4
5
6
7
<p>Texte avant le formulaire</p>

<form method="post" action="traitement.php">
<p>Texte l'intrieur du formulaire</p>
</form>
<p>Texte aprs le formulaire</p>
121
Pour le moment, on ne sait pas ce qu'il se passe l'intrieur de la page "traitement.php".
Les zones de saisie

Nous allons voir quelles sont les balises XHTML qui nous permettent de rentrer du texte
dans un formulaire.
Pour commencer, il faut savoir qu'il y a 2 zones de texte diffrentes :
La zone de texte une ligne : comme son nom l'indique, on ne peut crire qu'une
seule ligne l'intrieur :p. Elle sert pour rentrer des textes courts, comme par
exemple : "Entrez votre pseudo"
La zone de texte multiligne : cette zone de texte permet d'crire une quantit
importante de texte sur plusieurs lignes, comme par exemple : "Donnez vos
impressions sur la formation que vos suivez "
Zone de texte une ligne

Pour insrer une zone de texte une ligne, on va utiliser la balise <input />.
On la retrouvera plusieurs fois par la suite dans ce chapitre. A chaque fois, c'est son attribut
type qui va changer.
Pour une zone de texte une ligne, on doit taper :
<input type="text" />
Il manque un attribut trs important : c'est le nom de votre zone de texte. En effet, cela vous
permettra plus tard (dans le langage PHP) de reconnatre que tel texte est le pseudo du
visiteur, tel texte est son mot de passe etc...
Il faut donc donner un nom cette zone de texte, grce l'attribut name. Ici, on va supposer
qu'on demande au visiteur de rentrer son pseudo :
<input type="text" name="pseudo" />
Code : HTML
<form method="post"
1
action="traitement.php">
2
<p><input type="text" name="nom" /></p>
3
</form>
Pensez entourer votre balise <input /> par une balise block comme <p></p> car sinon
votre page web ne sera pas valide (cela vous est expliqu dans l'annexe "Le W3C et les
standards du web").
122
Les labels
Pour indiquer ce que signifie une zone de texte au visiteur, on utilise la balise <label> qui
entoure le libell, comme ceci :
Code : HTML
1
<p>
2
<label>Votre pseudo</label> : <input type="text" name="pseudo"
3
/>
4
</p>
5
</form>
Mais cela ne suffit pas. Il faut lier le label avec la zone de texte.
Pour ce faire, il faut donner un nom la zone de texte, non pas avec l'attribut name mais
avec l'attribut id (que l'on peut utiliser sur toutes les balises).
Pour lier le label au champ, il faut lui donner un attribut for qui a la mme valeur que l'id du
champ...
Code : HTML
1
<p>
2
<label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo"
3
id="pseudo" />
4
</p>
5
</form>
Essayez de cliquer sur le texte "Votre pseudo" : vous allez voir que le curseur se place
automatiquement dans la zone de texte correspondante.
On a "li" le label avec sa zone de texte pour qu'on sache quoi il correspond.
Mais... Cela sert juste ce que la zone de texte soit slectionne si on clique sur "Votre
pseudo" ?
123
Quelques attributs supplmentaires
Il existe quelques autres attributs sur la balise <input />.

Il est ainsi possible, si vous en avez besoin, de donner une valeur par dfaut votre zone de
texte.
Pour faire cela, il vous suffit d'ajouter l'attribut value <input /> en indiquant quelle valeur
vous voulez mettre au dpart. Exemple :
<input type="text" name="pseudo" value="Essai" />
Autre chose : vous pouvez modifier la largeur de votre zone de texte ainsi que le nombre
maximal de caractres que l'on peut mettre dedans.
La largeur se dfinit avec size.
Le nombre maximal de caractres se dfinit avec maxlength.
Dans l'exemple suivant, la zone de texte contient le pseudo "Essai" par dfaut, elle fait 30
caractres de long mais on ne peut mettre que 10 caractres maximum l'intrieur :
Code : HTML
1
<p>
2
<label for="pseudo">Votre pseudo :</label>
3
<input type="text" name="pseudo" id="pseudo" value="Essai" size="30"
4
maxlength="10" />
5
</p>
6
</form>
Zone de mot de passe
Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une zone
"mot de passe", c'est--dire une zone o on ne voit pas l'cran ce qui est tap dedans.
La seule chose que vous avez besoin de changer, c'est l'attribut type de <input />. Mettez
type="password".
On complte mon formulaire. Il demande maintenant au visiteur son pseudo et son mot de
passe :
124
Code : HTML
1
<p>
2
<label for="pseudo">Votre pseudo :</label>
3
<input type="text" name="pseudo" id="pseudo" value="Essai"
4
/>
5
6
<br />
7
<label for="pass">Votre mot de passe :</label>
8
<input type="password" name="pass" id="pass" />
9
10
</p>
11
</form>
multiligne
Zone de texte
La zone de texte multiligne est une balise existant par paire (contrairement <input />).
C'est la balise <textarea></textarea>
A elle aussi, comme tout autre lment du formulaire, il faut lui donner un nom avec
name, et utiliser un label qui explique de quoi il s'agit.
Code : HTML
1
2
3
4
5
6

<p>
<label for="ameliorer">Comment pensez-vous que je pourrais amliorer mon site ?
</label><br />
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>
</form>
On peut modifier la taille du textarea en ajoutant les attributs rows et cols la balise
<textarea>. Le premier indique le nombre de lignes du textarea, et le second le
nombre de colonnes.
Code : HTML
125
126
127

1
<p>
2
<label for="ameliorer">Comment pensez-vous que je puisse amliorer mon site ?
3
</label><br />
4
<textarea name="ameliorer" id="ameliorer" rows="10" cols="50">
5
Amliorer ton site ?!
6
Mais enfin ! Il est tellement gnialissime qu'il n'y a pas besoin de l'amliorer !
7
</textarea>
8
9
</p>
10
</form>
Elments d'options
En plus des zones de saisies, le XHTML vous offre des lments d'options utiliser dans votre
formulaire.
On va voir dans cette partie :
Les cases cocher,

Les zones d'options,
Les listes droulantes.
Les cases cocher

En effet, la balise utiliser vous la connaissez dj : c'est <input />
On va seulement changer la valeur de son attribut type pour mettre "checkbox" :
<input type="checkbox" name="choix" />
Rajoutez un <label> bien plac, et le tour est (dj ?) jou !
Code : HTML
1
2
3
4
5
6
7
8
9

<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /> <label
for="frites">Frites</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak
hach</label><br />
<input type="checkbox" name="epinards" id="epinards" /> <label
for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /> <label
for="huitres">Huitres</label>
</p>
</form>
Grce aux label , vous n'tes pas obligs de cliquer directement sur la case, vous pouvez
aussi cliquer sur le texte juste ct (enfin, cela ne marche pas sur IE comme...).
128
N'oubliez pas aussi de donner un nom chaque case cocher, cela vous permettra
d'identifier plus tard quelles cases le visiteur a coch.
Vous pouvez faire en sorte qu'une case soit dj coche par dfaut. Pour faire cela, il faut
rajouter l'attribut checked="checked" (mme attribut et valeur).
Cela nous permet d'influencer les choix dans notre exemple
129
Code : HTML
1
2
3
4
5
6
7
8
9

<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /> <label
for="frites">Frites</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak
hach</label><br />
<input type="checkbox" name="epinards" id="epinards" checked="checked" />
<label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /> <label
for="huitres">Huitres</label>
</p>
</form>
Les zones d'options
Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de
possibilits :
Cela ressemble aux cases cocher, avec juste une petite difficult supplmentaire, vous allez
voir.
La balise utiliser est toujours un <input />, avec cette fois la valeur "radio" pour l'attribut
type.
La grosse diffrence avec les cases cocher, c'est que les zones d'options fonctionnent par
"groupe". Tout un groupe d'options a le mme nom, mais un attribut value diffrent
chaque fois.
Code : HTML
1
2
3
4
5
6
7
8
9

<p>
Veuillez indiquer la tranche d'ge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label
for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label
for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label
for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore
plus vieux que cela ?!</label>
</p>
130
</form>
Pourquoi avoir mis le mme nom pour chaque option ? Tout simplement pour que le
navigateur sache dans quel "groupe" le bouton fait partie.
Essayez d'enlever les attributs name, vous verrez que chaque lment d'option deviendra
slectionnable. Or, ce n'est pas ce que l'on veut, c'est pour cela qu'on les "lie" entre eux en
leur donnant un nom identique.
Vous noterez que cette fois on a choisi un id diffrent de name. En effet, les name tant
identiques, on n'aurait pas pu les diffrencier (et vous savez bien qu'un id doit tre unique !).
Voil donc pourquoi on a choisi de mettre l'id la mme valeur que value.
Si vous avez 2 zones d'options diffrentes, il faut donner un nom unique chaque groupe
comme ceci :
Code : HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<p>
Veuillez indiquer la tranche d'ge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de
15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium1525">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium2540">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux
que cela ?!</label>
</p>
<p>
Sur quel continent habitez-vous ?<br />
<input type="radio" name="continent" value="europe" id="europe" /> <label
for="europe">Europe</label><br />
<input type="radio" name="continent" value="afrique" id="afrique" /> <label
for="afrique">Afrique</label><br />
<input type="radio" name="continent" value="asie" id="asie" /> <label for="asie">Asie</label><br />
<input type="radio" name="continent" value="amerique" id="amerique" /> <label
for="amerique">Amrique</label><br />
<input type="radio" name="continent" value="australie" id="australie" /> <label
for="australie">Australie</label>
</p>
</form>
Si, au lieu de mettre name="continent" on avait continu mettre des name="age", le

visiteur n'aurait pas pu slectionner son ge ET son continent.
131
Dernire petite prcision : si vous voulez qu'une des options soit coche par dfaut, vous
rajoutez un checked="checked" comme pour les cases cocher.
Les listes droulantes
Les listes droulantes sont un autre moyen lgant de faire un choix entre plusieurs
possibilits :
Cette fois, cela fonctionne un peu diffremment. On va utiliser la balise <select></select> qui
indique le dbut et la fin de la liste droulante.
On ajoute l'attribut name la balise pour donner un nom la liste. Par exemple "pays" :
<select name="pays">
Et maintenant, l'intrieur du <select></select>, on va mettre plusieurs balises
<option></option> (une par choix possible).
On rajoute un attribut value pour pouvoir identifier ce que le visiteur a choisi.
Code : HTML
1
<p>
2
<label for="pays">Dans quel pays habitez-vous ?</label><br
3
/>
4
<select name="pays" id="pays">
5
<option value="france">France</option>
6
<option value="espagne">Espagne</option>
7
<option value="italie">Italie</option>
8
<option value="royaume-uni">Royaume-Uni</option>
9
<option value="canada">Canada</option>
10
<option value="etats-unis">Etats-Unis</option>
11
<option value="chine">Chine</option>
12
<option value="japon">Japon</option>
13
</select>
14
</p>
15
</form>
Autre nouveaut, on ne peut plus utiliser le checked="checked" ici, on doit utiliser la place
le... selected="selected". Il nous permet comme le checked de slectionner une valeur par
dfaut :
132
Code : HTML
1
<p>
2
<label for="pays">Dans quel pays habitez-vous ?</label><br />
3
4
5
6
7
8
<option value="canada"
9
selected="selected">Canada</option>
10
11
12
13
</select>
14
</p>
15
</form>
On peut crer des groupes d'options l'intrieur de la liste, grce la balise

<optgroup></optgroup>. Vous devez lui ajouter l'attribut label qui permet de donner un
nom au groupe ( ne pas confondre avec la balise <label> !).
Dans notre exemple, pourquoi ne pas sparer les pays en fonction de leur continent ?
Code : HTML
1
<p>
2
<label for="pays">Dans quel pays habitez-vous ?</label><br
3
/>
4
5
<optgroup label="Europe">
6
7
8
9
10
</optgroup>
11
<optgroup label="Amrique">
12
13
14
</optgroup>
15
<optgroup label="Asie">
16
17
18
</optgroup>
19
</select>
20
</p>
21
</form>
133
Un formulaire accessible et design ?

Maintenant, on va essayer d'aller encore plus loin.
Notre objectif sera double : faire en sorte que notre formulaire soit accessible (=
comprhensible) et design.
On va faire cela en 3 tapes :
1. Dfinir un ordre de tabulation (accessibilit)
2. Dfinir des touches de raccourci (accessibilit)
3. Organiser le formulaire en plusieurs zones (accessibilit et design)
Dfinir un ordre de tabulation
On peut se dplacer dans un formulaire uniquement grce la touche "Tab" (tabulation)

situe gauche de votre clavier. A chaque fois qu'on appuie sur Tab, on va au champ
suivant. A chaque fois qu'on fait Maj + Tab, on retourne au champ prcdent.
Le but est de dire en XHTML dans quel ordre on doit se dplacer dans le formulaire. Par
exemple, aprs le champ "nom" si on tape Tab on doit tomber sur le champ "prnom", puis
sur "e-mail" etc...
On va utiliser l'attribut tabindex qui peut se rajouter sur toutes les balises du formulaire
qu'on a apprises.
On doit lui mettre un nombre pour valeur. Chaque champ du formulaire doit avoir un
nombre diffrent.
Les nombres indiquent dans quel ordre on se dplace dans le formulaire : d'abord le n1,
puis le n2, le n3 etc...
Vous n'tes pas obligs de mettre des nombres qui se suivent. Il est mme conseill de
laisser des "espaces" entre les nombres au cas o vous auriez besoin de rajouter plus tard
des champs.
Ainsi, il est tout fait possible de compter 10 par 10 : n10, n20, n30 etc...si plus tard on a
besoin de crer un champ n25, on n'aura aucun problme.
Sur ce formulaire, on a rajout les tabindex chaque champ. Comme on l'a vu, le premier
champ est celui qui a le numro le plus petit, et le dernier celui qui a le plus grand.
134
Code : HTML
1
<p>
2
<label for="nom">Quel est votre nom ?</label><br />
3
<input type="text" name="nom" id="nom" tabindex="10" /><br />
4
5
<label for="prenom">Quel est votre prnom ?</label><br />
6
<input type="text" name="prenom" id="prenom" tabindex="20" /><br
7
/>
8
9
<label for="email">Quel est votre e-mail ?</label><br />
10
<input type="text" name="email" id="email" tabindex="30" /><br />
11
12
<label for="pays">Dans quel pays habitez-vous ?</label><br />
13
<select name="pays" id="pays" tabindex="40">
14
<optgroup label="Europe">
15
16
17
18
19
</optgroup>
20
<optgroup label="Amrique">
21
22
23
</optgroup>
24
<optgroup label="Asie">
25
26
27
</optgroup>
28
</select>
29
</p>
30
</form>
Essayez de taper plusieurs fois d'affile sur "Tab", vous allez voir que vous vous dplacerez
dans l'ordre que vous avez dfini avec tabindex.
Cela est particulirement utile pour les personnes qui ne peuvent pas se servir d'une souris.
Par dfaut, si aucun tabindex n'est mis, le navigateur dira que le premier champ est celui
tout en haut, et que le dernier celui tout en bas de la page.
Cependant, il est conseill de toujours mettre les tabindex, car si votre formulaire se
complexifie par la suite cela sera trs utile.
Dfinir des touches de raccourci
Une touche de raccourci ("access key" en anglais) est une touche qui permet d'accder
135
directement un champ de votre formulaire sans avoir cliquer dessus avec la souris et sans
avoir appuyer plusieurs fois sur "Tab" avant de tomber sur le champ qui vous intresse.
Ce qui est trs pratique, c'est que le XHTML vous permet de choisir quelles touches du
clavier serviront de raccourcis.
Ce qui l'est moins, c'est que les raccourcis s'utilisent de manire diffrente en fonction du
navigateur:
Firefox et Internet Explorer (Windows) : il faut faire la combinaison de touches Alt +

Raccourci. Si cela ne marche pas, essayez Alt + Maj + Raccourci.
Safari et IE-Mac (Macintosh) : il faut taper Ctrl + Raccourci.
Pour dfinir une touche de raccourci, vous utiliserez l'attribut accesskey qui, comme
tabindex, peut se mettre sur tous les types de champs de formulaire qu'on a vus.
Vous devez lui mettre comme valeur la touche du clavier qui doit servir de raccourci pour le
champ.
Sur cet exemple, le champ de recherche est accessible directement avec la touche R :
Code : HTML
1
<p>
2
3
4
5
6
<input type="text" name="prenom" id="prenom" tabindex="20" /><br />
7
8
9
10
11
<label for="recherche">Que recherchez-vous sur ce site ? <em>(raccourci : R)</em></label><br
12
/>
13
<input type="text" name="recherche" id="recherche" tabindex="30" accesskey="R" />
14
</p>
15
</form>
Sous Windows, il faut donc faire Alt + R pour arriver directement sur le champ de recherche.
Sous Mac, il faut faire Ctrl + R.
Le gros problme des touches de raccourci est que certains caractres sont dj utiliss par
le navigateur. Si vous utilisez les mmes, il y aura un conflit et vos visiteurs ne pourront plus
utiliser les raccourcis auxquels ils sont habitus.
L'idal est d'utiliser des chiffres en raccourci, ils sont en gnral trs peu utiliss par les
navigateurs.
136
N'oubliez pas d'indiquer quelque part sur la page quels sont les raccourcis utilisables, parce
que vos visiteurs ne pourront pas les deviner.
137
Organiser le formulaire en plusieurs zones
La technique que nous allons voir a 2 avantages :
Elle permet de rendre le formulaire plus clair, donc plus accessible.

Elle permet d'amliorer le design de votre formulaire.
Concrtement, quelle est l'ide ?

Si vous avez un formulaire assez gros (et en gnral cela sera le cas), il est facile que le
visiteur se perde dans la masse d'informations qu'il a entrer. Il est possible en XHTML de
grouper plusieurs champs ayant un thme entre eux.
On utilisera la balise <fieldset></fieldset> pour dlimiter un groupe de champs.
A l'intrieur de cette balise, vous mettrez vos champs (vos <input /> entre autres...) ainsi
qu'une autre balise : <legend></legend>. Celle-ci permet de donner le nom du groupe.
Ca ressemble trangement aux <optgroup>
voici un exemple concret d'utilisation des <fieldset> :
Code : HTML
138

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<fieldset>
<legend>Vos coordonnes</legend> 
</fieldset>
<fieldset>
<legend>Votre souhait</legend> 
<p>
Faites un souhait que vous voudriez voir exauc :<br />
<input type="radio" name="souhait" value="riche" id="riche" tabindex="40" /> <label
for="riche">Etre riche</label><br />
<input type="radio" name="souhait" value="celebre" id="celebre" tabindex="50" /> <label
for="celebre">Etre clbre</label><br />
<input type="radio" name="souhait" value="intelligent" id="intelligent" tabindex="60" /> <label
for="intelligent">Etre <strong>encore</strong> plus intelligent</label><br />
<input type="radio" name="souhait" value="autre" id="autre" tabindex="70" /> <label
for="autre">Autre...</label><br />
</p>
<p>
<label for="precisions">Si "Autre", veuillez prciser :</label><br />
<textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80"></textarea>
</p>
</fieldset>
</form>
A l'intrieur des <fieldset></fieldset>, l'utilisation de balises de paragraphe <p></p> n'est

plus obligatoire.
Le rsultat est de toute vidence plus clair : on voit de suite quelles sont les grandes parties
du formulaire. On y gagne forcment en clart, et le visiteur vous en sera reconnaissant.
Les boutons
Nous avons vu la plupart des lments que l'on peut intgrer dans un formulaire, mais il
manque le plus important : le bouton de validation ! Il y a trois types :
Le bouton d'envoi : il dclenche l'envoi du formulaire. Le visiteur se retrouve

automatiquement tltransport la page indique dans l'attribut action du
formulaire.
139
Un bouton d'envoi se cre avec l'attribut type="submit". Vous pouvez lui ajouter un
attribut value pour changer le texte l'intrieur du bouton, mais vous pouvez
laisser la valeur par dfaut
<input type="submit" />
Le bouton de remise zro : il remet zro automatiquement toutes les valeurs du

formulaire. On doit utiliser l'attribut type="reset"
<input type="reset" />
Le bouton qui-sert--rien : c'est un bouton "gnrique" qui n'effectue aucune action

particulire. Le formulaire n'est pas envoy, il n'est pas remis zro, non rien ne se
passe.
Quel intrt ? Ca vous servira principalement lancer des scripts en Javascript (un
autre langage qu'on peut utiliser sur une page web.).
Cette fois, je vous recommande de mettre l'attribut value pour que l'on sache quoi
sert le bouton :
<input type="button" value="Je sers rien" />

On va tester les 2 premiers boutons (envoi et remise zro) dans un petit formulaire fictif :
Code : HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form method="post" action="cible_formulaire.php">

<fieldset>
<legend>Vos coordonnes</legend>
</fieldset>
<fieldset>
<legend>Votre souhait</legend>
<p>
Faites un souhait que vous voudriez voir exauc :<br />
<input type="radio" name="souhait" value="riche" id="riche" tabindex="40" /> <label
for="riche">Etre riche</label><br />
<input type="radio" name="souhait" value="celebre" id="celebre" tabindex="50" /> <label
for="celebre">Etre clbre</label><br />
<input type="radio" name="souhait" value="intelligent" id="intelligent" tabindex="60" /> <label
for="intelligent">Etre <strong>encore</strong> plus intelligent</label><br />
140
<input type="radio" name="souhait" value="autre" id="autre" tabindex="70" /> <label

for="autre">Autre...</label><br />
27
</p>
28
29
<p>
30
<label for="precisions">Si "Autre", veuillez prciser :</label><br />
31
<textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80"></textarea>
32
</p>
33
</fieldset>
34
35
36
<p>
37
<input type="submit" /> <input type="reset" />
38
</p>
</form>
Dans le cas prsent, le formulaire ne fait strictement rien. Rassurez-vous donc, aucune
information n'a t enregistre
Lorsque vous cliquez sur "Envoyer", le formulaire vous amne donc une page
"cible_formulaire.php", qui est une page fictive en PHP que vous ne savez pas faire.
141
19. RECAPITULATIF
Proprits de formatage de texte
On rsume ici la plupart des proprits de formatage de texte.
Qu'est-ce que le formatage de texte ? C'est tout ce qui consiste mettre en forme le texte :
mettre en gras, italique, soulign, changer la police, l'alignement etc...
Police, taille et dcorations

Type
Nom
Nom de police font-family
Valeurs possibles
Indiquer les noms de polices possibles par ordre de prfrence :
Code : CSS
142
Type
Nom
Valeurs possibles
1
f
o
n
tf
a
m
il
y:
p
o
li
c
e
1
,
p
o
li
c
e
2
,
p
o
li
c
e
3
;
Si le visiteur a la police 1, il l'utilisera. Sinon, il regarde s'il a la

police 2, puis la police 3 etc.
Utilisez des guillemets si le nom de la police comporte des
espaces. Essayez de toujours mettre comme dernire police
possible "serif" ou "sans-serif".
Code : CSS
143
Type
Nom
Valeurs possibles
1
f
o
n
tf
a
m
il
y:
"
A
ri
al
B
la
c
k
",
A
ri
al
,
V
e
r
d
a
n
a,
s
e
ri
f;
144
Type
Nom
Valeurs possibles
Indiquez la taille du texte.
Plusieurs units sont possibles :
px (pixels)
Taille du texte font-size
Gras
Italique
Dcoration
Petites
capitales
Capitales
Mgaproprit de
police
% (pourcentage, 100% = normal)

em (taille relative, 1.0 = normal)
ex (taille relative la hauteur de la lettre "x". 1.0 =
normal)
nom de taille :
o
o
o
o
o
o
xx-small : trs trs petit

x-small : trs petit
small : petit
medium : moyen
large : grand
x-large : trs grand
xx-large : trs trs grand
bold : gras
bolder : plus gras
font-weight
lighter : plus fin
normal : pas gras (par dfaut)
italic : italique
font-style oblique : autre faon de mettre en italique
normal : normal (par dfaut)
underline : soulign
overline : ligne au-dessus
textline-through : barr
decoration
blink : clignotant
none : normal (par dfaut)
small-caps : petites capitales
font-variant
normal : normal (par dfaut)
uppercase : tout mettre en majuscules
textlowercase : tout mettre en minuscules
transform capitalize : dbut des mots en majuscules
none : normal (par dfaut)
font
Indiquez dans n'importe quel ordre des valeurs possibles pour
font-weight, font-style, font-size, font-variant, font-family.
Attention exception : le nom de la police (font-family) doit tre
plac en dernier dans la liste dans tous les cas.
Vous n'tes pas obligs de mettre une valeur de chacune de ces
proprits.
Exemple :
Code : CSS
145
Type
Nom
Valeurs possibles
1
f
o
n
t:
b
o
l
d
,
1
6
p
x,
A
ri
al
;
Cela mettra votre texte en gras, 16 pixels, Arial.
Alignement
Type
Proprit
Valeurs possibles
left : gauche (par dfaut)
Alignement
center : centr
text-align
horizontal
right : droite
justify : texte justifi (prend toute la largeur de la page)
A utiliser dans des cellules de tableau, ou dans des lments
inline eux-mmes contenus dans un lment inline.
Alignement
verticaltop : en haut
vertical
align
middle : au milieu
bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%)
Indiquez une valeur en pixels (px) pour dfinir l'alina de vos
paragraphes.
Alina
text-indent
Vos paragraphes commenceront avec le retrait que vous avez
indiqu.
normal : le passage la ligne est automatique (par dfaut)
nowrap : pas de passage la ligne automatique, moins
whiteCsure
qu'une balise xHTML comme <br /> ne soit prsente.
space
pre : le passage la ligne se fait tel que le texte a t saisi dans
le code source (comme la balise xHTML <pre>)
Proprits de couleur et de fond

146
Couleur
Type
Couleur de
texte
Proprit
Valeurs possibles
Indiquer une couleur avec l'une des mthodes suivantes :
color
En tapant le nom de la couleur en anglais (black, blue,

green, white, red...).
En indiquant la couleur en hexadcimal (#CC48A1)
En indiquant la couleur en RGB : rgb (128, 255, 0)

Mme fonctionnement que color. Cela dfinit cette fois la
couleur de fond du texte
Couleur de
fond
backgroundcolor
Image de fond
Type
Image de
fond
Proprit
backgroundimage
Valeurs possibles
Indiquer l'url de l'image (notation absolue ou relative)
Code : CSS
147
Type
Proprit
Valeurs possibles
1
2
b
a
c
k
g
r
o
u
n
d
i
m
a
g
e
:
u
rl
("
i
m
a
g
e
s
/f
o
n
d
.
p
n
g
")
;
/
*
N
o
t
a
ti
o
n
r
el
a
ti
v
e
*
/
b
a
c

148
Type
Fond fix
Rptition
du fond
Proprit
backgroundattachment
backgroundrepeat
Position du backgroundfond
position
Valeurs possibles
fixed : le fond reste fixe quand on descend plus bas sur la page
scroll : le fond dfile avec le texte (par dfaut)
repeat : le fond se rpte (par dfaut)
repeat-x : le fond ne se rpte que sur une ligne,
horizontalement
repeat-y : le fond ne se rpte que sur une colonne,
verticalement
no-repeat : le fond ne se rpte pas, il n'est affich qu'une fois
2 faons de faire :
En notant une distance en px ou %, par rapport au coin en haut
gauche.
Code : CSS
149
Type
Proprit
Valeurs possibles
1
b
a
c
k
g
r
o
u
n
d
p
o
si
ti
o
n
:
5
0
p
x
2
0
0
p
x;
/
*
5
0
p
x
d
r
o
it
e
,
2
0
0
p
x
e
n
b
a
s
*
/

150
Type
Proprit
Mgabackground
proprit de
fond
Valeurs possibles
Indiquer une ou plusieurs valeurs issues des proprits
background-image, background-repeat, background-attachment,
background-position.
L'ordre des valeurs n'a pas d'importance et vous n'tes pas
obligs de mettre toutes les valeurs de ces proprits (au moins
une suffit)
Code : CSS
151
Type
Proprit
Valeurs possibles
1
2
/
*
L
e
f
o
n
d
f
o
n
d
.
p
n
g
r
e
st
e
a
ff
ic
h
e
n
h
a
u
t
d
r
o
it
e
d
e
l'
c
r
a
n
e
t
n
'e
st
p
a
s
r

152
Proprits des botes

Dimensions
Type
Proprit
Largeur
width
Hauteur
Largeur
minimale
Largeur
maximale
Hauteur
minimale
Hauteur
maximale
height
Valeurs possibles
Valeur en px, %, ou encore "auto" (valeur par dfaut, la largeur
dpendra du texte l'intrieur)
Idem
min-width Indiquer une valeur, en pixels par exemple.

max-width Idem
min-height Idem
maxheight
Idem
Marges extrieures
Type
Proprit
Marge en haut margin-top
Marge gauche margin-left
marginMarge droite
right
Marge en bas
marginbottom
Valeurs possibles
Indiquer une valeur comme 20px, 1.5em...
Idem
Mga-proprit margin
de marge
Indiquez de 1 4 valeurs la suite. Selon le nombre de valeurs

que vous mettez, la signification change :
Idem
Idem
1 valeur : ce sera la marge pour le haut, le bas, la gauche

et la droite
2 valeurs : la premire correspond la marge pour le
haut et le bas, la seconde pour la gauche et la droite
3 valeurs : la premire correspond la marge du haut, la
seconde aux marges gauche et droite, la troisime
la marge du bas
4 valeurs : respectivement la marge du haut, de la droite,
du bas, de la gauche.
Par exemple, si je mets 2 valeurs :

153
Type
Proprit
Valeurs possibles
Code : CSS
154
Type
Proprit
Valeurs possibles
1
m
a
r
gi
n
:
2
0
p
x
5
p
x;
/
*
2
0
p
x
d
e
m
a
r
g
e
e
n
h
a
u
t
e
t
e
n
b
a
s,
5
p
x
g
a
u
c
h
e
e
t
d
r
o
it
e

155
Marges intrieures
Type
Marge intrieure
en haut
Marge intrieure
gauche
Marge intrieure
droite
Marge intrieure
en bas
Proprit
Valeurs possibles
padding-top Indiquer une valeur comme 20px, 1.5em...

padding-left Idem
paddingright
paddingbottom
Idem
Idem
Indiquez de 1 4 valeurs la suite. Selon le nombre de
valeurs que vous mettez, la signification change :
Mga-proprit de
padding
marge intrieure
1 valeur : ce sera la marge pour le haut, le bas, la

gauche et la droite
2 valeurs : la premire correspond la marge pour le
haut et le bas, la seconde pour la gauche et la droite
3 valeurs : la premire correspond la marge du
haut, la seconde aux marges gauche et droite, la
troisime la marge du bas
4 valeurs : respectivement la marge du haut, de la
droite, du bas, de la gauche.
156
Bordures
Type
Proprit
Valeurs possibles
Epaisseur de la
border-width Indiquer une valeur en px.
bordure
Couleur de la bordure border-color Indiquer une valeur de couleur.
none : pas de bordure (par dfaut)
hidden : bordure cache
solid : ligne pleine
double : ligne double (ncessite une taille de bordure de
3px minimum)
Type de bordure
border-style
dashed : en tirets
dotted : en pointills
inset : effet 3D "enfonc"
outset : effet 3D "surlev"
ridge : autre effet 3D
Bordure gauche
border-left Indiquer la couleur, l'paisseur et le type de bordure
pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple :
Code : CSS
157
Type
Proprit
Valeurs possibles
1
b
o
r
d
e
rle
ft
:
2
p
x
i
n
s
e
t
b
l
u
e
;
/
*
B
o
r
d
u
r
e
b
le
u
e
d
e
2
p
x
a
v
e
c
e
ff
e
t
3
D
"
e
n
f
o
n
c

158
Type
Bordure en haut
Bordure droite
Bordure en bas
Mga-proprit de
bordure
Proprit
Valeurs possibles
border-top Idem
border-right Idem
borderIdem
bottom
Indiquera l'apparence des bordures en haut, droite, en
border
bas et gauche.
159
Proprits de positionnement et d'affichage

Affichage
Type
Proprit
Type d'lment display
Affichage
Afficher
seulement une
partie
Valeurs possibles
none : l'lment ne sera pas affich
block : l'lment devient de type "block" (bloc, comme <p>)
inline : l'lment devient de type "inline" (en ligne, comme
<strong>)
list-item : l'lment devient de type "lment de liste puce"
(comme <li>)
hidden : masqu
visible : visible (par dfaut)
visibility display:none; fait compltement disparatre l'lment, tandis que

visibility:hidden; masque l'lment, qui continue quand mme
prendre de la place sur l'cran.
clip
Indiquer 4 valeurs comme ceci :
Code : CSS
160
Type
Proprit
Valeurs possibles
1
cl
i
p
:
r
e
c
t(
v
al
e
u
r
1
,
v
al
e
u
r
2
,
v
al
e
u
r
3
,
v
al
e
u
r
4
);
Limiter les
dimensions
Cela permet de n'afficher qu'une partie d'un lment. rect()

permet d'indiquer les coordonnes du rectangle qui sera affich.
Les valeurs 1 4 correspondent respectivement aux coins haut,
droite, bas et gauche du rectangle.
overflow visible : tout l'lment sera affich (par dfaut).
hidden : l'lment sera coup s'il dpasse les limites dfinies par
height et width. On ne pourra pas voir la partie du texte coupe.
scroll : tout comme hidden, l'lment sera coup s'il dpasse les
limites. Toutefois, cette fois le navigateur ajoutera des barres de
dfilement pour qu'on puisse voir la suite du texte.
auto : c'est le navigateur qui dcide d'ajouter des barres de
dfilement ou pas en fonction des cas. Bien souvent, utiliser
161
Type
Proprit
Valeurs possibles
cette valeur revient utiliser la valeur "scroll".
162
Positionnement
Type
Proprit
Valeurs possibles
left : flottant gauche

right : flottant droite
none : pas de flottant (par dfaut)
left : supprime l'effet d'un flottant gauche prcdent
right : supprime l'effet d'un flottant droite prcdent
Stopper un flottant clear
both : supprime l'effet d'un flottant prcdent, qu'il soit
gauche ou droite
none : pas de suppression de l'effet du flottant (par dfaut)
absolute : position absolue par rapport au coin en haut
gauche
fixed : position fixe (fonctionne comme la position absolue).
Type de
L'lment reste sa position mme quand on descend plus
position
positionnement
bas dans la page.
relative : position relative, par rapport la position "normale"
de l'lment
static : positionnement normal (par dfaut)
Position par rapport
Valeur en px, %, em... A utiliser pour un positionnement
top
au haut
absolu, fixe ou relatif.
bottom Idem
au bas
left
Idem
gauche
right
Idem
droite
En cas de positionnement absolu par exemple, si 2 lments
se chevauchent, z-index permet d'indiquer quel lment doit
tre affich au-dessus de l'autre.
Indiquez un nombre. Plus ce nombre est lev, plus l'lment
Ordre d'affichage z-index sera affich en avant.
Flottant
float
Par exemple, si vous avez 2 lments positionns en absolus

avec un z-index de 10 pour l'un et de 20 pour l'autre, c'est
celui qui a un z-index de 20 qui sera affich par-dessus.
163
Proprits des listes

Type
Proprit
Valeurs possibles
Pour les listes non ordonnes (<ul>) :
o
o
o
o
Type de liste
disc : un disque noir (par dfaut).

circle : un cercle.
square : un carr.
none : aucune puce ne sera utilise.
Pour les listes ordonnes (<ol>) :
list-styletype
o
o
o
o
o
o
decimal : des nombres 1, 2, 3, 4, 5... (par dfaut)

decimal-leading-zero : des nombres
commencelant par zro (01, 02, 03, 04, 05...).
upper-roman : numrotation romaine, en
majuscules (I, II, III, IV, V...)
lower-roman : numrotation romaine, en
minuscules (i, ii, iii, iv, v...)
upper-alpha : numrotation alphabtique, en
majuscules (A, B, C, D, E...)
lower-alpha : numrotation alphabtique, en
minuscules (a, b, c, d, e...)
lower-greek : numrotation grecque.

inside : sans retrait
outside : avec retrait (par dfaut)
Indiquer l'url de l'image qui servira de puce. Exemple :
o
Position en
retrait
Puce
personnalise
list-styleposition
list-styleimage
Code : CSS
164
Type
Proprit
Valeurs possibles
1
li
st
st
yl
e
i
m
a
g
e
:
u
rl
("
i
m
a
g
e
s
/
p
u
c
e
.
p
n
g
")
;
Mga-proprit list-style
de liste
Vous pouvez runir les valeurs de list-style-type, list-styleposition et list-style-image. Vous n'tes pas obligs de mettre
toutes les valeurs, et l'ordre n'a pas d'importance.
Exemple :
Code : CSS
165
Type
Proprit
Valeurs possibles
1
li
st
st
yl
e
:
i
n
si
d
e
s
q
u
a
r
e
;
166
Proprits des tableaux

Type
Type de
bordure
Proprit
bordercollapse
Cellules vides empty-cells
Position du
titre
caption-side
Valeurs possibles
collapse : les bordures du tableau et des cellules sont
mlanges.
separate : les bordures du tableau et des cellules sont
spares (par dfaut).
show : les bordures des cellules vides sont affiches.
collapse : les cellules vides sont masques (par dfaut).
Indique la position du titre du tableau, dfini via la balise
<caption>
top : en haut du tableau
bottom : en bas du tableau
left : gauche du tableau
right : droite du tableau
167
Autres proprits
Type
Curseur de
souris
Proprit
cursor
Valeurs possibles
auto : curseur automatique (par dfaut)
default : curseur standard
pointer : curseur en forme de main, comme quand on pointe sur un
lien
text : curseur utilis quand on pointe sur du texte
wait : curseur utilis pour indiquer une attente (sablier)
progress : curseur utilis pour indiquer une tche de fond (curseur
avec sablier)
help : curseur en forme de point d'interrogation, indiquant une aide
move : curseur en forme de croix, indiquant un dplacement
possible
n-resize : flche vers le nord
ne-resize : flche vers le nord-est
e-resize : flche vers l'est
se-resize : flche vers le sud-est
s-resize : flche vers le sud
sw-resize : flche vers le sud-ouest
w-resize : flche vers l'ouest
nw-resize : flche vers le nord-ouest
url : curseur personnalis, de type .cur ou .ani. Exemple :
Code : CSS
168
Type
Proprit
Valeurs possibles
1
c
u
r
s
o
r:
u
rl
("
i
m
a
g
e
s
/
c
u
r
s
e
u
r.
c
u
r
")
;
Vous devez utiliser un logiciel ddi la cration de curseurs pour

crer des .cur et des .ani
Vous pourrez remarquer que tous les proprits CSS ne sont pas recenses. Ce rcapitulatif
est titre indicatif. En effet, le but n'tait pas de faire la liste complte mais plutt de vous
fournir un support lorsque vous codez en CSS.
169
Webographie
Ce cours est compil partir des sites :
http://commentcamarche.net
http://siteduzero.com
http://elitwork.com
170

COXHTML New2-2007

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

COXHTML New2-2007

Cargado por

Copyright:

Formatos disponibles

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

NOTION DE XHTML ET CSS

Respectez la smantique !..................................................................................................................................58

Mthode A : dans un fichier .css (le moyen le plus recommand),

Voici une description de chacune de ces techniques :

title : c'est le nom que vous donnez votre feuille de style.

Directement dans le header du fichier XHTML (Mthode B) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Cette seconde mthode ressemble beaucoup la premire. Cependant, la premire solution

1 <h1 style="/* Votre style pour cette balise ici */">Titre</h1>

3. Appliquer un style des balises

Schmatiquement, une feuille de style CSS ressemble cela :

Vous reprez sur ce schma les balises, proprits et valeurs.

On ouvre le fichier exemple.html (on n'ouvre jamais directement un fichier .css) :

4. Appliquer un style plusieurs balises

5. Des commentaires dans du CSS

color: blue; /* Les paragraphes seront bleus */

6. Utiliser les class et id

Nous allons voir les choses suivantes dans l'ordre :

Que met-on comme valeur l'attribut class ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

Ce qui nous donnerait le CSS suivant :

7. Les balises universelles

Vous pouvez aussi mlanger des balises et des class :

9. Formatage du texte en CSS (partie 1/2)

Voici un exemple d'utilisation

x-large : trs grand

Voici un exemple de CSS qui utilise des valeurs relatives :

Ainsi, on peut crire :

left : le texte sera align gauche (c'est le rglage par dfaut).

Regardez les diffrents alignements sur cet exemple :

word-spacing : l'espace entre les mots (en pixels).

10. Formatage du texte en CSS (partie 2/2)

italic : le texte sera mis en italique.

bold : le texte sera en gras.

Les majuscules en CSS

small-caps : le texte sera crit en petites capitales.

uppercase : tout le texte sera crit en majuscules.

Ce CSS va vous permettre de tester les effets de text-decoration :

Au passage, voici le XHTML qui va avec :

<h1>A ne pas manquer !</h1>

11. Les couleurs

Indiquer le nom de la couleur

Voici le CSS de test :

... et la page XHTML qui va avec :

Les textes importants en rouge clignotant...

Ainsi, #000000 correspond la couleur noire et #FFFFFF la couleur blanche.

5. On relve les quantits de Rouge-Vert-Bleu correspondantes indiques en bas droite de la

Les fonds comportant une couleur

fixed : l'image de fond reste fixe.

pour combiner les valeurs et rendre le fichier CSS plus petit :

12. Des liens sympas

Nous allons apprendre modifier l'apparence des liens :

... lorsque le visiteur pointe dessus avec la souris.

... lorsque le visiteur clique dessus.

":hover" signifie "Dessus".

a:active /* Quand le visiteur clique sur le lien */

Lorsque le lien est slectionn

a:focus /* Quand le visiteur slectionne le lien */

Vous le voyez : le lien garde sa couleur de fond un peu plus longtemps.

Quand la page a dj t vue...

a:focus /* Quand le visiteur slectionne le lien */

Premire lettre et premire ligne modifies