,

Programmation Web HTML/CSS

Rémy Malgouyres
LIMOS UMR 6158, IUT, département info
Université Clermont 1
B.P. 86
63172 AUBIERE cedex
http://malgouyres.org/

Tous mes cours sur le Web sont sur le Web :

Cours de programmation WEB sur les documents hypertexte HTML/CSS :

http://malgouyres.org/programmation-html-css

Tutoriel sur le CMS Drupal :

http://malgouyres.org/tutoriel-drupal

Cours de programmation WEB côté serveur en PHP :

http://malgouyres.org/programmation-php

Cours de programmation WEB côté client en JavaScript :

http://malgouyres.org/programmation-javascript

Cours sur l’administration de serveurs (Serveurs WEB avec apache, SSL,

LDAP...) :

http://malgouyres.org/administration-reseau
Table des matières

Table des matières 1

1 Pages web statiques HTML5 2

1.1 HTML, la norme et son évolution . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Validation W3C et tests de portabilité . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Structure d’un document HTML ou XHTML . . . . . . . . . . . . . . . . . . . 4
1.4 Premier document HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 Structure du texte en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.6 Mise en forme du texte HTML : st yles CSS . . . . . . . . . . . . . . . . . . . 7
1.7 Formes d’inclusion de styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.8 Liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.9 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.10 Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.11 Figures et sous-figures avec . . . . . . . . . . . . . . . . . . . . . . . . 24
légende
1.12 Caractères spéciaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2 Styles CSS et mise en page 27

2.1 Éléments HTML de type block et inline..........................................................................27
2.2 Distinguer des parties dans un document : balise div...................................................31
2.3 Imbrication des balises et CSS.........................................................................................32
2.4 Arborescence de balises et CSS........................................................................................34
2.5 Classes CSS........................................................................................................................36
2.6 Sélecteurs de style CSS par ID.........................................................................................42
2.7 Marges et bordures.............................................................................................................45
2.8 Positionnement absolu.......................................................................................................46
2.9 Positionnement relatif........................................................................................................48
2.10 Structuration d’une page en HTML5...............................................................................50
2.11 Exemples de mise en page................................................................................................52
2.12 CSS adaptatifs : Media Queries.......................................................................................58

1
 Chapitre 1

Pages web statiques HTML5

1.1 HTML, la norme et son évolution

Le langage HTML, ou Hyper Text Markup Language, permet de décrire et de mettre en forme des
documents variés, depuis du simple texte jusqu’à des documents multimédia riches avec la
définition d’HTML 5.
Une page HTML est en général destinée à être publiée sur le World Wide Web, où toutes
sortes de gens utilisent toutes sortes de navigateurs qui fonctionnent sous sdifférentes platte-
formes (Mac OS, ipad, Linux, Androïd, MS Windows, etc. pour citer les plus courants). Pour
que celà fonctionne, il a été nécessaire de définir un standard pour le langage HTML. C’est
le standard du World Wide Web Consortium, ou W3C. A noter le rôle déterminant qu’a joué
la libération du code source du navigateur Netscape par la société Netscape Communications
Corporation pour que la pluralité des acteurs n’évitent que les standards du web soient de fait
propriétaire.

1.2 Validation W3C et tests de portabilité

1.2.1 Validateur W3C
Lorsqu’on écrit une page web en HTML, pour être sûr que celle-ci soit correctement interprétée et
affichée par tous les navigateurs qui supportent correctement la norme, il faut valider cette
page pour s’assurer qu’elle est conforme à la norme. Le processus est similaire à l’analyse de
la syntaxe d’un programme par un compilateur et peut se faire en ligne en uploadant le fichier
ou en donnant son URL publique. Certains éditeurs proposent une validation interne ou même
à la volée.
Les scripts en PHP et autre ne peuvent pas être directement validés car ce sont en fait
des programmes. Par contre, leur sortie (ce qu’ils affichent) doit être du HTML conforme à la
norme.

2
Chapitre 1 : Pages web statiques HTML5

(a) L’upload d’un fichier HTML (b) Résultat correct sur le validateur W3C

FIGURE 1.1 : Le processus de validation d’un fichier HTML sur le validateur W3C

1.2.2 Tests de portabilité

Même pour un document validé, les navigateurs n’ont pas tous la même implémentation du
moteur d’analyse et de rendu du document, notamment en ce qui concerne les styles par dé-
faut. Pour cette raison, il est indispensable avant de publier un site web, de le tester sur le
plus possible de plate-formes et de navigateurs. Ceci peut être simplifié par des outils comme
VirtualBox (mais il en existe d’autres...), qui permettent en virtualisant de faire tourner si-
multanément plusieurs systèmes d’exploitation sur un même ordinateur. Par exemple, sur la
figure 1.2, on voit un exemples où l’affichage de la page est testé simultanément avec Internet
Explorer et Safari sous Windows, Firefox, Chrome et Opera sous linux et Chrome sous tablette
et smartphone Android. Le système Windows tourne en virtuel dans VirtualBox (disponible
dans la logitèque d’Ubuntu). et le serveur Web (Apache) est instalé en local sous Ubuntu. Les
systèmes Windows et Ubuntu sont connectés par un réseau local virtuel interne au système
hôte, en l’hoccurence Ubuntu. Notons que les navigateurs sur smartphones sont particulière-
ment capricieux car ils n’ont pas les ressources pour implémenter toutes les variantes, surtout
sur du code non validé.

3
Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

FIGURE 1.2 : Le processus de test de portabilité avec VirtualBox.

1.3 Structure d’un document HTML ou XHTML

Un document HTML ou XHTML doit comporter :

1. Sur la première ligne qui ne soit pas constituée d’un commentaire : le doctype qui
spécifie le type de document (HTML, XHTML et version). Ceci permet que le
navigateur puisse supporter et interpréter plusieurs formats de documents.

2. Une balise de début de description de document <html [+attributs]>.

3. Un en-tête compris dans une balise <head>...</head>.

4. Dans le header, une spécification de l’encoding ou charset : ISO-8859-1, latin1, et

mainte- nant systématiquement utf-8. Ce dernier est d’ailleurs le défaut utilisé lorsque
l’encoding n’est pas spécifié.

5. Dans le header, de manière optionnelle, une description du style de document (couleurs,

polices, tailles, etc.) au format CSS.

6. Un corps du document dans une balise <body>...</body>.

4
 Chapitre 1 : Pages web statiques HTML5

Par exemple, le document “Hello World !” en XHTML 1.0 strict se compose comme suit :

exemples/ChapitreHTML/ex01_helloWorldXhtml.html
1 /<!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0
Strict// EN ” ” h t t p ://www. w3 .
2 org/TR/xhtml1/DTD/xhtml1−strict . dtd ”>
3 <!−− Dé c l a r a t i o n du debut d’un document HTML avec l a langue : −−>
4 <html xml :lang=” en” lang=” en” xmlns=” h t t p ://www. w3 . org/ 1999 / xhtml ”>
5 <head> <!−− dé but de l ’ e n −t ê te HTML −−>
6 <!−− Dé c l a r a t i o n du type d’ encodage −−>
7 <meta http−equiv=” Content−Type” content=” t ext/ h tml ; charset=utf − 8 ”
8 />
9 <!−− Ti tr e de l a page dans l a f en ê t r e ou l ’ o n g l e t du
10 n a v i g a t e u r −−>
11 <t i t l e>My f i r s t XHTML 1 . 0 S t r i c t document</ t i t l e>
12 </head>
13 <body>
14 <p>H e l l o world !</p>

Le document “Hello World !” en HTML5 se compose comme suit :

exemples/ChapitreHTML/ex02_helloWorldHtml5.html
1 /<! doctype html>
2 <!−− D e c l a r a t i o n du debut d’un document HTML avec l a langue : −−>
3 <html lang=” f r ”>
4 <head>
5 <meta charset=”UTF−8” />
6 <!−− Dé c l a r a t i o n du type d’ encodage −−>
7 <!−− Ti tr e de l a page dans l a f en ê t r e ou l ’ o n g l e t du n a v i g a t e u r
8 −−>
9 <t i t l e>My f i r s t HTML 5 document</ t i t l e>
10 </head>
11 <body>
12 <p>
13 He l l o world !
14 </p>
15 </body>
</html>
Le XHTML 1.0 strict possède une syntaxe plus stricte que ses prédécesseurs, simplifiant le
travail des navigateurs et des moteurs de recherche. En particulier, toutes les balises sont en
minuscules et il y a obligation de fermer les balises, quitte à mettre une balise auto-fermante
comme <br/>. La norme HTML5 réintroduit un certain laxisme au niveau de la syntaxe mais
il est préférable pour la lisibilité du code de respecter la syntaxe XHTML 1.0 strict dans une
page HTML5.

1.4 Premier document HTML5

exemples/ChapitreHTML/ex03_corps_balises.html
1 /<! doctype html>
2 <!−− D e c l a r a t i o n du debut d’un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Vo i c i l ’ e n − te te qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de
5 l a page −−>

5
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

6 <!−− d e c l a r a t i o n de l ’ e n c o d a g e pour l e s a c c e n ts . . . −−>

7 <meta charset=”UTF−8” />
8 <!−− Ti tr e de l a page ( a u s s i t i t r e de l a f en ê t r e du n a v i g a t e u r )
9 −−>
10 <t i t l e>Premières b a l i s e s HTML</ t i t l e>
11 </head>
12 <body> <!−− dé but du corps HTML −−>
13 <h1>Mon premier f i c h i e r HTML</h1>
14 <p> <!−− Nouveau paragraphe ( saut de l i g n e ) −−>
15 Ceci e s t mon premier f i c h i e r HTML. <br /> <!−− à l a l i g n e −−>
16 Le ” body” repr é s e n te l e corps du document ,
17 dans l e q u e l on met l e te x te à a f f i c h e r .
18 </p> <!−− Fin de paragraphe −−>
19 <p>
20 Le header ( b a l i s e ” head” ) dé f i n i t l e s p r o p r i é t é s g l o b a l
21 e s du document , t e l l e s que l ’ e n c o d a g e , l e t i t r e de l a
22 page et des é l é ments de style .
23 </p>
</body> <!−− f i n du corps HTML −−>

1.5 Structure du texte en HTML

exemples/ChapitreHTML/ex04_structure_document.html
1 /<! doctype html>
2 <!−− D e c l a r a t i o n du debut d’un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Vo i c i l ’ e n − te te qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de
5 l a page −−>
6 <head> <!−− debut de l ’ e n − te te HTML −−>
7 <!−− d e c l a r a t i o n de l ’ e n c o d a g e pour l e s a c c e n ts . . . −−>
8 <meta charset=”UTF−8” />
9 <!−− Ti tr e de l a page ( a u s s i t i t r e de l a f en ê t r e du n a v i g a t e u r )
10 −−>
11 <t i t l e>S tr u c tu r e d’un document HTML</ t i t l e>

6
 Chapitre 1 : Pages web statiques HTML5

12 <h1>S tr u c tu r e d’un document HTML</h1>

