Programmation Web HTML/CSS - Rémy Malgouyres | … · Tous mes cours sur le Web sont sur le Web : Cours de programmation WEB sur les documents hypertexte ... Sur la première ligne

,

Programmation Web HTML/CSS

Rémy MalgouyresLIMOS UMR 6158, IUT, département info

Université Clermont AuvergneB.P. 86

63172 AUBIERE cedexhttps://malgouyres.org

Tous mes cours sur le Web sont sur le Web :

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

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

Tutoriel sur le CMS Drupal :

https://malgouyres.org/tutoriel-drupal

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

https://malgouyres.org/programmation-php

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

https://malgouyres.org/programmation-javascript

Cours sur l’administration de serveurs (Serveurs WEB avec apache, SSL, LDAP...) :

https://malgouyres.org/administration-reseau

https://malgouyres.org

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

https://malgouyres.org/tutoriel-drupal

https://malgouyres.org/programmation-php

https://malgouyres.org/programmation-javascript

https://malgouyres.org/administration-reseau

Table des matières

Table des matières 1

1 Pages web statiques HTML5 21.1 HTML, la norme et son évolution . . . . . . . . . . . . . . . . . . . . . . . . . 21.2 Validation W3C et tests de portabilité . . . . . . . . . . . . . . . . . . . . . . 21.3 Structure d’un document HTML ou XHTML . . . . . . . . . . . . . . . . . . . 41.4 Premier document HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.5 Structure du texte en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 61.6 Mise en forme du texte HTML : styles CSS . . . . . . . . . . . . . . . . . . . 71.7 Formes d’inclusion de styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . 121.8 Liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141.9 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171.10 Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221.11 Figures et sous-figures avec légende . . . . . . . . . . . . . . . . . . . . . . . . 241.12 Caractères spéciaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2 Styles CSS et mise en page 272.1 Éléments HTML de type block et inline . . . . . . . . . . . . . . . . . . . . . . 272.2 Distinguer des parties dans un document : balise div . . . . . . . . . . . . . . 312.3 Imbrication des balises et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.4 Arborescence de balises et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 342.5 Classes CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362.6 Sélecteurs de style CSS par ID . . . . . . . . . . . . . . . . . . . . . . . . . . . 422.7 Marges et bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452.8 Positionnement absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462.9 Positionnement relatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482.10 Structuration d’une page en HTML5 . . . . . . . . . . . . . . . . . . . . . . . 502.11 Exemples de mise en page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522.12 CSS adaptatifs : Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . 58

1

Chapitre 1

Pages web statiques HTML5

1.1 HTML, la norme et son évolutionLe langage HTML, ou Hyper Text Markup Language, permet de décrire et de mettre en formedes documents variés, depuis du simple texte jusqu’à des documents multimédia riches avec ladéfinition d’HTML 5.

Une page HTML est en général destinée à être publiée sur le World Wide Web, où toutessortes 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). Pourque celà fonctionne, il a été nécessaire de définir un standard pour le langage HTML. C’estle 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 CommunicationsCorporation pour que la pluralité des acteurs n’évitent que les standards du web soient de faitpropriétaire.

1.2 Validation W3C et tests de portabilité1.2.1 Validateur W3CLorsqu’on écrit une page web en HTML, pour être sûr que celle-ci soit correctement interprétéeet affichée par tous les navigateurs qui supportent correctement la norme, il faut valider cettepage pour s’assurer qu’elle est conforme à la norme. Le processus est similaire à l’analyse de lasyntaxe d’un programme par un compilateur et peut se faire en ligne en uploadant le fichier ouen 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 faitdes programmes. Par contre, leur sortie (ce qu’ils affichent) doit être du HTML conforme à lanorme.

2

Chapitre 1 : Pages web statiques HTML5

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

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

