http://www.free-livres.

com/

Sauf mention contraire, le contenu de cet ouvrage est publi sous la licence : Creative Commons BY-NC-SA 2.0 La copie de cet ouvrage est autorise sous rserve du respect des conditions de la licence Texte complet de la licence disponible sur :

http://creativecommons.org/licenses/by-nc-sa/2.0/fr/

Simple IT 2011 - ISBN : 978-2-9535278-8-9

Avant-propos

oil plus de vingt ans que le Web existe ! Un ge respectable dans l'univers de l'informatique : le dbut des annes 1990 fait presque gure d'Antiquit. Le Web n'a pourtant jamais t autant utilis qu'aujourd'hui : nous avons tous pris l'habitude de naviguer sur des sites web, un peu comme si c'tait une seconde nature. C'est mme devenu notre activit principale sur un ordinateur, tel point qu'on en vient oublier qui celui-ci peut aussi servir autre chose qu' naviguer sur le Web. Mme quand nous ne sommes plus devant un ordinateur, nous avons pris l'habitude de regarder compulsivement notre tlphone portable pour consulter les dernires nouvelles. Bref, le Web nous poursuit partout. Alors, vous vous dites :  Tiens, si je crais moi aussi mon site web ? Tout le monde le fait, je dois en tre capable moi aussi. . . . et vous avez parfaitement raison ! Si le Web s'est autant dmocratis, c'est aussi parce qu'il est facile de crer un site web. Mais attention, cela ne s'improvise pas : il faut de la mthode, de l'organisation et quelques connaissances sur les langages du Web. Autant d'lments que je souhaite vous apporter travers ce livre ! Vous n'avez jamais entendu parler de HTML ni de CSS ? Pas grave : cet ouvrage est conu pour les dbutants. Tout ce que je vous demande c'est de savoir allumer votre ordinateur (et utiliser une souris et un clavier, tant qu' faire). Pour le reste, laissez-moi vous montrer tout simplement !

HTML5 et CSS3, ces incontournables langages

Quoi que vous fassiez, vous ne pourrez pas les viter : pour crer un site web, vous devez apprendre manier les langages HTML et CSS. Ils sont la base de tous les sites web, qui sont tous conus de la mme manire avec ces langages. Les toutes dernires versions de ces langages (HTML5 et CSS3) nous orent aujourd'hui des possibilits tonnantes. Des eets graphiques autrefois complexes raliser se crent dsormais via une simple ligne de code. Les langages deviennent tellement puissants que les experts sont dj d'accord pour dire que demain tout se fera sur le Web. C'est d'ailleurs dj le cas quand on y pense : courses en ligne, dclaration d'impts, lecture des journaux. . . i

CHAPITRE 0.

AV ANT-PROPOS

Vous vous dites peut-tre que vous n'tes pas faits pour apprendre un langage informatique, mais pas de panique : les langages HTML et CSS sont simples. Je vois d'ailleurs rgulirement des jeunes les apprendre ds l'ge de 10 ans, comme s'il s'agissait d'une simple formalit. Ce n'est en fait pas plus compliqu que la grammaire et la conjugaison, c'est mme parfois plus facile. ;-)

Qu'allez-vous apprendre en lisant ce livre ?

Nous allons dcouvrir HTML et CSS de faon progressive au cours de cet ouvrage, compos des parties suivantes : 1. Nous partirons vraiment des bases : quels programmes dois-je installer ? Comment tester le rsultat de mon site ? Comment acher du texte, des images, et crer des liens ? Nous verrons tout cela au cours de cette premire partie trs simple. 2. Les joies de la mise en forme avec CSS : nous introduirons ensuite le langage CSS, qui permet de mettre en forme son site web. Nous apprendrons choisir les couleurs de notre site, modier la taille du texte, la police. . . et mme jouer avec les eets de transparence, les ombres et les arrondis que nous ore aujourd'hui CSS3. 3. Mise en page du site : nous passerons aux choses srieuses en nous intressant la mise en page de notre site. Dimensions, marges, positionnement au pixel prs : nous dcouvrirons tout ce qu'il faut savoir. Nous terminerons cette partie en apothose avec la ralisation de A Z de notre premier site web complet. Vous allez tre blus par ce que vous tes capables de faire ! 4. Fonctionnalits volues : nous irons encore plus loin en dcouvrant des fonctionnalits plus complexes de HTML et CSS. Nous passerons notamment en revue les tableaux, les formulaires, la gestion des vidos. . . Et je vous ferai faire un petit tour d'horizon de tout ce que vous pourrez encore dcouvrir pour satisfaire votre soif de connaissances !

Les bases de HTML5 : nous commencerons par dcouvrir le langage HTML.

la n de cet ouvrage, plusieurs annexes vous attendent pour complter ce que vous avez appris : vous verrez notamment comment procder pour envoyer votre site sur le Web !

Comment lire ce livre ?

Suivez l'ordre des chapitres
Lisez ce livre comme on lit un roman. Il a t conu pour cela. Contrairement beaucoup de livres techniques o il est courant de lire en diagonale et de sauter certains chapitres, il est ici trs fortement recommand de suivre l'ordre du cours, moins que vous ne soyez dj un peu expriments. ii

REMERCIEMENTS

Pratiquez en mme temps

Pratiquez rgulirement. N'attendez pas d'avoir ni de lire ce livre pour allumer votre ordinateur et faire vos propres essais.

Utilisez les codes web !

An de tirer parti du Site du Zro dont ce livre est issu, celui-ci vous propose ce qu'on appelle des  codes web . Ce sont des codes six chires saisir sur une page du Site du Zro pour tre automatiquement redirig vers un site web sans avoir en recopier l'adresse. Pour utiliser les codes web, rendez-vous sur la page suivante 1 :
http://www.siteduzero.com/codeweb.html

Un formulaire vous invite rentrer votre code web. Faites un premier essai avec le code ci-dessous :  Tester le code web Code web : 123456  Ces codes web ont deux intrts :  ils vous redirigent vers les sites web prsents tout au long du cours, vous permettant ainsi d'obtenir les logiciels dans leur toute dernire version ;  ils vous permettent de tlcharger les codes sources inclus dans ce livre, ce qui vous vitera d'avoir recopier certains programmes un peu longs. Ce systme de redirection nous permet de tenir jour le livre que vous avez entre les mains sans que vous ayez besoin d'acheter systmatiquement chaque nouvelle dition. Si un site web change d'adresse, nous modierons la redirection mais le code web utiliser restera le mme. Si un site web disparat, nous vous redirigerons vers une page du Site du Zro expliquant ce qui s'est pass et vous proposant une alternative. En clair, c'est un moyen de nous assurer de la prennit de cet ouvrage sans que vous ayez faire quoi que ce soit !

Remerciements
Je souhaite remercier un certain nombre de personnes qui, de prs ou de loin, ont contribu la naissance de cet ouvrage :  Ma famille, qui continue de me tmoigner sa conance et qui suit toujours avec attention mes projets.  lodie, pour son soutien indfectible. Cet ouvrage t'est ddi en souvenir de cette magnique journe d't.  Pierre Dubuc, qui continue soulever des montagnes pour faire vivre notre projet commun.
1. Vous pouvez aussi utiliser le formulaire de recherche du Site du Zro, section  Code web .

iii

CHAPITRE 0.

AV ANT-PROPOS

 Notre infographiste, Fan Jiyong, pour la couverture de ce livre, les illustrations des chapitres et le webdesign du TP (qui est plusieurs crans au-dessus du prcdent !).  Notre diteur, Jonathan Baudoin, pour son implication et son travail ecace lors de la prparation de cet ouvrage.  L'ensemble de l'quipe de Simple IT qui travaille avec moi sur le Site du Zro.  Johann Pardanaud (Nesquik69) et Julien Villetorte (delphiki), pour leur relecture et leurs conseils aviss.  Vous tous, chers lecteurs, avec qui je prends toujours autant de plaisir partager mes connaissances. Bonne lecture !

iv

Sommaire

Avant-propos
HTML5 et CSS3, ces incontournables langages Qu'allez-vous apprendre en lisant ce livre ? . . . Comment lire ce livre ? . . . . . . . . . . . . . . Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

i
i ii ii iii

I Les bases de HTML5

1 Comment fait-on pour crer des sites web ?
Le fonctionnement des sites web . . . . . . . . . . . . HTML et CSS : deux langages pour crer un site web L'diteur de texte . . . . . . . . . . . . . . . . . . . . . Les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1
3
. 4 . 5 . 9 . 12

2 Votre premire page web en HTML

Crer une page web avec l'diteur . . . Les balises et leurs attributs . . . . . . Structure de base d'une page HTML5 Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17
18 21 23 26

3 Organiser son texte

31

Les paragraphes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Les titres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 v

SOMMAIRE

La mise en valeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4 Crer des liens

Un lien vers un autre site . . . . . . . Un lien vers une autre page de son site Un lien vers une ancre . . . . . . . . . Cas pratiques d'utilisation des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43
44 45 47 49

5 Les images

53

Les dirents formats d'images . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Insrer une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Les gures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

II Les joies de la mise en forme avec CSS

6 Mettre en place le CSS
La petite histoire du CSS . . . . . . . . . . O crit-on le CSS ? . . . . . . . . . . . . . Appliquer un style : slectionner une balise Appliquer un style : class et id . . . . . . Appliquer un style : les slecteurs avancs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

63
65
66 68 74 78 81

7 Formatage du texte
La taille . . . . . . . . . . La police . . . . . . . . . Italique, gras, soulign. . . L'alignement . . . . . . . Les ottants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

87
88 90 94 96 98

8 La couleur et le fond
Couleur du texte Couleur de fond . Images de fond . La transparence . vi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

101
102 106 109 114

SOMMAIRE

9 Les bordures et les ombres

117

Bordures standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Bordures arrondies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Les ombres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

10 Cration d'apparences dynamiques

125

Au survol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Au clic et lors de la slection . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Lorsque le lien a dj t consult . . . . . . . . . . . . . . . . . . . . . . . . 128

III Mise en page du site

11 Structurer sa page

131
133

Les balises structurantes de HTML5 . . . . . . . . . . . . . . . . . . . . . . . 134 Exemple concret d'utilisation des balises . . . . . . . . . . . . . . . . . . . . . 138 Assurer la compatibilit avec IE . . . . . . . . . . . . . . . . . . . . . . . . . 141

12 Le modle des botes

Les balises de type block et inline . Les dimensions . . . . . . . . . . . Les marges . . . . . . . . . . . . . Quand a dpasse. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

145
146 148 150 155

13 Le positionnement en CSS
Le positionnement ottant . . . . . . . . . Transformez vos lments avec display . Le positionnement inline-block . . . . . . Les positionnements absolu, xe et relatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

161
162 166 167 171

14 TP : cration d'un site pas pas

Maquettage du design . . . . . . Organiser le contenu en HTML . Mettre en forme en CSS . . . . . Assurer la compatibilit avec IE Vrier la validit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

177
178 180 184 198 202 vii

SOMMAIRE

Le code nal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

IV Fonctionnalits volues
15 Les tableaux

207
209

Un tableau simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Un tableau structur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

16 Les formulaires
Crer un formulaire . . . . . . . Les zones de saisie basiques . . . Les zones de saisie enrichies . . . Les lments d'options . . . . . . Finaliser et envoyer le formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

221
222 223 228 232 236

17 La vido et l'audio

243

Les formats audio et vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Insertion d'un lment audio . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Insertion d'une vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

18 Mise en page adaptative avec les Media Queries

Mise en place des media queries . . . . Les rgles disponibles . . . . . . . . . Mise en pratique des media queries sur Media queries et navigateurs mobiles . . . . . . . . . . . . . le design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

251
252 253 256 260

19 Aller plus loin

263

Du site web l'application web (JavaScript, AJAX. . .) . . . . . . . . . . . . . 264 Technologies lies HTML5 (Canvas, SVG, Web Sockets. . .) . . . . . . . . . 265 Les sites web dynamiques (PHP, JEE, ASP .NET. . .) . . . . . . . . . . . . . . 266

V Annexes
20 Envoyez votre site sur le Web
viii

269
271

Le nom de domaine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

SOMMAIRE

L'hbergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Utiliser un client FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

21 Mmento des balises HTML

Balises de premier niveau . . . . Balises d'en-tte . . . . . . . . . Balises de structuration du texte Balises de listes . . . . . . . . . . Balises de tableau . . . . . . . . Balises de formulaire . . . . . . . Balises sectionnantes . . . . . . . Balises gnriques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

285
286 286 287 288 288 288 289 289

22 Mmento des proprits CSS

Proprits de mise en forme du texte . . . . Proprits de couleur et de fond . . . . . . . Proprits des botes . . . . . . . . . . . . . Proprits de positionnement et d'achage Proprits des listes . . . . . . . . . . . . . Proprits des tableaux . . . . . . . . . . . Autres proprits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

291
292 292 293 293 294 294 294

23 Grer la compatibilit entre les navigateurs

295

Les commentaires conditionnels . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Les hacks CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Les outils de dbogage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

ix

SOMMAIRE

Premire partie
Les bases de HTML5

Chapitre

1
Dicult :

Comment fait-on pour crer des sites web ?

onjour et ienvenue toutes et tous 3 oii don le premier hpitre de e livre pour dutntsD qui v vous pprendre rer votre site we 3 xous llons psser un ertin temps ensemleD tout dpendr de l vitesse lquelle vous pprendrezF i vous lisez e livre rgulirement et une onne vitesseD vous l9urez termin en une deux seminesF wis si vous vez esoin d9un peu plus de tempsD ne vous inquitez ps X le prinipl est que vous y lliez votre rythmeD de prfrene en prennt du on tempsF te vous propose de ommener pr l question l plus simple mis ussi l plus importnte X
comment fonctionnent les sites web ?

CHAPITRE 1.

COMMENT FAIT-ON POUR CRER DES SITES WEB ?

Le fonctionnement des sites web

gomment fontionnent les sites we c
Non, n'ayez pas peur de poser des questions mme si vous pensez qu'elles sont  btes . Il est trs important que nous en parlions un peu avant de nous lancer fond dans la cration de sites ! Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous lancez un programme appel le navigateur web en cliquant sur l'une des icnes reprsentes la gure 1.1.

Figure 1.1  Les icnes des navigateurs web les plus rpandus
Avec le navigateur, vous pouvez consulter n'importe quel site web. Voici par exemple un navigateur achant le clbre site web Wikipdia (gure 1.2).

Figure 1.2  Le site web Wikipdia

Je suis sr que vous avez l'habitude d'utiliser un navigateur web ! Aujourd'hui, tout le monde sait aller sur le Web. . . mais qui sait vraiment comment le Web fonctionne ? Comment crer des sites web comme celui-ci ? 4

HTML ET CSS : DEUX LANGAGES POUR CRER UN SITE WEB

t9i entendu prler de rwvD de gD estEe que el un rpport ve le fontionnement des sites we c
Tout fait ! Il s'agit de langages informatiques qui permettent de crer des sites web. Tous les sites web sont bass sur ces langages, ils sont incontournables et universels aujourd'hui. Ils sont la base mme du Web. Le langage HTML a t invent par un certain Tim Berners-Lee en 1991. . . Tim Berners-Lee suit encore aujourd'hui avec attention l'volution du Web. Il a cr le World Wide Web Consortium (W3C) qui dnit les nouvelles versions des langages lis au Web. Il a par ailleurs cr plus rcemment la World Wide Web Foundation qui analyse et suit l'volution du Web.

he nomreuses personnes onfondent @ tortA snternet et le eF sl fut svoir que le e fait partie d9snternetF snternet est un grnd ensemle qui omprendD entre utres X le eD les eEmilsD l messgerie instntneD etF im fernersEvee n9est don ps l9inventeur d9snternetD 9est  seulement l9inventeur du eF
Les langages HTML et CSS sont la base du fonctionnement de tous les sites web. Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent pour permettre au site web de s'acher. L'ordinateur se base sur ce qu'on lui a expliqu en HTML et CSS pour savoir ce qu'il doit acher, comme le montre la gure 1.3. HTML et CSS sont deux  langues  qu'il faut savoir parler pour crer des sites web. C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce que vous verrez s'acher l'cran. Vous vous demandez srement pourquoi il faut connatre deux langages pour crer des sites web ? Je vous rponds sans plus tarder !

HTML et CSS : deux langages pour crer un site web

Pour crer un site web, on doit donner des instructions l'ordinateur. Il ne sut pas simplement de taper le texte qui devra gurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi indiquer o placer ce texte, insrer des images, faire des liens entre les pages, etc.

Les rles de HTML et CSS

Pour expliquer l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est l que les choses se corsent, parce qu'il va falloir apprendre deux langages ! 5

CHAPITRE 1.

COMMENT FAIT-ON POUR CRER DES SITES WEB ?

Figure 1.3  Du HTML l'cran

HTML ET CSS : DEUX LANGAGES POUR CRER UN SITE WEB

ourquoi voir r deux lngges c n seul urit su0D non c

Vous devez vous dire que manipuler deux langages va tre deux fois plus complexe et deux fois plus long apprendre. . . mais ce n'est pas le cas ! Je vous rassure, s'il y a deux langages c'est, au contraire, pour faciliter les choses. Nous allons avoir aaire deux langages qui se compltent car ils ont des rles dirents :  HTML (HyperText Markup Language ) : il a fait son apparition ds 1991 lors du lancement du Web. Son rle est de grer et organiser le contenu. C'est donc en HTML que vous crirez ce qui doit tre ach sur la page : du texte, des liens, des images. . . Vous direz par exemple :  Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image acher, etc. .  CSS (Cascading Style Sheets, aussi appeles Feuilles de style ) : le rle du CSS est de grer l'apparence de la page web (agencement, positionnement, dcoration, couleurs, taille du texte. . .). Ce langage est venu complter le HTML en 1996.

ous vez peutEtre ussi entendu prler du lngge rwvF sl s9git d9une vrinte du rwv qui se veut plus rigoureuse et qui est don un peu plus dlite mnipulerF our fire simpleD le rwv est ppru le premier en IWWIF hut PHHHD le Qg ln le rwv en indiqunt que e serit l9venirF F F mis le rwv n9 ps per omme on l9espritF etour ux soures en PHHW X le Qg ndonne le rwv et dide de revenir u rwv pour le fire voluerF sl y euoup de onfusion utour de es lnggesD lors qu9ils se ressemlent euoupF euun n9est vriment meilleur que l9utreD il s9git de deux fons de fire di'rentesF hns e oursD nous llons trviller sur l dernire version de rwv @rwvSA qui est ujourd9hui le lngge d9venir que tout le monde est init utiliserF
Vous pouvez trs bien crer un site web uniquement en HTML, mais celui-ci ne sera pas trs beau : l'information apparatra  brute . C'est pour cela que le langage CSS vient toujours le complter. Pour vous donner une ide, la gure 6.1 montre ce que donne la mme page sans CSS puis avec le CSS. Le HTML dnit le contenu (comme vous pouvez le voir, c'est brut de dcorage !). Le CSS permet, lui, d'arranger le contenu et de dnir la prsentation : couleurs, image de fond, marges, taille du texte. . . Comme vous vous en doutez, le CSS a besoin d'une page HTML pour fonctionner. C'est pour cela que nous allons d'abord apprendre les bases du HTML avant de nous occuper de la dcoration en CSS. Vos premires pages ne seront donc pas les plus esthtiques, mais qu'importe ! Cela ne durera pas longtemps.

CHAPITRE 1.

COMMENT FAIT-ON POUR CRER DES SITES WEB ?

Figure 1.4  Avec et sans CSS

Les direntes versions de HTML et CSS

Au l du temps, les langages HTML et CSS ont beaucoup volu. Dans la toute premire version de HTML (HTML 1.0) il n'tait mme pas possible d'acher des images ! Voici un trs bref historique de ces langages pour votre culture gnrale.

Les versions de HTML  HTML 1 : c'est la toute premire version cre par Tim Berners-Lee en 1991.  HTML 2 : la deuxime version du HTML apparat en 1994 et prend n en 1996

avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML. Les rgles et le fonctionnement de cette version sont donns par le W3C (tandis que la premire version a t cre par un seul homme).  HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilits au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc.  HTML 4 : il s'agit de la version la plus rpandue du HTML (plus prcisment, il s'agit de HTML 4.01). Elle apparat pour la premire fois en 1998 et propose l'utilisation de frames (qui dcoupent une page web en plusieurs parties), des tableaux plus complexes, des amliorations sur les formulaires, etc. Mais surtout, cette version permet pour la premire fois d'exploiter des feuilles de style, notre fameux CSS !  HTML 5 : c'est LA dernire version. Encore assez peu rpandue, elle fait beaucoup parler d'elle car elle apporte de nombreuses amliorations comme la possibilit 8

L'DITEUR DE TEXTE

d'inclure facilement des vidos, un meilleur agencement du contenu, de nouvelles fonctionnalits pour les formulaires, etc. C'est cette version que nous allons dcouvrir ensemble.

ce langage qui permet de prsenter sa page web, comme les couleurs, les marges, les polices de caractres, etc.  CSS 2 : apparue en 1999 puis complte par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut dsormais utiliser des techniques de positionnement trs prcises, qui nous permettent d'acher des lments o on le souhaite sur la page.  CSS 3 : c'est la dernire version, qui apporte des fonctionnalits particulirement attendues comme les bordures arrondies, les dgrads, les ombres, etc.

Les versions de CSS  CSS 1 : ds 1996, on dispose de la premire version du CSS. Elle pose les bases de

xotez que rwvS et gQ ne sont ps enore des versions totlement (E nlises pr le QgF gependntD mme s9il peut y voir des hngements mineurs dns es lnggesD je vous reommnde hudement de ommener ds ujourd9hui ve es nouvelles versionsF veurs pports sont nomreux et vlent vriment le oupF h9illeursD de nomreux sites we professionnels se onstruisent ujourd9hui sur es dernires versionsF

L'diteur de texte
he quel logiiel visEje voir esoin pour rer mon site we c isEje devoir sser m tirelire pour heter un logiiel trs omplexe que je vis mettre des mois omprendre c
Il existe eectivement de nombreux logiciels ddis la cration de sites web. Mais, je vous rassure, vous n'aurez pas dbourser un seul centime. Pourquoi aller chercher un logiciel payant et compliqu, alors que vous avez dj tout ce qu'il faut chez vous ? Eh oui, accrochez-vous bien parce qu'il sut de. . . Bloc-Notes (gure 5.5) ! Incroyable mais vrai : on peut tout fait crer un site web uniquement avec BlocNotes, le logiciel d'dition de texte intgr par dfaut Windows. D'ailleurs, j'avoue, c'est comme cela que j'ai commenc moi-mme il y a quelques annes. Il y a cependant des logiciels plus puissants aujourd'hui et personne n'utilise vraiment Bloc-Notes. On peut classer ces logiciels de cration de site web en deux catgories :  Les WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez) : ce sont des programmes qui se veulent trs faciles d'emploi, ils permettent de crer des sites web sans apprendre de langage particulier. Parmi les plus connus d'entre eux : Mozilla Composer, Microsoft Expression Web, Dreamweaver. . . 9

CHAPITRE 1.

COMMENT FAIT-ON POUR CRER DES SITES WEB ?

Figure 1.5  Le logiciel Bloc-notes de Windows

et mme Word ! Leur principal dfaut est la qualit souvent assez mauvaise du code HTML et CSS qui est automatiquement gnr par ces outils. Un bon crateur de site web doit tt ou tard connatre HTML et CSS, c'est pourquoi je ne recommande pas l'usage de ces outils.  Les diteurs de texte : ce sont des programmes ddis l'criture de code. On peut en gnral les utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se rvlent tre de puissants allis pour les crateurs de sites web ! Vous l'aurez compris, je vais vous inviter utiliser un diteur de texte dans ce cours. Voici quelques conseils, selon que vous tes sous Windows, Mac OS X ou Linux.

Sous Windows
Il existe une grande quantit d'diteurs de texte, je ne pourrai pas vous les prsenter tous. Nanmoins, je vous invite vous pencher sur Notepad++, l'un des plus utiliss parmi ceux disponibles pour Windows. Ce logiciel est simple, en franais et gratuit. Site web de Notepad++ Code web : 642453 


i vous ne svez ps utiliser les odes weD je vous renvoie l pge iii de e livreD que vous trouverez dns l9vntEproposF
Voici quoi ressemble Notepad++ lorsque vous le lancez (gure 1.6). Je vous conseille de faire la manipulation suivante : allez dans le menu Langage > H > HTML. Cela permettra au logiciel de savoir que l'on va taper du HTML. Lorsque vous 10

L'DITEUR DE TEXTE

Figure 1.6  Notepad++

utiliserez le logiciel, il colorera votre code (gure 1.7), ce qui vous permettra de vous reprer plus facilement.

Figure 1.7  Coloration sous Notepad++

11

CHAPITRE 1.

COMMENT FAIT-ON POUR CRER DES SITES WEB ?

our l9instntD ne vous proupez ps de svoir e que signi(e tout e hE ri que vous pouvez voirF te souhitis simplement vous donner un peru des possiilits du logiielF
Il existe d'autres diteurs disponibles sous Windows. Si Notepad++ ne vous convient pas, vous pouvez essayer :  jEdit ;  PSpad ;  ConTEXT ;  . . . et bien d'autres si vous recherchez  diteur de texte  sur le Web.

Sous Mac OS X
Vous pouvez essayer l'un des logiciels suivants :  jEdit ;  Smultron ;  TextWrangler.

Sous Linux
Les diteurs de texte sont lgion sous Linux. Certains d'entre eux sont installs par dfaut, d'autres peuvent tre tlchargs facilement via le centre de tlchargement (sous Ubuntu notamment) ou au moyen de commandes comme apt-get et aptitude. Voici quelques logiciels que vous pouvez tester :  gEdit ;  Kate ;  vim ;  Emacs ;  jEdit.

Les navigateurs
Pourquoi le navigateur est important
Le navigateur est le programme qui nous permet de voir les sites web. Comme je vous l'ai expliqu plus tt, le travail du navigateur est de lire le code HTML et CSS pour acher un rsultat visuel l'cran. Si votre code CSS dit  Les titres sont en rouge , alors le navigateur achera les titres en rouge. Le rle du navigateur est donc essentiel ! On ne dirait pas, mais un navigateur est un programme extrmement complexe. En eet, comprendre le code HTML et CSS n'est pas une mince aaire. Le principal problme, vous vous en rendrez vite compte, c'est que les dirents navigateurs n'achent 12

LES NAVIGATEURS

pas le mme site exactement de la mme faon ! Il faudra vous y faire et prendre l'habitude de vrier rgulirement que votre site fonctionne correctement sur la plupart des navigateurs.

Les navigateurs sur ordinateur

Tlcharger les navigateurs
Il existe de nombreux navigateurs dirents. Voici les principaux connatre :

Google Chrome : le navigateur de Google, simple d'emploi et trs rapide.

C'est le navigateur que j'utilise au quotidien. Compatibilit : Windows, Mac et Linux Code web : 901626

Mozilla Firefox : le navigateur de la fondation Mozilla, clbre et rput. Je l'utilise frquemment pour tester mes sites web. Compatibilit : Windows, Mac et Linux Code web : 882142 Internet Explorer : le navigateur de Microsoft, qui quipe tous les PC
Windows. Je l'utilise frquemment pour tester mes sites web. Compatibilit : Windows Code web : 577078

Safari : le navigateur d'Apple, qui quipe tous les Mac.

Compatibilit : Windows et Mac Code web : 521278

Opera : l'ternel outsider. Il est moins utilis mais propose de nombreuses

fonctionnalits. Compatibilit : Windows, Mac et Linux Code web : 260892

Il est conseill d'installer plusieurs navigateurs sur son ordinateur

pour s9sE surer que son site fontionne orretement sur hun d9euxF he mnire gE nrleD je onseille de tester son site we rgulirement u moins sur qoogle ghromeD wozill pirefox et snternet ixplorerF xotez que fri et qoogle ghrome 0hent les sites we qusiment de l mme fonF sl n9est ps forE ment nessire de tester son site sur fri et qoogle ghromeD mme si 9est toujours plus srF

La gure 1.8 vous montre un aperu du rsultat produit par quelques-uns de ces prin13

CHAPITRE 1.

COMMENT FAIT-ON POUR CRER DES SITES WEB ?

cipaux navigateurs sur la page d'accueil de Google.

Figure 1.8  Aperu de quelques navigateurs

Comprendre les dirences entre navigateurs
Comme je vous le disais plus tt, les navigateurs n'achent pas toujours un mme site web exactement de la mme faon. Pourquoi ? Cela est d au fait que les navigateurs ne connaissent pas toujours les dernires fonctionnalits de HTML et CSS. Par exemple, Internet Explorer a longtemps t en retard sur certaines fonctionnalits CSS (et paradoxalement, il a aussi t en avance sur quelques autres). Pour compliquer les choses, plusieurs versions des navigateurs co-existent :  Firefox 2, Firefox 3.5, Firefox 3.6, Firefox 4 ;  Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9 ;  Chrome 8, Chrome 9, Chrome 10 ;  etc. Chaque version prend en charge de nouvelles fonctionnalits mais, si les utilisateurs ne mettent pas jour leur(s) navigateur(s), cela devient un problme pour les webmasters comme vous qui crent des sites web. Chrome a rsolu en grande partie le problme en mettant en place des mises jour automatiques, sans intervention de l'utilisateur. Les utilisateurs de Firefox ne pensent pas toujours mettre niveau leur navigateur ; quant Internet Explorer, les utilisateurs sont d'autant moins incits mettre jour leur navigateur que les dernires versions ncessitent aussi de passer une version rcente de Windows (Internet Explorer 9 n'est pas disponible pour Windows XP, par exemple). Des sites comme normansblog.de et caniuse.com tiennent notamment jour une liste des fonctionnalits CSS prises en charge par les direntes versions de chaque navigateur (gure 1.9). Liste sur normansblog.de Code web : 720397  Comme vous le voyez, c'est. . . compliqu. 14


LES NAVIGATEURS

Figure 1.9  Les fonctionnalits gres par les dirents navigateurs

L'essentiel des soucis viendra le plus souvent des anciennes versions d'Internet Explorer (IE6, IE7, IE8). Il faudra vrier comment le site s'ache sous ces anciennes versions. . . Attendez-vous des surprises ! Vriez surtout que votre site s'ache sans erreur, sans chercher obtenir exactement le mme rendu sur les vieilles versions de ces navigateurs.

sl existe sous indows un progrmme ppel siesterF sl permet de vri(er le rendu son site sous di'rentes versions d9snternet ixplorerF noter que e progrmme est reltivement instle @il plnte souventA mis il le mrite d9existerF
Tlcharger IETester Code web : 541385 


Les navigateurs sur mobile

En plus des navigateurs que je vous ai prsents, il faut savoir qu'il existe des variantes de ces navigateurs conues pour les tlphones portables, en particulier pour les smartphones. De plus en plus de personnes consultent aujourd'hui des sites web sur leur portable, il faut donc connatre un minimum le fonctionnement des navigateurs des tlphones. En fait, vous n'allez pas tre dpayss : la plupart des navigateurs sur smartphones sont les mmes que sur ordinateur, dans une version plus lgre adapte aux mobiles. Tout dpend du type de tlphone.  iPhone : sur l'iPhone d'Apple, le navigateur utilis est Safari Mobile. Il s'agit d'une version light et nanmoins trs complte de Safari pour ordinateur.  Android : les portables sous Android bncient du navigateur Chrome Mobile. L encore, il s'agit d'une version adapte aux mobiles. 15

CHAPITRE 1.

COMMENT FAIT-ON POUR CRER DES SITES WEB ?

Windows Phone : sous Windows Phone, on retrouve. . . Internet Explorer Mobile ! Le principe est le mme que pour les prcdents navigateurs : il s'agit d'une version ddie aux mobiles.  Blackberry : les Blackberry font exception car ils ont leur propre navigateur (il n'existe pas d'quivalent sur ordinateur). Nanmoins, les versions les plus rcentes de ce navigateur se basent sur un noyau commun Safari et Chrome (il s'agit du moteur de rendu Webkit). Par consquent, l'achage est en gnral proche de celui propos par Safari et Chrome. Les navigateurs pour mobiles prennent en charge la plupart des dernires fonctionnalits de HTML et CSS. De plus, le systme de mise jour automatis des mobiles nous garantit que les utilisateurs auront le plus souvent les dernires versions. Sachez nanmoins que des dirences existent entre ces dirents navigateurs mobiles et qu'il est conseill de tester son site sur ces appareils aussi ! En particulier, l'cran tant beaucoup moins large, il faudra vrier que votre site s'ache correctement.


ves tlettes ttiles sont quipes des mmes nvigteursD l9rn est simE plement plus lrgeF einsiD l9id est fourni ve fri woileF

En rsum
 Le Web a t invent par Tim Berners-Lee au dbut des annes 1990.  Pour crer des sites web, on utilise deux langages informatiques :  HTML : permet d'crire et organiser le contenu de la page (paragraphes, titres. . .) ;  CSS : permet de mettre en forme la page (couleur, taille. . .).  Il y a eu plusieurs versions des langages HTML et CSS. Les dernires versions sont HTML5 et CSS3.  Le navigateur web est un programme qui permet d'acher des sites web. Il lit les langages HTML et CSS pour savoir ce qu'il doit acher.  Il existe de nombreux navigateurs web dirents : Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera. . . Chacun ache un site web de manire lgrement dirente des autres navigateurs.  Dans ce cours, nous allons apprendre utiliser les langages HTML et CSS. Nous travaillerons dans un programme appel  diteur de texte  (Notepad++, jEdit, vim. . .).

16

Chapitre

2
Dicult :

Votre premire page web en HTML

y estD vous vez instll tous les logiiels c ous devriez mintennt voir un diteur de texte pour crer votre site @omme xotepdCCA et plusieurs nvigteurs pour le tester @wozill pirefoxD qoogle ghromeD snternet ixplorerF F FAF hns e hpitreD nous llons ommener prtiquer 3 xous llons douvrir les ses du lngge rwv et enregistrer notre toute premire pge we 3 elors ouiD ien srD ne vous ttendez ps enore rliser une pge we exeptionnelle ds e seond hpitreD mis ptieneF F F el viendr 3

17

CHAPITRE 2.

VOTRE PREMIRE PAGE WEB EN HTML

Crer une page web avec l'diteur

Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons crer notre site dans un diteur de texte. Vous avez d en installer un suite mes conseils dans le premier chapitre : qu'il s'appelle Notepad++, PSpad, jEdit, vim, TextWrangler. . . peu importe. Ces logiciels ont un but trs simple : vous permettre d'crire du texte ! Dans la suite de ce cours, je travaillerai avec Notepad++. Je vais donc l'ouvrir (gure 2.1).

Figure 2.1  Ouverture de Notepad++

Bon, qu'est-ce qu'on fait maintenant ? Qu'est-ce qu'on crit sur cette feuille blanche ? On va faire un petit essai. Je vous invite crire ce qui vous passe par la tte, comme moi la gure 2.2. Vous pouvez crire les mmes phrases que moi ou ce que vous voulez ; le but est d'crire quelque chose. Maintenant, enregistrons ce chier. Pour cela, c'est trs simple : comme dans tous les programmes, vous avez un menu Fichier > Enregistrer. Une bote de dialogue vous demande o enregistrer le chier et sous quel nom. Enregistrez-le o vous voulez. Donnez au chier le nom que vous voulez, en terminant par .html, par exemple test.html, comme indiqu la gure 2.3.

te vous reommnde de rer un nouveu dossier dns vos douments qui ontiendr les (hiers de votre siteF our m prt j9i r un dossier test dns lequel j9i mis mon (hier test.htmlF
18

CRER UNE PAGE WEB AVEC L'DITEUR

Figure 2.2  Du texte dans Notepad++

Figure 2.3  Enregistrement d'un chier sous Notepad++

19

CHAPITRE 2.

VOTRE PREMIRE PAGE WEB EN HTML

Ouvrez maintenant l'explorateur de chiers dans le dossier o vous avez enregistr votre page. Vous y verrez le chier que vous venez de crer (gure 2.4).

Figure 2.4  Le chier dans l'explorateur

L'icne qui reprsente le chier dpend de votre navigateur web par dfaut. Ici, l'icne est celle de Google Chrome, mon navigateur par dfaut, mais le chier a peut-tre une autre icne chez vous. Voici par exemple les icnes qui apparaissent lorsque votre navigateur principal est Firefox ou Internet Explorer (gure 2.5).

Figure 2.5  Icne d'un chier HTML sous Firefox et Internet Explorer
Faites simplement un double-clic sur ce chier et. . . votre navigateur s'ouvre et, comme la gure 2.6, ache le texte que vous avez crit.

gel ne mrhe ps ienD on dirit 3 out le texte s90he sur l mme ligne lors qu9on vit rit deux lignes de texte di'rentes 3 c
En eet, bien vu ! Le texte s'ache sur la mme ligne alors qu'on avait demand l'crire sur deux lignes direntes. Que se passe-t-il ? En fait, pour crer une page web il ne sut pas de taper simplement du texte comme on vient de le faire. En plus de ce texte, il faut aussi crire ce qu'on appelle des balises, qui vont donner des instructions l'ordinateur comme  aller la ligne ,  acher une image , etc. 20

LES BALISES ET LEURS ATTRIBUTS

Figure 2.6  La page web ache

Les balises et leurs attributs

Bon, tout cela tait trop facile. videmment, il a fallu que ces satans informaticiens s'en mlent et compliquent les choses. Il ne sut pas d'crire  simplement  du texte dans l'diteur, il faut aussi donner des instructions l'ordinateur. En HTML, on utilise pour cela des balises.

Les balises
Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles l'cran pour vos visiteurs, mais elles permettent l'ordinateur de comprendre ce qu'il doit acher. Les balises se reprent facilement. Elles sont entoures de  chevrons , c'est--dire des symboles < et >, comme ceci : <balise> quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple :  Ceci est le titre de la page ,  Ceci est une image ,  Ceci est un paragraphe de texte , etc. On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici quoi elles ressemblent :
1

< titre > Ceci est un titre </ titre >

On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signie pour l'ordinateur que tout ce qui n'est pas 21

CHAPITRE 2.

VOTRE PREMIRE PAGE WEB EN HTML

entre ces deux balises. . . n'est pas un titre.

1

Ceci n ' est pas un titre < titre > Ceci est un titre </ titre > Ceci n ' est pas un titre

Les balises orphelines

Ce sont des balises qui servent le plus souvent insrer un lment un endroit prcis (par exemple une image). Il n'est pas ncessaire de dlimiter le dbut et la n de l'image, on veut juste dire l'ordinateur  Insre une image ici . Une balise orpheline s'crit comme ceci :
1

< image / >

xotez que le G de (n n9est ps oligtoireF yn pourrit rire seulement <image>F xnmoinsD pour ne ps les onfondre ve le premier type de liseD les wemsters reommndent de rjouter e / @slashA l (n des lises orphelinesF ous me verrez don mettre un / ux lises orphelines et je vous reommnde de fire de mmeD 9est une onne prtiqueF

Les attributs
Les attributs sont un peu les options des balises. Ils viennent les complter pour donner des informations supplmentaires. L'attribut se place aprs le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :
1

< balise attribut = " valeur " >

quoi cela sert-il ? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas grand chose. On pourrait rajouter un attribut qui indique le nom de l'image acher :
1

< image nom = " photo . jpg " / >

L'ordinateur comprend alors qu'il doit acher l'image contenue dans le chier photo.jpg. Dans le cas d'une balise fonctionnant  par paire , on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 :
1 2

< citation auteur = " Neil Armstrong " date =" 21 / 07 / 1969 " > C ' est un petit pas pour l ' homme , mais un bond de g ant pour l ' humanit . </ citation >

outes les lises que nous venons de voir sont (tivesF ves vries lises ont des noms en nglis @eh oui 3AD nous llons les douvrir dns l suite de e oursF
22

STRUCTURE DE BASE D'UNE PAGE HTML5

Structure de base d'une page HTML5

Reprenons notre diteur de texte (dans mon cas Notepad++). Je vous invite crire ou copier-coller le code source ci-dessous dans Notepad++. Ce code correspond la base d'une page web en HTML5 :
1 2 3 4 5 6 7 8 9 10 11

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8" / > < title > Titre </ title > </ head > < body > </ body > </ html >

Copier ce code Code web : 310363 

t9i mis des espes u dut de ertines lignes pour  dler les lisesF ge n9est ps oligtoire et el n9 uun impt sur l90hge de l pgeD mis el rend le ode soure plus lisileF yn ppelle el l9indentationF hns votre diteurD il su0t d9ppuyer sur l touhe Tab pour voir le mme rsulttF
Copi dans Notepad++, cela donne la gure 2.7. Vous noterez que les balises s'ouvrent et se ferment dans un ordre prcis. Par exemple, la balise <html> est la premire que l'on ouvre et c'est aussi la dernire que l'on ferme (tout la n du code, avec </html>). Les balises doivent tre fermes dans le sens inverse de leur ouverture. Un exemple :  <html><body></body></html> : correct. Une balise qui est ouverte l'intrieur d'une autre doit aussi tre ferme l'intrieur.  <html><body></html></body> : incorrect, les balises s'entremlent.

iuhD on pourrit voir des explitions sur toutes les lises que l9on vient de opier dns l9diteurD m9sieur c
Bien sr, c'est demand si gentiment. Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous expliquer leur rle !

Le doctype
1

<! DOCTYPE html >

23

CHAPITRE 2.

VOTRE PREMIRE PAGE WEB EN HTML

Figure 2.7  Code HTML5 minimal dans Notepad++

La toute premire ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considrer que c'est un peu l'exception qui conrme la rgle.

gette ligne du dotype tit utrefois inroylement omplexeF sl tit impossile de l retenir de tteF our rwv IFHD il fllit rire X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">F hns

le dre de rwvSD il t did de l simpli(erD pour le plus grnd onheur des wemstersF und vous voyez une lise dotype ourte @<!DOCTYPE html>AD el signi(e que l pge est rite en rwvSF

La balise </html>
1 2 3

< html > </ html >

C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout la n du code ! 24

STRUCTURE DE BASE D'UNE PAGE HTML5

L'en-tte <head> et le corps <body>

Une page web est constitue de deux parties :  L'en-tte <head> : cette section donne quelques informations gnrales sur la page comme son titre, l'encodage (pour la gestion des caractres spciaux), etc. Cette section est gnralement assez courte. Les informations que contient l'en-tte ne sont pas aches sur la page, ce sont simplement des informations gnrales destination de l'ordinateur. Elles sont cependant trs importantes !  Le corps <body> : c'est l que se trouve la partie principale de la page. Tout ce que nous crirons ici sera ach l'cran. C'est l'intrieur du corps que nous crirons la majeure partie de notre code. Pour le moment, le corps est vide (nous y reviendrons plus loin). Intressons-nous par contre aux deux balises contenues dans l'en-tte. . .

L'encodage (charset)
1

< meta charset = " utf - 8" / >

Cette balise indique l'encodage utilis dans votre chier .html. Sans rentrer dans les dtails, car cela pourrait vite devenir compliqu, l'encodage indique la faon dont le chier est enregistr. C'est lui qui dtermine comment les caractres spciaux vont s'acher (accents, idogrammes chinois et japonais, caractres arabes, etc.). Il y a plusieurs techniques d'encodage portant des noms bizarres et utilises en fonction des langues : ISO-8859-1, OEM 775, Windows-1253. . . Une seule cependant devrait tre utilise aujourd'hui autant que possible : UTF-8. Cette mthode d'encodage permet d'acher sans aucun problme pratiquement tous les symboles de toutes les langues de notre plante ! C'est pour cela que j'ai indiqu utf-8 dans cette balise. Il faut aussi que votre chier soit bien enregistr en UTF-8. C'est le cas le plus souvent sous Linux par dfaut mais, sous Windows, il faut gnralement le dire au logiciel.

ous xotepdCCD llez dns le menu Encodage b Encoder en UTF-8 pour que votre (hier soit enregistr en pEV ds le dutF gel ne s9pplique qu9u (hier tuellement ouvertF our ne ps voir le fire pour hque nouveu (hierD je vous onseille d9ller dns le menu Paramtrage b PrfrencesD onglet Nouveau document/DossierF leE tionnez UTF-8 sans BOM dns l listeF
(sans BOM)

i vous vez un prolme d90hge des ents plus trd sur votre pge weD 9est qu9il y un prolme ve l9enodgeF ri(ez que l lise indique ien pEV et que votre (hier est enregistr en pEV @votre diteur de texte est ple de vous le direD xotepdCC le fit dns le menu EncodageAF
25

CHAPITRE 2.

VOTRE PREMIRE PAGE WEB EN HTML

Le titre principal de la page

1

< title >

C'est le titre de votre page, probablement l'lment le plus important ! Toute page doit avoir un titre qui dcrit ce qu'elle contient. Il est conseill de garder le titre assez court (moins de 100 caractres en gnral). Le titre ne s'ache pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'ache dans l'onglet, comme sur la gure 2.8.

Figure 2.8  Le titre de la page apparat en haut du navigateur

Il faut savoir que le titre apparat aussi dans les rsultats de recherche, comme sur Google (gure 2.9).

Figure 2.9  Le titre de la page apparat dans les recherches Google

Autant vous dire que bien choisir son titre est important !

Les commentaires
Nous avons appris crer notre premire vraie page HTML dans ce chapitre. Avant de terminer, j'aimerais vous prsenter le principe des commentaires. Un commentaire en HTML est un texte qui sert simplement de mmo. Il n'est pas ach, il n'est pas lu par l'ordinateur, cela ne change rien l'achage de la page. 26

LES COMMENTAIRES

frefD el ne sert rien c

Eh bien si ! Cela sert vous et aux personnes qui liront le code source de votre page. Vous pouvez utiliser les commentaires pour laisser des indications sur le fonctionnement de votre page. Quel intrt ? Cela vous permettra de vous rappeler comment fonctionne votre page si vous revenez sur votre code source aprs un long moment d'absence. Ne rigolez pas, cela arrive tous les webmasters.

Insrer un commentaire
Un commentaire est une balise HTML avec une forme bien spciale :
1

<! - - Ceci est un commentaire -->

Vous pouvez le mettre o vous voulez au sein de votre code source : il n'a aucun impact sur votre page, mais vous pouvez vous en servir pour vous aider vous reprer dans votre code source (surtout s'il est long).
1 2 3 4 5 6 7 8 9 10 11 12

<! DOCTYPE html > < html > < head > <!- - En - t te de la page --> < meta charset = " utf - 8" / > < title > Titre </ title > </ head > < body > <!- - Corps de la page --> </ body > </ html >

Tout le monde peut voir vos commentaires. . . et tout votre code HTML !
Terminons par une remarque importante : tout le monde peut voir le code HTML de votre page une fois celle-ci mise en ligne sur le Web. Il sut de faire un clic droit sur la page et de slectionner  Acher le code source de la page  (l'intitul peut changer selon votre navigateur), comme le montre la gure 2.10. Le code source s'ache alors (gure 2.11). Vous pouvez tester cette manipulation sur n'importe quel site web, cela marche ! Garanti 100%. Cela s'explique assez facilement : le navigateur doit obtenir le code HTML pour savoir ce qu'il faut acher. Le code HTML de tous les sites est donc public. 27

CHAPITRE 2.

VOTRE PREMIRE PAGE WEB EN HTML

Figure 2.10  Menu acher le code source

Figure 2.11  Achage du code source

28

LES COMMENTAIRES

La morale de l'histoire ? Tout le monde pourra voir votre code HTML et vous ne pouvez pas l'empcher. Par consquent, ne mettez pas d'informations sensibles comme des mots de passe dans les commentaires. . . et soignez votre code source, car je pourrai venir vrier si vous avez bien suivi mon cours la lettre !

vorsque vous regrderez le ode de ertins sites weD ne prenez ps peur s9il vous prt long ou ne ps respeter les mmes rgles que elles que je vous prsente dns e livreF ous les sites ne sont ps rits en rwvS @loin de lA etD prfoisD ertins wemsters rdigent trs ml leur odeD e ne sont ps toujours des exemples suivre 3

En rsum
 On utilise l'diteur de texte (Notepad++, jEdit, vim. . .) pour crer un chier ayant l'extension .html (par exemple : test.html). Ce sera notre page web.  Ce chier peut tre ouvert dans le navigateur web simplement en faisant un doubleclic dessus.  l'intrieur du chier, nous crirons le contenu de notre page, accompagn de balises HTML.  Les balises peuvent avoir plusieurs formes :  <balise> </balise> : elles s'ouvrent et se ferment pour dlimiter le contenu (dbut et n d'un titre, par exemple).  <balise /> : balises orphelines (on ne les insre qu'en un seul exemplaire), elles permettent d'insrer un lment un endroit prcis (par exemple une image).  Les balises sont parfois accompagnes d'attributs pour donner des indications supplmentaires (exemple : <image nom="photo.jpg" />).  Une page web est constitue de deux sections principales : un en-tte (<head>) et un corps (<body>).  On peut acher le code source de n'importe quelle page web en faisant un clic droit puis en slectionnant Afficher le code source de la page.

29

CHAPITRE 2.

VOTRE PREMIRE PAGE WEB EN HTML

30

Chapitre

3
Dicult :

Organiser son texte

on D l pge lnhe 9est ien joliD mis votre site we risque d9voir un sus mitig si vous le lissez omme elF xous llons douvrir de nomreuses lises rwv dns e hpitreF gertines existent depuis l toute premire version de rwvD d9utres ont t introduites plus remment dns rwvSF xous llons voir suessivement dns e hpitre X ! omment rdiger des prgrphes Y ! omment struturer s pge ve les titres Y ! omment donner de l9importne ertins mots de son texte Y ! omment orgniser les informtions sous forme de listesF wotivs c ellezD vous llez voirD e n9est ps ompliquF

31

CHAPITRE 3.

ORGANISER SON TEXTE

Les paragraphes
La plupart du temps, lorsqu'on crit du texte dans une page web, on le fait l'intrieur de paragraphes. Le langage HTML propose justement la balise <p> pour dlimiter les paragraphes.
1

<p > Bonjour et bienvenue sur mon site ! </ p >

 <p> signie  Dbut du paragraphe  ;  </p> signie  Fin du paragraphe . Comme je vous l'ai dit au chapitre prcdent, on crit le contenu du site web entre les balises <body></body>. Il nous sut donc de mettre notre paragraphe entre ces deux balises et nous aurons enn notre premire vraie page web avec du texte ! Je reprends donc exactement le mme code qu'au chapitre prcdent et j'y ajoute mon paragraphe :
1 2 3 4 5 6 7 8 9 10 11

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < title > Paragraphes </ title > </ head > < body > <p > Bonjour et bienvenue sur mon site ! </ p > </ body > </ html >

Essayez, vous allez voir le rsultat ! Bon, ok, ce n'est pas encore le nirvana mais c'est un bon dbut. Mais ne nous arrtons pas en si bon chemin. Nous allons voir maintenant quelque chose d'un peu particulier en HTML : le saut de ligne. Cela parat simple et pourtant, cela ne fonctionne pas vraiment comme dans un traitement de texte habituel. . .

Sauter une ligne

, En HTML, si vous appuyez sur la touche Entre cela ne cre pas une nouvelle ligne comme vous en avez l'habitude. Essayez donc ce code :
1 2 3 4 5 6 7 8 9

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < title > Essais de sauts de ligne </ title > </ head > < body > <p > Bonjour et bienvenue sur mon site !

32

LES PARAGRAPHES

10

11

12 13

</ body > </ html >

Ceci est mon premier test alors soyez indulgents s ' il vous pla t , j ' apprends petit petit comment cela marche . Pour l ' instant c ' est un peu vide , mais revenez dans 2 - 3 jours quand j ' aurai appris un peu plus de choses , je vous assure que vous allez tre surpris ! </ p >

Tout le texte s'ache sur la mme ligne alors qu'on est bien all la ligne dans le code ! Taper frntiquement sur la touche Entre dans l'diteur de texte ne sert donc strictement rien. Comme vous devez vous en douter, il y a pourtant bien un moyen de faire des sauts de ligne en HTML. En fait, si vous voulez crire un deuxime paragraphe, il vous sut d'utiliser une deuxime balise <p>. Votre code HTML devrait donc tre au nal rempli de balises de paragraphe ! Un exemple :
1 2 3 4 5 6 7 8 9

< html > < head > < meta charset = " utf - 8" / > < title > Paragraphes </ title > </ head > < body > <p > Bonjour et bienvenue sur mon site ! Ceci est mon premier test alors soyez indulgents s ' il vous pla t , j ' apprends petit petit comment cela marche . </ p > <p > Pour l ' instant c ' est un peu vide , mais revenez dans 2 - 3 jours quand j ' aurai appris un peu plus de choses , je vous assure que vous allez tre surpris ! </ p > </ body > </ html >

10 11

12 13

Le rsultat se trouve la gure 3.1.

yuiD mis si je veux juste ller l ligne dns un prgrphe et non ps suter une ligne c
Eh bien devinez quoi : il existe une balise  Aller la ligne  ! C'est une balise orpheline qui sert juste indiquer qu'on doit aller la ligne : <br />. Vous devez obligatoirement la mettre l'intrieur d'un paragraphe. Voici comment l'utiliser dans un code : 33

CHAPITRE 3.

ORGANISER SON TEXTE

Figure 3.1  Deux paragraphes avec 2 balises <p>

1 2 3 4 5 6 7 8 9

< html > < head > < meta charset = " utf - 8 " / > < title > Sauts de ligne </ title > </ head > < body > <p > Bonjour et bienvenue sur mon site ! < br / > Ceci est mon premier test alors soyez indulgents s ' il vous pla t , j ' apprends petit petit comment cela marche . </ p > <p > Pour l ' instant c ' est un peu vide , mais revenez dans 2 - 3 jours quand j ' aurai appris un peu plus de choses , je vous assure que vous allez tre surpris ! </ p > </ body > </ html >

10 11

12 13

ous pouvez thoriquement mettre plusieurs lises <br /> d90le pour fire plusieurs suts de lignesD mis on onsidre que 9est une muvise prtique qui rend le ode dlit mintenirF our dler un texte ve plus de prisionD on utiliser le gD e lngge qui vient omplter le rwv et dont je vous prleri un peu plus loinF
Donc c'est compris ?  <p> </p> : pour organiser son texte en paragraphes ;  <br /> : pour aller la ligne. Maintenant qu'on sait crire des paragraphes, voyons voir comment on cre des titres. 34

LES TITRES

Les titres
Lorsque le contenu de votre page va s'toer avec de nombreux paragraphes, il va devenir dicile pour vos visiteurs de se reprer. C'est l que les titres deviennent utiles. En HTML, on est verni, on a le droit d'utiliser six niveaux de titres dirents. Je veux dire par l qu'on peut dire  Ceci est un titre trs important ,  Ceci est un titre un peu moins important ,  Ceci est un titre encore moins important , etc. On a donc six balises de titres direntes :  <h1> </h1> : signie  titre trs important . En gnral, on s'en sert pour acher le titre de la page au dbut de celle-ci.  <h2> </h2> : signie  titre important .  <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un  soustitre  si vous voulez).  <h4> </h4> : titre encore moins important.  <h5> </h5> : titre pas important.  <h6> </h6> : titre vraiment, mais alors l vraiment pas important du tout.

ettention X ne onfondez ps ve l lise <title> 3 v lise <title> 0he le titre de l pge dns l rre de titre du nvigteur omme nous l9vons vuF ves titres <h1> et ompgnieD euxD servent rer des titres qui seront 0hs dans l pge weF
Ne vous laissez pas impressionner par toutes ces balises. En fait, six niveaux de titres, c'est beaucoup. Dans la pratique, personnellement, je n'utilise que les balises <h1>, <h2> et <h3>, et trs rarement les autres (je n'ai pas souvent besoin de six niveaux de titres dirents). Votre navigateur ache le titre trs important en trs gros, le titre un peu moins important en un peu moins gros, etc.

xe hoisissez ps votre lise de titre en fontion de l tille qu9elle pplique u texte 3 sl fut imprtivement ien struturer s pge en ommennt pr un titre de niveu I @<h1>AD puis un titre de niveu P @<h2>AD etF sl ne devrit ps y voir de sousEtitre sns titre prinipl 3 i vous voulez modi(er l tille du texteD shez que nous pprendrons fire el en g un peu plus trdF
Essayez de crer une page web avec des titres pour voir ce que cela donne :
1 2 3 4 5 6 7 8 9

< html > < head > < meta charset = " utf - 8" / > < title > Niveaux de titres </ title > </ head > < body > < h1 > Titre super important </ h1 > < h2 > Titre important </ h2 >

35

CHAPITRE 3.

ORGANISER SON TEXTE

10 11 12 13 14 15 16

< h3 > Titre un peu moins important ( sous - titre ) </ h3 > < h4 > Titre pas trop important </ h4 > < h5 > Titre pas important </ h5 > < h6 > Titre vraiment pas important du tout </ h6 > </ body > </ html >

Allez, je vous donne un exemple d'utilisation des titres dans une page web (vous allez voir que je ne me sers pas de toutes les balises) :
1 2 3 4 5 6 7 8 9 10

< html > < head > < meta charset = " utf - 8 " / > < title > Pr sentation du Site du Z ro </ title > </ head > < body > < h1 > Bienvenue sur le Site du Z ro ! </ h1 > <p > Bonjour et bienvenue sur mon site : le Site du Z ro . <br /> Le Site du Z ro , qu ' est - ce que c ' est ? </ p > < h2 > Des cours pour d butants </ h2 > <p > Le Site du Z ro vous propose des cours ( tutoriels ) destin s aux d butants : aucune connaissance n ' est requise pour lire ces cours ! </ p > <p > Vous pourrez ainsi apprendre , sans rien y conna tre auparavant , cr er un site web , programmer , construire des mondes en 3D ! </ p > < h2 > Une communaut active </ h2 > <p > Vous avez un probl me , un l ment du cours que vous ne comprenez pas ? Vous avez besoin d ' aide pour cr er votre site ? < br / > Rendez - vous sur les forums ! Vous y d couvrirez que vous n ' tes pas le seul dans ce cas et vous trouverez tr s certainement quelqu ' un qui vous aidera aimablement r soudre votre probl me . </ p > </ html >

11 12 13 14 15

16 17

18 19 20 21

22

23

Copier ce code Code web : 937479  Voil une page web qui prend forme ! 36

LA MISE EN VALEUR

yuiD mis moi je veux entrer mon titreD l9rire en rouge et le souligner 3
Nous ferons tout cela lorsque nous apprendrons le CSS (ds la deuxime partie du cours). Il faut savoir que <h1> ne signie pas  Times New Roman, taille 16 pt , mais  Titre important . Grce au langage CSS, vous pourrez dire  Je veux que mes titres importants soient centrs, rouges et souligns . Pour le moment, en HTML, nous ne faisons que structurer notre page. Nous rdigeons le contenu avant de nous amuser le mettre en forme.

La mise en valeur
Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose dirents moyens de mettre en valeur le texte de votre page.

Mettre un peu en valeur

Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>. Son utilisation est trs simple : encadrez les mots mettre en valeur avec ces balises et c'est bon ! Je reprends un peu l'exemple de tout l'heure et j'y mets quelques mots en vidence :
1 2 3 4 5 6 7 8 9

< html > < head > < meta charset = " utf - 8" / > < title > Emphase </ title > </ head > < body > <p > Bonjour et bienvenue sur mon site ! < br / > Ceci est mon premier test alors < em > soyez indulgents </ em > s ' il vous pla t , j ' apprends petit petit comment cela marche . </ p > </ body > </ html >

10 11

Comme vous pouvez le voir, utiliser la balise <em> a pour consquence de mettre le texte en italique. En fait, c'est le navigateur qui choisit comment acher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l'apparence du texte en utilisant l'italique. 37

CHAPITRE 3.

ORGANISER SON TEXTE

Mettre bien en valeur

Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signie  fort , ou  important  si vous prfrez. Elle s'utilise exactement de la mme manire que <em> :
1 2 3 4 5 6 7 8 9

< html > < head > < meta charset = " utf - 8 " / > < title > Forte emphase </ title > </ head > < body > <p > Bonjour et bienvenue sur mon site ! </ br / > Ceci est mon premier test alors < strong > soyez indulgents </ strong > s ' il vous pla t , j ' apprends petit petit comment cela marche . </ p > </ body > </ html >

10 11

Vous voyez srement le texte s'acher en gras. L encore, le gras n'est qu'une consquence. Le navigateur a choisi d'acher en gras les mots importants pour les faire ressortir davantage. La balise <strong> ne signie pas  mettre en gras  mais  important . On pourra dcider plus tard, en CSS, d'acher les mots  importants  d'une autre faon que le gras si on le souhaite.

Marquer le texte
La balise <mark> permet de faire ressortir visuellement une portion de texte. L'extrait n'est pas forcment considr comme important mais on veut qu'il se distingue bien du reste du texte. Cela peut tre utile pour faire ressortir un texte pertinent aprs une recherche sur votre site par exemple.
1 2 3 4 5 6 7 8 9

< html > < head > < meta charset = " utf - 8 " / > < title > Marquage du texte </ title > </ head > < body > <p > Bonjour et bienvenue sur mon site ! < br / > Ceci est mon premier test alors < mark > soyez indulgents </ mark > s ' il vous pla t , j ' apprends petit petit comment cela marche . </ p > </ body > </ html >

10 11

38

LA MISE EN VALEUR

Par dfaut, <mark> a pour eet de surligner le texte. On pourra changer l'achage en CSS (dcider de surligner dans une autre couleur, d'encadrer le texte, etc.). C'est le mme principe que ce que je vous disais pour les balises prcdentes : elles indiquent le sens des mots et non pas comment ceux-ci doivent s'acher.

N'oubliez pas : HTML pour le fond, CSS pour la forme

Je vais peut-tre vous sembler un peu lourd mais il est trs important qu'on se comprenne bien car les dbutants font souvent la mme grosse erreur ce stade. Ils ont vu les balises <em>, <strong>, <mark>. . . et ils se disent :  Chouette, j'ai dcouvert comment mettre en italique, en gras et comment surligner du texte en HTML ! . Et pourtant. . . ce n'est pas cela que servent ces balises ! Je sais, je sais, vous allez me dire  Oui mais quand j'utilise <strong> le texte apparat en gras, donc c'est pour mettre en gras.  et pourtant, c'est une erreur de croire que cette balise sert cela. Le rle des balises est d'indiquer le sens du texte. Ainsi, <strong> indique l'ordinateur  Ce texte est important . C'est tout. Et pour montrer que le texte est important, l'ordinateur dcide de le mettre en gras (mais il pourrait aussi bien l'crire en rouge !). La plupart des navigateurs achent les textes importants en gras, mais rien ne les y oblige.

te ne omprends psF quoi el sertEil que l9ordinteur she qu9un texte est importnt c sl n9est ps ssez intelligent pour omprendre 3
Dtrompez-vous ! De nombreux programmes analysent le code source des pages web, commencer par les robots de moteurs de recherche. Ces robots parcourent le Web en lisant le code HTML de tous les sites. C'est le cas des robots de Google et de Bing, par exemple. Les mots-cls  importants  ont tendance avoir plus de valeur leurs yeux, donc si quelqu'un fait une recherche sur ces mots, il a plus de chances de tomber sur votre site. Bien entendu, c'est une explication grossire et il ne faut pas croire qu'utiliser la balise <strong> tout-va amliorera votre rfrencement. Il faut simplement faire conance aux ordinateurs : ils comprennent ce qu'un texte  important  veut dire et peuvent se servir de cette information.

wis lorsD omment fitEon pour mettre spi(quement en grsD pour rire en rougeD et tout et tout c
Tout cela se fait en CSS. Souvenez-vous :  le HTML dnit le fond (contenu, logique des lments) ;  le CSS dnit la forme (apparence). Nous verrons le CSS plus loin, pour l'instant nous nous concentrons sur le HTML et ses balises, qui ont chacune un sens particulier. 39

CHAPITRE 3.

ORGANISER SON TEXTE

Les listes
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations. Nous allons dcouvrir ici deux types de listes :  les listes non ordonnes ou listes puces ;  les listes ordonnes ou listes numrotes ou encore numrations.

Liste non ordonne

Une liste non ordonne ressemble ceci :  Fraises  Framboises  Cerises C'est un systme qui nous permet de crer une liste d'lments sans notion d'ordre (il n'y a pas de  premier  ni de  dernier ). Crer une liste non ordonne est trs simple. Il sut d'utiliser la balise <ul> que l'on referme un peu plus loin avec </ul>. Commencez donc taper ceci :
1

< ul > </ ul >

Et maintenant, voil ce qu'on va faire : on va crire chacun des lments de la liste entre deux balises <li></li>. Chacune de ces balises doit se trouver entre <ul> et </ul>. Vous allez comprendre de suite avec cet exemple :
1 2 3 4 5

< ul >

< li > Fraises </ li > < li > Framboises </ li > < li > Cerises </ li > </ ul >

Le rsultat se trouve la gure 3.2. Notez que la liste doit tre place l'intrieur de <body></body>. partir de maintenant, je ne mets pas tout le code de la page pour rester lisible. Retenez donc ces deux balises :  <ul></ul> dlimite toute la liste ;  <li></li> dlimite un lment de la liste (une puce). Vous pouvez mettre autant d'lments que vous voulez dans la liste puces, vous n'tes pas limits trois lments. Et voil, vous savez crer une liste puces ! Pas si dur une fois qu'on a compris comment imbriquer les balises. 40

LES LISTES

Figure 3.2  Une liste non ordonne

our eux qui ont esoin de fire des listes omplexesD shez que vous pouvez imbriquer des listes pues @rer une liste pues dans une liste puesAF i vous voulez fire D ouvrez une seonde lise <ul> l'intrieur d9un lment <li></li>F i vous fermez les lises dns le on ordreD vous n9urez ps de prolmeF ettention nnmoinsD ette tehnique est un peu omplique mtriserF

Liste ordonne
Une liste ordonne fonctionne de la mme faon, seule une balise change : il faut remplacer <ul></ul> par <ol></ol>. l'intrieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour dlimiter les lments.

v9ordre dns lequel vous plez les lments de l liste est importntF ve premier <li></li> ser l9lment nID le seond ser le nP etF F F
Comme c'est particulirement intuitif, je vous laisse admirer la simplicit de cet exemple (rsultat la gure 3.3) :
1 2 3 4 5 6 7

< h1 > Ma journ e </ h1 > < ol > < li > Je me l ve . </ li > < li > Je mange et je bois . </ li > < li > Je retourne me coucher . </ li > </ ol >

Par rapport l'exemple prcdent, tout ce qu'on a eu changer est donc la balise <ol>. 41

CHAPITRE 3.

ORGANISER SON TEXTE

Figure 3.3  Une liste ordonne

our informtionD il existe un troisime type de listeD euoup plus rre X l liste de d(nitionsF ille fit intervenir les lises <dl> @pour dlimiter l listeAD <dt> @pour dlimiter un termeA et <dd> @pour dlimiter l d(nition de e termeAF

En rsum
 Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme  Ceci est un paragraphe ,  Ceci est un titre , etc.  Les paragraphes sont dnis par la balise <p> </p> et les sauts de ligne par la balise <br />.  Il existe six niveaux de titre, de <h1> </h1> <h6> </h6>, utiliser selon l'importance du titre.  On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.  Pour crer des listes, on doit utiliser la balise <ul> (liste puces, non ordonne) ou <ol> (liste ordonne). l'intrieur, on insre les lments avec une balise <li> pour chaque item.

42

Chapitre

4
Dicult :

Crer des liens

u hpitre prdentD vous vez ppris rer une pge rwv toute simpleF h9ordD elle n9tit ps frnhement mgni(queD mis 9tit une vrie pge rwv qund mmeF gomme vous le svezD un site we est ompos de plusieurs pgesF gomment fire pour ller d9une pge vers une utre c l9ide de liens prdi 3 hns e hpitreD nous llons justement pprendre rer des liens entre nos pgesF te suppose que hun d9entre vous sit e qu9est un lien X il s9git d9un texte sur lequel on peut liquer pour se rendre sur une utre pgeF yn peut fire un lien d9une pge a.html vers une pge b.htmlD mis on peut ussi fire un lien vers un utre site @pr exempleD http://www.siteduzero.comAF hns les deux sD nous llons voir que le fontionnement est le mmeF

43

CHAPITRE 4.

CRER DES LIENS

Un lien vers un autre site

Il est facile de reconnatre les liens sur une page : ils sont crits d'une faon dirente (par dfaut, en bleu et souligns) et un curseur en forme de main apparat lorsqu'on pointe dessus. Je vous propose d'essayer de coder le lien qui amne vers le Site du Zro, comme la gure 4.1.

Figure 4.1  Lien vers le Site du Zro

Pour faire un lien, la balise que nous allons utiliser est trs simple retenir : <a>. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire. Par exemple, le code ci-dessous est un lien qui amne vers le Site du Zro, situ l'adresse http://www.siteduzero.com :
1

<a href = " http :// www . siteduzero . com " > Site du Z ro </ a >

Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment reproduire l'exemple de la gure 4.1 :
1

<p > Bonjour . Souhaitez - vous visiter le <a href = " http :// www . siteduzero . com " > Site du Z ro </a > ? < br / > C ' est un bon site ! ; -) </ p >

r dfutD le lien s90he en leu soulignF i vous vez dj ouvert l pgeD le lien s90he en violetF xous verrons omment hnger ette pprene lorsque nous tudierons le gF
Si vous voulez faire un lien vers un autre site, il sut donc de copier son adresse (on parle d'URL) en http://. Notez que certains liens commencent parfois par https:// (sites scuriss) ou d'autres prxes (ftp://,. . .).

i vous fites un lien vers un site qui omporte une dresse un peu izrre ve des 8D omme X http://www.site.com/?data=15&name=mateo21D vous devrez rempler tous les  8 pr  8mp Y dns votre lien omme ei X http://www.site.com/?data=15&amp;name=mateo21F ous ne verrez ps l di'reneD mis el est nessire pour voir une pge we orretement onstruite en rwvSF
Les liens que nous venons de voir sont appels liens absolus car on indique l'adresse complte. Nous allons maintenant voir que l'on peut crire les liens d'une faon un peu dirente, ce qui va nous tre utile pour faire des liens entre les pages de notre site. 44

UN LIEN VERS UNE AUTRE PAGE DE SON SITE

Un lien vers une autre page de son site

Nous venons d'apprendre crer des liens vers des sites existants. Mais je suis sr que vous aimeriez faire des liens entre les direntes pages de votre site, non ?

yuiD justementD omment je fis pour fire un lien vers une utre pge de mon site c te ne onnis ps son dresse en http://...D je ommene peine rer mon site l 3 te n9i ps d9dresseF
En eet, pour le moment, vous tes en train de crer votre site sur votre ordinateur. Vous tes le seul pouvoir le voir et il n'a pas encore  d'adresse web  qui commence en http:// comme la plupart des sites. Heureusement, cela ne va pas nous empcher de travailler.

Deux pages situes dans un mme dossier

Pour commencer, nous allons crer deux chiers correspondant deux pages HTML direntes. Comme je suis trs inspir, je vous propose de les appeler page1.html et page2.html. Nous aurons donc ces deux chiers sur notre disque dans le mme dossier (gure 4.2).

Figure 4.2  Plusieurs chiers HTML dans un mme dossier

Comment faire un lien de la page 1 vers la page 2, sans avoir d'adresse en http:// ? En fait, c'est facile : si les deux chiers sont situs dans le mme dossier, il sut d'crire comme cible du lien le nom du chier vers lequel on veut amener. Par exemple : <a href="page2.html">. On dit que c'est un lien relatif. Voici le code que nous allons utiliser dans nos chiers page1.html et page2.html. 45

CHAPITRE 4.

CRER DES LIENS

page1.html
1

<p > Bonjour . Souhaitez - vous consulter <a href = " page2 . html " > la page 2 </ a > ? </ p >

page2.html

La page 2 (page d'arrive) achera simplement un message pour indiquer que l'on est bien arriv sur la page 2 :
1

< h1 > Bienvenue sur la page 2 ! </ h1 >

Deux pages situes dans des dossiers dirents

Les choses se corsent un petit peu si les pages sont situes dans des dossiers dirents. Idalement, elles ne devraient pas tre trop loin l'une de l'autre (dans un sous-dossier par exemple). Imaginons que page2.html se trouve dans un sous-dossier appel contenu, comme la gure 4.3.

Figure 4.3  Le chier page2.html se trouve l'intrieur du dossier contenu

Dans ce cas de gure, le lien doit tre rdig comme ceci :
1

<a href = " contenu / page2 . html " >

S'il y avait plusieurs sous-dossiers, on crirait ceci :

1

<a href = " contenu / autredossier / page2 . html " >

it si le (hier ne se trouve ps dns un sousEdossier mis dns un dossier  prent D on fit omment c
46

UN LIEN VERS UNE ANCRE

Si votre chier cible est plac dans un dossier qui se trouve  plus haut  dans l'arborescence, il faut crire deux points comme ceci :
1

<a href = " ../ page2 . html " >

Rsum en images
Les liens relatifs ne sont pas bien compliqus utiliser une fois qu'on a compris le principe. Il sut de regarder dans quel  niveau de dossier  se trouve votre chier cible pour savoir comment crire votre lien. La gure 4.4 fait la synthse des dirents liens relatifs possibles.

Figure 4.4  Les dirents liens relatifs

Un lien vers une ancre

Une ancre est une sorte de point de repre que vous pouvez mettre dans vos pages HTML lorsqu'elles sont trs longues. En eet, il peut alors tre utile de faire un lien amenant plus bas dans la mme page pour que le visiteur puisse sauter directement la partie qui l'intresse. Pour crer une ancre, il sut de rajouter l'attribut id une balise qui va alors servir de repre. Ce peut tre n'importe quelle balise, un titre par exemple. Utilisez l'attribut 47

CHAPITRE 4.

CRER DES LIENS

id pour donner un nom l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :
1

< h2 id = " mon_ancre " > Titre </ h2 >

Ensuite, il sut de crer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dise (#) suivi du nom de l'ancre. Exemple :
1

<a href = " # mon_ancre " > Aller vers l ' ancre </ a >

Normalement, si vous cliquez sur le lien, cela vous amnera plus bas dans la mme page ( condition que la page comporte susamment de texte pour que les barres de dlement se dplacent automatiquement). Voici un exemple de page comportant beaucoup de texte et utilisant les ancres (j'ai mis n'importe quoi dans le texte pour remplir ) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< h1 > Ma grande page </ h1 > <p > Aller directement la partie traitant de : < br / > <a href = " # cuisine " > La cuisine </ a > < br / > <a href = " # rollers " > Les rollers </ a > < br / > <a href = " # arc " > Le tir l ' arc </a > < br / >

</ p > < h2 id = " cuisine " > La cuisine </ h2 >

<p > ... ( beaucoup de texte ) ... </ p > < h2 id = " rollers " > Les rollers </ h2 > <p > ... ( beaucoup de texte ) ... </ p > < h2 id = " arc " > Le tir l ' arc </ h2 > <p > ... ( beaucoup de texte ) ... </ p >

S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de texte, soit rduire la taille de la fentre de votre navigateur pour faire apparatre les barres de dlement sur le ct.

v9ttriut id sert donner un nom  unique une liseD pour s9en servir de repreF itD royezEmoiD vous n9vez ps (ni d9entendre prler de et ttriutF siD on s9en sert pour fire un lien vers une nre misD en gD il nous ser trs utile pour  reprer une lise priseD vous verrezF vitez ependnt de rer des id ve des espes ou des rtres spiuxD utilisez simplementD dns l mesure du possileD des lettres et hi'res pour que l vleur soit reonnue pr tous les nvigteursF
48

CAS PRATIQUES D'UTILISATION DES LIENS

Lien vers une ancre situe dans une autre page

Alors l je vous prviens, on va faire le Mgamix ! L'ide, c'est de faire un lien qui ouvre une autre page ET qui amne directement une ancre situe plus bas sur cette page. En pratique c'est assez simple faire : il sut de taper le nom de la page, suivi d'un dise (#), suivi du nom de l'ancre. Par exemple : <a href="ancres.html#rollers"> . . . vous amnera sur la page ancres.html, directement au niveau de l'ancre appele rollers. Voici une page qui contient trois liens, chacun amenant vers une des ancres de la page de l'exemple prcdent :
1 2 3 4 5 6 7

< h1 > Le M gamix </ h1 > <p > Rendez - vous quelque part sur une autre page : <br / > <a href = " ancres . html # cuisine " > La cuisine </ a > < br / > <a href = " ancres . html # rollers " > Les rollers </ a > < br / > <a href = " ancres . html # arc " > Le tir l ' arc </ a > < br / > </ p >

Cas pratiques d'utilisation des liens

Je vais essayer de vous montrer ici quelques cas pratiques d'utilisation des liens. Par exemple, saviez-vous qu'il est trs facile de faire des liens qui lancent un tlchargement ? Qui crent un nouvel e-mail ? Qui ouvrent une nouvelle fentre ? Non ? Eh bien nous allons voir tout cela ici.

Un lien qui ache une infobulle au survol

Vous pouvez utiliser l'attribut title qui ache une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut est facultatif. Vous aurez un rsultat ressemblant la gure 4.5.

Figure 4.5  Une infobulle

La bulle d'aide peut tre utile pour informer le visiteur avant mme qu'il n'ait cliqu sur le lien. Voici comment reproduire ce rsultat :
1

<p > Bonjour . Souhaitez - vous visiter le <a href = " http :// www . siteduzero . com " title = " R serv aux d butants " > Site du Z ro </ a > ? </ p >

49

CHAPITRE 4.

CRER DES LIENS

Un lien qui ouvre une nouvelle fentre

Il est possible de  forcer  l'ouverture d'un lien dans une nouvelle fentre. Pour cela, on rajoutera target="_blank" la balise <a> :
1

<p > Bonjour . Souhaitez - vous visiter le <a href = " http :// www . siteduzero . com " target = " _blank " > Site du Z ro </ a > ? < br / > Le site s ' affichera dans une autre fen tre . </ p >

elon l on(gurtion du nvigteurD l pge s90her dns une nouvelle fentre ou un nouvel ongletF ous ne pouvez ps hoisir entre l9ouverture d9une nouvelle fentre ou d9un nouvel ongletF xotez ependnt qu9il est donseill d9user de ette tehnique r elle perture l nvigtionF ve visiteur luiEmme peut dider s9il veut ouvrir le lien dns une nouvelle fentreF sl fer gli sur le lien pour ouvrir dns Maj C une nouvelle fentre ou Ctrl C gli pour ouvrir dns un nouvel ongletF

Un lien pour envoyer un e-mail

Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de type mailto. Rien ne change au niveau de la balise, vous devez simplement modier la valeur de l'attribut href comme ceci :
1

<p > <a href = " mailto : votrenom@bidule . com " > Envoyez - moi un e - mail ! </ a > </ p >

Il sut donc de faire commencer le lien par mailto: et d'crire l'adresse e-mail o on peut vous contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prt tre envoy votre adresse e-mail.

Un lien pour tlcharger un chier

Beaucoup d'entre vous se demandent comment cela se passe pour le tlchargement d'un chier. . . En fait, il faut procder exactement comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du chier tlcharger. Par exemple, supposez que vous vouliez faire tlcharger monfichier.zip. Placez simplement ce chier dans le mme dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce chier :
1

<p > <a href = " monfichier . zip " >T l charger le fichier </ a > </ p >

C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web acher, va lancer la procdure de tlchargement lorsqu'on cliquera sur le lien. 50

CAS PRATIQUES D'UTILISATION DES LIENS

En rsum
 Les liens permettent de changer de page et sont, par dfaut, crits en bleu et souligns.  Pour insrer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la page cible. Exemple : <a href="http://www.siteduzero.com">.  On peut faire un lien vers une autre page de son site simplement en crivant le nom du chier : <a href="page2.html">.  Les liens permettent aussi d'amener vers d'autres endroits sur la mme page. Il faut crer une ancre avec l'attribut id pour  marquer  un endroit dans la page, puis faire un lien vers l'ancre comme ceci : <a href="#ancre">.

51

CHAPITRE 4.

CRER DES LIENS

52

Chapitre

5
Dicult :

Les images

nsrer une imge dns une pge we c ous llez voirD 9est d9une filit donerE tnteF F F in(n presqueF sl existe di'rents formats d9imge que l9on peut utiliser sur des sites weD et on ne doit ps les hoisir u hsrdF in e'etD les imges sont prfois volumineuses tlhrgerD e qui rlentit le temps de hrgement de l pge @euoup plus que le texte 3AF our fire en sorte que vos pges restent lisiles et rpides tlhrgerD suivez don tivement mes onseils 3

53

CHAPITRE 5.

LES IMAGES

Les dirents formats d'images

Savez-vous ce qu'est un format d'image ? Quand vous avez une image  entre les mains , vous avez la possibilit de l'enregistrer dans plusieurs  formats  dirents. Le poids (en Ko, voire en Mo) de l'image sera plus ou moins lev selon le format choisi et la qualit de l'image va changer. Par exemple, le logiciel de dessin Paint (mme si c'est loin d'tre le meilleur) vous propose de choisir entre plusieurs formats lorsque vous enregistrez une image (gure 5.1).

Figure 5.1  Dirents formats d'image proposs par Paint

Certains formats sont plus adapts que d'autres selon l'image (photo, dessin, image anime. . .). Notre but ici est de faire le tour des dirents formats utiliss sur le Web pour que vous les connaissiez et sachiez choisir celui qui convient le mieux votre image. Rassurez-vous, il n'y a pas beaucoup de formats dirents, cela ne sera donc pas bien long. Toutes les images diuses sur Internet ont un point commun : elles sont compresses. Cela veut dire que l'ordinateur fait des calculs pour qu'elles soient moins lourdes et donc plus rapides charger.

Le JPEG
Les images au format JPEG (Joint Photographic Expert Group ) sont trs rpandues sur le Web. Ce format est conu pour rduire le poids des photos (c'est--dire la taille du chier associ), qui peuvent comporter plus de 16 millions de couleurs direntes. La gure 5.2 est une photo enregistre au format JPEG. Les images JPEG sont enregistres avec l'extension .jpg ou .jpeg. Notez que le JPEG dtriore un peu la qualit de l'image, d'une faon gnralement imperceptible. C'est ce qui le rend si ecace pour rduire le poids des photos. Quand il s'agit d'une photo, on ne peut gnralement pas dtecter la perte de qualit. Par contre, si ce n'est pas une photo, vous risquez de voir l'image un peu  baver . Dans ce cas, il vaut mieux utiliser le format PNG. 54

LES DIFFRENTS FORMATS D'IMAGES

Figure 5.2  Une photo de montagne en JPEG

Le PNG
Le format PNG (Portable Network Graphics ) est le plus rcent de tous. Ce format est adapt la plupart des graphiques (je serais tent de dire  tout ce qui n'est pas une photo ). Le PNG a deux gros avantages : il peut tre rendu transparent et il n'altre pas la qualit de l'image. Le PNG a t invent pour concurrencer un autre format, le GIF, l'poque o il fallait payer des royalties pour pouvoir utiliser des GIF. Depuis, le PNG a bien volu et c'est devenu le format le plus puissant pour enregistrer la plupart des images. Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image :  PNG 8 bits : 256 couleurs ;  PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG). La gure 5.3 est une image PNG en 24 bits, reprsentant la clbre mascotte Zozor du Site du Zro.

Figure 5.3  Zozor en PNG

55

CHAPITRE 5.

LES IMAGES

ne vieille version d9snternet ixplorer @siTA ne peut ps 0her orretement les imges xq PR its trnsprentesF ge nvigteur tend tre de moins en moins utilisD mis grdez qund mme ette informtion en tteF eu fitD si le xq PR its peut 0her utnt de ouleurs qu9une imge tiqD et qu9en plus il peut tre rendu trnsprent sns modi(er l qulit de l9imgeF F F quel est l9intrt du tiq c
La compression du JPEG est plus puissante sur les photos. Une photo enregistre en JPEG se chargera toujours beaucoup plus vite que si elle tait enregistre en PNG. Je vous conseille donc toujours de rserver le format JPEG aux photos.

Le GIF
C'est un format assez vieux, qui a t nanmoins trs utilis (et qui reste trs utilis par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont gnralement plus lgres et la transparence est de meilleure qualit. Je vous recommande donc d'utiliser le PNG autant que possible. Le format GIF est limit 256 couleurs (alors que le PNG peut aller jusqu' plusieurs millions de couleurs). Nanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut tre anim.  Un GIF anim Code web : 280031 

Il existe un format adapt chaque image

Si on rsume, voici quel format adopter en fonction de l'image que vous avez :  Une photo : utilisez un JPEG.  N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits ou ventuellement un GIF.  N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.  Une image anime : utilisez un GIF anim.

Les erreurs viter

Bannissez les autres formats
Les autres formats non cits ici, comme le format BITMAP (*.bmp) sont bannir car bien souvent ils ne sont pas compresss, donc trop gros. Ils ne sont pas du tout adapts au Web. On peut en mettre sur son site mais le chargement sera vraiment extrmement 56

INSRER UNE IMAGE

long !

Choisissez bien le nom de votre image

Si vous voulez viter des problmes, prenez l'habitude d'enregistrer vos chiers avec des noms en minuscules, sans espace ni accent, par exemple : mon_image.png. Vous pouvez remplacer les espaces par le caractre underscore ( _ ) comme je l'ai fait ici.

Insrer une image

Revenons maintenant au code HTML pour dcouvrir comment placer des images dans nos pages web !

Insertion d'une image

Quelle est la fameuse balise qui va nous permettre d'insrer une image ? Il s'agit de. . . <img /> ! C'est une balise de type orpheline (comme <br />). Cela veut dire qu'on n'a pas besoin de l'crire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici. En eet, nous n'avons pas besoin de dlimiter une portion de texte, nous voulons juste insrer une image un endroit prcis. La balise doit tre accompagne de deux attributs obligatoires :  src : il permet d'indiquer o se trouve l'image que l'on veut insrer. Vous pouvez soit mettre un chemin absolu (ex. : http://www.site.com/fleur.png), soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier images, vous devrez taper : src="images/fleur.png"  alt : cela signie  texte alternatif . On doit toujours indiquer un texte alternatif l'image, c'est--dire un court texte qui dcrit ce que contient l'image. Ce texte sera ach la place de l'image si celle-ci ne peut pas tre tlcharge (cela arrive), ou dans les navigateurs de personnes handicapes (non-voyants) qui ne peuvent malheureusement pas  voir  l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour la eur, on mettrait par exemple : alt="Une
fleur".

Les images doivent se trouver obligatoirement l'intrieur d'un paragraphe (<p></p>). Voici un exemple d'insertion d'image :
1 2

<p >

3 4

</ p >

Voici une photo que j ' ai prise lors de mes derni res vacances la montagne : < br / > < img src = " images / montagne . jpg " alt = " Photo de montagne " / >

57

CHAPITRE 5.

LES IMAGES

Bref, l'insertion d'image est quelque chose de trs facile pour peu qu'on sache indiquer o se trouve l'image, comme on avait appris le faire avec les liens. La plus grosse  dicult  (si on peut appeler cela une dicult) consiste choisir le bon format d'image. Ici, c'est une photo donc c'est videmment le format JPEG qu'on utilise.

te le rpte X vitez tout prix les entsD mjusules et espes dns vos noms de (hiers et de dossiersF oii un hemin qui v poser prolme X "Images du site/Image toute bte.jpg"F sl fuE drit supprimer les espes @ou les rempler pr le symole  AD supprimer les ents et tout mettre en minusules omme ei X "images_du_site/image_toute_bete.jpg"F hez don queD si votre imge ne s90he psD 9est trs ertinement pre que le hemin est inE orret 3 impli(ez u mximum vos noms de (hiers et de dossiersD et tout ir ienF

Ajouter une infobulle

L'attribut permettant d'acher une bulle d'aide est le mme que pour les liens : il s'agit de title. Cet attribut est facultatif (contrairement alt). Voici ce que cela peut donner :
1 2

<p >

</ p >

Voici une photo que j ' ai prise vacances la montagne : < br < img src = " images / montagne . jpg " title = "C ' est beau les Alpes

lors de mes derni res /> alt = " Photo de montagne " quand m me ! " / >

Survolez la photo avec la souris pour voir l'infobulle apparatre.

Miniature cliquable
Si votre image est trs grosse, il est conseill d'en acher la miniature sur votre site. Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent acher l'image en taille originale. Il existe des millions de logiciels permettant de crer des miniatures d'images. J'utilise personnellement Easy Thumbnails. Je vais ainsi disposer de deux versions de ma photo, comme la gure 5.4) : la miniature et l'image d'origine. Easy Thumbnails Code web : 663893  Je les place toutes les deux dans un dossier appel par exemple img. J'ache la version montagne_mini.jpg sur ma page et je fais un lien vers montagne.jpg pour que l'image agrandie s'ache lorsqu'on clique sur la miniature. Voici le code HTML que je vais utiliser pour cela : 58


LES FIGURES

Figure 5.4  La miniature et son image d'origine

1 2

<p >

</ p >

Vous souhaitez voir l ' image dans sa taille d ' origine ? Cliquez dessus ! < br / > <a href = " img / montagne . jpg " > < img src = " img / montagne_mini . jpg " alt = " Photo de montagne " title = " Cliquez pour agrandir " / > </ a >

rfoisD ertins nvigteurs hoisissent d90her un dre leu @ou violetA ps trs esthtique utour de votre imge liquleF reureusementD nous pourrons retirer e dre dns peu de temps gre u gF

Les gures
Au cours de la lecture de ce livre, vous avez dj rencontr plusieurs fois des gures. Ce sont des lments qui viennent enrichir le texte pour complter les informations de la page. Les gures peuvent tre de dirents types :  images ;  codes source ;  citations ;  etc. Bref, tout ce qui vient illustrer le texte est une gure. Nous allons ici nous intresser aux images mais, contrairement ce qu'on pourrait croire, les gures ne sont pas forcment des images : un code source aussi illustre le texte.

Cration d'une gure

Reprenons par exemple cette capture d'cran du premier chapitre, reprsente la gure 5.5. En HTML5, on dispose de la balise <figure>. Voici comment on pourrait l'utiliser :
1

< figure >

59

CHAPITRE 5.

LES IMAGES

Figure 5.5  Le logiciel Bloc-Notes

2 3

< img src = " images / blocnotes . png " alt = " Bloc - Notes " / > </ figure >

Une gure est le plus souvent accompagne d'une lgende. Pour ajouter une lgende, utilisez la balise <figcaption> l'intrieur de la balise <figure>, comme ceci :
1 2 3 4

< figure > < img src = " images / blocnotes . png " alt = " Bloc - Notes " / > < figcaption >Le logiciel Bloc - Notes </ figcaption > </ figure >

Bien comprendre le rle des gures

Un peu plus tt dans ce chapitre, je vous ai dit que les images devaient tre situes dans des paragraphes (places l'intrieur d'une balise <p></p>). Ce n'est pas tout fait vrai. Si vous faites de votre image une gure, l'image peut tre situe en-dehors d'un paragraphe.
1

<p > Connaissez - vous le logiciel Bloc - Notes ? On peut faire des sites web avec ! </ p > < figure > < img src = " images / blocnotes . png " alt = " Bloc - Notes " / > < figcaption >Le logiciel Bloc - Notes </ figcaption > </ figure >

2 3 4 5 6

60

LES FIGURES

te ne vois ps vriment de hngementF und doisEje pler mon imge dns un prgrphe et qund doisEje l pler dns une (gure c
Bonne question ! Tout dpend de ce que votre image apporte au texte :  Si elle n'apporte aucune information (c'est juste une illustration pour dcorer) : placez l'image dans un paragraphe.  Si elle apporte une information : placez l'image dans une gure. La balise <figure> a un rle avant tout smantique. Cela veut dire qu'elle indique l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne comprhension du texte. Cela peut permettre un programme de rcuprer toutes les gures du texte et de les rfrencer dans une table des gures, par exemple. Enn, sachez qu'une gure peut trs bien comporter plusieurs images. Voici un cas o cela se justie :
1 2

3 4 5 6

< figure > < img src = " images / internetexplorer . png " alt = " Logo Internet Explorer " / > < img src = " images / firefox . png " alt = " Logo Mozilla Firefox " / > < img src = " images / chrome . png " alt = " Logo Google Chrome " / > < figcaption > Logos des diff rents navigateurs </ figcaption > </ figure >

En rsum
 Il existe plusieurs formats d'images adaptes au Web :  JPEG : pour les photos ;  PNG : pour toutes les autres illustrations ;  GIF : similaire au PNG, plus limit en nombre de couleurs mais qui peut tre anim.  On insre une image avec la balise <img />. Elle doit obligatoirement comporter au moins ces deux attributs : src (nom de l'image) et alt (courte description de l'image).  Si une image illustre le texte (et n'est pas seulement dcorative), il est conseill de la placer au sein d'une balise <figure>. La balise <figcaption> permet d'crire la lgende de l'image.

61

CHAPITRE 5.

LES IMAGES

62

Deuxime partie
Les joies de la mise en forme avec CSS

63

Chapitre

6
Dicult :

Mettre en place le CSS

prs voir pss toute une premire prtie du ours ne trviller que sur le rwvD nous llons mintennt douvrir le g que j9vis volontirement mis l9rtF ve g n9est ps plus ompliqu que le rwvF sl vient le omplter pour vous ider mettre en forme votre pge weF hns e premier hpitre sur le gD nous llons voir l thorie sur le g X qu9estEe que 9est c quoi el ressemleEtEil c y estEe qu9on rit du ode g c ges spets thoriques ne sont ps ien ompliqus mis vous devez oligtoirement les onntre r 9est l se du gF g9est d9illeurs l seule hose que je vous demnderi de retenir pr ur en gD vous pourrez retrouver le reste dns le mmo en nnexeF ellezD ne trnons psD je vois que vous rlez d9imptiene 3

65

CHAPITRE 6.

METTRE EN PLACE LE CSS

La petite histoire du CSS

Je vous avais avertis ds le dbut de ce cours : nous allons apprendre deux langages. Nous avons dj bien entam notre dcouverte du HTML, mme s'il reste encore de nombreuses choses apprendre (nous y reviendrons dans quelques chapitres). En revanche, il est temps maintenant de nous intresser au CSS. CSS (Cascading Style Sheets ), c'est cet autre langage qui vient complter le HTML. Vous vous souvenez de son rle ? Grer la mise en forme de votre site.

Petit rappel : quoi sert CSS ?

CSS ? C'est lui qui vous permet de choisir la couleur de votre texte. Lui qui vous permet de slectionner la police utilise sur votre site. Lui encore qui permet de dnir la taille du texte, les bordures, le fond. . . Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit gauche et occupe telle largeur, que l'en-tte de mon site soit cal en haut et qu'il soit toujours visible, etc. Souvenez-vous de ce petit comparatif que nous avions vu ds le premier chapitre (gure 6.1).

Figure 6.1  La mme page HTML, sans et avec CSS (www.csszengarden.com)

Grce au HTML, nous avons pu rdiger le contenu de notre site mais il est brut de dcorage. Le CSS vient complter ce code pour mettre en forme tout cela et donner 66

LA PETITE HISTOIRE DU CSS

au contenu l'apparence que l'on souhaite.

CSS : des dbuts diciles

Il faut savoir qu'aux dbuts du Web, CSS n'existait pas. En fait, il n'y avait initialement que le langage HTML. Le HTML est n en 1991 et CSS en 1996. Alors, vous vous dites srement : comment faisait-on la mise en forme de 1991 1996 ? Eh bien, uniquement en HTML ! Il y avait en eet des balises HTML ddies la mise en forme. <font color="#aab1c3">, par exemple, permettait de dnir la couleur du texte. Cependant, les pages HTML commenaient devenir assez complexes. Il y avait de plus en plus de balises et c'tait un joyeux mlange entre le fond et la forme, qui rendait la mise jour des pages web de plus en plus complexe. C'est pour cela que l'on a cr le langage CSS. Cependant, le CSS n'a pas t adopt immdiatement par les webmasters, loin de l. Il fallait se dfaire de certaines mauvaises habitudes et cela a pris du temps. Encore aujourd'hui, on peut trouver des sites web avec des balises HTML de mise en forme, anciennes et obsoltes, comme <font> !

CSS : la prise en charge des navigateurs

Tout comme le HTML, le CSS a volu. Je vous avais indiqu qu'il y avait quatre versions importantes de CSS :  CSS 1 ;  CSS 2.0 ;  CSS 2.1 ;  CSS 3.

in fitD l version g Q n9est ps enore totlement (nlise @e n9est ps enore une version o0ielleAF gependntD elle est ien vne et ujourd9hui dj ien prise en hrge pr de nomreux nvigteursD e qui fit qu9on peut dj s9en servirF sl serit dommge de psser t r g Q pporte de nomreuses fontionnlits g @leur nomre doule pr rpport g PFI 3AF xous nous serons don dns e ours sur g QD qui reprend et omplte l pluprt des fontionnlits de g PFIF
Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment acher la page. Au dbut des annes 2000, Internet Explorer tait le navigateur le plus rpandu mais sa gestion du CSS est longtemps reste assez mdiocre (pour ne pas dire carrment mauvaise). C'tait la grande poque de la version 6 (IE6), hlas encore utilise aujourd'hui par une petite partie des internautes (heureusement, cette proportion tend diminuer). 67

CHAPITRE 6.

METTRE EN PLACE LE CSS

Depuis, de nombreux navigateurs sont arrivs et ont chahut Internet Explorer : Mozilla Firefox bien sr, mais aussi Google Chrome. Et je ne vous parle pas du succs des Mac et iPhone avec leur navigateur Safari. Cela a incit Microsoft ragir et publier (aprs une longue priode d'inactivit) IE 7, puis IE 8 et IE 9. On parle dj de IE 10.

fonD ton ours d9histoireD 9est ien joli mis en quoi el me onerneEtEil ujourd9hui c
Que faut-il retenir de tout cela ? Que les navigateurs ne connaissent pas toutes les proprits CSS qui existent. Plus le navigateur est vieux, moins il connat de fonctionnalits CSS. Je vais vous prsenter dans ce cours un certain nombre de fonctionnalits de CSS qui ne marchent pas forcment sur les navigateurs les plus vieux. Je ne peux pas l'viter, c'est comme cela : aucun navigateur ne connat parfaitement toutes les fonctionnalits CSS de toute faon ! Au pire, si le navigateur ne connat pas une proprit CSS, il l'ignore et ne met pas en forme, mais cela ne fait pas planter votre page : celle-ci sera donc toujours lisible. Je vous recommande fortement de mettre dans vos favoris les sites www.caniuse.com et www.normansblog.de qui proposent des tables de compatibilit des fonctionnalits de HTML et CSS sur dirents navigateurs (et sur leurs direntes versions). Regardez en particulier les tables de compatibilit pour CSS de www.caniuse.com (gure 6.2).

www.caniuse.com Code web : 264222 



Figure 6.2  Table de compatibilit CSS du site www.caniuse.com

Code web : 697092 

www.normansblog.de

O crit-on le CSS ?
Vous avez le choix car on peut crire du code en langage CSS trois endroits dirents :  dans un chier .css (mthode la plus recommande ) ;  dans l'en-tte <head> du chier HTML ; 68

O CRIT-ON LE CSS ?

 directement dans les balises du chier HTML via un attribut style (mthode la moins recommande ). Je vais vous prsenter ces trois mthodes mais sachez d'ores et dj que la premire. . . est la meilleure.

Dans un chier .css (recommand)

Comme je viens de vous le dire, on crit le plus souvent le code CSS dans un chier spcial ayant l'extension .css (contrairement aux chiers HTML qui ont l'extension .html). C'est la mthode la plus pratique et la plus souple. Cela nous vite de tout mlanger dans un mme chier. J'utiliserai cette technique dans toute la suite de ce cours. Commenons pratiquer ds maintenant ! Nous allons partir du chier HTML suivant :
1 2 3 4 5 6 7 8 9 10 11 12 13

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8" / > < link rel = " stylesheet " href = " style . css " / > < title > Premiers tests du CSS </ title > </ head > < body > < h1 > Mon super site </ h1 > <p > Bonjour et bienvenue sur mon site ! </ p > <p > Pour le moment , mon site est un peu < em > vide </ em >. Patientez encore un peu ! </ p > </ body > </ html >

14 15

Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce chier HTML est associ un chier appel style.css et charg de la mise en forme. Enregistrez ce chier sous le nom que vous voulez (par exemple page.html). Pour le moment, rien d'extraordinaire part la nouvelle balise que nous avons ajoute. Maintenant, crez un nouveau chier vide dans votre diteur de texte (par exemple Notepad++) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout l'heure ce qu'il veut dire) :
1 2 3 4

p { }

color : blue ;

69

CHAPITRE 6.

METTRE EN PLACE LE CSS

our tiver l olortion du ode dns xotepdCCD pssez pr les menus Langage > C > CSSF
Enregistrez le chier en lui donnant un nom qui se termine par .css, comme style.css. Placez ce chier .css dans le mme dossier que votre chier .html. Dans Notepad++, vous devriez observer quelque chose de similaire la gure 6.3.

Figure 6.3  Fichiers HTML et CSS dans Notepad++

Dans votre explorateur de chiers, vous devriez les voir apparatre cte cte. D'un ct le .html, de l'autre le .css, comme la gure 6.4. Ouvrez maintenant votre chier page.html dans votre navigateur pour le tester, comme vous le faites d'habitude. Regardez, c'est magique : vos paragraphes sont crits en bleu, comme dans la gure 6.5 !

sl est inutile d9ouvrir diretement le (hier style.css dns le nvigteurF sl fut ouvrir le (hier page.html @il fer utomtiquement ppel u (hier style.cssAF

Dans l'en-tte <head> du chier HTML

Il existe une autre mthode pour utiliser du CSS dans ses chiers HTML : cela consiste insrer le code CSS directement dans une balise <style> l'intrieur de l'en-tte <head>. Voici comment on peut obtenir exactement le mme rsultat avec un seul chier .html 70

O CRIT-ON LE CSS ?

Figure 6.4  Fichiers HTML et CSS dans l'explorateur de chiers

Figure 6.5  Le texte est crit en bleu

71

CHAPITRE 6.

METTRE EN PLACE LE CSS

qui contient le code CSS (lignes 5 10) :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < style > p { color : blue ; } </ style > < title > Premiers tests du CSS </ title > </ head > < body > < h1 > Mon super site </ h1 > <p > Bonjour et bienvenue sur mon site ! </ p > <p > Pour le moment , mon site est un peu < em > vide </ em >. Patientez encore un peu ! </ p > </ body > </ html >

19 20

Testez, vous verrez que le rsultat est le mme.

Directement dans les balises (non recommand)

Dernire mthode, manipuler avec prcaution : vous pouvez ajouter un attribut style n'importe quelle balise. Vous insrerez votre code CSS directement dans cet attribut :
1 2 3 4 5 6 7 8 9 10 11

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < title > Premiers tests du CSS </ title > </ head > < body > < h1 > Mon super site </ h1 > <p style = " color : blue ; " > Bonjour et bienvenue sur mon site ! </ p > <p > Pour le moment , mon site est un peu < em > vide </ em >. Patientez encore un peu ! </ p > </ body > </ html >

12

13 14

Cette fois, seule le texte du premier paragraphe (ligne 11), dont la balise contient le code CSS, sera color en bleu (gure 6.6). 72

O CRIT-ON LE CSS ?

Figure 6.6  Le premier paragraphe est crit en bleu

Quelle mthode choisir ?

te trouve que l premire mthode que tu reommndes est plus omplique que les deux utres 3 ourquoi nous onseillesEtu de rer deux (hiersD j9tis ienD moiD ve juste un (hier .html 3
Je vous recommande fortement de prendre l'habitude de travailler avec la premire mthode parce que c'est celle utilise par la majorit des webmasters. . . Pourquoi ? Pour le moment, vous faites vos tests sur un seul chier HTML. Cependant, votre site sera plus tard constitu de plusieurs pages HTML, on est d'accord ? Imaginez : si vous placez le code CSS directement dans le chier HTML, il faudra copier ce code dans tous les chiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient crits en rouge et non en bleu, il faudra modier chaque chier HTML un un, comme le montre la gure 6.7.

Figure 6.7  Le code CSS est rpt dans chaque chier HTML
73

CHAPITRE 6.

METTRE EN PLACE LE CSS

Si vous travaillez avec un chier CSS externe, vous n'aurez besoin d'crire cette instruction qu'une seule fois pour tout votre site, comme le montre la gure 6.8.

Figure 6.8  Le code CSS est donn une fois pour toutes dans un chier CSS

Appliquer un style : slectionner une balise

Maintenant que nous savons o placer le code CSS, intressons-nous de plus prs ce code. Je vous ai donn, sans vous l'expliquer, un premier bout de code CSS :
1 2 3 4

p { }

color : blue ;

Dans un code CSS comme celui-ci, on trouve trois lments dirents :  Des noms de balises : on crit les noms des balises dont on veut modier l'apparence. Par exemple, si je veux modier l'apparence de tous les paragraphes <p>, je dois crire p.  Des proprits CSS : les  eets de style  de la page sont rangs dans des proprits. Il y a par exemple la proprit color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de proprits CSS et, comme je vous l'ai dit, je ne vous obligerai pas les connatre toutes par cur.  Les valeurs : pour chaque proprit CSS, on doit indiquer une valeur. Par exemple, pour la proprit color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc. Schmatiquement, une feuille de style CSS ressemble donc cela :
1 2 3 4

balise1 { propriete1 : valeur1 ; propriete2 : valeur2 ;

74

APPLIQUER UN STYLE : SLECTIONNER UNE BALISE

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

propriete3 : valeur3 ;

balise2 { propriete1 : propriete2 : propriete3 : propriete4 : }

valeur1 ; valeur2 ; valeur3 ; valeur4 ;

balise3 { propriete1 : valeur1 ; }

Vous reprez dans cet extrait de code les balises, proprits et valeurs dont je viens de vous parler. Comme vous le voyez, on crit le nom de la balise (par exemple h1) et on ouvre des accolades pour, l'intrieur, mettre les proprits et valeurs que l'on souhaite. On peut mettre autant de proprits que l'on veut l'intrieur des accolades. Chaque proprit est suivie du symbole  deux-points  ( : ) puis de la valeur correspondante. Enn, chaque ligne se termine par un point-virgule ( ; ). Je vous apprendrai de nombreuses proprits dans les chapitres suivants. Pour le moment, dans les exemples, on va juste changer la couleur pour s'entraner. Le code CSS que nous avons utilis jusqu'ici :
1 2 3 4

p { }

color : blue ;

. . . signie donc en franais :  Je veux que tous mes paragraphes soient crits en bleu. . Le rsultat est visible la gure 6.9. Essayez de changer le nom de la balise aecte par le code CSS. Par exemple, si j'cris h1, c'est le titre qui sera crit en bleu. Modiez votre chier style.css comme ceci :
1 2 3 4

h1 { }

color : blue ;

Maintenant, ouvrez nouveau votre page HTML (souvenez-vous, c'est la page HTML qu'on ouvre dans le navigateur, pas le chier CSS !) : vous devriez voir son titre s'acher en bleu (gure 6.10) ! 75

CHAPITRE 6.

METTRE EN PLACE LE CSS

Figure 6.9  Paragraphes crits en bleu

Figure 6.10  Titre crit en bleu

76

APPLIQUER UN STYLE : SLECTIONNER UNE BALISE

Appliquer un style plusieurs balises

Prenons le code CSS suivant :
1 2 3 4 5 6 7 8 9

h1 { } em { }

color : blue ;

color : blue ;

Il signie que nos titres <h1> et nos textes importants <em> doivent s'acher en bleu. Par contre, c'est un peu rptitif, vous ne trouvez pas ? Heureusement, il existe un moyen en CSS d'aller plus vite si les deux balises doivent avoir la mme prsentation. Il sut de combiner la dclaration en sparant les noms des balises par une virgule, comme ceci :
1 2 3 4

h1 , em { color : blue ; }

Le rsultat se trouve la gure 6.11.

Figure 6.11  Titre et texte important crits en bleu

Cela signie :  Je veux que le texte de mes <h1> et <em> soit crit en bleu . Vous pouvez indiquer autant de balises la suite que vous le dsirez. 77

CHAPITRE 6.

METTRE EN PLACE LE CSS

Des commentaires dans du CSS

Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront pas achs, ils servent simplement indiquer des informations pour vous, par exemple pour vous y retrouver dans un looong chier CSS. D'ailleurs, vous allez vous en rendre compte, en gnral le chier HTML est assez court et la feuille CSS assez longue (si elle contient tous les lments de style de votre site, c'est un peu normal). Notez qu'il est possible de crer plusieurs chiers CSS pour votre site si vous ressentez le besoin de sparer un peu votre code CSS (en fonction des direntes sections de votre site, par exemple). . . . De quoi on parlait dj ? Ah oui, les commentaires en CSS. Donc, pour faire un commentaire, c'est facile ! Tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire. Vos commentaires peuvent tre crits sur une ou plusieurs lignes. Par exemple :
1 2 3 4 5 6 7 8 9 10 11

/* style . css --------Par Mathieu Nebra */ p { }

color : blue ; /* Les paragraphes seront en bleu */

Il est possible que j'utilise les commentaires dans la suite du cours, pour vous donner des explications l'intrieur mme des chiers .css.

Appliquer un style : class et id

Ce que je vous ai montr jusqu'ici a quand mme un dfaut : cela implique par exemple que TOUS les paragraphes possdent la mme prsentation (ici, ils seront donc tous crits en bleu). Comment faire pour que certains paragraphes seulement soient crits d'une manire dirente ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je vous ai prsente un peu plus tt) mais, comme je vous l'ai dit, ce n'est pas recommand (il vaut mieux utiliser un chier CSS externe). Pour rsoudre le problme, on peut utiliser ces attributs spciaux qui fonctionnent sur toutes les balises :  l'attribut class ;  l'attribut id. Que les choses soient claires ds le dbut : les attributs class et id sont quasiment 78

APPLIQUER UN STYLE :

CLASS

ET

ID

identiques. Il y a seulement une petite dirence que je vous dvoilerai plus bas. Pour le moment, et pour faire simple, on ne va s'intresser qu' l'attribut class. Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.
1 2 3

< h1 class = " " > </ h1 > <p class = " " > </ p > < img class = " " / >

yui mis que metEon omme vleur l9ttriut class c

En fait, vous devez crire un nom qui sert identier la balise. Ce que vous voulez, du moment que le nom commence par une lettre. Par exemple, je vais associer la classe introduction mon premier paragraphe (ligne 12) :
1 2 3 4 5 6 7 8 9 10 11 12

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8" / > < link rel = " stylesheet " href = " style . css " / > < title > Premiers tests du CSS </ title > </ head > < body > < h1 > Mon super site </ h1 > <p class = " introduction " > Bonjour et bienvenue sur mon site ! </ p > <p > Pour le moment , mon site est un peu < em > vide </ em >. Patientez encore un peu ! </ p > </ body > </ html >

13

14 15

Maintenant que c'est fait, votre paragraphe est identi. Il a un nom : introduction. Vous allez pouvoir rutiliser ce nom dans le chier CSS pour dire :  Je veux que seules les balises qui ont comme nom 'introduction' soient aches en bleu . Pour faire cela en CSS, indiquez le nom de votre classe en commenant par un point, comme ci-dessous :
1 2 3 4

. introduction { color : blue ; }

Testez le rsultat : seul votre paragraphe appel introduction va s'acher en bleu (gure 6.12) ! 79

CHAPITRE 6.

METTRE EN PLACE LE CSS

Figure 6.12  Seul le premier paragraphe s'ache en bleu

it l9ttriut id lors c
Lui, il fonctionne exactement de la mme manire que class, un dtail prs : il ne peut tre utilis qu'une fois dans le code. Quel intrt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du JavaScript plus tard pour reconnatre certaines balises. D'ailleurs, nous avons dj vu l'attribut id dans le chapitre sur les liens (pour raliser des ancres). En pratique, nous ne mettrons des id que sur des lments qui sont uniques dans la page, comme par exemple le logo :
1

< img src = " images / logo . png " alt = " Logo du site " id = " logo " / >

Si vous utilisez des id, lorsque vous dnirez leurs proprits dans le chier CSS, il faudra faire prcder le nom de l'id par un dise (#) :
1 2 3 4

# logo { /* Indiquez les propri t s CSS ici */ }

Je ne vous propose pas de le tester, cela fonctionne exactement comme class.

i vous vous emmlez les pineux entre class et id retenez que deux lises peuvent voir le mme nom ve l9ttriut classF n nom d9id doit en revnhe tre unique dns l pge rwvF
80

APPLIQUER UN STYLE : LES SLECTEURS AVANCS

Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) certains mots qui, l'origine, ne sont pas entours par des balises. En eet, le problme de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Si, par exemple, je veux modier uniquement  bienvenue  dans le paragraphe suivant :
1

<p > Bonjour et bienvenue sur mon site ! </ p >

Cela serait facile faire s'il y avait une balise autour de  bienvenue  mais, malheureusement il n'y en a pas. Par chance, on a invent. . . la balise-qui-ne-sert--rien. En fait, on a invent deux balises dites universelles, qui n'ont aucune signication particulire (elles n'indiquent pas que le mot est important, par exemple). Il y a une dirence minime (mais signicative !) entre ces deux balises :  <span> </span> : c'est une balise de type inline, c'est--dire une balise que l'on place au sein d'un paragraphe de texte, pour slectionner certains mots uniquement. Les balises <strong> et <em> sont de la mme famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer  bienvenue .  <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la mme famille. Ces balises ont quelque chose en commun : elles crent un nouveau  bloc  dans la page et provoquent donc obligatoirement un retour la ligne. <div> est une balise frquemment utilise dans la construction d'un design, comme nous le verrons plus tard. Pour le moment donc, nous allons utiliser plutt la balise <span>. On la met autour de  bienvenue , on lui ajoute une classe (du nom qu'on veut), on cre le CSS et c'est gagn !
1

<p > Bonjour et < span class = " salutations " > bienvenue </ span > sur mon site ! </ p > . salutations { color : blue ; }

1 2 3 4

Vous pouvez voir le rsultat la gure 6.13.

Appliquer un style : les slecteurs avancs

En CSS, le plus dicile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit  slectionner ) les lments de la page modier, on utilise ce qu'on appelle des slecteurs. Vous en avez dj utilis quelques-uns un peu plus tt dans ce chapitre, rsumons-les pour commencer. 81

CHAPITRE 6.

METTRE EN PLACE LE CSS

Figure 6.13  Le mot  bienvenue  est crit en bleu

Les slecteurs que vous connaissez dj

Ces slecteurs, que nous avons vus prcdemment, sont de loin les plus couramment utiliss. Il faut les connatre par cur. Commenons par la base de la base :
1 2 3 4

p { }

. . . signie  Je veux toucher tous les paragraphes . Aprs, c'est vous de dire ce que vous faites ces paragraphes (vous les crivez en bleu, par exemple). Nous avons aussi vu :
1 2 3 4

h1 , em { }

. . . qui signie  Tous les titres et tous les textes importants . Nous avons slectionn deux balises d'un coup. Et enn, nous avons vu comment slectionner des balises prcises qui nous avons donn un nom grce aux attributs class et id :
1 2 3 4 5

. class { }

82

APPLIQUER UN STYLE : LES SLECTEURS AVANCS

6 7 8 9

# id { }

Vous savez quoi ? Il existe des dizaines d'autres faons de cibler des balises en CSS ! Nous n'allons pas toutes les voir car il y en a beaucoup et certaines sont complexes, mais voici dj de quoi vous permettre d'tre plus ecaces en CSS !

Les slecteurs avancs

* : slecteur universel
1 2 3 4

* { }

Slectionne toutes les balises sans exception. On l'appelle le slecteur universel.

A B : une balise contenue dans une autre

1 2 3 4

h3 em { }

Slectionne toutes les balises <em> situes l'intrieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balises. Exemple de code HTML correspondant :
1

< h3 > Titre avec < em > texte important </ em > </ h3 >

A + B : une balise qui en suit une autre

1 2 3 4

h3 + p { }

Slectionne la premire balise <p> situe aprs un titre <h3>. Exemple :

1 2 3

< h3 > Titre </ h3 > <p > Paragraphe </ p >

A[attribut] : une balise qui possde un attribut

83

CHAPITRE 6.

METTRE EN PLACE LE CSS

1 2 3 4

a [ title ] { }

Slectionne tous les liens <a> qui possdent un attribut title. Exemple :
1

<a href = " http :// site . com " title = " Infobulle " >

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

1 2 3 4

a [ title =" Cliquez ici "] { }

Idem, mais l'attribut doit en plus avoir exactement pour valeur  Cliquez ici . Exemple :
1

<a href = " http :// site . com " title = " Cliquez ici " >

A[attribut*="Valeur"] : une balise, un attribut et une valeur

1 2 3 4

a [ title *=" ici "] { }

Idem, l'attribut doit cette fois contenir dans sa valeur le mot  ici  (peu importe sa position). Exemple :
1

<a href = " http :// site . com " title = " Quelque part par ici " >

D'autres slecteurs existent !

Je ne vous ai prsent ici qu'une partie des slecteurs CSS mais sachez qu'il en existe beaucoup d'autres. Si vous voulez une liste complte, vous pouvez vous renseigner directement la source : sur le site du W3C ! C'est trs complet. Liste des slecteurs Code web : 733661  Sachez que nous dcouvrirons certains de ces autres slecteurs dans la suite de ce cours !


En rsum
 CSS est un autre langage qui vient complter le HTML. Son rle est de mettre en forme votre page web. 84

APPLIQUER UN STYLE : LES SLECTEURS AVANCS

 Il faut tre vigilant sur la compatibilit des navigateurs avec certaines fonctionnalits rcentes de CSS3. Quand un navigateur ne connat pas une instruction de mise en forme, il l'ignore simplement.  On peut crire le code CSS plusieurs endroits dirents, le plus conseill tant de crer un chier spar portant l'extension .css (exemple : style.css).  En CSS, on slectionne quelles portions de la page HTML on veut modier et on change leur prsentation avec des proprits CSS :
1 2 3 4 5

balise1 { propriete1 : valeur1 ; propriete2 : valeur2 ; }

 Il existe de nombreuses faons de slectionner la portion de la page que l'on veut mettre en forme. Par exemple, on peut viser :  toutes les balises d'un mme type, en crivant simplement leur nom (h1 par exemple) ;  certaines balises spciques, auxquelles on a donn des noms l'aide des attributs class ou id (.nomclasse ou #nomid) ;  uniquement les balises qui se trouvent l'intrieur d'autres balises (h3 em).  etc.

85

CHAPITRE 6.

METTRE EN PLACE LE CSS

86

Chapitre

7
Dicult :

Formatage du texte

ous rrivons mintennt un hpitre qui devrit euoup vous intresserF xonD le  formtge du texte n9 rien voir ve l destrution de toutes les donnes prE sentes sur votre disque dur 3 gel signi(e simplement que l9on v modi(er l9pprene du texte @on dit qu9on le  met en forme AF s de surprise prtiulire X nous sommes toujours dns le g et nous llons rutiliser e que nous venons d9pprendre dns le hpitre prdentF xous llons don trviller diretement u sein du (hier .css que nous vons rF ge hpitre v tre l9osion de douvrir de nomreuses proprits g X nous llons voir omment modi(er l tille du texteD hnger l polieD ligner le texteF F F

87

CHAPITRE 7.

FORMATAGE DU TEXTE

La taille
Pour modier la taille du texte, on utilise la proprit CSS font-size. Mais comment indiquer la taille du texte ? C'est l que les choses se corsent car plusieurs techniques vous sont proposes :  Indiquer une taille absolue : en pixels, en centimtres ou millimtres. Cette mthode est trs prcise mais il est conseill de ne l'utiliser que si c'est absolument ncessaire, car on risque d'indiquer une taille trop petite pour certains lecteurs.  Indiquer une taille relative : en pourcentage,  em  ou  ex , cette technique a l'avantage d'tre plus souple. Elle s'adapte plus facilement aux prfrences de taille des visiteurs.

Une taille absolue

Pour indiquer une taille absolue, on utilise gnralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc crire :
1

font - size : 16px ;

Les lettres auront une taille de 16 pixels, comme le montre la gure 7.1.

Figure 7.1  Une lettre de 16 pixels de hauteur

Voici un exemple d'utilisation (placez ce code dans votre chier .css) :
1 2 3 4 5 6 7 8

p { } h1 { }

font - size : 14px ; /* Paragraphes de 14 pixels */

font - size : 40px ; /* Titres de 40 pixels */

Et le rsultat est visible la gure 7.2.

i vous le souhitezD vous pouvez glement d(nir des tilles en entimtres ou millimtresF emplez  px pr  m ou  mm F ges units sont ependnt moins ien dptes ux rnsF
88

LA TAILLE

Figure 7.2  Direntes tailles de texte

Une valeur relative

C'est la mthode recommande car le texte s'adapte alors plus facilement aux prfrences de tous les visiteurs. Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple crire la taille avec des mots en anglais comme ceux-ci :  xx-small : minuscule ;  x-small : trs petit ;  small : petit ;  medium : moyen ;  large : grand ;  x-large : trs grand ;  xx-large : euh. . . gigantesque. Vous pouvez tester l'utilisation de ces valeurs dans votre code CSS :
1 2 3 4 5 6 7 8

p { } h1 { }

font - size : small ;

font - size : large ;

Bon, cette technique a un dfaut : il n'y a que sept tailles disponibles (car il n'y a que sept noms). Heureusement, il existe d'autres moyens. Ma technique prfre consiste indiquer la taille en  em .  Si vous crivez 1em, le texte a une taille normale.  Si vous voulez grossir le texte, vous pouvez inscrire une valeur suprieure 1, comme 1.3em.  Si vous voulez rduire le texte, inscrivez une valeur infrieure 1, comme 0.8em. 89

CHAPITRE 7.

FORMATAGE DU TEXTE

pites ttention X pour les nomres dimuxD il fut mettre un point et non une virguleF ous devez don rire  IFRem et non ps  IDRem 3
Exemple :
1 2 3 4 5 6 7 8

p { } h1 { }

font - size : 0 . 8em ;

font - size : 1 . 3em ;

D'autres units sont disponibles. Vous pouvez essayer le  ex  (qui fonctionne sur le mme principe que le em mais qui est plus petit de base) et le pourcentage (80%, 130%. . .).

La police
Ah. . . La police. . . On touche un point sensible. En eet, il se pose un problme : pour qu'une police s'ache correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la mme police que vous, son navigateur prendra une police par dfaut (une police standard) qui n'aura peut-tre rien voir avec ce quoi vous vous attendiez. La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire tlcharger automatiquement une police au navigateur. Je vous expliquerai dans un second temps comment faire cela.

Modier la police utilise

La proprit CSS qui permet d'indiquer la police utiliser est font-family. Vous devez crire le nom de la police comme ceci :
1 2 3 4

balise { font - family : police ; }

Seulement, pour viter les problmes si l'internaute n'a pas la mme police que vous, on prcise en gnral plusieurs noms de police, spars par des virgules :
1 2 3 4

balise { font - family : police1 , police2 , police3 , police4 ; }

90

LA POLICE

Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas, il passera la police3, et ainsi de suite. En gnral, on indique en tout dernier serif, ce qui correspond une police par dfaut (qui ne s'applique que si aucune autre police n'a t trouve).

sl existe ussi une utre polie pr dfut ppele sans-serifF v di'rene entre les deux est l prsene de petites pttes de liison en s des lettresD que l polie sans-serif n9 psF yuiD 9est sutilF
Oui, mais quelles sont les polices les plus courantes qu'on a le  droit  d'utiliser, me direz-vous ? Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :  Arial ;  Arial Black ;  Comic Sans MS ;  Courier New ;  Georgia ;  Impact ;  Times New Roman ;  Trebuchet MS ;  Verdana. La gure 7.3 vous montre quoi ressemblent ces polices.

Figure 7.3  Direntes polices

Ainsi, si j'cris :
1 2

p {

91

CHAPITRE 7.

FORMATAGE DU TEXTE

3 4

font - family : Impact , " Arial Black " , Arial , Verdana , serif ;

. . . cela signie :  Mets la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a march, mets une police standard (serif) . En gnral, il est bien d'indiquer un choix de trois ou quatre polices (+ serif) an de s'assurer qu'au moins l'une d'entre elles aura t trouve sur l'ordinateur du visiteur.

i le nom de l polie omporte des espesD je onseille de l9entourer de guillemetsD omme je l9i fit pour  eril flk F

Utiliser une police personnalise avec @font-face

te trouve le hoix des polies trop limitF gomment puisEje utiliser m polie prfre sur mon site we c
Pendant longtemps, cela n'tait pas possible. Aujourd'hui, avec CSS 3, il existe heureusement un moyen d'utiliser n'importe quelle police sur son site. Cela fonctionne bien avec la plupart des navigateurs. Mais attention, il y a des dfauts (ce serait trop beau sinon) :  Il faudra que le navigateur de vos visiteurs tlcharge automatiquement le chier de la police, dont le poids peut atteindre, voire dpasser 1 Mo. . .  La plupart des polices sont soumises au droit d'auteur, il n'est donc pas lgal de les utiliser sur son site. Heureusement, il existe des sites comme www.fontsquirrel.com et www.dafont.com qui proposent en tlchargement un certain nombre de polices libres de droits. Je recommande en particulier www.fontsquirrel.com car il permet de tlcharger des packs prts l'emploi pour CSS 3.  Il existe plusieurs formats de chiers de polices et ceux-ci ne fonctionnent pas sur tous les navigateurs. Voici les dirents formats de chiers de polices qui existent et qu'il faut connatre :  .ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.  .eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propritaire, produit par Microsoft.  .otf : OpenType Font. Ne fonctionne pas sur Internet Explorer.  .svg : SVG Font. Le seul format reconnu sur les iPhones et iPads pour le moment.  .woff : Web Open Font Format. Nouveau format conu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs. En CSS, pour dnir une nouvelle police, vous devez la dclarer comme ceci :
1 2

@font - face { font - family : ' MaSuperPolice ';

92

LA POLICE

3 4

src : url ( ' MaSuperPolice . eot ') ;

Le chier de police (ici MaSuperPolice.eot ) doit ici tre situ dans le mme dossier que le chier CSS (ou dans un sous-dossier, si vous utilisez un chemin relatif).

te royis qu9il y vit plusieurs formts de polie c

Oui, d'ailleurs les .eot ne fonctionnent que sur Internet Explorer. L'idal est de proposer plusieurs formats pour la police : le navigateur tlchargera celui qu'il sait lire. Voici comment indiquer plusieurs formats :
1 2 3 4 5 6 7

@font - face { font - family : ' MaSuperPolice ' ; src : url ( ' MaSuperPolice . eot ') format (' eot ') , url (' MaSuperPolice . woff ') format ( ' woff ') , url (' MaSuperPolice . ttf ') format (' truetype ') , url (' MaSuperPolice . svg ') format (' svg ') ; }

Pour tester le fonctionnement, je vous propose de tlcharger une police sur Font Squirrel, par exemple Learning Curve Pro. Cliquez sur  @font-face Kit , cela vous permettra de tlcharger un kit prt l'emploi avec tous les formats pour cette police. Tlcharger Learning Curve Pro Code  web : 771058  Votre chier CSS ressemblera au nal ceci :
1

2 3 4

5 6

8 9 10

@font - face { /* D finition d ' une nouvelle police nomm e LearningCurveProRegular */ font - family : ' LearningCurveProRegular ' ; src : url ( ' LearningCurve_OT - webfont . eot ') ; src : url ( ' LearningCurve_OT - webfont . eot ?# iefix ') format (' embedded - opentype ') , url (' LearningCurve_OT - webfont . woff ') format (' woff ') , url (' LearningCurve_OT - webfont . ttf ') format (' truetype ') , url (' LearningCurve_OT - webfont . svg # LearningCurveProRegular ') format (' svg ') ; } h1 /* Utilisation de la police qu ' on vient de d finir sur les titres */ { font - family : ' LearningCurveProRegular ' , Arial , serif ; }

11 12 13

93

CHAPITRE 7.

FORMATAGE DU TEXTE

La premire (grosse) section @font-face permet de dnir un nouveau nom de police qui pourra tre utilis dans le chier CSS. Ensuite, nous utilisons ce nom de police avec la proprit font-family, que nous connaissons, pour modier l'apparence des titres <h1>. Vous pouvez voir le rsultat la gure 7.4.

Figure 7.4  Achage d'une police personnalise

ous noterez quelques izrreries dns le g gnr pr le site pont quirrelF ve ut est de pllier ertins ugs sur snternet ixplorer r les niennes versions ne omprennent ps qund on d(nit plusieurs formtsF gel explique don l prsene d9un ?#iefix dns le odeF

Italique, gras, soulign. . .

Il existe en CSS une srie de proprits classiques de mise en forme du texte. Nous allons dcouvrir ici comment acher le texte en gras, italique, soulign. . . et au passage nous verrons qu'il est mme possible d'aller jusqu' le faire clignoter !

Mettre en italique
ettends un peu l 3 te royis que l lise texte en itlique c 3
<em>

permettit de mettre un

Je n'ai jamais dit cela. Retournez voir les chapitres prcdents si vous avez des doutes, mais je n'ai jamais dit que la balise <em> tait faite pour mettre le texte en italique (de mme que je n'ai jamais dit que <strong> tait faite pour mettre en gras). <em>, mettez-vous bien cela dans la tte, est faite pour insister sur des mots. Cela veut dire que les mots qu'elle entoure sont assez importants. Pour reprsenter cette importance, la plupart des navigateurs choisissent d'acher le texte en italique, mais ce n'est pas une obligation. Le CSS lui, permet de dire rellement :  Je veux que ce texte soit en italique . Rien ne vous empche, par exemple, de dcider que tous vos titres seront en italique. 94

ITALIQUE, GRAS, SOULIGN. . .

Concrtement, en CSS, pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :  italic : le texte sera mis en italique.  oblique : le texte sera pass en oblique (les lettres sont penches, le rsultat est lgrement dirent de l'italique proprement dit).  normal : le texte sera normal (par dfaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez crire :
1 2 3 4

em { }

font - style : normal ;

Ainsi, dans l'exemple suivant, je me sers de font-style pour mettre en italique tous mes titres <h2> :
1 2 3 4

h2 { }

font - style : italic ;

Mettre en gras
Et si nous passions la mise en gras ? Alors, l encore, n'oubliez pas que ce n'est pas <strong> qui permet de mettre en gras (son rle est d'indiquer que le texte est important, donc le navigateur l'ache gnralement en gras). La mise en gras en CSS peut par exemple s'appliquer aux titres, certains paragraphes entiers, etc. C'est vous de voir. La proprit CSS pour mettre en gras est font-weight et prend les valeurs suivantes :  bold : le texte sera en gras ;  normal : le texte sera crit normalement (par dfaut). Voici par exemple comment crire les titres en gras :
1 2 3 4

h1 { }

font - weight : bold ;

Soulignement et autres dcorations

La proprit CSS associe porte bien son nom : text-decoration. Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les direntes valeurs qu'elle peut prendre :  underline : soulign. 95

CHAPITRE 7.

FORMATAGE DU TEXTE

 line-through : barr.  overline : ligne au-dessus.  blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).  none : normal (par dfaut). Ce CSS va vous permettre de tester les eets de text-decoration :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

h1 {

text - decoration : } . souligne { text - decoration : } . barre { text - decoration : } . ligne_dessus { text - decoration : }

blink ;

underline ;

line - through ;

overline ;

Et le rsultat est visible la gure 7.5.

Figure 7.5  Direntes mises en forme du texte

L'alignement
Le langage CSS nous permet de faire tous les alignements connus : gauche, centr, droite et justi. C'est tout simple. On utilise la proprit text-align et on indique l'alignement dsir :  left : le texte sera align gauche (c'est le rglage par dfaut).  center : le texte sera centr.  right : le texte sera align droite. 96

L'ALIGNEMENT

 justify : le texte sera  justi . Justier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc la n des lignes. Les textes des journaux, par exemple, sont toujours justis. Regardez les dirents alignements sur cet exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14

h1 { } p { }

text - align : center ;

text - align : justify ;

. signature { text - align : right ; }

Le rsultat est visible la gure 7.6.

Figure 7.6  Alignements du texte

ous ne pouvez ps modi(er l9lignement du texte d9une lise inline @omme <span>D <a>D <em>D <strong>F F FAF v9lignement ne fontionne que sur des lises de type block @<p>D <div>D <h1>D <h2>D F F FA et 9est un peu logiqueD qund on y pense X on ne peut ps modi(er l9lignement de quelques mots u milieu d9un prgrphe 3 g9est don en gnrl le prgrphe entier qu9il vous fudr lignerF
97

CHAPITRE 7.

FORMATAGE DU TEXTE

Les ottants
Le CSS nous permet de faire otter un lment autour du texte. On dit aussi qu'on fait un  habillage . Pour que vous voyiez bien de quoi on parle, la gure 13.1 vous montre ce que nous allons apprendre faire.

Figure 7.7  Une image ottante entoure par du texte

J'imagine que, maintenant, la question qui vous brle les lvres est :  Mais quelle est donc la proprit magique qui fait otter ? . La rponse est. . . float ( ottant  en anglais). Cette proprit peut prendre deux valeurs trs simples :  left : l'lment ottera gauche.  right : l'lment ottera. . . droite ! Oui, bravo. L'utilisation des ottants est trs simple : 1. Vous appliquez un float une balise. 2. Puis vous continuez crire du texte la suite normalement.

yn peut ussi ien utiliser l proprit float sur des lises block que sur des lises inlineF sl est ournt de fire )otter une imge pour qu9elle soit hille pr du texteD omme dns l9exemple prdentF

Faire otter une image

Nous allons apprendre ici faire otter une image. Voici le code HTML que nous devons taper dans un premier temps :
1

<p > < img src = " flash . gif " class = " imageflottante " alt = " Image flottante " / > Ceci est un texte normal de paragraphe , crit la suite de l ' image et qui l ' habillera car l ' image est flottante . </p >

98

LES FLOTTANTS

ous devez pler l9lment )ottnt en premier dns le ode rwvF i vous plez l9imge prs le prgrpheD l9e'et ne fontionner psF
Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de faire otter l'image gauche :
1 2 3 4

. imageflottante { float : left ; }

Amusez-vous aussi faire otter l'image droite, c'est tout bte : il sut d'indiquer la valeur right et le tour est jou !

Stopper un ottant
Quand vous mettez en place un ottant, le texte autour l'habille. Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en dessous du ottant ? On pourrait enchaner plusieurs <br /> la suite mais cela ne serait ni lgant ni trs propre. . . En gros, on aimerait pouvoir obtenir le mme rsultat qu' la gure 7.8.

Figure 7.8  Le texte sous l'image ignore la proprit float

Il existe en fait une proprit CSS qui permet de dire :  Stop, ce texte doit tre endessous du ottant et non plus ct . C'est la proprit clear, qui peut prendre ces trois valeurs :  left : le texte se poursuit en-dessous aprs un float: left;  right : le texte se poursuit en-dessous aprs un float: right;  both : le texte se poursuit en-dessous, que ce soit aprs un float: left; ou aprs un float: right;. Pour simplier, on va utiliser tout le temps le clear: both, qui marche aprs un ottant gauche et aprs un ottant droite (cela fonctionne donc tous les coups). Pour illustrer son fonctionnement, on va prendre ce code HTML :
1

2 3

<p > < img src = " flash . gif " class = " imageflottante " alt = " Image flottante " / > </ p > <p > Ce texte est crit c t de l ' image flottante . </ p > <p class = " dessous " > Ce texte est crit sous l ' image flottante . </ p>

99

CHAPITRE 7.

FORMATAGE DU TEXTE

Et ce code CSS :
1 2 3 4 5 6 7 8

. imageflottante { float : left ; } . dessous { clear : both ; }

Et voil le travail. On applique un clear: both; au paragraphe que l'on veut voir continuer sous l'image ottante et le tour est jou !

En rsum
 On modie la taille du texte avec la proprit CSS font-size. On peut indiquer la taille en pixels (16px), en  em  (1.3em), en pourcentage (110%), etc.  On change la police du texte avec font-family. Attention, seules quelques polices sont connues par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalise avec la directive @font-face : cela forcera les navigateurs tlcharger la police de votre choix.  De nombreuses proprits de mise en forme du texte existent : font-style pour l'italique, font-weight pour la mise en gras, text-decoration pour le soulignement, etc.  Le texte peut tre align avec text-align.  On peut faire en sorte qu'une image soit habille ( entoure ) de texte avec float.

100

Chapitre

8
Dicult :

La couleur et le fond

ontinuons notre tour d9horizon des proprits g existntesF xous llons nous inE tresser ii ux proprits lies de prs ou de loin l ouleurF xous verrons entre utres X ! omment hnger l ouleur du texte Y ! omment mettre une ouleur ou une imge d9rrireEpln Y ! omment jouter des omres Y ! omment jouer ve les niveux de trnspreneF ve g n9 ps (ni de nous tonner 3

101

CHAPITRE 8.

LA COULEUR ET LE FOND

Couleur du texte
Passons maintenant au vaste sujet de la couleur.

gomment elD  vste c

Vous connaissez dj la proprit qui permet de modier la couleur du texte : il s'agit de color. Nous allons nous intresser aux direntes faons d'indiquer la couleur, car il y en a plusieurs.

Indiquer le nom de la couleur

La mthode la plus simple et la plus pratique pour choisir une couleur consiste taper son nom (in english, of course ). Le seul dfaut de cette mthode est qu'il n'existe que seize couleurs dites  standard . D'autres couleurs ocieuses existent mais, comme elles ne fonctionneront pas forcment de la mme manire sur tous les navigateurs, je vais viter de vous les montrer. La gure 8.1 vous montre les seize couleurs que vous pouvez utiliser en tapant simplement leur nom. Vous pouvez les apprendre par cur si cela vous chante, en plus cela vous fera rviser votre anglais. Pour passer tous les titres en marron, on peut donc crire :
1 2 3 4

h1 { }

color : maroon ;

Vous trouverez le rsultat la gure 8.2.

La notation hexadcimale
Seize couleurs, c'est quand mme un peu limite quand on sait que la plupart des crans peuvent en acher seize millions. D'un autre ct, remarquez, s'il avait fallu donner un nom chacune des seize millions de couleurs. . . Heureusement, il existe en CSS plusieurs faons de choisir une couleur parmi toutes celles qui existent. La premire que je vais vous montrer est la notation hexadcimale. Elle est couramment utilise sur le Web mais il existe aussi une autre mthode que nous verrons plus loin. Un nom de couleur en hexadcimal, cela ressemble : #FF5A28. Pour faire simple, c'est une combinaison de lettres et de chires qui indiquent une couleur. On doit toujours commencer par crire un dise (#), suivi de six lettres ou chires allant de 0 9 102

COULEUR DU TEXTE

Figure 8.1  Les seize noms de couleurs utilisables en CSS

Figure 8.2  Le titre est crit en marron

103

CHAPITRE 8.

LA COULEUR ET LE FOND

et de A F. Ces lettres ou chires fonctionnent deux par deux. Les deux premiers indiquent une quantit de rouge, les deux suivants une quantit de vert et les deux derniers une quantit de bleu. En mlangeant ces quantits (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut. Ainsi, #000000 correspond la couleur noire et #FFFFFF la couleur blanche. Mais maintenant, ne me demandez pas quelle est la combinaison qui produit de l'orange couleur  coucher de soleil , je n'en sais strictement rien.

gertins logiiels de dessinD omme hotoshopD qimp et intFxiD vous indiquent les ouleurs en hexdimlF sl vous est lors file de opierEoller le ode hexdiml d9une ouleur dns votre (hier gF
Voici par exemple comment on fait pour appliquer aux paragraphes la couleur blanche en hexadcimal :
1 2 3 4

p { }

color : # FFFFFF ;

xotez qu9il existe une nottion rourie X on peut rire une ouleur ve seulement trois rtresF r exemple X 5peQ quivut rire 5ppeeQQF

La mthode RGB
Que signie RGB ? En anglais, Rouge-Vert-Bleu s'crit Red-Green-Blue, ce qui s'abrge en  RGB . Comme avec la notation hexadcimale, pour choisir une couleur, on doit dnir une quantit de rouge, de vert et de bleu.

inore ette histoire tordue de quntits de rougeEvertEleu c

Oui mais l, vous allez voir que c'est beaucoup plus pratique et qu'avec un logiciel de dessin tout simple comme Paint, vous pouvez trouver la couleur que vous dsirez. Voici la marche suivre : 1. Lancez le logiciel Paint depuis le menu Dmarrer. 2. Rendez-vous dans la section Modifier les couleurs, comme indiqu la gure 8.3. 3. Une fentre s'ouvre. Dans la zone qui apparat droite, faites bouger les curseurs pour slectionner la couleur qui vous intresse. Supposons que vous soyez pris d'une envie folle d'crire vos titres <h1> en rose bonbon (supposons seulement). Slectionnez la couleur dans la fentre, comme la gure 8.4. 104

COULEUR DU TEXTE

4. Relevez les quantits de Rouge-Vert-Bleu correspondantes, indiques en bas droite de la fentre (ici 240-96-204). Recopiez ces valeurs dans cet ordre dans le chier CSS, comme dans le code ci-dessous.
1 2 3 4

p { }

color : rgb ( 240 , 96 , 204 ) ;

Figure 8.3  Modication des couleurs sous Paint

Figure 8.4  Slection d'une couleur dans Paint

105

CHAPITRE 8.

LA COULEUR ET LE FOND

Comme vous avez pu le constater dans l'exemple, pour utiliser la mthode RGB, il faut taper rgb(Rouge, Vert, Bleu) en remplaant  Rouge, Vert, Bleu  par les nombres correspondants. Pour information, ces quantits sont toujours comprises entre 0 et 255.

Et en Bonus Track. . .
Je vous conseille un petit logiciel tout simple, gratuit et en franais, ralis par Benjamin Chartier, prcisment conu pour choisir vos couleurs. Nul doute qu'il vous sera trs utile pour vous aider choisir vos couleurs. Ce logiciel s'appelle  La bote couleurs  (gure 8.5).

Tlcharger le logiciel Code web : 414953  Comme vous pouvez le voir, il comporte plusieurs onglets. Je vous recommande de rester sur le premier (RVB) ou d'aller dans l'onglet Visuel. Les autres ne nous concernent pas. vitez en particulier l'onglet Nom, qui propose des noms de couleurs parfois invalides (je vous rappelle qu'il existe seulement seize noms de couleurs  standard ). Vous pouvez rcuprer en bas droite le numro de la couleur en hexadcimal (le numro commence toujours par un #) ou encore recopier les valeurs de Rouge-Vert-Bleu (RVB) dans le CSS. Enn, et c'est certainement la fonctionnalit la plus intressante du logiciel, vous pouvez utiliser la pipette en haut droite pour rcuprer n'importe quelle couleur s'achant sur votre cran ! Amusez-vous bien !

Figure 8.5  La bote couleurs

Couleur de fond
Pour indiquer une couleur de fond, on utilise la proprit CSS background-color. Elle s'utilise de la mme manire que la proprit color, c'est--dire que vous pouvez taper le nom d'une couleur, l'crire en notation hexadcimale ou encore utiliser la mthode RGB. Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui, <body> correspond l'ensemble de la page web, c'est donc en modiant sa 106

COULEUR DE FOND

couleur de fond que l'on changera la couleur d'arrire-plan de la page. Regardez trs attentivement ce chier CSS :
1 2 3 4 5 6

/* On travaille sur la balise body , donc sur TOUTE la page */ body { background - color : black ; /* Le fond de la page sera noir */ color : white ; /* Le texte de la page sera blanc */ }

Voici le rendu de ce code en gure 8.6.

Figure 8.6  Texte en blanc sur fond noir

ih mis tu s demnd e que le texte de l lise <body> soit rit en lnD et tous les prgrphes <p> et titres <h1> ont pris ette ouleurF gomment el se fitEil c
Je voulais justement proter de l'occasion pour vous en parler. Ce phnomne s'appelle l'hritage. Je vous rassure tout de suite, personne n'est mort.

Le CSS et l'hritage
En CSS, si vous appliquez un style une balise, toutes les balises qui se trouvent l'intrieur prendront le mme style. C'est en fait simple comprendre et intuitif. La balise <body>, vous le savez, contient entre autres les balises de paragraphe <p> et de titre <h1>. Si j'applique une couleur de fond noire et une couleur de texte blanche la balise <body>, tous mes titres et paragraphes auront eux aussi un arrire-plan de couleur noire et un texte de couleur blanche. . . C'est ce phnomne qu'on appelle l'hritage : on dit que les balises qui se trouvent l'intrieur d'une autre balise  hritent  de ses proprits.

g9est d9illeurs de l que vient le nom  g D qui signi(e  Cascading Style Sheets D 9estEEdire  peuilles de style en sde F ves proprits g sont hrites en sde X si vous donnez un style un lmentD tous les sousElments uront le mme styleF
107

CHAPITRE 8.

LA COULEUR ET LE FOND

gel veut dire que y le texte de m pge we ser forment rit en ln c

Non, pas obligatoirement. Si vous dites par la suite que vous voulez vos titres en rouge, ce style aura la priorit et vos titres seront donc en rouge. En revanche, si vous n'indiquez rien de particulier (comme on l'a fait tout l'heure), alors vos titres hriteront de la couleur blanche. Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les proprits CSS seront hrites : vous pouvez par exemple demander une mise en gras dans la balise <body> et tous vos titres et paragraphes seront en gras.

Exemple d'hritage avec la balise <mark>

On a tendance croire qu'on ne peut modier que la couleur de fond de la page. C'est faux : vous pouvez changer le fond de n'importe quel lment : vos titres, vos paragraphes, certains mots. . . Dans ce cas, ils apparatront surligns (comme si on avait mis un coup de marqueur dessus). Vous vous souvenez par exemple de la balise <mark> qui permet de mettre en valeur certains mots ? Utilisons-la nouveau ici :
1 2 3

< h1 > Qui a teint la lumi re ? </ h1 > <p >Brr , il fait tout noir sur ce site , c ' est un peu < mark > inqui tant </ mark > comme ambiance non vous trouvez pas ? </ p >

Par dfaut, le texte s'ache sur un fond jaune. Vous pouvez changer ce comportement en CSS :
1 2 3 4 5 6 7 8 9

body { } mark {

background - color : black ; color : white ;

10 11

/* La couleur de fond prend le pas sur celle de toute la page */ background - color : red ;

Sur le texte de la balise <mark>, c'est la couleur de fond rouge qui s'applique. En eet, mme si le fond de la page est noir, c'est la proprit CSS de l'lment le plus prcis qui a la priorit (gure 8.7). 108

IMAGES DE FOND

Figure 8.7  Le CSS de la balise <mark> est prioritaire.

Le mme principe vaut pour toutes les balises HTML et toutes les proprits CSS ! Si vous dites :  mes paragraphes ont une taille de 1.2 em ;  mes textes importants (<strong>) ont une taille de 1.4 em ; . . . on pourrait penser qu'il y a un conit. Le texte important fait partie d'un paragraphe, quelle taille lui donner ? 1.2 em ou 1.4 em ? Le CSS dcide que c'est la dclaration la plus prcise qui l'emporte : comme <strong> correspond un lment plus prcis que les paragraphes, le texte sera crit en 1.4 em.

Images de fond
Dans les exemples qui suivent, je vais modier l'image de fond de la page. Cependant, tout comme pour la couleur de fond, n'oubliez pas que l'image de fond ne s'applique pas forcment la page entire. On peut aussi mettre une image de fond derrire les titres, paragraphes, etc.

Appliquer une image de fond

La proprit permettant d'indiquer une image de fond est background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par exemple :
1 2 3 4

body { }

background - image : url (" neige . png ") ;

Ce qui nous donne la gure 8.8. Bien entendu, votre fond n'est pas forcment en PNG, il peut aussi tre en JPEG ou en GIF. L'adresse indiquant o se trouve l'image de fond peut tre crite en absolu (http://...) ou en relatif (fond.png). 109

CHAPITRE 8.

LA COULEUR ET LE FOND

Figure 8.8  Une image de fond sur la page

ettention lorsque vous rivez une dresse en reltif dns le (hier g 3 v9dresse de l9imge doit tre indique par rapport au chier .css et non ps pr rpport u (hier .htmlF our simpli(er les hosesD je vous onseille de pler l9imge de fond dns le mme dossier que le (hier .css @ou dns un sousEdossierAF

Options disponibles pour l'image de fond

On peut complter la proprit background-image que nous venons de voir par plusieurs autres proprits qui permettent de changer le comportement de l'image de fond.
background-attachment

: xer le fond

La proprit CSS background-attachment permet de  xer  le fond. L'eet obtenu est intressant car on voit alors le texte  glisser  par-dessus le fond. Deux valeurs sont disponibles :  fixed : l'image de fond reste xe ;  scroll : l'image de fond dle avec le texte (par dfaut).
1 2 3 4 5

body { }

background - image : url (" neige . png ") ; background - attachment : fixed ; /* Le fond restera fixe */

110

IMAGES DE FOND

background-repeat

: rptition du fond

Par dfaut, l'image de fond est rpte en mosaque. Vous pouvez changer cela avec la proprit background-repeat :  no-repeat : le fond ne sera pas rpt. L'image sera donc unique sur la page.  repeat-x : le fond sera rpt uniquement sur la premire ligne, horizontalement.  repeat-y : le fond sera rpt uniquement sur la premire colonne, verticalement.  repeat : le fond sera rpt en mosaque (par dfaut). Exemple d'utilisation :
1 2 3 4 5

body { }

background - image : url (" soleil . png ") ; background - repeat : no - repeat ;

background-position

: position du fond

On peut indiquer o doit se trouver l'image de fond avec background-position. Cette proprit n'est intressante que si elle est combine avec background-repeat: no-repeat; (un fond qui ne se rpte pas). Vous devez donner background-position deux valeurs en pixels pour indiquer la position du fond par rapport au coin suprieur gauche de la page (ou du paragraphe, si vous appliquez le fond un paragraphe). Ainsi, si vous tapez :
1

background - position : 30px 50px ;

. . . votre fond sera plac 30 pixels de la gauche et 50 pixels du haut. Il est aussi possible d'utiliser ces valeurs en anglais :  top : en haut ;  bottom : en bas ;  left : gauche ;  center : centr ;  right : droite. Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut droite, vous taperez :
1

background - position : top right ;

Ainsi, si je veux acher un soleil en image de fond (gure 8.9), en un unique exemplaire (no-repeat), toujours visible (fixed) et positionn en haut droite (top right), je vais crire ceci :
1 2 3 4

body {

background - image : url (" soleil . png ") ; background - attachment : fixed ; /* Le fond restera fixe */

111

CHAPITRE 8.

LA COULEUR ET LE FOND

background - repeat : no - repeat ; /* Le fond ne sera pas r p t */ background - position : top right ; /* Le fond sera plac en haut droite */

Figure 8.9  Un soleil plac en image de fond, en haut droite

Combiner les proprits

Si vous utilisez beaucoup de proprits en rapport avec le fond (comme c'est le cas sur ce dernier exemple), vous pouvez utiliser une sorte de  super-proprit  appele background dont la valeur peut combiner plusieurs des proprits vues prcdemment : background-image, background-repeat, background-attachment et background-position. On peut donc tout simplement crire :
1 2 3 4

body { }

background : url (" soleil . png ") fixed no - repeat top right ;

C'est la premire  super-proprit  que je vous montre, il y en aura d'autres. Il faut savoir que :  L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre.  Vous n'tes pas obligs de mettre toutes les valeurs. Ainsi, si vous ne voulez pas crire fixed, vous pouvez l'enlever sans problme. 112

IMAGES DE FOND

Plusieurs images de fond

Depuis CSS3, il est possible de donner plusieurs images de fond un lment. Pour cela, il sut de sparer les dclarations par une virgule, comme ceci :
1 2 3

body { }

background : url (" soleil . png ") fixed no - repeat top right , url (" neige . png ") fixed ;

La premire image de cette liste sera place par-dessus les autres (gure 8.10). Attention donc, l'ordre de dclaration des images a son importance : si vous inversez le soleil et la neige dans le code CSS prcdent, vous ne verrez plus le soleil !

Figure 8.10  Images de fond multiples

noter que les images de fond multiples fonctionnent sur tous les navigateurs sauf sur les anciennes versions d'Internet Explorer, qui ne reconnat cette fonctionnalit qu' partir de la version 9 (IE9).

ne dernire hose vnt d9en terminer ve les imges de fond X dns tous es exemplesD j9i ppliqu un fond l pge entire @bodyAF wis el ne doit ps vous fire oulier qu9on peut ppliquer un fond n9importe quel lment @un titreD un prgrpheD ertins mots d9un prgrpheD etFAF te vous onseille donD pour vous entrnerD d9essyer d9ppliquer un fond vos titres ou prgrphesF i vous vez un peu de got @ontrirement moi 3A vous rriverez ertinement donner une trs elle llure votre pge weF
113

CHAPITRE 8.

LA COULEUR ET LE FOND

La transparence
Le CSS nous permet de jouer trs facilement avec les niveaux de transparence des lments ! Pour cela, nous allons utiliser des fonctionnalits de CSS3 : la proprit opacity et la notation RGBa.

La proprit opacity
La proprit opacity, trs simple, permet d'indiquer le niveau d'opacit (c'est l'inverse de la transparence).  Avec une valeur de 1, l'lment sera totalement opaque : c'est le comportement par dfaut.  Avec une valeur de 0, l'lment sera totalement transparent. Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre lment sera opaque 60%. . . et on verra donc travers ! Voici comment on peut l'utiliser :
1 2 3 4

p { }

opacity : 0 . 6 ;

Voici un exemple qui va nous permettre d'apprcier la transparence. Vous en trouverez le rendu la gure 8.11.
1 2 3 4 5 6 7 8 9 10 11

body { } p {

background : url ( ' neige . png ') ;

background - color : black ; color : white ; opacity : 0 . 3 ;

Notez que la transparence fonctionne sur tous les navigateurs rcents, y compris Internet Explorer partir de IE9.

i vous ppliquez l proprit opacity un lment de l pgeD tout le ontenu de et lment ser rendu trnsprent @mme les imgesD les utres los l9intrieurD etFAF i vous voulez juste rendre l ouleur de fond trnsE prenteD utilisez plutt l nottion qf que nous llons douvrirF
114

LA TRANSPARENCE

Figure 8.11  Un paragraphe transparent avec opacity

La notation RGBa
CSS3 nous propose une autre faon de jouer avec la transparence : la notation RGBa. Il s'agit en fait de la notation RGB que nous avons vue prcdemment, mais avec un quatrime paramtre : le niveau de transparence (appel  canal alpha ). De la mme faon que prcdemment, avec une valeur de 1, le fond est compltement opaque. Avec une valeur infrieure 1, il est transparent.
1 2 3

p { }

background - color : rgba ( 255 , 0 , 0 , 0 . 5 ) ; /* Fond rouge moiti transparent */

C'est aussi simple que cela. Vous pouvez obtenir exactement le mme eet qu'avec opacity juste en jouant avec la notation RGBa, essayez ! Cette notation est connue de tous les navigateurs rcents, y compris Internet Explorer ( partir de IE9). Pour les navigateurs plus anciens, il est recommand d'indiquer la notation RGB classique en plus de RGBa. Pour ces navigateurs, le fond ne sera alors pas transparent mais, au moins, il y aura bien une couleur d'arrire-plan.
1 2 3

p {

background - color : rgb ( 255 ,0 , 0 ) ; /* Pour les navigateurs anciens */ background - color : rgba ( 255 ,0 ,0 ,0 . 5 ) ; /* Pour les navigateurs plus r cents */

115

CHAPITRE 8.

LA COULEUR ET LE FOND

En rsum
 On change la couleur du texte avec la proprit color, la couleur de fond avec background-color.  On peut indiquer une couleur en crivant son nom en anglais (black, par exemple), sous forme hexadciale (#FFC8D3) ou en notation RGB (rgb(250,25,118)).  On peut ajouter une image de fond avec background-image. On peut choisir de xer l'image de fond, de l'acher en mosaque ou non, et mme de la positionner o on veut sur la page.  On peut rendre une portion de la page transparente avec la proprit opacity ou avec la notation RGBa (identique la notation RGB, avec une quatrime valeur indiquant le niveau de transparence).

116

Chapitre

9
Dicult :

Les bordures et les ombres

ouveu hpitreD nouveu lot de proprits gF siD nous llons nous intresser ux ordures et ux e'ets d9omrge que l9on peut ppliquerD ussi ien sur le texte que sur les los qui onstituent notre pgeF xous rutiliserons en prtiulier nos onnissnes sur les ouleurs pour hoisir l ouleur de nos ordures et de nos omresF rts vous en mettre une nouvelle fois plein l vue c

117

CHAPITRE 9.

LES BORDURES ET LES OMBRES

Bordures standard
Le CSS vous ore un large choix de bordures pour dcorer votre page. De nombreuses proprits CSS vous permettent de modier l'apparence de vos bordures : border-width, border-color, border-style. . . Pour aller l'essentiel, je vous propose ici d'utiliser directement la super-proprit border qui regroupe l'ensemble de ces proprits. Vous vous souvenez de la superproprit background ? Cela fonctionne sur le mme principe : on va pouvoir combiner plusieurs valeurs. Pour border on peut utiliser jusqu' trois valeurs pour modier l'apparence de la bordure :  La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px).  La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur (black, red,. . .), soit une valeur hexadcimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)).  Le type de bordure : l, vous avez le choix. Votre bordure peut tre un simple trait, ou des pointills, ou encore des tirets, etc. Voici les direntes valeurs disponibles :  none : pas de bordure (par dfaut) ;  solid : un trait simple ;  dotted : pointills ;  dashed : tirets ;  double : bordure double ;  groove : en relief ;  ridge : autre eet relief ;  inset : eet 3D global enfonc ;  outset : eet 3D global surlev. Ainsi, pour avoir une bordure bleue, en tirets, paisse de 3 pixels autour de mes titres, je vais crire :
1 2 3 4

h1 { }

border : 3px blue dashed ;

La gure 9.1 vous prsente les dirents styles de bordures que vous pouvez utiliser.

En haut, droite, gauche, en bas. . .

Qui a dit que vous tiez obligs d'appliquer la mme bordure aux quatre cts de votre lment ? Taratata, si vous voulez mettre des bordures direntes en fonction du ct (haut, bas, gauche ou droite), vous pouvez le faire sans problme. Dans ce cas, vous devrez utiliser ces quatre proprits :  border-top : bordure du haut ;  border-bottom : bordure du bas ; 118

BORDURES ARRONDIES

Figure 9.1  Les dirents types de bordures

 border-left : bordure de gauche ;  border-right : bordure de droite.

sl existe ussi des quivlents pour prmtrer hque dtil de l ordure si vous le dsirez X border-top-width pour modi(er l9pisseur de l ordure du hutD border-top-color pour l ouleur du hutD etF
Ce sont aussi des super-proprits, elles fonctionnent comme border mais ne s'appliquent donc qu' un seul ct. Pour ajouter une bordure uniquement gauche et droite des paragraphes, on crira donc :
1 2 3 4 5

p { }

border - left : 2px solid black ; border - right : 2px solid black ;

yn peut modi(er les ordures de n9importe quel type d9lment sur l pgeF xous l9vons fit ii sur les prgrphes mis on peut ussi modi(er l ordure des imgesD des textes importnts omme <strong>D etF

Bordures arrondies
Les bordures arrondies, c'est un peu le Saint Graal attendu par les webmasters depuis des millnaires (ou presque). Depuis que CSS3 est arriv, il est enn possible d'en crer facilement ! La proprit border-radius va nous permettre d'arrondir facilement les angles de n'importe quel lment. Il sut d'indiquer la taille ( l'importance ) de l'arrondi en 119

CHAPITRE 9.

LES BORDURES ET LES OMBRES

pixels :
1 2 3 4

p { }

border - radius : 10px ;

L'arrondi se voit notamment si l'lment a des bordures, comme sur la gure 9.2.

Figure 9.2  Des bordures arrondies

. . . ou s'il a une couleur de fond, comme sur la gure 9.3.

Figure 9.3  Un fond aux coins arrondis

On peut aussi prciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs :
1 2 3 4

p { }

border - radius : 10px 5px 10px 5px ;

Les valeurs correspondent aux angles suivants dans cet ordre : 120

LES OMBRES

1. 2. 3. 4.

en haut gauche ; en haut droite ; en bas droite ; en bas gauche.

Enn, il est possible d'aner l'arrondi de nos angles en crant des courbes elliptiques gure 9.4). Dans ce cas, il faut indiquer deux valeurs spares par une barre oblique (slash, caractre /). Le mieux est certainement de tester pour voir l'eet :
1 2 3 4

p { }

border - radius : 20px / 10px ;

Figure 9.4  Bordures arrondies elliptiques

ves ordures rrondies fontionnent ve tous les nvigteurs rentsD y omE pris snternet ixplorer prtir de l version W @siWAF our les niennes versions de wozill pirefoxD ghrome et friD il tit nessire d9utiliser e qu9on pE pelle des  pr(xes vendeurs D 9estEEdire qu9il fllit rire dns le ode g di'rentes versions de l proprit @-moz-border-radius pour pirefoxD -webkit-border-radius pour friD etFAF ge n9est heureusement plus nE essire ujourd9huiD suf si vous voulez grer les niennes versions de es nvigteursF

Les ombres
Les ombres font partie des nouveauts rcentes proposes par CSS3. Aujourd'hui, il sut d'une seule ligne de CSS pour ajouter des ombres dans une page ! Nous allons ici dcouvrir deux types d'ombres : 121

CHAPITRE 9.

LES BORDURES ET LES OMBRES

 les ombres des botes ;  les ombres du texte.

box-shadow

: les ombres des botes

La proprit box-shadow s'applique tout le bloc et prend quatre valeurs dans l'ordre suivant : 1. le dcalage horizontal de l'ombre ; 2. le dcalage vertical de l'ombre ; 3. l'adoucissement du dgrad ; 4. la couleur de l'ombre. Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on crira :
1 2 3 4

p { }

box - shadow : 6px 6px 0px black ;

Cela donne le rsultat illustr la gure 9.5 (j'ai ajout une bordure au paragraphe pour qu'on voie mieux l'eet).

Figure 9.5  Une ombre sous le paragraphe

Ajoutons un adoucissement grce au troisime paramtre (gure 9.6). L'adoucissement peut tre faible (infrieur au dcalage), normal (gal au dcalage) ou lev (suprieur au dcalage). Essayons un dcalage normal : 122

LES OMBRES

1 2 3 4

p { }

box - shadow : 6px 6px 6px black ;

Figure 9.6  Une ombre adoucie sous le paragraphe

On peut aussi rajouter une quatrime valeur facultative : inset. Dans ce cas, l'ombre sera place l'intrieur du bloc, pour donner un eet enfonc :
1 2 3 4

p { }

box - shadow : 6px 6px 6px black inset ;

Je vous laisse essayer de voir le rsultat.

v proprit box-shadow fontionne sur tous les nvigteurs rentsD siW inlusF our ertins nvigteursD en prtiulier les nvigteurs moE ilesD il fut enore rjouter un pr(xeF einsiD il fudr rire une version -webkit-box-shadow pour que el fontionne sur les nvigteurs endroid et iyF
text-shadow

: l'ombre du texte

Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnent exactement de la mme faon que box-shadow : dcalage, adoucissement et couleur. 123

CHAPITRE 9.

LES BORDURES ET LES OMBRES

1 2 3 4

p { }

text - shadow : 2px 2px 4px black ;

Le rsultat est illustr la gure 9.7.

Figure 9.7  Texte ombr

gette proprit est reonnue pr tous les nvigteurs rentsD suf snternet ixplorerD qui ne l reonnt qu9 prtir de l version siIHF

En rsum
 On peut appliquer une bordure un lment avec la proprit border. Il faut indiquer la largeur de la bordure, sa couleur et son type (trait continu, pointills. . .).  On peut arrondir les bordures avec border-radius.  On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le dcalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur.  Le texte peut lui aussi avoir une ombre avec text-shadow.

124

Chapitre

10
Dicult :

Cration d'apparences dynamiques

9est une de ses fores X le g nous permet ussi de modi(er l9pprene des lments de fon dynmiqueD 9estEEdire que des lments peuvent hnger de forme une fois que l pge t hrgeF xous llons fire ppel une fontionnlit puissnte du g X les pseudoEformtsF xous verrons dns e hpitre omment hnger l9pprene X ! u survol Y ! lors du li Y ! lors du fous @lment sletionnA Y ! lorsqu9un lien t onsultF ous llez voir que le lngge g n9 ps (ni de nous tonner 3

125

CHAPITRE 10.

CRATION D'APPARENCES DYNAMIQUES

Au survol
Nous allons dcouvrir dans ce chapitre plusieurs pseudo-formats CSS. Le premier que je vais vous montrer s'appelle :hover. Comme tous les autres pseudo-formats que nous allons voir, c'est une information que l'on rajoute aprs le nom de la balise (ou de la classe) dans le CSS, comme ceci :
1 2 3 4

a : hover { }

:hover signie  survoler . a:hover peut donc se traduire par :  Quand la souris est

sur le lien  (quand on pointe dessus). partir de l, c'est vous de dnir l'apparence que doivent avoir les liens lorsqu'on pointe dessus. Laissez libre cours votre imagination, il n'y a pas de limite. Voici un exemple de prsentation des liens, mais n'hsitez pas inventer le vtre :
1 2 3 4 5 6 7 8 9

a /* Liens par d faut ( non survol s ) */ { text - decoration : none ; color : red ; font - style : italic ; } a : hover /* Apparence au survol des liens */ { text - decoration : underline ; color : green ; }

10 11 12

On a dni ici deux versions des styles pour les liens :  pour les liens par dfaut (non survols) ;  pour les liens au survol. Le rsultat se trouve la gure 10.1. Sympa, n'est-ce pas ? Mme si on l'utilise souvent sur les liens, vous pouvez modier l'apparence de n'importe quel lment. Par exemple, vous pouvez modier l'apparence des paragraphes lorsqu'on pointe dessus :
1 2 3 4

p : hover /* Quand on pointe sur un paragraphe */ { }

126

AU CLIC ET LORS DE LA SLECTION

Figure 10.1  Changement d'apparence au survol de la souris

Au clic et lors de la slection

Vous pouvez interagir encore plus nement en CSS. Nous allons voir ici que nous pouvons changer l'apparence des lments lorsque l'on clique dessus et lorsqu'ils sont slectionns !

:active

: au moment du clic

Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilis que sur les liens. Le lien gardera cette apparence trs peu de temps : en fait, le changement intervient lorsque le bouton de la souris est enfonc. En clair, ce n'est pas forcment toujours bien visible. On peut par exemple changer la couleur de fond du lien lorsque l'on clique dessus :
1 2 3 4

a : active /* Quand le visiteur clique sur le lien */ { background - color : # FFCC66 ; }

127

CHAPITRE 10.

CRATION D'APPARENCES DYNAMIQUES

:focus

: lorsque l'lment est slectionn

L, c'est un peu dirent. Le pseudo-format :focus applique un style lorsque l'lment est slectionn.

g9estEEdire c
Une fois que vous avez cliqu, le lien reste  slectionn  (il y a une petite bordure en pointills autour). C'est cela, la slection.

ge pseudoEformt pourr tre ppliqu d9utres lises rwv que nous n9vons ps enore vuesD omme les lments de formuliresF
Essayons pour l'instant sur les liens :
1 2 3 4

a : focus /* Quand le visiteur s lectionne le lien */ { background - color : # FFCC66 ; }

ous qoogle ghrome et friD l9e'et ne se voit que si l9on ppuie sur l touhe Tab F

Lorsque le lien a dj t consult

Il est possible d'appliquer un style un lien vers une page qui a dj t vue. Par dfaut, le navigateur colore le lien en un violet assez laid (de mon point de vue du moins !). Vous pouvez changer cette apparence avec :visited (qui signie  visit ). En pratique, sur les liens consults, on ne peut pas changer beaucoup de choses part la couleur (gure 10.2).
1 2 3 4

a : visited /* Quand le visiteur a d j vu la page concern e */ { color : # AAA ; /* Appliquer une couleur grise */ }

Si vous ne souhaitez pas que les liens dj visits soient colors d'une faon dirente, il vous faudra leur appliquer la mme couleur qu'aux liens normaux. De nombreux sites web font cela (le Site du Zro y compris !). Une exception notable : Google. . . ce qui 128

LORSQUE LE LIEN A DJ T CONSULT

Figure 10.2  Liens visits en gris

est plutt pratique, puisque l'on peut voir dans les rsultats d'une recherche si on a dj consult ou non les sites que Google nous prsente.

En rsum
 En CSS, on peut modier l'apparence de certaines sections dynamiquement, aprs le chargement de la page, lorsque certains vnements se produisent. On utilise pour cela les pseudo-formats.  Le pseudo-format :hover permet de changer l'apparence au survol (par exemple : a:hover pour modier l'apparence des liens lorsque la souris pointe dessus).  Le pseudo-format :active modie l'apparence des liens au moment du clic, :visited lorsqu'un lien a dj t visit.  Le pseudo-format :focus permet de modier l'apparence d'un lment slectionn.

129

CHAPITRE 10.

CRATION D'APPARENCES DYNAMIQUES

130

Troisime partie
Mise en page du site

131

Chapitre

11
Dicult :

Structurer sa page

ous pprohons de plus en plus du utF i nos pges we ne ressemlent ps enE ore tout fit ux sites we que nous onnissonsD 9est qu9il nous mnque les onnissnes nessires pour fire l mise en pgeF in gnrlD une pge we est onstitue d9un enEtte @tout en hutAD de menus de nvigtion @en hut ou sur les tsAD de di'rentes setions u entreF F F et d9un pied de pge @tout en sAF hns e hpitreD nous llons nous intresser ux nouvelles lises rwv ddies l struturtion du siteF ges lises ont t introduites pr rwvS @elles n9existient ps vntA et vont nous permettre de dire X  gei est mon enEtte D  gei est mon menu de nvigtion D etF our le momentD nous n9llons ps enore fire de mise en pgeF xous llons en fit prprer notre doument rwv pour pouvoir douvrir l mise en pge dns les prohins hpitresF

133

CHAPITRE 11.

STRUCTURER SA PAGE

Les balises structurantes de HTML5

Je vais vous prsenter ici les nouvelles balises introduites par HTML5 pour structurer nos pages. Vous allez voir, cela ne va pas beaucoup changer l'apparence de notre site pour le moment, mais il sera bien construit et prt tre mis en forme ensuite !

<header>

: l'en-tte

La plupart des sites web possdent en gnral un en-tte, appel header en anglais. On y trouve le plus souvent un logo, une bannire, le slogan de votre site. . . Vous devrez placer ces informations l'intrieur de la balise <header> :
1 2 3

< header > <! - - Placez ici le contenu de l 'en - t te de votre page --> </ header >

La gure 11.1, par exemple, reprsente une partie du Site du Zro et vous pouvez voir son en-tte.

Figure 11.1  L'en-tte du Site du Zro

L'en-tte peut contenir tout ce que vous voulez : images, liens, textes. . .

sl peut y voir plusieurs enEttes dns votre pgeF i elleEi est doupe en plusieurs setionsD hque setion peut en e'et voir son propre <header>F
<footer>

: le pied de page

l'inverse de l'en-tte, le pied de page se trouve en gnral tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les 134

LES BALISES STRUCTURANTES DE HTML5

mentions lgales, etc.

1 2 3

< footer > <!- - Placez ici le contenu du pied de page --> </ footer >

La gure 11.2 vous montre quoi ressemble le pied de page du Site du Zro.

Figure 11.2  Pied de page du Site du Zro

<nav>

: principaux liens de navigation

La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le menu principal de votre site. Gnralement, le menu est ralis sous forme de liste puces l'intrieur de la balise <nav> :
1 2 3 4 5 6 7

< nav > < ul >

< li > <a href = " index . html " > Accueil </ a > </ li > < li > <a href = " forum . html " > Forum </ a > </ li > < li > <a href = " contact . html " > Contact </ a > </ li > </ ul > </ nav >

En gure 11.3, vous pouvez observer le menu principal de navigation du Site du Zro, qui pourrait utiliser la balise <nav>.

<section>

: une section de page

La balise <section> sert regrouper des contenus en fonction de leur thmatique. Elle englobe gnralement une portion du contenu au centre de la page. 135

CHAPITRE 11.

STRUCTURER SA PAGE

Figure 11.3  Le menu de navigation du Site du Zro

1 2 3 4

< section > < h1 > Ma section de page </ h1 > <p > Bla bla bla bla </ p > </ section >

Sur la page d'accueil du portail Free.fr, on trouve plusieurs blocs qui pourraient tre considrs comme des sections de page (gure 11.4).

Figure 11.4  Des sections de page sur le portail de Free

136

LES BALISES STRUCTURANTES DE HTML5

ghque setion peut voir son titre de niveu I @<h1>AD de mme que l9enEtte peut ontenir un titre <h1> lui ussiF ghun de es los tnt indpendnt des utresD il n9est ps illogique de retrouver plusieurs titres <h1> dns le ode de l pge weF yn insi  ve titre <h1> du <header> D  ve titre <h1> de ette <section> D etF
<aside>

: informations complmentaires

La balise <aside> est conue pour contenir des informations complmentaires au document que l'on visualise. Ces informations sont gnralement places sur le ct (bien que ce ne soit pas une obligation).
1 2 3

< aside > <!- - Placez ici des informations compl mentaires --> </ aside >

Il peut y avoir plusieurs blocs <aside> dans la page. Sur Wikipdia, par exemple, il est courant de voir droite un bloc d'informations complmentaires l'article que l'on visualise. Ainsi, sur la page prsentant la plante Saturne (gure 11.5), on trouve dans ce bloc les caractristiques de la plante (dimensions, masse, etc.).

Figure 11.5  Bloc d'informations complmentaires sur Wikipdia

<article>

: un article indpendant

La balise <article> sert englober une portion gnralement autonome de la page. C'est une partie de la page qui pourrait ainsi tre reprise sur un autre site. C'est le cas par exemple des actualits (articles de journaux ou de blogs). 137

CHAPITRE 11.

STRUCTURER SA PAGE

1 2 3 4

< article > < h1 > Mon article </ h1 > <p > Bla bla bla bla </ p > </ article >

Par exemple, voici un article sur le Site du Zro en gure 11.6.

Figure 11.6  Un article publi sur le Site du Zro

.

Rsum
Ouf, cela fait beaucoup de nouvelles balises retenir. Heureusement, je vous ai fait un petit schma (gure 11.7) pour vous aider retenir leur rle !

xe vous y trompez ps X e shm propose un exemple d9orgnistion de l pgeF ien ne vous emphe de dider que votre menu de nvigtion est droiteD ou tout en hutD que vos lises <aside> sont uEdessusD etF yn peut mme imginer une seonde lise <header>D ple ette fois l9intrieur d9une <section>F hns e sElD elle ser onsidre omme tnt l9enEtte de l setionF in(nD une setion ne doit ps forment ontenir un <article> et des <aside>F tilisez es lises uniquement si vous en vez esoinF ien ne vous interdit de rer des setions ontennt seulement des prgrphesD pr exempleF

Exemple concret d'utilisation des balises

Essayons d'utiliser les balises que nous venons de dcouvrir pour structurer notre page web. Le code ci-dessous reprend toutes les balises que nous venons de voir au sein d'une 138

EXEMPLE CONCRET D'UTILISATION DES BALISES

Figure 11.7  Sections de la page identies par les balises

page web complte :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8" / > < title > Zozor - Le Site Web </ title > </ head > < body > < header > < h1 > Zozor </ h1 > < h2 > Carnets de voyage </ h2 > </ header > < nav > < ul >

< li > <a href = " # " > Accueil </ a > </ li > < li > <a href = " # " > Blog </ a > </ li > < li > <a href = " # " > CV </a > </ li > </ ul > </ nav > < section > < aside >

139

CHAPITRE 11.

STRUCTURER SA PAGE

24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39

< h1 > propos de l ' auteur </ h1 > <p >C ' est moi , Zozor ! Je suis n un 23 novembre 2005 . </ p > </ aside > < article > < h1 > Je suis un grand voyageur </ h1 > <p > Bla bla bla bla ( texte de l ' article ) </ p > </ article > </ section > < footer > <p > Copyright Zozor - Tous droits r serv s < br / > <a href = " # " > Me contacter ! </ a > </ p > </ footer > </ body > </ html >

Copier ce code Code web : 829837  Ce code peut vous aider comprendre comment les balises doivent tre agences. Vous y reconnaissez un en-tte, un menu de navigation, un pied de page. . . et, au centre, une section avec un article et un bloc <aside> donnant des informations sur l'auteur de l'article.

quoi ressemle l pge que nous venons de rer c

rien ! Si vous testez le rsultat, vous verrez juste du texte noir sur fond blanc (gure 11.8). C'est normal, il n'y a pas de CSS ! Par contre, la page est bien structure, ce qui va nous tre utile pour la suite.

ves liens sont volontirement fties @d9o l prsene d9un simple #AD ils n9mnent don nulle prt @ehD 9est juste une pge de dmoA 3 te ne omprends ps l9intrt de es lisesF yn peut trs ien otenir le mme rsultt sns les utiliser 3
C'est vrai. En fait, ces balises sont seulement l pour expliquer l'ordinateur  Ceci est l'en-tte ,  Ceci est mon pied de page , etc. Elles n'indiquent pas, contrairement ce qu'on pourrait penser, o doit tre plac le contenu. C'est le rle du CSS, comme nous le verrons dans peu de temps maintenant. 140

ASSURER LA COMPATIBILIT AVEC IE

Figure 11.8  Une page bien structure mais sans CSS

l'heure actuelle, pour tout vous dire, ces balises ont encore assez peu d'utilit. On pourrait trs bien utiliser des balises gnriques <div> la place pour englober les direntes portions de notre contenu. D'ailleurs, c'est comme cela qu'on faisait avant l'arrive de ces nouvelles balises HTML5. Nanmoins, il est assez probable que, dans un futur proche, les ordinateurs commencent tirer parti intelligemment de ces nouvelles balises. On peut imaginer par exemple un navigateur qui choisisse d'acher les liens de navigation <nav> de manire toujours visible ! Quand l'ordinateur  comprend  la structure de la page, tout devient possible.

Assurer la compatibilit avec IE

Les nouvelles balises que nous venons de voir ne sont reconnues par Internet Explorer que depuis sa version 9 (IE9). Cela va poser un problme car, quand les anciennes versions d'IE ne connaissent pas une balise. . . elles ne traitent pas correctement la page (impossible de modier leur CSS par exemple) ! Cela peut heureusement se rgler assez facilement l'aide d'un script JavaScript. Les scripts sont des petits morceaux de code qui permettent de manipuler la page web et d'eectuer certaines actions. Nous n'allons pas nous intresser ici au JavaScript (ce n'est pas le sujet de ce cours) mais il faut savoir que ce type de script est appel depuis les pages HTML d'une faon assez similaire l'appel des chiers CSS. 141

CHAPITRE 11.

STRUCTURER SA PAGE

Les chiers JavaScript portent gnralement l'extension .js. Dans le code HTML, on les place en gnral dans la balise <head> avec cette balise :
1

< script src = " monscript . js " > </ script >

Si je vous prsente (brivement) JavaScript ici, c'est parce qu'un petit script rpondant au doux nom de HTML5shiv permet de faire en sorte que les balises que nous venons de voir (<header>, <footer>, <section>. . .) s'achent correctement sur les anciennes versions d'Internet Explorer (IE6, IE7, IE8). Concrtement, il vous sut d'ajouter les lignes suivantes dans votre code :
1 2

<! - - [ if lt IE 9 ]> < script src =" http :// html5shiv . googlecode . com / svn / trunk / html5 . js " > </ script > <![ endif ] -->

Copier ce code Code web : 317933  Placez ce code dans la balise <head> comme ceci :
1 2 3 4 5 6

7 8 9 10 11 12 13 14

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > <! - - [ if lt IE 9 ]> < script src =" http :// html5shiv . googlecode . com / svn / trunk / html5 . js " > </ script > <![ endif ] --> < title > Inclusion de HTML5shiv </ title > </ head > < body > </ body > </ html >

Et voil, votre site s'achera dsormais sans problme dans Internet Explorer !

ns rentrer dns le dtilD shez que <!--[if lt IE 9]> est un commentaire conditionnelF g9est un ommentire spil qui n9est lu que pr snternet ixplorerF sl permet de fire en sorte que le sript s9exute uniquement sur les versions d9snternet ixplorer infrieures siW @les utres nvigteurs n9en ont ps esoin et ignoreront le ommentireAF

En rsum
 Plusieurs balises ont t introduites avec HTML5 pour dlimiter les direntes zones qui constituent la page web : 142

ASSURER LA COMPATIBILIT AVEC IE

 <header> : en-tte ;  <footer> : pied de page ;  <nav> : liens principaux de navigation ;  <section> : section de page ;  <aside> : informations complmentaires ;  <article> : article indpendant.  Ces balises peuvent tre imbriques les unes dans les autres. Ainsi, une section peut avoir son propre en-tte.  Ces balises ne s'occupent pas de la mise en page. Elles servent seulement indiquer l'ordinateur le sens du texte qu'elles contiennent. On pourrait trs bien placer l'en-tte en bas de la page si on le souhaite.  Le code JavaScript HTML5shiv permet de faire en sorte que ces balises soient reconnues pour les versions d'Internet Explorer antrieures IE9.

143

CHAPITRE 11.

STRUCTURER SA PAGE

144

Chapitre

12
Dicult :

Le modle des botes

ne pge we peut tre vue omme une suession et un empilement de otesD qu9on ppelle  los F v pluprt des lments vus u hpitre prdent sont des los X <header>D <article>D <nav>F F F wis nous onnissions dj d9utres los X les prgrphes <p>D les titres <h1>F F F hns e hpitreD nous llons pprendre mnipuler es los omme de vritles otesF xous llons leur donner des dimensionsD les gener en jount sur leurs mrgesD mis ussi pprendre grer leur ontenuF F F pour viter que le texte ne dpsse de es los 3 ge sont des notions fondmentles dont nous llons voir esoin pour mettre en pge notre site weF F F oyez ttentifs 3

145

CHAPITRE 12.

LE MODLE DES BOTES

Les balises de type block et inline

En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de deux catgories :  Les balises inline : c'est le cas par exemple des liens <a></a>.  Les balises block : c'est le cas par exemple des paragraphes <p></p>.

sl existe en fit plusieurs utres tgories trs spi(quesD pr exemple pour les ellules de tleu @type table-cellA ou les pues @type list-itemAF xous n9llons ps nous y intresser pour le moment r es lises sont minoritiresF wis omment je reonnis une lise inline d9une lise lok c
C'est en fait assez facile :  block : une balise de type block sur votre page web cre automatiquement un retour la ligne avant et aprs. Il sut d'imaginer tout simplement un bloc. Votre page web sera en fait constitue d'une srie de blocs les uns la suite des autres. Mais vous verrez qu'en plus, il est possible de mettre un bloc l'intrieur d'un autre, ce qui va augmenter considrablement nos possibilits pour crer le design de notre site !  inline : une balise de type inline se trouve obligatoirement l'intrieur d'une balise block. Une balise inline ne cre pas de retour la ligne, le texte qui se trouve l'intrieur s'crit donc la suite du texte prcdent, sur la mme ligne (c'est pour cela que l'on parle de balise  en ligne ). Pour bien visualiser le concept, voici en gure 12.1 un petit schma que je vous ai concoct.

Figure 12.1  Dirence entre une balise inline et une balise block
146

LES BALISES DE TYPE BLOCK ET INLINE

 Sur fond bleu, vous avez tout ce qui est de type block.  Sur fond jaune, vous avez tout ce qui est de type inline. Comme vous pouvez le voir, les blocs sont les uns en-dessous des autres. On peut aussi les imbriquer les uns l'intrieur des autres (souvenez-vous, nos blocs <section> contiennent par exemple des blocs <aside> !). La balise inline <a></a>, elle, se trouve l'intrieur d'une balise block et le texte vient s'insrer sur la mme ligne.

Quelques exemples
An de mieux vous aider assimiler quelles balises sont inline et quelles balises sont block, voici un petit tableau dressant la liste de quelques balises courantes.

Balises block Balises inline

<p> <footer> <h1> <h2> <article> ... <em> <strong> <mark> <a> <img /> ...

Ce tableau n'est pas complet, loin de l. Si vous voulez avoir la liste complte des balises qui existent et savoir si elles sont de type inline ou block, reportez-vous l'annexe donnant la liste des balises HTML (page 285).

Les balises universelles

Vous les connaissez dj car je vous les ai prsentes il y a quelques chapitres. Ce sont des balises qui n'ont aucun sens particulier (contrairement <p> qui veut dire  paragraphe , <strong>  important , etc.). Le principal intrt de ces balises est que l'on peut leur appliquer une class (ou un id) pour le CSS quand aucune autre balise ne convient. Il existe deux balises gnriques et, comme par hasard, la seule dirence entre les deux est que l'une d'elle est inline et l'autre est block :  <span></span> (inline) ;  <div></div> (block).

Respectez la smantique !
Les balises universelles sont  pratiques  dans certains cas, certes, mais attention ne pas en abuser. Je tiens vous avertir de suite : beaucoup de webmasters mettent des <div> et des <span> trop souvent et oublient que d'autres balises plus adaptes existent. Voici deux exemples : 147

CHAPITRE 12.

LE MODLE DES BOTES

Exemple d'un span inutile : <span class="important">. Je ne devrais jamais voir ceci dans un de vos codes alors qu'il existe la balise <strong> qui sert indiquer l'importance !  Exemple d'un div inutile : <div class="titre">. Ceci est compltement absurde puisqu'il existe des balises faites spcialement pour les titres (<h1>, <h2>. . .). Oui, vous allez me dire qu'au nal le rsultat (visuel) est le mme. Je suis tout fait d'accord. Mais les balises gnriques n'apportent aucun sens la page et ne peuvent pas tre comprises par l'ordinateur. Utilisez toujours d'autres balises plus adaptes quand c'est possible. Google lui-mme le conseille pour vous aider amliorer la position de vos pages au sein de ses rsultats de recherche !


Les dimensions
Nous allons ici travailler uniquement sur des balises de type block. Pour commencer, intressons-nous la taille des blocs. Contrairement un inline, un bloc a des dimensions prcises. Il possde une largeur et une hauteur. Ce qui fait, surprise, qu'on dispose de deux proprits CSS :  width : c'est la largeur du bloc. exprimer en pixels (px) ou en pourcentage (%).  height : c'est la hauteur du bloc. L encore, on l'exprime soit en pixels (px), soit en pourcentage (%). Par dfaut, un bloc prend 100% de la largeur disponible. On peut le vrier en appliquant nos blocs des bordures ou une couleur de fond (gure 12.2). Maintenant, rajoutons un peu de CSS an de modier la largeur des paragraphes. Le CSS suivant dit :  Je veux que tous mes paragraphes aient une largeur de 50% .
1 2 3 4

p { }

width : 50 %;

Le rsultat est visible la gure 12.3. Les pourcentages seront utiles pour crer un design qui s'adapte automatiquement la rsolution d'cran du visiteur. Toutefois, il se peut que vous ayez besoin de crer des blocs ayant une dimension prcise en pixels :
1 2 3 4

p { }

width : 250px ;

Minimum et maximum
On peut demander ce qu'un bloc ait des dimensions minimales et maximales. C'est trs pratique car cela nous permet de dnir des dimensions  limites  pour que notre 148

LES DIMENSIONS

Figure 12.2  Les blocs prennent toute la largeur disponible

Figure 12.3  Un paragraphe de 50% de largeur

149

CHAPITRE 12.

LE MODLE DES BOTES

site s'adapte aux direntes rsolutions d'cran de nos visiteurs :  min-width : largeur minimale ;  min-height : hauteur minimale ;  max-width : largeur maximale ;  max-height : hauteur maximale. Par exemple, on peut demander ce que les paragraphes occupent 50% de la largeur et exiger qu'il fassent au moins 400 pixels de large dans tous les cas :
1 2 3 4 5

p { }

width : 50 %; min - width : 400px ;

Observez le rsultat en modiant la largeur de la fentre de votre navigateur. Vous allez voir que, si celle-ci est trop petite, le paragraphe se force occuper au moins 400 pixels de largeur.

Les marges
Il faut savoir que tous les blocs possdent des marges. Il existe deux types de marges :  les marges intrieures ;  les marges extrieures. Regardez bien le schma qui se trouve la gure 12.4.

Figure 12.4  Marges extrieure et intrieure

Sur ce bloc, j'ai mis une bordure pour qu'on repre mieux ses frontires.  L'espace entre le texte et la bordure est la marge intrieure (en vert).  L'espace entre la bordure et le bloc suivant est la marge extrieure (en rouge). 150

LES MARGES

En CSS, on peut modier la taille des marges avec les deux proprits suivantes :  padding : indique la taille de la marge intrieure. exprimer en gnral en pixels (px).  margin : indique la taille de la marge extrieure. L encore, on utilise le plus souvent des pixels.

ves lises de type inline possdent glement des mrgesF ous pouvez don ussi essyer es mnipultions sur e type de lisesF
Pour bien voir les marges, prenons deux paragraphes auxquels j'applique simplement une petite bordure (gure 12.5) :
1 2 3 4 5 6

p {

width : 350px ; border : 1px solid black ; text - align : justify ;

Figure 12.5  Marges par dfaut sur les paragraphes

Comme vous pouvez le constater, il n'y a par dfaut pas de marge intrieure (padding). En revanche, il y a une marge extrieure (margin). C'est cette marge qui fait que deux paragraphes ne sont pas colls et qu'on a l'impression de  sauter une ligne . 151

CHAPITRE 12.

LE MODLE DES BOTES

ves mrges pr dfut ne sont ps les mmes pour toutes les lises de type lokF issyez d9ppliquer e g des lises <div> qui ontiennent du texteD pr exemple X vous verrez queD dns e sD il n9y pr dfut ni mrge intrieureD ni mrge extrieure 3
Supposons que je veuille rajouter une marge intrieure de 12 px aux paragraphes (gure 12.6) :
1 2 3 4 5 6 7

p {

width : 350px ; border : 1px solid black ; text - align : justify ; padding : 12px ; /* Marge int rieure de 12px */

Figure 12.6  Une marge intrieure ajoute aux paragraphes

Maintenant, je veux que mes paragraphes soient plus espacs entre eux. Je rajoute la proprit margin pour demander ce qu'il y ait 50 px de marge entre deux paragraphes (gure 12.7) :
1 2 3 4

p {

width : 350px ; border : 1px solid black ;

152

LES MARGES

5 6 7 8

text - align : justify ; padding : 12px ; margin : 50px ; /* Marge ext rieure de 50px */

Figure 12.7  Une marge extrieure ajoute aux paragraphes

wis c c c ne mrge s9est rjoute guhe ussi 3
Eh oui, margin (comme padding d'ailleurs) s'applique aux quatre cts du bloc. Si vous voulez spcier des marges direntes en haut, en bas, gauche et droite, il va falloir utiliser des proprits plus prcises. . . Le principe est le mme que pour la proprit border, vous allez voir !

En haut, droite, gauche, en bas. . . Et on recommence !

L'idal serait que vous reteniez les termes suivants en anglais :  top : haut ;  bottom : bas ;  left : gauche ;  right : droite. 153

CHAPITRE 12.

LE MODLE DES BOTES

Ainsi, vous pouvez retrouver toutes les proprits de tte. Je vais quand mme vous faire la liste des proprits pour margin et padding, histoire que vous soyez srs que vous avez compris le principe. Voici la liste pour margin :  margin-top : marge extrieure en haut ;  margin-bottom : marge extrieure en bas ;  margin-left : marge extrieure gauche ;  margin-right : marge extrieure droite. Et la liste pour padding :  padding-top : marge intrieure en haut ;  padding-bottom : marge intrieure en bas ;  padding-left : marge intrieure gauche ;  padding-right : marge intrieure droite.

en hutD H px droite @le px est fulttif dns e sAD Q px en sD I px guhe F eutre nottion rourie X margin: 2px 1px; signi(e  P px de mrge en hut et en sD I px de mrge guhe et droite F

sl y d9utres fons de spi(er les mrges ve les proprits margin et paddingF r exemple X margin: 2px 0 3px 1px; signi(e  P px de mrge

Centrer des blocs

Il est tout fait possible de centrer des blocs. C'est mme trs pratique pour raliser un design centr quand on ne connat pas la rsolution du visiteur. Pour centrer, il faut respecter les rgles suivantes :  donnez une largeur au bloc (avec la proprit width) ;  indiquez que vous voulez des marges extrieures automatiques, comme ceci : margin: auto;. Essayons cette technique sur nos petits paragraphes (lignes 3 et 4) :
1 2 3 4

p {

5 6 7 8 9

width : 350px ; /* On a indiqu une largeur ( obligatoire ) */ margin : auto ; /* On peut donc demander ce que le bloc soit centr avec auto */ border : 1px solid black ; text - align : justify ; padding : 12px ; margin - bottom : 20px ;

Et voici le rsultat la gure 12.8. Ainsi, le navigateur centre automatiquement nos paragraphes ! 154

QUAND A DPASSE. . .

Figure 12.8  Centrage des paragraphes

sl n9est ependnt ps possile de entrer vertilement un lo ve ette tehniqueF eul le entrge horizontl est permisF

Quand a dpasse. . .
Lorsqu'on commence dnir des dimensions prcises pour nos blocs, comme on vient de le faire, il arrive qu'ils deviennent trop petits pour le texte qu'ils contiennent. Les proprits CSS que nous allons voir ici ont justement t cres pour contrler les dpassements. . . et dcider quoi faire si jamais cela devait arriver.

overflow

: couper un bloc

Supposons que vous ayez un long paragraphe et que vous vouliez (pour une raison qui ne regarde que vous) qu'il fasse 250 px de large et 110 px de haut. Ajoutons-lui une bordure et remplissons-le de texte. . . ras-bord (gure 12.9) :
1 2 3

p {

width : 250px ;

155

CHAPITRE 12.

LE MODLE DES BOTES

4 5 6 7

height : 110px ; text - align : justify ; border : 1px solid black ;

Figure 12.9  Le texte dpasse du bloc de paragraphe

rorreur 3 ve texte dpsse des limites du prgrphe 3
Eh oui ! Vous avez demand des dimensions prcises, vous les avez eues ! Mais. . . le texte ne tient pas l'intrieur d'un si petit bloc. Si vous voulez que le texte ne dpasse pas des limites du paragraphe, il va falloir utiliser la proprit overflow. Voici les valeurs qu'elle peut accepter :  visible (par dfaut) : si le texte dpasse les limites de taille, il reste visible et sort volontairement du bloc.  hidden : si le texte dpasse les limites, il sera tout simplement coup. On ne pourra pas voir tout le texte.  scroll : l encore, le texte sera coup s'il dpasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de dlement pour qu'on puisse lire l'ensemble du texte. C'est un peu comme un cadre l'intrieur de la page.  auto : c'est le mode  pilote automatique . En gros, c'est le navigateur qui dcide 156

QUAND A DPASSE. . .

de mettre ou non des barres de dlement (il n'en mettra que si c'est ncessaire). C'est la valeur que je conseille d'utiliser le plus souvent. Avec overflow: hidden; le texte est donc coup (on ne peut pas voir la suite), comme sur la gure 12.10.

Figure 12.10  Le texte est coup aux limites du paragraphe

Essayons maintenant overflow: auto; avec le code CSS suivant (rsultat la gure 12.11) :
1 2 3 4 5 6 7 8

p {

width : 250px ; height : 110px ; text - align : justify ; border : 1px solid black ; overflow : auto ;

Eurka ! Des barres de dlement nous permettent maintenant de consulter le contenu qui n'tait pas visible.

sl existe une nienne lise rwvD <iframe>D qui donne peu prs le mme rsulttF gependntD l9usge de ette lise est donseill ujourd9huiF ille permet de hrger tout le ontenu d9une utre pge rwv u sein de votre pgeF
word-wrap

: couper les textes trop larges

Si vous devez placer un mot trs long dans un bloc, qui ne tient pas dans la largeur, vous allez adorer word-wrap. Cette proprit permet de forcer la csure des trs longs mots (gnralement des adresses un peu longues). La gure 12.12 reprsente ce que l'on peut avoir quand on crit une URL un peu longue dans un bloc. L'ordinateur ne sait pas  couper  l'adresse car il n'y a ni espace, ni tiret. Il ne sait pas faire la csure. Avec le code suivant, la csure sera force ds que le texte risque de dpasser (gure 12.13). 157

CHAPITRE 12.

LE MODLE DES BOTES

Figure 12.11  Des barres de dlement sont ajoutes au paragraphe

Figure 12.12  Le texte dborde en largeur

158

QUAND A DPASSE. . .

1 2 3 4

p { }

word - wrap : break - word ;

Figure 12.13  Le texte est coup pour ne pas dborder

te onseille d9utiliser ette fontionnlit ds qu9un lo est suseptile de ontenir du texte sisi pr des utilisteurs @pr exemple sur les forums de votre futur siteAF ns ette stueD on peut  sser filement le design d9un site @en rivnt pr exemple une longue suite de  AF

En rsum
 On distingue deux principaux types de balises en HTML :  Le type block (<p>, <h1>. . .) : ces balises crent un retour la ligne et occupent par dfaut toute la largeur disponible. Elles se suivent de haut en bas.  Le type inline (<a>, <strong>. . .) : ces balises dlimitent du texte au milieu d'une ligne. Elles se suivent de gauche droite.  On peut modier la taille d'une balise de type block avec les proprits CSS width (largeur) et height (hauteur). 159

CHAPITRE 12.

LE MODLE DES BOTES

 On peut dnir des minima et maxima autoriss pour la largeur et la hauteur : min-width, max-width, min-height, max-height.  Les lments de la page disposent chacun de marges intrieures (padding) et extrieures (margin).  S'il y a trop de texte l'intrieur d'un bloc de dimensions xes, il y a un risque de dbordement. Dans ce cas, il peut tre judicieux de rajouter des barres de dlement avec la proprit overflow ou de forcer la csure avec word-wrap.

160

Chapitre

13
Dicult :

Le positionnement en CSS

oii venu le moment tnt ttendu X nous llons pprendre modi(er l position des lments sur notre pgeF v thorie que nous llons voir ii nous ser indispensle u prohin hpitreD dns lequel nous rliserons ensemleD ps psD le design de notre premier site 3 ous llez voirD il existe plusieurs tehniques permettnt d9e'etuer l mise en pge de son siteF ghune ses vntges et ses dfutsD e ser vous de sletionner elle qui vous semle l meilleure selon votre sF

161

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

Le positionnement ottant
v tehnique prsente ii l9est titre d9informtionF ille est utilise pr l mjorit des sites l9heure tuelle mis omporte un ertin nomre de dfutsF ne meilleure tehniqueD le positionnement inline-blockD ser prsente un peu plus loin X je vous enourge l9utiliser utnt que possileF
Vous vous souvenez de la proprit float ? Nous l'avons utilise pour faire otter une image autour du texte (gure 13.1).

Figure 13.1  L'image otte autour du texte grce la proprit float

Il se trouve que cette proprit est aujourd'hui utilise par la majorit des sites web pour. . . faire la mise en page ! En eet, si on veut placer son menu gauche et le contenu de sa page droite, c'est a priori un bon moyen. Je dis bien a priori car, la base, cette proprit n'a pas t conue pour faire la mise en page et nous allons voir qu'elle a quelques petits dfauts. Reprenons le code HTML structur que nous avons ralis il y a quelques chapitres :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < title > Zozor - Le Site Web </ title > </ head > < body > < header > < h1 > Zozor </ h1 > < h2 > Carnets de voyage </ h2 > </ header > < nav > < ul >

< li > <a href = " # " > Accueil </ a > </ li > < li > <a href = " # " > Blog </ a > </ li > < li > <a href = " # " > CV </ a > </ li > </ ul >

162

LE POSITIONNEMENT FLOTTANT

20 21 22 23 24 25

</ nav > < section > < aside > < h1 > propos de l ' auteur </ h1 > <p >C ' est moi , Zozor ! Je suis n un 23 novembre 2005 . </ p > </ aside > < article > < h1 > Je suis un grand voyageur </ h1 > <p > Bla bla bla bla ( texte de l ' article ) </ p > </ article > </ section > < footer > <p > Copyright Zozor - Tous droits r serv s <a href = " # " > Me contacter ! </ a > </ p > </ footer > </ body > </ html >

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Copier ce code Code web : 829837  Je rappelle que, sans CSS, la mise en page ressemble la gure 13.2. Nous allons essayer de placer le menu gauche et le reste du texte droite. Pour cela, nous allons faire otter le menu gauche et laisser le reste du texte se placer sa droite. Nous voulons que le menu occupe 150 pixels de large. Nous allons aussi rajouter une bordure noire autour du menu et une bordure bleue autour du corps ( la balise <section>) pour bien les distinguer :
1 2 3 4 5 6 7 8 9 10 11

nav {

float : left ; width : 150px ; border : 1px solid black ;

section { border : 1px solid blue ; }

Voici le rsultat la gure 13.3. Ce n'est pas encore tout fait cela. Il y a deux dfauts (mis part le fait que c'est encore bien moche) :  Le texte du corps de la page touche la bordure du menu. Il manque une petite 163

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

Figure 13.2  Une page HTML sans CSS

Figure 13.3  Le menu est bien positionn mais coll au texte

164

LE POSITIONNEMENT FLOTTANT

marge. . .  Plus embtant encore : la suite du texte passe. . . sous le menu ! On veut bien que le pied de page ( Copyright Zozor ) soit plac en bas sous le menu mais, par contre, on aimerait que tout le corps de page soit constitu d'un seul bloc plac droite. Pour rsoudre ces deux problmes d'un seul coup, il faut ajouter une marge extrieure gauche de notre <section>, marge qui doit tre par ailleurs suprieure la largeur du menu. Si notre menu fait 150 px, nous allons par exemple donner une marge extrieure gauche de 170 px notre section de page (gure 13.4), ici la ligne 10.
1 2 3 4 5 6 7 8 9 10 11 12

nav {

float : left ; width : 150px ; border : 1px solid black ;

section { margin - left : 170px ; border : 1px solid blue ; }

Figure 13.4  Le corps de page est bien align droite du menu

Voil, le contenu de la page est maintenant correctement align. 165

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

l9inverseD vous pouvez ussi prfrer qu9un lment se ple oligtoirement sous le menuF hns e sD il fudr utiliserF F F clear: both;D que nous vions dj douvertD qui olige l suite du texte se positionner sous l9lment )ottntF

Transformez vos lments avec display

Je vais vous apprendre ici modier les lois du CSS (brrr. . .). Accrochez-vous ! Il existe en CSS une proprit trs puissante : display. Elle est capable de transformer n'importe quel lment de votre page d'un type vers un autre. Avec cette proprit magique, je peux par exemple imposer mes liens (originellement de type inline) d'apparatre sous forme de blocs :
1 2 3 4

a { }

display : block ;

ce moment-l, les liens vont se positionner les uns en-dessous des autres (comme des blocs normaux) et il devient possible de modier leurs dimensions ! Voici quelques-unes des principales valeurs que peut prendre la proprit display en CSS (il y en a encore d'autres) :

Valeur
inline

<a>, <em>, <span>. . . block <p>, <div>, <section>. . . inline-block <select>, <input> none <head>

Exemples

Description

Elments d'une ligne. Se placent les uns ct des autres. Elments en forme de blocs. Se placent les uns endessous des autres et peuvent tre redimensionns. Elments positionns les uns ct des autres (comme les inlines) mais qui peuvent tre redimensionns (comme les blocs). Elments non achs.

On peut donc dcider de masquer compltement un lment de la page avec cette proprit. Par exemple, si je veux masquer les lments qui ont la classe  secret , je vais crire :
1 2 3 4

. secret { display : none ; }

our fire pprtre es lments pr l suiteD vous devrez fire ppel tvE riptF gertins sites we utilisent ette tehnique pourD pr dfutD msquer les sousEmenus qui ne s90hent que lorsqu9on prourt les menusF
166

LE POSITIONNEMENT INLINE-BLOCK

it quel est e nouveu type izrreD inline-block c g9est un mlnge c

Oui, ce type d'lment est en fait une combinaison des inlines et des blocs. C'est un peu le meilleur des deux mondes : les lments s'achent cte cte et peuvent tre redimensionns. Peu de balises sont aches comme cela par dfaut, c'est surtout le cas des lments de formulaire (comme <input>) que nous dcouvrirons un peu plus tard. Par contre, avec la proprit display, nous allons pouvoir transformer d'autres balises en inline-block, ce qui va nous aider raliser notre design.

Le positionnement inline-block
Les manipulations que demande le positionnement ottant se rvlent parfois un peu dlicates sur des sites complexes. Ds qu'il y a un peu plus qu'un simple menu mettre en page, on risque d'avoir recourir des clear: both; qui complexient rapidement le code de la page. Si le positionnement ottant reste, de loin, le mode de positionnement le plus utilis sur le Web l'heure actuelle, d'autres techniques existent et bien peu de webmasters le savent. L'une d'elles, tonnamment puissante, est passe sous le nez des concepteurs de sites web alors qu'elle existe depuis CSS 2.1, c'est--dire depuis plus de dix ans ! Elle consiste transformer vos lments en inline-block avec la proprit display. Quelques petits rappels sur les lments de type inline-block :  Ils se positionnent les uns ct des autres (exactement ce qu'on veut pour placer notre menu et le corps de notre page !).  On peut leur donner des dimensions prcises (l encore, exactement ce qu'on veut !). Nous allons transformer en inline-block les deux lments que nous voulons placer cte cte : le menu de navigation et la section du centre de la page.
1 2 3 4 5 6 7 8 9 10 11 12

nav {

display : inline - block ; width : 150px ; border : 1px solid black ;

section { display : inline - block ; border : 1px solid blue ; }

Ce qui nous donne comme rsultat la gure 13.5. 167

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

Figure 13.5  Le menu et le corps sont cte cte. . . mais positionns en bas !
Argh ! Ce n'est pas tout fait ce qu'on voulait. Et en fait, c'est normal : les lments inline-block se positionnent sur une mme ligne de base (appele baseline), en bas. Heureusement, le fait d'avoir transform les lments en inline-block nous permet d'utiliser une nouvelle proprit, normalement rserve aux tableaux : vertical-align. Cette proprit permet de modier l'alignement vertical des lments. Voici quelquesunes des valeurs possibles pour cette proprit :  baseline : aligne de la base de l'lment avec celle de l'lment parent (par dfaut) ;  top : aligne en haut ;  middle : centre verticalement ;  bottom : aligne en bas ;  (valeur en px ou %) : aligne une certaine distance de la ligne de base (baseline). Il ne nous reste plus qu' aligner nos lments en haut (lignes 6 et 13), et le tour est jou (gure 13.6) !
1 2 3 4 5 6 7 8 9

nav {

display : inline - block ; width : 150px ; border : 1px solid black ; vertical - align : top ;

section

168

LE POSITIONNEMENT INLINE-BLOCK

10 11 12 13 14

display : inline - block ; border : 1px solid blue ; vertical - align : top ;

Figure 13.6  Le menu et le corps sont aligns en haut et cte cte

ous noterez que le orps @l <section>A ne prend ps toute l lrgeurF in e'etD e n9est plus un lo 3 v setion oupe seulement l ple dont elle esoinF i el ne vous onvient ps pour votre designD modi(ez l tille de l setion ve widthF
Et voil ! Pas besoin de s'embter avec les marges, aucun risque que le texte passe sous le menu. . . Bref, c'est parfait ! . . . Quoi ? Pardon, on me signale dans l'oreillette qu'un certain navigateur vient jouer les trouble-fte. . .

inline-block

et compatibilit Internet Explorer

Le positionnement inline-block est parfaitement compris par Internet Explorer partir de IE8. Pour les anciennes versions, IE6 et IE7 en particulier, le positionnement inline-block fonctionne. . . mais uniquement sur les lments qui taient des inline la base ! 169

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

On peut heureusement rgler ce problme avec une petite  bidouille  : si le navigateur est IE6 ou IE7, on transforme l'lment en inline et on change son comportement en lui donnant le layout (en lui aectant la proprit zoom: 1;). L'lment pourra alors tre redimensionn.

ve layout est un mode d90hge un peu prtiulier d9snternet ixplorerD qui peut tre l soure de nomreux ugsF gomme el devient rpideE ment trs tehniqueD je psse volontirement lEdessus et je vous inviteD si le sujet vous intresseD onsulter l9rtile onernnt HasLayout sur le site AlsacrationsF
Lire l'article Code web : 640405  Pour commencer, il va falloir crer une seconde feuille de style CSS spciale pour Internet Explorer 6 et 7. On va utiliser pour cela un commentaire conditionnel, que nous avions dj aperu auparavant, qui ne sera lu que par IE6 et IE7 :
1 2 3 4 5 6 7 8 9 10 11

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < link rel = " stylesheet " href = " style . css " / > <! - - [ if lte IE 7] > < link rel =" stylesheet " href =" style_ie . css " / > <![ endif ] --> < title > Zozor - Le Site Web </ title > </ head >

Si le navigateur est IE6 ou IE7, une seconde feuille de style CSS, style_ie.css, sera charge et viendra s'ajouter la premire. Dedans, nous ferons toutes nos  bidouilles  pour rgler les problmes lis aux vieilles versions d'Internet Explorer, an que notre site s'ache correctement chez tout le monde, mme chez ceux qui vivent encore la prhistoire ;-) . Dans style_ie.css, rajoutez simplement le code suivant :
1 2 3 4 5

nav , section { display : inline ; zoom : 1 ; }

Voil, c'est tout ! Dans votre feuille de style classique (style.css), continuez utiliser inline-block comme avant. Ceux qui ont IE6 ou IE7 liront en plus ce code un peu spcial, qui leur permet d'obtenir le mme rsultat visuel ! 170

LES POSITIONNEMENTS ABSOLU, FIXE ET RELATIF

Les positionnements absolu, xe et relatif

Il existe d'autres techniques un peu particulires permettant de positionner avec prcision des lments sur la page :  Le positionnement absolu : il nous permet de placer un lment n'importe o sur la page (en haut gauche, en bas droite, tout au centre, etc.).  Le positionnement xe : identique au positionnement absolu mais, cette fois, l'lment reste toujours visible, mme si on descend plus bas dans la page. C'est un peu le mme principe que background-attachment: fixed; (si vous vous en souvenez encore).  Le positionnement relatif : permet de dcaler l'lment par rapport sa position normale.

gomme pour les )ottntsD les positionnements soluD (x et reltif fonE tionnent ussi sur des lises de type inlineF outefoisD vous verrez qu9on l9utilise ien plus souvent sur des lises lok que sur des lises inlineF
Il faut d'abord faire son choix entre les trois modes de positionnement disponibles. Pour cela, on utilise la proprit CSS position laquelle on donne une de ces valeurs :  absolute : positionnement absolu ;  fixed : positionnement xe ;  relative : positionnement relatif. Nous allons tudier un un chacun de ces positionnements.

Le positionnement absolu
Le positionnement absolu permet de placer un lment (rellement) n'importe o sur la page. Pour eectuer un positionnement absolu, on doit crire :
1 2 3 4

element { position : absolute ; }

Mais cela ne sut pas ! On a dit qu'on voulait un positionnement absolu, mais encore faut-il dire o l'on veut que le bloc soit positionn sur la page. Pour ce faire, on va utiliser quatre proprits CSS :  left : position par rapport la gauche de la page ;  right : position par rapport la droite de la page ;  top : position par rapport au haut de la page ;  bottom : position par rapport au bas de la page. On peut leur donner une valeur en pixels, comme 14px, ou bien une valeur en pourcentage, comme 50%. 171

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

Si ce n'est pas trs clair pour certains d'entre vous, la gure 13.7 devrait vous aider comprendre.

Figure 13.7  Positionnement absolu de l'lment sur la page

Avec cela, vous devriez tre capables de positionner correctement votre bloc. Il faut donc utiliser la proprit position et au moins une des quatre proprits cidessus (top, left, right ou bottom). Si on crit par exemple :
1 2 3 4 5 6

element { position : absolute ; right : 0px ; bottom : 0px ; }

. . . cela signie que le bloc doit tre positionn tout en bas droite (0 pixel par rapport la droite de la page, 0 par rapport au bas de la page). Si on essaye de placer notre bloc <nav> en bas droite de la page, on obtient le mme rsultat qu' la gure 13.8. On peut bien entendu ajouter une marge intrieure (padding) au menu pour qu'il soit moins coll sa bordure. Les lments positionns en absolu sont placs par-dessus le reste des lments de la page ! Par ailleurs, si vous placez deux lments en absolu vers le mme endroit, ils risquent de se chevaucher. Dans ce cas, utilisez la proprit z-index pour indiquer quel lment doit apparatre au-dessus des autres. 172

LES POSITIONNEMENTS ABSOLU, FIXE ET RELATIF

Figure 13.8  Le menu est positionn en bas droite de l'cran

1 2 3 4 5 6 7 8 9 10 11 12 13 14

element { position : absolute ; right : 0px ; bottom : 0px ; z - index : 1 ; } element2 { position : absolute ; right : 30px ; bottom : 30px ; z - index : 2 ; }

L'lment ayant la valeur de z-index la plus leve sera plac par dessus les autres, comme le montre la gure 13.9.

ne petite prision tehnique qui son importne X le positionnement solu ne se fit ps forment toujours pr rpport u oin en hut guhe de l fentre 3 i vous positionnez en solu un lo e qui se trouve dns un utre lo fD luiEmme positionn en solu @ou (xe ou reltifAD lors votre lo e se positionner pr rpport u oin suprieur guhe du lo fF pites le testD vous verrez 3
173

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

Figure 13.9  Positionnement des lments absolus

Le positionnement xe
Le principe est exactement le mme que pour le positionnement absolu sauf que, cette fois, le bloc reste xe sa position, mme si on descend plus bas dans la page.
1 2 3 4 5 6

element { position : fixed ; right : 0px ; bottom : 0px ; }

Essayez d'observer le rsultat, vous verrez que le menu reste dans le cas prsent ach en bas droite mme si on descend plus bas dans la page (gure 13.10).

Le positionnement relatif
Plus dlicat, le positionnement relatif peut vite devenir dicile utiliser. Ce positionnement permet d'eectuer des  ajustements  : l'lment est dcal par rapport sa position initiale. Prenons par exemple un texte important, situ entre deux balises <strong>. Pour commencer, je le mets sur fond rouge pour qu'on puisse mieux le reprer :
1 2 3 4 5

strong { background - color : red ; /* Fond rouge */ color : yellow ; /* Texte de couleur jaune */ }

Cette fois, le schma que je vous ai montr tout l'heure pour les positions absolue et xe ne marche plus. Pourquoi ? Parce que l'origine a chang : le point de coordonnes (0, 0) ne se trouve plus en haut gauche de votre fentre comme c'tait le cas tout l'heure. Non, cette fois l'origine se trouve en haut gauche. . . de la position actuelle de votre lment. 174

LES POSITIONNEMENTS ABSOLU, FIXE ET RELATIF

Figure 13.10  Le menu reste ach en bas droite en toutes circonstances

Tordu n'est-ce pas ? C'est le principe de la position relative. Le schma en gure 13.11 devrait vous aider comprendre o se trouve l'origine des points.

Figure 13.11  Origine de la position relative

Donc, si vous faites un position: relative; et que vous appliquez une des proprits top, left, right ou bottom, le texte sur fond rouge va se dplacer par rapport la position o il se trouve. Prenons un exemple : je veux que mon texte se dcale de 55 pixels vers la droite et de 10 pixels vers le bas. Je vais donc demander ce qu'il soit dcal de 55 pixels par rapport au  bord gauche  et de 10 pixels par rapport au  bord haut  (lignes 6 8) :
1 2 3 4 5 6 7 8 9

strong { background - color : red ; color : yellow ; position : relative ; left : 55px ; top : 10px ;

175

CHAPITRE 13.

LE POSITIONNEMENT EN CSS

Le texte est alors dcal par rapport sa position initiale, comme illustr la gure 13.12.

Figure 13.12  Le texte est dcal

En rsum
 La mise en page d'un site web s'eectue en CSS. Plusieurs techniques sont notre disposition.  Le positionnement ottant (avec la proprit float) est l'un des plus utiliss l'heure actuelle. Il permet par exemple de placer un menu gauche ou droite de la page. Nanmoins, cette proprit n'a pas t initialement conue pour cela et il est prfrable, si possible, d'viter cette technique.  Le positionnement inline-block consiste aecter un type inline-block nos lments grce la proprit display. Ils se comporteront comme des inlines (placement de gauche droite) mais pourront tre redimensionns comme des blocs (avec width et height). Cette technique est prfrer au positionnement ottant.  Le positionnement absolu permet de placer un lment o l'on souhaite sur la page, au pixel prs.  Le positionnement xe est identique au positionnement absolu mais l'lment restera toujours visible mme si on descend plus bas dans la page.  Le positionnement relatif permet de dcaler un bloc par rapport sa position normale.  Un lment A positionn en absolu l'intrieur d'un autre lment B (lui-mme positionn en absolu, xe ou relatif) se positionnera par rapport l'lment B, et non par rapport au coin en haut gauche de la page.

176

Chapitre

14
Dicult :

TP : cration d'un site pas pas

n(n D nous y voilF g9est un hpitre un peu prtiulierD ssez di'rent de e que vous vez lu jusqu9 mintenntF in fitD 9est e que j9ppelle un  @rvux rtiquesAF wintenntD vous ne pouvez plus vous ontenter de lire mes hpitres moiti endormisD vous llez devoir mettre l min l pte en mme temps que moiF ous vez lu euoup de thorie jusqu9ii mis vous vous demndez srement omment font les wemsters pour rer d9ussi eux sitesF ous vous dites que vous tes enore loin d9voir les onnissnes nessires pour onstruire tout un siteF F F ih ien vous vous trompez 3

177

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

Maquettage du design
Je vois d'ici le tableau. Vous vous dites  Chouette, on va crer un site complet , vous ouvrez votre diteur de texte (Notepad++ par exemple), et vous me regardez en me demandant  Bon, par quelle ligne de code on commence ? . Et l, je dois justement vous arrter. Prenez un crayon et un papier : il faut d'abord rchir ce que vous voulez crer comme site. De quoi va-t-il parler ? Avez-vous un thme, un objectif ? Je sais, par exprience, que la plupart d'entre vous  cherche juste apprendre  pour le moment. Vous n'avez donc peut-tre pas encore d'ide prcise en tte. Dans ce cas, je vous suggre de crer un site pour vous prsenter, pour assurer votre prsence sur le Web : ce site parlera de vous, il y aura votre CV, vos futures ralisations et pourquoi pas votre blog. En ce qui me concerne, dans ce TP, je vais raliser le site web de notre mascotte Zozor, le clbre ne du Site du Zro (gure 14.1). Zozor a dcid de partir en voyage travers le monde et sa premire tape sera. . . San Francisco ! Il veut donc crer un site web pour qu'on le connaisse et pour qu'on suive son priple travers le monde.

Figure 14.1  L'ne Zozor, la mascote du Site du Zro

La premire tape consiste maquetter le design, pour avoir un objectif du site web raliser. partir de l, deux possibilits :  soit vous tes des graphistes (ou vous en connaissez un) ayant l'habitude d'imaginer des designs, avec des logiciels comme Photoshop ;  soit vous n'tes pas trs cratifs, vous manquez d'inspiration et, dans ce cas, vous allez chercher votre inspiration sur des sites web comme freehtml5templates.com, qui vous proposent des ides de design et qui peuvent mme vous donner le code HTML / CSS tout prt ! Pour ma part j'ai fait appel Fan Jiyong, un graphiste, qui m'a propos le design (qui me plat beaucoup !) que vous pouvez voir la gure 14.2. Cette maquette est en fait une simple image du rsultat qu'on veut obtenir. Je demande au graphiste de me fournir les lments qui vont m'aider construire le design, c'est-dire les codes couleurs utiliss, les images dcoupes (gure 14.3) ainsi que les polices dont j'aurai besoin. Tlcharger les images et les polices Code  web : 991714  178
 

MAQUETTAGE DU DESIGN

Figure 14.2  La maquette du site web que nous allons raliser

Figure 14.3  Quelques images  dcoupes  utilises dans le design

179

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

Il ne nous reste plus qu' raliser ce site web ! Nous allons procder en deux temps : 1. Nous allons construire le squelette HTML de la page. 2. Puis nous allons le mettre en forme et le mettre en page avec CSS. Allez, au boulot !

Organiser le contenu en HTML

La premire chose faire est de distinguer les principaux blocs sur la maquette. Ces blocs vont constituer le squelette de notre page. Pour crer ce squelette, nous allons utiliser direntes balises HTML :  les balises structurantes de HTML5, que nous connaissons : <header>, <section>, <nav>, etc. ;  la balise universelle <div> quand aucune balise structurante ne convient.

gomment je sis quelle lise utiliser moi c

C'est vous de dcider. De prfrence, utilisez une balise qui a du sens (comme les balises structurantes <header>, <section>, <nav>) mais, si aucune balise ne vous semble mieux convenir, optez pour la balise gnrique <div>. Regardez la gure 14.4 pour voir ce que je vous propose comme structure.

yn peut imginer d9utres fons de fire le doupgeD retenez ien que m proposition n9est ps forment l seule et unique solution 3
Toutes les balises que l'on va utiliser n'apparaissent pas sur cette maquette mais cela vous permet d'avoir une ide de l'imbrication que je propose pour les lments. Le HTML n'est pas vraiment la partie complexe de la ralisation du site web. En fait, si vous avez bien compris comment imbriquer des balises, vous ne devriez pas avoir de mal raliser un code approchant du mien :
1 2 3 4 5 6 7 8 9 10

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < link rel = " stylesheet " href = " style . css " / > < title > Zozor - Carnets de voyage </ title > </ head > < body > < div id = " bloc_page " >

180

ORGANISER LE CONTENU EN HTML

Figure 14.4  La maquette dcoupe en direntes sections

181

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

11 12 13

14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

< header > < div id = " titre_principal " > < img src = " images / zozor_logo . png " alt = " Logo de Zozor " id = " logo " / > < h1 > Zozor </ h1 > < h2 > Carnets de voyage </ h2 > </ div > < nav > < ul >

< li > <a < li > <a < li > <a < li > <a </ ul > </ nav > </ header >

href = " # " > Accueil </ a > </ li > href = " # " > Blog </ a > </ li > href = " # " > CV </ a > </ li > href = " # " > Contact </ a > </ li >

32 33 34 35 36 37

< div id = " banniere_image " > < div id = " banniere_description " > Retour sur mes vacances aux tats - Unis ... <a href = " # " class = " bouton_rouge " > Voir l ' article < img src = " images / flecheblanchedroite . png " alt = " " / > </ a > </ div > </ div > < section > < article > < h1 > < img src = " images / ico_epingle . png " alt = " Cat gorie voyage " class =" ico_categorie " / > Je suis un grand voyageur </ h1 > <p > Lorem ipsum dolor sit amet ... </ p > <p > Vivamus sed libero nec mauris pulvinar facilisis ut non sem ... </ p > <p > Phasellus ligula massa , congue ac vulputate non , dignissim at augue ... </ p > </ article > < aside > < h1 > propos de l ' auteur </ h1 > < img src = " images / bulle . png " alt = " " id =" fleche_bulle " / > <p id = " photo_zozor " > < img src = " images / zozor_classe . png " alt =" Photo de Zozor " / > </ p > <p > Laisse - moi le temps de me pr senter : je m ' appelle Zozor , je suis n un 23 novembre 2005 . </ p > <p > Bien maigre , n ' est - ce pas ? C ' est pourquoi , aujourd ' hui , j ' ai d cid d '

38 39

40

41 42 43 44

45

46

47

182

ORGANISER LE CONTENU EN HTML

48

49 50 51 52 53 54 55 56 57 58 59 60

crire ma biographie ( ou zBiographie , comme vous voulez !) afin que les z ros sachent qui je suis r ellement . </ p > <p > < img src = " images / facebook . png " alt = " Facebook " / > < img src = " images / twitter . png " alt = " Twitter " / >< img src =" images / vimeo . png " alt = " Vimeo " / > < img src = " images / flickr . png " alt = " Flickr " / > < img src = " images / rss . png " alt = " RSS " / > </ p > </ aside > </ section > < footer > < div id = " tweet " > < h1 > Mon dernier tweet </ h1 > <p > Hii haaaaaan ! </ p > <p > le 12 mai 23h12 </ p > </ div > < div id = " mes_photos " > < h1 > Mes photos </ h1 > <p > < img src = " images / photo1 . jpg " alt = " Photographie " / > < img src = " images / photo2 . jpg " alt = " Photographie " / > < img src = " images / photo3 . jpg " alt = " Photographie " / > < img src = " images / photo4 . jpg " alt = " Photographie " / > </ p > </ div > < div id = " mes_amis " > < h1 > Mes amis </ h1 > < ul > < li > <a href = " # " > Pupi le lapin </ a > </ li > < li > <a href = " # " > Mr Baobab </ a > </ li > < li > <a href = " # " > Kaiwaii </ a > </ li > < li > <a href = " # " > Perceval . eu </ a ></ li > </ ul > < ul > < li > <a href = " # " > Belette </ a > </ li > < li > <a href = " # " > Le concombre masqu </a > </ li > < li > <a href = " # " > Ptit prince </ a > </ li > < li > <a href = " # " > Mr Fan </ a > </ li > </ ul > </ div > </ footer > </ div > </ body > </ html >

61 62 63 64 65 66 67 68 69 70 71 72

73 74 75 76 77 78 79 80

Copier ce code Code web : 244518 

183

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

Petite particularit : comme vous le voyez, tout le contenu de la page est plac dans une grande balise <div> ayant pour id bloc_page (on l'appelle aussi parfois main_wrapper en anglais). Cette balise englobe tout le contenu, ce qui va nous permettre de xer facilement les dimensions de la page et de centrer notre site l'cran. Pour le reste, aucune grosse dicult signaler. Notez que je n'ai pas forcment pens toutes les balises du premier coup : en ralisant le design en CSS, il m'est parfois apparu qu'il tait ncessaire d'englober une partie des balises d'un bloc <div> pour m'aider dans la ralisation du design. Pour le moment, comme vous vous en doutez, le site web n'est pas bien beau (et encore, je suis gentil). Vous pouvez voir le rsultat actuel la gure 14.5.

Figure 14.5  Apparence du site web constitu uniquement du HTML

C'est en CSS que la magie va maintenant oprer.

Mettre en forme en CSS

Les choses se compliquent un peu plus lorsqu'on arrive au CSS. En eet, il faut du travail (et parfois un peu d'astuce) pour obtenir un rsultat se rapprochant de la maquette. Je dis bien  se rapprochant  car vous ne pourrez jamais obtenir un rsultat identique au pixel prs. Mettez-vous bien cela en tte : le but est d'obtenir le rendu le plus proche possibl e, sans chercher la perfection. Mme si vous obtenez selon vous  la perfection  sur un 184

METTRE EN FORME EN CSS

navigateur, vous pouvez tre srs qu'il y aura des dirences sur un autre navigateur (plus ancien) ou sur une autre machine que la vtre. Nous allons donc faire au mieux et ce sera dj du travail, vous verrez. Pour mettre en forme le design, je vais procder en plusieurs tapes. Je vais m'occuper des lments suivants, dans cet ordre : 1. Polices personnalises. 2. Dnition des styles principaux de la page (largeur du site, fond, couleur par dfaut du texte). 3. En-tte et liens de navigation. 4. Bannire (reprsentant le pont de San Francisco). 5. Section principale du corps de page, au centre. 6. Pied de page (footer ).

Les polices personnalises

Pour les besoins du design, mon graphiste a utilis trois polices sur sa maquette :  Trebuchet MS (police courante) ;  BallparkWeiner (police exotique) ;  Day Roman (police exotique).

ous trouverez es polies dns le (hier que je vous i fit tlhrger un peu plus hutF i e n9est ps enore fitD je vous enourge fortement le tlhrgerF
La plupart des ordinateurs sont quips de Trebuchet MS (quoique pas ncessairement tous, on pourrait la faire tlcharger). Par contre, les deux autres polices sont un peu originales et ne sont srement pas prsentes sur les ordinateurs de vos visiteurs. Nous allons les leur faire tlcharger. Comme vous le savez, il faut proposer plusieurs versions de ces polices pour les diffrents navigateurs. Dafont ne propose que le .ttf en tlchargement. Par contre, FontSquirrel propose un gnrateur de polices utiliser en CSS3 avec @font-face : vous lui envoyez un .ttf, l'outil transforme le chier dans tous les autres formats ncessaires et vous fournit mme le code CSS prt l'emploi ! Gnrateur de polices Code web : 688318  Je m'en suis servi pour gnrer les direntes versions des deux polices exotiques que je vais utiliser. Ensuite, dans mon chier CSS, je rajoute ce code qui m'a t fourni par FontSquirrel pour dclarer les nouvelles polices :
1 2 3

/* D finition des polices personnalis es */ @font - face

185

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

4 5 6 7

8 9 10

11 12 13 14 15 16 17 18 19

font - family : ' BallparkWeiner ' ; src : url ( ' polices / ballpark . eot ') ; src : url ( ' polices / ballpark . eot ?# iefix ') format ( ' embedded opentype ') , url (' polices / ballpark . woff ') format ( ' woff ') , url (' polices / ballpark . ttf ') format (' truetype ') , url (' polices / ballpark . svg # BallparkWeiner ') format (' svg ') ; font - weight : normal ; font - style : normal ;

20 21 22 23 24 25

@font - face { font - family : ' Dayrom ' ; src : url ( ' polices / dayrom . eot ') ; src : url ( ' polices / dayrom . eot ?# iefix ') format ( ' embedded opentype ') , url (' polices / dayrom . woff ') format ( ' woff ') , url (' polices / dayrom . ttf ') format (' truetype ') , url (' polices / dayrom . svg # Dayrom ') format ( ' svg ') ; font - weight : normal ; font - style : normal ; }

En plus de cela, il faut bien entendu mettre disposition les chiers des polices. Comme vous le voyez, j'ai cr un sous-dossier polices dans lequel j'ai mis les direntes versions de mes polices.

Dnition des styles principaux

On peut maintenant s'attaquer dnir quelques styles globaux pour tout le design de notre page. On va dnir une image de fond, une police et une couleur de texte par dfaut, et surtout on va dimensionner notre page et la centrer l'cran.
1 2 3 4 5 6 7 8 9 10 11 12 13

/* El ments principaux de la page */ body {

background : url ( ' images / fond_jaune . png ') ; font - family : ' Trebuchet MS ' , Arial , sans - serif ; color : # 181818 ;

# bloc_page { width : 900px ; margin : auto ;

186

METTRE EN FORME EN CSS

14 15 16 17 18 19 20 21

} section h1 , footer h1 , nav a { font - family : Dayrom , serif ; font - weight : normal ; text - transform : uppercase ; }

Avec #bloc_page, le bloc qui englobe toute la page, j'ai x les limites 900 pixels de large. Avec les marges automatiques, le design sera centr.

i vous souhitez rer un design qui s9dpte ux dimensions de l9rn du visiteurD d(nissez une lrgeur en pourentge plutt qu9en pixelsF
J'ai utilis la proprit CSS text-transform: uppercase; (que nous n'avons pas vue auparavant) pour faire en sorte que mes titres soient toujours crits en majuscules. Cette proprit transforme en eet le texte en majuscules (elle peut aussi faire l'inverse avec lowercase). Notez qu'on aurait aussi pu crire les titres directement en majuscules dans le code HTML. La gure 14.6 vous montre ce qu'on obtient pour le moment avec le code CSS. On est encore loin du rsultat nal mais on se sent dj un petit peu plus  chez soi .

En-tte et liens de navigation

D'aprs la structure que j'ai propose, l'en-tte contient aussi les liens de navigation. Commenons par dnir l'en-tte et, en particulier, le logo en haut gauche. Nous verrons ensuite comment mettre en forme les liens de navigation.

L'en-tte
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* Header */ header { background : url ( ' images / separateur . png ') repeat - x bottom ; } # titre_principal { display : inline - block ; } header h1 { font - family : ' BallparkWeiner ', serif ;

187

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

Figure 14.6  Le fond et les limites de la page commencent apparatre

188

METTRE EN FORME EN CSS

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

font - size : 2 . 5em ; font - weight : normal ;

# logo , header h1 { display : inline - block ; margin - bottom : 0px ; } header h2 { font - family : Dayrom , serif ; font - size : 1 . 1em ; margin - top : 0px ; font - weight : normal ; }

Nous crons une distinction entre l'en-tte et le corps de page grce une image de fond. Les lments sont positionns en inline-block et nous personnalisons les polices et les dimensions. Rien d'extraordinaire pour le moment.

Les liens de navigation

La mise en forme des liens de navigation est un petit peu plus intressante. Vous l'avez vu, j'ai cr une liste puces pour les liens. . . mais une telle liste s'ache habituellement en hauteur, et non en largeur. Heureusement, cela se change facilement, vous allez voir :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/* Navigation */ nav {

display : inline - block ; width : 740px ; text - align : right ;

nav ul { list - style - type : none ; } nav li { display : inline - block ; margin - right : 15px ; } nav a { font - size : 1 . 3em ;

189

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

24 25 26 27 28 29 30 31 32 33

color : # 181818 ; padding - bottom : 3px ; text - decoration : none ;

nav a : hover { color : # 760001 ; border - bottom : 3px solid # 760001 ; }

La principale nouveaut est la dnition CSS list-style-type: none;, qui permet de retirer l'image ronde servant de puce. Chaque lment de la liste (<li>) est positionn en inline-block, ce qui nous permet de placer les liens cte cte comme nous le souhaitions. Le reste des dnitions ne contient rien d'extraordinaire : des dimensions, des couleurs, des bordures. . . Autant de choses que vous connaissez dj. Notez que je ne trouve pas forcment les bonnes valeurs du premier coup, il me faut parfois ttonner un peu pour trouver une apparence proche de la maquette d'origine. La gure 14.7 reprsente le rsultat que nous obtenons avec les derniers ajouts de CSS.

Figure 14.7  L'en-tte est mis en page

190

METTRE EN FORME EN CSS

La bannire
Bien, passons maintenant un exercice un peu plus dicile mais trs intressant : la bannire ! Notre maquette comporte une jolie bannire reprsentant le pont de San Francisco. Cette bannire, sur votre site, peut tre amene voluer. Ici, elle peut servir illustrer, par exemple, le dernier billet de blog de notre ami Zozor, qui vient de visiter San Francisco. La bannire est intressante plus d'un titre :  elle comporte des angles arrondis ;  la description est crite sur un fond lgrement transparent ;  le bouton  Voir l'article  est ralis en CSS, avec des angles arrondis ;  une ombre vient donner du volume la bannire. Voici le code que j'ai utilis pour raliser toute la bannire :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/* Banni re */ # banniere_image { margin - top : 15px ; height : 200px ; border - radius : 5px ; background : url ( ' images / sanfrancisco . jpg ') no - repeat ; position : relative ; box - shadow : 0px 4px 4px # 1c1a19 ; margin - bottom : 25px ; } # banniere_description { position : absolute ; bottom : 0 ; border - radius : 0px 0px 5px 5px ; width : 99 . 5 % ; height : 33px ; padding - top : 15px ; padding - left : 4px ; background - color : rgb ( 24 , 24 , 24 ); /* Pour les anciens navigateurs */ background - color : rgba ( 24 , 24 , 24 , 0 . 8 ) ; color : white ; font - size : 0 . 8em ; } . bouton_rouge { display : inline - block ; height : 25px ; position : absolute ; right : 5px ;

24 25 26 27 28 29 30 31 32 33 34

191

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

bottom : 5px ; background : url ( ' images / fond_degraderouge . png ') repeat - x ; border : 1px solid # 760001 ; border - radius : 5px ; font - size : 1 . 2em ; text - align : center ; padding : 3px 8px 0px 8px ; color : white ; text - decoration : none ;

. bouton_rouge img { border : 0 ; }

Ce code est assez technique et riche en fonctionnalits CSS. C'est peut-tre la partie la plus dlicate raliser dans cette page. Vous pouvez constater que j'ai choisi d'acher l'image du pont sous forme d'image de fond dans le bloc <div> de la bannire. J'ai aussi donn une position relative la bannire, sans utiliser de proprits pour en modier le dcalage. . . Pourquoi ? A priori, une position relative sans dcalage ne sert rien. . . Et pourtant, cela m'a t particulirement utile pour placer le bouton  Voir l'article  en bas droite de la bannire. En eet, j'ai plac le bouton en absolu l'intrieur.

ve outon ne devritEil ps se pler en s droite de l pge c

Non, souvenez-vous ce que je vous avais dit : si un bloc est positionn en absolu dans un autre bloc lui-mme positionn en absolu, xe ou relatif, alors il se positionne l'intrieur de ce bloc. Notre bannire est positionne en relatif (sans dcalage). Comme le bouton est positionn en absolu l'intrieur, il se place donc en bas droite de la bannire ! C'est une technique particulirement utile et puissante dans la ralisation d'un design, souvenez-vous en ! Dernier dtail : pour la lgende de la bannire, j'ai choisi d'utiliser la transparence avec la notation RGBa plutt que la proprit opacity. En eet, opacity aurait rendu tout le contenu du bloc transparent, y compris le bouton  Voir l'article  l'intrieur. J'ai trouv prfrable de rendre transparente seulement la couleur de fond plutt que tout le bloc. Le rsultat est plutt sympathique (gure 14.8). Cela en jette, vous ne trouvez pas ? 192

METTRE EN FORME EN CSS

Figure 14.8  La bannire est mise en forme

our rliser le dgrd du outon  oir l9rtile D j9i utilis une imge de fond reprsentnt le dgrd et j9i rpt ette imge horizontlementF hez qu9il existe une proprit gQ linear-gradient qui permet de rliser des dgrds sns voir reourir une imge de fondF on usge tnt un peu omplexe tuellementD j9i hoisi de ne ps l9utiliser dns et exempleD mis vous pouvez vous doumenter son sujet si vous le souhitez 3

Le corps
Le corps, au centre de la page, est dans notre cas constitu d'une unique balise <section> (mais il pourrait y en avoir plusieurs, bien sr). Pas beaucoup de dicults sur le corps, le positionnement du bloc  propos de l'auteur  se fait en inline-block. On joue avec les angles arrondis et les ombres, on ajuste un peu les marges et les dimensions du texte, et nous y voil !
1 2 3 4 5 6 7 8 9

/* Corps */ article , aside { display : inline - block ; vertical - align : top ; text - align : justify ; }

193

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

article { width : 625px ; margin - right : 15px ; } . ico_categorie { vertical - align : middle ; margin - right : 8px ; } article p { font - size : 0 . 8em ; } aside { position : relative ; width : 235px ; background - color : # 706b64 ; box - shadow : 0px 2px 5px # 1c1a19 ; border - radius : 5px ; padding : 10px ; color : white ; font - size : 0 . 9em ; } # fleche_bulle { position : absolute ; top : 100px ; left : - 12px ; } # photo_zozor { text - align : center ; } # photo_zozor img { border : 1px solid # 181818 ; } aside img { margin - right : 5px ; }

194

METTRE EN FORME EN CSS

La petite dicult ici tait de russir placer la che gauche du bloc <aside>  propos de l'auteur  pour donner l'eet d'une bulle. L encore, notre meilleur ami est le positionnement absolu. La technique est la mme : je positionne le bloc <aside> en relatif (sans eectuer de dcalage), ce qui me permet ensuite de positionner l'image de la che en absolu par rapport au bloc <aside> (et non par rapport la page entire). En jouant sur le dcalage de l'image, je peux la placer avec prcision o je veux, au pixel prs (gure 14.9) !

Figure 14.9  Le corps de la page est mis en forme

Le pied de page
Il ne nous reste plus que le pied de page mettre en forme. Celui-ci est constitu de trois sous-blocs que j'ai matrialiss par des <div> auxquels j'ai donn des id pour mieux les reprer. Ces blocs sont positionns en inline-block les uns ct des autres.
1 2 3 4 5

/* Footer */ footer { background : url ( ' images / ico_top . png ') no - repeat top center , url (' images / separateur . png ') repeat - x top , url ( ' images / ombre . png ') repeat - x top ; padding - top : 25px ; }

6 7 8

195

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

footer p , footer ul { font - size : 0 . 8em ; } footer h1 { font - size : 1 . 1em ; } # tweet , # mes_photos , # mes_amis { display : inline - block ; vertical - align : top ; } # tweet { width : 28 %; } # mes_photos { width : 35 %; } # mes_amis { width : 31 %; } # mes_photos img { border : 1px solid # 181818 ; margin - right : 2px ; } # mes_amis ul { display : inline - block ; vertical - align : top ; margin - top : 0 ; width : 48 %; list - style - image : url ( ' images / ico_liensexterne . png ') ; padding - left : 2px ; } # mes_amis a { text - decoration : none ;

196

METTRE EN FORME EN CSS

59 60

color : # 760001 ;

Deux petites particularits signaler sur le pied de page :  J'ai utilis la fonctionnalit des images de fond multiples de CSS3, ce qui m'a permis de raliser le sparateur entre le corps et le pied de page. Il est constitu de trois images : le sparateur, la petite che vers le haut et un lger dgrad.  J'ai modi la puce de la liste  Mes amis , en bas droite, avec la proprit list-style-image qui m'a permis d'utiliser une image personnalise plutt que les puces standard. Il existe de nombreuses proprits CSS spciques comme celle-ci et nous ne pouvons pas toutes les voir une par une dans ce cours mais, maintenant que vous tes des habitus du CSS, vous n'aurez aucun mal apprendre les utiliser simplement en lisant l'annexe fournissant la liste des principales proprits CSS (page 291). Et voil, notre design est termin (gure 14.10) !

Figure 14.10  Le pied de page est mis en forme

Ah, vous pensez en avoir ni ? Il reste hlas encore un peu de travail : il faut tester notre site sur dirents navigateurs. Idalement, il vaut mieux le faire au fur et mesure de la mise en place du design. En particulier, les anciennes versions d'Internet Explorer (IE6 IE8) mritent qu'on s'y attarde car le rsultat n'est pas forcment celui auquel on s'attendait. . . 197

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

Assurer la compatibilit avec IE

Depuis Internet Explorer 9 (IE9), nous n'avons plus vraiment de raisons de nous plaindre du lgendaire retard d'Internet Explorer dans la gestion du CSS. Voyez vousmmes le rsultat (gure 14.11), il est trs bon sur ce navigateur sans aucune adaptation ncessaire.

Figure 14.11  Le site sous IE9 : aucun problme signaler !

Par contre, vous risquez d'attraper quelques cheveux blancs en regardant le rsultat sur les anciennes versions d'Internet Explorer.

gomment je fis pour voir le rsultt sous siT siVD si je suis quip d9siW c
Je vous avais parl d'IETester, un outil pratique mais instable (il plante souvent). Vous pouvez l'essayer pour tester votre site sur les anciennes versions d'IE. Il y a cependant une solution plus stable et plus rapide : appuyez sur la touche F12 de votre clavier lorsque vous tes sous IE9 et une barre ddie aux dveloppeurs web apparat. L, un menu vous permet de changer le comportement d'IE (gure 14.12) an de simuler les anciennes versions ( partir de IE7). L, en gnral, il arrive qu'on prenne trs peur. La gure 14.13 vous montre ce qu'on obtient en  mode IE7 . 198

ASSURER LA COMPATIBILIT AVEC IE

Figure 14.12  Changement du moteur de rendu sous IE

Figure 14.13  Le site sous IE7 : rien ne s'ache correctement !

199

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

Avant de prparer votre valise pour aller vivre en Patagonie loin de ce monde cruel, laissez-moi vous redonner le moral avec cette phrase rassurante : tout problme a une solution (rptez cela autant de fois que ncessaire). En fait, notre site ne rencontre que deux problmes principaux sur les anciennes versions d'IE :  Le positionnement inline-block n'est pas bien gr sous IE6 et IE7, ce qui fait que la plupart de nos positionnements ne fonctionnent pas pour le moment. . . Mais nous avons vu qu'une astuce permet de rgler le problme sans trop d'eorts !  Les balises structurantes de HTML5 (<header>, <nav>, <aside>. . .) ne sont pas gres sous IE6, IE7 et IE8, ce qui pose de gros problmes d'achage. . . Mais, l encore, un petit script ajout au dbut de votre code HTML permet de rgler le problme ! Par contre, il faudra faire une croix sur certaines fonctionnalits plus rcentes de CSS3 qui ne sont pas gres sur ces vieilles versions :  les coins arrondis ;  les images de fond multiples ;  la transparence ;  les ombres. tant donn que ce sont des fonctionnalits lies l'apparence, nous ne chercherons pas les faire fonctionner sur les anciennes versions d'IE. Si toutefois vous y tenez, sachez que, l encore, des scripts existent et permettent d'muler la plupart de ces fonctionnalits manquantes, mais cela vous demandera pas mal de travail supplmentaire et votre site risque d'tre plus lent sur ces navigateurs. Du moment que le site reste lisible sur les anciennes versions d'IE, je vous recommande de ne pas vous proccuper trop de ces problmes.

vorsqu9on epte que son site soit  un peu moins eu sur les niennes versions des nvigteursD on dit qu9on fit une dgradation gracieuseF gel veut dire qu9on ne herhe ps otenir tous les e'etsD mis on s9e'ore d9voir un site qui reste qund mme lisile sur les vieux nvigteursF

Faire fonctionner les balises structurantes de HTML5

Nous l'avons vu, il sut d'ajouter un simple bout de code JavaScript dans l'en-tte de son site et le tour est jou (lignes 6 8) :
1 2 3 4 5 6 7

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < link rel = " stylesheet " href = " style . css " / > <! - - [ if lt IE 9 ]> < script src =" http :// html5shiv . googlecode . com / svn / trunk / html5 . js " > </ script >

200

ASSURER LA COMPATIBILIT AVEC IE

8 9 10

<![ endif ] --> < title > Zozor - Carnets de voyage </ title > </ head >

ve (hier tvript ser tlhrg depuis les serveurs de qoogle X 9est une tehnique rpide qui vous vite d9voir grer vousEmmes le (hierF i vous le souhitezD vous pouvez ussi en ruprer une opie et l pler t des (hiers de votre siteF

Rgler le positionnement inline-block

Pour grer le positionnement inline-block, nous avons vu qu'il tait ncessaire de crer une feuille de style spciale pour les anciennes versions d'Internet Explorer. Il faut utiliser un CSS un peu dirent pour que les vieilles versions d'IE  comprennent  ce qu'il faut faire. En crant une feuille de style spciale pour les vieilles versions d'IE (qu'on pourrait appeler style_ie.css) et en utilisant la technique ci-dessous, on peut reproduire le comportement des inline-block :
1 2 3 4 5 6 7 8 9 10 11

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8" / > < link rel = " stylesheet " href = " style . css " / > <!- - [ if lte IE 7 ]> < link rel =" stylesheet " href =" style_ie . css " / > <![ endif ] --> < title > Zozor - Le Site Web </ title > </ head >

La feuille de style style_ie.css contiendra des dclarations comme celle-ci :

1 2 3 4 5

element { display : inline ; zoom : 1 ; }

Cette technique doit tre applique sur chaque lment positionn en inline-block.

h9utres di'renes existent sur les vieilles versions d9si X le texte n9est ps toujours l onne tilleD ertins los sont eux ussi ml dimensionE nsD etF ges di'renes doivent tre rgles u s pr s dns l feuille style_ie.cssF
201

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

Vrier la validit
Le W3C propose sur son site web un outil appel le  Validateur  ( Validator  en anglais). Le validateur est une sorte de programme qui va analyser votre code source et vous dire s'il est correctement crit ou s'il comporte des erreurs que vous devez corriger. Souvenez-vous : le W3C a tabli des normes. Il est ncessaire de les respecter, pour qu'on soit sr que tous les sites web parlent la mme  langue . Il existe un validateur pour HTML et un validateur pour CSS ( mettre dans vos favoris !). Celui pour CSS comportant quelques bugs (il signale comme invalides des feuilles CSS qui sont tout fait valides), nous ne nous y attarderons pas. Par contre, le validateur HTML va tre trs intressant pour nous. Validateur du W3C Code web : 710420  Vous pouvez valider votre page web de trois faons direntes, c'est pour cela qu'il y a trois onglets :  adresse (URL) ;  envoi du chier .html ;  copier-coller du code HTML. Pour le moment, notre site web n'est pas encore disponible sur le Web, ce qui fait qu'il n'a pas d'adresse URL. Le mieux est donc d'envoyer le chier .html que l'on a fait ou encore de copier-coller directement le code HTML. Si vous envoyez votre code HTML et que tout se passe bien, le validateur va vous rpondre avec le message reprsent la gure 14.14.


Figure 14.14  Le validateur du W3C nous informe que notre page ne comporte pas
d'erreur Dans ce cas, cela signie que tout va bien et que vous avez bien construit votre page ! Malheureusement, il arrivera souvent que vous ayez des erreurs. Dans ce cas, vitez de paniquer comme cela :

e iiigy 3 3 3 w pge we n9est ps vlideD je ne vis ps m9en sortirD je suis ern pr les erreursD fites quelque hose idezEmmmoiiiiii 3
Vous aviez une belle page web, elle s'achait bien, elle tait jolie, et pourtant le validateur vous rpond avec un message rouge inquitant, en vous disant que votre page web n'est pas bien construite. Tout d'abord, mettez-vous bien ceci en tte : ce n'est pas parce que votre page web s'ache correctement qu'elle ne comporte pas d'erreur. Votre page web peut tre toute belle et comporter beaucoup d'erreurs. 202

VRIFIER LA VALIDIT

uel intrt de les orriger lors c

Il faut savoir que les navigateurs  essaient  de ne pas acher les erreurs, lorsqu'ils en rencontrent, pour ne pas perturber l'internaute. Mais rien ne vous dit que d'autres navigateurs ne vont pas se comporter bizarrement ! Avoir une page web valide, c'est donc avoir la possibilit de dormir tranquille en sachant que l'on a bien fait les choses comme il faut. Cela simplie le travail des programmes qui lisent les pages web. De plus, et c'est vri, une page web correctement construite aura plus de chances d'tre mieux positionne dans les rsultats de recherche de Google, ce qui vous amnera. . . plus de visiteurs ! Voici une liste de conseils qui peuvent vous aider rsoudre les erreurs qui risquent de vous tre signales tt ou tard :  Tous vos textes doivent en gnral tre dans des balises de paragraphes. Il est interdit de mettre du texte directement entre les balises <body></body> sans l'avoir entour des fameux <p></p>. Ceci est aussi valable pour les retours la ligne <br />, qui doivent tre l'intrieur de paragraphes. C'est une erreur ultra-courante chez les dbutants.
1 2 3

<p > Ceci est un texte correctement plac dans un paragraphe . < br / > Les balises < br / > doivent se trouver l ' int rieur d ' un paragraphe , ne l ' oubliez pas </ p > Ceci est un texte en - dehors d ' un paragraphe . C ' est interdit . < br / >

4 5 6

 Toutes vos images doivent comporter un attribut alt qui indique ce que contient l'image. Si, par hasard, votre image est purement dcorative (vous ne pouvez pas en trouver de description), vous tes autoriss ne rien mettre comme valeur pour l'attribut alt.
1 2 3 4

<! - - L ' image comporte une description --> < img src = " photo . jpg " alt = " Une photo de moi " / > <! - - L ' image ne comporte pas de description mais a quand m me un attribut alt --> < img src = " deco . png " alt = " " / > <! - - Les balises ne sont pas ferm es dans leur ordre d ' ouverture --> <p > Texte <em > important </ p > </ em > <! - - Les balises sont ferm es dans leur ordre d ' ouverture --> <p > Texte <em > important </ em > </ p >

 Vos balises doivent tre fermes dans l'ordre.

1

2 3 4 5

Gardez bien ce schma en tte, beaucoup de dbutants font cette erreur. 203

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

 Si vos liens comportent des &, vous devez les remplacer par le code &amp; pour viter toute confusion au navigateur.
1 2 3 4 5

<! - - Exemple d ' un mauvais lien en HTML --> <a href = " http :// www . site . com /? jour = 15 & mois = 10 & an = 2000 " > <! - - Exemple d ' un bon lien en HTML --> <a href = " http :// www . site . com /? jour = 15 & amp ; mois = 10 & amp ; an = 2000 ">

 Vriez enn que vous n'avez pas utilis des balises anciennes et dsormais obsoltes en HTML5 (comme le vieux <frame>, la balise <marquee>. . . Le validateur vous dira  Element XXX undened  (balise inconnue) ou encore  There is no attribute XXX  (attribut inconnu). Tout le monde fait des erreurs, alors ne paniquez pas. Corrigez pas pas votre page web jusqu' ce que le validateur vous ache un beau rsultat en vert.

Le code nal
Je mets disposition le code nal de la page web que nous avons ralise. Vous pouvez galement visualiser le rsultat (gure 14.15) en ligne grce un code web.

Figure 14.15  Apparence nale du site web



Accder au site en ligne Code web : 708495  204

LE CODE FINAL

Vous pouvez aussi tlcharger un chier ZIP contenant tous les chiers du site pour pouvoir le tester chez vous. Tlcharger le ZIP Code web : 975009 


our juster u mieux le site sur les niennes versions d9snternet ixplorerD vous verrez je n9i ps r dns e ode (nl de feuille style_ie.cssF l pleD j9i utilis une utre tehnique qui onsiste donner une lsse spile @omme .ie7A l lise <body> uniquement sur les niennes versions d9siD e qui me permet de svoir quelle est l version du nvigteur dns le (hier g @.ie7 footer permet pr exemple de modi(er le style du footer sur siUAF

205

CHAPITRE 14.

TP : CRATION D'UN SITE PAS PAS

206

Quatrime partie
Fonctionnalits volues

207

Chapitre

15
Dicult :

Les tableaux

ndispensles pour orgniser les informtionsD les tleux sont un petit peu dlits onstruire en rwv X el explique que je vous les prsente seulement mintenntF sl v en e'et flloir imriquer de nouvelles lises rwv dns un ordre prisF xous llons ommener pr onstruire des tleux siquesD puis nous les omplexi(erons u fur et mesure X fusion de ellulesD division en multiples setionsF F F xous douvrirons ussi les proprits g lies ux tleuxD qui nous permettront de personnliser leur ppreneF

209

CHAPITRE 15.

LES TABLEAUX

Un tableau simple
La premire balise connatre est <table> </table>. C'est cette balise qui permet d'indiquer le dbut et la n d'un tableau. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. Exemple :
1 2 3 4 5 6 7

<p > Ceci est un paragraphe avant le tableau . </ p > < table > <! - - Ici , on crira le contenu du tableau --> </ table > <p > Ceci est un paragraphe apr s le tableau . </ p >

fonD et qu9ritEon l9intrieur du tleu c

L, prparez-vous subir une avalanche de nouvelles balises. Pour commencer en douceur, voici deux nouvelles balises trs importantes :  <tr> </tr> : indique le dbut et la n d'une ligne du tableau ;  <td> </td> : indique le dbut et la n du contenu d'une cellule. En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des direntes cellules (<td>). Schmatiquement, un tableau se construit comme la gure 15.1.

Figure 15.1  Un tableau, avec des cellules contenues dans des lignes
On a une balise de ligne (<tr>) qui englobe un groupe de cellules (<td>). Par exemple, si je veux faire un tableau deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :
1 2 3 4 5

< table > < tr >

< td > Carmen </ td > < td > 33 ans </ td > < td > Espagne </ td >

210

UN TABLEAU SIMPLE

6 7 8 9 10 11 12

</ tr > < tr > < td > Michelle </ td > < td > 26 ans </ td > < td > tats - Unis </ td > </ tr > </ table >

Le rsultat est un peu dprimant (gure 15.2).

Figure 15.2  Un tableau sans bordures

g9est un tleu c ve texte s9est rit l suite et il n9y mme ps de ordures 3
Oui, un tableau sans CSS parat bien vide. Et justement, rajouter des bordures est trs simple, vous connaissez dj le code CSS correspondant !
1 2 3 4

td /* Toutes les cellules des tableaux ... */ { border : 1px solid black ; /* auront une bordure de 1px */ }

Et voici le rsultat la gure 15.3.

Figure 15.3  Chaque cellule a sa propre bordure

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En eet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici. Heureusement, il existe une proprit CSS spcique aux tableaux, border-collapse, qui signie  coller les bordures entre elles . Cette proprit peut prendre deux valeurs :  collapse : les bordures seront colles entre elles, c'est l'eet qu'on recherche ici ;  separate : les bordures seront dissocies (valeur par dfaut)
1 2 3

table { border - collapse : collapse ; /* Les bordures du tableau seront coll es ( plus joli ) */ }

211

CHAPITRE 15.

LES TABLEAUX

5 6 7 8

td { }

border : 1px solid black ;

La gure 15.4 reprsente le rsultat obtenu.

Figure 15.4  Les bordures sont colles les unes aux autres
Voil qui est mieux !

La ligne d'en-tte
Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tte du tableau. Dans l'exemple ci-dessous, les en-ttes sont  Nom ,  ge  et  Pays . La ligne d'entte se cre avec un <tr> comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadres par des balises <th> et non pas <td> !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< table > < tr >

< th > Nom </ th > < th > ge </ th > < th > Pays </ th > </ tr > < tr >

< td > Carmen </ td > < td > 33 ans </ td > < td > Espagne </ td > </ tr > < tr > < td > Michelle </ td > < td > 26 ans </ td > < td > tats - Unis </ td > </ tr > </ table >

La ligne d'en-tte est trs facile reconnatre pour deux raisons :  les cellules sont des <th> au lieu des <td> habituels ;  c'est la premire ligne du tableau (c'est idiot, mais encore faut-il le prciser). Comme le nom des cellules est un peu dirent pour l'en-tte, il faut penser mettre jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tte (gure 15.5).
1

table

212

UN TABLEAU SIMPLE

2 3 4 5 6 7 8

border - collapse : collapse ; } td , th /* Mettre une bordure sur les td ET les th */ { border : 1px solid black ; }

Figure 15.5  Un tableau avec un en-tte

Comme vous pouvez le constater, votre navigateur a mis en gras le texte des cellules d'en-tte. C'est ce que font en gnral les navigateurs mais, si vous le dsirez, vous pouvez changer cela coups de CSS : modier la couleur de fond des cellules d'en-tte, leur police, leur bordure, etc.

Titre du tableau
Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau. Notre exemple est constitu d'une liste de personnes. . . oui mais alors ? Qu'est-ce que cela reprsente ? Sans titre de tableau, vous le voyez, on est un peu perdu. Heureusement, il y a <caption> ! Cette balise se place tout au dbut du tableau, juste avant l'en-tte. C'est elle qui contient le titre du tableau (gure 15.6) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< table > < caption > Passagers du vol 377 </ caption > < th > Nom </ th > < th > ge </ th > < th > Pays </ th > </ tr > < tr > < td > Carmen </ td > < td > 33 ans </ td > < td > Espagne </ td > </ tr > < tr > < td > Michelle </ td > < td > 26 ans </ td > < td > tats - Unis </ td > </ tr > </ table > < tr >

213

CHAPITRE 15.

LES TABLEAUX

Figure 15.6  Un tableau avec un titre

C'est quand mme plus clair ! Sachez que vous pouvez changer la position du titre avec la proprit CSS caption-side qui peut prendre quatre valeurs :  top : le titre sera plac au-dessus du tableau (par dfaut) ;  bottom : le titre sera plac en dessous du tableau ;  left : le titre sera plac gauche du tableau ;  right : le titre sera plac droite du tableau.

Un tableau structur
Nous avons appris construire des petits tableaux simples. Ces petits tableaux susent dans la plupart des cas, mais il arrivera que vous ayez besoin de raliser des tableaux plus. . . complexes. Nous allons dcouvrir deux techniques particulires :  Pour les gros tableaux, il est possible de les diviser en trois parties :  En-tte ;  Corps du tableau ;  Pied de tableau.  Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles.

Diviser un gros tableau

Si votre tableau est assez gros, vous aurez tout intrt le dcouper en plusieurs parties. Pour cela, il existe des balises HTML qui permettent de dnir les trois  zones  du tableau :  l'en-tte (en haut) : il se dnit avec les balises <thead></thead> ;  le corps (au centre) : il se dnit avec les balises <tbody></tbody> ;  le pied du tableau (en bas) : il se dnit avec les balises <tfoot></tfoot>. Que mettre dans le pied de tableau ? Gnralement, si c'est un long tableau, vous y recopiez les cellules d'en-tte. Cela permet de voir, mme en bas du tableau, quoi se rapporte chacune des colonnes. Schmatiquement, un tableau en trois parties se dcoupe donc comme illustr la gure 15.7. C'est un peu droutant mais il est conseill d'crire les balises dans l'ordre suivant : 214

UN TABLEAU STRUCTUR

Figure 15.7  Un tableau dcoup en plusieurs parties

1. <thead> 2. <tfoot> 3. <tbody> Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et enn la partie principale (<tbody>). Le navigateur se chargera d'acher chaque lment au bon endroit, ne vous inquitez pas. Voici donc le code crire pour construire le tableau en trois parties :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

< table > < caption > Passagers du vol 377 </ caption > < thead > <! - - En - t te du tableau --> < tr > < th > Nom </ th > < th > ge </ th > < th > Pays </ th > </ tr > </ thead > < tfoot > <! - - Pied de tableau --> < tr > < th > Nom </ th > < th > ge </ th > < th > Pays </ th > </ tr > </ tfoot > < tbody > <! - - Corps du tableau --> < tr > < td > Carmen </ td > < td > 33 ans </ td > < td > Espagne </ td > </ tr > < tr > < td > Michelle </ td >

215

CHAPITRE 15.

LES TABLEAUX

28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

< td > 26 ans </ td > < td > tats - Unis </ td > </ tr > < tr > < td > Fran ois </ td > < td > 43 ans </ td > < td > France </ td > </ tr > < tr > < td > Martine </ td > < td > 34 ans </ td > < td > France </ td > </ tr > < tr > < td > Jonathan </ td > < td > 13 ans </ td > < td > Australie </ td > </ tr > < tr > < td > Xu </ td > < td > 19 ans </ td > < td > Chine </ td > </ tr > </ tbody > </ table >

sl n9est ps oligtoire d9utiliser es trois lises @<thead>D <tbody>D <tfoot>A dns tous les tleuxF in fitD vous vous en servirez surtout si votre tleu est ssez gros et que vous vez esoin de l9orgniser plus lirementF our les  petits tleuxD vous pouvez grder sns prolme l9orgnistion plus simple que nous vons vue u dutF

3, 2, 1. . . Fusioooon !
Dans certains tableaux complexes, vous aurez besoin de  fusionner  des cellules entre elles. Un exemple de fusion ? Regardez le tableau la gure 15.8, qui dresse une liste de lms et indique qui ils s'adressent.

Figure 15.8  Un tableau contenant des titres de lms et leur public

Pour le dernier lm, vous voyez que les cellules ont t fusionnes : elles ne font plus qu'une. C'est exactement l'eet qu'on cherche obtenir. 216

UN TABLEAU STRUCTUR

Pour eectuer une fusion, on rajoute un attribut la balise <td>. Il faut savoir qu'il existe deux types de fusion :  La fusion de colonnes : c'est ce que je viens de faire dans cet exemple. La fusion s'eectue horizontalement. On utilisera l'attribut colspan.  La fusion de lignes : l, deux lignes seront groupes entre elles. La fusion s'eectuera verticalement. On utilisera l'attribut rowspan. Comme vous le savez, vous devez donner une valeur l'attribut (que ce soit colspan ou rowspan). Il faut indiquer le nombre de cellules fusionner entre elles. Dans notre exemple, nous avons fusionn deux cellules : celle de la colonne  Pour enfants ?  et celle de  Pour adolescents ? . On devra donc crire :
1

< td colspan = " 2 " >

. . . qui signie :  Cette cellule est la fusion de deux cellules . Il est possible de fusionner plus de cellules la fois (trois, quatre, cinq. . . autant que vous voulez). Voil le code HTML qui me permet de raliser la fusion correspondant au tableau prcdent :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< table > < tr >

< th > Titre du film </ th > < th > Pour enfants ? </ th > < th > Pour adolescents ? </ th > </ tr > < tr > < td > Massacre la tron onneuse </ td > < td >Non , trop violent </ td > < td > Oui </ td > </ tr > < tr > < td > Les bisounours font du ski </ td > < td >Oui , adapt </ td > < td > Pas assez violent ... </ td > </ tr > < tr > < td > Lucky Luke , seul contre tous </ td > < td colspan = " 2 " > Pour toute la famille ! </ td > </ tr > </ table >

Une remarque importante : vous voyez que la ligne 19 ne contient que deux cellules au lieu de trois (il n'y a que deux balises <td>). C'est tout fait normal car j'ai fusionn les deux dernires cellules entre elles. Le <td colspan="2"> indique que cette cellule prend la place de deux cellules la fois.

it pour l fusion vertile ve rowspanD on fit omment c

217

CHAPITRE 15.

LES TABLEAUX

Cela se complique un petit peu. Pour notre exemple, nous allons  inverser  l'ordre de notre tableau : au lieu de mettre les titres de lms gauche, on va les placer en haut. C'est une autre faon de voir le tableau : au lieu de le construire en hauteur, on peut le construire en longueur. Dans ce cas, le colspan n'est plus adapt, c'est un rowspan qu'il faut utiliser :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< table > < tr >

< th > Titre du film </ th > < td > Massacre la tron onneuse </ td > < td > Les bisounours font du ski </ td > < td > Lucky Luke , seul contre tous </ td > </ tr > < tr > < th > Pour enfants ? </ th > < td >Non , trop violent </ td > < td >Oui , adapt </ td > < td rowspan = " 2 " > Pour toute la famille ! </ td > </ tr > < tr > < th > Pour adolescents ? </ th > < td > Oui </ td > < td > Pas assez violent ... </ td > </ tr > </ table >

Rsultat : les cellules sont fusionnes verticalement (gure 15.9) !

Figure 15.9  Les cellules ont t fusionnes verticalement

xotez qu9on peut modi(er l9lignement vertil du texte des ellules de tE leux ve l proprit vertical-align que nous vons douverte dns le hpitre sur l mise en pgeF

En rsum
 Un tableau s'insre avec la balise <table> et se dnit ligne par ligne avec <tr>.  Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'entte).  Le titre du tableau se dnit avec <caption>.  On peut ajouter une bordure aux cellules du tableau avec border. Pour fusionner les bordures, on utilise la proprit CSS border-collapse. 218

UN TABLEAU STRUCTUR

 Un tableau peut tre divis en trois sections : <thead> (en-tte), <tbody> (corps) et <tfoot> (bas du tableau). L'utilisation de ces balises n'est pas obligatoire.  On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Il faut indiquer combien de cellules doivent tre fusionnes.

219

CHAPITRE 15.

LES TABLEAUX

220

Chapitre

16
Dicult :

Les formulaires

oute pge rwv peut tre enrihie de formulires intertifsD qui invitent vos visiteurs renseigner des informtions X sisir du texteD sletionner des optionsD vlider ve un outonF F F tout est possile 3 xous rrivons ependnt ux limites du lngge rwv r il fut ensuite pouvoir nlyser les informtions que le visiteur sisiesF F F et el ne peut ps se fire en lngge rwvF gomme nous llons le voirD le tritement des rsultts doit s9e'etuer dns un utre lnggeD pr exemple le rF in ttendntD nous vons un grnd nomre de nouvelles lises rwv douvrirF fienE venue dns le monde merveilleux des formuliresD un monde o les outonsD les ses oher et les listes droulntes vivent en hrmonie @en(n presqueAF

221

CHAPITRE 16.

LES FORMULAIRES

Crer un formulaire
Lorsqu'il vous prend subitement l'envie d'insrer un formulaire dans votre page HTML, vous devez pour commencer crire une balise <form> </form>. C'est la balise principale du formulaire, elle permet d'en indiquer le dbut et la n.
1 2 3 4 5 6 7

<p > Texte avant le formulaire </ p > < form > <p > Texte l ' int rieur du formulaire </ p > </ form > <p > Texte apr s le formulaire </ p >

xotez qu9il fut oligtoirement mettre des lises de type lok @omme <p> </p>A l9intrieur de votre formulire si vous souhitez y fire (gurer du texteF
Voil pour la structure de base. Maintenant, soyez attentifs : ce que j'ai vous dire n'est pas vident parce qu'on est la limite du HTML. On va prendre un exemple pour que les choses soient claires. Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire, par exemple un message qu'il aimerait publier sur vos forums. Ce message doit tre envoy pour que vous puissiez le recevoir (logique, non ?) et l'acher pour vos autres visiteurs. Eh bien c'est l le problme, ou plutt les problmes, que l'on va se poser :  Problme no 1 : comment envoyer le texte saisi par le visiteur ? Par quel moyen ?  Problme no 2 : une fois que les donnes ont t envoyes, comment les traiter ? Souhaitez-vous recevoir le message automatiquement par mail ou prfrez-vous qu'un programme se charge de l'enregistrer quelque part, puis de l'acher sur une page visible par tout le monde ? Pour fournir les rponses ces deux problmes, vous devez ajouter deux attributs la balise <form> :  method : cet attribut indique par quel moyen les donnes vont tre envoyes (rponse au problme no 1). Il existe deux solutions pour envoyer des donnes sur le Web :  method="get" : c'est une mthode en gnral assez peu adapte car elle est limite 255 caractres. La particularit vient du fait que les informations seront envoyes dans l'adresse de la page (http://...), mais ce dtail ne nous intresse pas vraiment pour le moment. La plupart du temps, je vous recommande d'utiliser l'autre mthode : post.  method="post" : c'est la mthode la plus utilise pour les formulaires car elle permet d'envoyer un grand nombre d'informations. Les donnes saisies dans le formulaire ne transitent pas par la barre d'adresse.  action : c'est l'adresse de la page ou du programme qui va traiter les informations (rponse au problme no 2). Cette page se chargera de vous envoyer un e-mail avec le message si c'est ce que vous voulez, ou bien d'enregistrer le message avec tous les 222

LES ZONES DE SAISIE BASIQUES

autres dans une base de donnes. Cela ne peut pas se faire en HTML et CSS, on utilisera en gnral un autre langage dont vous avez peut-tre entendu parler : PHP. On va donc maintenant complter la balise <form> avec les deux attributs qu'on vient de voir. Pour method, vous l'aurez devin, je vais mettre la valeur post. Pour action, je vais taper le nom d'une page ctive en PHP (traitement.php). C'est cette page qui sera appele lorsque le visiteur cliquera sur le bouton d'envoi du formulaire.
1 2 3 4 5 6 7

<p > Texte avant le formulaire </ p > < form method = " post " action = " traitement . php " > <p > Texte l ' int rieur du formulaire </ p > </ form > <p > Texte apr s le formulaire </ p >

Pour le moment, on ne sait pas ce qu'il se passe l'intrieur de la page traitement.php : je vous demande de me faire conance et d'imaginer que cette page existe et fonctionne. Notre priorit, pour le moment, est de dcouvrir en HTML/CSS comment faire pour insrer des zones de texte, des boutons et des cases cocher dans votre page web. C'est ce que nous allons voir maintenant.

Les zones de saisie basiques

Bien, retour au concret. Nous allons passer en revue les direntes balises HTML permettant de saisir du texte dans un formulaire. Il faut savoir qu'il y a deux zones de texte direntes :  La zone de texte monoligne : comme son nom l'indique, on ne peut y crire qu'une seule ligne. Elle sert saisir des textes courts, par exemple un pseudo.  La zone de texte multiligne : cette zone de texte permet d'crire une quantit importante de texte sur plusieurs lignes, par exemple une dissertation sur l'utilit du HTML dans le dveloppement des pays d'Asie du Sud-Est (ce n'est qu'une suggestion hein. . .).

Zone de texte monoligne

La gure 16.1 montre quoi ressemble une zone de texte monoligne.

Figure 16.1  Une zone de texte monoligne

Pour insrer une zone de texte dans une ligne, on va utiliser la balise <input />. 223

CHAPITRE 16.

LES FORMULAIRES

yn retrouver ette lise plusieurs fois dns l suite de e hpitreF hque foisD 9est l vleur de son ttriut type qui v hngerF
Pour crer une zone de texte une ligne, on doit crire :
1

< input type = " text " / >

Ce n'est pas encore susant : il faut donner un nom votre zone de texte. Ce nom n'apparat pas sur la page mais il vous sera indispensable par la suite. En eet, cela vous permettra (en PHP par exemple) de reconnatre d'o viennent les informations : vous saurez que tel texte est le pseudo du visiteur, tel texte est le mot de passe qu'il a choisi, etc. Pour donner un nom un lment de formulaire, on utilise l'attribut name. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo :
1

< input type = " text " name = " pseudo " / >

Essayons donc de crer un formulaire trs basique avec notre champ de texte :
1 2 3

< form method = " post " action = " traitement . php " > <p > < input type = " text " name = " pseudo " / > </ p > </ form >

Comme d'habitude, je vous invite fortement essayer ce code chez vous an d'observer le rsultat.

Les libells
Cette zone de texte est bien jolie mais si votre visiteur tombe dessus, il ne sait pas ce qu'il doit crire. C'est justement le rle de la balise <label> :
1 2 3

4 5

< form method = " post " action = " traitement . php " > <p > < label > Votre pseudo </ label > : < input type = " text " name = " pseudo " / > </ p > </ form >

Ce code donne exactement le rsultat que vous avez pu observer la gure 16.1. Mais cela ne sut pas. Il faut lier le label la zone de texte. Pour ce faire, on doit donner un nom la zone de texte, non pas avec l'attribut name mais avec l'attribut id (que l'on peut utiliser sur toutes les balises).

n name et un id sur le hmp c gel ne vEtEil ps fire doule emploi c

224

LES ZONES DE SAISIE BASIQUES

Si, un peu. Personnellement, je donne la mme valeur au name et l'id, cela ne pose pas de problme. Pour lier le label au champ, il faut lui donner un attribut for qui a la mme valeur que l'id du champ. . . Le mieux est de le voir sur un exemple :
1 2 3

4 5

< form method = " post " action = " traitement . php " > <p > < label for = " pseudo " > Votre pseudo </ label > : < input type = " text " name = " pseudo " id = " pseudo " / > </ p > </ form >

Essayez de cliquer sur le texte  Votre pseudo  : vous allez voir que le curseur se place automatiquement dans la zone de texte correspondante.

Quelques attributs supplmentaires

On peut ajouter un certain nombre d'autres attributs la balise <input /> pour personnaliser son fonctionnement :  On peut agrandir le champ avec size.  On peut limiter le nombre de caractres que l'on peut saisir avec maxlength.  On peut pr-remplir le champ avec une valeur par dfaut l'aide de value.  On peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparatra ds que le visiteur aura cliqu l'intrieur du champ. Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce qu'il faut saisir ; le champ fait 30 caractres de long mais on ne peut crire que 10 caractres maximum l'intrieur :
1 2 3 4

5 6

< form method = " post " action = " traitement . php " > <p > < label for = " pseudo " > Votre pseudo : </ label > < input type = " text " name = " pseudo " id = " pseudo " placeholder = " Ex : Zozor " size = " 30 " maxlength = " 10 " / > </ p > </ form >

Testez vous-mmes le rsultat pour observer le comportement du champ. En attendant, voici le rendu du champ dans son tat initial en gure 16.2.

Figure 16.2  Un champ de texte avec une indication placeholder

225

CHAPITRE 16.

LES FORMULAIRES

Zone de mot de passe

Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une  zone de mot de passe , c'est--dire une zone o on ne voit pas l'cran les caractres saisis. Pour crer ce type de zone de saisie, utilisez l'attribut type="password". Je complte mon formulaire. Il demande maintenant au visiteur son pseudo et son mot de passe :
1 2 3 4 5 6 7 8 9 10 11

< form method = " post " action = " traitement . php " > <p > < label for = " pseudo " > Votre pseudo : </ label > < input type = " text " name = " pseudo " id = " pseudo " / > < br / > < label for = " pass " > Votre mot de passe : </ label > < input type = " password " name = " pass " id = " pass " / > </ p > </ form >

Testez la zone de mot de passe : vous verrez que les caractres ne s'achent pas l'cran, comme sur la gure 16.3.

Figure 16.3  Une zone de saisie de mot de passe a t ajoute

Zone de texte multiligne

Pour crer une zone de texte multiligne, on change de balise : nous allons utiliser <textarea> </textarea>. Comme pour tout autre lment du formulaire, il faut lui donner un nom avec name et utiliser un label qui explique de quoi il s'agit.
1 2 3

4 5 6

< form method = " post " action = " traitement . php " > <p > < label for = " ameliorer " > Comment pensez - vous que je pourrais am liorer mon site ? </ label > < br / > < textarea name = " ameliorer " id = " ameliorer " > </ textarea > </ p > </ form >

Et voici le rsultat en image (gure 16.4) ! Comme vous pouvez le constater, c'est un peu petit ! Heureusement, on peut modier la taille du <textarea> de deux faons direntes. 226

LES ZONES DE SAISIE BASIQUES

Figure 16.4  Une (petite) zone de saisie multiligne

 

En CSS : il sut d'appliquer les proprits CSS width et height au <textarea>. Avec des attributs : on peut ajouter les attributs rows et cols la balise <textarea>.
Le premier indique le nombre de lignes de texte qui peuvent tre aches simultanment, et le second le nombre de colonnes.

ourquoi ouvreEtEon l lise <textarea> pour l fermer juste prs c

Vous pouvez pr-remplir le <textarea> avec une valeur par dfaut. Dans ce cas, on n'utilise pas l'attribut value : on crit tout simplement le texte par dfaut entre la balise ouvrante et la balise fermante !
1 2 3 4 5 6 7 8

< form method = " post " action = " traitement . php " > <p > < label for = " ameliorer " > Comment pensez - vous que je puisse am liorer mon site ? </ label > < br / > < textarea name = " ameliorer " id = " ameliorer " rows = " 10 " cols = " 50 " > Am liorer ton site ?! Mais enfin ! Il est tellement g nialissime qu ' il n ' est pas n cessaire de l ' am liorer ! </ textarea >

9 10

11 12 13

</ p > </ form >

Et voici le rsultat la gure 16.5.

Figure 16.5  Une zone de saisie multiligne pr-remplie

227

CHAPITRE 16.

LES FORMULAIRES

Les zones de saisie enrichies

HTML5 apporte de nombreuses fonctionnalits nouvelles relatives aux formulaires. De nouveaux types de champs sont en eet apparus avec cette version. Il sut de donner l'attribut type de la balise <input /> l'une des nouvelles valeurs disponibles. Faisons un petit tour d'horizon !

ous les nvigteurs ne onnissent ps enore es zones de sisie enrihiesF leur pleD les niennes versions des nvigteurs 0heront une simple zone de sisie monoligne @omme si on vit rit type="text"AF intre nousD 9est prfit X les nouveux nvigteurs peuvent pro(ter des dernires fontionnE litsD tndis que les niens 0hent une zone de texte de remplement qui onvient tout ussi ienF ous vez don tout intrt utiliser es nouE velles zones de sisie ds ujourd9hui 3 eu mieuxD vos visiteurs pro(teront des nouvelles fontionnlitsD u pireD ils ne verront uun prolmeF

E-mail
Vous pouvez demander saisir une adresse e-mail :
1

< input type = " email " / >

Le champ vous semblera a priori identique mais votre navigateur sait dsormais que l'utilisateur doit saisir une adresse e-mail. Il peut acher une indication si l'adresse n'est pas un e-mail, c'est ce que fait Firefox par exemple (gure 16.6).

Figure 16.6  Un champ e-mail mal renseign est entour de rouge dans Firefox
Sachez que certains navigateurs, comme les navigateurs mobiles sur iPhone et Android, achent un clavier adapt la saisie d'e-mail (gure 16.7).

Une URL
Avec le type url, on peut demander saisir une adresse absolue (commenant gnralement par http://) :
1

< input type = " url " / >

Mme principe : si le champ ne vous semble pas dirent sur votre ordinateur, sachez que celui-ci comprend bel et bien que le visiteur est cens saisir une adresse. Les navigateurs mobiles achent par exemple un clavier adapt la saisie d'URL (gure 16.8). 228

LES ZONES DE SAISIE ENRICHIES

Figure 16.7  Clavier de saisie d'e-mail sur un iPhone

Figure 16.8  Clavier de saisie d'URL sur iPhone

229

CHAPITRE 16.

LES FORMULAIRES

Numro de tlphone
Ce champ est ddi la saisie de numros de tlphone :
1

< input type = " tel " / >

Sur iPhone, par exemple, un clavier adapt s'ache lorsqu'on doit remplir le champ (gure 16.9).

Figure 16.9  Clavier de saisie de numro de tlphone sur un iPhone

Nombre
Ce champ permet de saisir un nombre entier :
1

< input type = " number " / >

Le champ s'achera en gnral avec des petites ches pour changer la valeur (gure 16.10).

Figure 16.10  Champ de saisie de nombre

Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :  min : valeur minimale autorise.  max : valeur maximale autorise.  step : c'est le  pas  de dplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6. . .).

Un curseur
Le type range permet de slectionner un nombre avec un curseur (aussi appel slider ), comme la gure 16.11 : 230

LES ZONES DE SAISIE ENRICHIES

< input type = " range " / >

Figure 16.11  Un curseur grce au type range

Vous pouvez utiliser l aussi les attributs min, max et step pour restreindre les valeurs disponibles.

Couleur
Ce champ permet de saisir une couleur :
1

< input type = " color " / >

En pratique, il reste assez peu mis en uvre par les navigateurs l'heure actuelle. Ne vous tonnez pas si vous voyez seulement un champ de texte classique.

Date
Dirents types de champs de slection de date existent :  date : pour la date (05/08/1985 par exemple) ;  time : pour l'heure (13:37 par exemple) ;  week : pour la semaine ;  month : pour le mois ;  datetime : pour la date et l'heure (avec gestion du dcalage horaire) ;  datetime-local pour la date et l'heure (sans gestion du dcalage horaire). Exemple :
1

< input type = " date " / >

Comme vous le voyez, il y a le choix ! l'heure actuelle, peu de navigateurs grent ce type de champ part Opera.

Recherche
On peut crer un champ de recherche comme ceci :
1

< input type = " search " / >

Le navigateur dcide ensuite comment acher le champ de recherche. Ainsi, il peut ajouter une petite loupe au champ pour signier que c'est un champ de recherche et ventuellement mmoriser les dernires recherches eectues par le visiteur. 231

CHAPITRE 16.

LES FORMULAIRES

Les lments d'options

HTML vous ore une ribambelle d'lments d'options utiliser dans votre formulaire. Ce sont des lments qui demandent au visiteur de faire un choix parmi une liste de possibilits. Nous allons passer en revue :  les cases cocher ;  les zones d'options ;  les listes droulantes.

Les cases cocher

Crer une case cocher ? Rien de plus simple ! Nous allons rutiliser la balise <input />, en spciant cette fois le type checkbox :
1

< input type = " checkbox " name = " choix " / >

Rajoutez un <label> bien plac, et le tour est jou !

1 2 3 4

8 9

< form method = " post " action = " traitement . php " > <p > Cochez les aliments que vous aimez manger : < br / > < input type = " checkbox " name = " frites " id = " frites " / > < label for = " frites " > Frites </ label > < br / > < input type = " checkbox " name = " steak " id = " steak " / > < label for = " steak " > Steak hach </ label > < br / > < input type = " checkbox " name = " epinards " id = " epinards " / > < label for = " epinards " > Epinards </ label > < br / > < input type = " checkbox " name = " huitres " id = " huitres " / > < label for = " huitres " > Huitres </ label > </ p > </ form >

Copier ce code Code web : 664666  Et voici le rsultat en gure 16.12.

Figure 16.12  Des cases cocher

N'oubliez pas de donner un nom dirent chaque case cocher, cela vous permettra d'identier plus tard lesquelles ont t coches par le visiteur. Enn, sachez que vous pouvez faire en sorte qu'une case soit coche par dfaut avec l'attribut checked : 232

LES LMENTS D'OPTIONS

< input type = " checkbox " name = " choix " checked / >

xormlementD tout ttriut possde une vleurF hns le s prsentD en reE vnheD jouter une vleur n9est ps oligtoire X l prsene de l9ttriut su0t fire omprendre l9ordinteur que l se doit tre oheF i el vous pertureD shez que vous pouvez donner n9importe quelle vleur l9tE triut @ertins wemsters rivent prfois checked="checked" mis 9est un peu redondnt 3AF hns tous les sD l se ser oheF

Les zones d'options

Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de possibilits. Elles ressemblent un peu aux cases cocher mais il y a une petite dicult supplmentaire : elles doivent tre organises en groupes. Les options d'un mme groupe possdent le mme nom (name), mais chaque option doit avoir une valeur (value) dirente. La balise utiliser est toujours un <input />, avec cette fois la valeur radio pour l'attribut type. Les choses seront plus claires sur l'exemple ci-dessous :
1 2 3

8 9

< form method = " post " action = " traitement . php " > <p > Veuillez indiquer la tranche d ' ge dans laquelle vous vous situez : < br / > < input type = " radio " name = " age " value = " moins15 " id = " moins15 " / > < label for = " moins15 " > Moins de 15 ans </ label > < br / > < input type = " radio " name = " age " value = " medium15 - 25 " id = " medium15 - 25 " / > < label for = " medium15 - 25 " >15 - 25 ans </ label > < br / > < input type = " radio " name = " age " value = " medium25 - 40 " id = " medium25 - 40 " / > < label for = " medium25 - 40 " >25 - 40 ans </ label > < br / > < input type = " radio " name = " age " value = " plus40 " id = " plus40 " / > < label for = " plus40 " > Encore plus vieux que a ?! < / label > </ p > </ form >

Copier ce code Code web : 574747  Ce qui nous donne la gure 16.13. Pourquoi avoir mis le mme nom pour chaque option ? Tout simplement pour que le navigateur sache de quel  groupe  le bouton fait partie. Essayez d'enlever les attributs name, vous verrez qu'il devient possible de slectionner tous les lments d'options. Or, 233

CHAPITRE 16.

LES FORMULAIRES

Figure 16.13  Des boutons radio

ce n'est pas ce que l'on veut, c'est pour cela qu'on les  lie  entre eux en leur donnant un nom identique.

ous noterez que ette fois on hoisi un id di'rent de nameF in e'etD les vleurs de name tnt identiquesD on n9urit ps pu di'renier les id @et vous svez ien qu9un id doit tre unique 3AF oil don pourquoi on hoisi de donner l9id l mme vleur que valueF
Si vous avez deux zones d'options direntes, il faut donner un name unique chaque groupe, comme ceci :
1 2 3

8 9 10 11

12

13

14

15

< form method = " post " action = " traitement . php " > <p > Veuillez indiquer la tranche d ' ge dans laquelle vous vous situez : < br / > < input type = " radio " name = " age " value = " moins15 " id = " moins15 " / > < label for = " moins15 " > Moins de 15 ans </ label > < br / > < input type = " radio " name = " age " value = " medium15 - 25 " id = " medium15 - 25 " / > < label for = " medium15 - 25 " >15 - 25 ans </ label > < br / > < input type = " radio " name = " age " value = " medium25 - 40 " id = " medium25 - 40 " / > < label for = " medium25 - 40 " >25 - 40 ans </ label > < br / > < input type = " radio " name = " age " value = " plus40 " id = " plus40 " / > < label for = " plus40 " > Encore plus vieux que a ?! < / label > </ p > <p > Sur quel continent habitez - vous ? < br / > < input type = " radio " name = " continent " value = " europe " id = " europe " / > < label for = " europe " > Europe </ label > < br / > < input type = " radio " name = " continent " value = " afrique " id = " afrique " / > < label for = " afrique " > Afrique </ label > < br /> < input type = " radio " name = " continent " value = " asie " id = " asie " / > < label for = " asie " > Asie </ label > < br / > < input type = " radio " name = " continent " value = " amerique " id = " amerique " / > < label for = " amerique " > Am rique </ label > < br / > < input type = " radio " name = " continent " value = " australie "

234

LES LMENTS D'OPTIONS

16 17

</ p > </ form >

id = " australie " / > < label for = " australie " > Australie </ label >

v9ttriut checked estD l ussiD disponile pour sletionner une vleur pr dfutF

Les listes droulantes

Les listes droulantes sont un autre moyen lgant de faire un choix parmi plusieurs possibilits. Le fonctionnement est un peu dirent. On va utiliser la balise <select> </select> qui indique le dbut et la n de la liste droulante. On ajoute l'attribut name la balise pour donner un nom la liste. Puis, l'intrieur du <select> </select>, nous allons placer plusieurs balises <option> </option> (une par choix possible). On ajoute chacune d'elles un attribut value pour pouvoir identier ce que le visiteur a choisi. Voici un exemple d'utilisation :
1 2 3

4 5 6 7 8 9 10 11 12 13 14 15

< form method = " post " action = " traitement . php " > <p > < label for = " pays " > Dans quel pays habitez - vous ? </ label > < br / > < select name = " pays " id = " pays " > < option value = " france " > France </ option > < option value = " espagne " > Espagne </ option > < option value = " italie " > Italie </ option > < option value = " royaume - uni " > Royaume - Uni </ option > < option value = " canada " > Canada </ option > < option value = " etats - unis " > tats - Unis </ option > < option value = " chine " > Chine </ option > < option value = " japon " > Japon </ option > </ select > </ p > </ form >

Copier ce code Code web : 184462  Le rsultat obtenu est reprsent la gure 16.14. Si vous voulez qu'une option soit slectionne par dfaut, utilisez cette fois l'attribut selected :
1

< option value = " canada " selected > Canada </ option >

235

CHAPITRE 16.

LES FORMULAIRES

Figure 16.14  Une liste droulante

Vous pouvez aussi grouper vos options avec la balise <optgroup> </optgroup>. Dans notre exemple, pourquoi ne pas sparer les pays en fonction de leur continent ?
1 2 3

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< form method = " post " action = " traitement . php " > <p > < label for = " pays " > Dans quel pays habitez - vous ? </ label > < br / > < select name = " pays " id = " pays " > < optgroup label = " Europe " > < option value = " france " > France </ option > < option value = " espagne " > Espagne </ option > < option value = " italie " > Italie </ option > < option value = " royaume - uni " > Royaume - Uni </ option > </ optgroup > < optgroup label = " Am rique " > < option value = " canada " > Canada </ option > < option value = " etats - unis " > Etats - Unis </ option > </ optgroup > < optgroup label = " Asie " > < option value = " chine " > Chine </ option > < option value = " japon " > Japon </ option > </ optgroup > </ select > </ p > </ form >

Le rsultat obtenu est reprsent la gure 16.15.

ves groupes ne peuvent ps tre sletionnsF einsiD dns notre exempleD on ne peut ps hoisir  iurope X seuls les noms de pys sont disponiles pour l sletionF

Finaliser et envoyer le formulaire

Nous y sommes presque. Il ne nous reste plus qu' agrmenter notre formulaire de quelques dernires fonctionnalits (comme la validation), puis nous pourrons ajouter 236

FINALISER ET ENVOYER LE FORMULAIRE

Figure 16.15  Les options sont regroupes par continent

le bouton d'envoi du formulaire.

Regrouper les champs

Si votre formulaire grossit et comporte beaucoup de champs, il peut tre utile de les regrouper au sein de plusieurs balises <fieldset>. Chaque <fieldset> peut contenir une lgende avec la balise <legend>. Regardez cet exemple :
1 2 3 4

< form method = " post " action = " traitement . php " > < fieldset > < legend > Vos coordonn es </ legend > <! - - Titre du fieldset --> < label for = " nom " > Quel est votre nom ? </ label > < input type = " text " name = " nom " id = " nom " / > < label for = " prenom " > Quel est votre pr nom ? </ label > < input type = " text " name = " prenom " id = " prenom " / > < label for = " email " > Quel est votre e - mail ? </ label > < input type = " email " name = " email " id = " email " / > </ fieldset > < fieldset > < legend > Votre souhait </ legend > <! - - Titre du fieldset --> <p > Faites un souhait que vous voudriez voir exauc : < input type = " radio " name = " souhait " value = " riche " id = " riche " / > < label for = " riche " > Etre riche </ label >

5 6 7 8 9 10 11 12 13 14 15 16 17 18

19 20 21 22 23

237

CHAPITRE 16.

LES FORMULAIRES

24

25

26

27 28 29 30

</ p > <p >

< input type = " radio " name = " souhait " value = " celebre " id = " celebre " / > < label for = " celebre " > Etre c l bre </ label > < input type = " radio " name = " souhait " value = " intelligent " id =" intelligent " / > < label for = " intelligent " > Etre < strong > encore </ strong > plus intelligent </ label > < input type = " radio " name = " souhait " value = " autre " id = " autre " / > < label for = " autre " > Autre ... </ label >

31

32 33 34

</ p > </ fieldset > </ form >

< label for = " precisions " > Si " Autre " , veuillez pr ciser : </ label > < textarea name = " precisions " id = " precisions " cols = " 40 " rows = " 4 " > </ textarea >

Copier ce code Code web : 954249  Le rsultat obtenu est reprsent la gure 16.16.

Figure 16.16  Les champs sont regroups

Slectionner automatiquement un champ

Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec l'attribut autofocus. Ds que le visiteur chargera la page, le curseur se placera dans ce champ. Par exemple, pour que le curseur soit par dfaut dans le champ prenom : 238

FINALISER ET ENVOYER LE FORMULAIRE

< input type = " text " name = " prenom " id = " prenom " autofocus / >

Rendre un champ obligatoire

Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required.
1

< input type = " text " name = " prenom " id = " prenom " required / >

Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi, qu'il doit imprativement tre rempli.

ves niens nvigteursD qui ne reonnissent ps et ttriutD enverront le ontenu du formulire sns vri(tionF our es nvigteursD il ser nessire de omplter les tests veD pr exempleD des sripts tvriptF yn dispose de pseudoEformts en g pour hnger le style des lments requis @:requiredA et invlides @:invalidAF x9ouliez ps non plus que vous disposez du pseudoEformt :focus pour hnger l9pprene d9un hmp lorsque le urseur se trouve l9intrieurF
1 2 3 4

: required { background - color : red ; }

Le bouton d'envoi
Il ne nous reste plus qu' crer le bouton d'envoi. L encore, la balise <input /> vient notre secours. Elle existe en quatre versions :  type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit la page indique dans l'attribut action du formulaire.  type="reset" : remise zro du formulaire.  type="image" : quivalent du bouton submit, prsent cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.  type="button" : bouton gnrique, qui n'aura (par dfaut) aucun eet. En gnral, ce bouton est gr en JavaScript pour excuter des actions sur la page. Nous ne l'utiliserons pas ici.

yn peut hnger le texte 0h l9intrieur des outons ve l9ttriut valueF

239

CHAPITRE 16.

LES FORMULAIRES

Pour crer un bouton d'envoi on crira donc par exemple :

1

< input type = " submit " value = " Envoyer " / >

Ce qui nous donne la gure 16.17.

Figure 16.17  Un bouton d'envoi

Lorsque vous cliquez sur le bouton  Envoyer , le formulaire vous amne alors la page indique dans l'attribut target. Souvenez-vous, nous avions imagin une page ctive : traitement.php. Le problme, c'est que vous ne pouvez pas crer cette page seulement en HTML. Il est ncessaire d'apprendre un nouveau langage, comme le PHP, pour pouvoir  rcuprer  les informations saisies et dcider quoi en faire. Cela tombe bien, j'ai aussi rdig un cours sur le langage PHP pour ceux que cela intresse 1 !


Lire le cours PHP Code web : 955969 

gertins sites omme swisstools.net proposent des servies ppels  wilporm qui se hrgent de vous envoyer un eEmil lorsqu9un de vos visiteurs rempli le formulireF gel vous dispense d9pprendre un nouveu lngge mis e n9est ps trs prtique X vous devrez soit pyerD soit voir de l puliitF F F et vous n9vez ps euoup de possiilits de personnliser le tritement des donnesF

En rsum
 Un formulaire est une zone interactive de la page, dans laquelle vos visiteurs peuvent saisir des informations.  On dlimite un formulaire avec la balise <form> laquelle il faut ajouter deux attributs : method (mode d'envoi des donnes) et action (page vers laquelle le visiteur sera redirig aprs envoi du formulaire et qui traitera les informations).  Une grande partie des lments du formulaire peut s'insrer avec la balise <input />. La valeur de son attribut type permet d'indiquer quel type de champ doit tre insr :  text : zone de texte ;  password : zone de texte pour mot de passe ;  tel : numro de tlphone ;  checkbox : case cocher ;  etc.
1. Ce cours existe galement en livre : Concevez votre site web avec PHP et MySQL, de Mathieu Nebra, paru chez Simple IT dans la collection le Livre du Zro, ISBN 978-2-9535278-1-0.

240

FINALISER ET ENVOYER LE FORMULAIRE

 La balise <label> permet d'crire un libell. On l'associe un champ de formulaire avec l'attribut for, qui doit avoir la mme valeur que l'id du champ de formulaire.  On peut rendre un champ obligatoire avec l'attribut required, faire en sorte qu'il soit slectionn par dfaut avec autofocus, donner une indication dans le champ avec placeholder. . .  Pour rcuprer ce que les visiteurs ont saisi, le langage HTML ne sut pas. Il faut utiliser un langage  serveur  comme PHP. . . Si vous voulez aller plus loin, il va donc falloir apprendre un nouveau langage !

241

CHAPITRE 16.

LES FORMULAIRES

242

Chapitre

17
Dicult :

La vido et l'audio

epuis l9rrive de outue et hilymotionD il est devenu ournt ujourd9hui de regrder des vidos sur des sites weF sl fut dire que l9rrive du hut dit id dmortiser les vidos sur le eF gependntD uune lise rwv ne permettit jusqu9ii de grer l vidoF sl fllit l ple utiliser un pluginD omme plshF inore ujourd9huiD plsh reste de loin le moyen le plus utilis pour regrder des vidos sur outueD hilymotionD imeo et illeursF wis utiliser un plugin de nomreux dfuts X on dpend de eux qui grent le plugin @en l9oureneD l9entreprise edoeD qui possde plshAD on ne peut ps toujours ontrler son fontionnementD il y prfois des filles de suritF F F eu (nlD 9est ssez lourdF g9est pour el que deux nouvelles lises stndrd ont t res en rwvS X <video> et <audio> 3

243

CHAPITRE 17.

LA VIDO ET L'AUDIO

Les formats audio et vido

Lorsque je vous ai prsent les images et la balise <img />, j'ai commenc par un petit tour d'horizon des dirents formats d'images (JPEG, PNG, GIF, etc.). Pour la vido et l'audio, je vais faire pareil. . . mais c'est plus compliqu. En fait, le fonctionnement des vidos est mme tellement complexe qu'on pourrait faire un cours entier ce sujet ! tant donn qu'on parle ici de HTML, nous n'allons pas passer toutes nos prochaines nuits tudier les subtilits de l'encodage vido. Je vais donc simplier les choses et vous expliquer juste ce que vous avez besoin de savoir.

Les formats audio

Pour diuser de la musique ou n'importe quel son, il existe de nombreux formats. La plupart d'entre eux sont compresss (comme le sont les images JPEG, PNG et GIF) ce qui permet de rduire leur poids :  MP3 : vous ne pouvez pas ne pas en avoir entendu parler ! C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours trs utilis aujourd'hui.  AAC : utilis majoritairement par Apple sur iTunes, c'est un format de bonne qualit. Les iPod, iPhone et autres iPad savent les lire sans problme.  OGG : le format Ogg Vorbis est trs rpandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'tre libre, c'est--dire qu'il n'est protg par aucun brevet.  WAV (format non compress) : vitez autant que possible de l'utiliser car le chier est trs volumineux avec ce format. C'est un peu l'quivalent du Bitmap (BMP) pour l'audio. Aucun navigateur ne gre tous ces formats la fois. Retenez surtout la compatibilit pour les MP3 et OGG :

Navigateur

Internet Explorer Chrome Firefox Safari Opera

MP3 OGG
Oui Oui Oui Oui Oui Oui

sl n9y ps de formt  idl reonnu pr tous les nvigteurs c

Eh non ! Heureusement, on pourra proposer dirents formats aux navigateurs qui slectionneront alors celui qu'ils savent lire. 244

LES FORMATS AUDIO ET VIDO

Les formats vido

Le stockage de la vido est autrement plus complexe. On a besoin de trois lments :  Un format conteneur : c'est un peu comme une bote qui va servir contenir les deux lments ci-dessous. On reconnat en gnral le type de conteneur l'extension du chier : AVI, MP4, MKV. . .  Un codec audio : c'est le format du son de la vido, gnralement compress. Nous venons de les voir, on utilise les mmes : MP3, AAC, OGG. . .  Un codec vido : c'est le format qui va compresser les images. C'est l que les choses se corsent, car ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement. Les principaux connatre pour le Web sont :  H.264 : l'un des plus puissants et des plus utiliss aujourd'hui. . . mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diusion de vidos sur un site web personnel), mais il y a un ou juridique qui fait qu'il est risqu de l'utiliser tout va.  Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.  WebM : un autre codec gratuit et libre de droits, plus rcent. Propos par Google, c'est le concurrent le plus srieux de H.264 l'heure actuelle. Quelle est la compatibilit des codecs vido sur les dirents navigateurs ? L encore, vous allez voir que c'est un joyeux bazar :

Navigateur

Internet Explorer Chrome Firefox Safari Opera

H.264 Ogg Theora WebM

Oui Oui Oui Oui Oui Oui Oui Oui Oui Oui

L encore, aucun format ne sort du lot. Il est conseill de proposer chaque vido dans plusieurs formats pour qu'elle soit lisible sur un maximum de navigateurs. Pour convertir une vido dans ces dirents formats, je vous conseille l'excellent logiciel gratuit Miro Video Converter que vous pouvez tlcharger grce au code web cidessous.  Tlcharger le logiciel Code web : 547678  Il vous sut de glisser-dposer votre vido dans la fentre du programme et de slectionner le format de sortie souhait. Cela vous permettra de crer plusieurs versions de votre vido ! 245

CHAPITRE 17.

LA VIDO ET L'AUDIO

Insertion d'un lment audio

v lise <audio> que nous llons douvrir est reonnue pr tous les nviE gteurs rentsD y ompris snternet ixplorer prtir de l version W @siWAF
En thorie, il sut d'une simple balise pour jouer un son sur notre page :
1

< audio src = " musique . mp3 " > </ audio >

En pratique, c'est un peu plus compliqu que cela. Si vous testez ce code. . . vous ne verrez rien ! En eet, le navigateur va seulement tlcharger les informations gnrales sur le chier (on parle de mtadonnes) mais il ne se passera rien de particulier. Vous pouvez complter la balise des attributs suivants :  controls : pour ajouter les boutons  Lecture ,  Pause  et la barre de dlement. Cela peut sembler indispensable, et vous vous demandez peut-tre pourquoi cela n'y gure pas par dfaut, mais certains sites web prfrent crer eux-mmes leurs propres boutons et commander la lecture avec du JavaScript.  width : pour modier la largeur de l'outil de lecture audio.  loop : la musique sera joue en boucle.  autoplay : la musique sera joue ds le chargement de la page. vitez d'en abuser, c'est en gnral irritant d'arriver sur un site qui joue de la musique tout seul !  preload : indique si la musique peut tre prcharge ds le chargement de la page ou non. Cet attribut peut prendre les valeurs :  auto (par dfaut) : le navigateur dcide s'il doit prcharger toute la musique, uniquement les mtadonnes ou rien du tout.  metadata : charge uniquement les mtadonnes (dure, etc.).  none : pas de prchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.

yn ne peut ps forer le prhrgement de l musiqueD 9est toujours le nvigteur qui dideF ves nvigteurs moilesD pr exempleD ne prhrgent jmis l musique pour onomiser l nde pssnte @le temps de hrgement tnt long sur un portleAF
Ajoutons les contrles et ce sera dj mieux !
1

< audio src = " hype_home . mp3 " controls > </ audio >

L'apparence du lecteur audio change en fonction du navigateur. La gure 17.1 reprsente par exemple le lecteur audio dans Google Chrome.

Figure 17.1  Le lecteur audio dans Google Chrome

246

INSERTION D'UNE VIDO

ourquoi ouvrir l lise pour l refermer immditement prs c

Cela vous permet d'acher un message ou de proposer une solution de secours pour les navigateurs qui ne grent pas cette nouvelle balise. Par exemple :
1

< audio src = " hype_home . mp3 " controls > Veuillez mettre jour votre navigateur ! </ audio >

Ceux qui ont un navigateur rcent ne verront pas le message. Les anciens navigateurs, qui ne comprennent pas la balise, acheront en revanche le texte qui se trouve l'intrieur.

te vous onseille de proposer une solution de seours en plshD omme DewplayerF ous plerez le ode orrespondnt plsh entre les lises <audio> et </audio> X insiD les niens nvigteurs 0heront le leteur plshD tndis que les nouveux 0heront le leteur ntifF
Tlcharger Dewplayer Code web : 192243 


yn vu que ertins nvigteurs ne grient ps le wQD omment fire c

Il faut proposer plusieurs versions du chier audio. Dans ce cas, on va construire notre balise comme ceci :
1 2 3 4

< audio controls > < source src = " hype_home . mp3 " > </ source > < source src = " hype_home . ogg " > </ source > </ audio >

Le navigateur prendra automatiquement le format qu'il reconnat.

Insertion d'une vido

v lise <video> que nous llons douvrir est reonnue pr tous les nviE gteurs rentsD y ompris snternet ixplorer prtir de l version W @siWAF
Il sut d'une simple balise <video> pour insrer une vido dans la page :
1

< video src = " sintel . webm " > </ video >

247

CHAPITRE 17.

LA VIDO ET L'AUDIO

Mais, l encore, vous risquez d'tre dus si vous utilisez seulement ce code. Aucun contrle ne permet de lancer la vido ! Rajoutons quelques attributs (la plupart sont les mmes que pour la balise <audio>) :  poster : image acher la place de la vido tant que celle-ci n'est pas lance. Par dfaut, le navigateur prend la premire image de la vido mais, comme il s'agit souvent d'une image noire ou d'une image peu reprsentative de la vido, je vous conseille d'en crer une ! Vous pouvez tout simplement faire une capture d'cran d'un moment de la vido.  controls : pour ajouter les boutons  Lecture ,  Pause  et la barre de dlement. Cela peut sembler indispensable, mais certains sites web prfrent crer eux-mmes leurs propres boutons et commander la lecture avec du JavaScript. En ce qui nous concerne, ce sera largement susant !  width : pour modier la largeur de la vido.  height : pour modier la hauteur de la vido.  loop : la vido sera joue en boucle.  autoplay : la vido sera joue ds le chargement de la page. L encore, vitez d'en abuser, c'est en gnral irritant d'arriver sur un site qui lance quelque chose tout seul !  preload : indique si la vido peut tre prcharge ds le chargement de la page ou non. Cet attribut peut prendre les valeurs :  auto (par dfaut) : le navigateur dcide s'il doit prcharger toute la vido, uniquement les mtadonnes ou rien du tout.  metadata : charge uniquement les mtadonnes (dure, dimensions, etc.).  none : pas de prchargement. Utile si vous souhaitez viter le gaspillage de bande passante sur votre site.

yn ne peut ps forer le prhrgement de l vidoD 9est toujours le nvigE teur qui dideF ves proportions de l vido sont toujours onservesF i vous d(nissez une lrgeur et une huteurD le nvigteur fer en sorte de ne ps dpsser les dimensions indiques mis il onserver les proportionsF
Voici un code un peu plus complet :
1

< video src = " sintel . webm " controls poster = " sintel . jpg " width = " 600 " > </ video >

Et le rsultat la gure 17.2.

ourquoi ouvrir et refermer immditement prs l lise c

248

INSERTION D'UNE VIDO

Figure 17.2  Une vido avec les options de lecture et une taille dnie
La rponse est la mme que pour la balise <audio>. Cela vous permet d'acher un message ou d'utiliser une technique de secours (en Flash) si le navigateur ne reconnat pas la balise :
1

2 3

< video src = " sintel . webm " controls poster = " sintel . jpg " width = " 600 " > Il est temps de mettre jour votre navigateur ! </ video >

gomment ontenter tous les nvigteursD puisque hun reonnt des forE mts vido di'rents c
Vous utiliserez la balise <source> l'intrieur de la balise <video> pour proposer dirents formats. Le navigateur prendra celui qu'il reconnat :
1 2 3 4 5

< video controls poster = " sintel . jpg " width = " 600 " > < source src = " sintel . mp4 " / > < source src = " sintel . webm " / > < source src = " sintel . ogv " / > </ video >

ves ihoneD id et iod ne reonnissent l9heure tuelle que le formt rFPTR @(hier .mp4AF F F et uniquement si eluiEi pprt en premier dns l liste 3 te vous reommnde don d9indiquer le formt rFPTR en premier pour ssurer une omptiilit mximleF gomment 0her l vido en plein rn c
Ce n'est pas possible l'heure actuelle. En fait, il existe bien un moyen sous Firefox mais il est un peu cach : il faut faire un clic droit sur la vido, puis slectionner  Plein 249

CHAPITRE 17.

LA VIDO ET L'AUDIO

cran . Il n'y a pas de moyen de forcer le plein cran, mme en JavaScript. Cela peut se comprendre, car des sites pourraient perturber fortement la navigation des visiteurs en achant des vidos en plein cran sans leur demander leur accord !

gomment protger m vidoD je ne veux ps qu9on puisse l opier filement 3

Ce n'est pas possible. Les balises n'ont pas t conues pour limiter ou empcher le tlchargement. C'est assez logique quand on y pense : pour que le visiteur puisse voir la vido, il faut bien de toute faon qu'il la tlcharge d'une manire ou d'une autre ! N'esprez donc pas empcher le tlchargement de votre vido avec cette technique.

ves leteurs vido plsh permettent de  protger le ontenu des vidos misD l enoreD des solutions de ontournement existentF he nomreux plugins permettent de tlhrger les vidosD de outue pr exempleF

En rsum
 Insrer de la musique ou de la vido n'tait pas possible autrefois en HTML. Il fallait recourir un plugin comme Flash.  Depuis HTML5, les balises <audio> et <video> ont t introduites et permettent de jouer de la musique et des vidos sans plugin.  Il existe plusieurs formats audio et vido. Il faut notamment connatre :  pour l'audio : MP3 et Ogg Vorbis ;  pour la vido : H.264, Ogg Theora et WebM.  Aucun format n'est reconnu par l'ensemble des navigateurs : il faut proposer direntes versions de sa musique ou de sa vido pour satisfaire tous les navigateurs.  Il faut ajouter l'attribut controls aux balises <audio> et <video> pour permettre au visiteur de lancer ou d'arrter le mdia.  Ces balises ne sont pas conues pour empcher le tlchargement de la musique et de la vido. Vous ne pouvez pas protger votre mdia contre la copie.

250

Chapitre

18
Dicult :

Mise en page adaptative avec les Media Queries

vezEvous quelle est l premire prouption des wemsters qui mettent en ple le design de leur site c v rsolution d9rn de leurs visiteursF ih oui X selon les rnsD il y plus ou moins de pleD plus ou moins de pixels de lrgeurF gette informtion est importnte lorsque vous onstruisez un design X omment votre site doitEil s90her en fontion des di'rentes rsolutions d9rn c i vous vez un rn lrgeD vous risquez d9oulier que ertines personnes nviguent ve des rns plus petitsF it je ne vous prle mme ps des nvigteurs des smrtphonesD qui sont enore moins lrgesF g9est l que les media queries entrent en jeuF ge sont des rgles ppliquer pour hnger le design d9un site en fontion des rtristiques de l9rn 3 qre ette tehniqueD nous pourrons rer un design qui s9dpte utomtiquement l9rn de hque visiteur 3

251

CHAPITRE 18.

MISE EN PAGE ADAPTATIVE AVEC LES MEDIA QUERIES

Mise en place des media queries

Les media queries font partie des nouveauts de CSS3. Il ne s'agit pas de nouvelles proprits mais de rgles que l'on peut appliquer dans certaines conditions. Concrtement, vous allez pouvoir dire  Si la rsolution de l'cran du visiteur est infrieure tant, alors applique les proprits CSS suivantes . Cela vous permet de changer l'apparence du site dans certaines conditions : vous pourrez augmenter la taille du texte, changer la couleur de fond, positionner diremment votre menu dans certaines rsolutions, etc. Contrairement ce qu'on pourrait penser, les media queries ne concernent pas que les rsolutions d'cran. Vous pouvez changer l'apparence de votre site en fonction d'autres critres comme le type d'cran (smartphone, tlvision, projecteur. . .), le nombre de couleurs, l'orientation de l'cran (portrait ou paysage), etc. Les possibilits sont trs nombreuses !

ves medi queries fontionnent sur tous les nvigteurs rentsD y ompris snternet ixplorer prtir de l version W @siWAF

Appliquer une media query

Les media queries sont donc des rgles qui indiquent quand on doit appliquer des proprits CSS. Il y a deux faons de les utiliser :  en chargeant une feuille de style .css dirente en fonction de la rgle (ex :  Si la rsolution est infrieure 1280px de large, charge le chier petite_resolution.css ) ;  en crivant la rgle directement dans le chier .css habituel (ex :  Si la rsolution est infrieure 1280px de large, charge les proprits CSS ci-dessous ).

Chargement d'une feuille de style dirente

Vous vous souvenez de la balise <link /> qui permet, dans notre code HTML, de charger un chier .css ?
1

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

On peut lui ajouter un attribut media, dans lequel on va crire la rgle qui doit s'appliquer pour que le chier soit charg. On dit qu'on fait une  requte de media  (media query en anglais). Voici un exemple :
1

< link rel = " stylesheet " media = " screen and ( max - width : 1280px ) " href = " petite_resolution . css " / >

Au nal, votre code HTML pourrait proposer plusieurs chiers CSS : un par dfaut (qui est charg dans tous les cas) et un ou deux autres qui seront chargs en supplment uniquement si la rgle correspondante s'applique.
1

<! DOCTYPE html >

252

LES RGLES DISPONIBLES

2 3 4 5

7 8

< html > < head > < meta charset = " utf - 8" / > < link rel = " stylesheet " href = " style . css " / > <! - - Pour tout le monde --> < link rel = " stylesheet " media = " screen and ( max - width : 1280px ) " href = " petite_resolution . css " / > <! - - Pour ceux qui ont une r solution inf rieure 1280px --> < title > Media queries </ title > </ head >

Chargement des rgles directement dans la feuille de style

Une autre technique, que je prfre personnellement pour des raisons pratiques, consiste crire ces rgles dans le mme chier CSS que d'habitude. Dans ce cas, on crit la rgle dans le chier .css comme ceci :
1 2 3 4

@media screen and ( max - width : 1280px ) { /* R digez vos propri t s CSS ici */ }

Les rgles disponibles

Il existe de nombreuses rgles permettant de construire des media queries. Je vous prsente ici les principales :  color : gestion de la couleur (en bits/pixel).  height : hauteur de la zone d'achage (fentre).  width : largeur de la zone d'achage (fentre).  device-height : hauteur du priphrique.  device-width : largeur du priphrique.  orientation : orientation du priphrique (portrait ou paysage).  media : type d'cran de sortie. Quelques-unes des valeurs possibles :  screen : cran  classique  ;  handheld : priphrique mobile ;  print : impression ;  tv : tlvision ;  projection : projecteur ;  all : tous les types d'cran.

yn peut rjouter le pr(xe min- ou max- devnt l pluprt de es rglesF einsiD min-width signi(e  vrgeur minimle D max-height  ruteur mximle D etF v di'rene entre width et device-width se peroit surE tout sur les nvigteurs moiles des smrtphonesD nous en reprlerons plus loinF
253

CHAPITRE 18.

MISE EN PAGE ADAPTATIVE AVEC LES MEDIA QUERIES

Les rgles peuvent tre combines l'aide des mots suivants :  only :  uniquement  ;  and :  et  ;  not :  non . Voici quelques exemples de media queries pour vous aider bien comprendre le principe.
1

2 3 4

/* Sur les crans , quand la largeur de la fen tre fait au maximum 1280px */ @media screen and ( max - width : 1280px ) /* Sur tous types d ' cran , quand la largeur de la fen tre est comprise entre 1024px et 1280px */ @media all and ( min - width : 1024px ) and ( max - width : 1280px ) /* Sur les t l viseurs */ @media tv /* Sur tous types d ' crans orient s verticalement */ @media all and ( orientation : portrait )

5 6 7 8 9 10 11

ves niens nvigteursD notmment siTD siU et siVD ne onnissent ps les medi queries mis sont ples d9interprter le dut de l rgle @ils svent lire dmedi sreen pr exempleAF sls vont don lire les proprits g qui suivent mme s9ils ne sont ps onerns pr l rgle 3 our viter elD une sE tue onsiste utiliser le motEl only que es vieilles versions ne onnissent ps X  @media only screen ne provoquer ps de ug sur les vieux nE vigteursF

Tester les media queries

Les media queries sont surtout utilises pour adapter le design du site aux direntes largeurs d'cran. Faisons un test tout simple : nous allons changer la couleur et la taille du texte si la fentre fait plus ou moins de 1024 pixels de large. Pour ce test, je vais utiliser la seconde mthode qui consiste crire la rgle directement dans le mme chier .css que d'habitude :
1 2 3 4 5 6 7

/* Paragraphes en bleu par d faut */ p { color : blue ; } /* Nouvelles r gles si la fen tre fait au plus 1024px de large */ @media screen and ( max - width : 1024px )

254

LES RGLES DISPONIBLES

9 10 11 12 13 14 15 16

p {

color : red ; background - color : black ; font - size : 1 . 2em ;

Dans notre feuille CSS, nous avons d'abord demand ce que le texte des paragraphes soit crit en bleu, jusque l rien de nouveau. En revanche, nous avons ajout une media query qui s'applique tous les crans dont la largeur ne dpasse pas 1024px. l'intrieur, nous avons appliqu des rgles CSS sur les paragraphes pour les crire plus gros et en rouge. Rsultat : la page n'a pas la mme apparence selon la taille de la fentre (gure 18.1) ! Essayez de la redimensionner pour voir ! Tester ce code Code web : 358915 


Figure 18.1  L'apparence du texte change en fonction de la taille de la fentre

255

CHAPITRE 18.

MISE EN PAGE ADAPTATIVE AVEC LES MEDIA QUERIES

Mise en pratique des media queries sur le design

Bon, changer la couleur du texte, c'est bien joli mais cela n'apporte pas grand-chose. Par contre, cela devient de suite plus intressant quand on se sert des media queries pour modier l'apparence de son site en fonction de la rsolution. Vous allez voir qu'on peut faire tout ce qu'on veut ! Pour cet exemple, je vous propose de reprendre le design que nous avons cr pour le site web de Zozor (gure 18.2).

Figure 18.2  Le site web ralis lors du TP

Le site est bien adapt la plupart des rsolutions d'cran mais, quand l'cran est plus petit que 1024 px, il devient ncessaire de  scroller  vers la droite pour voir toute la page. Le site n'est donc pas trs pratique consulter sur un petit cran. Je vous propose d'utiliser les media queries pour changer l'apparence du site sur les rsolutions infrieures 1024 px de largeur. Nous allons oprer les modications suivantes :  le menu de navigation en haut droite sera dispos en hauteur plutt qu'en largeur, et les liens seront crits en plus petit ;  la bannire avec le pont de San Francisco (le Golden Gate ) sera supprime, car elle prend beaucoup de place et n'apporte pas beaucoup d'informations ;  le bloc <aside>  propos de l'auteur  sera plac sous l'article (et non pas ct), et son contenu sera rorganis (la photo de Zozor sera positionne en ottant). On pourrait bien entendu faire beaucoup d'autres modications : changer la couleur, la disposition du pied de page, etc. Mais cela sera dj bien susant pour nous entraner avec les media queries. Nous allons travailler directement l'intrieur du chier style.css que nous avons ralis lors du TP. Nous y ajouterons quelques instructions media queries pour adapter le design. Je vous invite tlcharger les chiers du TP si vous ne les avez pas dj. 256

MISE EN PRATIQUE DES MEDIA QUERIES SUR LE DESIGN

Tlcharger le TP Code web : 975009 

La page
Pour le moment, la largeur de la page est xe 900 px et le contenu est centr :
1 2 3 4 5

# bloc_page { width : 900px ; margin : auto ; }

la suite de ces lignes, je vous propose d'ajouter la rgle media query suivante :
1 2 3 4 5 6 7

@media all and ( max - width : 1024px ) { # bloc_page { width : auto ; } }

La rgle signie :  Pour tous les types d'crans, si la largeur de la fentre ne dpasse pas 1024 px, alors excuter les rgles CSS suivantes . Les rgles CSS en question sont trs simples, il n'y en a en fait qu'une seule : on donne une largeur automatique la page (plutt qu'une largeur xe de 900 px). La page prendra alors tout l'espace disponible dans la fentre. Cela vite l'apparition de barres de dlement horizontales sur les petites rsolutions.
auto est l vleur pr dfut de l proprit widthF r dfutD les los ont

une lrgeur utomtique @ils prennent toute l ple disponileAF gette vleur  rse elle que nous vions fore WHHpx quelques lignes plus hut X nous revenons don u omportement pr dfut du loF

Le menu de navigation
Nous voulons que le menu de navigation prenne moins de place sur les petites rsolutions. Plutt que de lui donner une dimension xe, nous allons lui redonner sa dimension automatique exible d'origine. Chaque lment du menu s'crira en dessous du prcdent : pour cela, nous transformerons les puces en block plutt qu'en inline-block. Enn, le texte sera crit plus petit et nous retirons la bordure en bas des liens lors du survol, car elle est moins adapte cette disposition.
1 2

@media all and ( max - width : 1024px ) {

257

CHAPITRE 18.

MISE EN PAGE ADAPTATIVE AVEC LES MEDIA QUERIES

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

nav { }

width : auto ; text - align : left ;

nav li { display : block ; padding - left : 4px ; } nav a { font - size : 1 . 1em ; } nav a : hover { border - bottom : 0 ; }

La bannire
Pour retirer la bannire, rien de plus simple : nous utilisons la proprit display laquelle nous aectons la valeur none. Si la fentre est trop petite, nous prfrons masquer compltement la bannire :
1 2 3 4 5 6 7

@media all and ( max - width : 1024px ) { # banniere_image { display : none ; } }

Le bloc  propos de l'auteur 

Plutt que de placer ce bloc droite de l'article, nous allons le faire passer en-dessous. Ce type de disposition  de haut en bas  est plus adapt aux petits crans. l'intrieur du bloc, nous rajustons un peu la position des lments : la photo de Zozor, notamment, sera place en ottant droite.
1 2 3

@media all and ( max - width : 1024px ) { article , aside

258

MISE EN PRATIQUE DES MEDIA QUERIES SUR LE DESIGN

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

width : auto ; display : block ; margin - bottom : 15px ;

# fleche_bulle { display : none ; } # photo_zozor img { width : 110px ; float : right ; margin - left : 15px ; } aside p : last - child { text - align : center ; }

ue signi(e aside

p:last-child c

C'est un slecteur avanc que nous n'avons pas utilis jusqu'ici. aside p signie  Tous les paragraphes l'intrieur de la balise <aside> . Avec :last-child, on cible uniquement le dernier paragraphe dans le bloc aside (celui qui contient les liens vers Facebook et Twitter), pour pouvoir centrer les images. Bien entendu, on aurait aussi pu aecter une class ou un id ce paragraphe pour le cibler directement, mais je n'ai pas voulu modier le code HTML.

Le rsultat
La page est dsormais compltement rorganise lorsque la fentre fait 1024 px ou moins de largeur. Regardez par vous-mmes le rsultat, la gure 18.3 parle d'elle-mme !


Tester la page Code web : 865167 

259

CHAPITRE 18.

MISE EN PAGE ADAPTATIVE AVEC LES MEDIA QUERIES

Figure 18.3  Le mme site, prsent diremment en fonction de la largeur de l'cran

Media queries et navigateurs mobiles

Comme vous le savez srement, les crans des smartphones sont beaucoup moins larges que nos crans habituels (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles achent le site en  dzoomant , ce qui permet d'avoir un aperu de l'ensemble de la page. La zone d'achage simule est appele le viewport : c'est la largeur de la fentre du navigateur sur le mobile. En CSS, avec les media queries, si vous ciblez l'cran avec max-width sur un mobile, celui-ci va comparer la largeur que vous indiquez avec celle de son viewport. Le problme, c'est que le viewport change selon le navigateur mobile utilis !

Navigateur

Opera Mobile iPhone Safari Android Windows Phone 7

Largeur du viewport par dfaut

850 pixels 980 pixels 800 pixels 1024 pixels

Un iPhone se comporte comme si la fentre faisait 980 px de large, tandis qu'un Android se comporte comme si la fentre faisait 800 px ! Pour cibler les smartphones, plutt que d'utiliser max-width, il peut tre intressant de recourir max-device-width : c'est la largeur du priphrique. Les priphriques mobiles ne dpassant pas 480 px de large, on pourra viser uniquement les navigateurs mobiles avec cette media query :
1 2 3 4

@media all and ( max - device - width : 480px ) { /* Vos r gles CSS pour les mobiles ici */ }

260

MEDIA QUERIES ET NAVIGATEURS MOBILES

ourquoi ne ps iler les moiles ve l rgle medi handheld c

Je vois que vous suivez, trs bien ! En eet, on peut (en thorie) cibler les crans mobiles avec le media handheld. . . Malheureusement, aucun navigateur mobile part Opera mobile ne reconnat handheld. Ils se comportent tous comme s'ils taient des crans normaux (screen). On ne peut donc pas vraiment utiliser handheld pour viser les mobiles. Vous pouvez modier la largeur viewport du navigateur mobile avec une balise meta insrer dans l'en-tte (<head>) du document :
1

< meta name = " viewport " content = " width = 320 " / >

Vous pouvez utiliser cette balise pour modier la faon dont le contenu de votre page s'organise sur les mobiles. Pour obtenir un rendu facile lire, sans zoom, vous pouvez demander ce que le viewport soit le mme que la largeur de l'cran :
1

< meta name = " viewport " content = " width = device - width " / >

En rsum
 Les media queries permettent de charger des styles CSS dirents en fonction de certains paramtres.  Les paramtres autoriss par les media queries sont nombreux : nombre de couleurs, rsolution de l'cran, orientation. . . En pratique, on s'en sert surtout pour modier l'apparence du site en fonction des direntes rsolutions d'cran.  On cre une media query avec la directive @media suivie du type d'cran et d'une ou plusieurs conditions (comme la largeur maximale d'cran). Le style CSS qui suit sera activ uniquement si les conditions sont remplies.  Les navigateurs mobiles simulent une largeur d'cran : on appelle cela le viewport.  On peut cibler les smartphones grce une rgle base sur le nombre rel de pixels achs l'cran : max-device-width.

261

CHAPITRE 18.

MISE EN PAGE ADAPTATIVE AVEC LES MEDIA QUERIES

262

Chapitre

19
Dicult :

Aller plus loin

lors que e livre touhe s (nD l tenttion est grnde de penser que l9on tout vuF out vu c ous n9vez qund mme ps ru el c ellons onD il vous reste des entines de hoses douvrirD que e soit sur rwvD gD ou les tehnologies qui y sont lies @rD tvriptF F FAF ge hpitre pour ut de vous donner quelques diretions pour omplter votre pprentisE sgeF elors ne soyez ps tristesD r vous n9vez ps (ni de fire des douvertes 3

263

CHAPITRE 19.

ALLER PLUS LOIN

Du site web l'application web (JavaScript, AJAX. . .)

JavaScript est un langage qui existe depuis de nombreuses annes maintenant et que l'on utilise frquemment sur le Web en plus de HTML et CSS. C'est probablement l'un des premiers langages que vous voudrez apprendre maintenant que vous avez des connaissances en HTML et CSS.

quoi tvript peutEil ien servir c yn ne peut ps tout fire ve rwv et g c

On peut faire dj beaucoup de choses en HTML et CSS mais, lorsqu'on veut rendre sa page plus interactive, un langage comme JavaScript devient indispensable. Voici quelques exemples de ce quoi peut servir JavaScript :  On l'utilisera le plus souvent pour modier des proprits CSS sans avoir recharger la page. Par exemple, vous pointez sur une image et le fond de votre site change de couleur (ce n'est pas possible faire avec un :hover car cela concerne deux balises direntes, c'est bien l une limite du CSS).  On peut l'utiliser aussi pour modier le code source HTML sans avoir recharger la page, pendant que le visiteur consulte la page.  Il permet aussi d'acher des botes de dialogue l'cran du visiteur. . .  . . . ou encore de modier la taille de la fentre. JavaScript est un langage qui se rapproche des langages de programmation tels que le C, C++, Python, Ruby. . . l'inverse, HTML et CSS sont davantage des langages de description : ils dcrivent comment la page doit apparatre mais ils ne donnent pas d'ordres directs l'ordinateur ( fais ceci, fais cela. . . ), contrairement JavaScript.

tvript n9 aucun rpport ve le lngge tvF euls les noms se resE semlentF
JavaScript est rgulirement utilis aujourd'hui pour faire de l'AJAX (Asynchronous JavaScript And XML). Cette technique permet de modier une partie de la page web que le visiteur consulte en changeant des donnes avec le serveur. Cela donne l'impression que les pages sont plus dynamiques et plus ractives. Le visiteur n'a plus besoin de recharger systmatiquement toute la page. Les navigateurs sont de plus en plus ecaces dans leur traitement de JavaScript, ce qui fait que les pages qui utilisent JavaScript sont de plus en plus ractives. On peut ainsi arriver aujourd'hui crer des sites qui deviennent littralement des applications web, l'quivalent de logiciels mais disponibles sous forme de sites web ! Un exemple clbre : Google Docs, la suite bureautique de Google, disponible sur le Web (gure 19.1). Pour en savoir plus sur JavaScript, lisez le tutoriel du Site du Zro ! 264

TECHNOLOGIES LIES HTML5 (CANVAS, SVG, WEB SOCKETS. . .)

Figure 19.1  Le tableur Google Docs

Lire le tutoriel JavaScript Code web : 893076 


Technologies lies HTML5 (Canvas, SVG, Web Sockets. . .)

Le W3C ne travaille pas que sur les langages HTML et CSS. Ce sont certes les plus connus, mais le W3C cherche aussi dnir d'autres technologies qui viennent complter HTML et CSS. Elles sont nombreuses et on les confond d'ailleurs souvent avec HTML5.

in fitD rwvS est devenu un mot trs utilis qui fit rfrene d9utres tehnologies que rwvF und quelqu9un vous prle de  rwvS ujourE d9huiD il fit peutEtre ussi rfrene d9utres lments qui sortent du dre strit du rwvF
Voici une petite liste de ces nouvelles technologies introduites en parallle de HTML5 (notez que certaines ne sont pas vraiment  nouvelles  mais elles reviennent sur le devant de la scne) :  Canvas : permet de dessiner au sein de la page web, l'intrieur de la balise HTML <canvas>. On peut dessiner des formes (triangles, cercles. . .) mais aussi ajouter des images, les manipuler, appliquer des ltres graphiques. . . Au nal, cela nous permet de raliser aujourd'hui de vritables jeux et des applications graphiques directement dans des pages web ! Vous pouvez par exemple consulter le tutoriel du Site du Zro sur Canvas (code web : 510274).  SVG : permet de crer des dessins vectoriels au sein des pages web. la dirence 265

CHAPITRE 19.

ALLER PLUS LOIN

  

  

de Canvas, ces dessins peuvent tre agrandis l'inni (c'est le principe du vectoriel). Le logiciel Inkscape est connu pour permettre de dessiner des SVG. Il existe un tutoriel sur le Site du Zro sur SVG (code web : 678000). Drag & Drop : permet de faire  glisser-dposer  des objets dans la page web, de la mme faon qu'on peut faire glisser-dposer des chiers sur son bureau. Gmail l'utilise pour permettre d'ajouter facilement des pices jointes un e-mail. File API : permet d'accder aux chiers stocks sur la machine du visiteur (avec son autorisation). On l'utilisera notamment en combinaison avec le Drag & Drop. Golocalisation : pour localiser le visiteur et lui proposer des services lis au lieu o il se trouve (ex. : les horaires des salles de cinma proches). La localisation n'est pas toujours trs prcise, mais cela peut permettre de reprer un visiteur quelques kilomtres prs (avec son accord). Web Storage : permet de stocker un grand nombre d'informations sur la machine du visiteur. C'est une alternative plus puissante aux traditionnels cookies. Les informations sont hirarchises, comme dans une base de donnes. Appcache : permet de demander au navigateur de mettre en cache certains chiers, qu'il ne cherchera alors plus tlcharger systmatiquement. Trs utile pour crer des applications web qui peuvent fonctionner mme en mode  hors ligne  (dconnect). Web Sockets : permet des changes plus rapides, en temps rel, entre le navigateur du visiteur et le serveur qui gre le site web (c'est une sorte d'AJAX amlior). C'est un peu l'avenir des applications web, qui pourront devenir aussi ractives que les vrais programmes. WebGL : permet d'introduire de la 3D dans les pages web, en utilisant le standard de la 3D OpenGL (gure 19.2). Les scnes 3D sont directement gres par la carte graphique.

v pluprt de es tehnologies s9utilisent ve tvriptF sl s9git don de nouvelles fontionnlits que l9on peut utiliser en tvriptF
Comme vous le voyez, vous avez de nouveaux mondes dcouvrir ! Ds que vous connatrez susamment JavaScript, vous pourrez aller encore plus loin dans la gestion de votre site web. . . que vous pourrez mme transformer en vritable application !

Les sites web dynamiques (PHP, JEE, ASP .NET. . .)

Les langages dont nous allons parler ici sont eux aussi des langages de programmation. Comme JavaScript ? Oui, mais avec une dirence importante : JavaScript s'excute sur la machine de vos visiteurs, tandis que les langages que nous allons voir s'excutent sur le  serveur  qui contient votre site web.

uelle di'rene el fitEil que le progrmme tourne sur l mhine du visiE teur ou sur le serveur c
266

LES SITES WEB DYNAMIQUES (PHP, JEE, ASP .NET. . .)

Figure 19.2  Une application web 3D utilisant WebGL

Les dirences sont importantes. Tout d'abord, en termes de puissance, un serveur sera bien souvent plus rapide que la machine de vos visiteurs, ce qui permet d'eectuer des calculs plus complexes. Vous avez aussi davantage de contrle ct serveur qu'en JavaScript. . . Mais le JavaScript reste irremplaable car il y a certaines actions que vous ne pouvez faire que du ct  visiteur . Les langages serveur permettent de gnrer la page web lorsque le visiteur arrive sur votre site (gure 19.3). Chaque visiteur peut donc obtenir une page web personnalise suivant ses besoins !

Figure 19.3  change de donnes avec un serveur

Les langages ne servent donc pas aux mmes choses, mais ils se compltent. Si vous combinez HTML + CSS + JavaScript + PHP, par exemple, vous pouvez faire de l'AJAX (changes de donnes entre la page et le serveur), vous pouvez eectuer des calculs, stocker des informations dans des bases de donnes. . . bref, faire de vrais sites web dynamiques ! Les langages  ct serveur  sont nombreux. Citons-en quelques-uns :  PHP : l'un des plus connus. Facile utiliser et puissant, il est utilis notamment par Facebook. . . et le Site du Zro. J'ai d'ailleurs rdig un tutoriel sur PHP sur le 267

CHAPITRE 19.

ALLER PLUS LOIN

Site du Zro, que vous pouvez lire en suivant le code web ci-dessous. JEE (Java) : trs utilis dans le monde professionnel, il s'agit d'une extension du langage Java qui permet de raliser des sites web dynamiques, puissants et robustes. Au dbut, il est un peu plus complexe prendre en main que PHP.  ASP .NET (C#) : assez semblable JEE, c'est le langage de Microsoft. On l'utilise en combinaison avec d'autres technologies Microsoft (Windows Server. . .). Il utilise le puissant framework .NET, vritable couteau suisse des dveloppeurs, qui ore de nombreuses fonctionnalits.  Django (Python) : une extension du langage Python qui permet de raliser rapidement et facilement des sites web dynamiques. Il est connu pour gnrer des interfaces d'administration prtes l'emploi.  Ruby on Rails (Ruby) : une extension du langage Ruby, assez similaire Django, qui permet de raliser des sites web dynamiques facilement et avec une grande souplesse.  Lire le tutoriel sur PHP Code web : 955969 


gonntre l9un de es lngges est indispensle si vous voulez triter le rsulE tt des formulires rwv 3 ouvenezEvous de l lise <form> X je vous vis expliqu omment rer des formuliresD mis ps omment rcuprer les inE formtions sisies pr vos visiteursF sl vous fut oligtoirement un lngge serveurD omme rD pour ruprer et triter es donnes 3
Au nal, ces langages vous permettent de raliser vos rves les plus fous sur votre site web :  forums ;  newsletter ;  compteur de visiteurs ;  systme de news automatis ;  gestion de membres ;  jeux web (jeux de stratgie, levage d'animaux virtuels. . .) ;  etc.

sl est indispensle onntre les lngges rwv et g vnt d9pprendre un lngge serveur omme r 3
Bonne dcouverte !

268

Cinquime partie
Annexes

269

Chapitre

20
Dicult :

Envoyez votre site sur le Web

otre site est tout euD tout propreD tout prtF F F mis omme il est sur votre disque durD personne d9utre ne v pouvoir en pro(ter 3 ous imeriez don l9envoyer sur le eD misF F F vous ne svez ps omment fireF xous llons douvrir dns ette nnexe tout e qu9il fut svoir pour envoyer son site sur le e X IF gomment rserver un nom de domaine c PF u9estEe qu9un hbergeur et omment el fontionneEtEil c QF in(nD omment utiliser un client FTP pour pouvoir trnsfrer les (hiers sur le xet c

271

CHAPITRE 20.

ENVOYEZ VOTRE SITE SUR LE WEB

Le nom de domaine
siteduzero.com est par exemple un nom de domaine.

Savez-vous ce qu'est un nom

de domaine ? Il s'agit en fait d'une adresse sur le Web :

Un nom de domaine est constitu de deux parties : siteduzero.com.  En rouge, le nom de domaine proprement dit. Il s'agit d'un nom que l'on peut en gnral choisir librement, tant que personne ne l'a rserv avant nous. Il peut contenir des lettres et des chires, mais pas de symboles particuliers (comme le   franais, le  , le  , les espaces, etc.).  En bleu, l'extension (aussi appele  TLD , de l'anglais top-level domain ). Il existe grosso modo une extension par pays (.fr pour la France, .be pour la Belgique, .ca pour le Canada, etc.). Toutefois, il y a aussi des extensions utilises au niveau international comme .com, .net, .org. Elles taient au dpart rserves aux sites commerciaux, aux organisations, . . . mais cela fait longtemps que tout le monde peut les rserver. D'ailleurs, .com est trs probablement l'extension la plus utilise sur le Web.

in gnrlD un site we voit son dresse prde pr wwwD omme pr exemple www.siteduzero.comF gel ne fit ps prtie du nom de domine X en fitD www est e qu9on ppelle un sousEdomineD et on peut en thorie en rer utnt qu9on veut une fois qu9on est propritire du nom de domineF ve www t dopt pr tous les wemstersD 9est une sorte de onventionD mis elle n9est solument ps oligtoireF

Rserver un nom de domaine

woi ussi je veux un nom de domine pour mon site 3 gomment doisEje fire c
Alors j'ai une bonne et une mauvaise nouvelle. Comme d'habitude, on va commencer par la mauvaise :  la mauvaise : ce n'est pas gratuit. . .  la bonne : . . . ce n'est vraiment pas cher du tout. En eet, un nom de domaine cote entre 7 et 12 euros par an. Le prix peut varier en fonction de l'extension. Ainsi, l'extension .info est gnralement propose plus bas prix et peut s'avrer tre une alternative intressante. Mais si vous voulez une adresse plus  courante , il faudra plutt viser une extension de type .com ou encore .fr. Pour rserver un nom de domaine, deux solutions :  Passer par un registrar spcialis. C'est un organisme qui sert d'intermdiaire entre 272

L'HBERGEUR

l'ICANN 1 et vous. 1&1, OVH et Gandi sont de clbres registrars franais.  Encore mieux : vous pouvez commander le nom de domaine en mme temps que l'hbergement (c'est ce que je vous conseille). De cette manire, vous faites d'une pierre deux coups, vu que vous aurez de toute faon besoin de l'hbergement et du nom de domaine. Dans ce chapitre, nous allons voir comment commander un nom de domaine en mme temps que l'hbergement, c'est de loin la solution la plus simple et la moins coteuse pour vous.

L'hbergeur
Intressons-nous maintenant l'hbergeur.

u9estEe qu9un hergeur et pourquoi urisEje esoin de lui c

Sur Internet, tous les sites web sont stocks sur des ordinateurs particuliers appels serveurs (gure 20.1). Ce sont des ordinateurs gnralement trs puissants, qui restent tout le temps allums. Ils contiennent les pages des sites web et les dlivrent aux internautes qui les demandent, toute heure du jour et de la nuit.

Figure 20.1  Un serveur

Un serveur ne possde pas d'cran car, la plupart du temps, il tourne tout seul sans qu'il y ait besoin de faire quoi que ce soit dessus. Comme vous le voyez, les serveurs sont trs plats : c'est un format spcial de serveur (appel  1U ). Cela permet de les empiler dans des baies 2 (gure 20.2). Comme vous le voyez, il y a un cran pour toute la baie. C'est susant car on ne branche l'cran sur un serveur que si celui-ci rencontre un problme. La plupart du temps, heureusement, le serveur travaille sans broncher.
1. L'ICANN est l'organisation qui gre l'ensemble des noms de domaine au niveau international. 2. Une baie est une sorte d'armoire climatise pour serveurs.

273

CHAPITRE 20.

ENVOYEZ VOTRE SITE SUR LE WEB

Figure 20.2  Une baie de serveurs

Le rle de l'hbergeur
L'hbergeur est une entreprise qui se charge de grer des baies de serveurs. Elle s'assure du bon fonctionnement des serveurs 24h/24, 7j/7. En eet, si l'un d'eux tombe en panne, tous les sites prsents sur la machine deviennent inaccessibles (et cela fait des clients mcontents). Ces baies se situent dans des lieux particuliers appels datacenters (gure 20.3). Les datacenters sont donc en quelque sorte des  entrepts serveurs  et leur accs est trs protg.

sl est ussi possileD en thorieD d9herger un site sur son propre ordinteurF outefoisD 9est omplexe X il vut mieux voir des onnissnes en vinuxD l9ordinteur doit tre ssez puissntD tourner jour et nuit etF F F surtoutF F F l onnexion doit tre trs trs hut dit @surtout en uploadD l vitesse d9enE voi des (hiers ompte normmentAF ves prtiuliers n9ont en rgle gnrle ps une onnexion su0smment puissnte pour herger des sitesD ontriE rement ux dtenters X euxEi sont ls en (re optique @e qui permet d9tteindre des vitesses de plusieurs qps 3A
Bref, grer un serveur soi-mme est complexe et, la plupart du temps, les particuliers et les entreprises font appel un hbergeur dont c'est le mtier.

Trouver un hbergeur
Les hbergeurs, contrairement aux registrars, sont trs trs nombreux. Il y en a de tous types, tous les prix. Il y a un vocabulaire connatre pour vous reprer dans leurs ores :  Hbergement mutualis : si vous optez pour une ore d'hbergement mutualis, votre site sera plac sur un serveur grant plusieurs sites la fois (peut-tre 274

L'HBERGEUR

Figure 20.3  Un datacenter, dans lequel on voit plusieurs baies de serveurs

une centaine, peut-tre plus). C'est l'ore la moins chre et c'est celle que je vous recommande de viser si vous dmarrez votre site web.  Hbergement ddi virtuel : cette fois, le serveur ne gre que trs peu de sites (gnralement moins d'une dizaine). Cette ore est gnralement adapte aux sites qui d'un ct ne peuvent plus tenir sur un hbergement mutualis car ils ont trop de trac (trop de visiteurs), mais qui par ailleurs ne peuvent pas se payer un hbergement ddi (voir ci-dessous).  Hbergement ddi (on parle aussi de  serveur ddi ) : c'est le nec plus ultra. Le serveur gre uniquement votre site et aucun autre. Attention, cela cote assez cher et il vaut mieux avoir des connaissances en Linux pour administrer le serveur distance. Par exemple, le Site du Zro est lui-mme sur un hbergement ddi, car son trac est trs important.

wis o puisEje trouver un hergeur c

Oh cela, c'est trs simple. Une recherche dans Google de  hbergeur web  vous donnera plusieurs millions de rsultats. Vous n'aurez que l'embarras du choix. Si je puis me permettre un conseil, je vous recommande de jeter un coup d'il l'hbergeur PlanetHoster, qui propose des services d'hbergement de qualit. Ils font d'ailleurs des rductions pour tous les lecteurs de ce livre ! 275

CHAPITRE 20.

ENVOYEZ VOTRE SITE SUR LE WEB

Les ores de PlanetHoster Code web : 662697  Si les ores de PlanetHoster ne vous conviennent pas, vous pouvez regarder chez l'hbergeur 1&1 ou encore MavenHosting, qui proposent d'autres ores pour les particuliers et entreprises. La suite de ce chapitre dtaille la procdure pour hberger votre site chez PlanetHoster, mais sachez que cela fonctionne quasiment de la mme manire avec 1&1 et MavenHosting. Revenons PlanetHoster. Cet hbergeur propose plusieurs ores d'hbergement mutualis, comme le montre la gure 20.4.

Figure 20.4  Les ores mutualises de PlanetHoster

PlanetHoster fait des rductions spciales sur tous ses hbergements mutualiss pour les lecteurs de ce livre :  5% de remise pour le plan  Essentiel  ;  15% de remise pour les plans  Performance  et  Illimit . Ces remises sont valables si vous saisissez un code promotionnel (j'en reparle un peu plus bas) pour une commande annuelle de l'un de ces plans :  Plan Essentiel : 10 Go d'espace disque, 250 Go de trac, un nom de domaine et un nombre illimit de comptes e-mail ;  Plan Performance : 50 Go d'espace disque, trac illimit, un nom de domaine et un nombre illimit de comptes e-mail ;  Plan Illimit : espace disque, trac et nombre de comptes e-mail illimits ainsi qu'un nom de domaine.

ous es pks donnent l possiilit d9voir des noms de domine en .fr 3

276

L'HBERGEUR

Ces ores sont en fait trs similaires, elles dirent seulement au niveau de l'espace de stockage et du trac.

wis qu9estEe qu9ils ppellent le  tr( c

Le trac, c'est la quantit de donnes envoyes par mois aux visiteurs de votre site. Par exemple, si vous avez une image de 1 Mo sur votre site et qu'elle est charge 500 fois dans le mois par vos visiteurs, alors vous crez un trac de 500 Mo. En pratique, il faut savoir que les navigateurs des visiteurs mettent gnralement en cache les images, ce qui leur vite d'avoir recharger plusieurs fois une mme image. Cela diminue d'autant plus le trac ncessaire. Si vous avez beaucoup de visiteurs (donc beaucoup de trac), il faudra choisir un plan qui autorise plus de trac.

Commander un hbergement pour votre site web

Aprs avoir cliqu sur n'importe quel bouton  Commander , nous arrivons sur la page reprsente la gure 20.5.

Figure 20.5  Formulaire de commande de PlanetHoster

Nous avons ici trois informations :  Choisissez un produit : indique quel plan vous avez choisi. Vous pouvez en changer directement via cet encart ;  Nom de domaine : cette partie vous permet de choisir le nom de domaine de votre site web. Nous allons y venir.  Rsum : ce cadre, comme son nom l'indique, rsume votre commande avec le plan choisi ainsi que le prix payer. Le champ de texte se trouvant dans le cadre Rsum (gure 20.6) vous permet de 277

CHAPITRE 20.

ENVOYEZ VOTRE SITE SUR LE WEB

saisir un code promotionnel :  SiteDuZero-Perso : si vous commandez un Plan Essentiel ( 2,99 euros / mois) ;  SiteDuZero : si vous commandez n'importe quel autre plan.

Figure 20.6  Un code promotionnel chez PlanetHoster

Validez et vous aurez alors une rduction sur le montant total du pack d'hbergement ! Le champ de texte se trouvant sous Nom de domaine vous invite saisir. . . votre nom de domaine. Le site de PlanetHoster va alors se charger de vrier si le domaine est disponible. Si c'est bon, vous pouvez passer la suite. Sinon, il faudra choisir un autre nom de domaine car, quand le domaine est dj pris, vous ne pouvez pas faire grand chose. Ensuite, le site vous demande si vous dsirez qu'il enregistre ce domaine ou si vous dsirez l'enregistrer sparment (gure 20.7).

Figure 20.7  PlanetHoster

indique si le nom de domaine est dj enregistr

ytenir un  vri nom de domine @.frD .comD .netD .orgF F FA est hiE tuellement pynt hez les hergeursF xnmoinsD si vous hetez un hE ergement d9un n hez PlanetHosterD le nom de domine est o'ert @il est ompris dns l9hergementAF
278

UTILISER UN CLIENT FTP

Il ne vous reste plus qu' renseigner vos coordonnes et naliser l'achat par carte bancaire ou Paypal. Une fois les formalits et le paiement eectus, vous tes redirigs vers PlanetHoster, qui vous conrme la prise en compte de votre commande. Vous devriez recevoir un peu plus tard un e-mail vous indiquant toutes les informations ncessaires pour mettre en place votre site. Conservez-les prcieusement, vous en aurez besoin. Lorsque vous avez reu par e-mail vos identiants pour vous connecter au serveur de votre hbergeur, vous pouvez passer l'tape suivante : envoyer votre site web sur le serveur de votre hbergeur !

Utiliser un client FTP

Installer un client FTP
FTP signie File Transfer Protocol et, pour faire court et simple, c'est le moyen que l'on utilise pour envoyer nos chiers. Il existe des logiciels permettant d'utiliser le FTP pour transfrer vos chiers sur Internet. Bien entendu, des logiciels FTP, il en existe des centaines, gratuits, payants, franais, anglais, etc. Pour que nous soyons sur la mme longueur d'onde, je vais vous proposer celui que j'utilise, qui est gratuit et en franais : FileZilla (gure 20.8).

Figure 20.8  L'icne du clbre client FTP FileZilla

ge logiiel n9 rien voir ve wozillD si e n9est qu9il se termine lui ussi pr  zill F x9llez don ps roire que je vous fore utiliser des logiiels d9un mme diteurD 9est tout fit fuxF h9illeursD vous pouvez utiliser n9importe quel utre logiiel p si el vous hnteD el ne me drnge solument psF
Quoiqu'il en soit, je vais vous montrer quelle est la marche suivre avec FileZilla. Et la premire tape, c'est bien entendu de le tlcharger ! Tlcharger FileZilla Code web : 667869  Prenez la version correspondant votre systme d'exploitation (Windows, Mac OS X ou Linux). Je vous fais conance pour l'installation, elle est toute simple et vous ne devriez pas avoir de problme. Lancez le logiciel, vous devriez voir quelque chose ressemblant la gure 20.9. 279


CHAPITRE 20.

ENVOYEZ VOTRE SITE SUR LE WEB

Figure 20.9  FileZilla est ouvert

premire vue, cela semble un peu compliqu ( premire vue seulement). En fait, le principe est trs simple. Il y a quatre grandes zones connatre dans la fentre : 1. En haut, vous verrez apparatre les messages qu'envoie et reoit le logiciel. Si vous avez un peu de chance, vous verrez mme la machine vous dire bonjour (si si, je vous jure). En gnral, cette zone ne nous intresse pas vraiment, sauf s'il y a des messages d'erreur en rouge. . . 2. gauche, c'est votre disque dur. Dans la partie du haut, vous avez les dossiers et, dans la partie du bas, la liste des chiers du dossier actuel. 3. droite, c'est la liste des chiers envoys sur le serveur sur Internet. Pour le moment il n'y a rien car on ne s'est pas connect, mais cela va venir, ne vous en faites pas. 4. Enn, en bas, vous verrez apparatre les chiers en cours d'envoi (et le pourcentage d'envoi). La premire tape va tre de se connecter au serveur de votre hbergeur.

Congurer le client FTP

Quel que soit l'hbergeur que vous avez choisi, cela fonctionne toujours de la mme manire. On va vous fournir trois informations qui sont indispensables pour que FileZilla puisse se connecter au serveur :  L'IP : c'est  l'adresse  du serveur. Le plus souvent, on vous donnera une information du type ftp.mon-site.com, mais il peut aussi s'agir d'une suite de nombres 280

UTILISER UN CLIENT FTP

comme 122.65.203.27. Le login : c'est votre identiant, on vous probablement demand de le choisir. Vous avez peut-tre mis votre pseudo, ou le nom de votre site. Mon login pourrait par exemple tre mateo21.  Le mot de passe : soit on vous a demand de choisir un mot de passe, soit (c'est plus probable) on vous en a attribu un d'oce (un truc imprononable du genre crf45u7h). Si vous avez ces trois informations, vous allez pouvoir continuer. Si vous ne les avez pas, il faut que vous les cherchiez, c'est indispensable. On vous les a probablement envoyes par e-mail. Sinon, n'hsitez pas les demander votre hbergeur (IP, login et mot de passe). Maintenant que nous sommes en possession de ces informations, nous allons les donner FileZilla, qui en a besoin pour se connecter au serveur. Cliquez sur la petite icne en haut gauche (pas sur la petite che droite, mais bien sur l'image), reprsente la gure 20.10. 

Figure 20.10  L'icne de connexion de FileZilla

Une fentre s'ouvre. Cliquez sur Nouveau site et donnez-lui le nom que vous voulez (par exemple  Site du Zro ). droite, vous allez devoir indiquer les trois informations dont je viens de vous parler, comme la gure 20.11.

Figure 20.11  Les trois informations donner FileZilla

281

CHAPITRE 20.

ENVOYEZ VOTRE SITE SUR LE WEB

Vous pouvez distinguer en haut l'hte (c'est l qu'il faut indiquer ftp.monsite.com, par exemple). Cochez Type d'authentification : Normale pour pouvoir saisir le login et le mot de passe. Cliquez sur Connexion et le tour est (presque) jou.

Transfrer les chiers

ce stade, deux possibilits :  Soit la connexion a russi : vous voyez alors apparatre en haut des messages en vert comme  Connect . Dans ce cas, la zone de droite de la fentre de FileZilla devrait s'activer et vous verrez les chiers qui se trouvent dj sur le serveur (il se peut qu'il y en ait dj quelques-uns).  Soit cela a plant, vous avez plein de messages crits en rouge et l, eh bien. . . il n'y a pas trente-six solutions : vous vous tes tromps en tapant l'IP, ou le login, ou le mot de passe. Un de ces lments est incorrect, veillez les redemander votre hbergeur car s'ils sont bons cela doit marcher. Si la connexion a russi, alors ce que vous avez faire est trs simple : dans la partie de gauche, cherchez o se trouvent, sur votre disque dur, vos chiers .html et .css (mais aussi vos images .jpg, .png, .gif, etc.). gauche, faites un double-clic sur le chier que vous voulez transfrer. Au bout de quelques secondes, il apparatra droite, ce qui voudra dire qu'il a t correctement envoy sur le serveur, et donc qu'il est accessible sur Internet !

ous pouvez envoyer n9importe quel type de (hierF fien entenduD gnrE lement on envoie des (hiers .phpD .htmlD .css et des imgesD mis vous pouvez ussi trs ien envoyer des .pdfD des progrmmesD des .zipD etF
La gure 20.12, par exemple, reprsente le rsultat que l'on obtient aprs avoir transfr un chier index.html et quelques autres chiers. Il apparat droite, ce qui veut dire qu'il est maintenant disponible sur le serveur.

euillez noter qu9il faut que votre pge d9ueil s9ppelle index.htmlF g9est l pge qui ser hrge lorsqu9un nouveu visiteur rriver sur votre siteF
Vous pouvez aussi transfrer des dossiers entiers d'un seul coup : il sut de faire un glisser-dposer du dossier depuis la partie de gauche (ou directement de la fentre de votre systme d'exploitation) jusqu' la partie de droite de la fentre de FileZilla. Une fois congur, vous pouvez voir que l'envoi de chiers est trs simple. 282

UTILISER UN CLIENT FTP

Figure 20.12  Des chiers sont hbergs sur le FTP

En rsum
 Pour le moment, votre site web n'est visible que par vous, sur votre ordinateur. Il faut l'envoyer sur le Web pour qu'il soit visible par tout le monde.  Vous avez besoin de deux lments :  Un nom de domaine : c'est l'adresse de votre site web. Vous pouvez rserver une adresse en .com, .fr, .net. . . Par exemple : siteduzero.com.  Un hbergeur : c'est lui qui va stocker votre site web sur une machine appele  serveur . Son rle sera d'envoyer votre site vos visiteurs toute heure du jour et de la nuit.  Pour transmettre les chiers de votre site au serveur de votre hbergeur, il faut utiliser un client FTP comme FileZilla.  Pour vous connecter au serveur, vous avez besoin de trois informations : l'adresse IP du serveur (ou son nom d'hte), votre login et votre mot de passe. Ceux-ci vous sont fournis par votre hbergeur.

283

CHAPITRE 20.

ENVOYEZ VOTRE SITE SUR LE WEB

284

Chapitre

21
Dicult :

Mmento des balises HTML

ette pge est une liste non exhaustive des lises rwv qui existentF ous trouverez ii un grnd nomre de lises rwvF xous en vons dj vu ertines dns le oursD mis il y en d9utres que nous n9vons ps eu l9osion d9tudierF qnrlementD les lises que nous n9vons ps tudies sont des lises un peu plus rrement utilisesF eutEtre trouverezEvous votre onheur dns e lot de nouvelles lisesF ous pouvez vous servir de ette nnexe omme d9un ideEmmoire lorsque vous dveloppez votre site weF

285

CHAPITRE 21.

MMENTO DES BALISES HTML

ettentionD j9insiste X cette annexe n'est pas complte et c'est volontaireF te prfre mettre moins de lises et grder seulement elles qui me semlent les plus utiles dns l prtiqueF

Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour raliser le  code minimal  d'une page web.

Balise

<html> <head> <body>

Description

Balise principale En-tte de la page Corps de la page

Code minimal d'une page HTML :

1 2 3 4 5 6 7 8 9 10 11

<! DOCTYPE html > < html > < head > < meta charset = " utf - 8 " / > < title > Titre </ title > </ head > < body > </ body > </ html >

Balises d'en-tte
Ces balises sont toutes situes dans l'en-tte de la page web, c'est--dire entre <head> et </head> :

Balise

<link /> <meta /> <script> <style> <title>

Description

Liaison avec une feuille de style Mtadonnes de la page web (charset, mots-cls, etc.) Code JavaScript Code CSS Titre de la page

286

BALISES DE STRUCTURATION DU TEXTE

Balises de structuration du texte

Balise
<abbr> <blockquote> <cite> <q> <sup> <sub> <strong> <em> <mark> <h1> <h2> <h3> <h4> <h5> <h6> <img /> <figure> <figcaption> <audio> <video> <source> <a> <br /> <p> <hr /> <address> <del> <ins> <dfn> <kbd> <pre> <progress> <time>

Description

Abrviation Citation (longue) Citation du titre d'une uvre ou d'un vnement Citation (courte) Exposant Indice Mise en valeur forte Mise en valeur normale Mise en valeur visuelle Titre de niveau 1 Titre de niveau 2 Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de niveau 6 Image Figure (image, code, etc.) Description de la gure Son Vido Format source pour les balises <audio> et <video> Lien hypertexte Retour la ligne Paragraphe Ligne de sparation horizontale Adresse de contact Texte supprim Texte insr Dnition Saisie clavier Achage format (pour les codes sources) Barre de progression Date ou heure

287

CHAPITRE 21.

MMENTO DES BALISES HTML

Balises de listes
Cette section numre toutes les balises HTML permettant de crer des listes (listes puces, listes numrotes, listes de dnitions. . .)

Balise
<ul> <ol> <li> <dl> <dt> <dd>

Description

Liste puces, non numrote Liste numrote lment de la liste puces Liste de dnitions Terme dnir Dnition du terme

Balises de tableau
Balise
<table> <caption> <tr> <th> <td> <thead> <tbody> <tfoot>

Description

Tableau Titre du tableau Ligne de tableau Cellule d'en-tte Cellule Section de l'en-tte du tableau Section du corps du tableau Section du pied du tableau

Balises de formulaire
Balise
<form> <fieldset> <legend> <label> <input /> <textarea> <select> <option> <optgroup>

Description

Formulaire Groupe de champs Titre d'un groupe de champs Libell d'un champ Champ de formulaire (texte, mot de passe, case cocher, bouton, etc.) Zone de saisie multiligne Liste droulante lment d'une liste droulante Groupe d'lments d'une liste droulante

288

BALISES GNRIQUES

Balises sectionnantes
Ces balises permettent de construire le squelette de notre site web.

Balise

<header> <nav> <footer> <section> <article> <aside>

Description

En-tte Liens principaux de navigation Pied de page Section de page Article (contenu autonome) Informations complmentaires

Balises gnriques
Les balises gnriques sont des balises qui n'ont pas de sens smantique. En eet, toutes les autres balises HTML ont un sens : <p> signie  Paragraphe , <h2> signie  Sous-titre , etc. Parfois, on a besoin d'utiliser des balises gnriques (aussi appeles balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises gnriques pour construire son design. Il y a deux balises gnriques : l'une est inline, l'autre est block.

Balise

<span> <div>

Description

Balise gnrique de type inline Balise gnrique de type block

Ces balises ont un intrt uniquement si vous leur associez un attribut class, id ou style :  class : indique le nom de la classe CSS utiliser.  id : donne un nom la balise. Ce nom doit tre unique sur toute la page car il permet d'identier la balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, par exemple pour crer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.  style : cet attribut vous permet d'indiquer directement le code CSS appliquer. Vous n'tes donc pas obligs d'avoir une feuille de style part, vous pouvez mettre directement les attributs CSS. Notez qu'il est prfrable de ne pas utiliser cet attribut et de passer la place par une feuille de style externe, car cela rend votre site plus facile mettre jour par la suite. Ces trois attributs ne sont pas rservs aux balises gnriques : vous pouvez aussi les utiliser sans aucun problme dans la plupart des autres balises.

289

CHAPITRE 21.

MMENTO DES BALISES HTML

290

Chapitre

22
Dicult :

Mmento des proprits CSS

ette pge est une liste non exhaustive des proprits g qui existent en gQF our l pluprtD e sont des proprits que nous vons vues dns le oursD mis vous trouverez ussi quelques nouvelles proprits que nous n9vons ps ordesF v liste est non exhustive r mon ut n9est ps de fire l liste de toutes les proprits g qui peuvent exister X il y en vriment trop @plus de deux ents 3A et ertines sont trs rrement utilisesF

291

CHAPITRE 22.

MMENTO DES PROPRITS CSS

Proprits de mise en forme du texte

Je rsume ici la plupart des proprits de mise en forme du texte. Qu'est-ce que la mise en forme de texte ? C'est tout ce qui touche la prsentation du texte proprement dit : le gras, l'italique, le soulign, la police, l'alignement, etc.

Proprit

font-family @font-face font-size font-weight font-style text-decoration font-variant text-transform font text-align vertical-align line-height text-indent white-space word-wrap text-shadow

Nom de police Police personnalise Taille du texte Gras Italique Soulignement, ligne au-dessus, barr ou clignotant Petites capitales Capitales Super proprit de police. Combine : font-weight, font-style, font-size, font-variant, font-family. Alignement horizontal Alignement vertical (cellules de tableau ou lments inline-block uniquement) Hauteur de ligne Alina Csure Csure force Ombre de texte

Description

Proprits de couleur et de fond

Proprit
color background-color background-image background-attachment background-repeat background-position background opacity

Couleur du texte Couleur de fond Image de fond Fond xe Rptition du fond Position du fond Super proprit du fond. Combine : background-image, background-repeat, background-attachment,
background-position

Description

Transparence

292

PROPRITS DE POSITIONNEMENT ET D'AFFICHAGE

Proprits des botes

Proprit
width height min-width max-width min-height max-height margin-top margin-left margin-right margin-bottom margin padding-top padding-left padding-right padding-bottom padding border-width border-color border-style border border-radius box-shadow

Largeur Hauteur Largeur minimale Largeur maximale Hauteur minimale Hauteur maximale Marge en haut Marge gauche Marge droite Marge en bas Super-proprit de marge. Combine : margin-top, margin-right, margin-bottom, margin-left. Marge intrieure en haut Marge intrieure gauche Marge intrieure droite Marge intrieure en bas Super-proprit de marge intrieure. Combine : padding-top, padding-right, padding-bottom, padding-left. paisseur de bordure Couleur de bordure Type de bordure Super-proprit de bordure. Combine border-width, border-color, border-style. Existe aussi en version border-top, border-right, border-bottom, border-left. Bordure arrondie Ombre de bote

Description

Proprits de positionnement et d'achage

Proprit
display visibility clip overflow float clear position top bottom

Description

Type d'lment (block, inline, inline-block, none. . .) Visibilit Achage d'une partie de l'lment Comportement en cas de dpassement Flottant Arrt d'un ottant Positionnement Position par rapport au haut Position par rapport au bas 293

CHAPITRE 22.

MMENTO DES PROPRITS CSS

left right z-index

Position par rapport la gauche Position par rapport la droite Ordre d'achage en cas de superposition

Proprits des listes

Proprit
list-style-type list-style-position list-style-image list-style

Description

Type de liste Position en retrait Puce personnalise Super-proprit de liste. Combine list-style-type, list-style-position, list-style-image.

Proprits des tableaux

Proprit
border-collapse empty-cells caption-side

Description

Fusion des bordures Achage des cellules vides Position du titre du tableau

Autres proprits
Proprit
cursor

Description

Curseur de souris

294

Chapitre

23
Dicult :

Grer la compatibilit entre les navigateurs

oil le snrio X vous trvillez d9rrheEpied sur le design de votre site weF ous y pssez du tempsD vous le soignezD et u (nl vous tes ontents de vousF ous fites tester le site pr un mi et l il vous rpond X  g9est un peu mohe qund mme F oit vous et votre mi vez des gots ompltement di'rentsD soit le site est joli chez vousD mis ps chez luiF in e'etD les nvigteurs n9ont ps extement le mme renduD mme s9ils s9e'orent de suivre les mmes rgles rwv et gF lus le nvigteur est nienD plus il y de risques qu9il ne omprenne ps les fontionnlits que vous utilisezF lutt que de der l pniqueD e hpitre vous propose quelques mthodes pour pE prendre grer es di'renes entre nvigteursF F F et otenir le meilleur rsultt possile quel que soit le nvigteurF

295

CHAPITRE 23.

GRER LA COMPATIBILIT ENTRE LES NAVIGATEURS

Les commentaires conditionnels

Souvent, ce sont les anciennes versions d'Internet Explorer qui vont vous poser problme. Comme certaines d'entre elles sont toujours utilises, vous devez apprendre composer avec.

La syntaxe des commentaires conditionnels

Heureusement, il existe une technique trs pratique pour adapter votre code aux anciennes versions d'Internet Explorer. Grce des commentaires conditionnels, vous pouvez faire en sorte qu'une portion du code HTML soit lue uniquement par certaines versions d'IE. Ce sont des commentaires HTML qui ont une forme un peu spciale et qui ne seront lus que par IE.
1 2 3

<! - - [ if IE ] > Code HTML r serv IE <![ endif ] -->

L'ensemble forme un commentaire HTML : il commence par <!-- et se termine par -->. Les navigateurs ignoreront donc le code qui se trouve l'intrieur. . . sauf IE, qui y voit une condition [if IE] signiant  Si c'est Internet Explorer . L'intrt est que cette technique permet de cibler direntes versions d'Internet Explorer. Par exemple :
1

<! - - [ if IE8 ] >

. . . ciblera uniquement Internet Explorer 8. On peut utiliser les symboles suivants pour viser un ensemble de versions :  lt : infrieur ;  lte : infrieur ou gal ;  gt : suprieur ;  gte : suprieur ou gal. Ainsi :
1

<! - - [ if lte IE8 ] >

. . . signie  Toutes les versions d'Internet Explorer infrieures ou gales IE8  (c'est-dire IE8, IE7, IE6. . .). l'inverse, on peut cibler les navigateurs autres qu'Internet Explorer avec la syntaxe suivante :
1 2 3

<! - - [ if ! IE ] > <! --> Code HTML pour les navigateurs diff rents d ' IE <! - - <![ endif ] -->

La syntaxe a l'air un peu complexe, mais l'astuce est bien conue. Si vous regardez bien, il y a deux balises de commentaires. Le code HTML se trouve en-dehors des balises de commentaires, il sera donc lu par tous les navigateurs. . . sauf IE, qui lit les commentaires lui demandant de ne pas lire le code HTML qui suit. 296

LES COMMENTAIRES CONDITIONNELS

Utilit des commentaires conditionnels

quoi servent les ommentires onditionnels c
On peut utiliser les commentaires conditionnels pour acher un message destination des vieilles versions d'Internet Explorer :  Attention, vous naviguez avec un navigateur trs ancien, mettez-vous jour. . . . Cependant, on s'en sert surtout pour charger des feuilles de style spciales pour IE :
1 2 3

<! - - [ if lte IE8 ] > < link rel =" stylesheet " href =" style_ie . css " / > <![ endif ] -->

La feuille style_ie.css sera lue ici uniquement par les versions d'IE infrieures ou gales IE8. l'intrieur, on peut  adapter  le code CSS pour faire en sorte que le site s'ache mieux sur ces navigateurs. vous de modier la dimension des lments si ncessaire, d'utiliser d'autres mthodes de positionnement plus adaptes, etc. Cependant, vu qu'il y a plusieurs versions d'Internet Explorer en circulation (IE6, IE7, IE8, IE9. . .), une feuille de style ne sut pas. Parfois, on voudra eectuer une modication uniquement pour IE6 et IE7, parfois uniquement pour IE6, parfois pour IE8 et IE9. . . moins de crer une feuille de style par version, on ne s'en sort pas. Mais cela fait alors beaucoup de chiers .css grer. La solution, rgulirement employe par les webmasters expriments aujourd'hui, consiste donner un nom de classe la balise <body> qui englobe le corps de la page. Ce nom de classe indiquera dans le chier .css le nom de la version d'IE correspondant au navigateur. Dans ce cas, un seul chier CSS sut. Par exemple, si on crit :
1

< body class = " ie8 " >

. . . cela nous donnera dans le chier CSS l'information que le navigateur est IE8. On peut ensuite, dans ce chier CSS, crire :
1 2 3 4

. ie8 nav { /* Modification du style de la balise nav pour IE8 */ }

Avec les commentaires conditionnels, on peut crire plusieurs versions de la balise <body> en fonction du navigateur :
1 2 3 4 5

<! - - [ if <! - - [ if <! - - [ if <! - - [ if <! - - [ if

IE6 ] > < body class =" ie6 old_ie " > <![ endif ] --> IE7 ] > < body class =" ie7 old_ie " > <![ endif ] --> IE8 ] > < body class =" ie8 " > <![ endif ] --> IE9 ] > < body class =" ie9 " > <![ endif ] --> ! IE ] > <! --> < body > <! - - <![ endif ] -->

297

CHAPITRE 23.

GRER LA COMPATIBILIT ENTRE LES NAVIGATEURS

yn peut donner plusieurs noms de lsses une liseD en les sprnt pr un espe omme on l9 fit iiF einsiD si le nvigteur est siTD l lise <body> ur deux lsses X ie6 et old_ie F v lsse old_ie permet don de iler simultnment siT et siUF
1

Les hacks CSS

 Hack  signie  bidouille  en anglais. Il s'agit d'astuces qui permettent de faire en sorte que les proprits CSS soient lues par certaines versions d'Internet Explorer uniquement. Le principe est le mme que les commentaires conditionnels, mais c'est moins  propre  : les hacks se basent sur des erreurs de ces navigateurs, qui lisent des proprits CSS alors qu'ils ne devraient pas.

v9usge des hks est glolement donseill r on se se sur des ugs des nvigteursF ien ne grntit qu9ils fontionneront l9venirF
Voici l'un des hacks les plus clbres :
1 2 3 4 5

balise { margin : 15px ; /* Pour les autres navigateurs */ ma \ rgin : 20px ; /* Pour IE6 et IE7 */ }

Un bug dans IE6 et IE7 leur fait lire la seconde proprit. Normalement, la prsence de l'antislash (\) au milieu du nom de la proprit rend celle-ci invalide, mais ces navigateurs ignorent l'antislash et lisent la proprit comme si de rien n'tait. D'autres hacks existent, citons par exemple :
1 2 3 4 5 6

balise { margin : 15px ; /* Pour les autres navigateurs */ * margin : 20px ; /* Pour IE6 et IE7 */ _margin : 20px ; /* Pour IE6 */ }

La prsence d'une toile au dbut du nom de la proprit fait que tous les navigateurs, sauf IE6 et IE7, ignorent la ligne. De mme, la prsence d'un underscore (_) fait que la ligne est ignore par tous les navigateurs, sauf IE6.
1.

old IE signie  vieil IE  en anglais.

298

LES OUTILS DE DBOGAGE

Les outils de dbogage

Parfois, votre page ne s'ache pas comme vous le souhaitez, mme sur un navigateur rcent. Dans ce cas, il faut partir la recherche de l'erreur que l'on a faite. Plusieurs techniques sont votre disposition, je vais vous prsenter celles que j'utilise le plus souvent.

La couleur de fond pour marquer les lments

La technique la plus simple pour faire du dbogage consiste tout simplement. . . donner une couleur de fond un lment qui ne se comporte pas comme vous le souhaitez (par exemple, un menu qui se positionne mal). C'est donc aussi simple que cela :
1 2 3 4

nav { }

background - color : blue ;

Cette couleur de fond, trs voyante, est temporaire : vous vous en servez uniquement pour voir la  place  qu'occupe votre lment. Souvent, cela vous permet de comprendre ce qui se passe dans votre page. Cependant, si cette technique ne sut pas, il va falloir sortir l'artillerie lourde : un outil de dbogage.

Les outils de dbogage

Ce sont des outils trs puissants (et assez impressionnants) qui permettent de manipuler la page web directement dans le navigateur. La plupart des navigateurs actuels sont quips de ces outils, spcialement conus pour les dveloppeurs web que nous sommes :  Google Chrome : allez dans le menu Cl molette > Outils > Outils de dbogage (gure 23.1). Vous pouvez aussi faire un clic droit sur un lment de votre page, puis cliquer sur Inspecter l'lment.  Mozilla Firefox : installez l'extension Firebug. Un bouton apparatra en bas ou en haut droite de la fentre (cela dpend de la version du navigateur) pour ouvrir le volet de dbogage.  Internet Explorer : allez dans le menu Roue dente > Outils de dveloppement (disponible partir d'IE8).  Opera : vous pouvez lancer son trs puissant outil de dbogage Dragony avec . Ctrl + Shift + I Vous pouvez aussi faire un clic droit sur un lment de votre page, puis cliquer sur Inspecter l'lment.


Installer Firebug Code web : 113479 

299

CHAPITRE 23.

GRER LA COMPATIBILIT ENTRE LES NAVIGATEURS

ur qoogle ghromeD wozill pirefox et snternet ixplorerD vous pouvez ouvrir le volet de dogge en ppuynt sur l touhe F12 de votre lvierF ur qoogle ghrome et pirefoxD vous pouvez glement ppuyer sur les touhes Ctrl C Shift C I pour ouvrir le volet de doggeF

Figure 23.1  L'outil de dbogage de Google Chrome (en bas du navigateur)

Il y a plusieurs faons de se servir de ces outils. Vous pouvez tudier la hirarchie de vos balises en achant le code source (en bas gauche sur la gure 23.1) et modier en temps rel le code de votre page : faites un double-clic sur un texte ou une balise modier, et vous verrez le rsultat changer dans la fentre du navigateur au fur et mesure ! Attention toutefois : vos changements ne sont pas enregistrs, vous faites l un simple test pour comprendre le comportement du navigateur. En bas droite, vous avez la liste des proprits CSS qui s'appliquent l'lment actuellement slectionn dans le code source. Vous pouvez lui ajouter des proprits, en retirer, les modier, etc. Tous les changements sont appliqus immdiatement. Notez que les proprits CSS qui sont crases par d'autres proprits sont barres ou grises : cela vous permet de comprendre comment votre feuille de style se comporte. Enn, pour cibler directement un lment de votre page, vous pouvez faire un clic droit sur l'lment analyser, puis cliquer sur Inspecter l'lment. La barre de dbogage propose aussi un bouton pour cibler un lment (une loupe sous Google Chrome, un curseur sous IE, etc.). 300

LES OUTILS DE DBOGAGE

ges outils proposent de nomreuses utres fontionnlits plus vnes que je ne dtilleri ps ii mis que je vous lisse le loisir de douvrir X nlyse du temps de hrgement de l pgeD dogge tvriptF F F hez ependnt queD l pluprt du tempsD on s9en sert surtout pour fire du dogge du ode rwv et gF

301

CHAPITRE 23.

GRER LA COMPATIBILIT ENTRE LES NAVIGATEURS

302

Index

A HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 ancre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 hexadcimale . . . . . . . . . . . . . . . . . . . . 102 apparence dynamique . . . . . . . . . . . . . . . . 125 RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 aside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66 attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 class . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 commentaire. . . . . . . . . . . . . . . . . . . . . .78 B hritage . . . . . . . . . . . . . . . . . . . . . . . . . 107 id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 background . . . . . . . . . . . . . . . . . . . . . . . . . . 112 majuscule . . . . . . . . . . . . . . . . . . . . . . . 187 background-attachment . . . . . . . . . . . . .110 background-color . . . . . . . . . . . . . . . . . . .106 D background-image . . . . . . . . . . . . . . . . . . .109 background-position . . . . . . . . . . . . . . . 111 display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 background-repeat . . . . . . . . . . . . . . . . . 111 div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81, 147 balise block . . . . . . . . . . . . . . . . . . . . . . . . . 146 doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 balise en paire . . . . . . . . . . . . . . . . . . . . . . . . 21 E balise inline . . . . . . . . . . . . . . . . . . . . . . . . 146 diteur de chier . . . . . . . . . . . . . . . . . . . . . . . 9 balise orpheline . . . . . . . . . . . . . . . . . . . . . . . 22 em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 en-tte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 border-radius . . . . . . . . . . . . . . . . . . . . . . 119 encodage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 bordure arrondie . . . . . . . . . . . . . . . . . . . . . . . . . 119 F position . . . . . . . . . . . . . . . . . . . . . . . . . 118 float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 ottant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . 122 font-family . . . . . . . . . . . . . . . . . . . . . . . . . . 90 font-style . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 C font-weight . . . . . . . . . . . . . . . . . . . . . . . . . . 95 class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . .222 colspan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 commentaire H CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
303

INDEX

bote . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 hbergement . . . . . . . . . . . . . . . . . . . . . . . . . 271 texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 hritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 HTML class . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 P id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 paragraphe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 I id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 pied de page . . . . . . . . . . . . . . . . . . . . . . . . . 134 de fond . . . . . . . . . . . . . . . . . . . . . . . . . . 109 positionnement absolute . . . . . . . . . . . . . . . . . . . . . . . .171 indentation . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 fixed . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 infobulle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 relative . . . . . . . . . . . . . . . . . . . . . . . .174 inline-block . . . . . . . . . . . . . . . . . . . . . . . 167 Internet Explorer . . . . . . . . . . . . . . . . . . . . 198 pseudo-format :active . . . . . . . . . . . . . . . . . . . . . . . . . 127 J :focus . . . . . . . . . . . . . . . . . . . . . . . . . . 128 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 :hover . . . . . . . . . . . . . . . . . . . . . . . . . . 126 :visited . . . . . . . . . . . . . . . . . . . . . . . .128 lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 ancre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 relatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 list-style-image . . . . . . . . . . . . . . . . . . .197 list-style-type . . . . . . . . . . . . . . . . . . . . 190 liste non ordone . . . . . . . . . . . . . . . . . . . . . . 40 ordone. . . . . . . . . . . . . . . . . . . . . . . . . . .41

RGBa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115 rowspan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 saut de ligne . . . . . . . . . . . . . . . . . . . . . . . . . . 33 section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 slecteur avanc . . . . . . . . . . . . . . . . . . . . . . . 81 span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81, 147 strong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 structure de page . . . . . . . . . . . . . . . . . . . . . 23

R S

T mailto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50 margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 media query . . . . . . . . . . . . . . . . . . . . . . . . . 252 text-align . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 text-shadow . . . . . . . . . . . . . . . . . . . . . . . . .123 mise en valeur

faible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 texte alignement . . . . . . . . . . . . . . . . . . . . . . . 96 forte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 couleur . . . . . . . . . . . . . . . . . . . . . . . . . . 102 dcoration . . . . . . . . . . . . . . . . . . . . . . . . 95 N gras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 nav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 italique . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 ombre . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 compatibilit . . . . . . . . . . . . . . . . . . . . 295 police . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Notepad++ . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 taille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 O title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 ombre. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 titre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

304

INDEX

de la page . . . . . . . . . . . . . . . . . . . . . . . . 26 transparence . . . . . . . . . . . . . . . . . . . . . . . . . 114 opacity . . . . . . . . . . . . . . . . . . . . . . . . . 114 RGBa . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

vertical-align . . . . . . . . . . . . . . . . . . . . . 168

vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 word-wrap . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

W Z

305

Dpt lgal : dcembre 2011 ISBN : 978-2-9535278-8-9 Code diteur : 978-2-9535278 Imprim en France Achev d'imprimer le 20 dcembre 2011 sur les presses de Corlet Imprimeur (Cond-sur-Noireau) Numro imprimeur : 142357

Mentions lgales : Crdit photo Mathieu Nebra 4

de couverture : Xavier Granet - 2009

Conception couverture : Fan Jiyong Illustrations chapitres : Fan Jiyong Ralisation design du TP : Fan Jiyong