Vous êtes sur la page 1sur 61

,

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 : styles 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 légende . . . . . . . . . . . . . . . . . . . . . . . . 24
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 S t r i c t / / E N ”
2 ” h t t p ://www . w3 . org/TR/xhtml1/DTD/xhtml1−strict . d t d ”>
3 <!−− Dé c l a r a t i o n du debut d’un document HTML avec l a l a n g u e : −−>
4 <html xml :lang=” en ” lang=” en ” xmlns=” h t t p ://www . w3 . o r g / 1 9 9 9 / x h t m l ”>
5 <head> <!−− dé but de l ’ e n − t ê t e HTML −−>
6 <!−− Dé c l a r a t i o n du type d ’ e n c o d a g e −−>
7 <meta http−equiv=” Content−Type ” content=” t e x t / h t m l ; c h a r s e t = u t f − 8 ” />
8 <!−− T i t r e de l a page dans l a f e n ê t r e ou l ’ o n g l e t du n a v i g a t e u r −−>
9 <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>
10 </head>
11 <body>
12 <p>H e l l o w o r l d !</p>
13 </body>
14 </html>

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

exemples/ChapitreHTML/ex02_helloWorldHtml5.html
1 /<! d o c t y p e html>
2 <!−− D e c l a r a t i o n du debut d’un document HTML avec l a l a n g u e : −−>
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 ’ e n c o d a g e −−>
7 <!−− T i t r e de l a page dans l a f e n ê t r e ou l ’ o n g l e t du n a v i g a t e u r −−>
8 <t i t l e>My f i r s t HTML 5 document</ t i t l e>
9 </head>
10 <body>
11 <p>
12 Hello world !
13 </p>
14 </body>
15 </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 /<! d o c t y p e 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 <!−− V o i c i l ’ e n − t e t e q u i 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 l a page −−>
5 <head> <!−− debut de l ’ e n − t e t e HTML −−>

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 t s . . . −−>


7 <meta charset=”UTF−8” />
8 <!−− T i t r e de l a page ( a u s s i t i t r e de l a f e n ê t r e du n a v i g a t e u r ) −−>
9 <t i t l e>P r e m i è r e s b a l i s e s HTML</ t i t l e>
10 </head>
11 <body> <!−− dé but du c o r p s HTML −−>
12 <h1>Mon p r e m i e r f i c h i e r HTML</h1>
13 <p> <!−− Nouveau p ar a gr aph e ( s a u t de l i g n e ) −−>
14 C e c i e s t mon p r e m i e r f i c h i e r HTML. <br /> <!−− à l a l i g n e −−>
15 Le ” body ” r e p r é s e n t e l e c o r p s du document ,
16 dans l e q u e l on met l e t e x t e à a f f i c h e r .
17 </p> <!−− Fin de pa r ag r a phe −−>
18 <p>
19 Le h e a d e r ( 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 e s du document ,
20 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 page e t d e s é l é ments de s t y l e .
21 </p>
22 </body> <!−− f i n du c o r p s HTML −−>
23 </html> <!−− f i n du code HTML −−>

1.5 Structure du texte en HTML

exemples/ChapitreHTML/ex04_structure_document.html
1 /<! d o c t y p e 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 <!−− V o i c i l ’ e n − t e t e q u i 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 l a page −−>
5 <head> <!−− debut de l ’ e n − t e t e HTML −−>
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 t s . . . −−>
7 <meta charset=”UTF−8” />
8 <!−− T i t r e de l a page ( a u s s i t i t r e de l a f e n ê t r e du n a v i g a t e u r ) −−>
9 <t i t l e>S t r u c t u r e d’un document HTML</ t i t l e>
10 </head>
11 <body> <!−− dé but du c o r p s HTML −−>

6
Chapitre 1 : Pages web statiques HTML5

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


13 <p>
14 HTML e s t un l a n g a g e de d e s c r i p t i o n de documents non WISIWIG,
15 c ’ e s t à d i r e que l e f i c h i e r s o u r c e ne r e s s e m b l e pas vraiment
16 au document t e l que l ’ u t i l i s a t e u r f i n a l l e v e r r a .<br />
17 WISIWIG : <em>What You See I s What You Get</em>.
18 </p>
19 <p>
20 En HTML, l e s <em>b a l i s e s</em>, q u i s o n t e n c a d r é e s par d e s &l t ; e t &g t ; ,
21 <s trong>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 a r a c t é r i s a n t
d i f f é rentes
22 p a r t i e s du document ( t i t r e s , p a r a g r a ph e s , t a b l e a u x , é l é ment important ,
23 l i s t e à puces , images , o b j e t s de type v i d é o f l a s h , multim é d i a pour <em>
HTML5</em>, e t c .
24 </p>
25 <p>
26 Par exemple , l a b a l i s e &l t ; p&g t ; &l t ; /p&g t ; dé l i m i t e un
27 par ag r ap he . Un c o u p l e de b a l i s e s avec du t e x t e a n t r e l e s b a l i s e s s ’ a p p e l l e
un
28 <em>é l é ment</em>.
29 </p>
30 </body> <!−− f i n du c o r p s HTML −−>
31 </html> <!−− f i n du code HTML −−>

1.6 Mise en forme du texte HTML : styles CSS

exemples/ChapitreHTML/ex05_mise_en_forme_locale.html
1 /<! d o c t y p e 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 <!−− V o i c i l ’ e n − t e t e q u i 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 l a page −−>
5 <head> <!−− debut de l ’ e n − t e t e HTML −−>
6 <meta charset=”UTF−8” /> <!−− D e c l a r a t i o n du type d ’ e n c o d a g e −−>
7 <!−− T i t r e de l a page ( a u s s i t i t r e de l a f e n ê t r e du n a v i g a t e u r ) −−>
8 <t i t l e>S t y l e CSS HTML l o c a u x</ t i t l e>

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

9 </head>
10 <body style= ” font −family : A r i a l Verdana ; font−s i z e : 125% ; width : 800 px ; ”> <!−−
dé but du c o r p s 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 s t y l e <em>CSS</em> d e s é l é ments permet l a mise en forme ( position , t a i l l e
, c o u l e u r , p o l i c e , bordure , . . . )
14 d’un é l é ment e t de son contenu .
15 </p>
16 <p style= ” text−align : j u s t i f y ; ”>
17 Un t e x t e j u s t i f i é e s t un t e x t e 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 î t e e n g l o b a n t l e t e x t e . 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 t r é ) du t e x t e dans un é l é
ment .
20 </p>
21 <p style= ” text−align :c e n t e r ”>
22 La p r o p r i é t é <code>font−weight</code> permet de m e t t r e d e s <span style= ”
font−weight :b o l d ; ”>é l é ments en g r a s</span>
23 ou <span style= ” font−weight :b o l d e r ; ”>en t r è s g r a s</span>.
24 <br />
25 La p r o p r i é t é <code>font −variant</code> permet de m e t t r e d e s <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 m e t t r e d e s <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 <s trong>Ces p r o p r i é t é s ne d o i v e n t pas ê t r e c o n f o n d u e s avec l e s b a l i s e s &l t ;
s t r o n g&g t ; , &l t ; em&g t ; , e t c . q u i 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 i m p o r t a n t s , à s o u l i g n e r , e t c . . . )</s trong>
31 </p>

8
Chapitre 1 : Pages web statiques HTML5

32 </body> <!−− f i n du c o r p s HTML −−>


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

exemples/ChapitreHTML/ex06_mise_en_forme_globale.html
1 /<! d o c t y p e 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 <!−− V o i c i l ’ e n − t e t e q u i 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 l a page −−>
5 <head>
6 <meta charset=” utf−8 ” /> <!−− D e c l a r a t i o n du type d ’ e n c o d a g e −−>
7 <s tyl e>
8 /* Dé f i n i t i o n du s t y l e */
9 body {
10 font −family : A r i a l Verdana ;
11 font−s i z e : 125% ;
12 width : 800 px ;
13 }
14 p {
15 text−align : j u s t i f y ;
16 }/* mise en forme d e s p a r a g r a p h e s */
17 /* mise en forme du t i t r e */
18 h1 {
19 text−align : c e n t e r ;
20 font−s i z e : 150% ;
21 }

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

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