1.2.2 Tests de portabilitéMême pour un document validé, les navigateurs n’ont pas tous la même implémentation dumoteur 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 leplus possible de plate-formes et de navigateurs. Ceci peut être simplifié par des outils commeVirtualBox (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 lafigure 1.2, on voit un exemples où l’affichage de la page est testé simultanément avec InternetExplorer et Safari sous Windows, Firefox, Chrome et Opera sous linux et Chrome sous tabletteet smartphone Android. Le système Windows tourne en virtuel dans VirtualBox (disponibledans la logitèque d’Ubuntu). et le serveur Web (Apache) est instalé en local sous Ubuntu. Lessystèmes Windows et Ubuntu sont connectés par un réseau local virtuel interne au systèmehôte, en l’hoccurence Ubuntu. Notons que les navigateurs sur smartphones sont particulière-ment capricieux car ils n’ont pas les ressources pour implémenter toutes les variantes, surtoutsur du code non validé.

3

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

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

1.3 Structure d’un document HTML ou XHTMLUn 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écifiele type de document (HTML, XHTML et version). Ceci permet que le navigateur puissesupporter 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’encodingn’est pas spécifié.

5. Dans le header, de manière optionnelle, une description du style de document (couleurs,polices, tailles, etc.) au format CSS.

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

4

https://malgouyres.org/


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

exemples/ChapitreHTML/ex01_helloWorldXhtml.html1 <!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 . org/1999/xhtml ”>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 tm l ; charset=utf−8 ”/>8 <!−− Ti t re de l a page dans l a fen ê t r e ou l ’ on g l e t du nav i ga t eur −−>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>Hel lo world !</p>13 </body>14 </html>

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

exemples/ChapitreHTML/ex02_helloWorldHtml5.html1 <!doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML avec l a langue : −−>3 <html lang=” f r ”>4 <head>5 <meta charset=”UTF−8”/>6 <!−− Dé c l a r a t i o n du type d ’ encodage −−>7 <!−− Ti t re de l a page dans l a fen ê t r e ou l ’ on g l e t du nav i ga t eur −−>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 He l lo world !13 </p>14 </body>15 </html>

Le XHTML 1.0 strict possède une syntaxe plus stricte que ses prédécesseurs, simplifiant letravail des navigateurs et des moteurs de recherche. En particulier, toutes les balises sont enminuscules et il y a obligation de fermer les balises, quitte à mettre une balise auto-fermantecomme <br/>. La norme HTML5 réintroduit un certain laxisme au niveau de la syntaxe maisil est préférable pour la lisibilité du code de respecter la syntaxe XHTML 1.0 strict dans unepage HTML5.

1.4 Premier document HTML5

exemples/ChapitreHTML/ex03_corps_balises.html1 <!doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML −−>3 <html lang=” f r ”>4 <!−− Voici l ’ en− tete qu i d e c l a r e l e s p r o p r i e t e s g ene ra l e s de l a page −−>5 <head> <!−− debut de l ’ en− tete HTML −−>

5


6 <!−− d e c l a r a t i on de l ’ encodage pour l e s accent s . . . −−>7 <meta charset=”UTF−8”/>8 <!−− Ti t re de l a page ( au s s i t i t r e de l a fen ê t r e du nav i ga t eur ) −−>9 <t i t l e>Premières 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 premier f i c h i e r HTML</h1>13 <p> <!−− Nouveau paragraphe ( saut de l i g n e ) −−>14 Ceci e s t mon premier f i c h i e r HTML. <br/> <!−− à l a l i g n e −−>15 Le ”body” repr é sente l e corps du document ,16 dans l e q u e l on met l e t ex t e à a f f i c h e r .17 </p> <!−− Fin de paragraphe −−>18 <p>19 Le header ( b a l i s e ”head” ) dé f i n i t l e s p ropr 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 et des é l é ments de style .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.html1 <!doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML −−>3 <html lang=” f r ”>4 <!−− Voici l ’ en− tete qu i d e c l a r e l e s p r o p r i e t e s g ene ra 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 on de l ’ encodage pour l e s accent s . . . −−>7 <meta charset=”UTF−8”/>8 <!−− Ti t re de l a page ( au s s i t i t r e de l a fen ê t r e du nav i ga t eur ) −−>9 <t i t l e>Structure d ’ un document HTML</ t i t l e>

10 </head>11 <body> <!−− dé but du corps HTML −−>

6



12 <h1>Structure d ’ un document HTML</h1>13 <p>14 HTML e s t un langage de d e s c r i p t i o n de documents non WISIWIG,15 c ’ e s t à d i r e que l e f i c h i e r source ne res semble pas vraiment16 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 ver ra .<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>, qui sont encadr é es par des &l t ; e t &gt ; ,21 <strong>dé f i n i s s e n t l a s t r u c t u r e du document</strong> en ca rac t é r i s a n t

d i f f é r en t e s22 p a r t i e s du document ( t i t r e s , paragraphes , tableaux , é l ément important ,23 l i s t e à puces , images , o b j e t s de type vid éo f l a sh , multimé dia 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&gt ; &l t ;/p&gt ; dé l i m i t e un27 paragraphe . Un couple de b a l i s e s avec du tex t e antre l e s b a l i s e s s ’ a p p e l l e

un28 <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.html1 <!doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML −−>3 <html lang=” f r ”>4 <!−− Voici l ’ en− tete qu i d e c l a r e l e s p r o p r i e t e s g ene ra l e s de l a page −−>5 <head> <!−− debut de l ’ en− tete HTML −−>6 <meta charset=”UTF−8”/> <!−− Dec lara t ion du type d ’ encodage −−>7 <!−− Ti t re de l a page ( au s s i t i t r e de l a fen ê t r e du nav i ga t eur ) −−>8 <t i t l e>Style CSS HTML locaux</ t i t l e>

7


9 </head>10 <body style=” font−family : Ar ia l Verdana ; font−s ize : 125% ; width : 800px ;”> <!−−

dé but du corps HTML −−>11 <h1>Mise en forme CSS l o c a l e</h1>12 <p style=”text−align : j u s t i f y ;”>13 Le style <em>CSS</em> des é l é ments permet l a mise en forme ( position , t a i l l e

, couleur , po l i c e , bordure , . . . )14 d ’ un é l ément et de son contenu .15 </p>16 <p style=”text−align : j u s t i f y ;”>17 Un tex t e j u s t i f i é e s t un tex 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 a18 bo î te englobant l e t ex t e . La propr i é t é <em>CSS</em> <code>text−align</code

> permet de19 gé r e r l ’ a l ignement ( j u s t i f i é , d ro i t , gauche , c ent r é ) du t ex t e dans un é l é

ment .20 </p>21 <p style=”text−align :c en te r ”>22 La propr i é t é <code>font−weight</code> permet de mettre des <span style=”

font−weight :bo 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 propr i é t é <code>font−variant</code> permet de mettre des <span style=”

font−variant :smal l−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 propr i é t é <code>font −style</code> permet de mettre des <span style=”

font −style : i t a l i c ;”>é l é ments en i t a l i q u e s</span>28 <br/>29 <strong>Ces propr i é t é s ne doivent pas ê t r e confondues avec l e s b a l i s e s &l t ;

strong&gt ; , &l t ;em&gt ; , e t c . qui dé f i n i s s e n t30 l a s t r u c t u r e du document ( é l é ments importants , à sou l i gne r , e t c . . . )</strong>31 </p>

8



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

exemples/ChapitreHTML/ex06_mise_en_forme_globale.html1 <!doctype html>2 <!−− Dec lara t ion du debut d ’ un document HTML −−>3 <html lang=” f r ”>4 <!−− Voici l ’ en− tete qu i d e c l a r e l e s p r o p r i e t e s g ene ra l e s de l a page −−>5 <head>6 <meta charset=”utf−8”/> <!−− Dec lara t ion du type d ’ encodage −−>7 <s tyle>8 /* Dé f i n i t i o n du s t y l e */9 body {

10 font−family : Ar i a l Verdana ;11 font−s ize : 125% ;12 width : 800px ;13 }14 p {15 text−align : j u s t i f y ;16 }/* mise en forme des paragraphes */17 /* mise en forme du t i t r e */18 h1 {19 text−align : center ;20 font−s ize : 150% ;21 }

9


22 /* mise en forme é l émentt important l e s 120% sont r e l a t i f au con t ex t e */23 strong {24 font−variant : small−caps ;25 font−s ize : 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 spect du tex t e ou l e

graphisme .34 De plus , une dé f i n i t i o n g l o b a l e du style de l a page e s t p lus modulaire (un

s e u l endro i t35 à mod i f i e r pour changer tous l e s s t y l e s des b a l i s e s d ’ un même type .36 Pour c e t t e ra i son , <strong>on peut dé f i n i r l e style <em>CSS</em>

globalement</strong> v ia une b a l i s e &l t ; style&gt ;37 au niveau de l ’ en−tê te (& l t ;head&gt ; ) .38 </p>39 <p>40 S i l ’ on souha i t e changer l ’ a spect des é l é ments s t r u c t u r e l s , par exemple41 dont l ’ importance e s t s o u l i g n é e avec42 &l t ; strong&gt ; &l t ; /s t rong&gt ; ,43 on l e dé f i n i t au niveau du style g l o b a l .44 </p>45 <p>46 On peut a i n s i dé f i n i r l e s s t y l e s typographiques ( fonte , . . . ) e t l a mise47 en page ( a l ignement à gauche , à dro i t e , j u s t i f i é , e t c . ) du t ex t e48 dans l e s d i f f é r en t s é l é ments d ’ une page HTML au niveau de l ’ en−tê te .49 </p>50 <p>51 Enfin , s i l ’ on souha i t e changer l e style l oca lement pour dé co r e r52 sans 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 <strong style=” font

−variant :normal ;”>surcharge r l e style g l o b a l</strong>53 loca lement .54 On peut a u s s i u t i l i s e r<span style=” font−family :Comic Sans MS ; font−s ize

:150%”> l a b a l i s e géné r i que &l t ;span&gt ;& l t ; /span&gt ; . </span>55 pour mod i f i e r loca lement l ’ a spect du tex t e sans mod 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.html1 <!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−s ize : 125% ;9 background−color : #c0c0c0 ; /* font e par dé f au t */

10 color : #333333 ;11 font−weight : bold

10



12 }13 p {14 text−align : j u s t i f y ;15 }/* mise en forme des paragraphes */16 /* mise en forme du t i t r e */17 h1 {18 text−align : center ;19 font−s ize : 150% ;20 background−color : #ddd ;21 border−style : s o l i d ;22 border−color : b lack ;23 border−width : 2px ;24 }25 /* mise en forme é l émentt important l e s 120% sont r e l a t i f au con t ex t e */26 strong {27 background−color : white ;28 color : b lack ;29 font−weight : bo lder ;30 }31 </s tyle>32 <t i t l e>Dé f i n i t i o n des cou l eu r s</ t i t l e>33 </head>34 <body>35 <h1> Dé f i n i t i o n des cou l eu r s dans dans un style CSS </h1>36 <p>37 Dans l e style CSS , on peut a u s s i dé f i n i r l e s cou l eu r s des d i f f é r en t s38 é l é ments .39 </p>40 <p>41 Les s i t e s web ont en géné r a l une <strong>charte graphique</strong> qui42 comprend un p e t i t nombre de cou l eu r s bien harmonis é es qui symbol i sent bien43 l ’ e n t i t é que repr é sente 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 , ce sont souvent des personnes d i f f é r en t e s qui47 s ’ occupent du style CSS ou qui s ’ occupent du contenu et des f o n c t i o n a l i t é s48 du s i t e .49 </p>

11


50 </body>51 </html>

1.7 Formes d’inclusion de styles CSSIl y a essentiellement 3 manières de modifier le style graphique des différents éléments d’unepage 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"> (styleCSS 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 plusieurspages 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 quetoutes les pages aient le même style graphique. Du fait que le style CSS est défini à unseul endroit, la maintenance est plus facile : il n’y a qu’un seul endroit à changer pourmodifier 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 plusieurspages 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 lasouplesse de l’organisation des styles CSS.

Pour le dernier exemple (sur les couleurs) de la partie 1.6, on peut par exemple obtenir lamême chose en incluant le style CSS dans une feuille de style séparée :

exemples/ChapitreHTML/ex08_css_stylesheet_couleur.html1 <!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é er une f e u i l l e de style CSS </h1>

10 <p>

12



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

12 du f i c h i e r <i>HTML</ i>.13 </p>14 <p>15 Cel à permet d ’ augmenter l a modular i t é du code d ’ un s i t e web car16 l e style <i>CSS</ i> de toute s l e s pages d ’ un même s i t e peut ê t r e17 dé f i n i à un s e u l endro i t .18 </p>19 <p>20 S ’ i l f au t changer l e style d ’ un c e r t a i n type de b a l i s e s dans tout l e s i t e ,21 i l n ’ y a qu ’ un s e u l endro i t à changer . ;−)22 </p>23 </body>24 </html>

exemples/ChapitreHTML/myStyle.css1 /* Dé f i n i t i o n du s t y l e */2 body {3 font−family : Ar i a l Verdana ;4 font−s ize : 125% ; /* f a c t e u r d ’ é v h e l l e sur l a t a i l l e g l o b a l e de l a p o l i c e

*/5 background−color : #c0c0c0 ; /* font e par dé f au t */6 color : #333333 ; /* cou leur du t e x t e g l o b a l e */7 }8 /* mise en forme des paragraphes */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 paragraphes */11 }12 /* mise en forme du t i t r e */13 h1 {14 text−align : c en t e r ; /* t e x t e cen t r é */15 font−s ize : 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 ; /* cou leur du fond */17 border−style : s o l i d ; /* bordure en t r a i t p l e i n */18 border−color : b lack ; /* cou leur du bord */19 border−width : 2px ; /* é pa i s s eu r du bord */20 border−rad iu s : 10px ; /* bordure arrondie */21 }22 /* mise en forme é l émentt important l e s 120% sont r e l a t i f au con t ex t e */

13


23 st rong {24 color : b lack ; /* t e x t e noir */25 font−weight : bo lder ; /* ex t ra gras */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 stylede ce dernier exemple.

1.8 Liens

exemples/ChapitreHTML/ex09_liens.html1 <!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>Liens hypertexte</ t i t l e>7 </head>8 <body>9 <!−− dé but du corps HTML −−>

10 <h1>Liens hypertexte</h1>11 <div>12 <strong>On peut cr é er d i f f é r en t s types de l i e n s :</strong>13 <ul>14 <!−− l i s t e à puces −−>15 <l i>16 l i e n s hypertexte 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



18 <l i>19 l i e n s hypertexte en abso lu : <a href=” h t t p ://www . remysprogwebtuto .

org/exemples/html/ex_images . html ” > c l i q u e z i c i</a>.20 </ l i>21 <l i>22 l i e n s ver s une ancre ve r s un autre emplacement dans l a page : <a href=

”#monParagraphe” >Voir l e deuxième paragraphe</a>23 </ l i>24 </ul>25 </div>26 <p id=”monParagraphe” style=” font−s ize : 150% ; font−weight : b o l d e r ;”>27 Pour f a i r e des l i e n s ver s l e s i t e même, i l vaut tou jour s mieux28 u t i l i s e r des l i e n s en r e l a t i f s car s i on démé nage l e s i t e ( ou29 s i on r é cupère c e r t a i n e s c l a s s e s ) , l e s l i e n s ne ca s s en t pas .30 ( à cond i t i on de garder l ’ a rbore s cence des r é p e r t o i r e s t e l l e q u e l l e )31 <br/>32 &Eacute ; v i t e z l e s chemins du genre :33 <br/>34 <code>35 ”C :/ j e/ tourne/pas/sur/un/serveur/ l inux . 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.html1 <!doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”utf−8”/>

15


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 au t des l i e n s */8 a : l ink {9 text−decoration : none ;

10 color : #00e ; /* b l eu c l a i r */11 }12 /* s t y l e des l i e n s v i s i t é s */13 a : v i s i t e d {14 text−decoration : none ;15 color : #c0c ;/* mauve */16 }17 /* s t y l e des l i e n s v i s i t é s */18 a :hover {19 text−decoration : unde r l i n e ; /* sou l i gn é */20 color : #e40 ;/* rouge v i f */21 }22 </s tyle>23 <t i t l e>Liens hypertexte (2 )</ t i t l e>24 </head>25 <body>26 <!−− dé but du corps HTML −−>27 <h1>Mise en forme des l i e n s hypertexte</h1>28 <div>29 <strong>On peut cr é er d i f f é r en t s types de l i e n s :</strong>30 <ul>31 <!−− l i s t e à puces −−>32 <l i>33 l i e n s hypertexte 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 hypertexte en abso lu : <a href=” h t t p ://www . remysprogwebtuto .

org/exemples/html/ex_images . html ” > c l i q u e z i c i</a>.37 </ l i>38 <l i>39 l i e n s ver s une ancre ve r s un autre emplacement dans l a page : <a href=

”#monParagraphe” >Voir l e deuxième paragraphe</a>40 </ l i>41 </ul>42 </div>43 <p id=”monParagraphe” style=” font−s ize : 150% ; font−weight : b o l d e r ;”>44 Pour f a i r e des l i e n s ver s l e s i t e même, i l vaut tou jour s mieux45 u t i l i s e r des l i e n s en r e l a t i f s car s i on démé nage l e s i t e ( ou46 s i on r é cupère c e r t a i n e s c l a s s e s ) , l e s l i e n s ne ca s s en t pas .47 ( à cond i t i on de garder l ’ a rbore s cence des r é p e r t o i r e s t e l l e q u e l l e )48 <br/>49 &Eacute ; v i t e z l e s chemins du genre :50 <br/>51 <code>52 ”C :/ j e/ tourne/pas/sur/un/serveur/ l inux . html ”</code>53 </p>54 </body>55 <!−− f i n du corps HTML −−>56 </html>57 <!−− f i n du code HTML −−>

16



1.9 Tableaux

exemples/ChapitreHTML/ex11_tableaux.html1 <!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>1112 <p>13 Voic i une table avec l e style par dé faut . 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 sans mise en forme18 </caption>19 <tbody><!−− corps de l a t a b l e −−>20 <tr><!−− nouv e l l e l i g n e −−>21 <td><!−− nouv e l l e case −−>22 Ceci e s t l a case<br/>d ’ en haut à gauche23 </td>24 <td><!−− nouv e l l e case −−>25 Ceci e s t l a case<br/>d ’ en haut au mi l i eu26 </td>27 <td><!−− nouv e l l e case −−>28 Ceci e s t l a case<br/>d ’ en haut à d r o i t e29 </td>30 </tr>31 <tr> <!−− nouv e l l e l i g n e −−>32 <td><!−− nouv e l l e case −−>33 Ceci e s t l a case<br/>d ’ en bas à gauche34 </td>35 <td><!−− nouv e l l e case −−>36 Ceci e s t l a case<br/>d ’ en bas au mi l i eu

17


37 </td>38 <td><!−− nouv e l l e case −−>39 Ceci e s t l a case<br/>d ’ en bas à d r o i t e40 </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.html1 <!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 co lonnes</h1>1112 <p>13 Voic i une table avec l e style par dé faut et avec des en−tê l e ( t i t r e s ) de

l i g n e et co lonne .14 </p>15 <table>16 <caption>17 Exemple de table sans mise en forme18 </caption>19 <thead><!−− En−tê t e de l a t a b l e −−>20 <tr><!−− nouv e l l e l i g n e ( l i g n e de t i t r e s de co lonnes ) −−>21 <th ></th><!−− case v ide en haut à gauche −−>22 <th ><strong>Colonne 1</strong></th>23 <th><strong>Colonne 2</strong></th>

18



24 <th><strong>Colonne 3</strong></th>25 </tr>26 </thead>27 <tbody><!−− corps de l a t a b l e −−>28 <tr> <!−− nouv e l l e l i g n e −−>29 <th ><!−− t i t r e de l i g n e −−>30 <strong>l i g n e&nbsp ;1</strong>31 </th>32 <td><!−− nouv e l l e case −−>33 Ceci e s t l a case<br/>34 d ’ en haut à gauche35 </td>36 <td><!−− nouv e l l e case −−>37 Ceci e s t l a case<br/>38 d ’ en haut au mi l i eu39 </td>40 <td><!−− nouv e l l e case −−>41 Ceci e s t l a case<br/>42 d ’ en haut à d r o i t e43 </td>44 </tr>45 <tr><!−− nouv e l l e l i g n e −−>46 <th><!−− t i t r e de l i g n e −−>47 <strong>l i g n e&nbsp ;2</strong>48 </th>49 <td><!−− nouv e l l e case −−>50 Ceci e s t l a case<br/>51 d ’ en bas à gauche52 </td>53 <td><!−− nouv e l l e case −−>54 Ceci e s t l a case<br/>55 d ’ en bas au mi l i eu56 </td>57 <td><!−− nouv e l l e case −−>58 Ceci e s t l a case<br/>59 d ’ en bas à d r o i t e60 </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.html1 <!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 ( . /ex13_sty lesheet_tableaux . c s s ) ;8 </s tyle>9 <t i t l e>Tableaux en HTML (3 )</ t i t l e>

10 </head>

19


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 forme17 </caption>18 <thead><!−− En−tê t e de l a t a b l e −−>19 <tr><!−− nouv e l l e l i g n e ( l i g n e de t i t r e s de co lonnes ) −−>20 <th style=”border−radius : 10px 0 0 0”></th><!−− case v ide en haut à

gauche −−>21 <th >Colonne 1</th>22 <th>Colonne 2</th>23 <th style=”border−radius : 0 10px 0 0”>Colonne 3</th>24 </tr>25 </thead>26 <tbody><!−− corps de l a t a b l e −−>27 <tr> <!−− nouv e l l e l i g n e −−>28 <th ><!−− t i t r e de l i g n e −−>29 l i g n e&nbsp ;130 </th>31 <td><!−− nouv e l l e case −−>32 Ceci e s t l a case<br/>33 d ’ en haut à gauche34 </td>35 <td><!−− nouv e l l e case −−>36 Ceci e s t l a case<br/>37 d ’ en haut au mi l i eu38 </td>39 <td><!−− nouv e l l e case −−>40 Ceci e s t l a case<br/>41 d ’ en haut à d r o i t e42 </td>

20



43 </tr>44 <tr><!−− nouv e l l e l i g n e −−>45 <th style=”border−radius : 0 0 0 10px”><!−− t i t r e de l i g n e −−>46 l i g n e&nbsp ;247 </th>48 <td><!−− nouv e l l e case −−>49 Ceci e s t l a case<br/>50 d ’ en bas à gauche51 </td>52 <td><!−− nouv e l l e case −−>53 Ceci e s t l a case<br/>54 d ’ en bas au mi l i eu55 </td>56 <td style=”border−radius : 0 0 10px 0”><!−− nouv e l l e case −−>57 Ceci e s t l a case<br/>58 d ’ en bas à d r o i t e59 </td>60 </tr>61 </tbody>62 </table>63 <p>64 <strong>Remarque .</strong> La propr i é t é <i>CSS</ i> <code>border−radius</

code> permet de cr é er65 des ang l e s a r r ond i s pour l e s bordures . E l l e peut se dé f i n i r g lobalement

pour l e s 4 ang l e s66 ( vo i r i c i l e style de l a b a l i s e &l t ; table&gt ; dans l a f e u i l l e de style des

tableaux )67 du bord ou bien ind iv idue l l ement pour chaque ang le ( v o i r i c i l e s s t y l e s

locaux sur &l t ;th&gt ; e t &l t ;td&gt ; ) .68 </p>69 </body><!−− f i n du corps HTML −−>70 </html>71 <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex13_stylesheet_tableaux.css1 /** FEUILLE DE STYLE COMPLÉMENTAIRE POUR MISE EN FORME DES TABLEAUX **/2 tab l e { /* mise en forme des t a b l e s */ s3 background−color : #ddd ; /* fond g r i s */4 /* Paramètres ombrage : bas , d ro i t e , dé grad é , cou l eur */5 box−shadow : 8px 8px 22px #000 ; /* Ombrage aux bords de l a t a b l e */6 border−width : 3px ; /* é pa i s s eu 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 cont inu */8 border−color : b lack ; /* cou leur du bord */9 border−radius : 10px ;

10 }11 capt ion {12 color :red ;13 font−s ize :130% ;14 }15 t r td { /* mise en forme des c e l l u l e s */16 border−style : dashed ; /* bord en p o i n t i l l é s */17 border−width : 2px ; /* é pa i s s eu r du t r a i t pour l e bord */18 border−color : b lack ; /* cou leur du bord */19 background−color : white ;/* fond b lanc */20 color : b lack ; /* cou leur du t e x t e */

21


21 text−align : center ; /* t e x t e cen t r é */22 padding : 20px ; /* espace en t re 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 des en−t ê t e de l i g n e e t co lonne */25 border−style : s o l i d ; /* bord en t r a i t cont inu */26 border−width : 2px ; /* é pa i s s eu r du t r a i t pour l e bord */27 border−color : b lack ; /* cou leur du bord */28 text−align : center ; /* t e x t e cen t r é */29 font−weight : bo lder ; /* ca ra c t è r e s gras appuyé */30 color : b lack ; /* cou leur du t e x t e */31 padding : 20px ; /* espace en t re 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’imagesAvant 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 lenombre de pixels par redimensionnement de l’image, soit en compressant plus fortementl’images (paramètre d’enregistrement JPEG ou PNG) lorsque c’est possible sans dégraderla qualité.

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

3. Il faut parfois éclaircir ou foncer l’image pour faire ressortir le contraste avec le texteincrusté 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 unpeu d’habitude).

22



exemples/ChapitreHTML/ex14_images.html1 <!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&gt ;&nbsp ; :<br/>12 </p>13 <p style=”text−align : c en te r ;”>141516 <img src=” . /pic/gimp . 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 re toucher l e s images avec l e l o g i c i e l GNU GIMP<br/>26 voyez l a27 <a href=” . /pic/capture_gimp . png”>capture d ’ é cran</a> montrant28 comment diminuer l e nombre de p i x e l s d ’ une image pour en diminuer l e29 po ids ( en megaoctets ) .30 </p>3132 </body> <!−− f i n du corps HTML −−>33 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex15_images_avec_click.html1 <!doctype html>2 <html lang=” f r ”>

23


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>Cl i ck sur une image en HTML</ t i t l e>7 </head>8 <body> <!−− dé but du corps HTML −−>9 <h1>Cl i ck sur une image en HTML</h1>

10 <p>11 On i n s è r e l e s images avec l a b a l i s e &l t ;img&gt ;&nbsp ; :<br/>12 </p>13 <p style=”text−align : c en te r ;”>14 Cl iquez sur l e GNU pour l e v o i r en grand :<br/>15 <img src=” . /pic/gimp . png” alt=”The GIMP Logo” width=”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>2526 </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.html1 <!doctype html>

24



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>Figures avec l é gendes en HTML</ t i t l e>7 </head>8 <body> <!−− dé but du corps HTML −−>9 <h1>Figures avec l é gende en HTML</h1>

10 <p>11 On cr é e une f i g u r e contenant une image avec l a b a l i s e &l t ; f i g u r e&gt ;&nbsp

; :<br/>12 </p>13 <figure style=”text−align :c en te r ;”>14 <img src=” . /pic/gimp . png” alt=”The GIMP Logo” width=”150”15 style=”vertical−align : middle ;”16 />17 <figcaption>Le Logo de <i>GIMP</ i></figcaption>18 </figure>19 <figure style=”text−align :c en te r ;”>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 </figure>26 </body> <!−− f i n du corps HTML −−>27 </html> <!−− f i n du code HTML −−>

exemples/ChapitreHTML/ex17_subfigure.html1 <!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 ”/>

25


6 <t i t l e>Sous− f i gures avec l é gendes en HTML</ t i t l e>7 </head>8 <body> <!−− dé but du corps HTML −−>9 <h1>Sous− f i gures avec l é gendes en HTML</h1>

10 <p>11 On cr é e des sous− f i gu re s en imbriquant b a l i s e s &l t ; f i g u r e&gt ;&nbsp ; :<br/>12 On peut f a i r e en s o r t e que l e s f i g u r e s se mettent l ’ une à cô t é de l ’ autre

avec13 l a propr i é t é <i>CSS</ i> <code>”display : i n l i n e− b l o c k ;”</code>.14 </p>15 <figure style=”text−align :c en te r ;”>16 <figure style=”display : i n l i n e− b l o c k ;”>17 <img src=” . /pic/gimp . png” alt=”The GIMP Logo” width=”150”18 style=”vertical−align : middle ;”19 />20 <figcaption><b>(a )</b> Le Logo de <i>GIMP</ i></figcaption>21 </figure>22 <figure style=”display : i n l i 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 </figure>29 <figcaption><b>Figure 1 .</b> Exemples de l ogo s de l o g i c i e l s ou l i c e n c e s Open

Source</figcaption>30 </figure>31 </body> <!−− f i n du corps HTML −−>32 </html> <!−− f i n du code HTML −−>

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

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

26


Chapitre 2

Styles CSS et mise en page

2.1 Éléments HTML de type block et inlineAvant d’étudier plus avant les styles CSS, nous devons en dire un peu plus sur la structurationdes pages HTML.

On distingue en HTML dans catégories d’éléments : les éléments de type block et les élémentsde 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.html1 <!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 é ments de type ” b l o c k ”</ t i t l e>

27


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 pr inc ipaux types de b a l i s e s&nbsp ; : i n l i n e ou block

.12 </p>13 <ol>14 <l i>15 <strong>Exemples de b a l i s e s de type block&nbsp ; :</strong>16 <br/>17 <ol type=”a”>18 <l i>19 &l t ;p&gt ;&nbsp ; : nouveau paragraphe&#59 ;20 </ l i>21 <l i>22 &l t ; table&gt ;&nbsp ; : tab leau contenant des donné e&#59 ;23 </ l i>24 <l i>25 &l t ;h1&gt ;&nbsp ; , . . . , &l t ;h6&gt ;&nbsp ; : d i f f é r en t s26 niveaux de t i t r e &#59 ;27 </ l i>28 <l i>29 &l t ; dl&gt ;&nbsp ; : l i s t e de dé f i n i t i o n &#59 ;30 </ l i>31 <l i>32 &l t ; ul&gt ;&nbsp ; : l i s t e non ordonn é e&#59 ;33 </ l i>34 <l i>35 &l t ; ol&gt ;&nbsp ; : l i s t e ordonn é e&#59 ;36 </ l i>37 <l i>38 &l t ;pre&gt ;&nbsp ; : i n s e r t i o n de code ( preformated text ) ” verbat im ”39 en p o l i c e typewr i t e r avec r e s p e c t de l ’ i ndenta t i on .40 </ l i>41 </ol>42 Ces b a l i s e s changent l ’ apparence de l e u r contenu et l e u r nature43 au niveau s t r u c t u r e l e t é ventue l l ement l e u r f o n c t i o n dans l e cas du l i e n44 ou de l ’ image .45 <br/>46 En <i>HTML5</ i>, on trouve a u s s i l e s b a l i s e s s é mantiques &l t ; header&gt ; ,

&l t ; f o o t e r&gt ; , &l t ;nav&gt ; , e t c . que nous ver rons p lus l o i n .47 </ l i>48 </ol>49 </body>50 </html>

Lors de l’insertion d’un élément de type block dans un document HTML, l’élément va (pardé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.html1 <!doctype html>

28


Chapitre 2 : Styles CSS et mise en page

2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l i nk rel=” s t y l e s h e e t ” href=” . /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 <ol start=”2”>11 <l i><strong>Exemples de b a l i s e s en l i g n e ou ” i n l i n e ”&nbsp ; :</strong></ l i>12 <ol type=”a”>13 <l i>&l t ;span&gt ;&nbsp ; : changement l o c a l de style&nbsp ;&#59 ;</ l i>14 <l i>&l t ;a&gt ;&nbsp ; : l i e n hypertexte&#59 ;</ l i>15 <l i>&l t ; strong&gt ;&nbsp ; : é l ément important&#59 ;</ l i>16 <l i>&l t ;em&gt ;&nbsp ; : é l ément à s o u l i g n e r &#59 ;</ l i>17 <l i>&l t ;q&gt ;&nbsp ; : c i t a t i o n courte&#59 ;</ l i>18 <l i>&l t ;code&gt ;&nbsp ; : t ex t e en p o l i c e <code>typewr i t e r</code></ l i>19 </ol>20 Ces b a l i s e s changent l ’ apparence de l e u r contenu mais pas l e u r nature21 au niveau 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 </ol>24 <p>25 Tout é l ément i n l i n e do i t ê t r e contenu dans au moins un block . Le b locks

peuvent26 ê t r e imbriqu é s mais l e s b locks &l t ;p&gt ;&nbsp ; e t l e s b locks t i t r e27 &l t ;h1&gt ;&nbsp ; , . . . , &l t ;h6&gt ;&nbsp ; ne peuvent con t en i r d ’ aut r e s b locks .<

br/>28 Un é l ément i n l i n e ne peut con t en i r aucun é l ément de type block ;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émentprécédent sur la même ligne, ou à la ligne suivante s’il n’y a plus de place sur la ligne.

29


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

• display: none : L’élément est purement et simplement supprimé du flux, comme s’iln’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 blockou inline. Ils s’insèrent dans le flux comme des éléments inline : à la suite sur la mêmeligne.

exemples/ChapitreCSS/ex03_propriete_display.html1 <!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>Propr i é t é display</ t i t l e>7 </head>8 <body>9 <h1>Propr i é t é display</h1>

10 <p style=”border−style : groove ; display : i n l i n e− b l o c k ; vertical−align :middle ;”>

11 Ce premier paragraphe ,<br/>avec un bord en t r a i t 3D,12 <br/>e s t un paragraphe en in l i n e−b lock .13 </p>

30



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

15 Ce second paragraphe , <br/>avec un bord en t i r e t s ,16 <br/>e s t un paragraphe en in 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 in ,20 <br/>e s t un paragraphe normal de type block .21 </p>22 <p style=”border−style : s o l i d ; display : none ; vertical−align : middle ;”>23 Ce quatrième paragraphe , <br/>avec un bord en t r a i t p l e in ,24 <br/>e s t un paragraphe en display : none ( non a f f i c h é ! ) .25 </p>26 <p style=”border−style : do t t ed ; display : i n l i n e ; vertical−align : middle ;”>27 Ce cinquième paragraphe , <br/>avec un bord en p o i n t i l l és ,28 <br/>e s t un paragraphe 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.html1 <!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&gt ;</ t i t l e>7 </head>8 <body>

31


9 <h1>Dis t ingue r des p a r t i e s dans l a page&nbsp ; :<br/>La b a l i s e &l t ;div&gt ;</h1>

10 <div style=”background−color : #f85 ”>11 <p>12 <b>1)</b> Un é l ément &l t ;div&gt ; e s t une p a r t i e d ’ un document <i>HTML</ i

>.13 La b a l i s e &l t ;div&gt ; e s t ( par dé faut ) de type block .14 </p>15 <p>16 Contrairement aux paragraphes , un &l t ;div&gt ; peut con t en i r d ’ au t r e s

b a l i s e s17 de type block comme d ’ aut r e s &l t ;div&gt ; , des paragraphes , des tableaux ,

e t c .18 </p>19 </div>20 <div style=”background−color :wh i te ;”>21 <p>22 <b>2)</b> Le &l t ;div&gt ; d i f f è r e d ’ un &l t ;span&gt ; en c e c i que l e span

e s t23 ( par dé faut ) de type i n l i n e et24 <span style=”background−color : b l a c k ; color : wh i te ; border−radius : 5px ;”

>25 l e &l t ;span&gt ; ne modi f i e pas vraiment l a s t r u c t u r e du document26 </span>.27 I l donne j u s t e un s t a t u t ou un style p a r t i c u l i e r à une c e r t a i n e é tendue

du document .28 </p>29 <p>30 Le &l t ;div&gt ; , au con t ra i r e , permet de <strong>d i v i s e r</strong> l e

document en31 p a r t i e s qui peuvent ê t r e d i spos é es au gr é de l a f a n t a i s i e du de s i gne r .32 Le &l t ;div&gt ; e s t l a base de l a d i v i s i o n des pages en d i f f é r en 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.html1 <!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 : white ;

10 }11 body div p{12 background−color : #eee ;

32



13 color : #111 ;14 }15 body div div p{16 background−color : #111 ;17 color : #eee ;18 }19 </s tyle>20 <t i t l e>Imbr i cat ion des b a l i s e s e t <i>CSS</ i></ t i t l e>21 </head>22 <body>23 <h1>Imbr i ca t ion des 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 sur l ’ imbr i ca t i on des

b locks )26 s ’ imbr iquer l e s unes dans l e s aut r e s . I c i un paragraphe imbriqu é

di rectement27 dans l e &l t ;body&gt ; .<br/>28 C’ e s t l e style <code>body p</code> qui s ’ app l ique i c i .29 </p>30 <div>31 <p>32 Le style <i>CSS</ i> des é l é ments peut ê t r e r é g l é d i f f é remment su ivant

l e u r33 imbr i ca t i on dans d ’ aut r e s b a l i s e s . I c i un paragraphe imbriqu é dans un &

l t ;div&gt ;34 lui−même imbriqu é di rectement dans l e &l t ;body&gt ; .<br/>35 C’ e s t l e style <code>body div p</code> qui s ’ app l ique i c i .36 </p>37 <p>38 I c i un autre paragraphe imbriqu é dans un &l t ;div&gt ;39 lui−même imbriqu é di rectement dans l e &l t ;body&gt ; .<br/>40 C’ e s t l e style <code>body div p</code> qui s ’ app l ique i c i .41 </p>42 </div>

33


43 <div>44 <p>45 I c i encore un autre paragraphe imbriqu é dans un &l t ;div&gt ;46 lui−même imbriqu é di rectement dans l e &l t ;body&gt ; .<br/>47 C’ e s t l e style <code>body div p</code> qui s ’ app l ique i c i .48 </p>49 <div>50 <p>51 I c i on a un paragraphe imbriqu é dans un &l t ;div&gt ;52 lui−même dans un &l t ;div&gt ; imbriqu é d i rectement dans l e &l t ;body&gt

; .<br/>53 C’ e s t l e style <code>body div div p</code> qui s ’ app l ique i c i .54 </p>55 </div>56 </div>57 </body>58 </html>

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

a

ul

body

p

p li

div

divh1

span

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

Dans le fichier CSS, on peut définir un style (et éventuellement plusieurs classes CSS) pourchaque sous-arbre de l’arborescence. Pour cela, on indique le sous-arbre par la succession desnoeuds de la racine de l’arbre vers la racine du sous-arbre (voir exemple ci-dessous).

34



exemples/ChapitreCSS/ex06_arborescenceCSS.html1 <!doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l i nk rel=” s t y l e s h e e t ” href=” . /ex06_arborescenceCSS . c s s ”/>6 <t i t l e>Arborescence de b a l i s e s</ t i t l e><t i t l e>Arborescence de b a l i s e s e t CSS<

/ t i t l e>7 </head>8 <body>9 <h1>Tit re p r i n c i p a l</h1>

10 <p>11 f e u i l l e 112 <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 <ul>23 <l i>24 f e u i l l e 525 </ l i>26 <l i>27 f e u i l l e 628 </ l i>29 </ul>30 </div>31 </body>32 </html>

exemples/ChapitreCSS/ex06_arborescenceCSS.css1 /* s t y l e par dé f au t du t e x t e */2 body {3 font−family : t imes , s e r i f ;4 font−s ize :14pt ;5 background−color : #ccc ;6 color : #222 ;7 }

35


89 h1 {

10 text−align : c en t e r ;11 }1213 div {14 background−color : #f f 0 ;15 }1617 p {1819 background−color : white ;2021 }2223 p a {2425 text−decoration : o v e r l i n e ;2627 }2829 div div p {30 color : red ;31 text−align : c en t e r ;32 background−color : #ddd ;3334 }353637 div div p span {38 font−family : Comic Sans MS ;39 font−s ize :18pt ;40 }414243 div u l {44 background−color : #0 f f ;45 color : red ;46 }

2.5 Classes CSSLes classes CSS permettent d’appliquer un style CSS différent à différentes catégories (ouclasses, que l’on distingue pour un même type de balises HTML.

exemples/ChapitreCSS/ex07_classes_css.html1 <!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=” . /ex07_classes_css . c s s ”/>6 <t i t l e>Clas s e s CSS</ t i t l e>7 </head>8 <body>

36



9 <h1>Clas s e s CSS</h1>10 <p class=” l a b e l ”>11 Menu :12 </p>13 <ol class=”menu”>14 <l i>15 <a class=”boutton−ombre” href=”#part1 ” >Qu’ est−ce que c l a s s e s <i>CSS</ i>

&nbsp ; ?</a>16 </ l i>17 <l i>18 <a class=”boutton−ombre” href=”#part2 ” >À quoi ça s e r t&nbsp ; ?</a>19 </ l i>20 <l i>21 <a class=”boutton−ombre” href=”#part2 ” >Exemple d ’ usage</a>22 </ l i>23 </ol>24 <h2 id=” part1 ”><b>1)</b> Qu’ est−ce que c l a s s e s <i>CSS</ i>&nbsp ; ?</h2>25 <p >26 Les c l a s s e s permettent de dé f i n i r p l u s i e u r s c l a s s e s de contexte s27 dans l e s q u e l s l e s mises en formes sont d i f f é r en t e s ( v o i r <a class=”

normalLink” href=”#part2 ”>p a r t i e&nbsp ;2</a>)28 </p>29 <h2 id=” part2 ”><b>2)</b> À quoi ça s e r t&nbsp ; ?</h2>30 <p>31 Ainsi , des é l é ments qui ont l e même niveau d ’ imbr i ca t i on dans l e s b a l i s e s32 pourront avo i r un style d i f f é rent s e l on l e u r usage .33 </p>34 <h2 id=” part3 ”><b>3)</b> Exemple d ’ usage</h2>35 <p>36 Par exemple , pour l e s l i e n s&nbsp ;37 </p>38 <ol>

37


39 <l i>l e s l i e n s dans un menu pourront avo i r l e style d ’ un bouton ,</ l i>40 <l i>a l o r s que l e s l i e n s dans un a r t i c l e auront un aspect bleu s o u l i g n é

,</ l i>41 <l i>42 ou e n c o r e l e s l i e n s ve r s l e s sponsors dans l e pied de page auront

encore43 un autre aspect .44 </ l i>45 </ol>46 </body>47 </html>

exemples/ChapitreCSS/ex07_classes_css.css1 /* s t y l e par dé f au t du t e x t e */2 body {3 font−family : ”Comic Sans MS” ;4 font−s ize : 18 pt ;5 background−color : #f f f ;6 color : #222 ;7 }89 /* s t y l e du t i t r e */

10 h1 {11 font−weight : bold ;12 font−s ize : 150% ;13 color : white ;14 text−align : c en t e r ;15 background−image : l i n ea r−g rad i en t ( black , #bbb) ;16 padding : 15 pt ;17 }1819 h2 {20 font−weight : bold ;21 font−s ize : 120% ;22 }2324 p{25 tex−al ign : j u s t i f y ;26 }2728 p . l a b e l {29 display : i n l i n e ;30 background−color : t ransparent ;31 }3233 /* s t y l e des é l éments importants */34 st rong {35 font−variant : small−caps ;36 font−weight : bo lder ;37 color : b lack ;38 }3940 st rong . i n s i s t {41 font−s ize : 130% ;42 }

38



4344 st rong . warning {45 font−s ize : 150% ;46 color : red ;47 text−decoration : b l i nk ;48 }4950 /* s t y l e des é l éments mis en é v idence */51 em {52 font −style : i t a l i c ;53 color : b lack ;54 }5556 p {57 background−color : #ddd ;58 text−align : j u s t i f y ;59 padding : 5pt ;60 }6162 /* s t y l e par dé f au t des l i e n s */63 a {64 color : b lue ;65 text−decoration : unde r l i n e ; /* non sou l i g n é */66 }6768 o l . menu{69 display : i n l i n e−b lock ;70 }71 o l . menu l i {72 display : i n l i n e−b lock ;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 des mat ières */75 a . boutton−ombre {76 color : white ;77 border−style : groove ;78 border−width : 3px ;79 background−color : #333 ;80 text−decoration : none ; /* s u r l i g n é */81 padding : 5px ;82 border−radius : 15px ;83 box−shadow : 10px 20px 5px #777 ;84 }

exemples/ChapitreCSS/ex08_classes_css_tableaux.html1 <!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 <!−− In c l u s i on de s t y l e s supp l émentaires avec ” import ” −−>7 <s tyle>8 @import u r l ( ex08_classes_css_tableaux . c s s ) ;9 </s tyle>

10 <t i t l e>Style CSS de Tableaux</ t i t l e>11 </head>

39


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

40



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

exemples/ChapitreCSS/ex08_classes_css_tableaux.css1 tab l e {2 padding : 0px ;3 vertical−align : top ; /* mise en forme des t a b l e s */4 background−color : #ddd ;5 border−style : ou t s e t ;6 border−width : 10px ;7 border−color : b lack ;8 text−align : c en t e r ;9 margin : 0 auto ;

10 }1112 tr , td {13 border−style : dashed ; /* mise en forme des c e l l u l e s */14 border−width : 2px ;15 border−color : b lack ;16 padding : 20px ;17 }1819 tr , td . pa i r {20 background−color : b lack ;21 color : white ;22 }2324 tr , td . impair {25 background−color : white ;26 color : b lack ;27 }282930 th {31 border−style : s o l i d ;32 border−width : 2px ;33 border−color : b lack ;34 text−align : center ;35 font−weight : bo lder ;36 background−color : #ddd ;37 color : b lack ;38 padding : 20px ;39 }4041 th . pa i r {42 background−color : #ccc ;43 }4445 th . impair {

41


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

2.6 Sélecteurs de style CSS par ID

exemples/ChapitreCSS/ex09_id_selector_css.html1 <!doctype html>2 <html lang=” f r ”>3 <head>4 <meta http−equiv=”Content−Type” content=” t e x t /h tm 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=” . /ex09_id_se lector_css . c s s ”/>6 <t i t l e>Sé l e c t e u r s de style par ID</ t i t l e>7 </head>8 <body>9 <h1>Sé l e c t e u r s de style par ID</h1>

10 <h2 id=” pa r t i e 1 ”>1) Qu’ est−ce qu ’ un <i>ID</ i> <i>HTML</ i>&nbsp ; ?</h2>11 <p id=” paragraphe1 ”>12 Un dé ve loppeur web peut a s s o c i e r un <i>ID</ i> à tout é l ément <i>HTML</ i>.13 Cet <i>ID</ i> s o i t ê t r e unique dans tout l e document et ca rac t é r i s e l ’ é l é

ment .14 Pour ce f a i r e , l e dé ve loppeur web u t i l i s e l ’ a t t r i b u t <code>id</code> de l a

b a l i s e

42



15 qui dé f i n i t l ’ é l ément .16 </p>17 <h2 id=” pa r t i e 2 ”>2) À quoi s e rvent l e s <i>ID</ i> <i>HTML</ i>&nbsp ; ?</h2>18 <p id=” paragraphe2 ”>19 L ’<i>ID</ i> d ’ un é l ément <i>HTML</ i> permet de dé s i g n e r l ’ é l ément parmis20 tous l e s é l é ments du document , notamment pour&nbsp ; :21 <ul>22 <l i>23 Accé der à l ’ é l ément pour a g i r sur son contenu en <i>j a v a s c r i p t</ i>24 ( par exemple v ia l a mé thode <code>getElementById</code>) .25 </ l i>26 <l i>27 I d e n t i f i e r l ’ é l ément pour l u i a t t r i b u e r un style <i>CSS p a r t i c u l i e r</ i

>28 </ l i>29 </ul>30 </p>31 <h2 id=” pa r t i e 3 ”>3) D i f f é rence avec l e s c l a s s e s</h2>32 <p id=” paragraphe3 ”>33 Contrairement aux c l a s s e s ,34 pour l e s q u e l l e s on peut dé f i n i r autant d ’ é l é ments qu ’ on veut dans une35 même c l a s s e de style , <strong>l ’ é l ément correspondant à un ID e s t unique</

strong>,36 c ’ e s t un <em>s i n g l e t o n</em>.37 </p>38 </body>39 </html>

exemples/ChapitreCSS/ex09_id_selector_css.css1 /* s t y l e par dé f au t du t e x t e */2 body {3 font−family : ”Comic Sans MS” ;4 font−s ize : 18 pt ;5 background−color : #f f f ;6 color : #222 ;7 }89 /* s t y l e du t i t r e */

10 h1 {11 font−weight : bold ;12 font−s ize : 150% ;13 color : white ;14 text−align : c en t e r ;15 background−color : #999 ;16 padding : 15 pt ;17 }1819 h2 {20 font−weight : bold ;21 font−s ize : 120% ;22 }2324 h2#p a r t i e 1 {25 color : b lack ;26 }

43


2728 h2#p a r t i e 2 {29 color : red ;30 }3132 h2#p a r t i e 3 {33 color : green ;34 }3536 /* s t y l e des é l éments importants */37 st rong {38 font−variant : small−caps ;39 font−weight : bo lder ;40 color : b lack ;41 }4243 /* s t y l e des é l éments mis en é v idence */44 em {45 font −style : i t a l i c ;46 color : b lack ;47 }4849 p {50 background−color : #ddd ;51 text−align : j u s t i f y ;52 padding : 5pt ;53 }5455 p#paragraphe1 {56 background−color : #aaa ;57 }5859 p#paragraphe2 {60 background−color : #ccc ;61 }6263 p#paragraphe3 {64 background−color : #eee ;65 }6667 a {68 color : b lue ;69 text−decoration : unde r l i n e ; /* non sou l i g n é */70 }

44



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

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

Autre element

margin-right

Bord de l’element considere

margin-left

padding

Element parent

conten

u del’el

ement

margin-top

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

exemples/ChapitreCSS/ex10_margin_padding.html1 <!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 div {8 border−width : 2px ;9 border−color : b lack ;

10 border−style : s o l i d ;11 color : b lack ;12 margin : 40px ;13 padding : 25px ;

45


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

2.8 Positionnement absoluDans le positionnement absolu, la position d’un élément est définie par rapport à la positiondu première ancêtre positionné (soit le parent si celui-ci est positionné, sinon on cherche leparent du parent, etc. jusqu’à trouver un ancêtre positionné). Si le parent n’est pas positionné,on peut le positionner sans changer sa position en mettant sa position relative zéro. Voir lafigure 2.3.

Un élément positionné en absolu est sorti du flux : il n’occupe plus de placedans le flux et l’élément suivant est placé comme si l’élément positionné en absolun’existait pas. L’élément positionné en absolu n’occupe pas de place.

Decalage bord left

Premier ancetre positionne

Decalage bord top

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

46



exemples/ChapitreCSS/ex11_position_absolute.html1 <!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 div {8 border−width : 2px ;9 border−color : b lack ;

10 border−style : s o l i d ;11 color : b lack ;12 margin : 20px ;13 padding : 0px ;14 background−color : #ddd ;15 }1617 /* positionnement 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 ;2223 l e f t : 0px ;24 width : 500px ;25 z−index : 1 ;26 }2728 div div {29 border−width : 2px ;30 border−color : b lack ;31 border−style : dashed ;32 margin : 0px ;33 padding : 0px ;34 background−color : #aaa ;35 }3637 . position Trente {38 position : ab so lu t e ;39 top : 90px ; /* dé ca l age en t re l e bord haut de l ’ é l ément e t son ancè tre */

47


40 l e f t : 30px ;/* dé ca l age en t re l e bord gauche de l ’ é l ément e t son ancè tre */

41 width : 500px ;42 z−index : 7 ;43 }4445 . position Soixante {46 position : ab so lu t e ;47 top : 180px ; /* dé ca l age en t re l e bord haut de l ’ é l ément e t son ancè tre */48 l e f t : 60px ; /* dé ca l age en t re l e bord gauche de l ’ é l ément e t son ancè t re

*/49 background−color : #888 ;50 z−index : 15 ;51 }52 </s tyle>53 <t i t l e>Posit ionnement abso lu</ t i t l e>54 </head>55 <body>56 <h1>Posit ionnement abso lu</h1>57 <div class=”positionZero”>58 Ceci e s t l e t ex t e f a i s a n t p a r t i e du contenu de l a bo î te parente . Ce l l e−c i

e s t59 positionné e mais à sa p lace normale dans l e f l u x ( marge de 20px ) .60 <div class=”positionTrente ”>61 Ceci e s t l e t ex t e contenu de l a première sous−bo î te , dont l e co in supé

r i e u r62 gauche positionné e 30 p i x e l s à d r o i t e et 90 p i x e l s p lus bas que son parent

.63 </div>64 <div class=”position Soixante ”>65 Ceci e s t l e t ex t e contenu de l a deuxième sous−bo î te , dont l e co in supé

r i e u r66 gauche positionné e 60 p i x e l s à d r o i t e et 180 p i x e l s p lus bas que son

parent .67 </div>68 </div>69 </body>70 </html>

2.9 Positionnement relatifLe positionnement relatif permet de déplacer un objet relativement à la position qu’il auraiteu dans le flux sans positionnement. Le positionnement relatif s’obtient avec l’attribut :

position : relative;top: 10px; /* déplacer de 10 pixels vers le bas */left: 20px; /* déplacer de 20 pixels vers la droite */

exemples/ChapitreCSS/ex12_position_relative.html1 <!doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />

48



5 <l i nk rel=” s t y l e s h e e t ” href=” . /myStyle . c s s ”/>6 <s tyle>7 /* positionnement normale dans l e f l u x ,8 dé f i n i j u s t e pour position ner l ’ é l ément */9 . position Zero {

10 position : r e l a t i v e ;11 width : 600px ;12 z−index : 1 ;13 }14 . position Trente {15 border−style : dashed ;16 background−color : #aaa ;17 position : r e l a t i v e ;18 l e f t : 60px ;19 width : 600px ;20 z−index : 7 ;21 }22 . position Normale {23 border−style : dashed ;24 background−color : #888 ;25 z−index : 15 ;26 }27 </s tyle>28 <t i t l e>Posit ionnement r e l a t i f</ t i t l e>29 </head>30 <body>31 <h1>Posit ionnement r e l a t i f</h1>32 <div class=”positionZero”>33 Ceci e s t l e t ex t e f a i s a n t p a r t i e du contenu de l a bo î te du haut . Ce l l e−c i

e s t34 positionné e mais à sa p lace normale dans l e f l u x .35 </div>36 <div class=”positionTrente ”>37 Ceci e s t l e t ex t e contenu de l a bo î te du mi l i eu , dont l e co in supé r i e u r38 gauche positionné e 60 p i x e l s à d r o i t e de sa position normale dans l e f l u x .39 </div>4041 <div class=”positionNormale”>42 Ceci e s t l e t ex t e contenu de l a bo î te du bas , qui e s t positionné e43 normalement dans l e f l u x ( compte tenu de l a position de l a bo î te pr é c é

dente ) .44 </div>45 </body>

49


46 </html>

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

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

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

• nav pour la partie navigation avec un menu et des liens pour se déplacer dans le site.

• article contenant un corps de document autosuffisant.

• aside pour des informations annexes sans grand rapport avec le sujet (publicités, etc.)

• section représentant une partie regroupant plusieurs contenus liés entre eux.

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

50



exemples/ChapitreCSS/ex13_balises_semantiques.html1 <!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>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>Navigat ion</h1>15 <ul>16 <l i>17 <a href=” . /coucou . html ” >l i e n 1</a>18 </ l i>19 <l i>20 <a href=” . / to to . 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 </ul>26 </nav>27 <a r t i c l e>28 <h1>Les b a l i s e s &l t ; header&gt ; , &l t ;nav&gt ; , &l t ; a r t i c l e&gt ; , &l t ; f o o t e r

&gt ;</h1>29 <p>30 Ces b a l i s e s dé f i n i s s e n t l a s t r u c t u r e géné r a l e du document . E l l e s se

comportent31 comme un &l t ;div&gt ; mais e l l e s ont , comme l e u r nom l ’ indique , une

s i g n i f i c a t i o n32 au niveau s é mantique&nbsp ; :33 </p>34 <ol>35 <l i>36 Un é l ément &l t ; header&gt ; c on t i en t l ’ en−tê te du document avec l e nom

géné r a l37 du s i t e , un logo , une banière , é ventue l l ement un slogan , e t c .38 </ l i>39 <l i>40 Un é l ément &l t ;nav&gt ; c on t i en t des é l é ments de nav igat i on (menus , s

é r i e s de l i e n s , e t c . ) .41 Les moteurs de recherche peuvent en dé du i t e un <em>sitemap</em>, c ’

e s t à d i r e l a s t r u c t u r e du s i t e42 pour opt im i s e r l e r é f é rencement .43 </ l i>44 <l i>45 Un é l ément &l t ; a r t i c l e&gt ; c on t i en t l e contenu de l a page lui−même .

C’ e s t l e t ex t e de l ’ a r t i c l e46 qui s e ra p r i s en compte fortement pour l ’ i ndexat ion dans l e s moteurs

de recherche .47 </ l i>

51


48 <l i>49 Un é l ément &l t ; f o o t e r&gt ; c on t i en t un pied de page ( souvent avec des

in fo rmat i ons l é ga l e s , de copy right ,50 sur l e cr é ateur technique du s i t e , l e s l o go s des sponsors , e t c . )51 </ l i>52 </ol>53 <p>54 Les moteurs de recherche peuvent a i n s i mieux ana ly s e r l e contenu de l a

page&nbsp ; c e l à p a r t i c i p e55 de l ’ op t im i sa t i on du r é f é rencement ;56 </p>57 </a r t i c l e>58 <footer>59 &copy ; RM 2012 .60 </footer>61 </div>62 </body>63 </html>

2.11 Exemples de mise en page

exemples/ChapitreCSS/ex14_exemple_miseEnPage.html1 <!doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <l i nk rel=” s t y l e s h e e t ” href=” . /ex14_exemple_miseEnPage . 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>Navigat ion</h1>15 <ul>16 <l i>

52



17 <a href=” . /coucou . html ” >l i e n 1</a>18 </ l i>19 <l i>20 <a href=” . / to to . 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 </ul>26 </nav>27 <a r t i c l e>28 <h1>Corps du tex t e</h1>29 <p>30 Nous mettons i c i l e corps du tex t e . Paragraphe 1 .31 </p>32 <p>33 Notons que l e s l i e n s dans l e menu n ’ ont pas l e même aspect34 que l e s l i e n s dans l e t ex t e . Le style e s t propre à chaque35 zône de l a page .36 </p>37 <p>38 Ceci e s t <a href=” . / to to . html ”>un l i e n</a> normal39 </p>40 </a r t i c l e>41 </div>42 <footer>43 &copy ; RM 2012 .44 </footer>45 </body>46 </html>

exemples/ChapitreCSS/ex14_exemple_miseEnPage.css1 /*****************************************************\2 * STYLE CSS POUR MISE EN PAGE EN LARGEUR FIXE3 * MENU À GAUCHE4 * ***************************************************/56 /* L’ ensemble du document */7 body {8 font−family : t imes , s e r i f ; /* p o l i c e */9 font−s ize : 14 pt ; /* t a i l l e de font e abso lue */

10 background−color : #ccc ; /* cou l eur de fond de l a page */11 color : #222 ; /* cou leur de t e x t e g r i s fonc é */12 }1314 /* l i e n s par dé f au t */15 a{16 /* s t y l e par dé f au t pour é v i t e r que ne s o i t p r i s par dé f au 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 bas */18 }1920 /* Le header : ban ière de t i t r e du s i t e */21 header {22 width : 600px ; /* l a r g eu r t o t a l e du contenu */23 background−color : b lack ; /* fond du header noir */

53


24 color : white ; /* cou leur du t e x t e : b lanc */25 margin : 0 auto ; /* l e header e s t cen t r é dans l a page */26 padding : 0px ; /* pas de padding */27 }2829 /* t i t r e p r i n c i p a l du s i t e dans l e header */30 header h1 {31 text−align : c en t e r ; /* t e x t e cen t r é dans l e h1 ( l u i même cent r é dans l e header

) */32 width : i n h e r i t ; /* prend tou t e l a l a r g eu r du parent */33 margin : 0 ; /* pas d ’ espace autour du header e t de son t i t r e */34 }3536 /* sous l e header , l e d i v con t i en t l e nav e t l ’ a r t i c l e */37 div {38 width : 600px ; /* l a r g eu r du contenu : 600px ; */39 background−color : white ; /* fond b lanc */40 margin : 0 auto ; /* centr é dans l a page */41 position : r e l a t i v e ; /* positionnement pour pouvoir u t i l i s e r position : a b s o l u t e

dans l e s f i l s */42 top : 0px ;43 padding : 0px ; /* pas de marge i n t é r i eu r e */44 height : 280px ; /* hauteur t o t a l du contenu */45 }4647 /* b l o c de nav i ga t i on contenant l e menu */48 nav {49 color : white ; /* t e x t e b lanc */50 text−align : c en t e r ; /* t e x t e cen t r é */51 background−color : #999 ; /* fond g r i s */52 width : 180px ; /* l a r g eu r : seulement une pa r t i e des 600px */53 margin : 0 ; /* pas de marge ex t é r i eu r e */54 padding : 0px ; /* pas de marge i n t é r i eu r e */55 position : abso lute ; /* on ca l e l e b l o c à gauche sur l e bord du d iv parent */56 l e f t :0px ;57 height : i n h e r i t ; /* l a hauteur e s t l a même que l a hauteur du d iv parent */58 }5960 /* t i t r e du menu */61 nav h1{62 background−color : b lack ; /* fond noir */63 border−rad iu s : 4px ; /* bord l é gèrement arrondi */64 width : 80% ; /* l a r g eu r 80% de l a l a r g eu r du nav */65 margin : 20px auto ; /* cantr é en ho r i z on t a l e t 20px de marge au dessus e t au

dessous */66 }6768 /* L i s t e à puce contenant l e s l i e n s du menu */69 div nav ul {70 text−align : l e f t ; /* t e x t e ca l é à gauche */71 l i st−style : none ; /* pas de po in t s devant l e s i tems de l a l i s t e à puces */72 }7374 /* i tems de l a l i s t e à puce contenant l e s l i e n s du menu */75 div nav ul l i {76 margin−bottom : 20px ; /* permet d ’ é ca r t e r l e s boutons */

54



77 }7879 /* l i e n s du menu dans l a p a r t i e nav i ga t i on */80 div nav ul l i a {81 text−decoration : none ; /* pas de sou l ignement 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 : white ; /* t e x t e b lanc */84 font−weight : bo lder ; /* ca rac t è r e s gras */85 background−image : l i n ea r−g rad i en t ( black , white ) ; /* fond dé grad é */86 border−radius : 4px ; /* bord l é gèrement arrondi */87 padding : 10px ; /* marge i n t é r i eu r e au bouton */88 }8990 /* pa r t i e a r t i c l e contenant l e t e x t e p r i n c i p a l l e l a page */91 div a r t i c l e {92 color : b lack ; /* t e x t e noir ( sur fond b lanc ) */93 width : 400px ; /* encombrement 420 avec l a padding . 600px = 180px + 420 px */94 padding : 0 10px ; /* compter 20 dans l a l a r g eu r t o t a l e */95 margin : 0 ; /* pas de marge ex t é r i eu r e */96 position : r e l a t i v e ;97 l e f t : 180px ; /* on dé ca l e ver s l a d r o i t e de l a l a r g eu r du nav */98 height : i n h e r i t ; /* prend l a hauteur de son parent */99 }

100101 /* Ti t re p r i n c i p a l de l a page dans l ’ a r t i c l e */102 div a r t i c l e h1{103 margin : 0 auto ; /* t i t r e cen t r é dans l ’ a r t i c l e */104 text−align : c en t e r ; /* t e x t e cen t r é dans l e t i t r e */105 }106107 /* paragraphes 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 paragraphes */110 }111112 /* pied de page */113 f o o t e r {114 width : 600px ; /* l a r g eu r 600 p i x e l s */115 margin : 0 auto ; /* f o o t e r cen t r é dans l a page */116 background−color : b lack ; /* fond noir */117 color : white ; /* t e x t e b lanc */118 text−align : c en t e r ; /* t e x t e cen t r é */119 }

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

exemples/ChapitreCSS/ex15_miseEnPage_2.css1 /**************************************************************\2 * STYLE CSS POUR MISE EN PAGE EN LARGEUR PROPORTIONNELLE3 * (LA LARGEUR S ’ADAPTE À LA PAGE. MENU EN HAUT SOUS LE HEADER4 * ************************************************************/56 /* L’ ensemble du document */7 body {8 font−family : t imes , s e r i f ; /* p o l i c e */

55


9 font−s ize : 14 pt ; /* t a i l l e de font e abso lue */10 background−color : #ccc ; /* cou l eur de fond de l a page */11 color : #222 ; /* cou leur de t e x t e g r i s fonc é */12 }1314 /* Tous l e s d i v */15 div {16 background−color : #f f f ; /* fond b lanc */17 }1819 /* Le header : ban ière de t i t r e du s i t e */20 header {21 width : 60% ; /* l a r g eu r 60% de l a page */22 background−color : b lack ; /* fond noir */23 color : white ; /* t e x t e b lanc */24 margin : 0 auto ; /* l e header e s t cen t r é dans l a page */25 border−rad iu s : 20px 20px 0 0 ; /* ang l e s du haut arrond i s */26 }2728 /* t i t r e p r i n c i p a l du s i t e dans l e header */29 header h1 {30 text−align : c en t e r ; /* t e x t e cen t r é dans l ’ é l ément */31 width : 100% ; /* occupe t ou t e l a l a r g eu r du parent ( c . a . d . du header ) */32 margin : 0 ; /* pas de marge c o l l é au contenu d iv . content */33 }3435 /* d i v contenant l ’ a r t i c l e e t l e nav */36 div {37 width : 60% ; /* l a r g eu r 60% de l a page */38 background−color : white ; /* fond b lanc */39 margin : 0 auto ; /* contenu cent r é dans l a page */40 }4142 /* mise en forme de l a p a r t i e nav i ga t i on contenant l e menu */43 div nav {44 text−align : c en t e r ; /* t e x t e cen t r é */45 background−color : #999 ; /* fond g r i s fonc é */46 width : 100% ; /* l a r g eu r 100% du d iv parent */47 height : 45px ; /* hauteur abso lue 45px */48 }4950 /* t i t r e du menu */

56



51 div nav h1{52 display : none ; /* on supprime l e t i t r e */53 }5455 /* L i s t e à puce contenant l e s l i e n s du menu */56 div nav ul {57 l i st−style : none ; /* on supprime l e s po in t s devant l e s i tems de l a l i s t e à

puces */58 margin−top : 0 ; /* bord du haut a l i g n é sur l e bord du d iv parent */59 }6061 /* i tems de l a l i s t e à puce contenant l e s l i e n s du menu */62 div nav ul l i {63 display : i n l i n e−b lock ; /* l e s i tems sont rang é s hor i zon ta l ement au l i e u de

v e r t i c a l emen t */64 }6566 /* l i e n s du menu dans l a p a r t i e nav i ga t i on : *\67 \* propr i é t é s g éné r a l e s communes aux l i e n s v i s i t é s , hover ou non */68 div nav ul l i a {69 font−weight : bo lder ; /* ca rac t è r e s gras */70 border−style : none ; /* pas de bord */71 margin : 0 10px ; /* marges à d r o i t e e t à gauche de chaque l i e n de menu */72 padding : 5px 10px ; /* espace autour 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é ca l age ver s l e bas pour compenser l e padding e t a l i g n e r l e

bord haut */75 border−radius : 0 0 10px 10px ; /* ang l e s du bas arrond i s */76 text−decoration : none ; /* t e x t e non sou l i g n é */77 }7879 /* propr i é t é s sp é c i f i q u e s des l i e n s non v i s i t é s non su r vo l é s */80 div nav ul l i a : l ink {81 color : white ; /* t e x t e b lanc */82 background−color : b lack ; /* fond noir */83 }8485 /* propr i é t é s sp é c i f i q u e s des l i e n s v i s i t é s non su r vo l é s */86 div nav ul l i a : v i s i t e d {87 color : #444 ; /* g r i s fonc é */88 background−color : #ddd ; /* g r i s c l a i r */89 }9091 /* propr i é t é s sp é c i f i q u e s des l i e n s su r vo l é s */92 div nav ul l i a :hover {93 color : b lack ; /* t e x t e noir */94 background−color : white ; /* fond b lanc */95 }9697 /* pa r t i e a r t i c l e contenant l e t e x t e p r i n c i p a l l e l a page */98 div a r t i c l e {99 color : b lack ; /* cou leur no ire */

100 background−color : white ; /* fond b lanc */101 }102103 /* Ti t re p r i n c i p a l de l a page dans l ’ a r t i c l e */

57


104 div a r t i c l e h1 {105 text−align : c en t e r ; /* t e x t e cen t r é ( dans l ’ a r t i c l e ) */106 padding : 10px ; /* un peu d ’ espace autour du t e x t e */107 margin : 0 ; /* pas de marge : bords a l i g n é s */108 background−image : l i n ea r−g rad i en t (#999 , white ) ; /* dé grad é de cou l eur s */109 }110111 /* paragraphes 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 10px ; /* un peu d ’ espace autou des paragraphes */115 }116117 /* pied de page */118 f o o t e r {119 width : 60% ; /* l a r g eu r 60% de l a page */120 background−color : #444 ; /* fond g r i s fonc é */121 color : white ; /* t e x t e b lanc */122 margin : −20px auto ; /* a l i g n é sur l a bas de l ’ a r t i c l e */123 text−align : c en t e r ; /* t e x t e cen t r é dans l e p ied de page */124 border−rad iu s : 0 0 20px 20px ; /* ang l e s du bas */125 }

2.12 CSS adaptatifs : Media QueriesLes Media Queries permettent de créer des styles différents selon l’écran sur lequel la pages’affiche. Par exemple, on peut mettre deux feuilles de style différentes selon la mise taille del’écran. L’exemple suivant, qui s’appuie sur les deux exemples de mise en page précédents, créeune mise en page différente pour les largeur d’affichage inférieur ou supérieure à 1000px. Onmet le menu à gauche pour les écrans suffisamment larges, et un menu en haut pour les écransun peu étroit.

exemples/ChapitreCSS/ex16_mediaQueries.html1 <!doctype html>2 <html lang=” f r ”>3 <head>4 <meta charset=”UTF−8” />5 <!−− MISE EN PAGE PAR DÉFAUT : menu à gauche −−>6 <l i nk rel=” s t y l e s h e e t ” media=” (min−width : 1001px ) ” href=” .

/ex14_exemple_miseEnPage . c s s ”/>7 <!−− MISE EN PAGE POUR PETITS ÉCRANS : menu en haut −−>8 <l i nk rel=” s t y l e s h e e t ” media=” (max−width : 1000px ) ” href=” . /ex15_miseEnPage_2

. c s s ”/>9 <t i t l e>Exemple de mise en page</ t i t l e>

10 </head>11 <body>12 <header>13 <h1>Exemple de mise en page</h1>14 </header>15 <div class=”content”>16 <nav>17 <h1>Navigat ion</h1>18 <ul>

58



19 <l i>20 <a href=” . /coucou . html ” >l i e n 1</a>21 </ l i>22 <l i>23 <a href=” . / to to . 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 </ul>29 </nav>30 <a r t i c l e>31 <h1>Corps du tex t e</h1>32 <p>33 Nous mettons i c i l e corps du tex t e . Paragraphe 1 .34 </p>35 <p>36 Notons que l e s l i e n s dans l e menu n ’ ont pas l e même aspect37 que l e s l i e n s dans l e t ex t e . Le style e s t propre à chaque38 zône de l a page .39 </p>40 <p>41 Ceci e s t <a href=” . / to to . html ”>un l i e n</a> normal42 </p>43 </a r t i c l e>44 </div>45 <footer>46 &copy ; RM 2012 .47 </footer>48 </body>49 </html>

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

1 @media (min−width : 400px ) and (max−width : 500px ) {2 table tbody tr td {3 padding 10px ;4 }5 }67 @media (min−width : 501px ) {8 table tbody tr td {9 padding 20px ;

10 }11 }

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

1 <!−− MISE EN PAGE POUR L’ORIENTATION PAYSAGE : menu à gauche −−>2 <l i nk rel=” s t y l e s h e e t ” media=” ( o r i e n t a t i on :landscape ) ” href=” .

/ex14_exemple_miseEnPage . c s s ”/>3 <!−− MISE EN PAGE POUR POUR L’ORIENTATION PORTRAIT : menu en haut −−>

59


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

60


Documents

Programmation Web HTML/CSS - Rémy Malgouyres | … · Tous mes cours sur le Web sont sur le Web : Cours de programmation WEB sur les documents hypertexte ... Sur la première ligne