13 <p>
14 HTML e s t un langage de d e s c r i p t i o n de documents
15 non WISIWIG, c ’ e s t à d i r e que l e f i c h i e r sour ce ne
16 r e s s e m b l e pas vraiment au document t e l que l ’ u t i l i s a
17 t e u r f i n a l l e verra .<br /> WISIWIG : <em>What You
18 See I s What You Get</em>.
19 </p>
20 <p>
21 En HTML, l e s <em>b a l i s e s</em>, qui sont encadr é es par des &l t ;
et &gt ; ,
22 <strong>d é f i n i s s e n t l a s t r u c t u r e du document</s trong> en c
23 a r a c t é r i s a n t d i f f é r e n te s
p a r t i e s du document ( t i t r e s , paragraphes , tableaux , é l ément
24 important ,
25 l i s t e à puces , images , o b j e t s de type vid é o f l a s h , multim é dia
26 pour <em>
27 HTML5</em>, e tc .
</p>
28 <p>
29 Par exemple , l a b a l i s e &l t ; p&gt ; &l t ; /p&gt ; dé l i m i t e un
30 paragraphe . Un couple de b a l i s e s avec du te x te antre l e s b a l i s
31 e s s ’ a p p e l l e un

1.6 Mise en forme du texte HTML : styles CSS

exemples/ChapitreHTML/ex05_mise_en_forme_locale.html
1 /<! doctype html>
2 <!−− D e c l a r a t i o n du debut d’un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Vo i c i l ’ e n − te te qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de
5 l a page −−>
6 <head> <!−− debut de l ’ e n − te te HTML −−>
7 <meta charset=”UTF−8” /> <!−− D e c l a r a t i o n du type d’ encodage −−>
8 <!−− Ti tr e de l a page ( a u s s i t i t r e de l a f en ê t r e du n a v i g a t e u r )

7
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

9 </head>
10 <body style= ” font −family : Arial Verdana ; font−size : 125% ; width : 800 px ; ”> <!
−−
dé but du corps HTML −−>
11 <h1>Mise en forme CSS l o c a l e</h1>
12 <p style= ” text−align : j u s t i f y ; ”>
13 Le style <em>CSS</em> des é l é ments permet l a mise en forme ( position , t a i
lle
, couleur , p o l i c e , bordure , . . . )
14 d’un é l ément et de son contenu .
15 </p>
16 <p style= ” text−align : j u s t i f y ; ”>
17 Un te x te j u s t i f i é e s t un te x te dont l e bord d r o i t e s t align é avec l e
bord
d r o i t de l a
18 bo î te englobant l e te x te . La p r o p r i é t é <em>CSS</em>
<code>text−align</code
> permet de
19 g é r e r l ’ a l i g n e m e n t ( j u s t i f i é , d r o i t , gauche , c e n tr é ) du
te x te dans un é l é ment .
20 </p>
21 <p style= ” text−align :center ”>
22 La p r o p r i é t é <code>font−weight</code> permet de mettre des
<span style= ” font−weight :bold ; ”>é l é ments en gras</span>
23 ou <span style= ” font−weight :b o l der ; ”>en t r è s gras</span>.
24 <br />
25 La p r o p r i é t é <code>font −variant</code> permet de mettre des
<span style= ” font −variant :small − caps ; ”>é l é ments en p e t i t e s
c a p i t a l e s</span>.
26 <br />
27 La p r o p r i é t é <code>font −style</code> permet de mettre des
<span style= ” font −style : i t a l i c ; ”>é l é ments en i t a l i q u e
s</span>
28 <br />
29 <strong>Ces p r o p r i é t é s ne doivent pas ê t r e confondues avec l e s
8
 Chapitre 1 : Pages web statiques HTML5

b a l i s e s &l t ; s tro ng&gt ; , &l t ; em&g t ; , e tc . qui dé f i n i s s e n t

30 l a s t r u c t u r e du document ( é l é ments importants , à s o u l i g n e r , e tc . . .
)</s trong>
31 </p>

9
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

32 </body> <!−− f i n du corps HTML −−>

33 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex06_mise_en_forme_globale.html
1 /<! doctype html>
2 <!−− D e c l a r a t i o n du debut d’un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Vo i c i l ’ e n − te te qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de
5 l a page −−>
6 <head>
7 <meta charset=” utf − 8 ” /> <!−− D e c l a r a t i o n du type d’ encodage −−>
8 <s tyle>
9 /* Dé f i n i t i o n du s t y l e */
10 body {
11 font −family : Ar i a l Verdana ;
12 font−size : 125% ;
13 width : 800 px ;
14 }
15 p {
16 text−align : j u s t i f y ;
17 }/* mise en forme des paragraphes */
18 /* mise en forme du t i t r e */
19 h1 {
20 text−align : c e n te r ;
21 font−size : 150% ;

10
 Chapitre 1 : Pages web statiques HTML5

22 /* mise en forme é l é mentt important l e s 120% sont r e l a t i f au c o n t e x t e

*/
23 s trong {
24 font −variant : small−caps ;
25 font−size : 120% ;
26 }
27 </s tyle>
28 <t i t l e>S t y l e s CSS globaux</ t i t l e>
29 </head>
30 <body> <!−− dé but du corps HTML −−>
31 <h1>Mise en forme CSS g l o b a l e</h1>
32 <p>
33 I l peut ê t r e f a s t i d i e u x de g é r e r à chaque b a l i s e l ’ a s p e c
t du te x te ou l e graphisme .
34 De plus , une dé f i n i t i o n g l o b a l e du style de l a page e s t plus
modulaire ( un s e u l e n d r o i t
35 à m o d i f i e r pour changer tous l e s s t y l e s des b a l i s e s d’un même type .
36 Pour c e t t e raison , <strong>on peut dé f i n i r l e style <em>CSS</em>
globalement</s trong> via une b a l i s e &l t ; style&gt ;
37 au niveau de l ’ e n −t ê te (& l t ; head&gt ; ) .
38 </p>
39 <p>
40 Si l ’ o n s o u h a i te changer l ’ a s p e c t des é l é ments s t r u c t u r e l s , par
exemple
41 dont l ’ i m p o r ta n c e e s t s o u l i g n é e avec
42 &l t ; s trong&gt ; &l t ; / s trong&gt ; ,
43 on l e dé f i n i t au niveau du style g l o b a l .
44 </p>
45 <p>
46 On peut a i n s i dé f i n i r l e s s t y l e s typographiques ( font e , . . . ) et l a
mise
47 en page ( alignement à gauche , à d r o i te , j u s t i f i é , e tc . ) du te x te
48 dans l e s d i f f é r e n t s é l é ments d’une page HTML au niveau de l ’ e n − t ê te .
49 </p>
50 <p>
51 Enfin , s i l ’ o n s o u h a i te changer l e style l o c a l e m e n t pour dé c o r e r
52 sans q u ’ i l s ’ a g i s s e d’un é l ément s t r u c t u r e l , on peut <strong style=
” font
−variant :normal ; ”>s u r c h a r g e r l e style g l o b a l</s trong>
53 l ocalement .
54 On peut a u s s i u t i l i s e r<span style= ” font −family :Comic Sans MS;
font−size
:150%”> l a b a l i s e g éné r i q u e &l t ; span&gt ;& l t ; /span&gt ; . </span>
55 pour m o d i f i e r l o c a l e m e n t l ’ a s p e c t du te x te sans m o d i f i e r l a s t r u c
ture.
56 </p>
57 </body> <!−− f i n du corps HTML −−>
58 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex07_couleurs.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />
5 <s tyle>
/* Dé f i n i t i o n du s t y l e */
body { 11
font−size : 125% ;
background−color : #c 0 c 0 c 0 ; /* font e par dé f aut */
color : #333333 ;
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

6
7
8
9
10
11

12
 Chapitre 1 : Pages web statiques HTML5

12 }
13 p {
14 text−align : j u s t i f y ;
15 }/* mise en forme des paragraphes */
16 /* mise en forme du t i t r e */
17 h1 {
18 text−align : c e n te r ;
19 font−size : 150% ;
20 background−color : #ddd ;
21 border −style : s o l i d ;
22 border−color : black ;
23 border−width : 2px ;
24 }
25 /* mise en forme é l é mentt important l e s 120% sont r e l a t i f au c o n t e x t e
*/
26 s trong {
27 background−color : white ;
28 color : black ;
29 font−weight : b o l d e r ;
30 }
31 </s tyle>
32 <t i t l e>Dé f i n i t i o n des c o u l e u r s</ t i t l e>
33 </head>
34 <body>
35 <h1> Dé f i n i t i o n des c o u l e u r s dans dans un style CSS </h1>
36 <p>
37 Dans l e style CSS , on peut a u s s i dé f i n i r l e s c o u l e u r s des d i f f é r e n
ts
38 é l é ments .
39 </p>
40 <p>
41 Les s i t e s web ont en g éné r a l une <strong>c h a r te graphique</s trong>
qui
42 comprend un p e t i t nombre de c o u l e u r s bien harmonis é es qui s y m b o l i s e n t
bien
43 l ’ e n t i t é que repr é s e n te l e s i t e .
44 </p>
45 <p>

13
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

46 Dans l e s e n t r e p r i s e s , ce sont souvent des personnes d i f f é r e n te s qui

47 s ’ o c c u p e n t du style CSS ou qui s ’ o c c u p e n t du contenu et des f o n c t i
onalités
48 du s i t e .
49 </p>

14
 Chapitre 1 : Pages web statiques HTML5

50 </body>
51 </html>

1.7 Formes d’inclusion de styles CSS

Il y a essentiellement 3 manières de modifier le style graphique des différents éléments d’une
page HTML en utilisant CSS :

1. Au niveau des balises HTML avec l’option style="..." (style CSS local) ;

2. Au niveau du header de la page HTML avec la balise <style type="text/css"> (style

CSS global) ;

3. En incluant une feuille de style qui se trouve dans un fichier .css séparée avec la balise
<link/> au niveau du header HTML (style CSS global pouvant être inclus dans plusieurs
pages d’un même site) :

<link rel="stylesheet" href="./my_style.css" />

Cela permet de définir son style CSS globalement pour tout un site, de manière que
toutes les pages aient le même style graphique. Du fait que le style CSS est défini à un
seul endroit, la maintenance est plus facile : il n’y a qu’un seul endroit à changer pour
modifier l’aspect de tout le site.

4. En ajoutant une feuille de style complémentaire au niveau du header HTML avec la di-
rective CSS import url (style CSS global additionnel pouvant être inclus dans plusieurs
pages d’un même site) :

<style>
@import url(./my_extra_style.css);
</style>

Cela permet d’ajouter plusieurs feuilles de style à une même page, ce qui augmente la
souplesse de l’organisation des styles CSS.

Pour le dernier exemple (sur les couleurs) de la partie 1.6, on peut par exemple obtenir la
même chose en incluant le style CSS dans une feuille de style séparée :
exemples/ChapitreHTML/ex08_css_stylesheet_couleur.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>F e u i l l e s de S ty l e <i>CSS</ i></ t i t l e>
7 </head>
8 <body>
9 <h1> Cré er une f e u i l l e de style CSS </h1>
10 <p>

15
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

11 Le style <i>CSS</ i> peut ê t r e dé f i n i dans un f i c h i e r <code>. c s

s</code> s é
12 par é
13 du f i c h i e r <i>HTML</ i>.
14 </p>
15 <p>
16 Cel à permet d’augmenter l a modularit é du code d’un s i t
17 e web car l e style <i>CSS</ i> de to u te s l e s page s d’un
18 même s i t e peut ê t r e dé f i n i à un s e u l e n d r o i t .
19 </p>
20 <p>
21 S ’ i l f a u t changer l e style d’un c e r t a i n type de b a l i s e s dans
22 tout l e s i t e , i l n’ y a qu’un s e u l e n d r o i t à changer . ;−)
</p>
23
</body>
24
</html>

exemples/ChapitreHTML/myStyle.css
1 /* Dé f i n i t i o n du s t y l e */
2 body {
3 font −family : Ar i a l Verdana ;
4 font−size : 125% ; /* f a c t e u r d ’ é v h e l l e sur l a t a i l l e g l o b a l
e de l a p o l i c e
5 */
6 background−color : #c 0 c 0 c 0 ; /* font e par dé f aut */
7 color : #333333 ; /* c o u l e u r du t e x t e g l o b a l e */
8 }
9 /* mise en forme des paragraphes */
10 text−align : j u s t i f y ; /* t e x t e j u s t i f i é dans l e s
11 } paragraphes */
12 /* mise en forme du t i t r
13 e */
h1
14 { text−align : c e n te r ; /* t e x t e
15 font−size
centr é */ : 150% ; /* f a c t e u r d ’ é c h e l l e de l a p
16 background−color
o l i c e */ : #ddd ; /* c o u l e u r du
border*/−style : s o l i d ; /* bordure en t r a i t p l
fond
17 e i n */ border−color : black ; /* c o u l e u r du bord
18 */ border−width : 2px ; /* é p a i s s e u r du bord */
19 border−r a d i u s : 10 px ; /* bordure a r r o n d i e
*/
20
}
21
/* mise en forme é l é mentt important l e s 120% sont r e l a t i f au
22
c o n t e x t e */
16
 Chapitre 1 : Pages web statiques HTML5

23 s trong
24 { color : black ; /* t e x t e noir
25 font−weight
*/ : b o l d e r ; /* e x t r a gras */
26 font −variant : small−caps ; /* p e t i t e s c a p i t
27 } a l e s */

Dans la suite ce ce chapitre, nous inclurons dans toutes les pages HTML la feuille de style
de ce dernier exemple.

1.8 Liens

exemples/ChapitreHTML/ex09_liens.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>Liens hypertexte</ t i t l e>
7 </head>
8 <body>
9 <!−− dé but du corps HTML −−>
10 <h1>L i ens hypertexte</h1>
11 <div>
12 <strong>On peut cr é er d i f f é r e n t s types de l i e n s :</s trong>
13 <u l>
14 <!−− l i s t e à puces −−>
15 <l i>
16 l i e n s h y p e r t e x t e en r e l a t i f : <a href=” . /ex_images . html ”
>c l i q u e z i c i<
17 /a>.

17
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

18 <l
19 i> l i e n s h y p e r t e x t e en absolu : <a href=” h t t p ://www.
remysprogwebtuto
org/ exemples/ html/ . ex_images . html ” > c l i q u e z
20 </ l i c i</a>.
21 i>
<l
22 i> l i e n s ve r s une ancre ve r s un autre emplacement dans l a page
: <a”#monParagraphe”
href= >Voir l e deuxième
23 </ l paragraphe</a>
24 i>
25 </</u l>
26 div>
<p id=” monParagraphe” style= ” font−size : 150% ; font−weight :
27 b o l d e r ; ”>
28 Pour f a i r e des l i e n s ve r s l e s i t e même, i l vaut to u j o u
29 r s mieux
30 u t i l i s e r des l i e n s en r e l a t i f s car s i on démé nage
31 l e s i t e ( ou s i on r é cupère c e r t a i n e s c l a s s e s ) , l e
32 s l i e n s ne c a s s e n t pas .
33 ( à c o n d i t i o n de garder l ’ a r b o r e s c e n c e des r é p e r t o i r
34 es telle quelle)
35 <br />
36 &Eacute ; v i t e z l e s chemins du genre :
37 <br />
38 <code>
39 ”C :/ j e/ tourne/ pas/ sur/ un/ serveur/ l inux . html ”</code>
40 </p>

exemples/ChapitreHTML/ex10_liens_mise_en_forme.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />

18
 Chapitre 1 : Pages web statiques HTML5

5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />

6 <s tyle>
7 /* s t y l e par dé f aut des l i e n s */
8 a : l ink {
9 text−decoration : none ;
10 color : #00e ; /* b l eu c l a i r */
11 }
12 /* s t y l e des l i e n s v i s i t é s */
13 a:visited {
14 text−decoration : none ;
15 color : #c 0 c ; /* mauve */
16 }
17 /* s t y l e des l i e n s v i s i t é s */
18 a :hover {
19 text−decoration : u n d e r l i n e ; /* s o u l i g n é */
20 color : #e40 ; /* rouge v i f */
21 }
22 </s tyle>
23 <t i t l e>Liens h y p e r t e x t e ( 2 )</ t i t l e>
24 </head>
25 <body>
26 <!−− dé but du corps HTML −−>
27 <h1>Mise en forme des l i e n s hypertexte</h1>
28 <div>
29 <strong>On peut cr é er d i f f é r e n t s types de l i e n s :</s trong>
30 <u l>
31 <!−− l i s t e à puces −−>
32 <l i>
33 l i e n s h y p e r t e x t e en r e l a t i f : <a href=” . /ex_images . html ” >c l i q u e z
i c i<
/a>.
34 </ l i>
35 <l i>
36 l i e n s h y p e r t e x t e en absolu : <a href=” h t t p ://www.
remysprogwebtuto . org/ exemples/ html/ ex_images . html ” > c
l i q u e z i c i</a>.
37 </ l i>
38 <l i>
39 l i e n s ve r s une ancre ve r s un autre emplacement dans l a page : <a
href=
”#monParagraphe” >Voir l e deuxième paragraphe</a>
40 </ l i>
41 </u l>
42 </div>
43 <p id=” monParagraphe” style= ” font−size : 150% ; font−weight : b o l d e r ; ”>
44 Pour f a i r e des l i e n s ve r s l e s i t e même, i l vaut to u j o u r s mieux
45 u t i l i s e r des l i e n s en r e l a t i f s car s i on démé nage l e s i t e ( ou
46 s i on r é cupère c e r t a i n e s c l a s s e s ) , l e s l i e n s ne c a s s e n t pas .
47 ( à c o n d i t i o n de garder l ’ a r b o r e s c e n c e des r é p e r t o i r e s t e l l e q u
elle)
48 <br />
49 &Eacute ; v i t e z l e s chemins du genre :
50 <br />
51 <code>
52 ”C :/ j e/ tourne/ pas/ sur/ un/ serveur/ l inux . html ”</code>
53 </p>
54 </body>
19
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

55 <!−− f i n du corps HTML −−>

56 </html>
57 <!−− f i n du code HTML −−>

20
 Chapitre 1 : Pages web statiques HTML5

1.9 Tableaux

exemples/ChapitreHTML/ex11_tableaux.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>Tableaux en HTML</ t i t l e>
7 </head>
8 <body>
9 <!−− dé but du corps HTML −−>
10 <h1>Tableaux en HTML 5</h1>
11
12 <p>
13 Vo i c i une ta b l e avec l e style par dé f a u t . Le rendu e s t un peu
14 sommaire .
15 </p>
16 <table>
17 <caption> <!−− Lé gende ( t i t r e ) de l a ta b l e −−>
18 Exemple de ta b l e sans mise en forme
19 </caption>
20 <tbody><!−− corps de l a ta b l e −−>
21 <tr><!−− n o u v e l l e l i g n e −−>
22 <td><!−− n o u v e l l e case −−>
23 Ceci e s t l a case<br />d’ en haut à gauche
24 </td>
25 <td><!−− n o u v e l l e case −−>
26 Ceci e s t l a case<br />d’ en haut au m i l i e u
</td>
27
28 <td><!−− n o u v e l l e case −−>
Ceci e s t l a case<br />d’ en haut à d r o i t e
29
</td>
30
</ tr>
31
<tr> <!−− n o u v e l l e l i g n e −−>
32
<td><!−− n o u v e l l e case −−>
33
Ceci e s t l a case<br />d’ en bas à gauche
34 </td>
35
<td><!−− n o u v e l l e case −−>
36
21
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

37 </td>
38 <td><!−− n o u v e l l e case −−>
39 Ceci e s t l a case<br />d’ en bas à d r o i t e
40 </td>
41 </ tr>
42 </tbody>
43 </table>
44 </body><!−− f i n du corps HTML −−>
45 </html>
46 <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex12_tableaux_th.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>Tableaux en HTML ( 2 )</ t i t l e>
7 </head>
8 <body>
9 <!−− dé but du corps HTML −−>
10 <h1>Tableaux : en−tê te de l i g n e s et de c o l o n n e s</h1>
11
12 <p>
13 Vo i c i une ta b l e avec l e style par dé f a u t et avec des en−tê l e
( t i t r e s ) de l i g n e et colonne .
</p>
14
<table>
15
<caption>
16
Exemple de ta b l e sans mise en forme
17
</caption>
18
<thead><!−− En−tê te de l a ta b l e −−>
19
<tr><!−− n o u v e l l e l i g n e ( l i g n e de t i t r e s de c o l o n n e s ) −−>
20
<th ></th><!−− case vide en haut à gauche −−>
21
<th ><s trong>Colonne 1</s trong></th>
22
<th><s trong>Colonne 2</s trong></th>
23
22
 Chapitre 1 : Pages web statiques HTML5

24 <th><s trong>Colonne 3</s trong></th>

25 </ tr>
26 </thead>
27 <tbody><!−− corps de l a ta b l e −−>
28 <tr> <!−− n o u v e l l e l i g n e −−>
29 <th ><!−− t i t r e de l i g n e −−>
30 <strong>l i g n e&nbsp ; 1</s trong>
31 </th>
32 <td><!−− n o u v e l l e
33 case −−> Ceci e s t l a
case<br /> d’ en haut à
34
gauche
35 </td>
36 <td><!−− n o u v e l l e
37 case −−> Ceci e s t l a
38 case<br /> d’ en haut
39 au m i l i e u
40 </td>
41 <td><!−− n o u v e l l e
42 case −−> Ceci e s t l a
43 case<br /> d’ en haut à
droite
44
</td>
45
</ tr>
46
<tr><!−− n o u v e l l e l i g n e −−>
47
<th><!−− t i t r e de l i g n e −−>
48
<strong>l i g n e&nbsp ; 2</s trong>
49
</th>
50 <td><!−− n o u v e l l e
51 case −−> Ceci e s t l a
52 case<br /> d’ en bas à
53 gauche
54 </td>
55 <td><!−− n o u v e l l e
56 case −−> Ceci e s t l a
57 case<br /> d’ en bas au
58 milieu
</td>
59
<td><!−− n o u v e l l e
60 case −−> Ceci e s t l a
61 case<br /> d’ en bas à
62 droite
63 </td>
64 </ tr>
65 </tbody>
66 </table>

exemples/ChapitreHTML/ex13_tableaux_mise_en_forme.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <s tyle>
7 @import u r l ( . / ex 13 _ s t y l e s h e e t _ t a b l e a u x . c s s ) ;
8 </s tyle>
9 <t i t l e>Tableaux en HTML ( 3 )</ t i t l e>
</head>
23
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

10

24
 Chapitre 1 : Pages web statiques HTML5

11 <body>
12 <!−− dé but du corps HTML −−>
13 <h1>Tableaux : mise en forme</h1>
14 <table>
15 <caption>
16 Exemple de ta b l e avec mise en forme
17 </caption>
18 <thead><!−− En−tê te de l a ta b l e −−>
19 <tr><!−− n o u v e l l e l i g n e ( l i g n e de t i t r e s de c o l
o n n e s ) −−>
20 <th style= ”border − radius : 10 px 0 0 0 ”></th><!−− en haut à
case vide
gauche −−>
21 <th >Colonne 1</th>
22 <th>Colonne 2</th>
23 <th style= ”border − radius : 0 10 px 0 0 ”>Colonne
3</th>
24 </ tr>
25 </thead>
26 <tbody><!−− corps de l a ta b l e −−>
27 <tr> <!−− n o u v e l l e l i g n e −−>
28 <th ><!−− t i t r e de l i g n e −−>
29 l i g n e&nbsp ; 1
30 </th>
31 <td><!−− n o u v e l l e case −−>
32 Ceci e s t l a case<br />
</td>
33 d’ en haut à gauche
34 Ceci e s t l a case<br />
35 <td><!−− n o u v e l l e case −−>
36
37 d’ en haut au m i l i e u
38 </td>
39 <td><!−− n o u v e l l e case −−>
40 Ceci e s t l a case<br />

25
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

43 </ tr>
44 <tr><!−− n o u v e l l e l i g n e −−>
45 <th style= ”border − radius : 0 0 0 10 px”><!−− t i t r e de l i g n e −−>
46 l i g n e&nbsp ; 2
47 </th>
48 <td><!−− n o u v e l l e case −−>
49 Ceci e s t l a case<br />
50 d’ en bas à gauche
51 </td>
52 <td><!−− n o u v e l l e case −−>
53 Ceci e s t l a case<br />
54 d’ en bas au m i l i e u
55 </td>
56 <td style= ”border − radius : 0 0 10 px 0 ”><!−− n o u v e l l e case −−>
57 Ceci e s t l a case<br />
58 d’ en bas à d r o i t e
59 </td>
60 </ tr>
61 </tbody>
62 </table>
63 <p>
64 <strong>Remarque .</s trong> La p r o p r i é t é <i>CSS</ i>
<code>border −radius</ code> permet de cr é er
65 des a n g l e s a r r o n d i s pour l e s bordures . E l l e peut se dé f i n i r
globalement
66 pour l e s 4 a n g l e s
( v o i r i c i l e style de l a b a l i s e &l t ; ta b l e&gt ; dans l a f e u i l l e
67 de style des tableaux )
du bord ou bien i n d i v i d u e l l e m e n t pour chaque angle ( v o i r i c i l
68 e s s t y l e s locaux sur &l t ; th&gt ; et &l t ; td&gt ; ) .
69 </p>
70 </body><!−− f i n du corps HTML −−>
71 </html>
<!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex13_stylesheet_tableaux.css
1 /** FEUILLE DE STYLE COMPLÉMENTAIRE POUR MISE EN FORME DES TABLEAUX **/
2 ta b l e { /* mise en forme des t a b l e s */ s
3 background−color : #ddd ; /* fond g r i s */
4 /* Paramètres ombrage : bas , d r o i t e , dé grad é ,
5 c o u l e u r */ box−shadow : 8px 8px 22 px #000 ; /* Ombrage aux bords
de l a t a b l e */ border−width : 3px ; /* é p a i s s e u r du t r a i t
6 pour l e bord */ border −style : s o l i d ; /* bord en t r a i t
7 continu */
8 border−color : black ; /* c o u l e u r du bord */
9 border−r a d i u s : 10 px ;
10 }
11 caption {
12 color : red ;
13 font−size :130% ;
14 }
15 t r td { /* mise en forme des c e l l u l e s */
16 border −style : dashed ;/* bord en p o i n t i l l é s */
border−width : 2px ; /* é p a i s s e u r du t r a i t pour l e
17 bord */ border−color : black ; /* c o u l e u r du bord */
18 background−color : white ; /* fond b l anc */
19 color : black ; /* c o u l e u r du t e x t e */
20

26
 Chapitre 1 : Pages web statiques HTML5

21 text−align : c e n te r ; /* t e x t e centr é */
22 padding : 20 px ; /* espace entre l e t e x t e e t l e bord de l a
23 } c e l l u l e */
24 th { /* mise en forme des en−tê t e de l i g n e e t
colonne */ border −style : s o l i d ; /* bord en t r a i t
25 continu */ border−width : 2px ; /* é p a i s s e u r du t r a i t
26 pour l e bord */ border−color : black ; /* c o u l e u r du
27 bord */
28 text−align : c e n te r ; /* t e x t e centr é */
29 font−weight : b o ld e r ; /* c a r a c t è r e s gras appuy é */
30 color : black ; /* c o u l e u r du t e x t e */
31 padding : 20 px ; /* espace entre l e t e x t e e t l e bord de l a
c e l l u l e */
32
}

1.10 Insertion d’images

Avant d’insérer des images dans un site web, des retouches de l’image sont souvent nécessaires :

1. L’usage veut que l’on essaie de réduire le poids en octets de l’image, soit en réduisant le
nombre de pixels par redimensionnement de l’image, soit en compressant plus fortement
l’images (paramètre d’enregistrement JPEG ou PNG) lorsque c’est possible sans
dégrader la qualité.

2. Il faut souvent mettre un fond transparent pour l’image si l’on veut l’incruster sur un
fond en couleur.

3. Il faut parfois éclaircir ou foncer l’image pour faire ressortir le contraste avec le texte
incrusté dessus.

4. Il faut parfois retoucher les couleurs pour les adapter à la charte graphique.

Le logiciel open-source GIMP permet de réaliser toutes ces opérations (facilement avec un
peu d’habitude).

27
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

exemples/ChapitreHTML/ex14_images.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head >
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>I n s e r t i o n d’ images en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du corps HTML −−>
9 <h1>I n s e r t i o n d’ images en HTML</h1>
10 <p>
11 On i n s è r e l e s images avec l a b a l i s e &l t ; img&gt
12 ;&nbsp ; :<br />
13 </p>
14
15
16 <img src=” . / pic/ gimp . png” alt=”The GIMP Logo”
width=” 150 ” style= ” vertical − align : middle ; ”
17 />
18 width=” 150 ”
19 <img src=” . /pic/3 d − gnu − head_petit
20 . png”
21 alt=”The GNU Logo”
22 style= ” vertical − align : middle ;
23 ”
<p>
24
On peut r e to u c h e r l e s images avec l e l o g i c i e l GNU
25
GIMP<br /> voyez l a
26
<a href=” . / pic/ capture_gimp . png”>capture d’ é cran</a>
27 l
montrant comment diminuer l e nombre de p i x e l s d’une image
28 e
pour en diminuer poids ( en megaoctets ) .
29
</p>
30
31
</body> <!−− f i n du corps HTML −−>
32
</html> <!−− f i n du code HTML −−>
33

exemples/ChapitreHTML/ex15_images_avec_click.html
1 /<! doctype html>
2 <html lang=” f r ”>
28
 Chapitre 1 : Pages web statiques HTML5

3 <head >
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>Cl i c k sur une image en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du corps HTML −−>
9 <h1>C l i c k sur une image en HTML</h1>
10 <p>
11 On i n s è r e l e s images avec l a b a l i s e &l t ; img&gt ;&nbsp ; :<br />
12 </p>
13 <p style= ” text−align : cent er ; ”>
14 Cliquez sur l e GNU pour l e v o i r en grand :<br />
15 <img src=” . / pic/ gimp . png” alt=”The GIMP Logo” width=”
16 150 ” style= ” vertical − align : middle ; ”
/>
17
<a href=” . /pic/3d−gnu−head_fond_transp . png” >
18 <img src=” . /pic/3 d − gnu − head_petit . png”
19 width=”
20 150 ” alt=”The GNU Logo”
21 style= ” vertical − align : middle ; ”
22 />
23 </a>
24 </p>
25
26 </body> <!−− f i n du corps HTML −−>
27 </html> <!−− f i n du code HTML −−>

1.11 Figures et sous-figures avec légende

exemples/ChapitreHTML/ex16_figure.html
1 /<! doctype html>

29
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

2 <html lang=” f r ”>

3 <head >
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>Figures avec l é gendes en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du corps HTML −−>
9 <h1>F i gures avec l é gende en HTML</h1>
10 <p>
11 On cr é e une f i g u r e contenant une image avec l a b a l i s e &l t ; f i g u r e&gt
;&nbsp
; :<br />
12 </p>
13 <figure style= ” text−align :center ; ”>
14 <img src=” . / pic/ gimp . png” alt=”The GIMP Logo” width=” 150 ”
15 style= ” vertical − align : middle ; ”
16 />
17 <figcaption>Le Logo de <i>GIMP</ i></ figcaption>
18 </ figure>
19 <figure style= ” text−align :center ; ”>
20 <img src=” . /pic/3 d − gnu − head_petit . png” width=” 150 ”
21 alt=”The GNU Logo”
22 style= ” vertical − align : middle ; ”
23 />
24 <figcaption>Le Logo de <i>GNU</ i></ figcaption>
25 </ figure>
26 </body> <!−− f i n du corps HTML −−>
27 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex17_subfigure.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head >
4 <meta charset=” utf − 8 ” />
<l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
30
 Chapitre 1 : Pages web statiques HTML5

31
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

6 <t i t l e>Sous−figures avec l é gendes en HTML</ t i t l e>

7 </head>
8 <body> <!−− dé but du corps HTML −−>
9 <h1>S ous − figures avec l é gendes en HTML</h1>
10 <p>
11 On cr é e des s o u s − f i g u r e s en imbriquant b a l i s e s &l t ; f i g u r e&gt
;&nbsp ; :<br />
12 On peut f a i r e en s o r t e que l e s f i g u r e s se mettent l ’ u n e à c ô t é de
l’autre
avec
13 l a p r o p r i é t é <i>CSS</ i> <code>” display : i n l i ne − b l ock ; ”</code>.
14 </p>
15 <figure style= ” text−align :center ; ”>
16 <figure style= ” display :i n l i ne − b l ock ; ”>
17 <img src=” . / pic/ gimp . png” alt=”The GIMP Logo” width=” 150 ”
18 style= ” vertical − align : middle ; ”
19 />
20 <figcaption><b>( a )</b> Le Logo de <i>GIMP</ i></ figcaption>
21 </ figure>
22 <figure style= ” display :i n l i ne − b l ock ; ”>
23 <img src=” . /pic/3 d − gnu − head_petit . png” width=” 150 ”
24 alt=”The GNU Logo”
25 style= ” vertical − align : middle ; ”
26 />
27 <figcaption><b>( b )</b> Le Logo de <i>GNU</ i></ figcaption>
28 </ figure>
29 </<figcaption><b>F
figure> igure 1 .</b> Exemples de l o g o s de l o g i c i e l s ou l i
</body> <!−−c e n cf ei n
s du corps
Open HTML
Source</ −−>
figcaption>
30 </html> <!−− f i n du code HTML −−>
31
32

1.12 Caractères spéciaux

De nos jours les accents dans certains langues comme le français sont pris en compte sans
problème par le standard unicode UTF (par exemple UTF-8). On peut donc sans crainte
taper des accents au clavier dans un éditeur HTML. Certains caractères spéciaux, tels que
les caractères qui ont une signification particulière dans le langage HTML (comme < et >), doivent
cependant être représentée par une séquence d’échappement (commençant par & et terminant
par ;). De nombreuses pages recenssent ces séquences d’échappement sur le web :

https://www.google.fr/#q=special+characters+html

32
 Chapitre 2

Styles CSS et mise en page

2.1 Éléments HTML de type block et inline

Avant d’étudier plus avant les styles CSS, nous devons en dire un peu plus sur la
structuration des pages HTML.
On distingue en HTML dans catégories d’éléments : les éléments de type block et les
éléments de type inline. Ces deux sortes d’éléments ne se comportent pas de la même manière
quand à leur positionnement dans la page :

2.1.1 Éléments blocks

exemples/ChapitreCSS/ex01_blocks.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>É l é ments de type ” b l ock ”</ t i t l e>

27
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

7 </head>
8 <body>
9 <h1>É l é ments de type ” b l ock ”</h1>
10 <p>
11 I l e x i s t e en XHTML deux p r i n c i p a u x types de b a l i s e s&nbsp ; : i n l i
n e ou block
12 .
13 </p>
14 <ol>
15 <l i>
16 <strong>Exemples de b a l i s e s de type block&nbsp ; :</s trong>
17 <br />
18 <ol type=”a”>
19 <l i>
20 &l t ; p&gt ;&nbsp ; : nouveau paragraphe&#59 ;
21 </ l i>
22 <l i>
23 &l t ; ta b l e&gt ;&nbsp ; : tableau contenant des donné e&#59 ;
24 </ l i>
25 <l i>
26 &l t ; h1&gt ;&nbsp ; , . . . , &l t ; h6&gt ;&nbsp ; : d i f f é r
27 e n t s niveaux de t i t r e &#59 ;
28 </&ll i>
t ; dl&gt l i s t de dé f i n i t i o n
29
;&nbsp ; : e &#59 ;
30
</ l i>
31 l i s t non ordonn é
<l i>
32 e e&#59 ;
&l t ; ul&gt
33 ;&nbsp ; :
34 </ l i> l i s t ordonn é
35 <l i> e e&#59 ;
36 <l i>
37 &l t ; pre&gt ;&nbsp ; : i n s e r t i o n de code ( preformated text ) ”
38 verbatim ”
39 en p o l i c e typ e w r i te r avec r e s p e c t de l ’ i n d e n t a t i o n .
40 </ l i>
41 </ ol>
42 Ces b a l i s e s changent l ’ a p p a r e n c e de l e u r contenu et l e u r
43 nature
44 au niveau s t r u c t u r e l et é v e n t u e l l e m e n t l e u r f o n c t i o n dans l
45 e cas du l i e n ou de l ’ i m a g e .
46 <br />
En <i>HTML5</ i>, on trouve a u s s i l e s b a l i s e s s é mantiques &l t
47 ; header&gt ; , &l t ; f o o t e r&gt ; , &l t ; nav&gt ; , e tc . que nous
48 ve r ro ns plus l o i n .
49 </ l i>
50

Lors de l’insertion d’un élément de type block dans un document HTML, l’élément va (par
défaut) “à la ligne” : l’élément est inséré aligné à gauche sous l’élément précédent.

2.1.2 Éléments inline

exemples/ChapitreCSS/ex02_inline.html
1 /<! doctype html>
28
 Chapitre 2 : Styles CSS et mise en page

2 <html lang=” f r ”>

3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>É l é ments de type ” i n l i n e ”</ t i t l e>
7 </head>
8 <body>
9 <h1>É l é ments de type ” i n l i n e ”</h1>
10 <ol start=”2 ”>
11 <l i><s trong>Exemples de b a l i s e s en l i g n e ou ” i n l i n e ”&nbsp ; :</s
trong></ l i>
12 <ol type=”a”>
13 <l i>&l t ; span&gt ;&nbsp ; : changement l o c a l de style&nbsp ;&#59 ;</ l i>
14 <l i>&l t ; a&gt ;&nbsp ; : l i e n hypertexte&#59 ;</ l i>
15 <l i>&l t ; s tron g&gt ;&nbsp ; : é l ément important&#59 ;</ l i>
16 <l i>&l t ; em&g t ;&nbsp ; : é l ément à s o u l i g n e r &#59 ;</ l i>
17 <l i>&l t ; q&gt ;&nbsp ; : c i t a t i o n c o u r te&#59 ;</ l i>
18 <l i>&l t ; code&gt ;&nbsp ; : te x te en p o l i c e <code>t yp e w r i te r</code></ l
i>
19 </ ol>
20 Ces b a l i s e s changent l ’ a p p a r e n c e de l e u r contenu mais pas l e u r
nature
21 au niveau s t r u c t u r e l ni l e u r position dans l e document .
22 </ l i>
23 </ ol>
24 <p>
25 Tout é l ément i n l i n e d o i t ê t r e contenu dans au moins un block .
Le b l o c k s peuvent
26 ê t r e imbriqu é s mais l e s b l o c k s &l t ; p&gt ;&nbsp ; et l e s b l o c k s t i t r e
27 &l t ; h1&gt ;&nbsp ; , . . . , &l t ; h6&gt ;&nbsp ; ne peuvent c o n te n i r d ’ a u
t r e s b l o c k s .< br />
28 Un é l ément i n l i n e ne peut c o n te n i r aucun é l ément de type block ;
29 </p>
30 </body>
31 </html>

29
Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

Lors de l’insertion d’un élément de type inline dans un document HTML, l’élément s’insère
(par défaut) “à la suite sur la même ligne” : l’élément est inséré aligné à la suite de l’élément
précédent sur la même ligne, ou à la ligne suivante s’il n’y a plus de place sur la ligne.

30
 Chapitre 2 : Styles CSS et mise en page

2.1.3 Le flux et la propriété CSS display

Le positionnement par défaut des éléments de type block (“à la ligne”) et inline (“à la suite
sur la même ligne”) s’appelle la position dans le flux. La propriété CSS display permet de
modifier la place dans le flux des éléments :

• display: none : L’élément est purement et simplement supprimé du flux, comme s’il
n’existait pas. Cela permet de faire apparaître ou disparaître des éléments suivants des
événements, par exemple des événements Javascript. On peut ainsi créer des popups,
etc...

• display: inline : l’élément est inséré comme s’il s’agissait d’un élément de type inline ;
• display: block : l’élément est inséré comme s’il s’agissait d’un élément de type block ;
• display: inline-block : Ces éléments peuvent contenir d’autres éléments de type block
ou inline. Ils s’insèrent dans le flux comme des éléments inline : à la suite sur la même
ligne.

exemples/ChapitreCSS/ex03_propriete_display.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>Propri é t é display</ t i t l e>
7 </head>
8 <body>
9 <h1>P ropri é t é display</h1>
10 <p style= ”border −style : groove ; display : i n l i ne − b l ock ;
vertical − align : middle ; ”>
Ce premier paragraphe ,<br />avec un bord en t r a i t 3D,
11
12 <br />e s t un paragraphe en i n l i n e − b l o c k .
</p>
13

31
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

14 <p style= ”border −style : dashed ; display : i n l i ne − b l ock ; vertical −

align :
15 middle ; ”>
16 Ce second paragraphe , <br />avec un bord en t i r e t s ,
17 <br />e s t un paragraphe en i n l i n e − b l o c .
18 </p>
19 <p style= ”border −style : s o l i d ; display : b l ock ; vertical − align :
20 middle ; ”>
21 Ce t r o i s i è m e paragraphe , <br />avec un bord en t r a i t p l e i n ,
22 <br />e s t un paragraphe normal de type block .
23 </p>
24 <p style= ”border −style : s o l i d ; display : none ; vertical − align : middle
25 ; ”>
26 Ce quatrième paragraphe , <br />avec un bord en t r a i t p l e i n ,
27 <br />e s t un paragraphe en display : none ( non a f f i c h é ! ) .
28 </p>
29 <p style= ”border −style : d o t t e d ; display : i n l i n e ; vertical − align :
30 middle ; ”>
31 Ce cinquième paragraphe , <br />avec un bord en p o i n t i l l é s ,

2.2 Distinguer des parties dans un document : balise

div

exemples/ChapitreCSS/ex04_div.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>La B a l i s e &l t ; div&gt ;</ t i t l e>
7 </head>
<body>
32
 Chapitre 2 : Styles CSS et mise en page

33
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

9 <h1>D i s t i n g u e r des p a r t i e s dans l a page&nbsp ; :<br />La b a l i s e &l t ;

div&gt ;</h1
>
10 <div style= ”background−color : #f 85 ”>
11 <p>
12 <b>1 )</b> Un é l ément &l t ; div&gt ; e s t une p a r t i e d’un document
<i>HTML</ i
>.
13 La b a l i s e &l t ; div&gt ; e s t ( par dé f a u t ) de type block .
14 </p>
15 <p>
16 Contrairement aux paragraphes , un &l t ; div&gt ; peut c o n te n i
r d’autresbalises
17 de type block comme d ’ a u t r e s &l t ; div&gt ; , des paragraphes ,
des tableaux , e tc .
18 </p>
19 </div>
20 <div style= ”background−color :white ; ”>
21 <p>
22 ( par )</b>
<b>2 t ; type
dé f a uLet )&lde div&gt i n; l idni e
f f èetr e d’un &l t ; span&gt ; en c e c i
<span
que l estyle=
span ”background−color
est : b l ack ; color : white ; border − radius
23 : 5 px ; ”
24 >
l e &l t ; span&gt ; ne m o d i f i e pas vraiment l a s t r u c t u r e du
25 document
26 </span>.
27 I l donne j u s t e un s ta t u t ou un style p a r t i c u l i e r à une c e r t
a i n e é tendue du document .
28 </p>
29 <p>
30 Le &l t ; div&gt ; , au c o n t r a i r e , permet de <strong>d i v i s e r</s
trong> l e document en
31 p a r t i e s qui peuvent ê t r e d i s p o s é es au gr é de l a f a n t a i s i e
32 du d e s i g n e r .
Le &l t ; div&gt ; e s t l a base de l a d i v i s i o n des page s en
33 d i f f é r e n te s p a r t i e s .
34 </p>
35
36

2.3 Imbrication des balises et CSS

exemples/ChapitreCSS/ex05_imbrication_balises_et_CSS.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <s tyle>
7 body p{
8 background−color : #777 ;
9 color : white ;
10 }
body div p{
34
background−color : #eee ;
 Chapitre 2 : Styles CSS et mise en page

11
12

35
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

13
14 color : #111 ;
}
15 body div div p{
16 background−color : #111 ;
17 color : #eee ;
18 }
19 </s tyle>
20 <t i t l e>I m b r i c a t i o n des b a l i s e s et <i>CSS</ i></ t i t l e>
21 </head>
22 <body>
23 <h1>I m b r i c a t i o n des b a l i s e s et <i>CSS</ i></h1>
24 <p>
25 Les b a l i s e s peuvent ( moyennant c e r t a i n s c o n t r a i n t e s sur l ’ i
m b r i c a t i o n des b l o c k s )
26 s ’ i m b r i q u e r l e s unes dans l e s a u tr e s . I c i un
paragraphe imbriqu é directement
27 dans l e &l t ; body&gt ; . <br />
28 C’ e s t l e style <code>body p</code> qui s ’ a p p l i q u e i c i .
29 </p>
30 <div>
31 <p>
32 Le style <i>CSS</ i> des é l é ments peut ê t r e r é g l é d i f f
éremment s u i va n t l e u r
33 i m b r i c a t i o n dans d ’ a u t r e s b a l i s e s . I c i un paragraphe
imbriqu é dans un & l t ; div&gt ;
34 lui−même imbriqu é directement dans l e &l t ; body&gt ; . <br />
35 C’ e s t l e style <code>body div p</code> qui s ’ a p p l i q u e i c i .
36 </p>
37 <p>
38 I c i un autre paragraphe imbriqu é dans un &l t ; div&gt ;
39 lui−même imbriqu é directement dans l e &l t ; body&gt ; . <br />
40 C’ e s t l e style <code>body div p</code> qui s ’ a p p l i q u e i c i .
41 </p>

36
 Chapitre 2 : Styles CSS et mise en page

42 </div>

37
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

43 <div>
44 <p>
45 I c i encore un autre paragraphe imbriqu é dans un &l t ;
46 div&gt ; lui−même imbriqu é directement dans l e &l t ;
47 body&gt ; . <br />
C’ e s t l e style <code>body div p</code> qui s ’ a p p l i q u e i c i .
48
</p>
49
<div>
50
<p>
51
I c i on a un paragraphe imbriqu é dans un &l t ; div&gt ;
52
lui−même dans un &l t ; div&gt ; imbriqu é directement dans l e &l t
53 ; body&gt
54 ; . <br />
55 C’ e s t l e style <code>body div div p</code> qui s ’ a p p l i q u e i
ci .
56
57 </p>
58 </div>
</div>

2.4 Arborescence de balises et CSS

L’imbrication des balises HTML d’un document crée une arborescence, où une balise B1 est
fille d’une autre balise B2 si la balise B1 est immédiatement imbriquée dans B2 dans le
document (voir la figure 2.1).

body

div h1

p div ul

a p li

span

FIGURE 2.1 : L’arbre d’imbrication des balises de l’exemple ex11_arborescenceCSS_html

Dans le fichier CSS, on peut définir un style (et éventuellement plusieurs classes CSS) pour
chaque sous-arbre de l’arborescence. Pour cela, on indique le sous-arbre par la succession des
noeuds de la racine de l’arbre vers la racine du sous-arbre (voir exemple ci-dessous).
38
 Chapitre 2 : Styles CSS et mise en page

exemples/ChapitreCSS/ex06_arborescenceCSS.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . /ex06_arborescence CSS
6 . css ” /> balis et
<t i t l e>Arborescence de b a l i s e s</ t i t l e><t i t l es CSS<
7 e>Arborescence de
8 / t i t l e>
9 </head>
10 <body>
11 <h1>T i tr e p r i n c i p a l</h1>
12 <p>
13 feuille 1
14 <a href=” . /my_url . html ”>f e u i l l e 2</a>
15 </p>
16 <div>
17 <div>
18 <p>
19 noeud 3 <span>f e u i l l e 4</span>
20 <p>
21 </div>
22 </div>
23 <div>
24 <u l>
25 <l i>
26 feuille 5
27 </ l i>
28 <l i>
29 feuille 6
30 </ l i>
31 </u l>
32 </div>

exemples/ChapitreCSS/ex06_arborescenceCSS.css
1 /* s t y l e par dé f aut du t e x t e */
2 body {
3 font −family : times , s e
r i f ; font−size : 14pt ;
4 background−color : #ccc ;
5 color : #222 ;
6 }
7
39
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

8
9 h1 {
10 text−align : c e n te r ;
1 }
1
12
13 div {
14 background−color : #f f 0 ;
15 }
16
1 p {
7
18
19 background−color : white ;
20
21 }
22
23 p a {
24
25 text−decoration : o v e r l i n
e ;
26
27 }
28
29 div div p {
30 color : red ;
31 text−align : c e n te r ;
32 background−color : #ddd ;
33
34 }
35
36
37 div div p span {
38 font −family : Comic Sans
39 MS;
font−size : 18pt ;
40 }
41
42
43 div ul {
44 background−color : #0 f f ;
45 color : red ;
46 }

2.5 Classes CSS

Les classes CSS permettent d’appliquer un style CSS différent à différentes catégories (ou
classes, que l’on distingue pour un même type de balises HTML.
exemples/ChapitreCSS/ex07_classes_css.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / ex 07 _classes_css . css ” />
<t i t l e>Cl a s s e s CSS</ t i t l e>
</head> 40
<body>
 Chapitre 2 : Styles CSS et mise en page

6
7
8

41
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

9 <h1>C l a s s e s CSS</h1>
10 <p class= ” l a b e l ”>
11 Menu :
12 </p>
13 <ol class= ”menu”>
14 <l i>
15 <a class= ” boutton−ombre” href=”#part 1 ” >Qu’est−ce que c l a s s e s
<i>CSS</ i>
&nbsp ; ?</a>
16 </ l i>
17 <l i>
18 <a class= ” boutton−ombre” href=”#part 2 ” >À quoi ç a s e r t&nbsp ; ?</a>
19 </ l i>
20 <l i>
21 <a class= ” boutton−ombre” href=”#part 2 ” >Exemple d’ usage</a>
22 </ l i>
23 </ ol>
24 <h2 id=” part 1 ”><b>1)</b> Qu’est−ce que c l a s s e s <i>CSS</ i>&nbsp ; ?</h2>
25 <p >
26 Les c l a s s e s permettent de dé f i n i r p l u s i e u r s c l a s s e s de c o n te x te s
27 dans l e s q u e l s l e s mises en formes sont d i f f é r e n t e s ( v o i
r <a class= ” normal Link” href=”#part 2 ”>p a r t i e&nbsp ;
2</a>)
28 </p>
29 <h2 id=” part 2 ”><b>2 )</b> À quoi ç a s e r t&nbsp ; ?</h2>
30 <p>
31 Ainsi , des é l é ments qui ont l e même niveau d ’ i m b r i c a t i o n dans l e s b
alises
32 pourront a v o i r un style d i f f é rent s e l o n l e u r usage .
33 </p>
34 <h2 id=” part 3 ”><b>3 )</b> Exemple d’ usage</h2>
35 <p>