23 strong {
24 font −variant : small−caps ;
25 font−s i z e : 120% ;
26 }
27 </s tyl e>
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 c o r p s 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 t e x t e ou l e
graphisme .
34 De p l u s , une dé f i n i t i o n g l o b a l e du s t y l e de l a page e s t p l u s m o d u l a i r e ( un
seul endroit
35 à m o d i f i e r pour c h a n g e r t o u s l e s s t y l e s d e s b a l i s e s d’un même type .
36 Pour c e t t e r a i s o n , <s trong>on peut dé f i n i r l e s t y l e <em>CSS</em>
g l o b a l e m e n t</s trong> v i a une b a l i s e &l t ; s t y l e&g t ;
37 au n i v e a u de l ’ e n − t ê t e (& l t ; head&g t ; ) .
38 </p>
39 <p>
40 S i l ’ o n s o u h a i t e c h a n g e r l ’ a s p e c t d e s é l é ments s t r u c t u r e l s , par exemple
41 dont l ’ i m p o r t a n c e e s t s o u l i g n é e avec
42 &l t ; s t r o n g&g t ; &l t ; / s t r o n g&g t ; ,
43 on l e dé f i n i t au n i v e a u du s t y l e 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 t y p o g r a p h i q u e s ( font e , . . . ) e t l a mise
47 en page ( a l i g n e m e n t à gauche , à d r o i t e , j u s t i f i é , e t c . ) du t e x t e
48 dans l e s d i f f é r e n t s é l é ments d ’ u n e page HTML au n i v e a u de l ’ e n − t ê t e .
49 </p>
50 <p>
51 Enfin , s i l ’ o n s o u h a i t e c h a n g e r l e s t y l e l o c a l e m e n t pour dé c o r e r
52 s a n s 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 <s trong style= ” font
−variant :normal ; ”>s u r c h a r g e r l e s t y l e g l o b a l</s trong>
53 localement .
54 On peut a u s s i u t i l i s e r<span style= ” font −family :Comic Sans MS; font−s i z e
:150%”> l a b a l i s e g é né r i q u e &l t ; span&g t ;& l t ; /span&g t ; . </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 t e x t e s a n s m o d i f i e r l a s t r u c t u r e .
56 </p>
57 </body> <!−− f i n du c o r p s HTML −−>
58 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex07_couleurs.html
1 /<! d o c t y p e html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf−8 ” />
5 <s tyl e>
6 /* Dé f i n i t i o n du s t y l e */
7 body {
8 font−s i z e : 125% ;
9 background−color : #c 0 c 0 c 0 ; /* font e par d é f a u t */
10 color : #333333 ;
11 font−weight : b o l d

10
Chapitre 1 : Pages web statiques HTML5

12 }
13 p {
14 text−align : j u s t i f y ;
15 }/* mise en forme d e s p a r a g r a p h e s */
16 /* mise en forme du t i t r e */
17 h1 {
18 text−align : c e n t e r ;
19 font−s i z e : 150% ;
20 background−color : #ddd ;
21 border −style : s o l i d ;
22 border−color : b l a c k ;
23 border−width : 2px ;
24 }
25 /* mise en forme é l é mentt i m p o r t a n t l e s 120% s o n t r e l a t i f au c o n t e x t e */
26 strong {
27 background−color : w h i t e ;
28 color : b l a c k ;
29 font−weight : b o l d e r ;
30 }
31 </s tyl e>
32 <t i t l e>Dé f i n i t i o n d e s 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 d e s c o u l e u r s dans dans un s t y l e CSS </h1>
36 <p>
37 Dans l e s t y l e 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 d e s d i f f é r e n t s
38 é l é ments .
39 </p>
40 <p>
41 Les s i t e s web ont en g é né r a l une <s trong>c h a r t e g r a p h i q u e</s trong> q u i
42 comprend un p e t i t nombre de c o u l e u r s b i e n harmonis é e s q u i s y m b o l i s e n t b i e n
43 l ’ e n t i t é que r e p r é s e n t e l e s i t e .
44 </p>
45 <p>
46 Dans l e s e n t r e p r i s e s , c e s o n t s o u v e n t d e s p e r s o n n e s d i f f é r e n t e s q u i
47 s ’ o c c u p e n t du s t y l e CSS ou q u i s ’ o c c u p e n t du contenu e t d e s f o n c t i o n a l i t é s
48 du s i t e .
49 </p>

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

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 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>F e u i l l e s de S t y l e <i>CSS</ i></ t i t l e>
7 </head>
8 <body>
9 <h1> Cr é e r une f e u i l l e de s t y l e CSS </h1>
10 <p>

12
Chapitre 1 : Pages web statiques HTML5

11 Le s t y l e <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 é


par é
12 du f i c h i e r <i>HTML</ i>.
13 </p>
14 <p>
15 Cel à permet d’augmenter l a m o d u l a r i t é du code d’un s i t e web c a r
16 l e s t y l e <i>CSS</ i> de t o u t e s l e s page s d’un même s i t e peut ê t r e
17 dé f i n i à un s e u l e n d r o i t .
18 </p>
19 <p>
20 S ’ i l f a u t c h a n g e r l e s t y l e d’un c e r t a i n type de b a l i s e s dans t o u t l e s i t e ,
21 i l n ’ y a qu’un s e u l e n d r o i t à c h a n g e r . ;−)
22 </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 : A r i a l Verdana ;
4 font−s i z e : 125% ; /* f a c t e u r d ’ é v h e l l e s u r 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 background−color : #c 0 c 0 c 0 ; /* font e par d é f a u t */
6 color : #333333 ; /* c o u l e u r du t e x t e g l o b a l e */
7 }
8 /* mise en forme d e s p a r a g r a p h e s */
9 p {
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 p a r a g r a p h e s */
11 }
12 /* mise en forme du t i t r e */
13 h1 {
14 text−align : c e n t e r ; /* t e x t e c e n t r é */
15 font−s i z e : 150% ; /* f a c t e u r d ’ é c h e l l e de l a p o l i c e */
16 background−color : #ddd ; /* c o u l e u r du f o n d */
17 border −style : s o l i d ; /* b o r d u r e en t r a i t p l e i n */
18 border−color : b l a c k ; /* c o u l e u r du bor d */
19 border−width : 2px ; /* é p a i s s e u r du bor d */
20 border−r a d i u s : 10 px ; /* b o r d u r e a r r o n d i e */
21 }
22 /* mise en forme é l é mentt i m p o r t a n t l e s 120% s o n t r e l a t i f au c o n t e x t e */

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

23 strong {
24 color : b l a c k ; /* t e x t e n o i r */
25 font−weight : b o l d e r ; /* e x t r a g r a s */
26 font −variant : small−caps ; /* p e t i t e s c a p i t a l e s */
27 }

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 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>L i e n s h y p e r t e x t e</ t i t l e>
7 </head>
8 <body>
9 <!−− dé but du c o r p s HTML −−>
10 <h1>L i e n s h y p e r t e x t e</h1>
11 <div>
12 <s trong>On peut c r é e r d i f f é r e n t s t y p e s de l i e n s :</s trong>
13 <u l>
14 <!−− l i s t e à p u c e s −−>
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<
/a>.
17 </ l i>

14
Chapitre 1 : Pages web statiques HTML5

18 <l i>
19 l i e n s h y p e r t e x t e en a b s o l u : <a href=” h t t p ://www . r e m y s p r o g w e b t u t o .
o r g / e x e m p l e s / h t m l / e x _ i m a g e s . html ” > c l i q u e z i c i</a>.
20 </ l i>
21 <l i>
22 l i e n s v e r s une a n c r e v e r s un a u t r e emplacement dans l a page : <a href=
”#monParagraphe ” >Voir l e deuxième p ar a gr a ph e</a>
23 </ l i>
24 </u l>
25 </div>
26 <p id=” monParagraphe ” style= ” font−s i z e : 150% ; font−weight : b o l d e r ; ”>
27 Pour f a i r e d e s l i e n s v e r s l e s i t e même , i l vaut t o u j o u r s mieux
28 u t i l i s e r d e s l i e n s en r e l a t i f s c a r s i on démé nage l e s i t e ( ou
29 s i on r é c u p è r e 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 .
30 ( à c o n d i t i o n de g a r d e r l ’ a r b o r e s c e n c e d e s r é p e r t o i r e s t e l l e q u e l l e )
31 <br />
32 &Eacute ; v i t e z l e s chemins du g e n r e :
33 <br />
34 <code>
35 ”C :/ j e / t o u r n e / p a s / s u r / u n / s e r v e u r / l i n u x . html ”</code>
36 </p>
37 </body>
38 <!−− f i n du c o r p s HTML −−>
39 </html>
40 <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex10_liens_mise_en_forme.html
1 /<! d o c t y p e html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf−8 ” />

15
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=” . /myStyle . c s s ” />


6 <s tyl e>
7 /* s t y l e par d é f a u t d e s l i e n s */
8 a :l i n k {
9 text−decoration : none ;
10 color : #00e ; /* b l e u c l a i r */
11 }
12 /* s t y l e d e s 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 d e s 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 ; /* r o u g e v i f */
21 }
22 </s tyl e>
23 <t i t l e>L i e n s h y p e r t e x t e ( 2 )</ t i t l e>
24 </head>
25 <body>
26 <!−− dé but du c o r p s HTML −−>
27 <h1>Mise en forme d e s l i e n s h y p e r t e x t e</h1>
28 <div>
29 <s trong>On peut c r é e r d i f f é r e n t s t y p e s de l i e n s :</s trong>
30 <u l>
31 <!−− l i s t e à p u c e s −−>
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 a b s o l u : <a href=” h t t p ://www . r e m y s p r o g w e b t u t o .
o r g / e x e m p l e s / h t m l / e x _ i m a g e s . html ” > c l i q u e z i c i</a>.
37 </ l i>
38 <l i>
39 l i e n s v e r s une a n c r e v e r s un a u t r e emplacement dans l a page : <a href=
”#monParagraphe ” >Voir l e deuxième p ar a gr a ph e</a>
40 </ l i>
41 </u l>
42 </div>
43 <p id=” monParagraphe ” style= ” font−s i z e : 150% ; font−weight : b o l d e r ; ”>
44 Pour f a i r e d e s l i e n s v e r s l e s i t e même , i l vaut t o u j o u r s mieux
45 u t i l i s e r d e s l i e n s en r e l a t i f s c a r s i on démé nage l e s i t e ( ou
46 s i on r é c u p è r e 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 g a r d e r l ’ a r b o r e s c e n c e d e s r é p e r t o i r e s t e l l e q u e l l e )
48 <br />
49 &Eacute ; v i t e z l e s chemins du g e n r e :
50 <br />
51 <code>
52 ”C :/ j e / t o u r n e / p a s / s u r / u n / s e r v e u r / l i n u x . html ”</code>
53 </p>
54 </body>
55 <!−− f i n du c o r p s HTML −−>
56 </html>
57 <!−− f i n du code HTML −−>

