Académique Documents
Professionnel Documents
Culture Documents
Rémy Malgouyres
LIMOS UMR 6158, IUT, département info
Université Clermont 1
B.P. 86
63172 AUBIERE cedex
http://malgouyres.org/
http://malgouyres.org/programmation-html-css
http://malgouyres.org/tutoriel-drupal
http://malgouyres.org/programmation-php
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
1
Chapitre 1
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
3
Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS
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.
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>
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.
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
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
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
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
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. Au niveau des balises HTML avec l’option style="..." (style CSS local) ;
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) :
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
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 É ; 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
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
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  ; 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  ; 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. 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 ;  ; :<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 ;  ; :<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 −−>
exemples/ChapitreHTML/ex16_figure.html
1 /<! d o c t y p e html>
24
Chapitre 1 : Pages web statiques HTML5
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
https://www.google.fr/#q=special+characters+html
26
Chapitre 2
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  ; : 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  ; :</s trong>
16 <br />
17 <o l type=”a ”>
18 <l i>
19 &l t ; p&g t ;  ; : nouveau p ar a gr a ph e; ;
20 </ l i>
21 <l i>
22 &l t ; t a b l e&g t ;  ; : t a b l e a u c o n t e n a n t d e s donn é e; ;
23 </ l i>
24 <l i>
25 &l t ; h1&g t ;  ; , . . . , &l t ; h6&g t ;  ; : d i f f é r e n t s
26 ni v e a u x de t i t r e ; ;
27 </ l i>
28 <l i>
29 &l t ; d l&g t ;  ; : l i s t e de dé f i n i t i o n ; ;
30 </ l i>
31 <l i>
32 &l t ; u l&g t ;  ; : l i s t e non ordonn é e; ;
33 </ l i>
34 <l i>
35 &l t ; o l&g t ;  ; : l i s t e ordonn é e; ;
36 </ l i>
37 <l i>
38 &l t ; p r e&g t ;  ; : 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.
exemples/ChapitreCSS/ex02_inline.html
1 /<! d o c t y p e html>
28
Chapitre 2 : Styles CSS et mise en page
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
• 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
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
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>
body
div h1
p div ul
a p li
span
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 }
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>
  ; ?</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  ; ?</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>  ; ?</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  ; 2</a>)
28 </p>
29 <h2 id=” p a r t 2 ”><b>2 )</b> À q u o i ç a s e r t  ; ?</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  ;
37 </p>
38 <o l>
37
Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS
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  ; 1</td>
32 <td class= ” i m p a i r ”>C e c i e s t l a case   ; 2</td>
33 <td class= ” p a i r ”>C e c i e s t l a case   ; 3</td>
34 <td class= ” i m p a i r ”>C e c i e s t l a case   ; 4</td>
35 </ tr>
36 <tr>
37 <td class= ” p a i r ”>C e c i e s t l a case  ; 5</td>
38 <td class= ” i m p a i r ”>C e c i e s t l a case   ; 6</td>
39 <td class= ” p a i r ”>C e c i e s t l a case   ; 7</td>
40 <td class= ” i m p a i r ”>C e c i e s t l a case   ; 8</td>
41 </ tr>
42 <tr>
43 <td class= ” p a i r ”>C e c i e s t l a case  ; 9</td>
44 <td class= ” i m p a i r ”>C e c i e s t l a case   ; 1 0</td>
45 <td class= ” p a i r ”>C e c i e s t l a case   ; 1 1</td>
46 <td class= ” i m p a i r ”>C e c i e s t l a case   ; 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 }
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>  ; ?</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>  ; ?</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  ; :
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.
margin-top
padding
t
me n Autre élément
margin-left l’élé
u de
co nten margin-right
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>
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
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
49
Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS
46 </html>
• 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.
• 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.
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  ; :
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  ; 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 © ; RM 2 0 1 2 .
60 </ footer>
61 </div>
62 </body>
63 </html>
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
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 }
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 © ; 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 :
59
Rémy Malgouyres, http://malgouyres.org/ Programmation Web, HTML/CSS
60