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...) :
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
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.
(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éparticulière-menter toutes les variantes, surtout
sur du code non validé.
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.
Par exemple, le document “Hello World !” en XHTML 1.0 strict se compose comme suit :
exemples/ChapitreHTML/ex01_helloWorldXhtml.html
1 <!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1.0 Strict//EN ”
2 ” h t t p ://www . w3 . org/TR/xhtml1/DTD/xhtml1−strict . dtd ”>
3 <!−− Dé c l a r a t i o n du debut d ’ un document HTML avec l a langue : −−>
4 <html xml :lang=” en ” lang=” en ” xmlns=” h t t p ://www . w3 . o r g / 1 9 9 9 / x h t m l ”> 5 <head> <!−− dé but de l ’ en−tê t e HTML −−>
6 <!−− Dé c l a r a t i o n du type d ’ encodage −−>
7 <meta http−equiv=”Content−Type” content=” t e x t / h t m l ; charset=utf−8 ”/>
8 <!−− Titre 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 <!doctype html>
2 <!−− Declaration du debut d ’ un document HTML avec l a langue : −−>
3 <html lang=” f r ”>
4 <head>
5 <meta charset=”UTF−8”/>
6 <!−− Dé c l a r a t i o n du type d ’ encodage −−>
7 <!−− Titre 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 H e l l o w o r l d ! 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 <!doctype html>
2 <!−− Declaration du debut d ’ un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Voici l ’ en−tete qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de l a page −−>
6 <!−− d e c l a r a t i o n de l ’ encodage pour l e s accents . . . −−>
7 <meta charset=”UTF−8”/>
8 <!−− Titre 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 corps HTML −−>
12 <h1>Mon p r e m i e r f i c h i e r HTML</h1>
13 <p> <!−− Nouveau paragraphe ( saut 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 paragraphe −−> 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 ’ encodage , 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 corps HTML −−> 23 </html> <!−− f i n du code HTML −−>
1.5 Structure du texte en HTML
exemples/ChapitreHTML/ex04_structure_document.html
1 <!doctype html>2 <!−− Declaration du debut d ’ un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Voici l ’ en−tete qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de l a page −−>
5 <head> <!−− debut de l ’ en−tete HTML −−>
6 <!−− d e c l a r a t i o n de l ’ encodage pour l e s accents . . . −−>
7 <meta charset=”UTF−8”/>
8 <!−− Titre 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>
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 é r e n t e s
22 p a r t i e s du document ( t i t r e s , p a ra g r a p h 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 pa r a g ra p h e . 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 corps 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 <!doctype html>
2 <!−− Declaration du debut d ’ un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Voici l ’ en−tete qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de l a page −−>
5 <head> <!−− debut de l ’ en−tete HTML −−>
6 <meta charset=”UTF−8”/> <!−− Declaration du type d ’ encodage −−>
7 <!−− Titre 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 </head>
10 <body style= ” font−family : Arial Verdana ; font−size : 125% ; width : 800 px ; ”> <!−−
d é b u t 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 :center ”>
22 La p r o p r i é t é <code>font−weight</code> permet de mettre des <span style=”
font−weight :b o l d ; ”>é l é ments en gras</span>
23 ou <span style= ” font−weight :b o l d e r ; ”>en t r è s gras</span>.
24 <br />
25 La p r o p r i é t é <code>font−variant</code> permet de mettre des <span style=”
font−variant :small−caps ; ”>é l é ments en p e t i t e s c a p i t a l e s</span>.
26 <br />
27 La p r o p r i é t é <code>font−style</code> permet de mettre des <span style=” font−style : i t a l i c ; ”>é l é ments en i t a l i q u e s</span>
28 <br />
29 <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 ; strong&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>
32 </body> <!−− f i n du corps HTML −−>
33 </html> <!−− f i n du code HTML −−>
exemples/ChapitreHTML/ex06_mise_en_forme_globale.html
1 <!doctype html>
2 <!−− Declaration du debut d ’ un document HTML −−>
3 <html lang=” f r ”>
4 <!−− Voici l ’ en−tete qui d e c l a r e l e s p r o p r i e t e s g e n e r a l e s de l a page −−>
5 <head>
6 <meta charset=” utf−8 ”/> <!−− Declaration du type d ’ encodage −−>
7 <s t yl 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−size : 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 : center ;
20 font−size : 150% ;
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−size : 120% ;
26 }
27 </s tyle>
28 <t i t l e>S t y l e s CSS globaux</ t i t l e>
29 </head>
30 <body> <!−− dé but du corps HTML −−>
31 <h1>Mise en forme CSS g l o b a l e</h1>
32 <p>
33 I l peut ê t r e f a s t i d i e u x de g é r e r à chaque b a l i s e l ’ a s p e c t du 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 s e u l e n d r o i t
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 ’ en−tê te (& l t ; head> ; ) .
38 </p>
39 <p>
40 S i l ’ on 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 ; strong&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 ’ une page HTML au n i v e a u de l ’ en−tê te .
49 </p>
50 <p>
51 Enfin , s i l ’ on 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 qu ’ 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 ; ”>su rch a rg e r l e style g l o b a l</strong>
53 l o c a l e m e n t .
54 On peut a u s s i u t i l i s e r<span style= ” font−family :Comic Sans MS; font−size :150%”> l a b a l i s e g éné r i q u e &l t ; span&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 corps HTML −−> 58 </html> <!−− f i n du code HTML −−>
exemples/ChapitreHTML/ex07_couleurs.html
1 <!doctype html> 2 <html lang=” f r ”> 3 <head>4 <meta charset=” utf−8 ”/>
5 <s tyle>
6 /* Dé f i n i t i o n du s t y l e */
7 body {
8 font−size : 125% ;
9 background−color : #c0c0c0 ; /* fonte par d é f a u t */
10 color : #333333 ;
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 : center ;
19 font−size : 150% ;
20 background−color : #ddd ;
21 border−style : s o l i d ;
22 border−color : black ;
23 border−width : 2px ;
24 }
25 /* mise en forme é l é mentt 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 : white ;
28 color : b l a c k ;
29 font−weight : bolder ;
30 } 31 </s ty l 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>
50 </body>
51 </html>
1.7 Formes d’inclusion de styles CSS
Il y a essentiellement 3 manières de modifier le style graphique des différents éléments d’une
page HTML en utilisant CSS :
1. Au niveau des balises HTML avec l’option style="..." (style CSS local) ;
2. Au niveau du header de la page HTML avec la balise <style type="text/css"> (style
CSS global) ;
3. En incluant une feuille de style qui se trouve dans un fichier .css séparée avec la balise
<link/> au niveau du header HTML (style CSS global pouvant être inclus dans plusieurs
pages d’un même site) :
<link rel="stylesheet" href="./my_style.css" />
Cela permet de définir son style CSS globalement pour tout un site, de manière que
toutes les pages aient le même style graphique. Du fait que le style CSS est défini à un
seul endroit, la maintenance est plus facile : il n’y a qu’un seul endroit à changer pour
modifier l’aspect de tout le site.
4. En ajoutant une feuille de style complémentaire au niveau du header HTML avec la
di-rective CSS import url (style CSS global additionnel pouvant être inclus dans plusieurs
pages d’un même site) :
<style>
@import url(./my_extra_style.css);
</style>
Cela permet d’ajouter plusieurs feuilles de style à une même page, ce qui augmente la
souplesse de l’organisation des styles CSS.
Pour le dernier exemple (sur les couleurs) de la partie 1.6, on peut par exemple obtenir la
même chose en incluant le style CSS dans une feuille de style séparée :
exemples/ChapitreHTML/ex08_css_stylesheet_couleur.html
1 <!doctype html> 2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf−8 ”/>
5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
6 <t i t l e>F e u i l l e s de Style <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>
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 pages 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−size : 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 : #c0c0c0 ; /* fonte 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−size : 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 : black ; /* 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 : 10px ; /* b o r d u r e a r r o n d i e */
21 }
23 s t r o n g {
24 color : b l a c k ; /* t e x t e n o i r */
25 font−weight : bolder ; /* 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 <!doctype html> 2 <html lang=” f r ”> 3 <head>4 <meta charset=” utf−8 ”/>
5 <l i nk rel=” s t y l e s h e e t ” href=” . /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 corps 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 à puces −−>
15 <l i>
16 l i e n s h y p e r t e x t e en r e l a t i f : <a href=” . /ex_images . html ” >c l i q u e z i c i<
/a>.
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 p h e</a>
23 </ l i>
24 </u l>
25 </div>
26 <p id=” monParagraphe ” style= ” font−size : 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 corps HTML −−> 39 </html> 40 <!−− f i n du code HTML −−>
exemples/ChapitreHTML/ex10_liens_mise_en_forme.html
1 <!doctype html> 2 <html lang=” f r ”> 3 <head>5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
6 <s tyle>
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 : v i s i t e d {
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 tyle> 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 corps 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 à puces −−>
32 <l i>
33 l i e n s h y p e r t e x t e en r e l a t i f : <a href=” . /ex_images . html ” >c l i q u e z i c i<
/a>. 34 </ l i> 35 <l i> 36 l i e n s h y p e r t e x t e en 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 p h e</a>
40 </ l i>
41 </u l>
42 </div>
43 <p id=” monParagraphe ” style= ” font−size : 150% ; font−weight : b o l d e r ; ”>
44 Pour f a i r e 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 É ; 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 corps HTML −−> 56 </html> 57 <!−− f i n du code HTML −−>
1.9 Tableaux
exemples/ChapitreHTML/ex11_tableaux.html
1 <!doctype html> 2 <html lang=” f r ”>
3 <head>
4 <meta charset=” utf−8 ”/>
5 <l i nk rel=” s t y l e s h e e t ” href=” . /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 corps HTML −−> 10 <h1>Tableaux en HTML 5</h1> 11 12 <p>
13 V o i c i une table 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 table s a n s mise en forme
18 </caption>
19 <tbody><!−− corps 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 ’ en 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 ’ en 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 ’ en haut à d r o i t e 29 </td> 30 </ tr> 31 <tr> <!−− n o u v e l l e l i g n e −−> 32 <td><!−− n o u v e l l e case −−>
33 C e c i e s t l a case<br />d ’ en bas à gauche
34 </td>
35 <td><!−− n o u v e l l e case −−>
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 ’ en bas à d r o i t e 40 </td> 41 </ tr> 42 </tbody> 43 </table> 44 </body><!−− f i n du corps HTML −−> 45 </html> 46 <!−− f i n du code HTML −−>
exemples/ChapitreHTML/ex12_tableaux_th.html
1 <!doctype html> 2 <html lang=” f r ”> 3 <head>4 <meta charset=” utf−8 ”/>
5 <l i nk rel=” s t y l e s h e e t ” href=” . /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 corps HTML −−> 10 <h1>Tableaux : en−tê te de l i g n e s et de colonnes</h1> 11 12 <p>
13 V o i c i une table 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 e t c o l o n n e .
14 </p>
15 <table>
16 <caption>
17 Exemple de table 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 colonnes ) −−>
21 <th ></th><!−− case v i d e en haut à gauche −−>
22 <th ><s trong>Colonne 1</s trong></th>
24 <th><s trong>Colonne 3</s trong></th> 25 </ tr> 26 </thead> 27 <tbody><!−− corps 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  ; 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 ’ en 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 ’ en 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 ’ en 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  ; 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 ’ en 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 ’ en 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 ’ en bas à d r o i t e 60 </td> 61 </ tr> 62 </tbody> 63 </table> 64 </body><!−− f i n du corps HTML −−> 65 </html> 66 <!−− f i n du code HTML −−>
exemples/ChapitreHTML/ex13_tableaux_mise_en_forme.html
1 <!doctype html> 2 <html lang=” f r ”> 3 <head>4 <meta charset=” utf−8 ”/>
5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
6 <s tyle>
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 tyle>
9 <t i t l e>Tableaux en HTML ( 3 )</ t i t l e>
11 <body>
12 <!−− dé but du corps HTML −−>
13 <h1>Tableaux : mise en forme</h1>
14 <table>
15 <caption>
16 Exemple de table 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 colonnes ) −−>
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><!−− corps 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 ’ en 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 ’ en 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 ’ en haut à d r o i t e 42 </td>
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 ’ en 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 ’ en bas au m i l i e u 55 </td>
56 <td style= ”border−radius : 0 0 10 px 0”><!−− n o u v e l l e case −−>
57 C e c i e s t l a case<br /> 58 d ’ en bas à d r o i t e 59 </td> 60 </ tr> 61 </tbody> 62 </table> 63 <p>
64 <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 ; table&g t ; dans l a f e u i l l e de s t y l e d e s t a b l e a u x )
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 corps 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 22px #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 bord */
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 : black ; /* c o u l e u r du bord */
9 border−ra d i u s : 10px ; 10 } 11 c a p t i o n { 12 color :red ; 13 font−size :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 bord */
18 border−color : black ; /* c o u l e u r du bord */
19 background−color : white ;/* f o n d b l a n c */
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 colonne */
25 border−style : s o l i d ; /* bord 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 bord */
27 border−color : black ; /* 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 : bolder ; /* 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).
exemples/ChapitreHTML/ex14_images.html
1 <!doctype html> 2 <html lang=” f r ”>
3 <head >
4 <meta charset=” utf−8 ”/>
5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
6 <t i t l e>I n s e r t i o n d ’ images en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du corps HTML −−>
9 <h1>I n s e r t i o n d ’ images en HTML</h1>
10 <p>
11 On i n s è r e l e s images avec l a b a l i s e &l t ; img&g t ;  ; :<br />
12 </p>
13 <p style= ” text−align : center ; ”>
14 15
16 <img src=” . / p ic / g i mp . png ” alt=”The GIMP Logo ” width=” 150 ”
17 style= ” vertical−align : middle ; ”
18 />
19 <img src=” . /pic/3d−gnu−head_petit . png” width=” 150 ”
20 alt=”The GNU Logo ”
21 style= ” vertical−align : middle ; ”
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 d i m i n u e r l e nombre de p i x e l s d ’ une image pour en d i m 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 corps HTML −−> 33 </html> <!−− f i n du code HTML −−>
exemples/ChapitreHTML/ex15_images_avec_click.html
1 <!doctype html> 2 <html lang=” f r ”>3 <head >
4 <meta charset=” utf−8 ”/>
5 <l i nk rel=” s t y l e s h e e t ” href=” . /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 corps 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 : center ; ”>
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 ic / g i mp . png ” alt=”The GIMP Logo ” width=” 150 ”
16 style= ” vertical−align : middle ; ”
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 : middle ; ”
22 /> 23 </a> 24 </p> 25 26 </body> <!−− f i n du corps HTML −−> 27 </html> <!−− f i n du code HTML −−>
1.11 Figures et sous-figures avec légende
exemples/ChapitreHTML/ex16_figure.html
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 corps 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 ;  ; :<br />
12 </p>
13 <f i g u r e style= ” text−align :center ; ”>
14 <img src=” . / pi c / g im p . png ” alt=”The GIMP Logo ” width=” 150 ”
15 style= ” vertical−align : middle ; ”
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 :center ; ”>
20 <img src=” . /pic/3d−gnu−head_petit . png” width=” 150 ”
21 alt=”The GNU Logo ”
22 style= ” vertical−align : middle ; ”
23 />
24 <figcaption>Le Logo de <i>GNU</ i></ figcaption>
25 </ f i g u r e> 26 </body> <!−− f i n du corps HTML −−> 27 </html> <!−− f i n du code HTML −−>
exemples/ChapitreHTML/ex17_subfigure.html
1 <!doctype html> 2 <html lang=” f r ”> 3 <head >4 <meta charset=” utf−8 ”/>
6 <t i t l e>S o u s−figures avec l é gendes en HTML</ t i t l e>
7 </head>
8 <body> <!−− dé but du corps HTML −−>
9 <h1>S o u s−figures avec l é gendes 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 imbriquant b a l i s e s &l t ; f i g u r e> ;  ; :<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 ’ une à 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 :cen ter ; ”>
16 <f i g u r e style= ” display :i n l i n e− b l o c k ; ”>
17 <img src=” . / pi c / g im p . png ” alt=”The GIMP Logo ” width=” 150 ”
18 style= ” vertical−align : middle ; ”
19 />
20 <figcaption><b>( a )</b> Le Logo de <i>GIMP</ i></ figcaption>
21 </ 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 : middle ; ”
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 corps 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 :
Styles CSS et mise en page
2.1 Éléments HTML de type block et inline
Avant d’étudier plus avant les styles CSS, nous devons en dire un peu plus sur la structuration
des pages HTML.
On distingue en HTML dans catégories d’éléments : les éléments de type block et les éléments
de type inline. Ces deux sortes d’éléments ne se comportent pas de la même manière quand à
leur positionnement dans la page :
2.1.1 Éléments blocks
exemples/ChapitreCSS/ex01_blocks.html
1 <!doctype html> 2 <html lang=” f r ”> 3 <head> 4 <meta charset=”UTF−8” />5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
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 pa r ag ra ph e; ;
20 </ l i>
21 <l i>
22 &l t ; table&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 ; dl&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 ; ul&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 ; pre&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 pa 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 ’ image .
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
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 ”  ; :</s trong></ l i>
12 <o l type=”a”>
13 <l i>&l t ; span&g t ;  ; : changement l o c a l de s t y l e  ;; ;</ l i>
14 <l i>&l t ; a&g t ;  ; : l i e n h y p e r t e x t e ; ;</ l i>
15 <l i>&l t ; strong&g t ;  ; : é l é ment i m p o r t a n t; ;</ l i>
16 <l i>&l t ;em&g t ;  ; : é l é ment à s o u l i g n e r ; ;</ l i>
17 <l i>&l t ; q&g t ;  ; : c i t a t i o n c o u r t e ; ;</ l i>
18 <l i>&l t ; code&g t ;  ; : 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 ;  ; e t l e s b l o c k s t i t r e
27 &l t ; h1&g t ;  ; , . . . , &l t ; h6&g t ;  ; 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.
2.1.3 Le flux et la propriété CSS display
Le positionnement par défaut des éléments de type block (“à la ligne”) et inline (“à la suite
sur la même ligne”) s’appelle la position dans le flux. La propriété CSS display permet de
modifier la place dans le flux des éléments :
• display: none : L’élément est purement et simplement supprimé du flux, comme s’il
n’existait pas. Cela permet de faire apparaître ou disparaître des éléments suivants des
événements, par exemple des événements Javascript. On peut ainsi créer des popups,
etc...
• display: inline : l’élément est inséré comme s’il s’agissait d’un élément de type inline ;
• display: block : l’élément est inséré comme s’il s’agissait d’un élément de type block ;
• display: inline-block : Ces éléments peuvent contenir d’autres éléments de type block
ou inline. Ils s’insèrent dans le flux comme des éléments inline : à la suite sur la même
ligne.
exemples/ChapitreCSS/ex03_propriete_display.html
1 <!doctype html> 2 <html lang=” f r ”> 3 <head> 4 <meta charset=”UTF−8” />5 <l i nk rel=” s t y l e s h e e t ” href=” . /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 : groove ; 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 p h e en i n l i n e− b l o c k .
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 se 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 p h 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 : middle ; ”>
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 p h 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 : middle ; ”>
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 p h 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 : middle ; ”>
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 p h 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 <!doctype html> 2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
6 <t i t l e>La B a l i s e &l t ; div&g t ;</ t i t l e>
7 </head>
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  ; :<br />La b a l i s e &l t ; div&g t ;</h1 >
10 <div style= ”background−color : #f85 ”>
11 <p>
12 <b>1 )</b> Un é l é ment &l t ; div&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 ; div&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 re men t aux p a r a g ra p h e s , un &l t ; div&g t ; peut c o n t e n i r d ’ a u t r e s b a l i s e s
17 de type b l o c k comme d ’ a u t r e s &l t ; div&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 , e t c .
18 </p>
19 </div>
20 <div style= ”background−color :white ; ”>
21 <p>
22 <b>2 )</b> Le &l t ; div&g t ; d i f f è r e d ’ un &l t ; span&g t ; en c e c i que l e span
e s t
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 : white ; border−radius : 5px ; ”
>
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 ; div&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 ; div&g t ; e s t l a base de l a d i v i s i o n d e s pages en d i f f é r e n t e s
p a r t i e s .
33 </p>
34 </div>
35 </body>
36 </html>
2.3 Imbrication des balises et CSS
exemples/ChapitreCSS/ex05_imbrication_balises_et_CSS.html
1 <!doctype html> 2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ” />
6 <s tyle> 7 body p{ 8 background−color : #777 ; 9 color : w h i t e ; 10 } 11 body div p{
13 color : #111 ;
14 }
15 body div div p{
16 background−color : #111 ;
17 color : #e e e ;
18 }
19 </s ty l 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 b l o c k s )
26 s ’ i m b r i q u e r l e s unes dans l e s a u t r e s . I c i un p ar a gr ap h e imbriqu é
d i r e c t e m e n t
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 l e u r
33 i m b r i c a t i o n dans d ’ a u t r e s b a l i s e s . I c i un p ar ag r ap h e imbriqu é dans un & l t ; div&g t ;
34 lui−même imbriqu é directement dans l e &l t ; body> ; .<br/>
35 C’ e s t l e s t y l e <code>body div 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 p a r a g ra ph e imbriqu é dans un &l t ; div&g t ;
39 lui−même imbriqu é directement dans l e &l t ; body> ; .<br/>
40 C’ e s t l e s t y l e <code>body div p</code> q u i s ’ a p p l i q u e i c i .
41 </p>