16
Chapitre 1 : Pages web statiques HTML5

1.9 Tableaux

exemples/ChapitreHTML/ex11_tableaux.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>Tableaux en HTML</ t i t l e>
7 </head>
8 <body>
9 <!−− dé but du c o r p s HTML −−>
10 <h1>Tableaux en HTML 5</h1>
11
12 <p>
13 V o i c i une t a b l e avec l e s t y l e par dé f a u t . Le rendu e s t un peu sommaire .
14 </p>
15 <table>
16 <caption> <!−− Lé gende ( t i t r e ) de l a t a b l e −−>
17 Exemple de t a b l e s a n s mise en forme
18 </caption>
19 <tbody><!−− c o r p s de l a t a b l e −−>
20 <tr><!−− n o u v e l l e l i g n e −−>
21 <td><!−− n o u v e l l e case −−>
22 C e c i e s t l a case<br />d ’ e n haut à gauche
23 </td>
24 <td><!−− n o u v e l l e case −−>
25 C e c i e s t l a case<br />d ’ e n haut au m i l i e u
26 </td>
27 <td><!−− n o u v e l l e case −−>
28 C e c i e s t l a case<br />d ’ e n 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 C e c i e s t l a case<br />d ’ e n bas à gauche
34 </td>
35 <td><!−− n o u v e l l e case −−>
36 C e c i e s t l a case<br />d ’ e n bas au m i l i e u

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

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

exemples/ChapitreHTML/ex12_tableaux_th.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>Tableaux en HTML ( 2 )</ t i t l e>
7 </head>
8 <body>
9 <!−− dé but du c o r p s HTML −−>
10 <h1>Tableaux : en−t ê t e de l i g n e s e t de c o l o n n e s</h1>
11
12 <p>
13 V o i c i une t a b l e avec l e s t y l e par dé f a u t e t avec d e s en−t ê l e ( t i t r e s ) de
l i g n e et colonne .
14 </p>
15 <table>
16 <caption>
17 Exemple de t a b l e s a n s mise en forme
18 </caption>
19 <thead><!−− En−tê t e de l a t a b l e −−>
20 <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 ) −−>
21 <th ></th><!−− case v i d e en haut à gauche −−>
22 <th ><s trong>Colonne 1</s trong></th>
23 <th><s trong>Colonne 2</s trong></th>

18
Chapitre 1 : Pages web statiques HTML5

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


25 </ tr>
26 </thead>
27 <tbody><!−− c o r p s de l a t a 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 <s trong>l i g n e&nbsp ; 1</s trong>
31 </th>
32 <td><!−− n o u v e l l e case −−>
33 C e c i e s t l a case<br />
34 d ’ e n haut à gauche
35 </td>
36 <td><!−− n o u v e l l e case −−>
37 C e c i e s t l a case<br />
38 d ’ e n haut au m i l i e u
39 </td>
40 <td><!−− n o u v e l l e case −−>
41 C e c i e s t l a case<br />
42 d ’ e n haut à d r o i t e
43 </td>
44 </ tr>
45 <tr><!−− n o u v e l l e l i g n e −−>
46 <th><!−− t i t r e de l i g n e −−>
47 <s trong>l i g n e&nbsp ; 2</s trong>
48 </th>
49 <td><!−− n o u v e l l e case −−>
50 C e c i e s t l a case<br />
51 d ’ e n bas à gauche
52 </td>
53 <td><!−− n o u v e l l e case −−>
54 C e c i e s t l a case<br />
55 d ’ e n bas au m i l i e u
56 </td>
57 <td><!−− n o u v e l l e case −−>
58 C e c i e s t l a case<br />
59 d ’ e n bas à d r o i t e
60 </td>
61 </ tr>
62 </tbody>
63 </table>
64 </body><!−− f i n du c o r p s HTML −−>
65 </html>
66 <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex13_tableaux_mise_en_forme.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <s tyl e>
7 @import u r l ( . / e x 1 3 _ s t y l e s h e e t _ t a b l e a u x . c s s ) ;
8 </s tyl e>
9 <t i t l e>Tableaux en HTML ( 3 )</ t i t l e>
10 </head>

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

11 <body>
12 <!−− dé but du c o r p s HTML −−>
13 <h1>Tableaux : mise en forme</h1>
14 <table>
15 <caption>
16 Exemple de t a b l e avec mise en forme
17 </caption>
18 <thead><!−− En−tê t e de l a t a 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><!−− case v i d e en haut à
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><!−− c o r p s de l a t a 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 C e c i e s t l a case<br />
33 d ’ e n haut à gauche
34 </td>
35 <td><!−− n o u v e l l e case −−>
36 C e c i e s t l a case<br />
37 d ’ e n haut au m i l i e u
38 </td>
39 <td><!−− n o u v e l l e case −−>
40 C e c i e s t l a case<br />
41 d ’ e n haut à d r o i t e
42 </td>