42
 Chapitre 2 : Styles CSS et mise en page

36 Par exemple , pour les l i e n s&nbsp ;

37 </p>
38 <ol>

43
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

39 <l i>l e s l i e n s dans un menu pourront a v o i r l e style d’un bouton ,</ l

i>
40 <l i>a l o r s que l e s l i e n s dans un a r t i c l e auront un a s pe c t bleu s
ouligné
,</ l i>
41 <l
42 i> ou e n c o r e l e s l i e n s ve r s l e s s p o n s o r s dans l e pied de
page auront
encor
43 e
un autre a sp e
44 ct.
45 </</ l i>
46 </ ol>
47 body>
</html>

exemples/ChapitreCSS/ex07_classes_css.css
1 /* s t y l e par dé f aut du t e x t e */
2 body {
3 font −family : ”Comic Sans
MS” ; font−size : 18 pt ;
4 background−color : # f f f ;
5 color : #222 ;
6 }
7
8 /* s t y l e du t i t r e */
9 h1 {
10 font−weight :
11 bold ; font−size :
150% ; color :
12 white ;
13 text−align : c e n te r ;
14
background−image : l i n e a r − g r a d i e n t ( black , #bbb ) ;
15 padding : 15 pt ;
16 }
17
18 h2 {
19 font−weight : bold ;
20 font−size : 120% ;
21 }
22
23 p{
24 tex−align : j u s t i f y ;
25 }
26
27 p.label{
28 display : i n l i n e ;
29 background−color : tr a n s p a r e n t ;
30 }
31
32 /* s t y l e des é l éments importants */
33 s tron g {
34 font −variant :
35 small−caps ; font−weight
: b o l d e r ; color : black
36 ;
37 }
38
39 s tron g . i n s i s t {
font−size : 130% ;
} 44
 Chapitre 2 : Styles CSS et mise en page

40
41
42

45
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

43
44 s tron g . warning {
45 font−size :
46 150% ; color :
red ;
47
text−decoration : b l i n k ;
48
}
49
50
/* s t y l e des é l éments mis en é v idence */
51 em {
52
font −style : i t a l i c ;
53 color : black ;
54 }
55
56 p {
57 background−color :
58 #ddd ; text−align : j u
59 s t i f y ; padding : 5 pt ;
60 }
61
62 /* s t y l e par dé f aut des l i e n s */
63 a {
64 color : blue ;
65 text−decoration : u n d e r l i n e ; /* non s o u l
66 i g n é */
67 }
68
69 o l . menu{
70 display : i n l i n e − b l o c k ;
71 }
72 o l . menu l i {
73 display : i n l i n e − b l o c k ;
/* s t y l e de l i e n s sp é c i a l pour l a t a b l e des
74 matières
a . */
75 color
boutton−ombre : white
{ ;
76 border −style : groove
77 ; border−width : 3px ;
background−color :
78 #333 ;
79 text−decoration : none ; /* s u r l i g
80 n é */
81 padding : 5px ;
82 border−r a d i u s : 15 px ;
83 }
84

exemples/ChapitreCSS/ex08_classes_css_tableaux.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf − 8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <!−− I n c l u s i o n de s t y l e s suppl é mentaires avec ” import ” −−>
7 <s tyle>
8 @import u r l ( ex 08 _classes_css_tableaux . c s s ) ;
9 </s tyle>
10 <t i t l e>S ty l e CSS de Tableaux</ t i t l e>
</head>
46
 Chapitre 2 : Styles CSS et mise en page

11

47
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

12 <body>
13 <!−− dé but du corps HTML −−>
14 <h1>S ty l e <i>CSS</ i> de Tableaux</h1>
15
16 <div style= ”margin : 0 auto ; width : 800 px ; ”>
17 <table>
18 <caption>
19 Exemple de ta b l e
20 </caption>
21 <thead>
22 <tr>
23 <th class= ” impair ”>Colonne 1</th>
24 <th class= ” pair ”>Colonne 2</th>
25 <th class= ” impair ”>Colonne 3</th>
26 <th class= ” pair ”>Colonne4</th>
27 </ tr>
28 </thead>
29 <tbody>
30 <tr>
31 <td class= ” pair ”>Ceci e s t l a case&nbsp ; 1</td>
32 <td class= ” impair ”>Ceci e s t l a case &nbsp ; 2</td>
33 <td class= ” pair ”>Ceci e s t l a case &nbsp ; 3</td>
34 <td class= ” impair ”>Ceci e s t l a case &nbsp ; 4</td>
35 </ tr>
36 <tr>
37 <td class= ” pair ”>Ceci e s t l a case&nbsp ; 5</td>
38 <td class= ” impair ”>Ceci e s t l a case &nbsp ; 6</td>
39 <td class= ” pair ”>Ceci e s t l a case &nbsp ; 7</td>
40 <td class= ” impair ”>Ceci e s t l a case &nbsp ; 8</td>
41 </ tr>
42 <tr>
43 <td class= ” pair ”>Ceci e s t l a case&nbsp ; 9</td>
44 <td class= ” impair ”>Ceci e s t l a case &nbsp ; 10</td>
45 <td class= ” pair ”>Ceci e s t l a case &nbsp ; 11</td>
46 <td class= ” impair ”>Ceci e s t l a case &nbsp ; 12</td>
48
 Chapitre 2 : Styles CSS et mise en page

47 </ tr>
48 </tbody>
49 </table>
50 </div>
51 </body>
52 <!−− f i n du corps HTML −−>
53 </html>
54 <!−− f i n du code HTML −−>

exemples/ChapitreCSS/ex08_classes_css_tableaux.css
1 ta b l e {
2 padding : 0px ;
3 vertical − align : /* mise en forme des t a b l e s */
top ;
4 background−color : d ;
#dd
5 border −style : o u ts
et;
6 border−width : 10 px ;
7 border−color : black
;
8 text−align : c e n te
r;
9 margin : 0 auto ;
10 }
border−width : 2px ;
11
12 tr padding
, td { : 20 px ;
13 border −style : dashed ; /* en forme des c e l l u l */
14 mise es
15 border−color : black ;
16
17 }
18
19 tr , td . p a i r {
20 background−color : black ;
21 color : white ;
22 }
23
24 tr , td . impair {
25 background−color : white ;
26 color : black ;
27 }
28
29
30 th {
31 border −style : s o l i d ;
32 border−width : 2px ;
33 border−color : black ;
color : black ;
34 text−align : c e n te r ;
35 font−weight : b o l d e r ;
}
36 background−color : #ddd ;
37
38 padding : 20 px ;
39
40
41 th . p a i r {

49
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

46 background−color : #555 ;
47 }
48 caption {
49 background−color :
50 black ; color : white ;
51 box−shadow : 10 px 20 px 10 px #666 ;
52 width : 50% ;
53 margin : 0 auto 20 px auto ;
54 }

2.6 Sélecteurs de style CSS par ID

exemples/ChapitreCSS/ex09_id_selector_css.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta http−equiv=” Content−Type” content=” t ext/ h tml ; charset=UTF−8 ”
5 />
6 <l i nk rel=” s t y l e s h e e t ” type=” t e x t / c s s ” href=” . / ex 09
7 _id_selector_css . css ” />
8 <t i t l e>Sé l e c t e u r s de style par ID</ t i t l e>
9 </head>
10 <body>
11 <h1>Sé l e c t e u r s de style par ID</h1>
12 <h2 id=” part i e 1 ”>1) Qu’est−ce qu’un <i>ID</ i> <i>HTML</ i>&nbsp ; ?
13 </h2>
<p id=” paragraphe 1 ”>
14 Un dé veloppeur web peut a s s o c i e r un <i>ID</ i> à tout é l ément
<i>HTML</ i>.

50
 Chapitre 2 : Styles CSS et mise en page

15 qui dé f i n i t l ’ é l ément .
16 </p>
17 <h2 id=” part i e 2 ”>2 ) À quoi s e r ve n t l e s <i>ID</ i> <i>HTML</ i>&nbsp ;
?</h2>
18 <p id=” paragraphe 2 ”>
19 L’<i>ID</ i> d’un é l ément <i>HTML</ i> permet de dé s i g n e r l ’ é l ément
parmis
20 tous l e s é l é ments du document , notamment pour&nbsp ; :
21 <u l>
22 <l i>
23 Accé der à l ’ é l ément pour a g i r sur son contenu en <i>j a v a s c r i p t</
i>
24 ( par exemple via l a mé thode <code>getElementById</code>) .
25 </ l i>
26 <l i>
27 I d e n t i f i e r l ’ é l ément pour l u i a t t r i b u e r un style <i>CSS p a r t i c
u l i e r</ i
>
28 </ l i>
29 </u l>
30 </p>
31 <h2 id=” p a r t i e 3 ”>3 ) D i f f é rence avec l e s c l a s s e s</h2>
32 <p id=” paragraphe 3 ”>
33 Contrairement aux c l a s s e s ,
34 pour l e s q u e l l e s on peut dé f i n i r autant d’ é l é ments qu’on veut dans une
35 même c l a s s e de style , <strong>l ’ é l ément c o r r e s p o n d a n t à un ID e
s t unique</ strong>,
36 c ’ e s t un <em>s i n g l e t o n</em>.
37 </p>
38 </body>
39 </html>