20
Chapitre 1 : Pages web statiques HTML5

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 C e c i e s t l a case<br />
50 d ’ e n bas à gauche
51 </td>
52 <td><!−− n o u v e l l e case −−>
53 C e c i e s t l a case<br />
54 d ’ e n 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 C e c i e s t l a case<br />
58 d ’ e n bas à d r o i t e
59 </td>
60 </ tr>
61 </tbody>
62 </table>
63 <p>
64 <s trong>Remarque .</s trong> La p r o p r i é t é <i>CSS</ i> <code>border −radius</
code> permet de c r é e r
65 d e s a n g l e s a r r o n d i s pour l e s b o r d u r e s . E l l e peut s e dé f i n i r g l o b a l e m e n t
pour l e s 4 a n g l e s
66 ( v o i r i c i l e s t y l e de l a b a l i s e &l t ; t a b l e&g t ; dans l a f e u i l l e de s t y l e d e s
tableaux )
67 du bord ou b i e n i n d i v i d u e l l e m e n t pour chaque a n g l e ( v o i r i c i l e s s t y l e s
l o c a u x s u r &l t ; th&g t ; e t &l t ; td&g t ; ) .
68 </p>
69 </body><!−− f i n du c o r p s HTML −−>
70 </html>
71 <!−− 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 t a b l e { /* mise en forme d e s t a b l e s */ s
3 background−color : #ddd ; /* f o n d g r i s */
4 /* Paramètres ombrage : bas , d r o i t e , d é grad é , c o u l e u r */
5 box−shadow : 8px 8px 22 px #000 ; /* Ombrage aux b o r d s de l a t a b l e */
6 border−width : 3px ; /* é p a i s s e u r du t r a i t pour l e bor d */
7 border −style : s o l i d ; /* bord en t r a i t c o n t i n u */
8 border−color : b l a c k ; /* 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−s i z e :130% ;
14 }
15 t r td { /* mise en forme d e s c e l l u l e s */
16 border −style : dashed ; /* bord en p o i n t i l l é s */
17 border−width : 2px ; /* é p a i s s e u r du t r a i t pour l e bor d */
18 border−color : b l a c k ; /* c o u l e u r du bord */
19 background−color : w h i t e ; /* f o n d b l a n c */
20 color : b l a c k ; /* c o u l e u r du t e x t e */

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

21 text−align : c e n t e r ; /* t e x t e c e n t r é */
22 padding : 20 px ; /* e s p a c e e n t r e l e t e x t e e t l e bord de l a c e l l u l e */
23 }
24 th { /* mise en forme d e s en−t ê t e de l i g n e e t c o l o n n e */
25 border −style : s o l i d ; /* bor d en t r a i t c o n t i n u */
26 border−width : 2px ; /* é p a i s s e u r du t r a i t pour l e bor d */
27 border−color : b l a c k ; /* c o u l e u r du bord */
28 text−align : c e n t e r ; /* t e x t e c e n t r é */
29 font−weight : b o l d e r ; /* c a r a c t è r e s g r a s appuy é */
30 color : b l a c k ; /* c o u l e u r du t e x t e */
31 padding : 20 px ; /* e s p a c e e n t r e 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).

22
Chapitre 1 : Pages web statiques HTML5

exemples/ChapitreHTML/ex14_images.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>I n s e r t i o n d ’ i m a g e s en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du c o r p s HTML −−>
9 <h1>I n s e r t i o n d ’ i m a g e s 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&g t ;&nbsp ; :<br />
12 </p>
13 <p style= ” text−align : c e n t e r ; ”>
14
15
16 <img src=” . / p i c / g i m p . png ” alt=”The GIMP Logo ” width=” 150 ”
17 style= ” vertical−align : m i d d l e ; ”
18 />
19 <img src=” . /pic/3d−gnu−head_petit . png ” width=” 150 ”
20 alt=”The GNU Logo ”
21 style= ” vertical−align : m i d d l e ; ”
22 />
23 </p>
24 <p>
25 On peut r e t o u c h e r l e s images avec l e l o g i c i e l GNU GIMP<br />
26 voyez l a
27 <a href=” . / p i c / c a p t u r e _ g i m p . png ”>c a p t u r e d ’ é c r a n</a> montrant
28 comment di m i nu e r l e nombre de p i x e l s d ’ u n e image pour en d im i n u e r l e
29 p o i d s ( en m e g a o c t e t s ) .
30 </p>
31
32 </body> <!−− f i n du c o r p s HTML −−>
33 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex15_images_avec_click.html
1 /<! d o c t y p e html>
2 <html lang=” f r ”>

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

3 <head >
4 <meta charset=” utf−8 ” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
6 <t i t l e>C l i c k s u r une image en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du c o r p s HTML −−>
9 <h1>C l i c k s u r 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&g t ;&nbsp ; :<br />
12 </p>
13 <p style= ” text−align : c e n t e r ; ”>
14 C l i q u e z s u r l e GNU pour l e v o i r en grand :<br />
15 <img src=” . / p i c / g i m p . png ” alt=”The GIMP Logo ” width=” 150 ”
16 style= ” vertical−align : m i d d l e ; ”
17 />
18 <a href=” . /pic/3d−gnu−head_fond_transp . png ” >
19 <img src=” . /pic/3d−gnu−head_petit . png ” width=” 150 ”
20 alt=”The GNU Logo ”
21 style= ” vertical−align : m i d d l e ; ”
22 />
23 </a>
24 </p>
25
26 </body> <!−− f i n du c o r p s HTML −−>
27 </html> <!−− f i n du code HTML −−>

1.11 Figures et sous-figures avec légende

exemples/ChapitreHTML/ex16_figure.html
1 /<! d o c t y p e html>

24
Chapitre 1 : Pages web statiques HTML5

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=” . /myStyle . c s s ” />
6 <t i t l e>F i g u r e s avec l é g e n d e s en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du c o r p s HTML −−>
9 <h1>F i g u r e s avec l é gende en HTML</h1>
10 <p>
11 On c r é e une f i g u r e c o n t e n a n t une image avec l a b a l i s e &l t ; f i g u r e&g t ;&nbsp
; :<br />
12 </p>
13 <f i g u r e style= ” text−align :c e n t e r ; ”>
14 <img src=” . / p i c / g i m p . png ” alt=”The GIMP Logo ” width=” 150 ”
15 style= ” vertical−align : m i d d l e ; ”
16 />
17 <figcaption>Le Logo de <i>GIMP</ i></ figcaption>
18 </ f i g u r e>
19 <f i g u r e style= ” text−align :c e n t e r ; ”>
20 <img src=” . /pic/3d−gnu−head_petit . png ” width=” 150 ”
21 alt=”The GNU Logo ”
22 style= ” vertical−align : m i d d l e ; ”
23 />
24 <figcaption>Le Logo de <i>GNU</ i></ figcaption>
25 </ f i g u r e>
26 </body> <!−− f i n du c o r p s HTML −−>
27 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex17_subfigure.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />

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

6 <t i t l e>S o u s − f i g u r e s avec l é ge n d e s en HTML</ t i t l e>


7 </head>
8 <body> <!−− dé but du c o r p s HTML −−>
9 <h1>S o u s − f i g u r e s avec l é g e n d e s en HTML</h1>
10 <p>
11 On c r é e d e s s o u s − f i g u r e s en i m b r i q u a n t b a l i s e s &l t ; f i g u r e&g t ;&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 s e mettent l ’ u n e à c ô t é de l ’ a u t r e
avec
13 l a p r o p r i é t é <i>CSS</ i> <code>” display : i n l i n e − b l o c k ; ”</code>.
14 </p>
15 <f i g u r e style= ” text−align :c e n t e r ; ”>
16 <f i g u r e style= ” display :i n l i n e − b l o c k ; ”>
17 <img src=” . / p i c / g i m p . png ” alt=”The GIMP Logo ” width=” 150 ”
18 style= ” vertical−align : m i d d l e ; ”
19 />
20 <figcaption><b>( a )</b> Le Logo de <i>GIMP</ i></ figcaption>
21 </ f i g u r e>
22 <f i g u r e style= ” display :i n l i n e − b l o c k ; ”>
23 <img src=” . /pic/3d−gnu−head_petit . png ” width=” 150 ”
24 alt=”The GNU Logo ”
25 style= ” vertical−align : m i d d l e ; ”
26 />
27 <figcaption><b>( b )</b> Le Logo de <i>GNU</ i></ figcaption>
28 </ f i g u r e>
29 <figcaption><b>F i g u r e 1 .</b> Exemples de l o g o s de l o g i c i e l s ou l i c e n c e s Open
S o u r c e</ figcaption>
30 </ f i g u r e>
31 </body> <!−− f i n du c o r p s HTML −−>
32 </html> <!−− f i n du code HTML −−>

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

26
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 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>É l é ments de type ” b l o c k ”</ 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 o c k ”</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 t y p e s de b a l i s e s&nbsp ; : i n l i n e ou b l o c k
.
12 </p>
13 <o l>
14 <l i>
15 <s trong>Exemples de b a l i s e s de type b l o c k&nbsp ; :</s trong>
16 <br />
17 <o l type=”a ”>
18 <l i>
19 &l t ; p&g t ;&nbsp ; : nouveau p ar a gr a ph e&#59 ;
20 </ l i>
21 <l i>
22 &l t ; t a b l e&g t ;&nbsp ; : t a b l e a u c o n t e n a n t d e s donn é e&#59 ;
23 </ l i>
24 <l i>
25 &l t ; h1&g t ;&nbsp ; , . . . , &l t ; h6&g t ;&nbsp ; : d i f f é r e n t s
26 ni v e a u x de t i t r e &#59 ;
27 </ l i>
28 <l i>
29 &l t ; d l&g t ;&nbsp ; : l i s t e de dé f i n i t i o n &#59 ;
30 </ l i>
31 <l i>
32 &l t ; u l&g t ;&nbsp ; : l i s t e non ordonn é e&#59 ;
33 </ l i>
34 <l i>
35 &l t ; o l&g t ;&nbsp ; : l i s t e ordonn é e&#59 ;
36 </ l i>
37 <l i>
38 &l t ; p r e&g t ;&nbsp ; : i n s e r t i o n de code ( p r e f o r m a t e d text ) ” v e r b a t i m ”
39 en p o l i c e t y p e w r i t e 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 </ o l>
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 e t l e u r n a t u r e
43 au n i v e a u s t r u c t u r e l e t é 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 e c a s du l i e n
44 ou de l ’ i m a g e .
45 <br />
46 En <i>HTML5</ i>, on t r o u v e a u s s i l e s b a l i s e s s é mantiques &l t ; h e a d e r&g t ; ,
&l t ; f o o t e r&g t ; , &l t ; nav&g t ; , e t c . que nous v e r r o n s p l u s l o i n .
47 </ l i>
48 </ o l>
49 </body>
50 </html>

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 /<! d o c t y p e 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=” . /myStyle . c s s ” />
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 <o l 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 <o l type=”a”>
13 <l i>&l t ; span&g t ;&nbsp ; : changement l o c a l de s t y l e&nbsp ;&#59 ;</ l i>
14 <l i>&l t ; a&g t ;&nbsp ; : l i e n h y p e r t e x t e &#59 ;</ l i>
15 <l i>&l t ; s t r o n g&g t ;&nbsp ; : é l é ment i m p or t a nt&#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&g t ;&nbsp ; : c i t a t i o n c o u r t e &#59 ;</ l i>
18 <l i>&l t ; code&g t ;&nbsp ; : t e x t e en p o l i c e <code>t y p e w r i t e r</code></ l i>
19 </ o l>
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 n a t u r e
21 au n i v e a u s t r u c t u r e l n i l e u r position dans l e document .
22 </ l i>
23 </ o l>
24 <p>
25 Tout é l é ment i n l i n e d o i t ê t r e contenu dans au moins un b l o c k . 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&g t ;&nbsp ; e t l e s b l o c k s t i t r e
27 &l t ; h1&g t ;&nbsp ; , . . . , &l t ; h6&g t ;&nbsp ; ne peuvent c o n t e 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 t e n i r aucun é l é ment de type b l o c k ;
29 </p>
30 </body>
31 </html>

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.

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

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 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>P r o p r i é t é display</ t i t l e>
7 </head>
8 <body>
9 <h1>P r o p r i é t é display</h1>
10 <p style= ”border −style : g r o o v e ; display : i n l i n e − b l o c k ; vertical−align :
m i d d l e ; ”>
11 Ce p r e m i e r paragraphe ,<br />avec un bord en t r a i t 3D,
12 <br />e s t un p ar a gr a ph e en i n l i n e − b l o c k .
13 </p>

30
Chapitre 2 : Styles CSS et mise en page

14 <p style= ”border −style : dashed ; display : i n l i n e − b l o c k ; vertical−align :


m i d d l e ; ”>
15 Ce s e c o n d paragraphe , <br />avec un bord en t i r e t s ,
16 <br />e s t un p ar a gr a ph e en i n l i n e − b l o c .
17 </p>
18 <p style= ”border −style : s o l i d ; display : b l o c k ; vertical−align : m i d d l e ; ”>
19 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 ,
20 <br />e s t un p ar a gr a ph e normal de type b l o c k .
21 </p>
22 <p style= ”border −style : s o l i d ; display : none ; vertical−align : m i d d l e ; ”>
23 Ce q u a t r i è m e paragraphe , <br />avec un bord en t r a i t p l e i n ,
24 <br />e s t un p ar a gr a ph e en display : none ( non a f f i c h é ! ) .
25 </p>
26 <p style= ”border −style : d o t t e d ; display : i n l i n e ; vertical−align : m i d d l e ; ”>
27 Ce c i n q u i è m e paragraphe , <br />avec un bord en p o i n t i l l é s ,
28 <br />e s t un p ar a gr a ph e en i n l i n e .
29 </p>
30 </body>
31 </html>

2.2 Distinguer des parties dans un document : balise div

exemples/ChapitreCSS/ex04_div.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <t i t l e>La B a l i s e &l t ; d i v&g t ;</ t i t l e>
7 </head>
8 <body>

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

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


>
10 <div style= ”background−color : #f 8 5 ”>
11 <p>
12 <b>1 )</b> Un é l é ment &l t ; d i v&g t ; 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 ; d i v&g t ; e s t ( par dé f a u t ) de type b l o c k .
14 </p>
15 <p>
16 Cont r ai r e me n t aux p ar a g r a p h e s , un &l t ; d i v&g t ; peut c o n t e n i r d ’ a u t r e s
balises
17 de type b l o c k comme d ’ a u t r e s &l t ; d i v&g t ; , d e s p a r a g r ap h e s , d e s t a b l e a u x ,
etc .
18 </p>
19 </div>
20 <div style= ”background−color :w h i t e ; ”>
21 <p>
22 <b>2 )</b> Le &l t ; d i v&g t ; d i f f è r e d’un &l t ; span&g t ; en c e c i que l e span
est
23 ( par dé f a u t ) de type i n l i n e e t
24 <span style= ”background−color : b l a c k ; color : w h i t e ; border −radius : 5 px ; ”
>
25 l e &l t ; span&g t ; ne m o d i f i e pas vraiment l a s t r u c t u r e du document
26 </span>.
27 I l donne j u s t e un s t a t u t ou un s t y l e 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 ; d i v&g t ; , au c o n t r a i r e , permet de <s trong>d i v i s e r</s trong> l e
document en
31 p a r t i e s q u i peuvent ê t r e d i s p o s é e s au g r é de l a f a n t a i s i e du d e s i g n e r .
32 Le &l t ; d i v&g t ; e s t l a b a s e de l a d i v i s i o n d e s page s en d i f f é r e n t e s
parties .
33 </p>
34 </div>
35 </body>
36 </html>

2.3 Imbrication des balises et CSS

exemples/ChapitreCSS/ex05_imbrication_balises_et_CSS.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <s tyl e>
7 body p{
8 background−color : #777 ;
9 color : w h i t e ;
10 }
11 body d i v p{
12 background−color : #e e e ;

32
Chapitre 2 : Styles CSS et mise en page

13 color : #111 ;
14 }
15 body d i v d i v p{
16 background−color : #111 ;
17 color : #e e e ;
18 }
19 </s tyl e>
20 <t i t l e>I m b r i c a t i o n d e s b a l i s e s e t <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 d e s b a l i s e s e t <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 s u r l ’ i m b r i c a t i o n d e s
blocks )
26 s ’ i m b r i q u e r l e s unes dans l e s a u t r e s . I c i un pa r ag r a phe imbriqu é
directement
27 dans l e &l t ; body&g t ; .<br />
28 C ’ e s t l e s t y l e <code>body p</code> q u i s ’ a p p l i q u e i c i .
29 </p>
30 <div>
31 <p>
32 Le s t y l e <i>CSS</ i> d e s é l é ments peut ê t r e r é g l é d i f f é remment s u i v a n t
leur
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 p ar agr aph e imbriqu é dans un &
l t ; d i v&g t ;
34 lui−m ême imbriqu é d i r e c t e m e n t dans l e &l t ; body&g t ; .<br />
35 C ’ e s t l e s t y l e <code>body d i v p</code> q u i s ’ a p p l i q u e i c i .
36 </p>
37 <p>
38 I c i un a u t r e pa r a gr a phe imbriqu é dans un &l t ; d i v&g t ;
39 lui−m ême imbriqu é d i r e c t e m e n t dans l e &l t ; body&g t ; .<br />
40 C ’ e s t l e s t y l e <code>body d i v p</code> q u i s ’ a p p l i q u e i c i .
41 </p>
42 </div>

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

43 <div>
44 <p>
45 I c i e n c o r e un a u t r e p ar a gr a phe imbriqu é dans un &l t ; d i v&g t ;
46 lui−m ême imbriqu é d i r e c t e m e n t dans l e &l t ; body&g t ; .<br />
47 C ’ e s t l e s t y l e <code>body d i v p</code> q u i 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 par agr ap he imbriqu é dans un &l t ; d i v&g t ;
52 lui−m ême dans un &l t ; d i v&g t ; imbriqu é d i r e c t e m e n t dans l e &l t ; body&g t
; .<br />
53 C ’ e s t l e s t y l e <code>body d i v d i v p</code> q u i s ’ a p p l i q u e i c i .
54 </p>
55 </div>
56 </div>
57 </body>
58 </html>

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).

34
Chapitre 2 : Styles CSS et mise en page

exemples/ChapitreCSS/ex06_arborescenceCSS.html
1 /<! d o c t y p e 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_arborescenceCSS . c s s ” />
6 <t i t l e>A r b o r e s c e n c e de b a l i s e s</ t i t l e><t i t l e>A r b o r e s c e n c e de b a l i s e s e t CSS<
/ t i t l e>
7 </head>
8 <body>
9 <h1>T i t r e p r i n c i p a l</h1>
10 <p>
11 feuille 1
12 <a href=” . /my_url . html ”>f e u i l l e 2</a>
13 </p>
14 <div>
15 <div>
16 <p>
17 noeud 3 <span>f e u i l l e 4</span>
18 <p>
19 </div>
20 </div>
21 <div>
22 <u l>
23 <l i>
24 feuille 5
25 </ l i>
26 <l i>
27 feuille 6
28 </ l i>
29 </u l>
30 </div>
31 </body>
32 </html>

exemples/ChapitreCSS/ex06_arborescenceCSS.css
1 /* s t y l e par d é f a u t du t e x t e */
2 body {
3 font −family : times , s e r i f ;
4 font−s i z e :14pt ;
5 background−color : #c c c ;
6 color : #222 ;
7 }

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

8
9 h1 {
10 text−align : c e n t e r ;
11 }
12
13 div {
14 background−color : #f f 0 ;
15 }
16
17 p {
18
19 background−color : w h i t e ;
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 : r e d ;
31 text−align : c e n t e r ;
32 background−color : #ddd ;
33
34 }
35
36
37 d i v d i v p span {
38 font −family : Comic Sans MS;
39 font−s i z e :18pt ;
40 }
41
42
43 div ul {
44 background−color : #0 f f ;
45 color : r e d ;
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 /<! d o c t y p e 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=” . / e x 0 7 _ c l a s s e s _ c s s . c s s ” />
6 <t i t l e>C l a s s e s CSS</ t i t l e>
7 </head>
8 <body>

36
Chapitre 2 : Styles CSS et mise en page

9 <h1>C l a s s e s CSS</h1>
10 <p class= ” l a b e l ”>
11 Menu :
12 </p>
13 <o l class= ”menu”>
14 <l i>
15 <a class= ” boutton−ombre ” href=”#p a r t 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=”#p a r t 2 ” >À q u o i ç a s e r t&nbsp ; ?</a>
19 </ l i>
20 <l i>
21 <a class= ” boutton−ombre ” href=”#p a r t 2 ” >Exemple d ’ u s a g e</a>
22 </ l i>
23 </ o l>
24 <h2 id=” p a r t 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 p e r m e t t e n t 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 t e x t e s
27 dans l e s q u e l s l e s m i s e s en f o r m e s s o n t d i f f é r e n t e s ( v o i r <a class= ”
normalLink ” href=”#p a r t 2 ”>p a r t i e&nbsp ; 2</a>)
28 </p>
29 <h2 id=” p a r t 2 ”><b>2 )</b> À q u o i ç a s e r t&nbsp ; ?</h2>
30 <p>
31 A i n s i , d e s é l é ments q u i ont l e même n i v e a u d ’ i m b r i c a t i o n dans l e s b a l i s e s
32 p o u r r o n t a v o i r un s t y l e d i f f é r e n t s e l o n l e u r u s a g e .
33 </p>
34 <h2 id=” p a r t 3 ”><b>3 )</b> Exemple d ’ u s a g e</h2>
35 <p>
36 Par exemple , pour l e s l i e n s&nbsp ;
37 </p>
38 <o l>

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

39 <l i>l e s l i e n s dans un menu p o u r r o n t a v o i r l e s t y l e 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 a u r o n t un a s p e c t b l e u s o u l i g n é
,</ l i>
41 <l i>
42 ou e n c o r e l e s l i e n s v e r s l e s s p o n s o r s dans l e p i e d de page au r o n t
encore
43 un a u t r e a s p e c t .
44 </ l i>
45 </ o l>
46 </body>
47 </html>

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

38
Chapitre 2 : Styles CSS et mise en page

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

exemples/ChapitreCSS/ex08_classes_css_tableaux.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <!−− I n c l u s i o n de s t y l e s s u p p l é m e n t a i r e s avec ” i m p o rt ” −−>
7 <s tyl e>
8 @import u r l ( e x 0 8 _ c l a s s e s _ c s s _ t a b l e a u x . c s s ) ;
9 </s tyl e>
10 <t i t l e>S t y l e CSS de Tableaux</ t i t l e>
11 </head>

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

12 <body>
13 <!−− dé but du c o r p s HTML −−>
14 <h1>S t y l e <i>CSS</ i> de Tableaux</h1>
15
16 <div style= ”margin : 0 a u t o ; width : 800 px ; ”>
17 <table>
18 <caption>
19 Exemple de t a b l e
20 </caption>
21 <thead>
22 <tr>
23 <th class= ” i m p a i r ”>Colonne 1</th>
24 <th class= ” p a i r ”>Colonne 2</th>
25 <th class= ” i m p a i r ”>Colonne 3</th>
26 <th class= ” p a i r ”>Colonne4</th>
27 </ tr>
28 </thead>
29 <tbody>
30 <tr>
31 <td class= ” p a i r ”>C e c i e s t l a case&nbsp ; 1</td>
32 <td class= ” i m p a i r ”>C e c i e s t l a case &nbsp ; 2</td>
33 <td class= ” p a i r ”>C e c i e s t l a case &nbsp ; 3</td>
34 <td class= ” i m p a i r ”>C e c i e s t l a case &nbsp ; 4</td>
35 </ tr>
36 <tr>
37 <td class= ” p a i r ”>C e c i e s t l a case&nbsp ; 5</td>
38 <td class= ” i m p a i r ”>C e c i e s t l a case &nbsp ; 6</td>
39 <td class= ” p a i r ”>C e c i e s t l a case &nbsp ; 7</td>
40 <td class= ” i m p a i r ”>C e c i e s t l a case &nbsp ; 8</td>
41 </ tr>
42 <tr>
43 <td class= ” p a i r ”>C e c i e s t l a case&nbsp ; 9</td>
44 <td class= ” i m p a i r ”>C e c i e s t l a case &nbsp ; 1 0</td>
45 <td class= ” p a i r ”>C e c i e s t l a case &nbsp ; 1 1</td>
46 <td class= ” i m p a i r ”>C e c i e s t l a case &nbsp ; 1 2</td>

40
Chapitre 2 : Styles CSS et mise en page

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

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

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

46 background−color : #555 ;
47 }
48 caption {
49 background−color : b l a c k ;
50 color : w h i t e ;
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 /<! d o c t y p e html>
2 <html lang=” f r ”>
3 <head>
4 <meta http−equiv=” Content−Type ” content=” t e x t / h t m l ; charset=UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” type=” t e x t / c s s ” href=” . / e x 0 9 _ i d _ s e l e c t o r _ c s s . c s s ” />
6 <t i t l e>Sé l e c t e u r s de s t y l e par ID</ t i t l e>
7 </head>
8 <body>
9 <h1>Sé l e c t e u r s de s t y l e par ID</h1>
10 <h2 id=” p a r t i e 1 ”>1 ) Qu’est−ce qu’un <i>ID</ i> <i>HTML</ i>&nbsp ; ?</h2>
11 <p id=” p a r a g r a p h e 1 ”>
12 Un dé v e l o p p e u r web peut a s s o c i e r un <i>ID</ i> à t o u t é l é ment <i>HTML</ i>.
13 Cet <i>ID</ i> s o i t ê t r e unique dans t o u t l e document e t c a r a c t é r i s e l ’ é l é
ment .
14 Pour c e f a i r e , l e dé v e l o p p e u r web u t i l i s e l ’ a t t r i b u t <code>id</code> de l a
balise

42
Chapitre 2 : Styles CSS et mise en page

15 q u i dé f i n i t l ’ é l é ment .
16 </p>
17 <h2 id=” p a r t i e 2 ”>2 ) À q u o i s e r v e n t l e s <i>ID</ i> <i>HTML</ i>&nbsp ; ?</h2>
18 <p id=” p a r a g r a p h e 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 t o u s l e s é l é ments du document , notamment pour&nbsp ; :
21 <u l>
22 <l i>
23 Acc é d e r à l ’ é l é ment pour a g i r s u r son contenu en <i>j a v a s c r i p t</ i>
24 ( par exemple v i a 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 s t y l e <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 é r e n c e avec l e s c l a s s e s</h2>
32 <p id=” p a r a g r a p h e 3 ”>
33 Con tr air e me nt 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 a u t a n t d ’ é l é ments qu’on veut dans une
35 même c l a s s e de style , <s trong>l ’ é l é ment c o r r e s p o n d a n t à un ID e s t unique</
s trong>,
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 a u t du t e x t e */
2 body {
3 font −family : ”Comic Sans MS” ;
4 font−s i z e : 18 pt ;
5 background−color : # f f f ;
6 color : #222 ;
7 }
8
9 /* s t y l e du t i t r e */
10 h1 {
11 font−weight : b o l d ;
12 font−s i z e : 150% ;
13 color : w h i t e ;
14 text−align : c e n t e r ;
15 background−color : #999 ;
16 padding : 15 pt ;
17 }
18
19 h2 {
20 font−weight : b o l d ;
21 font−s i z e : 120% ;
22 }
23
24 h2#p a r t i e 1 {
25 color : b l a c k ;
26 }

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