exemples/ChapitreCSS/ex09_id_selector_css.css
1 /* s t y l e par dé f aut du t e x t e */
2 body {
3 font −family : ”Comic Sans
MS” ; font−size : 18 pt ;
4 background−color : # f f f ;
5 color : #222 ;
6 }
7
8 /* s t y l e du t i t r e */
9 h1 {
10 font−weight :
11 bold ; font−size :
150% ; color :
12 white ;
13 text−align : c e n te r ;
14 background−color :
15 #999 ; padding : 15 pt ;
16 }
17
18 h2 {
19 font−weight : bold ;
20 font−size : 120% ;
21 }

h2#p a r t i e 1 { 51
color : black ;
}
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

22
23
24
25
26

52
 Chapitre 2 : Styles CSS et mise en page

27
28 h2#p a r t i e 2 {
29 color : red ;
30 }
31
32 h2#p a r t i e 3 {
33 color : green ;
34 }
35
36 /* s t y l e des é l éments importants */
37 s tron g {
38 font −variant : small−caps ;
39 font−weight : b o l d e r ;
40 color : black ;
41 }
42
43 /* s t y l e des é l éments mis en é v idence
*/
44 em {
45 font −style : i t a l i c ;
46 color : black ;
47 }
48
49 p {
50 background−color : #ddd ;
51 text−align : j u s t i f y ;
52 padding : 5 pt ;
53 }
54
55 p#paragraphe 1 {
56 background−color : #aaa ;
57 }
58
59 p#paragraphe 2 {
60 background−color : #ccc ;
61 }
62
63 p#paragraphe 3 {
64 background−color : #eee ;
65 }
66
67 a {
68 color : blue ;
69 text−decoration : u n d e r l i n e ; /* non s o */
uligné

53
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

La position des différents éléments dans une page HTML se définit au niveau du style CSS.

2.7 Marges et bordures

Chaque élément (de type inline ou block) se trouve dans une boîte ayant une bordure, une
marge intérieure, et une marge extérieure. On définit ainsi les épaisseurs et styles de bordure
des différents éléments, les marges extérieures (margin), qui force l’élément à un certain
éloignement des autres éléments de la page, les marges intérieures (padding), qui force le contenu
de l’élément à se trouver à une certaine distance du bord de l’élément. Voir la figure 2.2
E´l´ement parent

margin-top

padding

contenu de l’´el
´ement Autre ´el´ement
margin-left

margin-right

Bord de l’´el´ement consid´er´e

FIGURE 2.2 : Propriétés CSS margin et padding

exemples/ChapitreCSS/ex10_margin_padding.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <s tyle>
7 div {
8 border−width : 2px ;
9 border−color : black ;
10 border −style : s o l i d ;
11 color : black ;
12 margin : 40 px ;
13 padding : 25 px ;

54
 Chapitre 2 : Styles CSS et mise en page

14 background−color : #ddd ;
15 }
16
17 div div {
18 border−width :
3px ; border−color :
19 #666 ;
20 border −style : dashed ;
21 color : black ;
22 margin : 10 px ;
23 padding : 35 px ;
24 background−color : #aaa ;
25 }
26 </s tyle>
27 <t i t l e>Propri é t é s Margin et Padding</ t i t l e>
28 </head>
29 <body>
30 <h1>P ropri é t é s Margin et Padding</h1>
31 <div>
32 Ceci e s t l e te x te f a i s a n t p a r t i e du contenu de l a
33 première bo î te .
34 <div>
Cette p e t i t e bo î te e s t e l l e même l e l a grande bo î
35
contenu de te .
36
</div>
37
</div>
38
</body>
39

2.8 Positionnement absolu

Dans le positionnement absolu, la position d’un élément est définie par rapport à la position
du première ancêtre positionné (soit le parent si celui-ci est positionné, sinon on cherche le
parent du parent, etc. jusqu’à trouver un ancêtre positionné). Si le parent n’est pas positionné,
on peut le positionner sans changer sa position en mettant sa position relative zéro. Voir la
figure 2.3.
Un élément positionné en absolu est sorti du flux : il n’occupe plus de
place dans le flux et l’élément suivant est placé comme si l’élément positionné
en absolu n’existait pas. L’élément positionné en absolu n’occupe pas de place.

Premier anc`etre positionn´e

D´ecalage bord top

D´ecalage bord left

FIGURE 2.3 : Positionnement Absolu d’un élément

55
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

exemples/ChapitreCSS/ex11_position_absolute.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <s tyle>
7 div {
8 border−width : 2px ;
9 border−color : black ;
10 border −style : s o l i d ;
11 color : black ;
12 margin : 20 px ;
13 padding : 0px ;
14 background−color : #ddd ;
15 }
16
17 /* position nement normale dans l e f l ux ,
18 dé f i n i j u s t e pour position ner l ’ é l ément */
19 . position Zero {
20 position : r e l a t i
21 v e ; top : 0px ;
22
23 l e f t : 0px ;
24 width : 500
25 px ; z−index :
26 1;
}
27
28 div div {
29 border−width : 2px ;
30 border−color : black
31 ; border −style :
dashed ; margin :
32 0px ;
33 padding : 0px ;
34 background−color : #aaa ;
35 }
36
37 . position Trente {
38 position : a b s o l u te ;
39

56
 Chapitre 2 : Styles CSS et mise en page

40 l e f t : 30 px ; /* dé c a l a g e entre l e bord gauche de l ’ é l ément e t son

ancèt re *
41 /
42 width : 500 px ;
43 z−index : 7 ;
44 }
45
46 . position Soixante {
47 position : a b s o l u te ;
48 top : 180 px ; /* dé c a l a g e entre l e bord haut de l ’ é l ément e t son
ancètre */
49 l e f t : 60 px ; /* dé c a l a g e entre l e bord gauche de l ’ é l ément et
50 son ancètre
51 */
52 background−color : #888 ;
53 z−index : 15 ;
54 }
55 </s tyle>
56 <t i t l e>Positionnement absolu</ t i t l e>
57 </head>
58 <body>
<h1>P ositionnement absolu</h1>
59 <div class= ” position Zero”>
60 Ceci e s t l e te x te f a i s a n t p a r t i e du contenu de l a bo î te
Ceci e s t l e te x te contenu de l a première sous−bo î te , dont l
61 e c o i n sup é r i e u r
gauche position né e 30 p i x e l s à d r o i t e et 90 p i x e l s plus bas
62 que son parent
.
63 </div>
64 <div class= ” position S o i x a n t e ”>
65 Ceci e s t l e te x te contenu de l a deuxième sous−bo î te , dont le
c o i n sup é r i e u r
66 gauche position né e 60 p i x e l s à d r o i t e et 180 p i x e l s plus
bas que son parent .
67 </div>
68 </div>
69 </body>
70 </html>

2.9 Positionnement relatif

Le positionnement relatif permet de déplacer un objet relativement à la position qu’il aurait
eu dans le flux sans positionnement. Le positionnement relatif s’obtient avec l’attribut :
position : relative;
top: 10px; /* déplacer de 10 pixels vers le bas */
left: 20px; /* déplacer de 20 pixels vers la droite */

exemples/ChapitreCSS/ex12_position_relative.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
57
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />

6 <s tyle>
7 /* position nement normale dans l e f l ux ,
8 dé f i n i j u s t e pour position ner l ’ é l ément */
9 . position Zero {
10 position : r e l a t i v e ;
11 width : 600 px ;
12 z−index : 1 ;
13 }
14 . position Trente {
15 border −style : dashed ;
16 background−color : #aaa ;
17 position : r e l a t i v e ;
18 l e f t : 60 px ;
19 width : 600 px ;
20 z−index : 7 ;
21 }
22 . position Normale {
23 border −style : dashed ;
24 background−color : #888 ;
25 z−index : 15 ;
26 }
27 </s tyle>
28 <t i t l e>Positionnement r e l a t i f</ t i t l e>
29 </head>
30 <body>
31 <h1>P ositionnement r e l a t i f</h1>
32 <div class= ” position Zero”>
33 Ceci e s t l e te x te f a i s a n t p a r t i e du contenu de l a bo î te du
haut . Ce l l e− c i e s t
34 position né e mais à sa p l a c e normale dans l e f l u x .
35 </div>
36 <div class= ” position Trente ”>
37 Ceci e s t l e te x te contenu de l a bo î te du milieu , dont l e c o in sup é r i
eur
38 gauche position né e 60 p i x e l s à d r o i t e de sa position normale dans l e f
lux.
39 </div>
40
41 <div class= ” position Normale”>
42 Ceci e s t l e te x te contenu de l a bo î te du bas , qui e s t position né e
43 normalement dans l e f l u x ( compte tenu de l a position de l a bo
î te pr é c é dente ) .

58
 Chapitre 2 : Styles CSS et mise en page

44 </div>
45 </body>

59
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

46 </html>

2.10 Structuration d’une page en HTML5

La mise en page avec header, navigation et pied de page est si courante que des balises spécia- lisées,
appelées balises sémantiques ont été créées en HTML5. On doit les préférer à <div> car elles
permettent une plus grande clarté de la structure du document, mais aussi aux moteurs de
recherche de mieux percevoir quelle place accorder aux différentes parties d’une page web.
Les balises sémantiques sont les suivantes :

• header pour l’en-tête ou le bandeau contenant le titre de la page, un logo, etc.

• footer pour le pied de pas contenant le copyright, des logos ou liens, informations
légales, etc.

• nav pour la partie navigation avec un menu et des liens pour se déplacer dans le site.
• article contenant un corps de document autosuffisant.
• aside pour des informations annexes sans grand rapport avec le sujet (publicités, etc.)
• section représentant une partie regroupant plusieurs contenus liés entre eux.

Voici un exemple de mise en page typique utilisant ces balises :

60
 Chapitre 2 : Styles CSS et mise en page

exemples/ChapitreCSS/ex13_balises_semantiques.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . / my Style . css ” />
6 <t i t l e>B a l i s e s Sé mantiques <i>HTML5</ i></ t i t l e>
7 </head>
8 <body>
9 <header>
10 <h1>B a l i s e s Sé mantiques <i>HTML5</ i></h1>
11 </header>
12 <div>
13 <nav>
14 <h1>N avigation</h1>
15 <u l>
16 <l i>
17 <a href=” . /coucou . html ” >l i e n 1</a>
18 </ l i>
19 <l i>
20 <a href=” . / t o t o . html ” >l i e n 2</a>
21 </ l i>
22 <l i>
23 <a href=” . / t i t i . html ” >l i e n 2</a>
24 </ l i>
25 </u l>
26 </nav>
27 <a r t i c l e>
28 <h1>Les&gt ba l i s e s &l t ; header&gt ; , &l t ; nav&gt ; , &l t ; a r t i c l e&gt ;
;</h1>
29
<p>
30 Ces b a l i s e s dé f i n i s s e n t l a s t r u c t u r e g éné r a l e du
document . E l l e s se comportent
31 comme un &l t ; div&gt ; mais e l l e s ont , comme l e u r nom l ’ i n
d i q u e , une s i g n i f i c a t i o n
32 au niveau s é mantique&nbsp ; :
33 </p>
34 <ol>
35 <l i>
36 Un é l ément &l t ; header&gt ; c o n t i e n t l ’ e n − t ê te du document
avec l e nom g éné r a l
37 du s i t e , un logo , une banière , é v e n t u e l l e m e n t un s logan , e tc .
38 </ l i>
39 <l i>
40 Un é l ément &l t ; nav&gt ; c o n t i e n t des é l é ments de n a vi g a t
i o n ( menus , s é r i e s de l i e n s , e tc . ) .
41 Les moteurs de r e c h e r c h e peuvent en dé d u i te un <em>s
itemap</em>, c ’ e s t à d i r e l a s t r u c t u r e du s i t e
42 pour o p t i m i s e r l e r é f é rencement .
43 </ l i>
44 <l i>
45 Un é l ément &l t ; a r t i c l e&gt ; c o n t i e n t l e contenu de l a
page lui−même . C’ e s t l e te x te de l ’ a r t i c l e
46 qui s e r a p r i s en compte fortement pour l ’ i n d e x a t i o n dans
l e s moteurs de r e c h e r c h e .

61
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

47 </ l i>

62
 Chapitre 2 : Styles CSS et mise en page

48 <l
49 i>Un é l ément &l t ; f o o t e r&gt ; c o n t i e n t un pied de page (
souvent avec des i n f o r m a t i o n s l é g a l e s , de copy right
50 sur l, e cr é ateur technique du s i t e , l e s l o g o s des sponsors
51 , e tc . )
52 </ l i>
53 </ ol>
54 <p>
Les moteurs de r e c h e r c h e peuvent a i n s i mieux a n a l y s e r l e
55 contenu de l a
56 page&nbsp ; c e l à p a r t i c i p e
57 de l ’ o p t i m i s a t i o n du r é f é rencement ;
58 </p>
59 </a r t i c l e>
60 <footer>
61 &copy ; RM 2012 .
62 </ footer>
63 </div>

2.11 Exemples de mise en page

exemples/ChapitreCSS/ex14_exemple_miseEnPage.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . /ex14_exemple_miseEnPage . css ” />
6 <t i t l e>Exemple de mise en page</ t i t l e>
7 </head>
8 <body>
9 <header>
10 <h1>Exemple de mise en page</h1>
11 </header>
12 <div>
13 <nav>
14 <h1>N avigation</h1>
15 <u l>
16 <l i>
63
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

17 <a href=” . /coucou . html ” >l i e n 1</a>

18 </ l i>
19 <l i>
20 <a href=” . / t o t o . html ” >l i e n 2</a>
21 </ l i>
22 <l i>
23 <a href=” . / t i t i . html ” >l i e n 2</a>
24 </ l i>
25 </u l>
26 </nav>
27 <a r t i c l e>
28 <h1>Corps du te x te</h1>
29 <p>
30 Nous mettons i c i l e corps du te x te . Paragraphe 1 .
31 </p>
32 <p>
33 Notons que l e s l i e n s dans l e menu n’ ont pas l e
34 même as p e ct que l e s l i e n s dans l e te x te . Le
35 style e s t propre à chaque z ône de l a page .
36 </p>
37 <p>
38 Ceci e s t <a href=” . / t o t o . html ”>un l i e n</a> normal
39 </p>
40 </a r t i c l e>
41 </div>
42 <footer>
43 &copy ; RM 2012 .
44 </ footer>
45 </body>
46 </html>

exemples/ChapitreCSS/ex14_exemple_miseEnPage.css
1 /*****************************************************\
2 * STYLE CSS POUR MISE EN PAGE EN LARGEUR FIXE
3 * MENU À GAUCHE
4 * ***************************************************/
5
6 /* L’ ensemble du document */
7 body {
8 font −family : times , s e r i f ; /* p o l i c e */
9 font−size : 14 pt ; /* t a i l l e de font e a b s o l u e */
background−color : #ccc ; /* c o u l e u r de fond de l a
10 page */ color : #222 ; /* c o u l e u r de t e x t e g r i s
11 fonc é */
12 }
13
14 /* l i e n s par dé f aut */
15 a{
16 /* s t y l e par dé f aut pour é v i t e r que ne s o i t p r i s par dé f aut *
17 * l e s t y l e du ” d i v nav u l l i a” dé f i n i p l us bas */
18 }
19
20 /* Le header : b a n i è r e de t i t r e du s i t e */
21 header {
22 width : 600 px ; /* l a r g e u r t o t a l e du contenu */
background−color : black ; /* fond du header noir */
64
 Chapitre 2 : Styles CSS et mise en page

23

65
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

24
color : white ; /* c o u l e u r du t e x t e : b l anc */
25
26 margin : 0 auto ; /* l e header e s t centr é dans l a page */
27 padding : 0px ; /* pas de padding */
}
28
29 /* t i t r e p r i n c i p a l du s i t e dans l e header */
30 header h1 {
31 text−align : c e n te r ; /* t e x t e centr é dans l e h1 ( l u i même centr é dans l e
header
) */
32 width : i n h e r i t ; /* prend t oute l a l a r g e u r du parent */
33 margin : 0 ; /* pas d ’ espace autour du header e t de son t i t r e */
34 }
35
36 /* sous l e header , l e d i v c o n t i e n t l e nav e t l ’ a r t i c l e */
37 div {
38 width : 600 px ; /* l a r g e u r du contenu : 600 px ; */
39 background−color : white ; /* fond b l anc */
40 margin : 0 auto ; /* centr é dans l a page */
41 position : r e l a t i v e ; /* position nement pour pouvoir u t i l i s e r position
: a b s o l u t e dans l e s f i l s */
42 top : 0px ;
43 padding : 0px ; /* pas de marge i n t é r i e u r e */
44 height : 280 px ; /* hauteur t o t a l du contenu */
45 }
46
47 /* b l oc de n a v i g a t i o n contenant l e menu */
48 nav {
49 color : white ; /* t e x t e b l anc */
50 text−align : c e n te r ; /* t e x t e centr é */
51 background−color : #999 ; /* fond g r i s */
52 width : 180 px ; /* l a r g e u r : seulement une p a r t i e des 600 px */
53 margin : 0 ; /* pas de marge ext é r i e u r e */
54 padding : 0px ; /* pas de marge i n t é r i e u r e */
55 position : a b s o l u te ; /* on ca l e l e b l oc à gauche sur l e bord du d i v parent
*/
56 l e f t :0px ;
57 height : i n h e r i t ; /* l a hauteur e s t l a même que l a hauteur du d i v parent */
58 }
59
60 /* t i t r e du menu */
61 nav h1{
62 background−color : black ; /* fond noir */
63 border−r a d i u s: 4px ; /* bord l é gèrement arrondi */
64 width : 80% ; /* l a r g e u r 80% de l a l a r g e u r du nav */
65 margin : 20 px auto ; /* cantr é en h o r i z o n t a l e t 20 px de marge au
dessus e t au dessous */
66 }
67
68 /* Lis t e à puce contenant l e s l i e n s du menu */
69 div nav ul {
70 text−align : l e f t ; /* t e x t e ca l é à gauche */
71 l i st − style : none ; /* pas de p o i n t s devant l e s i tems de l a l i s t e à puces */
72 }
73
74 /* i tems de l a l i s t e à puce contenant l e s l i e n s du menu */
66
 Chapitre 2 : Styles CSS et mise en page

75 div nav ul l i {
76 margin−bottom : 20 px ; /* permet d ’ é c a r t e r l e s boutons */

67
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

77 }
78
79 /* l i e n s du menu dans l a p a r t i e n a v i g a t i o n */
80 div nav ul l i a {
81 text−decoration : none ; /* pas de s o u l i g n e m e n t du l i e n */
82 font −variant : small−caps ; /* p e t i t e s c a p i t a l e s */
83 : white ; /* t e x t e b l anc */
color
84 font−weight : b o l d e r ; /* c a r a c t è r e s gras */
85 background−image : l i n e a r − g r a d i e n t ( black , white ) ; /* fond
dé grad é */
86 border−r a d i u s : 4px ; /* bord l é gèrement arrondi */
87 padding : 10 px ; /* marge i n t é r i e u r e au bouton */
88 }
89
90 /* p a r t i e a r t i c l e contenant l e t e x t e p r i n c i p a l l e l a
page */
91 div a r t i c l e {
92 color : black ; /* t e x t e noir ( sur fond b l anc ) */
93 width : 400 px ; /* encombrement 420 avec l a padding . 600 px = 420 px */
180 px +
94 padding : 0 10 px ; /* compter 20 dans l a l a r g e u r t o t a l e */
95 margin : 0 ; /* pas de marge ext é r i e u r e */
96 position : r e l a t i v e ;
97 l e f t : 180 px ; /* on dé ca l e vers l a d r o i t e de l a l a r g e u r
du nav */
98 height : i n h e r i t ; /* prend l a hauteur de son parent */
99 }
10
0
10 /* Titre p r i n c i p a l de l a page dans l ’ a r t i c l e */
1
10 div a r t i c l e h1{
2 }
10 margin : 0 auto ; /* t i t r e centr é dans l ’ a r t i c l e */
3
104 divtext−align
a r t i c l e : pc e{n te r ; /* t e x t e centr é dans l e t i t r e */
105
106
107 /* paragraphes de l ’ a r t i c l e */
108
10 text−align : j u s t i f y ; /* t e x t e j u s t i f i é dans l e s
9 paragraphes */
11 }
0
11
1
11 /* pied de page */
2
11 f o o t e r {
3
11 width : 600 px ; /* l a r g e u r 600 p i x e l s */

La structure du document HTML5 est définie par ces balises, mais pas la disposition de la
page. En changeant uniquement le CSS, on peut obtenir :

exemples/ChapitreCSS/ex15_miseEnPage_2.css
1 /**************************************************************\
2 * STYLE CSS POUR MISE EN PAGE EN LARGEUR PROPORTIONNELLE
3 * (LA LARGEUR S ’ADAPTE À LA PAGE. MENU EN HAUT SOUS LE HEADER
4 * ************************************************************/
5
6 /* L’ ensemble du document */
7 body {
font −family : times , s e r i f ; /* p o l i c e */
68
 Chapitre 2 : Styles CSS et mise en page

69
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

9
font−size : 14 pt ; /* t a i l l e de font e a b s o l u e */
10 background−color : #ccc ; /* c o u l e u r de fond de l a
11 page */ color : #222 ; /* c o u l e u r de t e x t e g r i s
12 fonc é */
}
13
14 /* Tous l e s d i v */
15 div {
16 background−color : # f f f ; /* fond b l anc */
17 }
18
19 /* Le header : b a n i è r e de t i t r e du s i t e */
20 header {
21 width : 60% ; /* l a r g e u r 60% de l a page */
22 background−color : black ; /* fond noir */
23 color : white ; /* t e x t e b l anc */
24 margin : 0 auto ; /* l e header e s t centr é dans l a page */
25 border−r a d i u s: 20 px 20 px 0 0 ; /* a n g l e s du haut a r r o n d i s */
26 }
27
28 /* t i t r e p r i n c i p a l du s i t e dans l e header */
29 header h1 {
30 text−align : c e n te r ; /* t e x t e centr é dans l ’ é l ément */
31 width : 100% ; /* occupe t oute l a l a r g e u r du parent ( c . a . d . du header ) */
32 margin : 0 ; /* pas de marge c o l l é au contenu d i v . content */
33 }
34
35 /* d i v contenant l ’ a r t i c l e e t l e nav */
36 div {
37 width : 60% ; /* l a r g e u r 60% de l a page */
38 background−color : white ; /* fond b l anc */
39 margin : 0 auto ; /* contenu centr é dans l a page */
40 }
41
42 /* mise en forme de l a p a r t i e n a v i g a t i o n contenant l e menu */
43 div nav {
44 text−align : c e n te r ; /* t e x t e centr é */
45 background−color : #999 ; /* fond g r i s fonc é */
46 width : 100% ; /* l a r g e u r 100% du d i v parent */
47 height : 45 px ; /* hauteur a b s o l u e 45 px */
48 }
49

70
 Chapitre 2 : Styles CSS et mise en page

50 /* t i t r e du menu */

71
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

51 div nav h1{

52 display : none ; /* on supprime le t i t r e */
53 }
54
55 /* Lis t e à puce contenant l e s l i e n s du menu */
56 div nav ul {
57 l i st − style : none ; /* on supprime l e s p o i n t s devant l e s i tems de
l a l i s t e à puces */
58 margin−top : 0 ; /* bord du haut a l i g n é sur l e bord du d i v parent */
59 }
60
61 /* i tems de l a l i s t e à puce contenant l e s l i e n s du menu */
62 div nav ul l i {
63 display : i n l i n e − b l o c k ; /* l e s i tems sont rang é s h o r i z o n t a l e m e n t
au l i e u de v e r t i c a l e m e n t */
6 88
4 89
6 90
5 91
6 92
6 93
6 94
7 95
68 96
6 97
9 98
7 99
0 100
7 101
1 102
7 103
2
7
3
7
4

7
5
7
6
7
7
7
8
7
9
80
8
1
82
83
84
8
5
86
8
7
72
 Chapitre 2 : Styles CSS et mise en page

} {
font−weight : bo l d e r ; /* c a r a c t è r e s gras */
/* border −style : none ; /* pas de bord */
li margin : 0 10 px ; /* marges à d r o i t e e t à gauche de chaque l i e n de menu */
en padding : 5px 10 px ; /* espace autour du t e x t e */
s position : r e l a t i v e ; /* on t r a n s l a t e l ’ é l ément */
du top : 5px ; /* dé c a l a g e vers l e bas pour compenser l e padding e t a l i g
me n e r l e bord haut */
nu border−r a d i u s : 0 0 10 px 10 px ; /* a n g l e s du bas a r r o n d i s */
da text−decoration : none ; /* t e x t e non s o u l i g n é */
ns }
la
pa /* p r o p r i é t é s sp é c i f i q u e s des l i e n s non v i s i t é s non s ur vo l é s */
rt div nav ul l i a : l i n k {
ie color : white ; /* t e x t e b l anc */
na
background−color : black ; /* fond noir */
vi
}
ga
tio
n /* p r o p r i é t é s sp é c i f i q u e s des l i e n s v i s i t é s non su r vo l é s */
*\ div nav ul l i a : v i s i t e d {
\* color : #444 ; /* g r i s fonc é */
pr background−color : #ddd ; /* g r i s c l a i r */
op }
ri
ét /* p r o p r i é t é s sp é c i f i q u e s des l i e n s su r v o l é s */
és div nav ul l i a : hover {
gé color : black ; /* t e x t e noir */
né background−color : white ; /* fond b l anc */
ra }
le
s /* p a r t i e a r t i c l e contenant l e t e x t e p r i n c i p a l l e l a page */
co div a r t i c l e {
m color : black ; /* c o u l e u r noire */
mu background−color : white ; /* fond b l anc */
ne }
s
au /* Titre p r i n c i p a l de l a page dans l ’ a r t i c l e */
x
li
en
s
vi
si
t
és
,
ho
ve
r
ou
no
n
*/
di
v
na
v
ul
li
a
73
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

104 div a r t i c l e h1 {
105 text−align : c e n te r ; /* t e x t e centr é ( dans l ’ a r
106 t i c l e ) */ padding : 10 px ; /* un peu d ’ espace
107 autour du t e x t e */ margin : 0 ; /* pas de marge :
bords a l i g n é s */
108
109 background−image : l i n e a r − g r a d i e n t (#999 , white ) ; /* dé grad é de
110 c o u l e u r s */
111 }
112
113 /* paragraphes de l ’ a r t i c l e */
div a r t i c l e p {
114
115 text−align : j u s t i f y ; /* t e x t e j u s t i f i é */
padding : 5px 10 px ; /* un peu d ’ espace autou des paragraphes */
116
}
117
118
/* pied de page */
119
footer {
120
width : 60% ; /* l a r g e u r 60% de l a page */
121 background−color : #444 ; /* fond g r i s fonc
122 é */ color : white ; /* t e x t e b l anc */
123 margin : −20px auto ; /* a l i g n é sur l a bas de l ’ a r t i c
124 l e */ text−align : c e n te r ; /* t e x t e centr é dans l e
pied de page */ border−r a d i u s : 0 0 20 px 20 px ; /*
125 a n g l e s du bas */

2.12 CSS adaptatifs : Media Queries

Les Media Queries permettent de créer des styles différents selon l’écran sur lequel la page
s’affiche. Par exemple, on peut mettre deux feuilles de style différentes selon la mise taille de
l’écran. L’exemple suivant, qui s’appuie sur les deux exemples de mise en page précédents,
crée une mise en page différente pour les largeur d’affichage inférieur ou supérieure à
1000px. On met le menu à gauche pour les écrans suffisamment larges, et un menu en haut
pour les écrans un peu étroit.
exemples/ChapitreCSS/ex16_mediaQueries.html
1 /<! doctype html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <!−− MISE EN PAGE PAR DÉFAUT : menu à gauche −−>
6 <l i nk rel=” s t y l e s h e e t ” media=”(min−width : 1001 px )” href=” .
/ex14_exemple_miseEnPage . css ” />
7 <!−− MISE EN PAGE POUR PETITS ÉCRANS : menu en haut −−>
8 <l i nk rel=” s t y l e s h e e t ” media=”(max−width : 1000 px )” href=” .
/ex15_miseEnPage_2
9 . css ” />
10 <t i t l e>Exemple de mise en page</ t i t l e>
11 </head>
12 <body>
13 <header>
14 <h1>Exemple de mise en page</h1>
15 </header>
16 <div class= ” content ”>
17 <nav>
18 <h1>N avigation</h1>
74
 Chapitre 2 : Styles CSS et mise en page

19 <l i>
20 <a href=” . /coucou . html ” >l i e n 1</a>
21 </ l i>
22 <l i>
23 <a href=” . / t o t o . html ” >l i e n 2</a>
24 </ l i>
25 <l i>
26 <a href=” . / t i t i . html ” >l i e n 2</a>
27 </ l i>
28 </u l>
29 </nav>
30 <a r t i c l e>
31 <h1>Corps du te x te</h1>
32 <p>
33 Nous mettons i c i l e corps du te x te . Paragraphe 1 .
34 </p>
35 <p>
36 Notons que l e s l i e n s dans l e menu n’ ont pas l e
37 même as p e ct que l e s l i e n s dans l e te x te . Le
38 style e s t propre à chaque z ône de l a page .
39 </p>
40 <p>
41 Ceci e s t <a href=” . / t o t o . html ”>un l i e n</a> normal
42 </p>
43 </a r t i c l e>
44 </div>
45 <footer>
46 &copy ; RM 2012 .
47 </ footer>
48 </body>
49 </html>

Notons qu’on peut aussi créer des styles différents selon l’écran balise par balise au cas par
cas, comme dans l’exemple de code suivant :

1 /@media ( min−width : 400 px ) and (max−width : 500

2 px ) { ta b l e tbody t r td {
3 padding 10 px ;
4 }
5 }
6
@media ( min−width : 501
7 px ) { ta b l e tbody t r td
8 {
9 padding 20 px ;
10 }
11 }

Ou peut aussi prendre en compte le changement d’orientation de l’affichage d’un mobile en

portrait ou paysage :

1 / <!−− MISE EN PAGE POUR L’ORIENTATION PAYSAGE : menu à

2 gauche −−>
<l i nk rel=” s t y l e s h e e t ” media=”( o r i e n t a t i o n :l andscape
3 )” href=” .
75
 Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS

4 <l i nk rel=” s t y l e s h e e t ” media=”( o r i e n t a t i o n : p o r t r a i t )” href=” .

/ex15_miseEnPage_2 . css ” />

76