27
28 h2#p a r t i e 2 {
29 color : r e d ;
30 }
31
32 h2#p a r t i e 3 {
33 color : g r e e n ;
34 }
35
36 /* s t y l e d e s é l é ments i m p o r t a n t s */
37 s t r o n g {
38 font −variant : small−caps ;
39 font−weight : b o l d e r ;
40 color : b l a c k ;
41 }
42
43 /* s t y l e d e s é l é ments mis en é v i d e n c e */
44 em {
45 font −style : i t a l i c ;
46 color : b l a c k ;
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#pa r ag r ap he 1 {
56 background−color : #aaa ;
57 }
58
59 p#pa r ag r ap he 2 {
60 background−color : #c c c ;
61 }
62
63 p#pa r ag r ap he 3 {
64 background−color : #e e e ;
65 }
66
67 a {
68 color : b l u e ;
69 text−decoration : u n d e r l i n e ; /* non s o u l i g n é */
70 }

44
Chapitre 2 : Styles CSS et mise en page

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
Élément parent

margin-top

padding

t
me n Autre élément
margin-left l’élé
u de
co nten margin-right

Bord de l’élément considéré

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

exemples/ChapitreCSS/ex10_margin_padding.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <s tyl e>
7 div {
8 border−width : 2px ;
9 border−color : b l a c k ;
10 border −style : s o l i d ;
11 color : b l a c k ;
12 margin : 40 px ;
13 padding : 25 px ;

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

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

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ètre positionné

Décalage bord top

Décalage bord left

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

46
Chapitre 2 : Styles CSS et mise en page

exemples/ChapitreCSS/ex11_position_absolute.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
6 <s tyl e>
7 div {
8 border−width : 2px ;
9 border−color : b l a c k ;
10 border −style : s o l i d ;
11 color : b l a c k ;
12 margin : 20 px ;
13 padding : 0px ;
14 background−color : #ddd ;
15 }
16
17 /* position nement normale dans l e f l u x ,
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 v e ;
21 top : 0px ;
22
23 l e f t : 0px ;
24 width : 500 px ;
25 z−index : 1 ;
26 }
27
28 div div {
29 border−width : 2px ;
30 border−color : b l a c k ;
31 border −style : dashed ;
32 margin : 0px ;
33 padding : 0px ;
34 background−color : #aaa ;
35 }
36
37 . position Trente {
38 position : a b s o l u t e ;
39 top : 90 px ; /* d é c a l a g e e n t r e l e bord h a u t de l ’ é l é ment e t son a n c è t r e */

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

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


/
41 width : 500 px ;
42 z−index : 7 ;
43 }
44
45 . position S o i x a n t e {
46 position : a b s o l u t e ;
47 top : 180 px ; /* d é c a l a g e e n t r e l e bord h a u t de l ’ é l é ment e t son a n c è t r e */
48 l e f t : 60 px ; /* d é c a l a g e e n t r e l e bord gauche de l ’ é l é ment e t son a n c è t r e
*/
49 background−color : #888 ;
50 z−index : 1 5 ;
51 }
52 </s tyl e>
53 <t i t l e>P o s i t i o n n e m e n t a b s o l u</ t i t l e>
54 </head>
55 <body>
56 <h1>P o s i t i o n n e m e n t a b s o l u</h1>
57 <div class= ” position Zero ”>
58 C e c i e s t l e t e x t e f a i s a n t p a r t i e du contenu de l a bo î t e p a r e n t e . C e l l e − c i
est
59 position né e mais à s a p l a c e normale dans l e f l u x ( marge de 20 px ) .
60 <div class= ” position Trente ”>
61 C e c i e s t l e t e x t e contenu de l a p r e m i è r e sous−bo î te , dont l e c o i n sup é
rieur
62 gauche position né e 30 p i x e l s à d r o i t e e t 90 p i x e l s p l u s bas que son p a r e n t
.
63 </div>
64 <div class= ” position S o i x a n t e ”>
65 C e c i e s t l e t e x t e contenu de l a deuxième sous−bo î te , dont l e c o i n sup é
rieur
66 gauche position né e 60 p i x e l s à d r o i t e e t 180 p i x e l s p l u s 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 /<! d o c t y p e html>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />

48
Chapitre 2 : Styles CSS et mise en page

5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />


6 <s tyl e>
7 /* position nement normale dans l e f l u x ,
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 : 1 5 ;
26 }
27 </s tyl e>
28 <t i t l e>P o s i t i o n n e m e n t r e l a t i f</ t i t l e>
29 </head>
30 <body>
31 <h1>P o s i t i o n n e m e n t r e l a t i f</h1>
32 <div class= ” position Zero ”>
33 C e c i e s t l e t e x t e f a i s a n t p a r t i e du contenu de l a bo î t e du haut . C e l l e − c i
est
34 position né e mais à s a p l a c e normale dans l e f l u x .
35 </div>
36 <div class= ” position Trente ”>
37 C e c i e s t l e t e x t e contenu de l a bo î t e du m i l i e u , dont l e c o i n sup é r i e u r
38 gauche position né e 60 p i x e l s à d r o i t e de s a position normale dans l e f l u x .
39 </div>
40
41 <div class= ” position Normale ”>
42 C e c i e s t l e t e x t e contenu de l a bo î t e du bas , q u i 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 î t e pr é c é
dente ) .
44 </div>
45 </body>

49
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 :

50
Chapitre 2 : Styles CSS et mise en page

exemples/ChapitreCSS/ex13_balises_semantiques.html
1 /<! d o c t y p e 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=” . /myStyle . c s s ” />
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 a v i g a t i o n</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 b a l i s e s &l t ; h e a d e r&g t ; , &l t ; nav&g t ; , &l t ; a r t i c l e&g t ; , &l t ; f o o t e r
&g t ;</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 s e
comportent
31 comme un &l t ; d i v&g t ; mais e l l e s ont , comme l e u r nom l ’ i n d i q u e , une
signification
32 au n i v e a u s é mantique&nbsp ; :
33 </p>
34 <o l>
35 <l i>
36 Un é l é ment &l t ; h e a d e r&g t ; c o n t i e n t l ’ e n − t ê t e du document avec l e nom
g é né r a l
37 du s i t e , un l o g o , une b a n i è r e , é v e n t u e l l e m e n t un s l o g a n , e t c .
38 </ l i>
39 <l i>
40 Un é l é ment &l t ; nav&g t ; c o n t i e n t d e s é l é ments de n a v i g a t i o n ( menus , s
é r i e s de l i e n s , e t c . ) .
41 Les moteurs de r e c h e r c h e peuvent en dé d u i t e un <em>s i t e m ap</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&g t ; c o n t i e n t l e contenu de l a page lui−m ême .
C ’ e s t l e t e x t e de l ’ a r t i c l e
46 q u i s e r a p r i s en compte f o r t e m e n t 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 .
47 </ l i>

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

48 <l i>
49 Un é l é ment &l t ; f o o t e r&g t ; c o n t i e n t un p i e d de page ( s o u v e n t avec d e s
i n f o r m a t i o n s l é g a l e s , de copy right ,
50 s u r l e c r é a t e u r t e c h n i q u e du s i t e , l e s l o g o s d e s s p o n s o r s , e t c . )
51 </ l i>
52 </ o l>
53 <p>
54 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 contenu de l a
page&nbsp ; c e l à p a r t i c i p e
55 de l ’ o p t i m i s a t i o n du r é f é rencement ;
56 </p>
57 </a r t i c l e>
58 <footer>
59 &copy ; RM 2 0 1 2 .
60 </ footer>
61 </div>
62 </body>
63 </html>

2.11 Exemples de mise en page

exemples/ChapitreCSS/ex14_exemple_miseEnPage.html
1 /<! d o c t y p e 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 . c s s ” />
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 a v i g a t i o n</h1>
15 <u l>
16 <l i>

52
Chapitre 2 : Styles CSS et mise en page

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 t e x t e</h1>
29 <p>
30 Nous mettons i c i l e c o r p s du t e x t e . Paragraphe 1 .
31 </p>
32 <p>
33 Notons que l e s l i e n s dans l e menu n ’ o n t pas l e même a s p e c t
34 que l e s l i e n s dans l e t e x t e . Le s t y l e e s t p r o p r e à chaque
35 z ô ne de l a page .
36 </p>
37 <p>
38 C e c i 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 2 0 1 2 .
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 ’ e n s e m b l e du document */
7 body {
8 font −family : times , s e r i f ; /* p o l i c e */
9 font−s i z e : 14 pt ; /* t a i l l e de font e a b s o l u e */
10 background−color : #c c c ; /* c o u l e u r de f o n d de l a page */
11 color : #222 ; /* c o u l e u r de t e x t e g r i s f o n c é */
12 }
13
14 /* l i e n s par d é f a u t */
15 a{
16 /* s t y l e par d é f a u t pour é v i t e r que ne s o i t p r i s par d é f a u t *
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 u s b a s */
18 }
19
20 /* Le h e a d e r : 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 */
23 background−color : b l a c k ; /* f o n d du h e a d e r n o i r */

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

24 color : w h i t e ; /* c o u l e u r du t e x t e : b l a n c */
25 margin : 0 auto ; /* l e h e a d e r e s t c e n t r é dans l a page */
26 padding : 0px ; /* pas de padding */
27 }
28
29 /* t i t r e p r i n c i p a l du s i t e dans l e h e a d e r */
30 h e a d e r h1 {
31 text−align : c e n t e r ; /* t e x t e c e n t r é dans l e h1 ( l u i même c e n t r é dans l e h e a d e r
) */
32 width : i n h e r i t ; /* prend t o u t e l a l a r g e u r du p a r e n t */
33 margin : 0 ; /* pas d ’ e s p a c e a u t o u r du h e a d e r e t de son t i t r e */
34 }
35
36 /* s o u s 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 : w h i t e ; /* f o n d b l a n c */
40 margin : 0 auto ; /* c e n t r é dans l a page */
41 position : r e l a t i v e ; /* position nement pour p o u v o i r 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 ; /* h a u t e u r t o t a l du contenu */
45 }
46
47 /* b l o c de n a v i g a t i o n c o n t e n a n t l e menu */
48 nav {
49 color : w h i t e ; /* t e x t e b l a n c */
50 text−align : c e n t e r ; /* t e x t e c e n t r é */
51 background−color : #999 ; /* f o n d g r i s */
52 width : 180 px ; /* l a r g e u r : s e u l e m e n t une p a r t i e d e s 600 px */
53 margin : 0 ; /* pas de marge e x t é 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 t e ; /* on c a l e l e b l o c à gauche s u r l e bord du d i v p a r e n t */
56 l e f t :0px ;
57 height : i n h e r i t ; /* l a h a u t e u r e s t l a même que l a h a u t e u r du d i v p a r e n t */
58 }
59
60 /* t i t r e du menu */
61 nav h1{
62 background−color : b l a c k ; /* f o n d n o i r */
63 border−r a d i u s : 4px ; /* bor d l é gèrement a r r o n d i */
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 ; /* c a n t r é en h o r i z o n t a l e t 20 px de marge au d e s s u s e t au
d e s s o u s */
66 }
67
68 /* L i s t e à puce c o n t e n a n t l e s l i e n s du menu */
69 d i v nav u l {
70 text−align : l e f t ; /* t e x t e c a l é à gauche */
71 l i s t − s t y l e : none ; /* pas de p o i n t s d e v a n t l e s i t e m s de l a l i s t e à p u c e s */
72 }
73
74 /* i t e m s de l a l i s t e à puce c o n t e n a n t l e s l i e n s du menu */
75 d i v nav u l l i {
76 margin−bottom : 20 px ; /* permet d ’ é c a r t e r l e s b o u t o n s */

54
Chapitre 2 : Styles CSS et mise en page

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 d i v nav u l 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 color : w h i t e ; /* t e x t e b l a n c */
84 font−weight : b o l d e r ; /* c a r a c t è r e s g r a s */
85 background−image : l i n e a r − g r a d i e n t ( black , w h i t e ) ; /* f o n d d é grad é */
86 border−r a d i u s : 4px ; /* bo rd l é gèrement a r r o n d i */
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 c o n t e n a n t 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 : b l a c k ; /* t e x t e n o i r ( s u r f o n d b l a n c ) */
93 width : 400 px ; /* encombrement 420 a v e c l a padding . 600 px = 180 px + 420 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 e x t é 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 é c a l e v e r s 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 h a u t e u r de son p a r e n t */
99 }
100
101 /* T i t r e p r i n c i p a l de l a page dans l ’ a r t i c l e */
102 d i v a r t i c l e h1{
103 margin : 0 auto ; /* t i t r e c e n t r é dans l ’ a r t i c l e */
104 text−align : c e n t e r ; /* t e x t e c e n t r é dans l e t i t r e */
105 }
106
107 /* p a r a g r a p h e s de l ’ a r t i c l e */
108 div a r t i c l e p {
109 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 p a r a g r a p h e s */
110 }
111
112 /* p i e d de page */
113 footer {
114 width : 600 px ; /* l a r g e u r 600 p i x e l s */
115 margin : 0 auto ; /* f o o t e r c e n t r é dans l a page */
116 background−color : b l a c k ; /* f o n d n o i r */
117 color : w h i t e ; /* t e x t e b l a n c */
118 text−align : c e n t e r ; /* t e x t e c e n t r é */
119 }

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 ’ e n s e m b l e du document */
7 body {
8 font −family : times , s e r i f ; /* p o l i c e */

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

9 font−s i z e : 14 pt ; /* t a i l l e de font e a b s o l u e */
10 background−color : #c c c ; /* c o u l e u r de f o n d de l a page */
11 color : #222 ; /* c o u l e u r de t e x t e g r i s f o n c é */
12 }
13
14 /* Tous l e s d i v */
15 div {
16 background−color : # f f f ; /* f o n d b l a n c */
17 }
18
19 /* Le h e a d e r : 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 : b l a c k ; /* f o n d n o i r */
23 color : w h i t e ; /* t e x t e b l a n c */
24 margin : 0 auto ; /* l e h e a d e r e s t c e n t r é 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 h a u t 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 h e a d e r */
29 h e a d e r h1 {
30 text−align : c e n t e r ; /* t e x t e c e n t r é dans l ’ é l é ment */
31 width : 100% ; /* occupe t o u t e l a l a r g e u r du p a r e n t ( c . a . d . du h e a d e r ) */
32 margin : 0 ; /* pas de marge c o l l é au contenu d i v . content */
33 }
34
35 /* d i v c o n t e n a n t 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 : w h i t e ; /* f o n d b l a n c */
39 margin : 0 auto ; /* contenu c e n t r é 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 c o n t e n a n t l e menu */
43 d i v nav {
44 text−align : c e n t e r ; /* t e x t e c e n t r é */
45 background−color : #999 ; /* f o n d g r i s f o n c é */
46 width : 100% ; /* l a r g e u r 100% du d i v p a r e n t */
47 height : 45 px ; /* h a u t e u r a b s o l u e 45 px */
48 }
49
50 /* t i t r e du menu */

56
Chapitre 2 : Styles CSS et mise en page

51 d i v nav h1{
52 display : none ; /* on supprime l e t i t r e */
53 }
54
55 /* L i s t e à puce c o n t e n a n t l e s l i e n s du menu */
56 d i v nav u l {
57 l i s t − s t y l e : none ; /* on supprime l e s p o i n t s d e v a n t l e s i t e m s de l a l i s t e à
p u c e s */
58 margin−top : 0 ; /* bord du h a u t a l i g n é s u r l e bor d du d i v p a r e n t */
59 }
60
61 /* i t e m s de l a l i s t e à puce c o n t e n a n t l e s l i e n s du menu */
62 d i v nav u l l i {
63 display : i n l i n e − b l o c k ; /* l e s i t e m s s o n t 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 */
64 }
65
66 /* 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 : *\
67 \* p r o p r i é t é s g éné r a l e s communes aux l i e n s v i s i t é s , h o v e r ou non */
68 d i v nav u l l i a {
69 font−weight : b o l d e r ; /* c a r a c t è r e s g r a s */
70 border −style : none ; /* pas de bord */
71 margin : 0 10 px ; /* marges à d r o i t e e t à gauche de chaque l i e n de menu */
72 padding : 5px 10 px ; /* e s p a c e a u t o u r du t e x t e */
73 position : r e l a t i v e ; /* on t r a n s l a t e l ’ é l é ment */
74 top : 5px ; /* d é c a l a g e v e r s l e b a s pour compenser l e padding e t a l i g n e r l e
bord h a u t */
75 border−r a d i u s : 0 0 10 px 10 px ; /* a n g l e s du b a s a r r o n d i s */
76 text−decoration : none ; /* t e x t e non s o u l i g n é */
77 }
78
79 /* p r o p r i é t é s sp é c i f i q u e s d e s l i e n s non v i s i t é s non s u r v o l é s */
80 d i v nav u l l i a : l i n k {
81 color : w h i t e ; /* t e x t e b l a n c */
82 background−color : b l a c k ; /* f o n d n o i r */
83 }
84
85 /* p r o p r i é t é s sp é c i f i q u e s d e s l i e n s v i s i t é s non s u r v o l é s */
86 d i v nav u l l i a : v i s i t e d {
87 color : #444 ; /* g r i s f o n c é */
88 background−color : #ddd ; /* g r i s c l a i r */
89 }
90
91 /* p r o p r i é t é s sp é c i f i q u e s d e s l i e n s s u r v o l é s */
92 d i v nav u l l i a :hover {
93 color : b l a c k ; /* t e x t e n o i r */
94 background−color : w h i t e ; /* f o n d b l a n c */
95 }
96
97 /* p a r t i e a r t i c l e c o n t e n a n t l e t e x t e p r i n c i p a l l e l a page */
98 div a r t i c l e {
99 color : b l a c k ; /* c o u l e u r n o i r e */
100 background−color : w h i t e ; /* f o n d b l a n c */
101 }
102
103 /* T i t r e p r i n c i p a l de l a page dans l ’ a r t i c l e */

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

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

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 /<! d o c t y p e 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 . c s s ” />
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
. c s s ” />
9 <t i t l e>Exemple de mise en page</ t i t l e>
10 </head>
11 <body>
12 <header>
13 <h1>Exemple de mise en page</h1>
14 </header>
15 <div class= ” content ”>
16 <nav>
17 <h1>N a v i g a t i o n</h1>
18 <u l>

58
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 t e x t e</h1>
32 <p>
33 Nous mettons i c i l e c o r p s du t e x t e . Paragraphe 1 .
34 </p>
35 <p>
36 Notons que l e s l i e n s dans l e menu n ’ o n t pas l e même a s p e c t
37 que l e s l i e n s dans l e t e x t e . Le s t y l e e s t p r o p r e à chaque
38 z ô ne de l a page .
39 </p>
40 <p>
41 C e c i 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 2 0 1 2 .
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 px ) {


2 t a b l e tbody t r td {
3 padding 10 px ;
4 }
5 }
6
7 @media (min−width : 501 px ) {
8 t a b l e tbody t r td {
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 à gauche −−>


2 <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 a n d s c a p e ) ” href=” .
/ex14_exemple_miseEnPage . c s s ” />
3 <!−− MISE EN PAGE POUR POUR L’ORIENTATION PORTRAIT : menu en haut −−>

59
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 . c s s ” />

60