Html5-Css3-Jquery de Michel Martin PDF

HTML5, CSS3
& jQuery
Michel Martin
Table des matires III
Table des matires
Introduction ......................................................................................................VII
Les sources de louvrage .................................................................................................................VII
Site compagnon ..................................................................................................................................VII
Rubriques spciales de ce livre .................................................................................................... VIII
Joindre lauteur ................................................................................................................................. VIII
1. Avant de commencer......................................................................................1
Mais, au fait, quest-ce quun site Web? ......................................................................................... 1
Quapporte chaque langage? ......................................................................................................... 2
Vocabulaire et conventions dcriture ............................................................................................ 3
Compatibilit HTML5/CSS3 ............................................................................................................... 4
Les outils de dveloppement ............................................................................................................ 6
Votre premire page HTML avec Notepad++ ............................................................................... 7
Premier contact avec le langage CSS3 ........................................................................................ 12
Pourquoi prfrer CSS HTML pour la mise en forme? ......................................................... 15
Premier contact avec jQuery ........................................................................................................... 16
HTML, CSS et jQuery: deux approches ....................................................................................... 18
2. Premiers pas en HTML, CSS et jQuery ..................................................... 21
Les bases du HTML ........................................................................................................................... 21
Les bases du CSS .............................................................................................................................. 29
Les bases de jQuery ..........................................................................................................................37
Exercice 1 ............................................................................................................................................. 42
3. lments textuels ........................................................................................43
Les balises permettant dafcher du texte ..................................................................................43
Listes HTML .........................................................................................................................................44
Personnaliser une liste ..................................................................................................................... 45
Choisir la police du texte ..................................................................................................................47
Taille des caractres ......................................................................................................................... 48
Attributs des caractres ................................................................................................................... 49
Utiliser des polices de caractres non conventionnelles ....................................................... 50
Mise en forme des liens hypertexte ............................................................................................. 54
Exercice 2 .............................................................................................................................................57
4. Couleur des lments .................................................................................59
Couleur du texte ................................................................................................................................ 59
Couleur darrire-plan dun lment ............................................................................................ 59
Dnir une couleur par son code RGB ........................................................................................ 60
IV Table des matires
Transparence et opacit des lments ........................................................................................ 61
Gradient linaire ................................................................................................................................ 62
Gradient radial .....................................................................................................................................67
Exercice 3 .............................................................................................................................................72
5. Images ..........................................................................................................75
Insrer une image dans une page .................................................................................................75
Une image en arrire-plan dune page ........................................................................................76
Une image en arrire-plan dun conteneur ................................................................................. 77
Utiliser une image comme lien hypermdia ................................................................................78
Lgender une image .........................................................................................................................78
Centrer une image dans un conteneur ........................................................................................79
Modier les caractristiques dune image lorsquelle est survole ...................................... 81
Empiler des images .......................................................................................................................... 82
Prchargement dimages ................................................................................................................ 83
Images ractives ................................................................................................................................ 84
Album photos ..................................................................................................................................... 85
Exercice 4 ............................................................................................................................................ 88
6. Ombrages et arrondis .................................................................................89
Ombrer des objets non textuels .................................................................................................... 89
Ombrer des objets textuels ............................................................................................................ 92
Arrondir les coins dun lment de type block .......................................................................... 93
Exercice 5 .............................................................................................................................................97
7. Menus ............................................................................................................99
Menu vertical ottant en HTML5 ................................................................................................... 99
Menu horizontal en HTML5 ...........................................................................................................100
Amlioration du menu avec quelques proprits CSS ..........................................................102
Menu droulant ................................................................................................................................. 103
Exercice 6 ............................................................................................................................................. 111
8. Formulaires et stockage local de donnes .............................................113
Dnir un formulaire ......................................................................................................................... 113
Envoi dun formulaire par mail ....................................................................................................... 114
Les difrents lments utilisables dans un formulaire ........................................................... 116
Quelques exemples de formulaires ............................................................................................. 118
Focus ................................................................................................................................................... 124
Validation de donnes .................................................................................................................... 127
Modier le style dun champ en fonction de sa validit ......................................................... 132
Stockage local de donnes ........................................................................................................... 134
Exercice 7 ........................................................................................................................................... 137
Exercice 8 ........................................................................................................................................... 138
Table des matires V
9. Tableaux ......................................................................................................141
Dnir un tableau en HTML ............................................................................................................ 141
Dnir un tableau en CSS .............................................................................................................. 142
Bordures autour des cellules ........................................................................................................ 144
Fusionner et sparer des bordures ............................................................................................ 145
Espacer les cellules ......................................................................................................................... 146
Fusionner des cellules .................................................................................................................... 147
Ajouter une lgende au tableau ................................................................................................... 149
Arrire-plan des cellules .................................................................................................................150
Alignement dans les cellules......................................................................................................... 152
Difrencier lignes paires et lignes impaires ............................................................................. 153
Mise en forme des cellules vides ................................................................................................. 154
Arrondis et ombrages .....................................................................................................................155
Exercice 9 ........................................................................................................................................... 157
10. Mise en page ............................................................................................ 159
inline, block ou les deux?.............................................................................................................159
Nouvelle organisation des documents .......................................................................................160
Positionner les lments afchs sur une page ...................................................................... 164
Faire otter un lment .................................................................................................................. 170
Mise en page sur plusieurs colonnes ......................................................................................... 172
Marges ................................................................................................................................................ 175
Responsive Web Design (Media Queries CSS) ........................................................................ 177
Optimiser les pages dun site Web .............................................................................................. 179
Exercice 10 .......................................................................................................................................... 181
Exercice 11............................................................................................................................................ 181
Exercice 12 .......................................................................................................................................... 181
11. Gestion vnementielle ........................................................................... 183
Gestion vnementielle en HTML ............................................................................................... 183
Gestion vnementielle en CSS .................................................................................................. 184
Gestion vnementielle en jQuery .............................................................................................. 185
vnements lis la fentre ......................................................................................................... 185
vnements lis au clavier ............................................................................................................ 187
vnements lis la souris ........................................................................................................... 188
vnements lis aux formulaires .................................................................................................190
vnements lis aux mdias .........................................................................................................192
vnements lis lorientation .....................................................................................................196
Exercice 13 ..........................................................................................................................................199
VI Table des matires
12. Multimdia ................................................................................................ 201
Insrer un lment audio ...............................................................................................................201
Piloter une balise <audio> en jQuery ......................................................................................203
Insrer un lment vido ..............................................................................................................205
Piloter une balise <video> en jQuery ...................................................................................... 207
Exercice 14 .........................................................................................................................................209
13. Transformations, transitions et animations ...........................................211
Transformations ................................................................................................................................. 211
Transitions ......................................................................................................................................... 223
Quelques animations classiques .................................................................................................228
Animations personnalises ........................................................................................................... 232
Difrer une animation ................................................................................................................... 233
Mettre en place un timer ............................................................................................................... 234
Exercice 15 ........................................................................................................................................ 236
14. Mise jour avec AJAX ............................................................................237
Charger un chier ............................................................................................................................ 237
$.get() ........................................................................................................................................... 239
$.post() ......................................................................................................................................... 242
$.ajax() ......................................................................................................................................... 244
Exercice 16 ........................................................................................................................................ 249
15. Mise en ligne dun site ............................................................................ 251
Choisir un hbergeur ...................................................................................................................... 251
Crer un nom de domaine ............................................................................................................252
Transfrer les chiers en FTP ....................................................................................................... 253
Index ............................................................................................................... 257
Introduction VII
Introduction
Vous navez jamais cr de pages Web, mais vous rvez de le faire? Vous utilisez un CMS
et vous aimeriez amliorer les pages qui y ont t cres? Ce livre est fait pour vous!
Au l des pages, vous dcouvrirez:
les bases des langages HTML, CSS et jQuery;
comment afcher des lments textuels en HTML;
les techniques permettant de modier la couleur des lments afchs;
comment afcher des images, les mettre en page et raliser un album photos;
les techniques dombrage et darrondi du CSS3;
comment mettre en place des menus en HTML5 et CSS3;
la dnition de formulaires (simples et volus) en HTML5;
le stockage local de donnes en HTML5;
la dnition et la mise en forme de tableaux en HTML5 et CSS3;
les techniques de mise en page CSS;
la gestion vnementielle en HTML, CSS et jQuery;
lutilisation dlments multimdia dans des pages HTML5;
les transformations et animations en CSS3 et jQuery;
la mise jour dune portion de page HTML avec Ajax;
la mise en ligne dun site Web.
Les sources de louvrage
Les ditions Pearson mettent disposition sur le site www.moneformation.fr lensemble
des codes passs en revue dans cet ouvrage. Ces codes sont rassembls dans une
archive au format ZIP. Pour accder aux chiers correspondants, il vous suft de dziper
cette archive en double-cliquant dessus dans lExplorateur de chiers et en cliquant sur
Extraire tout dans la barre doutils.
Site compagnon
Cet ouvrage est accompagn dun site Web sur lequel se trouvent tous les corrigs
des exercices en vido. Pour accder ces derniers, rendez-vous ladresse www.
moneformation.fr, inscrivez-vous pour activer votre compte et accder aux corrigs des
exercices. Vous aurez besoin de consulter le prsent ouvrage pour crer votre compte
et rpondre la question de scurit. Chaque fois que vous voudrez raliser un exercice
de louvrage, vous pourrez vous rfrer la page correspondante de lexercice sur le
site Web.
VIII Introduction
Rubriques spciales de ce livre
Astuce
Elles fournissent des remarques
particulires ou des raccourcis
inhabituels du langage.
Info
Elles donnent des informations
complmentaires sur le sujet tudi,
sans tre indispensables pour la tche
en cours.
Attention
Elles attirent votre attention sur des
points particulirement importants ou
qui demandent une relecture pour tre
correctement assimils.
Joindre lauteur
Une question? Une remarque? Une suggestion? Nhsitez pas me joindre en vous
rendant sur le site www.mediaforma.com et en slectionnant longlet Contact.
1
Avant de commencer
Cet ouvrage est consacr aux langages de programmation HTML5, CSS3 et jQuery.
Vous vous demandez certainement sil est absolument ncessaire dapprendre ces trois
langages, ou si vous pouvez vous limiter au HTML. Cette question est tout fait licite, car
les pages Web sont crites en HTML. Ce langage devrait donc sufre!
Sil est vrai que, contrairement au HTML, les langages CSS et jQuery ne sont pas
obligatoires, vous verrez quils apportent un confort non ngligeable et que, tout bien
considr, ils sont quasiment incontournables pour quiconque dsire crer un site Web
bien structur, facilement maintenable et agrable utiliser
Mais, au fait, quest-ce quun site Web?
Un site Web est constitu dune ou de plusieurs pages Web.
Attention
Je dis bien "site Web" et non "site Internet"! Beaucoup de personnes considrent
quInternet se limite au Web et parlent tout naturellement de sites Internet. Mais alors,
est-ce que lchange de messages e-mail, les tlchargements FTP et les dialogues en
direct ne font pas partie dInternet? Bien sr que si! Comme vous lisez cet ouvrage, vous
allez acqurir une certaine exprience dans le dveloppement de sites Web et, en tant
qu'"expert", il est important que vous utilisiez le bon vocabulaire.
Lorsquun site est constitu dune seule page, il se contente dafcher un nombre rduit
dinformations, ou il utilise une technique qui lui permet dafcher plusieurs pages dans
une seule. Ceci est possible en mettant en place un systme donglets qui contiennent
chacun une partie des informations afcher.
Lorsquun site est constitu de plusieurs pages, ces dernires sont relies entre elles par
des liens hypertexte ou hypermdia. Dans la Figure1.1, par exemple, cet extrait de page
contient plusieurs liens hypertexte et hypermdia.
2 Chapitre 1
Figure 1.1
Cette gure
reprsente une
partie de la page
principale du site
www.microsoft.com.
Vous laurez compris, les liens hypertexte sont des lments textuels sur lesquels on peut
cliquer pour accder dautres pages. Quant aux liens hypermdia, ils sont galement
cliquables, mais reprsents par des lments non textuels (des images en gnral).
La page principale dun site est appele "page daccueil" ou "homepage". Cest elle qui
donne accs aux autres pages du site, en utilisant une structure arborescente dans
laquelle les pages de tous les niveaux peuvent faire rfrence aux pages des autres
niveaux.
Figure 1.2
La structure
arborescente
dun site
compos de
sixpages.
Quapporte chaque langage?
Les langages HTML, CSS et jQuery sont utiliss dans des domaines trs difrents:
Le HTML permet de dnir le contenu des pages. Entendez par l le texte, les images
et les autres lments qui doivent tre afchs dans le navigateur. Dans cet ouvrage,
nous utiliserons la version5 du langage. Il sagit en efet dun standard unanimement
reconnu et universellement utilis dans tous les navigateurs rcents, sur les ordinateurs,
les tablettes et les tlphones.
Le CSS permet de mettre en forme les lments afchs (dimensions, bordures,
couleurs, etc.) et de les agencer dans les pages (position, marges, ancrage, etc.). Dans
cet ouvrage, nous utiliserons la version3 du langage. Certaines instructions CSS3 ne
sont pas encore nalises, mais les choses vont en samliorant au l du temps.
Avant de commencer 3
Le jQuery est essentiellement utilis pour apporter du mouvement et de linteractivit
aux pages Web. Nous lutiliserons pour animer des zones de lcran et pour ragir aux
actions de lutilisateur.
Comme vous commencez le pressentir, ces trois langages forment un tout et la ralisation
de pages Web en omettant lun dentre eux nest pas une bonne ide. Rassurez-vous,
votre apprentissage se fera de faon progressive, pratique et indolore. Trs vite, vous
serez capable de crer des sites volus et compatibles avec les standards actuels.
Info
jQuery nest pas un langage, mais une bibliothque, qui vient complter et simplier
lutilisation du langage JavaScript.
Vocabulaire et conventions dcriture
Avant de commencer votre apprentissage, vous devez connatre quelques termes
techniques:
Le langage HTML est compos de balises (ou tags) dlimites par les signes "<" et ">".
Voici quelques balises utilisables en HTML:
<html> et </html>
<u> et </u>
<img>
Les balises sont gnralement ouvertes et fermes. Le signe "/", prcis aprs le "<" de
dbut de balise, indique quil sagit dune balise fermante. Ainsi, par exemple, </html>
et </u> sont des balises fermantes, alors que <html> et <u> sont des balises ouvrantes.
Certaines balises peuvent tre ouvrantes et fermantes. On dit alors quelles sont
"autofermantes". Dans ce cas, le signe "/" est plac la n de la balise, juste avant le ">".
Par exemple:
<br />
<hr />
<meta />
Lorsque les signes "<" et ">" sont omis, on parle non plus de balises mais dlments.
Nous utiliserons alternativement ces deux termes dans cet ouvrage.
Certaines balises comportent un ou plusieurs paramtres, nomms "attributs". Par
exemple, la balise <img> suivante utilise lattribut src pour indiquer le chemin et le nom
de limage afcher:
<img src="images/banniere.jpg" />
Dune manire plus gnrale, toutes les balises HTML sont construites sur le mme
modle:
<lment attr1="val1" attr2="val2" attr3="val3" >
O lment est le nom dun lment HTML (a, img, link ou body par exemple), les
attr sont des attributs HTML et les val sont les valeurs afectes ces attributs. Les
4 Chapitre 1
couples attribut-valeur permettent de paramtrer llment auquel ils sappliquent. Par
exemple, vous pouvez dnir ladresse de la page atteindre dans un lien hypertexte
<a>, limage afcher dans une balise <img>, ou encore le nom dun formulaire dans
une balise <form>.
La premire balise dun document HTML5 est appele "DTD" (pour dclaration de type
de document). Elle indique au navigateur le type de langage utilis. En HTML5, la DTD
est des plus simples:
<!DOCTYPE html>
Par convention, seule la balise DOCTYPE est crite en majuscules dans un document
HTML5. Toutes les autres balises seront donc systmatiquement crites en caractres
minuscules.
Les instructions CSS sont gnralement regroupes dans len-tte du document HTML
ou dans un chier spcique appel "feuille de styles". Elles consistent en un ensemble
de couples "proprit: valeur;". Voici quelques instructions CSS:
background: yellow;
foat: left;
height: 20px;
jQuery est essentiellement utilis pour interagir avec le DOM (Document Object Model).
Cet acronyme fait rfrence une structure de donnes qui reprsente un document
HTML comme une arborescence. Avec jQuery, vous pouvez interroger le DOM pour
connatre les caractristiques des balises (attributs et valeurs HTML, mais aussi proprits
et valeurs CSS) et les modier.
La fonction jQuery(), souvent remplace par son alias $() pour raccourcir lcriture,
est le point dentre de la bibliothque jQuery. Elle permet daccder toutes les
mthodes de la bibliothque. Lorsquune mthode jQuery est invoque, elle retourne un
objet jQuery, qui consiste en zro, un ou plusieurs lments piochs dans le DOM. Voici
un exemple dinstruction jQuery:
$('#afiche').html('La condition est respecte');
Ici, le texte "La condition est respecte" est afect llment didentiant afiche du
DOM.
Compatibilit HTML5/CSS3
Alors que nous crivons ces lignes, quelques nouveaux lments propres au langage
HTML5 ne sont pas encore entirement implments sur les navigateurs. Pour connatre le
taux de compatibilit de votre navigateur, rendez-vous sur la page http://html5test.com/.
Un compte rendu clair et succinct y sera prsent et une note lui sera attribue. Comme le
montre la Figure1.3, Google Chrome est aujourdhui le navigateur le plus compatible avec
le standard HTML5.
Figure1.3
Comparaison des
navigateurs Google
Chrome 30, Firefox 25
et Internet Explorer 11
sous Windows 8.1.
Les lments inconnus du navigateur sont gnralement ignors. Mais il est possible
de leur afecter un style en utilisant une feuille de styles CSS. Notez cependant quun
traitement particulier doit tre rserv Internet Explorer8 et infrieur. En efet, celui-ci
doit intgrer les lments inconnus son DOM via la mthode createElement. Sans
quoi, il ne sera pas en mesure de leur afecter un style. Dautre part, il est ncessaire
dattribuer un rendu block ces lments en initialisant leur proprit CSS display.
Nous y reviendrons en dtail par la suite.
Concernant le langage CSS, les principaux navigateurs utilisent un prxe pour (pr)
implmenter les nouvelles proprits CSS3:
-moz pour les navigateurs Mozilla (Firefox);
-webkit pour les navigateurs Webkit (Safari, OmniWeb, Midori,etc.);
-khtml pour les navigateurs Konqueror;
-o pour les navigateurs Opera;
-ms pour le navigateur Internet Explorer9 et suprieur.
Tant que la spcication du langage na pas atteint au moins le statut de recommandation
candidate, vous devrez utiliser plusieurs prxes dans les proprits CSS3 pour assurer
la plus grande compatibilit possible. terme, ces prxes ne devraient plus avoir cours
et une seule instruction devrait tre interprte lidentique dans tous les navigateurs.
Wait and see
Si vous utilisez encore des fonctions CSS spciques dInternet Explorer (DropShadow(),
flter() ou gradient(), par exemple), mieux vaut les inclure dans une feuille de styles
particulire, appele dans un commentaire conditionnel, dans len-tte du document:
<head>

</head>
6 Chapitre 1
Si, par la suite, vous dcidez de remplacer ces fonctions par du code CSS3, il vous sufra
de supprimer llment link correspondant.
Les outils de dveloppement
Pour pouvoir dvelopper en HTML5/CSS3/jQuery, vous devez tlcharger puis installer
quelques briques logicielles: lditeur Notepad++, les navigateurs Firefox et Chrome et
la bibliothque jQuery.
Notepad++
Notepad++ est un diteur de code multilangage coloration syntaxique. Distribu sous
licence GPL, vous pouvez librement linstaller et lutiliser sur votre ordinateur. Rendez-
vous sur la page http://notepad-plus-plus.org/fr/, cliquez sur Tlchargement dans la
partie gauche de la page, puis sur DOWNLOAD pour tlcharger la dernire version en
date de Notepad++. Le chier tlcharg est une archive auto-extractible. Il suft donc de
double-cliquer dessus pour linstaller.
Figure 1.4
Tlchargement de Notepad++.
Firefox
Firefox est un excellent navigateur Web. Il doit faire partie de la panoplie du dveloppeur
Web, an de tester la compatibilit du code.
Pour tlcharger Firefox, rendez-vous sur la page www.mozilla.org/fr/refox/new/ et
cliquez sur le bouton Firefox, Tlchargement gratuit. Un chier excutable dinstallation
sera alors tlcharg. Cliquez sur Excuter pour procder linstallation de Firefox sur
votre ordinateur.
Google Chrome
Chrome est actuellement le navigateur le plus compatible avec les langages HTML5 et
CSS3. Vous vous devez donc de linstaller sur votre ordinateur, ne serait-ce que pour
avoir un avant-got des possibilits ofertes par les instructions les plus volues de
ces langages. Sans aucun doute possible, les autres navigateurs seront en mesure
dinterprter ces instructions dans un avenir proche.
Pour tlcharger Google Chrome, rendez-vous sur la page www.google.fr/intl/fr/
chrome/browser/ et cliquez sur Tlcharger Google Chrome.
La bibliothque jQuery
jQuery est une bibliothque JavaScript. En dautres termes, il sagit dun chier dextension
.js. Pour dvelopper du code jQuery, il suft de faire rfrence la bibliothque jQuery
avec une instruction du type suivant:
<script src="chemin">
</script>
O chemin reprsente le chemin complet permettant daccder la bibliothque jQuery.
Le plus simple consiste faire rfrence un CDN (Content Delivery Network). De la
sorte, vous obtiendrez automatiquement la dernire version en date de jQuery. En outre,
tant donn que de nombreux sites Web utilisent jQuery, il y a de grandes chances pour
que cette bibliothque ait dj t utilise par votre navigateur et se trouve dans sa
mmoire tampon. Dans ce cas, il ne sera pas ncessaire de la charger nouveau: son
accs sera immdiat.
Deux versions de jQuery sont disponibles: une premire traditionnelle, visualisable dans
Notepad++, et une seconde minie, de faon rduire sa taille au maximum. Pour arriver
ce rsultat, les espaces, les tabulations et les commentaires ont t supprims de la
bibliothque traditionnelle. La bibliothque jQuery est donc incomprhensible pour nous,
pauvres humains, mais elle est strictement identique la version non minie dun point
de vue fonctionnel. Je vous conseille donc dutiliser la version minie an de rduire
le temps ncessaire son chargement, si elle ne se trouve pas dj dans le cache du
navigateur.
Vous utiliserez donc linstruction suivante:
<script src="http://code.jquery.com/jquery.min.js">
</script>
Votre premire page HTML avec
Notepad++
Dans cette section, vous allez dvelopper votre premire page en HTML5 et CSS3. Le
code mis en place servira de base tous les autres codes dvelopps dans cet ouvrages.
Nous le qualierons de "squelette standard".
8 Chapitre 1
Code minimal en HTML5
Voici le code minimal utiliser pour une page HTML5:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
La balise <!DOCTYPE> indique quil sagit dune page dveloppe en HTML5.
Les balises <html> et </html> dlimitent le document HTML.
Les balises <head> et </head> constituent len-tte du document. Entre ces balises,
vous dnirez difrents lments tels que:
le texte afch dans la barre de titre du navigateur;
le jeu de caractres utilis dans la page;
des informations de rfrencement lattention des moteurs de recherche, etc.
Les balises <body> et </body> dlimitent le document. Cest ici que vous insrerez le
contenu (texte, images, etc.) qui doit tre afch dans la page.
Tapez ce code dans Notepad++. Lancez la commande Enregistrer dans le menu Fichier
et sauvegardez le code sous le nom squelette.html, en slectionnant Hyper Text Markup
Language dans la liste droulante Type (voir Figure1.5).
Figure 1.5
Le code est sauvegard dans un
chier HTML.
Ds que le chier est sauvegard, les instructions changent de couleur. En efet,
Notepad++ sait maintenant que les instructions sont crites en HTML et il peut leur
appliquer une coloration syntaxique (voir Figure1.6).
Figure 1.6
Les instructions sont colores car
Notepad++ connat le langage
utilis.
Langue du document
La langue franaise utilise des caractres spciques tels que , , , , etc. Pour que ces
derniers soient afchs correctement dans tous les navigateurs du monde, vous devez
utiliser un jeu de caractres (ou charset).
Les charsets ( jeux de caractres) sont associs la notion de claviers nationaux. Pour
indiquer aux navigateurs dans quel jeu de caractres vous travaillez, vous pouvez insrer
une balise <meta charset=> dans len-tte de votre document.
Vous utiliserez le jeu de caractres:
ISO-8859-1 pour accder directement la majorit des caractres des langues
occidentales (franais, anglais, allemand, espagnol,etc.).
UTF-8 pour afcher sur une mme page des caractres issus de plusieurs langues
(franais et japonais, par exemple). Consultez la page www.columbia.edu/kermit/
utf8.html pour vous rendre compte des immenses possibilits du jeu de caractres
UTF-8.
Dans cet ouvrage, nous utiliserons systmatiquement le jeu de caractres UTF-8, bien
plus universel et indpendant des frontires.
Pour utiliser le jeu de caractres UTF-8, il ne suft pas dinsrer une balise <meta> dans
le code: vous devez galement vous assurer que Notepad++ utilise ce type dencodage.
Droulez le menu Encodage et slectionnez la commande Encoder en UTF-8 (sans BOM).
Info
Lencodage UTF-8 avec BOM (pour Byte Order Mark) ajoute une espace inscable de
largeur nulle en dbut de chier. tant donn que ce caractre na aucune utilit en
UTF-8, je vous conseille dutiliser un encodage UTF-8 sans BOM. Dautant plus quun
encodage avec BOM peut provoquer une erreur de type "headers already sent by"
lorsque vous efectuez une redirection de page Web.
Une fois le jeu de caractres spci, vous devez galement indiquer la langue utilise
dans le document. Cette information est en efet primordiale pour le rfrencement
(moteurs de recherche) et laccessibilit (lecteurs dcran) de la page.
10 Chapitre 1
La langue dun document HTML prsente deux types dinformations:
La langue "primaire", qui correspond au public vis. Elle peut tre spcie:
Dans le champ den-tte HTTP, au niveau du serveur. Par exemple, sur un serveur
APACHE, la ligne suivante peut tre insre dans le chier .htaccess du dossier
concern:
Content-Language :fr
Dans le document, par lintermdiaire dun lment meta:
<meta http-equiv="Content-Language" content="fr" />
La langue "de traitement", qui correspond au contenu de la page. Elle doit tre spcie
dans lattribut lang. Si cet attribut est dni dans la balise <html>, toutes les autres
balises hriteront de cette langue:
<HTML lang="fr" />
Rfrencement
La balise <meta> peut galement tre utilise comme aide au rfrencement dune
page. Vous pouvez prciser:
les mots-cls associs la page;
la description de la page;
le nom de lauteur de la page.
<meta name="keywords" content="mot-cl1, mot-cl2, mot-cl3, " />)
<meta name="description" content="Description de la page en quelques phrases." />
<meta name= "author" content="Nom de lauteur" />
Info
La balise <meta name="keywords"> ne fait plus partie de lalgorithme dindexation de
Google. Autant dire quelle est devenue quasiment obsolte!
Titre du document
Le titre du document est spci entre les balises <title> et </title>, dans len-tte
du document. Le texte entr entre ces deux balises est afch dans la barre de titre du
navigateur. Il joue galement un rle trs important dans le rfrencement de la page. Il
est donc important de choisir un titre appropri pour chaque page.
Squelette standard HTML5
Compte tenu des remarques prcdentes, le squelette standard devient donc le suivant:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="Description de la page en quelques
phrases." />
<meta name="author" content="Nom de lauteur" />
<title>Titre de la page</title>
</head>
<body>
</body>
</html>
Des commentaires dans le code
Il est trs important dinsrer des commentaires dans le code que vous dveloppez. Si
vous devez y apporter des modications, vous saurez tout de suite quelle partie du code
est concerne
En HTML, vous utiliserez une balise un peu particulire:

Valider le code HTML
Avant de tester un code HTML5 dans votre navigateur, je vous conseille de vous assurer
de sa conformit. Pour cela, rendez-vous la page http://html5.validator.nu.
Selon la valeur slectionne dans la liste droulante Validator Input, le chier HTML5
test peut se trouver sur un serveur Web (Address), sur un disque local (File Upload) ou
tre entr directement sur la page Web du validateur (Text Field). La Figure1.7 illustre un
exemple de validation de code depuis un serveur Web.
Figure1.7
Le code HTML5 est valide.
12 Chapitre 1
Info
Si vous prfrez utiliser le validateur du W3C, tapez ladresse suivante dans la barre
dadresse de votre navigateur: http://validator.w3.org/.
Premier contact avec le langage CSS3
Vous savez maintenant crire un squelette HTML5 standard. Il est temps daborder le
langage CSS, ou plus exactement la version 3 du langage CSS.
Comme nous lavons dit prcdemment, le langage CSS est utilis pour mettre en forme
les lments afchs (dimensions, bordures, couleurs, etc.) et les agencer dans les
pages (position, marges, ancrage, etc.). Pour cela, on utilise des couples "proprit:
valeur;" que lon afecte certains lments de la page. Vous voyez, il ny a rien de
bien compliqu l-dedans. Le tout est de connatre (ou de savoir retrouver, ce qui est bien
plus simple) les innombrables proprits CSS utilisables. Dans le chapitre suivant, vous
verrez quen parlant correctement votre moteur de recherche prfr, la tche est bien
plus simple quon ne pouvait le supposer.
O crire le code CSS?
Le code CSS peut tre crit:
dans les balises concernes;
dans len-tte du document (on parle de feuille de styles interne);
dans un chier spar (on parle de feuille de styles externe).
Ces trois techniques nont pas la mme "prcdence". Entendez par l que si vous
afectez trois valeurs difrentes une mme proprit CSS (une dans une balise HTML,
une dans len-tte du document et une dans une feuille de styles externe), deux des
valeurs afectes seront crases par la troisime. Mais alors, qui est le vainqueur dans
cette foire dempoigne, et quelle est lutilit dun tel fonctionnement?
Eh bien, le code CSS crit dans une balise crase celui qui est dni dans len-tte du
document, et ce dernier crase celui qui est dni dans une feuille de styles externe.
Imaginez le scnario suivant: vous dnissez toutes les proprits de mise en forme et
de mise en page de votre site dans une feuille de styles externe. Cette feuille de styles
est utilise par toutes les pages de votre site an de leur confrer un mme look and feel.
Imaginez maintenant quil soit possible de modier quelques proprits CSS dans chaque
page an de leur donner une mise en forme/en page qui reprend les lignes gnrales du
site, mais qui, par certains cts, leur confre un aspect unique. Pour arriver ce rsultat,
il vous sufra de rednir ces proprits dans len-tte de chaque page. Enn, supposons
que certaines balises ne doivent pas se conformer aux rgles dnies dans la feuille de
styles externe et/ou interne. Pour cela, vous dnirez leurs caractristiques directement
dans les balises.
Styles CSS dans les balises
Pour dnir des proprits CSS dans une balise, vous utiliserez lattribut style:
<balise style="proprit1: valeur1; propritN: valeurN;">
o:
balise est un nom de balise: <p> ou <h1>, par exemple.
proprit1 propritN sont des proprits de style de la balise.
valeur1 valeurN sont les valeurs afectes aux proprits.
titre dexemple, pour afecter la couleur jaune larrire-plan dun lment p, vous
utiliserez le code suivant:
<p style="background-color:yellow;">
Ce texte a un arrire-plan jaune
</p>
Pour utiliser la police Verdana corps18 dans un titreh2, vous utiliserez le code suivant:
<h2 style="font-family:Verdana; font-size: 18px;">
Ce titre est en Verdana corps 18
</h2>
Attention
moins que vous ne dsiriez craser les proprits dnies par dfaut dans une feuille
de styles externe, cette technique nest pas optimale, car elle est limite au seul lment
qui lutilise. Dans la mesure du possible, privilgiez lutilisation dune feuille de styles
externe (chier dextension .css) relie au document laide dun lment link. Cette
mme feuille de styles pourra tre utilise dans tous les documents apparents pour
uniformiser leur apparence.
Feuille de styles interne
Dans la section prcdente, vous avez vu quil tait possible de dnir des attributs
de mise en forme directement dans les balises HTML. Pour tendre la porte de ces
dnitions, vous pouvez les regrouper dans len-tte du document HTML, entre les
balises <style> et </style>:
<style type="text/css">
</style>
Voici la syntaxe permettant dafecter des proprits une balise:
lment {proprit1:valeur1; propritN:valeurN;}
o:
lment est un nom dlment: p ou h1, par exemple.
proprit1 correspond aux proprits de style de llment.
valeur1 correspond aux valeurs afectes aux proprits.
14 Chapitre 1
titre dexemple, pour dnir dans tout le document un arrire-plan jaune pour les
lments p et pour utiliser la police Verdana corps 18 dans tous les titres h2, vous
utiliserez le code suivant:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Une feuille de styles interne</title>
<style>
p {background-color:yellow;}
h2 {font-family:Verdana; font-size: 18px;}
</style>
</head>
<body>

</body>
</html>
Attention
Cette technique nest pas optimale, car elle est limite au seul document qui lutilise.
Dans la mesure du possible, privilgiez lutilisation dune feuille de styles externe (chier
dextension .css) relie au document laide dun lment link. Elle pourra tre utilise
dans toutes les pages dun mme site pour uniformiser leur apparence.
Feuille de styles externe
Pour tendre encore le champ daction des styles dnis dans len-tte dun document,
vous pouvez les stocker dans une feuille de styles externe (chier .css). Dans ce cas,
plusieurs pages HTML pourront utiliser cette feuille de styles an dobtenir une mme
mise en forme/mise en page.
Pour relier une feuille de styles externe un document HTML, vous utiliserez la balise
<link> (ici, la feuille de styles a pour nom moncss.css):
<link rel="stylesheet" href="moncss.css" />
Supposons que le chier moncss.css contienne les deux lments de style ci-aprs:
p {background-color:yellow;}
h2 {font-family:Verdana; font-size: 18px;>
Un document HTML y fera rfrence avec les instructions suivantes:
<!DOCTYPE html>
<html>
<head>
<title>Une feuille de styles externe</title>
</head>
<body>


</body>
</html>
Pourquoi prfrer CSS HTML pour la
mise en forme?
Dans les sections prcdentes, vous avez vu quil est possible de dnir les proprits
CSS dans les balise HTML ou dans une feuille de styles (interne ou externe). Dans
la mesure du possible, et en particulier si votre projet consiste dnir un site Web
compos de plusieurs page, je vous conseille de crer une feuille de styles externe et dy
faire rfrence dans chaque page avec une balise <link>. Ainsi, vos pages auront tout
naturellement la mme apparence.
De plus, si vous voulez changer certaines caractristiques du site (la couleur darrire-
plan, la hauteur de la bannire, la police des titres h2, ou nimporte quelle autre proprit),
vous naurez quun seul chier modier: la feuille de styles externe. Les modications
seront automatiquement reportes sur toutes les pages du site, quil sagisse de quelques
pages seulement ou de plusieurs centaines!
Un exemple de code CSS
Ce document HTML afche une liste puces comportant quatre points. La mise en forme
du document est assure par la feuille de styles externe moncss.css:
<!DOCTYPE html>
<html>
<head>
<title>Liste puces avec style externe</title>
</head>
<body>
Une liste puces :
<ul>
<li>Premier</li>
<li>Deuxime</li>
<li>Troisime</li>
<li>Quatrime</li>
</ul>
</body>
</html>
Voici le code de la feuille de styles moncss.css:
li
{
color: blue;
16 Chapitre 1
background: #FF4040;
margin: 14px 14px 14px 14px;
list-style: square;
}
Ici, nous dnissons les caractristiques de la liste puces:
Couleur des caractres: blue.
Arrire-plan: #FF4040.
Marges: 14px.
Style des puces: square.
Le rsultat de ce code est reprsent dans la Figure1.8.
Figure 1.8
Tous les lments de la liste ont t afects par la
feuille de styles externe.
Premier contact avec jQuery
Arriv ce point dans la lecture de cet ouvrage, vous savez:
dnir un squelette HTML5 standard;
modier les proprits CSS dune balise en utilisant lattribut style;
dnir une feuille de styles interne;
dnir une feuille de styles externe et lutiliser dans un document HTML.
Il est temps daborder le troisime langage: jQuery.
O crire le code jQuery?
Pour tre en mesure dutiliser du code jQuery, vous allez dans un premier temps faire
rfrence la bibliothque jQuery avec linstruction suivante:
<script src="http://code.jquery.com/jquery.min.js"></script>
Vous pourrez ensuite insrer des instructions jQuery dans le code HTML, entre les balises
<script> et </script>:
<script>
// Une ou plusieurs instructions jQuery
</script>
Comme nous lavons dit prcdemment, jQuery est utilis pour interroger et pour
modier le DOM, cest--dire les lments afchs dans une page Web. Imaginez que
vous commenciez interroger/modier des lments qui ne sont pas encore afchs.
Cela produirait une belle pagaille, et peut-tre mme un "plantage" du navigateur. La
premire prcaution prendre lorsque lon crit du code jQuery est donc de sassurer de
la disponibilit du DOM. Voici comment cela scrit en jQuery:
jQuery(document).ready(function(){
// Ici, le DOM est entirement disponible
});
Fort heureusement, cette syntaxe peut tre simplie:
$(function(){
// Ici, le DOM est entirement disponible
});
Un grand pas en avant a t franchi!
Vous savez maintenant faire rfrence la bibliothque jQuery et attendre la disponibilit
du DOM. Il ne reste plus qu crire quelques instructions entre les accolades pour
manipuler le DOM!
Que peut apporter jQuery un document HTML?
Vous vous demandez certainement pourquoi ajouter du code jQuery un document
HTML mis en forme/en page par des rgles de style CSS. Eh bien, jQuery apporte
plusieurs avantages:
Les lments afchs sur lcran peuvent ragir aux actions de lutilisateur. Par exemple,
il est possible defectuer des calculs et dafcher un rsultat lorsque lutilisateur clique
sur un bouton. Ou encore de modier les caractristiques dun lment suite certains
vnements (frappe au clavier, clic souris, heure systme, etc.).
Les lments afchs dans une page peuvent tre facilement anims (apparition,
disparition, translation) de faon automatique ou suite une action de lutilisateur.
En utilisant la technologie AJAX, jQuery peut mettre jour une partie de la page Web
courante. Par exemple, pour afcher le nom des personnes connectes un site Web,
ou encore pour mettre jour le cours dune action cote en Bourse.
Vous voyez, les avantages de jQuery ne manquent pas. Et tout ce que nous venons de
citer nest pas ralisable en HTML5/CSS3. Jespre vous avoir convaincu. Si ce nest pas
encore tout fait le cas, les pages suivantes devraient plaider en faveur de jQuery!
Un exemple de code jQuery
Dans ce code, un texte est afch en HTML, directement dans le corps du document, et
un autre est afch dans une balise <span> par une instruction jQuery:
<!DOCTYPE html>
<html>
18 Chapitre 1
<head>
<title>HTML et jQuery</title>
<script src=http://code.jquery.com/jquery.min.js></script>
</head>
<body>
Ce texte est afich en HTML<br>
<span id="texte2"></span>
<script>
$(function(){
$('#texte2').html('... et celui-ci par jQuery.');
});
</script>
</body>
</html>
Pour linstant, il nest pas utile que vous compreniez le fonctionnement de ce programme.
Remarquez juste quun <span> didentiant texte2 est dni dans le corps du
document:
Et que ce <span> est modi avec une instruction jQuery:
Tout ceci sera bien plus clair lorsque vous connatrez mieux jQuery. En attendant, excutez
ce code dans votre navigateur et constatez que jQuery est bien en mesure dafcher du
texte dans le <span> (voir Figure1.9).
Figure 1.9
HTML et jQuery cohabitent parfaitement.
HTML, CSS et jQuery: deux approches
Dans la section prcdente, vous avez vu que le code jQuery pouvait se trouver dans
le chier HTML de la page. De la mme faon, vous pouvez insrer le code CSS dans
la feuille de styles interne de la page pour former un code "tout en un": HTML + CSS +
jQuery. Inversement, vous pouvez crer plusieurs chiers:
Un pour le code HTML, limit au squelette standard et aux donnes qui doivent tre
afches dans la page.
Un pour le code CSS (feuille de styles externe) contenant les rgles de mise en forme
et de mise en page.
Un ou plusieurs pour le code jQuery. Ces lments sont alors appels en utilisant
autant de balises <script> que ncessaire.
titre dexemple, nous allons tendre le code prcdent pour y inclure quelques rgles
CSS et le dcouper en plusieurs chiers.
Le code, en version tout en un
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS et jQuery tout en un</title>
p {background-color: lime;}
span {background-color: red;}
</style>
</head>
<body>
<p>Ce texte est afich en HTML</p>
<script>
$(function(){
});
</script>
</body>
</html>
Le code, en version multifichier
Voici le code HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML seul</title>
<link rel="stylesheet" href="css-seul.css">
</head>
<body>
<p>Ce texte est afich en HTML</p>
<script src="jquery-seul.js"></script>
20 Chapitre 1
</body>
</html>
Voici le code CSS, stock dans le chier css-seul.css:
p {background-color: lime;}
span {background-color: red;}
Voici le code jQuery, stock dans le chier jquery-seul.js:
$(function(){
});
Autant que possible, vous privilgierez lapproche multichier. En particulier si le site que
vous dveloppez comporte de nombreuses pages. En rutilisant le code CSS et jQuery
dans chacune des pages qui le ncessitent, vous rduirez le temps de dveloppement
et faciliterez la maintenance du site.
2
Premiers pas en
HTML, CSS et jQuery
Arriv ce point dans la lecture de louvrage, vous tes en mesure de crer un squelette
HTML5 standard, de dnir des rgles de mise en forme CSS (directement dans les
balises, dans une feuille de styles interne ou externe) et dinvoquer la bibliothque jQuery.
Bien que ncessaires, ces connaissances ne sont pas encore sufsantes pour crer des
pages Web dignes de ce nom. Ce deuxime chapitre va enrichir votre connaissance
des trois langages et vous permettre de faire vos premiers pas en solo. Tournez vite les
pages.
Les bases du HTML
Vous vous en doutiez, votre apprentissage va commencer par le langage HTML. Ceci est
tout fait logique puisque cest ce langage qui permettra de construire les fondations de
vos pages Web.
Textes, sauts de ligne et paragraphes
Les lments textuels insrs dans le corps du document, cest--dire entre les balises
<body> et </body>, sont afchs tels quels dans le navigateur. Il est inutile dinsrer
plusieurs sauts de ligne et/ou plusieurs espaces dans le texte:
Les sauts de ligne (simples ou multiples) seront purement et simplement limins lors
de linterprtation du code dans le navigateur.
Les espaces multiples seront remplaces par une espace simple lors de linterprtation
du code dans le navigateur.
Examinez le code suivant:
<!DOCTYPE html>
<html>
<head>
<title>Espaces et sauts multiples</title>
</head>
<body>
22 Chapitre 2
Ce texte est volontairement crit sur
plusieurs lignes et de multiples espaces
sont insres entre les mots
</body>
</html>
Daprs vous, comment sera afch ce texte dans le navigateur ? Jetez un il la
Figure2.1 pour constater quel point votre navigateur peut manquer de discernement!
Figure 2.1
Les espaces
multiples et les
sauts de ligne sont
ignors.
Pour indiquer au navigateur que vous voulez passer la ligne, vous utiliserez la balise
<br> (pour break, ou saut de ligne). Si vous voulez que vos espaces multiples soient
galement prises en considration, vous les remplacerez par autant dentits
que ncessaire. Le code prcdent est donc corrig comme ceci:
<!DOCTYPE html>
<html>
<head>
<title>Espaces et sauts multiples</title>
</head>
<body>
Ce texte est volontairement crit sur<br>
<br>
<br>
plusieurs lignes et
  de multiples espaces<br>
sont insres
entre les mots
</body>
</html>
Comme le montre la Figure2.2, cette fois-ci, les espaces et les sauts de ligne sont bien
interprts.
Figure 2.2
Le navigateur se
comporte bien
lorsquon lui parle
correctement.
Premiers pas en HTML, CSS et jQuery 23
Pour terminer cette section, sachez que vous pouvez galement utiliser la balise <p></
p> pour crer des paragraphes.
titre dexemple, si vous insrez ces trois lignes de code entre les balises <body> et
</body> dun squelette standard, vous obtenez le rsultat reprsent la Figure2.3:
<p>Ceci est un premier paragraphe.</p>
<p>Ceci est un deuxime paragraphe.</p>
<p>Et ceci est un troisime paragraphe.</p>
Figure 2.3
Contrairement aux sauts de ligne <br>, un espace supplmentaire est insr entre chaque
paragraphe.
Info
En utilisant des rgles CSS simples, il est possible de dnir la taille des espaces afchs
avant et aprs un paragraphe.
Titres et sous-titres sur une page
Lorsque vous saisissez le contenu dune page Web, il est bon de le structurer en utilisant
des balises de titre. Six niveaux de titre sont possibles: <h1></h1> <h6></h6>.
La Figure2.4 montre comment est interprt ce code dans un navigateur:
<!DOCTYPE html>
<html>
<head>
<title>Titres h1 h6</title>
</head>
<body>
<h1>Ceci est un titre h1</h1>
</body>
</html>
24 Chapitre 2
Figure 2.4
Les six niveaux de
titre du HTML.
Le texte insr dans une balise de titre est important pour les personnes qui lisent la
page Web, mais galement pour les moteurs de recherche qui rfrencent la page. Il est
donc important de choisir des titres en accord avec le contenu de chaque section.
Mettre en valeur du texte avec des balises HTML
Selon le W3C: "La balise <b></b> reprsente maintenant une porte de texte dporter
stylistiquement de la prose normale sans transmettre dimportance en plus, telle que
les mots-cls dans un rsum de document, des noms de produits dans un article, ou
dautres portes de texte dont la prsentation typographique typique est en gras."
Toujours selon le W3C: "La balise <strong> reprsente maintenant limportance plutt
que la forte emphase."
Aprs avoir lu et relu cette prose, vous pouvez comprendre si je ne mabuse que la
balise<b> met en avant de faon modre une portion de texte. Vous utiliserez la balise
<strong> pour mettre en avant un texte plus important.
Quant la balise <i>, elle met en italique une portion de texte sans toutefois la mettre
en avant. Elle sera utilise pour afcher des termes techniques, des penses, des
dsignations taxonomiques, des expressions idiomatiques,etc. Pour mettre en avant un
texte afch en italique, vous utiliserez la balise <em>.
Tapez ce code entre les balises <body> et </body> et excutez-le. Vous devriez obtenir
le rsultat reprsent Figure2.5:
<p><b>Ce texte est afich en gras mais nest pas mis en avant</b></p>
<p><strong>Ce texte est afich en gras et est mis en avant</strong></p>
<p><i>Ce texte est afich en italique mais nest pas mis en avant</i></p>
<p><em>Ce texte est afich en italique et est mis en avant</em></p>
Figure 2.5
Visuellement, aucune
difrence entre b et
strong ni entre i et em.
Comme vous pouvez le voir, les balises <b> et <strong> produisent le mme efet dans
le navigateur. Il en va de mme pour les balises <i> et <em>. Dans ce cas, pourquoi
HTML5 propose-t-il plusieurs balises pour obtenir le mme rsultat ? Cette distinction
est importante pour la deuxime audience de vos pages. Entendez par l les robots qui
parcourent le Web des ns dindexation. Ces programmes nont que faire de laspect
visuel dune page. Pour eux, ce qui importe, cest le "poids" des mots utiliss. Ainsi, vous
utiliserez les balises <strong> et <em> si vous voulez mettre en avant un mot ou un bloc
de texte tout en modiant son allure. En revanche, vous utiliserez les balises <b> et <i>
si vous ne voulez faire passer aucun message aux robots dindexation.
Pour difrencier un mot visuellement (et non smantiquement), vous pouvez galement:
le souligner en lentourant des balises <u> et </u>;
le surligner en lentourant des balises <mark> et </mark>;
lafcher en caractres de petite taille, en lentourant des balises <small> et </
small>.
Tapez ce code entre les balises <body> et </body> et excutez-le. Vous devriez obtenir
le rsultat reprsent Figure2.6:
<p><mark>Ce texte est marqu</mark></p>
<p><u>Ce texte est soulign</u></p>
<p><small>Ce texte est afich en caractres de petite taille</small></p>
Figure 2.6
Dautres formes
de difrenciation.
Listes puces et listes numrotes
Les listes puces et les listes numrotes sont monnaie courante sur le Web. Elles
permettent de crer des numrations non chronologiques ou chronologiques. Dans
le premier cas, les entres de la liste sont prcdes dun tiret, dune puce ou dun
autre caractre. Dans le second cas, les entres de la liste sont prcdes dun nombre
croissant, ce qui leur confre un aspect temporel.
Une liste puces est dlimite par les balises <ul> et </ul> (ul est labrviation de
unordered list, soit en franais "liste non ordonne"). Chaque lment de la liste est
dlimit par les balises <li> et </li> (voir Figure2.7):
<ul>
<li>Premier</li>
<li>Deuxime</li>
<li>Troisime</li>
<li>Quatrime</li>
</ul>
26 Chapitre 2
Figure 2.7
Une liste puces.
Une liste numrote est dlimite par les balises <ol> et </ol> (ol est labrviation de
ordered list, soit en franais "liste ordonne"). Chaque lment de la liste est dlimit par
les balises <li> et </li> (voir Figure2.8):
<ol>
<li>Premier</li>
<li>Deuxime</li>
<li>Troisime</li>
<li>Quatrime</li>
</ol>
Figure 2.8
Une liste numrote.
Il est possible dimbriquer plusieurs liste. Pour cela, il suft dinsrer une balise <ul> ou
<ol> avant que la balise de la liste prcdente (<ul> ou <ol>) nait t ferme. titre
dexemple, le code suivant imbrique une liste numrote dans une liste puces, elle-
mme imbrique dans une liste numrote (voir Figure2.9):
<ol>
<li>Entre principale 1</li>
<ul>
<li>Entre secondaire 1</li>
<ol>
<li>Premire entre de niveau 3</li>
<li>Deuxime entre de niveau 3</li>
<li>Troisime entre de niveau</li>
</ol>
</ul>
</ol>
Figure 2.9
Trois listes imbriques.
Liens hypertexte
La magie du Web tient en grande partie aux liens hypertexte: en dnissant des liens sur
vos pages, il est possible de renvoyer lutilisateur vers une page de votre site ou vers une
page hberge plusieurs milliers de kilomtres
Les liens hypertexte sont dnis avec la balise <a>:
<a href="adresse">texte</a>
O adresse est ladresse de la page atteindre et texte est le texte sur lequel
lutilisateur cliquera pour accder la page vise. Par exemple, linstruction suivante
permet de crer un lien hypertexte qui donne accs au site Web de Microsoft France
(voir Figure2.10):
<a href="http://www.microsoft.com/fr-fr/default.aspx">Cliquez ici pour accder au
site de Microsoft</a>
Figure 2.10
Un clic suft pour accder
au site de Microsoft France.
28 Chapitre 2
Lien vers une partie spcique dune page
Lorsquune page contient un grand nombre dinformations, il peut tre utile de marquer
certains emplacements bien prcis (des titres, par exemple) pour faciliter sa lecture. Vous
pouvez alors vous dplacer rapidement vers les lments marqus via un lien hypertexte.
Pour marquer une balise quelconque, il suft dy insrer un attribut id. Par exemple:
<h2 id="marque">Un titre</h2>
Pour accder cet emplacement dans la page, vous devez dnir un lien hypertexte qui
pointe vers lidentiant, prcd dun caractre "#".
Examinez ce code:
<h2 id="haut">Haut de la page</h2>
<a href="#bas">Accder au bas de la page</a><br />
But I must explain to you how all this mistaken idea of denouncing pleasure and
praising pain was born and I will give you a complete account of the system,
and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because those who do not know how to pursue
pleasure rationally encounter consequences that are extremely painful.
<h2 id="bas">Bas de la page</h2>
<a href="#haut">Accder au dbut de la page</a>
Les ancres haut et bas sont dnies au dbut et la n du document:
<a name="haut" />
<a name="bas" />

Au dbut du document, un lien hypertexte fait rfrence lancre bas. Lorsque ce lien est
cliqu, la partie infrieure du document safche dans le navigateur:
<a href="#bas">Accder au bas de la page</a><br />
la n du document, un lien fait rfrence lancre haut. Lorsque ce lien est cliqu, la
partie suprieure du document safche dans le navigateur:
<a href="#haut">Accder au dbut de la page</a>
Si vous voulez tester ce code, assurez-vous que tout le document ne puisse pas safcher
dune seule traite dans le navigateur. Dans ce cas, les liens hypertexte sembleraient
navoir aucun efet (voir Figure2.11).
Info
Un peu plus haut, vous avez appris crer des liens hypertexte vers des pages Web.
En ajoutant des identiants certaines balises dans ces pages, vous pouvez crer des
liens qui pointent vers ces identiants depuis une autre page Web. Ainsi, si lidentiant
partie2 a t dni dans la page introduction.htm, vous pouvez dnir le lien suivant
pour afcher la page introduction.htm et dcaler lafchage jusqu la balise did
partie2:
<a href="introduction.htm#partie2">Cliquez ici pour aficher la partie 2 de
lintroduction</a>
Figure 2.11
Les deux liens sont bien fonctionnels,
condition que la fentre soit de taille
rduite.
Autres types de liens
Les liens hypertexte ne pointent pas forcment vers des pages Web. Vous pouvez
galement dnir un lien qui pointe vers un chier. Ici, par exemple, le lien permet
lutilisateur de tlcharger le chier document.pdf.
<a href="http://www.monsite.com/fchiers/document.pdf">Cliquez ici pour
tlcharger document.pdf </a>
Vous pouvez galement dnir un lien vers une adresse e-mail. Ici, par exemple, le lien
ouvre une fentre de composition de message dans le client de messagerie par dfaut de
lutilisateur et insre ladresse qui suit le mot-cl mailto: dans le champ A du message:
<a href="mailto:prenom.nom@domaine.com">Cliquez ici pour menvoyer un message</a>
Si vous le souhaitez, il est possible daller plus loin avec ce type de lien, en dnissant
le sujet du message (subject), les destinataires secondaires (cc) et/ou cachs (bcc):
<a href="mailto:prenom1.nom1@domaine1.com?subject=Sujet%20du%20message&cc=
prenom2.nom2@domaine2.com&bcc=prenom3.nom3@domaine3.com">Cliquez ici</a>
Info
Les espaces et les apostrophes ne sont pas permises dans le sujet du mail. Si ces
caractres sont prsents dans le sujet, vous les remplacerez par leur code ASCII: %20 et
%27 respectivement.
Les bases du CSS
Le CSS est un langage simple mais trs tendu. Entendez par l quil est simple de le
mettre en uvre, mais difcile de connatre toutes les proprits quil peut manipuler.
Pour avoir un aperu assez complet des proprits CSS, prenez une grande respiration
et allez faire un tour sur la page www.w3schools.com/cssref/. Vous comprendrez mieux
ce que je veux dire
30 Chapitre 2
Le principe de base du langage CSS est lmentaire: on afecte un ensemble de couples
proprit-valeur une ou plusieurs balises HTML.
Modification de toutes les occurrences dune balise
Supposons que vous vouliez modier les caractristiques de tous les paragraphes
(balises <p>) dune page. Commencez par dnir une feuille de styles interne entre
les balises <head> et </head> du document. Insrez le nom de llment concern
(cest--dire le nom de la balise sans les signes < et >) entre les balises <style> et </
style>, ajoutez des accolades et dnissez les couples proprit-valeur correspondant
aux caractristiques que vous voulez modier:
p {
proprit1: valeur1;
proprit2: valeur2;
etc.
}
</style>
Ce mode dcriture peut tre gnralis toutes les balises du langage HTML: si vous
voulez modier les caractristiques de toutes les occurrences dune balise (<img>, <a>,
<p>, <table>, etc.) dans une page, indiquez le nom de llment concern et dnissez
autant de couples proprit-valeur que ncessaire.
Modification de certaines occurrences dune balise
Supposons maintenant quune page HTML contienne plusieurs paragraphes <p> et que
certains dentre eux doivent avoir une apparence difrente. La technique prcdente
nest pas utilisable, car elle modierait les caractristiques de toutes les balises <p>. Pour
arriver au but recherch, il faut donc non pas sadresser un lment dans la feuille de
styles, mais un slecteur, cest--dire une entit capable de difrencier les balises
dun mme type:
selecteur {
proprit1: valeur1;
proprit2: valeur2;
etc.
}
</style>
Le slecteur de classe est certainement celui qui est le plus utilis. Pour le mettre en
uvre, vous dnirez lattribut class dans les balises concernes. Par exemple, pour
afcher le texte de certaines balises <p> en bleu et celui de certaines autres en rouge,
vous dnirez les classes bleu et rouge comme ceci:
<p class="bleu">Texte en bleu</p>
<p class="rouge">Texte en rouge</p>
Vous vous doutez que ce code ne suft pas pour changer la couleur du texte : vous
devez galement crire quelques lignes de CSS:
.bleu {color: blue;}
.rouge {color: red;}
</style>
Figure 2.12
Utilisation de classes CSS dans des paragraphes.
Le point dcimal utilis devant les mots bleu et rouge dans le code CSS indique quil
sagit dun slecteur de classe et non dun lment HTML. Les classes peuvent concerner
plusieurs balises, ventuellement de types difrents. Par exemple, si vous afectez la
classe rouge une balise <p> et une balise <span>, le texte insr dans ces deux
balises sera afch en rouge si vous dnissez la rgle suivante:
.rouge {color: red;}
Si vous voulez limiter cette rgle de style aux seules balises <span> de classe rouge,
vous utiliserez un autre slecteur:
span.rouge {color: red;}
Enn, si vous voulez appliquer cette rgle de style aux balises <span> de classe rouge
et aux balises <p> de classe r, vous utiliserez le slecteur suivant:
span.rouge, p.r {color: red;}
Pseudo-classes
Le slecteur de pseudo-classe est reprsent par le caractre deux-points (:).
Vous ferez appel aux pseudo-classes pour cibler des balises en fonction de caractristiques
inaccessibles aux slecteurs traditionnels: premier enfant ou focus, par exemple.
La pseudo-classe :frst-child permet de cibler le premier enfant dune balise. Par
exemple, pour mettre en gras la premire balise <p> enfant de la balise <div>, vous
utiliserez le slecteur suivant:
div p:frst-child {font-weight: bold;}
Les pseudo-classes:link et:visited ciblent les balises <a> dont (respectivement) le
lien na pas t visit/a t visit. Les deux lignes suivantes dnissent la couleur des
liens:
:link {color: fushia}
:visited {color: navy}
32 Chapitre 2
La pseudo-classe:focus cible les balises qui ont le focus (gnralement les balises dun
formulaire). Elle permet trs simplement de modier la couleur darrire-plan (ou un autre
style) dun marqueur. Ici, par exemple, nous afectons un arrire-plan de couleur rouge
la balise input de type text qui a le focus:
input[type=text]:focus {background: red;}
La pseudo-classe:hover cible les balises dont le contenu est survol. Cela permet, par
exemple, de changer la bordure dune image lorsquelle est pointe par la souris:
img:hover {border-style: dotted;}
La pseudo-classe:lang permet de dnir un style en fonction de la langue du document.
Ici, par exemple, nous dnissons les guillemets utiliser pour la langue franaise:
xml:lang(fr) {quotes: '<' '';}
Dune faon traditionnelle, les CSS sont lis un lment, en fonction de sa position
dans larbre du document. Cependant, il peut tre utile de faire appel un pseudo-
lment pour efectuer des mises en forme partir dinformations absentes de larbre du
document. Par exemple, pour dnir le style de la premire ligne ou du premier caractre
dune balise.
Le pseudo-lment:frst-line cible la premire ligne dune balise. Ici, par exemple, la
premire ligne de la balise <p> est afche en rouge.
p:frst-line {color:red;}
Le pseudo-lment :frst-letter cible le premier caractre dune balise. Ici, par
exemple, nous doublons la taille du premier caractre dune balise <p> et nous lui
afectons lattribut gras:
p:frst-letter {font-size: 200%; font-weight: bold;}
Slecteurs CSS lmentaires
Le langage CSS peut manipuler de nombreux slecteurs.
Le slecteur didenticateur est reprsent par le caractre dise (#). Il cible llment
dont lattribut id a la valeur spcie. Ici, seul llment dont la proprit id vaut
corne est concern: #corne.
Vous pouvez restreindre le ciblage en prcisant un lment devant le slecteur did.
Ici, par exemple, seul llment p dont le marqueur id vaut corne est concern :
p#corne.
Un slecteur descendant est construit avec deux slecteurs traditionnels (ou plus)
spars par une espace. Il cible les enfants du premier slecteur. Par exemple, pour
afecter un arrire-plan jaune tous les lments li enfants dun lment div, vous
utiliserez le slecteur descendant suivant: div li.
Un slecteur dattribut cible les lments en fonction de la prsence dattributs et/ou
de leurs valeurs. Par exemple, pour afecter une taille de 120% tous les lments qui
possdent un attribut perso, vous utiliserez le slecteur suivant: [perso].
Pour cibler les seuls lments dont lattribut perso a pour valeur vert, vous utiliserez
le slecteur suivant: [perso=vert].
Slecteurs hirarchiques
Tous les objets du DOM font partie dun arbre commun dont la racine est la balise <body>.
Le tableau suivant dresse la liste des slecteurs hirarchiques utilisables en CSS.
Syntaxe Signication
p > e lments e directement descendants dlments p
p + e lments e directement prcds dun lment p
p ~ e lments e prcds dun lment p
Slecteurs CSS3 volus
Vous voulez aller plus loin avec les slecteurs? Le tableau suivant passe en revue les
slecteurs volus utilisables en CSS3.
Syntaxe Signication
nom_lment[attr="valeur"] Tout lment nom_lment dont la valeur de
lattribut attr est gale la chane valeur
nom_lment[attr^="valeur"] Tout lment nom_lment dont la valeur de
lattribut attr commence exactement par la
chane valeur
nom_lment[attr$="valeur"] Tout lment nom_lment dont la valeur de
lattribut attr nit exactement par la chane
valeur
nom_lment[attr*="valeur"] Tout lment nom_lment dont la valeur de
lattribut attr contient la sous-chane valeur
nom_lment[attr|="valeur"] Tout lment nom_lment dont la valeur de
lattribut attr est une chane spare par des
tirets et dont la premire partie commence par
valeur
nom_lment:root Un lment nom_lment, racine du document
nom_lment:nth-child(n) Un lment nom_lment qui est le nime
enfant de son parent
nom_lment:nth-last-child(n) Un lment nom_lment qui est le nime
enfant de son parent en comptant depuis le
dernier enfant
nom_lment:nth-of-type(n) Un lment nom_lment qui est le nime
enfant de son parent et de ce type
nom_lment:nth-last-of-type(n) Un lment nom_lment qui est le nime
enfant de son parent et de ce type en comptant
depuis le dernier enfant
nom_lment:last-child Un lment nom_lment, dernier enfant de
son parent
nom_lment:frst-of-type Un lment nom_lment, premier enfant de
son type
34 Chapitre 2
nom_lment:last-of-type Un lment nom_lment, dernier enfant de
son type
nom_lment:only-child Un lment nom_lment, seul enfant de son
parent
nom_lment:only-of-type Un lment nom_lment, seul enfant de son
type
nom_lment:empty Un lment nom_lment qui na aucun enfant
nom_lment:target Un lment nom_lment qui est la cible de
lURL dorigine
nom_lment:enabled Un lment dinterface utilisateur nom_lment
qui est actif ou inactif
nom_lment:checked Un lment dinterface utilisateur nom_lment
qui est coch ou dont ltat est indtermin
(bouton radio ou case cocher, par exemple)
nom_lment:contains("attr") Un lment nom_lment dont le contenu
textuel concatn contient la sous-chane attr
nom_lment:selection La partie dun lment nom_lment qui est
actuellement slectionne par lutilisateur
nom_lment:not(sel) Un lment nom_lment qui nest pas
reprsent par le slecteur simple sel
Info
Pour avoir un aperu gnral des slecteurs utilisables en CSS, reportez-vous la page
ddie du W3C:
www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html.
Un exemple dutilisation
Pour illustrer la mise en forme des balises en CSS, nous allons nous intresser aux listes
( puces et numrotes).
Les puces et les numros utiliss dans une liste peuvent tre personnaliss via la
proprit CSS list-style-type. Pour une liste puces, cette proprit peut prendre
les valeurs suivantes:
disc: puce ronde remplie.
circle: puce ronde vide.
square: carr rempli.
none: aucun signe.
Pour une liste ordonne dcimale, la proprit list-style-type peut prendre les
valeurs suivantes:
decimal: 1, 2, 3.
decimal-leading-zero: 01, 02, 03.
hebrew: numrotation hbraque traditionnelle.
armenian: numrotation armnienne traditionnelle.
georgian: numrotation gorgienne traditionnelle.
hiragana: a, i, u, e, o, ka, ki, ku.
katakana: A, I, U, E, O, KA, KI, KU.
hiragana-iroha: i, ro, ha, ni, ho, he.
katakana-iroha: I, RO, HA, NI, HO, TE.
none: aucune numrotation.
Enn, pour une liste ordonne alphabtique, la proprit list-style-type peut
prendre les valeurs suivantes:
lower-roman: i, ii, iii, iv.
upper-roman: I, II, III, IV.
lower-greek: a, b, c, d, e.
lower-alpha: a, aa, aaa.
upper-alpha: A, AA, AAA.
lower-latin: a, b, c.
upper-latin: A, B, C.
none: aucune numrotation.
Nous allons travailler sur une liste numrote et sur une liste puces:
<h2>Check-list voiture</h2>
<ol>
<li>Niveaux</li>
<li>Vidange</li>
<li>Courroie</li>
<li>Dcrassage</li>
<li>Optiques</li>
<li>Echappement</li>
<li>Pneumatiques</li>
</ol>
<h2>Check-list avion</h2>
<ul>
<li>Passeport</li>
<li>Devise</li>
<li>Vaccination</li>
<li>Bagages</li>
</ul>
Sans aucune mise en forme, ces deux listes sont afches comme la Figure2.13.
Supposons que vous vouliez modier la mise en forme de ces deux listes pour arriver au
rsultat reprsent Figure2.14.
36 Chapitre 2
Figure 2.13
Une liste numrote et une liste puces
sans mise en forme.
Figure 2.14
Les deux listes ont t mises en forme
avec des instructions CSS.
Commenons par les rgles CSS les plus simples.
Lnumration de la liste numrote est de type lower-latin, et la liste puces utilise
des carrs pour difrencier chaque lment:
ol { list-style-type: lower-latin;}
ul { list-style-type: square;}
Les lments de la liste puces, cest--dire les enfants li de llment ul (ul li), sont
crits avec la police Calibri de type x-large:
ul li {
font-family: Calibri;
font-size: x-large;
}
Enn, les premier, troisime et septime enfants li de la liste ol sont afchs en
caractres rouges sur un fond jaune:
ol li:nth-child(1), ol li:nth-child(3), ol li:nth-child(7) {
color: red;
background-color: yellow;
}
Dnissez ces rgles dans len-tte de la page, entre les balises <style> et </style>,
et vous devriez obtenir le rsultat recherch:
<head>
// Les rgles de style sont dfnies ici
</style>
</head>
Les bases de jQuery
La bibliothque jQuery est accessible via la fonction jQuery() ou son alias $(). Cette
fonction admet un ou plusieurs arguments et retourne un objet jQuery. Les arguments
passs la fonction jQuery() peuvent tre du type suivant:
Un lment HTML. Le rsultat retourn est un objet jQuery qui reprsente cet lment.
Par exemple, $('a') retourne un objet qui reprsente les liens hypertexte de la page.
Un slecteur CSS. Le rsultat retourn est un objet jQuery qui reprsente le ou les
lments correspondant au slecteur. Par exemple, $('img.petit') retourne
un objet qui reprsente limage ou les images (si elles existent) de classe petit
contenues dans la page.
Dsigner un ou plusieurs lments jQuery
La syntaxe gnrale dune instruction jQuery est la suivante:
$(sel).action();
O sel est un lment HTML ou un slecteur CSS destin cibler un ou plusieurs
lments dans le DOM, et action est la fonction jQuery appliquer la slection.
Par exemple, linstruction suivante insre le texte "bonjour" dans le span didentiant
message:
$('span#message').html('bonjour');
Ou encore linstruction suivante insre le texte "vide" dans tous les lments de classe
data:
$('.data').html('vide');
38 Chapitre 2
Slecteurs spcifiques jQuery
Tous les slecteurs du langage CSS peuvent tre utiliss en jQuery. Cependant, quelques
slecteurs et pseudo-slecteurs sont uniquement accessibles en jQuery:
Slecteur lments slectionns
:even lments pairs
:odd lments impairs
:eq() lments dont lindex est spci
:gt() lments dont lindex est suprieur (greater than) lindex spci
:lt() lments dont lindex est infrieur (lower than) lindex spci
Quelques exemples:
1. Pour surligner en jaune la deuxime balise <li> du document, vous utiliserez
linstruction suivante:
$('li:eq(1)').css('background-color','yellow');
2. Pour surligner en jaune les balises <li> paires partir de la deuxime, vous utiliserez
$('li:even:gt(1)').css('background-color','yellow');
3. Pour afecter une couleur darrire-plan rouge aux lments pairs dun tableau et une
couleur darrire-plan jaune aux lments impairs de ce tableau, vous utiliserez les
deux instructions suivantes:
$('td:even').css('background-color','red');
$('td:odd').css('background-color','yellow');
Info
Pour avoir un aperu global de tous les slecteurs utilisables en jQuery, consultez la page
http://api.jquery.com/category/selectors/.
Modifier les proprits CSS dun lment
La fonction html() est loin dtre la seule disponible. Pour avoir un aperu complet
des fonctions jQuery, rendez-vous sur la page http://api.jquery.com/. Pour trouver plus
facilement les fonctions qui vous intressent, le plus simple est de restreindre lafchage
en utilisant les catgories afches dans la partie gauche de la page, puis de cliquer sur
une fonction pour savoir comment lutiliser (voir Figure2.15).
Figure 2.15
Toutes les
fonctions
jQuery sont
listes sur
cette page.
Supposons par exemple que vous vouliez modier la couleur dune balise <span>. Pour
cela, vous devez agir sur la proprit CSS color. Vous devez donc trouver la fonction
qui permet de modier une proprit CSS. Cliquez sur la catgorie CSS, dans la partie
gauche de la page. Il ne vous reste plus qu trouver la fonction adquate. Un rapide coup
dil la partie droite de la page, et vous constatez que la fonction css() correspond
exactement ce que vous recherchez (voir Figure2.16).
Figure 2.16
La fonction
css() permet
de lire et de
modier une
proprit CSS.
Cliquez sur le lien css() pour connatre le gabarit de la fonction et avoir des dtails sur son
utilisation (voir Figure2.17).
40 Chapitre 2
Figure 2.17
Le gabarit de la
fonction css().
La fonction css() peut donc tre utilise en lecture (pour connatre la valeur dune
proprit) ou en criture (pour afecter une valeur une proprit). Pour modier la
couleur dune balise <span>, vous utiliserez donc une instruction de ce type (ici, la balise
<span> a pour id premier):
$('span#premier').css('color', 'red');
Modifier les attributs HTML dun lment
Il est galement possible de lire et de modier les attributs dune balise HTML en jQuery.
Pour savoir quelle fonction utiliser, rendez-vous sur la page http://api.jquery.com,
slectionnez la catgorie Attributes dans la partie gauche de la page et observez la liste
des fonctions de cette catgorie (voir Figure2.18).
Figure 2.18
La fonction attr() permet
de lire et de modier la
valeur dun attribut.
titre dexemple, supposons que vous vouliez modier lattribut src de la balise <img>
suivante en utilisant jQuery:
<img id="image1" src="chat.jpg">
Vous pourriez utiliser linstruction suivante:
$('#image1').attr('src','chien.jpg');
Arriv ce point dans la lecture de cet ouvrage, vous commencez certainement
entrevoir les immenses possibilits de la bibliothque jQuery. La page http://api.jquery.
com est votre allie: avec un peu de temps et de patience, vous aurez tt fait de trouver
les fonctions jQuery adaptes aux actions que vous voulez accomplir.
Pour linstant, vous connaissez trois fonctions jQuery:
html(), qui lit ou modie le texte insr dans les balise <p>, <span> ou <div>;
css(), qui lit ou modie des proprits CSS;
attr(), qui lit ou modie les attributs HTML dune balise.
Cela est largement sufsant pour commencer manipuler le DOM. Mais rassurez-vous,
vous navez pas encore fait le tour de jQuery. Comme vous le verrez dans la suite de
louvrage, cette bibliothque vous rserve bien des surprises!
Chanage jQuery
Les fonctions jQuery retournent un objet jQuery. Il est donc possible de chaner difrentes
fonctions pour efectuer plusieurs actions en une seule instruction. Par exemple, pour
modier la couleur du texte et la couleur de larrire-plan dune balise <span> did
#monTexte, vous pouvez utiliser les instructions suivantes:
$('#monTexte').css('color','red');
$('#monTexte').css('background','yellow');
Pour faire plus simple, vous pouvez galement utiliser une seule instruction en chanant
les deux fonctions css() :
$('#monTexte').css('color','red').css('background','yellow');
Cette technique fonctionne sur toutes les fonctions jQuery. Libre vous de lutiliser ou de
dnir une seule action par instruction. Le rsultat obtenu sera le mme.
42 Chapitre 2 42 Chapitre 2
Exercice 1
Retrouvez les chiers d'exercices et leurs corrigs sur le
site compagnon http://moneformation.pearson.fr
Vous allez enn mettre en pratique tout ce que vous avez appris sur les langages HTML
et CSS, et sur la bibliothque jQuery. Le rsultat obtenir est reprsent Figure2.19.
Figure 2.19
Le rsultat nal.
Cette page est compose des lments suivants:
Un titre <h2>. Les caractres ont une taille de 30 px et une couleur #a1b5ee.
Un paragraphe contenant la premire phrase afche en rouge.
Un paragraphe contenant les deux phrases suivantes, afches sur un arrire-plan de
couleur lightgrey.
Un paragraphe contenant les deux dernires phrases afches en gras et de couleur
#2b971b.
Vous utiliserez du code CSS pour modier les caractristiques du titre, et du code jQuery
pour modier les caractristiques des trois paragraphes.
3
lments textuels
Les balises permettant dafcher
du texte
Pour afcher du texte dans le navigateur, il suft de le saisir entre les balises <body>
et </body>. Cependant, pour faciliter sa mise en forme laide dinstructions CSS ou
jQuery, vous pouvez encapsuler le texte dans plusieurs balises: <p>, <span>, <div> et
<h1> <h6>. Vous connaissez la plupart dentre elles:
<p></p> dnit un paragraphe, cest--dire un bloc de texte suivi dun saut de ligne.
<span></span> isole un bloc de texte an de faciliter sa mise en forme.
<div></div> isole un bloc pouvant contenir du texte, des images, des vidos et
nimporte quel autre type de donnes.
<h1> <h6> dnissent des titres de niveaux 1 6.
<p>, <div> et <h1> <h6> sont des balises de type block. Comparables des
paragraphes dans un traitement de texte, elles safchent les unes sous les autres. Quant
<span>, il sagit dune balise de type inline. Son utilisation dans une balise <div>
ou <p> ne rompra pas le ot du texte qui continuera safcher sur la mme ligne, si les
dimensions de la fentre le permettent bien entendu.
Pour bien comprendre la difrence entre les balises de type block et les balises de type
inline, observez le code ci-aprs et son rsultat dans le navigateur, comme reprsent
Figure3.1:
<h1>Un titre h1</h1>
<h2>suivi dun titre h2</h2>
<p>Ce texte</p>
<p>montre les difrences entre <span>les balises de type inline</span> et les
balises </p>
<div>de type block</div>
44 Chapitre 3
Figure 3.1
Les balises de type
block safchent les
unes sous les autres. Les
balises de type inline
safchent les unes la
suite des autres.
Comme vous pouvez le voir, seule la balise <span> ne provoque aucune rupture dans
lcriture du texte. Toutes les autres balises provoquent un passage la ligne et un saut
de ligne.
Listes HTML
Dans le chapitre prcdent, vous avez fait connaissance avec les listes puces (<ul>)
et les listes numrotes (<ol>). Le langage HTML5 permet galement de crer des
listes de descriptions. Les listes de descriptions taient dj prsentes dans HTML4.x.
Souvent boudes et utilises de manire non smantique, elles ont subi un lifting pour
tre remises au got du jour dans HTML5. La balise <dfn> est essentiellement utilise
pour encapsuler les mots dun glossaire, lintrieur de la balise <dt>. Notez quon
peut galement dnir plusieurs descriptions (<dd>) pour un seul nom (<dt>), ou encore
regrouper plusieurs noms pour une seule description.
Cet exemple vous aidera mieux comprendre lutilit des listes de descriptions (voir
Figure3.2):
<dl>
<dt><dfn>Bit</dfn></dt>
<dd>Information reprsente par un symbole deux valeurs gnralement notes 0
et 1, associes aux deux tats dun dispositif.</dd>
<dt><dfn>Octet</dfn></dt>
<dd>Ensemble ordonn de huit lments binaires traits comme un tout.</dd>
</dl>
Figure 3.2
Les mots du glossaire
et les descriptions sont
automatiquement mis en
forme grce aux balises
<dfn>, <dt> et <dd>.
lments textuels 45
Personnaliser une liste
Dans les pages prcdentes, vous avez vu quil tait possible de personnaliser le type
des puces ou des numros dans une liste, en utilisant la proprit CSS list-style-
type.
ol { list-style-type: lower-latin;}
ul { list-style-type: square;}
Ces proprits sont galement accessibles en jQuery, via la fonction css(). Voici les
instructions jQuery quivalentes:
$('ol').css('list-style-type','lower-latin');
$('ul').css('list-style-type','square');
Si vous vous sentez limit par les styles de puces accessibles par dfaut en CSS3, sachez
que la proprit list-style-image permet dutiliser nimporte quelle image comme
symbole de puce. Voici sa syntaxe:
list-style-image: url(adresse);
O adresse est ladresse URI de la puce, au format GIF ou JPEG.
Pour trouver des puces librement tlchargeables, rendez-vous sur la page
http://createafreewebsite.net/free_bullets.html. Cliquez du bouton droit sur lune des
puces proposes et slectionnez Enregistrer limage sous dans le menu pour lenregistrer
sur votre disque dur. Il ne vous reste plus qu afecter lURI de la puce la proprit
list-style-image pour obtenir lefet recherch (voir Figure3.3):
<!DOCTYPE html>
<html>
<head>
<title>Liste puces</title>
ul {list-style-image: url(blueball.gif);}
</style>
</head>
<body>
<ul>
<li>Premier</li>
<li>Deuxime</li>
<li>Troisime</li>
<li>Quatrime</li>
</ul>
</body>
</html>
46 Chapitre 3
Figure 3.3
La liste puces a dsormais une tout
autre allure.
Info
Si limage spcie dans la proprit list-style-image nest pas trouve, la puce par
dfaut la remplacera. Si vous souhaitez une puce circle, square ou aucune puce, vous
devrez initialiser la proprit list-style-type en consquence. Par exemple:
ul {
list-style-image: url(blueball.gif);
list-style-type: square;
}
Je ne sais pas si vous lavez remarqu, mais les puces de la Figure 3.3 ne sont pas
alignes horizontalement avec le texte qui les suit. Ceci vient du fait que leur hauteur
est infrieure celle du texte. Pour rsoudre ce problme, vous utiliserez une image
darrire-plan la place de la proprit list-style-image (voir Figure3.4).
<!DOCTYPE html>
<html>
<head>
<title>Liste puces</title>
ul {list-style-type: none;}
li {
background-image: url(blueball.gif);
background-repeat: no-repeat;
background-position: 0 1px;
padding-left: 25px;
line-height: 20px;
}
</style>
</head>
<body>
<ul>
<li>Premier</li>
<li>Deuxime</li>
<li>Troisime</li>
<li>Quatrime</li>
</ul>
lments textuels 47
</body>
</html>
Figure 3.4
Les puces sont maintenant bien
alignes.
Quelques explications simposent:
Les puces sont dsactives en afectant la valeur none la proprit list-style-
type.
Limage darrire-plan est dnie avec la proprit background-image des lments
li.
Pour interdire la rptition de limage darrire-plan, on afecte la valeur no-repeat
la proprit background-repeat.
La proprit background-position dcale limage darrire-plan vers le bas pour
obtenir un alignement horizontal avec le texte.
La proprit padding-left dcale les puces sur le ct gauche de 25 pixels.
Enn, la taille des lignes est augmente avec la proprit line-height pour viter
que les lignes de la liste ne soient trop proches les unes des autres.
Choisir la police du texte
Pour choisir la police employe dans une balise, vous utiliserez la proprit CSS font-
family:
font-family: police1, , policeN;
Lorsque plusieurs polices sont spcies, la premire police disponible sur lordinateur
o sexcute le code est utilise. Vous devez choisir en dernier lieu un nom de police
gnrique, qui existera forcment sur tous les ordinateurs : serif, sans-serif, cursive,
fantasy ou monospace.
Voici quelques types de polices correspondant chacun des types gnriques:
serif: Times New Roman, Bodoni, Garamond, MS Georgia.
sans-serif : MS Trebuchet, MS Arial, MS Verdana, Univers, Futura, Gill Sans,
Helvetica.
cursive: Script, Segoe Script, Comic Sans MS, Viner Hand ITC, Vladimir Script.
fantasy: Kino MT, Tektonpro, Critter, Studz.
monospace: Courier, MS Courier New, Prestige.
48 Chapitre 3
La dnition de la police peut se faire:
1. En CSS, dans une feuille de styles interne ou externe:
p {font-family: "Courier New", Courier, monospace;}
h1 {font-family: "Times New Roman", Garamond, serif;}
p {font-family: "Comic sans MS", Script, cursive;}
Attention
Les noms de polices contenant des espaces doivent tre placs entre guillemets.
Il est fortement dconseill de choisir une police fantasy pour afcher vos textes. En
efet, chaque systme dexploitation possde ses propres polices fantasy. Lafchage
est donc des plus alatoires.
2. En jQuery:
$('p').css('font-family','"Courier New", Courier, monospace');
$('h1').css('font-family','"Times New Roman", Garamond, serif');
$('p').css('font-family','"Comic sans MS", Script, cursive');
3. En HTML, directement dans les balises concernes:
<p style="font-family: 'Courier New', Courier, monospace;">Paragraphe</p>
<h1 style="font-family: 'Times New Roman', Garamond, serif;">Titre</h1>
<p style="font-family: 'Comic sans MS', Script, cursive;">Paragraphe</p>
Taille des caractres
La taille des polices est choisie avec la proprit font-size. Les valeurs peuvent tre
spcies en inches (in), centimtres (cm), millimtres (mm), points (pt), picas (pc), pixels
(px), ems (em), X-height (ex) ou pourcentages (%). Voici quelques exemples:
En HTML: <body style="font-size: 1.2em;"></body>
En CSS: body {font-size: 1.2em;}
En jQuery: $('body').css('font-size','1.2em');
titre dinformation, 1 point = 1/72 pouce, 1 pica = 12 points, 1 pouce = 2,54 cm, 1 em
correspond grossirement la hauteur de la lettre "" et 1 ex la hauteur de la lettre
minuscule "x".
La taille des polices fait rfrence la distance comprise entre la partie suprieure
des lettres majuscules et la partie infrieure des lettres qui contiennent un jambage,
comme le g ou le y. cette distance sajoute un lger espace complmentaire appel
"interlignage", destin sparer les lignes les unes des autres (voir Figure3.5).
lments textuels 49
Figure 3.5
Termes techniques relatifs la
taille des polices.
Attributs des caractres
La proprit font-weight dnit la graisse des caractres. Les valeurs possibles sont
normal (valeur par dfaut), bold, bolder, lighter, 100, 200, 300, 400, 500, 600,
700, 800, ou 900. Voici un exemple dutilisation:
En HTML: <body style="font-weight: bold;"></body>
En CSS: body {font-weight: bolder;}
En jQuery: $('body').css('font-weight','bold');
La proprit font-style dtermine lorientation de la police. Elle peut tre initialise
avec trois valeurs : normal (lettres droites), italic (lettres penches droite) et
oblique (lettres penches gauche, si la police admet cette valeur).
Voici un exemple dutilisation:
En HTML: <p id="par1" style="font-style: italic;">Texte italique</p>
En CSS: p#par1 { font-style: italic; }
En jQuery: $('p#par1').css('font-style', 'italic');
La proprit text-decoration dtermine le soulignement ou le surlignement dun
lment. Les valeurs possibles sont les suivantes:
none: aucune dcoration.
underline: caractres souligns.
overline: caractres surligns.
blink: caractres clignotants (sauf sous Internet Explorer).
line-through: caractres barrs.
En HTML: <span id="s1" style="text-decoration: overline;">texte</
span>
En CSS: span#s1 { text-decoration: overline; }
En jQuery: $('span#s1').css('text-decoration', 'overline');
La proprit text-transform permet de mettre un texte en minuscules ou en
majuscules. Les valeurs possibles sont les suivantes:
none: aucune transformation.
capitalize: premire lettre des mots en majuscule.
uppercase: tous les caractres en majuscules.
50 Chapitre 3
lowercase: tous les caractres en minuscules.
En HTML : <span id="trans1" style="text-transform:
uppercase;">texte</span>
En CSS: span#trans1 {text-transform: uppercase;}
En jQuery: $('span#trans1').css('text-transform', 'uppercase');
La proprit font-variant permet de mettre un texte en petites majuscules lorsque la
valeur small-caps lui est afecte:
En HTML: <p id="sc">Un texte en small caps</p>
En CSS: p#sc {font-variant: small-caps;}
En jQuery: $('p#sc').css('font-variant', 'small-caps');
La proprit text-indent dnit lindentation de la premire ligne dun paragraphe.
La valeur de lindentation peut tre spcie en utilisant une unit de taille quelconque
(px, pt, mm, in, etc.) ou un pourcentage. Si la valeur est ngative, le texte est dcal vers
la gauche. Dans ce cas, pensez dnir une marge gauche: sinon, le dbut du texte
risque dtre masqu. Voici un exemple dutilisation:
En HTML: <p id="ti" style="text-indent: 30px;">Ce paragraphe est
indent de 30 px sur la premire ligne</p>
En CSS: p#ti {text-indent: 30px;}
En jQuery: $('p#ti').css('text-indent', '30px');
Utiliser des polices de caractres non
conventionnelles
Dans les pages prcdentes, vous avez appris utiliser la proprit CSS font-family
pour dnir la police employer dans une balise, un groupe de balises ou tout le
document. Cette proprit fonctionne parfaitement, mais les polices utilisables sont
limites celles qui sont installes sur le poste de lutilisateur. Dans cette section, je vais
vous montrer comment utiliser une police quelconque, et ce, quelle soit ou quelle ne
soit pas installe sur le poste de lutilisateur. Ce prodige tient lutilisation de la proprit
CSS3 @font-face. Une seule limitation: le navigateur utilis doit tre assez rcent pour
"comprendre" cette proprit. Ne vous en faites pas trop ce sujet, car la quasi-totalit
des navigateurs est compatible. Voici le gabarit de cette proprit:
@font-face
{
font-family: "nom-police";
[font-style: style-police;]
[font-variant: petites-capitales;]
[font-weight: graisse-police;]
[font-stretch: condens-tendu;]
[font-size: taille-police;]
src: [local('nom-local'),] url('url-police') [format(format-police)];
}
lments textuels 51
O:
nom-police est le nom de la police, tel quil sera utilis dans la feuille de styles.
style-police dnit le style de la police: all, normal, italic ou oblique.
petites-capitales indique la casse des caractres: normal ou small-caps.
graisse-police indique la graisse de la police : all, normal, bold, 100, 200,
300, 400, 500, 600, 700, 800 ou 900.
condens-tendu dnit ltat de compression/extension horizontale de la
police : all, normal, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded ou
ultra-expanded.
taille-police dnit les tailles possibles pour la police : all pour toutes les
polices proportionnelles, une ou deux tailles pour les polices bitmap ou devant tre
rendues dans une taille ou une fourchette de tailles spciques.
nom-local dnit le nom local de la police, au cas o cette dernire serait installe
sur lordinateur.
url-police dnit ladresse URL de la police accessible sur le serveur.
format-police dnit le format de la police : truedoc-pfr (TrueDoc Portable
Font Resource, .pfr), embedded-opentype (Embedded OpenType, .eot), type-
1 (PostScript Type 1, .pf ou .pfa), truetype (TrueType, .ttf) ou opentype
(OpenType, .ttf).
titre dexemple, pour implmenter la police serveur Little Bird, disponible dans le
dossier Fonts, sous le nom LittleBird.ttf, vous dnirez la proprit suivante:
@font-face
{
font-family: "Little Bird";
src: url("fonts/LittleBird.ttf");
}
Pour utiliser une police implmente via @font-face, il suft dafecter la proprit
font-family dnie dans @font-face un lment ou une classe quelconque. Ici,
par exemple, nous afectons la police serveur Little Bird au titre h1 du document (voir
Figure3.6):
<!DOCTYPE html>
<html>
<head>
<title>Police serveur</title>
@font-face
{
font-family: "Little Bird";
src: url("LittleBird.ttf");
}
h1 {font-family: 'Little Bird';}
</style>
</head>
52 Chapitre 3
<body>
<h1>Un titre en Little Bird</h1>
</body>
</html>
Figure 3.6
Le titre h1 est afch avec la
police Little Bird.
O trouver des polices libres de droits?
Vous savez maintenant comment implmenter une police serveur. Reste encore
trouver des polices compatibles avec ce procd. Rassurez-vous, de trs nombreuses
polices libres de droits sont tlchargeables sur les sites www.dafont.com,
www.fontsquirrel.com/fonts et www.grsites.com/archive/fonts/.
Les polices de caractres disponibles sur ces trois sites peuvent tre proposes sous
une forme TTF, EOT, SVG ou WOFF. Chaque navigateur est compatible avec une partie
seulement de ces formats de chiers. Pour assurer la plus grande compatibilit possible,
le mieux est de mettre disposition les versions TTF, EOT, SVG et WOFF de chaque
police. Il vous suft alors de rfrencer ces quatre variantes dans le code CSS:
@font-face
{
font-family: LittleBird;
src: url('LittleBird.ttf');
src: url('LittleBird.eot');
src: url('LittleBird.svg');
src: url('LittleBird.wof');
}
Vous vous demandez certainement comment obtenir les quatre variantes dune police.
Rendez-vous sur le site Font Squirrel (www.fontsquirrel.com/fonts/) et basculez sur
longlet WEBFONT GENERATOR, dans la partie suprieure de la page. Slectionnez
loption OPTIMAL, cochez la case Yes, the fonts Im uploading are legally eligible for Web
embedding et cliquez sur Add Fonts pour ajouter la police que vous voulez convertir (voir
Figure3.7).
lments textuels 53
Figure3.7
La police
LittleBird
Medium a t
uploade.
Il ne vous reste plus qu cliquer sur DOWNLOAD YOUR KIT pour gnrer les autres
formats de polices. Quelques instants plus tard, Font Squirrel vous proposera de
tlcharger une archive au format ZIP dans laquelle se trouvent les quatre versions de la
police (voir Figure3.8).
Figure3.8
Le kit contenant les quatre versions de la police a t gnr.
Il ne vous reste plus qu dzipper larchive pour accder aux quatre versions des polices
(voir Figure3.9).
Figure3.9
Les quatre versions
des polices sont
accessibles dans
le kit.
Pour faciliter les choses, le chier stylesheet.css contient le code CSS3 ncessaire
limplmentation de la police:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 18, 2013 */
54 Chapitre 3
@font-face {
font-family: 'littlebirdmedium';
src: url('littlebird-webfont.eot');
src: url('littlebird-webfont.eot?#iefx') format('embedded-opentype'),
url('littlebird-webfont.wof') format('wof'),
url('littlebird-webfont.ttf') format('truetype'),
url('littlebird-webfont.svg#littlebirdmedium') format('svg');
font-weight: normal;
font-style: normal;
}
Le chier littlebird-demo.html, inclus dans le pack, donne galement le code HTML5
ncessaire pour utiliser la police sur tous les navigateurs (voir Figure3.10).
Figure3.10
Dmonstration de lutilisation
de la police. Ici, dans
Internet Explorer11.
Mise en forme des liens hypertexte
Dans le Chapitre 1, vous avez appris dnir des liens hypertexte. Cette section va vous
montrer comment les mettre en forme en utilisant des instructions CSS et jQuery.
Par dfaut, les liens hypertexte apparaissent en caractres bleus souligns lorsquils
nont pas t visits. Ils sont afchs en caractres bordeaux souligns lorsquils ont t
visits.
Vous utiliserez la proprit CSS color pour choisir dautres couleurs:
a {color: valeur;} pour les liens non visits;
a:visited {color: valeur;} pour les liens visits.
lments textuels 55
Le type de soulignement peut galement tre choisi avec la proprit CSS
text-decoration:
a {text-decoration: valeur;} pour les liens non visits;
a:visited {text-decoration: valeur} pour les liens visits.
La proprit text-decoration peut prendre les valeurs suivantes:
none: aucun soulignement.
underline: soulignement par dfaut, au-dessous du lien.
overline: soulignement au-dessus du lien.
overline underline: soulignement double, au-dessous et au-dessus du lien.
line-through: barre transversale sur toute la longueur du lien.
Cet exemple utilise quatre classes pour illustrer les difrentes couleurs et dcorations
que peuvent revtir les liens non visits et les liens visits.
<!DOCTYPE html>
<html>
<head>
<title>Mise en forme des liens hypertexte</title>
<style>
a.type1 {color: red; text-decoration: none; }
a.type1:visited {color: blue; text-decoration: underline; }
a.type2 {color: blue; text-decoration: overline; }
a.type2:visited {color: red; text-decoration: none; }
a.type3 {color: red; text-decoration: overline underline; }
a.type3:visited {color: blue; text-decoration: overline; }
a.type4 {color: blue; text-decoration: line-through; }
a.type4:visited {color: red; text-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.page1.fr" class="type1">Lien vers la page 1</a>
</body>
</html>
Les proprits relatives au texte sont galement utilisables dans un style relatif aux liens
hypertexte. Vous utiliserez en particulier les proprits suivantes:
font-family: police(s) utiliser.
font-size: taille des caractres.
font-style: orientation des caractres (normal, italic ou oblique).
font-weight: graisse de la police.
font-variant: caractres par dfaut (normal) ou petites majuscules (small-caps).
text-transform : casse des caractres (none, capitalize, uppercase ou
lowercase).
56 Chapitre 3
background-color: couleur darrire-plan du lien.
Enn, notez quil est possible dutiliser la pseudo-classe a:hover, associe la proprit
color, pour changer la couleur des liens hypertexte lorsque le pointeur les survole. Ici,
par exemple, le lien est afch en rouge lorsquil est point par la souris:
a:hover {color: red;}
Toutes les proprits abordes dans cette section sont galement accessibles en jQuery,
via la fonction css(). Par exemple, pour que les liens hypertexte soient afchs avec un
soulignement au-dessus du lien lorsquils ont t visits, vous utiliserez le code suivant:
$('a:visited').css('text-decoration', 'overline');
lments textuels 57 lments textuels 57
Exercice 2
Dnissez le code HTML et CSS ncessaire pour obtenir le rsultat prsent la
Figure3.11. Sauvegardez le code HTML dans le chier index.htm et le code css dans le
chier site.css.
Figure 3.11
Le rsultat obtenir.
Pour parvenir ce rsultat, vous devez:
1. Tlcharger la police serveur TTF "On the move" sur le site www.dafont.com (dans la
catgorie Fantaisie/BD, Comic).
2. Convertir cette police aux formats EOT, WOFF et SVG en utilisant le site Font Squirrel.
3. Afecter cette police tout le texte afch dans la page.
4. Dnir les en-tte et pied de page de la page avec deux balises <div>.
5. Insrer une liste puces contenant les entres "A propos", "Nous contacter", "News"
et "Zone membre".
6. Ajouter des liens vers les pages apropos.htm, contact.htm, news.htm et membre.htm.
4
Couleur des lments
Couleur du texte
La couleur du texte est dnie par la proprit CSS color. Voici sa syntaxe:
color: couleur;
La valeur couleur peut tre spcie:
"En dur", cest--dire sous la forme dun nom normalis: red ou olive, par exemple.
laide dun code hexadcimal sur 6 digits : #RRVVBB (o RR, VV et BB sont les
composantes rouge, verte et bleue de la couleur, codes en hexadcimal entre 00
etFF).
laide de la fonction RGB(R,G,B) ou RGBA(R,G,B,A) (voir les sections "Dnir
une couleur par son code RGB" et "Transparence et opacit des lments").
En HTML: <span style="color: silver;">Texte de couleur silver</span>
En CSS: slecteur { color: silver; }
En jQuery: $('slecteur').css('color', 'silver');
Couleur darrire-plan dun lment
La couleur darrire-plan dun lment est dnie par la proprit CSS background-
color. Voici sa syntaxe:
background-color: couleur;
La valeur couleur peut tre spcie:
"En dur", cest--dire sous la forme dun nom normalis : yellow ou skyblue, par
exemple.
laide dun code hexadcimal sur 6 digits : #RRVVBB (o RR, VV et BB sont les
composantes rouge, verte et bleue de la couleur, codes en hexadcimal entre 00
etFF).
laide de la fonction RGB (R,V,B), ou RGBA(R,V,B,A) (voir les sections "Dnir
une couleur par son code RGB" et "Transparence et opacit des lments").
60 Chapitre 4
En HTML: <span style="background-color: #01B0F0;">Texte de couleur
#01B0F0</span>
En CSS: slecteur { background-color: #01B0F0; }
En jQuery: $('slecteur').css('background-color', '#01B0F0');
Dnir une couleur par son code RGB
La fonction RGB(R, G, B) permet de dnir une couleur en fonction de ses composantes
rouge, verte et bleue. Cette fonction sapplique nimporte quelle proprit dont la valeur
est une couleur: color, background-color, border-color,etc.
La fonction RGB() admet trois paramtres:
RGB(red, green, blue)
Ored, green et blue sont les composantes rouge, verte et bleue de la couleur. Ces
trois informations peuvent prendre 256valeurs, codes entre0et255.
Voici deux exemples dutilisation en HTML:
<p style="color:rgb(255, 0, 0);">Ce texte est afich en rouge</p>
<p style="background-color:rgb(255, 255, 0);">et celui-ci a un arrire-plan de
couleur jaune</p>
Bien entendu, cette fonction peut galement tre utilise dans une rgle CSS ou dans
une instruction jQuery. Voici comment pourrait tre rcrit le code prcdent en CSS et
en jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Fonction RGB()</title>
<style style="text/css">
#css1 { color:rgb(255,0,0); }
#css2 { background-color:rgb(255,255,0); }
</style>
</head>
<body>
<p style="color:rgb(255,0,0);">Ce texte est afich en rouge</p>
<p style="background-color:rgb(255,255,0);">et celui-ci a un arrire-plan de
couleur jaune</p>
<p id="css1">Ce texte est afich en rouge</p>
<p id="css2">et celui-ci a un arrire-plan de couleur jaune</p>
<p id="jq1">Ce texte est afich en rouge</p>
<p id="jq2">et celui-ci a un arrire-plan de couleur jaune</p>

<script>
Couleur des lments 61
$(function(){
$('#jq1').css('color', 'rgb(255, 0, 0)');
$('#jq2').css('background-color', 'rgb(255, 255, 0)');
});
</script>
</body>
</html>
Transparence et opacit des lments
La fonction RGBA() rend plus ou moins transparentes les couleurs manipules dans le
code CSS3. Cette fonction sapplique nimporte quelle proprit dont la valeur est une
couleur: color, background-color, border-color,etc.
La fonction RGBA() admet quatre paramtres:
RGBA(red, green, blue, alpha)
O:
red, green et blue sont les composantes rouge, verte et bleue de la couleur. Ces
trois informations peuvent prendre 256valeurs, codes entre0et255.
alpha est le degr dopacit de la couleur. Cette information est un nombre dcimal
cod entre0 (transparent) et 1(opaque).
La fonction RGBA() ne doit pas tre confondue avec la proprit CSS opacity. La
premire agit sur une proprit CSS et la seconde sur un lment HTML. Lexemple
suivant va clarier les choses (voir Figure4.1):
<!DOCTYPE html>
<html>
<head>
<title>Fonction RGB()</title>
div {
height: 200px;
width: 200px;
font-size: 40px;
color: red;
}
#div1 { background-color:rgba(0, 0, 200, 1); }
#div2 { background-color:rgba(0, 0, 200, 0.5); }
#div3 { background-color:rgb(0, 0, 200); }
</style>
</head>
<body>
<div id="div1">Texte dans la balise <div></div>
<div id="div2">Texte dans la balise <div> </div>
<div id="div3" style="opacity: 0.5;">Texte dans la balise <div></div>
62 Chapitre 4
</body>
</html>
Figure 4.1
La fonction RGBA() et la proprit
opacity sont bien difrentes.
Comme vous pouvez le voir, la fonction RGBA() nafecte que la couleur darrire-plan
dans la balise didentiant #div2, alors que la proprit opacity afecte la couleur
darrire-plan et le texte dans la balise #div3.
Gradient linaire
Il est bien souvent ncessaire de raliser un dgrad dans larrire-plan dun conteneur
HTML. Au moment o jcris ces lignes, cette possibilit nest pas implmente de faon
standard sur les navigateurs. Pour dnir un gradient linaire, vous devrez utiliser des
prxes destins chaque navigateur:
-moz-linear-gradient pour les navigateurs Gecko (Mozilla Firefox);
-webkit-gradient pour les navigateurs WebKit (Safari, Chrome);
-ms-gradient pour les navigateurs Internet Explorer.
Voici la syntaxe dtaille de ces trois proprits:
-moz-linear-gradient(p1, c1, c2) no-repeat;
-webkit-gradient(linear, p1, p2, from(c1), to(c2));
-ms-linear-gradient(p1, c1, c2) no-repeat;
O:
p1 reprsente les coordonnes du point de dpart du gradient : sur le navigateur
Mozilla et Internet Explorer, p1peut prendre une ou plusieurs des valeurs suivantes:
top, left, right et/ou down. Sur les navigateurs WebKit, p1 reprsente un
pourcentage horizontal et un pourcentage vertical.
p2 reprsente les coordonnes du point darrive du gradient sur les navigateurs
WebKit. Il est dni par un pourcentage horizontal et un pourcentage vertical de la
zone cible.
c1 est la couleur de dpart du gradient.
c2 est la couleur de n du gradient.
Gradient vertical
Par exemple, pour dnir un gradient vertical de la couleur rouge la couleur bleue, vous
utiliserez les dclarations de styles CSS3 suivantes:
background: -moz-linear-gradient(top, red, yellow);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(red), to(yellow));
background: -ms-linear-gradient(top, red, yellow);
Voici un exemple de code complet. Ici, le gradient vertical est afect une balise <div>
de 200 pixels sur 200 (voir Figure4.2):
<!DOCTYPE html>
<html>
<head>
<title>Gradient linaire</title>
div {
height: 200px;
width: 200px;
background: -moz-linear-gradient(top, red, yellow);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(red),
to(yellow));
background: -ms-linear-gradient(top, red, yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Figure 4.2
Un gradient vertical compatible Internet Explorer,
Chrome et Firefox.
64 Chapitre 4
Gradient horizontal
Pour dnir un gradient horizontal de la couleur rouge la couleur jaune, vous utiliserez
les dclarations de styles CSS3 suivantes:
background: -moz-linear-gradient(left, red, yellow);
background: -webkit-gradient(linear, 0% 0%, 100 % 0%, from(red), to(yellow));
background: -ms-linear-gradient(left, red, yellow);
Voici un exemple de code. Comme dans lexemple prcdent, le gradient vertical est
afect une balise <div> de 200 pixels sur 200 (voir Figure4.3):
<!DOCTYPE html>
<html>
<head>
<title>Gradient linaire horizontal</title>
div {
height: 200px;
width: 200px;
background: -moz-linear-gradient(left, red, yellow);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(red),
to(yellow));
background: -ms-linear-gradient(left, red, yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Figure 4.3
Un gradient horizontal compatible Internet
Explorer, Chrome et Firefox.
Gradient diagonal
Pour dnir un gradient diagonal de la couleur rouge la couleur jaune, il suft de
changer les coordonnes du point de dpart (Gecko, Internet Explorer) ou des points
dedpart et darrive (WebKit):
background: -moz-linear-gradient(top left, red, yellow);
background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(red), to(yellow));
background: -ms-linear-gradient(top left, red, yellow);
La Figure4.4 reprsente le rsultat obtenu dans Internet Explorer 11.
Figure4.4
Un gradient diagonal du coin suprieur gauche
au coin infrieur droit.
Gradient linaire multiple
Dans la section prcdente, vous avez appris dnir un gradient linaire compos de deux
couleurs. Il est possible de lui adjoindre des couleurs intermdiaires, en ajoutant quelques
paramtres dans les proprits -webkit-gradient, -moz-linear-gradient et
-ms-linear-gradient.
Pour les navigateurs Gecko et Internet Explorer, vous utiliserez la syntaxe suivante:
-moz-linear-gradient(p1, c1 p1, c2 p2, , cN);
-ms-linear-gradient(p1, c1 p1, c2 p2, , cN);
O:
Les pi sont les coordonnes des difrentes transitions de couleurs, exprimes en
pourcentages.
Les ci sont les difrentes couleurs du gradient.
Pour les navigateurs WebKit, vous utiliserez la syntaxe suivante:
-webkit-gradient(linear, p1, p2, from(c1), color-stop(v2, c2), color-stop(v3,
c3), , to(cN));
O:
p1 et p2 sont les coordonnes des points de dpart et darrive du gradient, exprimes
en pourcentages.
66 Chapitre 4
Les ci sont les difrentes couleurs du gradient.
Les vi sont les positions des difrentes transitions de couleurs, exprimes dans un
nombre dcimal compris entre0et1.
titre dexemple, nous allons dnir un gradient linaire horizontal du rouge au blanc en
passant par le bleu et le jaune. Les zones attribues chaque couleur auront la mme
taille. Pour arriver ce rsultat, il est ncessaire de dnir deux points intermdiaires
33% et 66% de la zone cible. Voici le code utilis (voir Figure4.5):
<!DOCTYPE html>
<html>
<head>
<title>Gradient linaire horizontal</title>
div {
height: 200px;
width: 400px;
background: -moz-linear-gradient(left, red 0%, white 33%, blue 66%,
yellow);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(red), color-
stop(0.33, white), color-stop(.66, blue), to (yellow));
background: -ms-linear-gradient(left, red 0%, white 33%, blue 66%,
yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Figure4.5
Plusieurs transitions ont t
dnies dans ce gradient
horizontal.
Pour crer vos gradients plus aisment, vous pouvez vous rendre sur la page
http://gradients.glrzad.com/, o quelques rglages lmentaires permettent dobtenir
le code CSS3 correspondant (voir Figure4.6).
Figure4.6
Un gnrateur de gradients en ligne.
Gradient radial
Vous savez maintenant afecter un gradient linaire un conteneur quelconque. Cette
section va vous montrer comment crer des gradients radiaux, cest--dire des dgrads
de couleurs qui rayonnent depuis leur origine en dcrivant un cercle ou une ellipse. Les
proprits utiliser sont les suivantes:
-webkit-gradient(radial, ) sur les navigateurs WebKit (Safari, Chrome);
-moz-radial-gradient sur les navigateurs Gecko (Mozilla Firefox);
-ms-radial-gradient sur les navigateurs Internet Explorer 10 et suprieur.
Gradient radial deux couleurs
Voici la syntaxe utiliser pour dnir un gradient radial comportant une couleur de dpart
et une couleur darrive.
Pour les navigateurs WebKit:
background: -webkit-gradient(radial, p1, r1, p2, r2, from(c1), to(c2));
O:
p1 reprsente les coordonnes du point intrieur du gradient.
r1 est le rayon intrieur du gradient.
p2 reprsente les coordonnes du point extrieur du gradient.
r2 est le rayon extrieur du gradient.
c1 est la couleur intrieure du gradient.
c2 est la couleur extrieure du gradient.
Pour les navigateurs Gecko et Internet Explorer 10 et suprieur:
background: -moz-radial-gradient(p1, forme taille, c1, c2);
background: -ms-radial-gradient(p1, forme taille, c1, c2);
68 Chapitre 4
O:
p1 reprsente les coordonnes du point intrieur du gradient.
forme reprsente la forme du gradient: circle (cercle) ou ellipse (ellipse).
taille est la taille du gradient. Ce paramtre peut prendre lune des valeurs
suivantes:
closest-side (ou contain) pour que le gradient occupe toute la taille du
conteneur;
closest-corner pour que le gradient occupe tout lespace disponible jusquau
coin le plus proche du conteneur;
farthest-side (ou cover) pour que le gradient occupe tout lespace disponible
jusquau coin le plus loign du conteneur.
c1 est la couleur intrieure du gradient.
c2 est la couleur extrieure du gradient.
Par exemple, pour dnir un gradient radial du rouge au jaune, vous utiliserez les
dclarations de styles CSS3 suivantes:
background: -webkit-gradient(radial, 50% 0%, 20, 50% 100%, 40, from(red),
to(yellow));
background: -moz-radial-gradient(50% 50%, closest-side, red, yellow);
background: -ms-radial-gradient(50% 50%, circle closest-side, red, yellow);
Voici un exemple de code. Le gradient radial est afect une balise <div> de 200pixels
sur 200 (voir Figure4.7):
<!DOCTYPE html>
<html>
<head>
<title>Gradient radial</title>
div {
height: 200px;
width: 200px;
to(yellow));
background: -moz-radial-gradient(50% 50%, closest-side, red, yellow);
background: -ms-radial-gradient(50% 50%, circle closest-side, red,
yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Figure4.7
Un gradient radial du rouge au jaune.
Gradient radial restreint
Si le gradient ne doit pas occuper la totalit du conteneur, deux techniques doivent tre
utilises, en fonction du navigateur vis.
Pour les navigateurs WebKit, il suft de dnir un rayon extrieur de plus petite taille dans
le code CSS3. Ici, 50pixels au lieu de150:
to(yellow));
Pour les navigateurs Gecko et Internet Explorer 10 et suprieur, il est ncessaire dajouter
deux pourcentages lors de la dnition des couleurs. Ici, le rouge constitue le point de
dpart du gradient (0%) et le jaune sarrte 30% de la taille maximale du gradient (30%
de farthest-side):
background: -moz-radial-gradient(50% 50%, circle farthest-side, red 0%, yellow
30%);
background: -ms-radial-gradient(50% 50%, circle farthest-side, red 0%, yellow
30%);
Voici un exemple de code (voir Figure4.8):
<!DOCTYPE html>
<html>
<head>
<title>Gradient radial restreint </title>
div {
height: 200px;
width: 200px;
background: -moz-radial-gradient(50% 50%, circle farthest-side, red 0%,
yellow 30%);
to(yellow));
70 Chapitre 4
background: -ms-radial-gradient(50% 50%, circle farthest-side, red 0%,
yellow 30%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Figure4.8
Le gradient noccupe pas toute la surface du
conteneur.
Gradient radial multiple
Tout comme pour les gradients linaires, il est possible de dnir plusieurs couleurs dans
un gradient radial. La syntaxe utiliser est trs difrente selon les navigateurs viss.
Pour les navigateurs WebKit, un ou plusieurs color-stop doivent tre dnis entre la
couleur de dpart (from) et la couleur darrive (to). Ici, par exemple, le gradient va du
rouge au noir en passant par le jaune et le bleu:
color-stop(.25,yellow), color-stop(.50, blue), to(blue));
Pour les navigateurs Gecko et Internet Explorer 10 et suprieur, la syntaxe est beaucoup
plus simple: il suft de prciser les difrentes couleurs comme paramtres de la proprit
-moz-radial-gradient et -ms-radial-gradient. Ici, le gradient va du rouge au
noir en passant par le jaune et le bleu:
background: -moz-radial-gradient(circle, red, yellow, blue, black);
background: -ms-radial-gradient(circle, red, yellow, blue, black);
Voici le code mis en uvre:
<!DOCTYPE html>
<html>
<head>
<title>Gradient radial multiple </title>
div {
height: 200px;
width: 200px;
color-stop(.25,yellow), color-stop(.50, blue), to(blue));
background: -moz-radial-gradient(circle, red, yellow, blue, black);
background: -ms-radial-gradient(circle, red, yellow, blue, black);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Figure4.9
Un gradient radial multiple.
Exercice 3
Modiez le code de lexercice prcdent pour insrer trois liens dans le bas de page,
comme dans la Figure 4.10. Utilisez des instructions jQuery pour modier la couleur
darrire-plan de la balise <body> comme ceci:
Clic sur le lien Efet
Uni Couleur unie white
Horizontal Gradient linaire horizontal: de la couleur red ( gauche) la couleur yellow (
droite)
Vertical Gradient linaire vertical, de la couleur red (en haut) la couleur yellow (en bas)
Figure 4.10
Le rsultat atteindre.
Ici, le lien Vertical a t
cliqu.
Pour arriver ce rsultat, vous devez utiliser deux techniques qui nont pas encore t
dcrites: lalignement CSS foat et lexcution de code jQuery lorsquun lment HTML
est cliqu.
Dans la Figure 4.10, les mots Uni, Horizontal et Vertical sont aligns gauche et le
copyright est align droite. Pour arriver ce rsultat, vous encapsulerez le copyright
dans une balise <span> et vous initialiserez right sa proprit CSS foat.
Le code jQuery mettre en uvre pour ragir au clic sur un lment didentiant
#unElement est le suivant:
$('#unElement').click(function() {
// Une ou plusieurs instructions jQuery
});
Pour linstant, contentez-vous dutiliser ce code. Il vous sera expliqu en dtail dans le
Chapitre10.
5
Images
Ce chapitre est trs important. Il va vous apprendre insrer des images dans toutes
sortes de conteneurs (le corps du document, une division, un tableau, etc.), mais
galement efectuer des traitements CSS et jQuery sur les images. son issue, vous
saurez entre autres comment empiler plusieurs images et comment les animer pour
raliser un diaporama sur une page Web.
Insrer une image dans une page
Vous utiliserez la balise <img> pour insrer une image GIF, JPG ou PNG dans une page.
Voici sa syntaxe minimaliste:
<img src="nom" />
O nom est le chemin complet de limage. Par exemple, img/monimage.gif pour une
image locale situe dans le dossier enfant img, ou encore http://nom-site/nom-
dossier/nom-image.jpg pour limage nom-image.jpg accessible dans le dossier
nom-dossier de la page http://nom-site.
Plusieurs autres attributs optionnels peuvent tre utiliss. Ils sont rsums dans le tableau
suivant.
Attribut Signication Valeurs possibles Exemple
alt texte afch si
limage nest pas
accessible
un texte quelconque <img src="images/im1.jpg"
alt="texte de remplacement">
border bordure autour de
limage
0 (pas de bordure) ou
1 (bordure)
<img src="images/im1.jpg"
border="1">
class nom de la classe
associe limage
un nom quelconque <img src="images/im1.jpg"
class="type1">
height hauteur de limage
en pixels
une valeur numrique
quelconque
height="300">
id nom de limage un identiant
quelconque
id="cygnes">
title info-bulle de limage un texte quelconque <img src="images/im1.jpg"
title="Un groupe de cygnes
sur le lac de Grigny">
76 Chapitre 5
width hauteur de limage
en pixels
une valeur numrique
quelconque
width="200">
Une image en arrire-plan dune page
Pour insrer une image en arrire-plan dune page Web, vous pouvez utiliser une
approche HTML ou CSS.
En HTML, il vous suft dagir sur la balise <html>. Ici, limage darrire-plan a pour nom
"paysage.jpg" et se trouve dans le mme dossier que la page:
<html style="background: url(paysage.jpg);">
Si limage est plus petite que la page, elle est rpte autant de fois que ncessaire
pour couvrir la totalit de la page. Ce comportement est souhaitable si limage est une
trame de fond. En revanche, il est dsastreux sil sagit dune photo. Pour rsoudre ce
problme, vous pouvez centrer limage en interdisant son redimensionnement. Voici le
code utiliser:
<html style="background: url(paysage.jpg) no-repeat center fxed;">
Lapproche CSS va nous permettre daller plus loin en redimensionnant limage de faon
quelle occupe la totalit de la fentre. Dans un premier temps, voici le code ncessaire
pour afecter une image darrire-plan la page:
html {
background: url(paysage.jpg);
}
Si vous voulez que limage soit centre et quelle napparaisse quune seule fois, le code
CSS devient:
html {
background: url(paysage.jpg) no-repeat center fxed;
}
Enn, si vous voulez que limage soit automatiquement redimensionne pour occuper la
totalit de la fentre, le code utiliser est le suivant:
html {
background: url(paysage.jpg) no-repeat center fxed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
Images 77
Une image en arrire-plan
dun conteneur
Vous pouvez insrer une image darrire-plan dans un conteneur quelconque (une balise
<div>, une cellule de tableau <td>, un paragraphe <p>, etc.). Pour cela, dnissez une
classe qui initialise larrire-plan de llment avec la proprit background, puis faites
rfrence cette classe dans les lments concerns.
Dans le code suivant, la classe bgimage est successivement afecte aux balises <p>,
<td>, <div>, <span> et <a>. Le rsultat est reprsent la Figure5.1.
<!DOCTYPE html>
<html>
<head>
<title>Une image en arrire-plan dun conteneur</title>
.bgimage { background: url(paysage.jpg); }
</style>
</head>
</body>
<p class="bgimage">Texte dans un paragraphe</p>
<table border>
<tr>
<td class="bgimage">Texte dans la premire cellule</td>
<td>Texte dans la deuxime cellule</td>
</tr>
</table>
<br />
<div class="bgimage">Texte dans le div</div>
<br />
<span class="bgimage">Texte dans un span</span>
<br /><br />
<a href="http://www.bing.com" class="bgimage">Cliquez ici pour accder au
moteur de recherche Bing</a>
</body>
</html>
78 Chapitre 5
Figure 5.1
De nombreux lments HTML
peuvent utiliser une image
darrire-plan.
Utiliser une image comme lien
hypermdia
Pour quune image devienne "cliquable" et joue ainsi le rle de lien hypermdia, il suft
dinsrer sa balise <img> dans une balise <a>:
<a href="une-page.htm"><img src="une-image.jpg"></a>
Par dfaut, un cadre entoure les images utilises comme liens hypermdia. Pour
supprimer ce cadre, afectez la valeur 0 lattribut border de limage:
<a href="une-page.htm"><img src="une-image.jpg" border="0"></a>
Lgender une image
Dans les livres et les magazines, les illustrations et les graphiques sont souvent reprs
par une lgende. Pour lgender une image en HTML5, vous utiliserez les balises <fgure>
et <fgcaption>. Voici un exemple de code et son rsultat reprsent la Figure5.2:
<!DOCTYPE html>
<html>
<head>
<title>Lgendage dimages</title>
</head>
<body>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<fgure>
<img src="petitpaysage.jpg">
Images 79
<fgcaption>Un paysage hivernal.</fgcaption>
</fgure>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</body>
</html>
Attention
La balise <fgcaption> doit tre dnie comme premier ou dernier enfant de la balise
<fgure>.
Figure 5.2
Limage et sa lgende sont
automatiquement indentes par
rapport au texte avoisinant.
Centrer une image dans un conteneur
Pour centrer une image dans un conteneur <div>, vous utiliserez plusieurs proprits
CSS.
Le centrage horizontal se fait avec la proprit text-align. En efet, la balise <img>
est de type inline et se comporte comme un simple texte. Il est donc possible de la
centrer avec la proprit text-align.
Pour centrer verticalement limage dans le <div>, deux tapes sont ncessaires. Dans
un premier temps, on modie le comportement du <div> en lui confrant lapparence et
les proprits dune cellule de tableau. Pour cela, on afecte la valeur table-cell sa
proprit display. Dans un second temps, on afecte la valeur middle sa proprit
vertical-align.
80 Chapitre 5
Voici un exemple de code et son efet, reprsent la Figure5.3.
<!DOCTYPE html>
<html>
<head>
<title>Aligner une image dans un conteneur</title>
#lediv {
background: #ACE8E0;
width: 500px;
height: 300px;
border: 1px solid black;
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="lediv">
<img src="petitpaysage.jpg">
</div>
</body>
</html>
Figure 5.3
Limage est bien centre
dans le conteneur <div>.
Images 81
Modier les caractristiques dune
image lorsquelle est survole
Il est possible de modier les caractristiques dune image (taille, contour, transparence,
etc.) lorsquelle est survole par le pointeur de la souris. Pour cela, vous pouvez utiliser
une approche CSS ou jQuery.
En CSS, le pseudo-slecteur img:hover permet de cibler limage lorsquelle est survole
par le pointeur. Il suft alors de modier une ou plusieurs proprits pour obtenir lefet
souhait. Vous pouvez, par exemple, agir sur les proprits suivantes:
height et width: largeur et hauteur de limage.
opacity: opacit de limage.
top et left: position de limage si elle est positionne de faon absolue.
border: bordure de limage.
titre dexemple, voici comment modier les dimensions dune image lorsquelle est
survole par le pointeur de la souris:
<!DOCTYPE html>
<html>
<head>
<title>Agrandissement dune image au survol</title>
#paysage:hover { width: 500px; }
</style>
</head>
<body>
<img src="paysage.jpg" id="paysage" width="250">
</body>
</html>
Lapproche jQuery est tout aussi simple. Voici un exemple de code dans lequel la position
de limage est modie au survol de la souris:
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" />
<title>Agrandissement dune image au survol</title>
#paysage {
position: absolute;
top: 20px;
left: 120px;
}
</style>
</head>
<body>
82 Chapitre 5
<img src="petitpaysage.jpg" id="paysage">
<script>
$(function(){
$('#paysage').mouseover(function(){
$('#paysage').css('top', '100px');
});
$('#paysage').mouseout(function(){
});
});
</script>
</body>
</html>
Ici, nous appliquons les fonctions mouseover() et mouseout() la balise didentiant
#paysage. Ainsi, nous ciblons limage (respectivement) survole par la souris et non
survole par la souris. Les instructions utilises sont trs simples. Dans le premier cas, la
proprit CSS top est initialise 100px:
Dans le deuxime cas, elle est initialise 20px:
Empiler des images
La proprit z-index permet de spcier la position relative de plusieurs lments
empils. Plus z-index est lev, plus llment se trouve en avant-plan. Inversement,
plus z-index est faible, plus llment se trouve en arrire-plan.
Dans cet exemple, nous superposons quatre images en jouant sur leur z-index.
Lorsquune image est pointe, son z-index est initialis 100 pour la faire passer en
avant-plan (voir Figure5.4).
<!DOCTYPE html>
<html>
<head>
<title>Empilement dimages avec z-index</title>
img { position: absolute; }
#chien { top: 20px; left: 20px; z-index: 1; }
#chat { top: 50px; left: 50px; z-index: 2; }
#cheval { top: 80px; left: 80px; z-index: 3; }
#girafe { top: 110px; left: 110px; z-index: 4; }
#chien:hover {z-index: 100; }
#chat:hover {z-index: 100; }
#cheval:hover {z-index: 100; }
#girafe:hover {z-index: 100; }
</style>
</head>
Images 83
<body>
<img src="chien250.jpg" id="chien">
<img src="chat250.jpg" id="chat">
<img src="cheval250.jpg" id="cheval">
<img src="girafe250.jpg" id="girafe">
</body>
</html>
Figure 5.4
Limage pointe passe en avant-plan.
Prchargement dimages
Si vous utilisez la pseudo-classe :hover pour afcher une image, cette dernire sera
charge au moment o le pointeur sera plac sur le lien. En fonction du poids de limage
et de la nature de la connexion Internet, le dlai ncessaire au chargement de limage
peut savrer gnant. Pour rsoudre ce problme, vous prchargerez limage en forant
la valeur none sa proprit display.
<body>
...
<img src="monimage.jpg" style="display: none;" />
...
</body>
Limage est prcharge lors de louverture de la page. Son afchage sera donc immdiat
lutilisation de la pseudo-classe:hover.
84 Chapitre 5
Attention
La ou les images prcharges doivent tre spcies aussi bas que possible dans le
code HTML. En efet, lexcution du code HTML tant squentielle, lafchage de la page
sera retard par les instructions de prchargement. Mieux vaut donc repousser ces
instructions vers la n du listing.
Images ractives
Les images ractives comportent une ou plusieurs zones cliquables. Lorsque lutilisateur
clique sur lune dentre elles, un traitement particulier est efectu ou une page Web
annexe est ouverte. Il est possible dutiliser le langage CSS pour rendre une image
ractive. Il suft pour cela de dnir autant de balises <a> que de zones ractives et de
dimensionner ces balises en consquence par lintermdiaire dun ou de plusieurs styles.
Dans cet exemple, nous allons dnir trois zones ractives sur les trois couleurs du
drapeau franais (voir Figure 5.5). Le dcoupage tant lmentaire, un seul style sera
ncessaire pour mettre en place les trois zones ractives.
<!DOCTYPE html>
<html>
<head>
<title>Empilement dimages avec z-index</title>
#imagemap {
background: url(drapeau_francais.jpg) top left no-repeat;
width:460px;
height: 302px;
}
.map {
foat: left;
width: 149px;
height: 300px;
border: 1px dashed #aaa;
}
</style>
</head>
<body>
<div id="imagemap">
<a title="bleu" class="map"></a>
<a title="blanc" class="map"></a>
<a title="rouge" class="map"></a>
</div>
</body>
</html>
La partie HTML du code met en place un <div> didenticateur imagemap. Cette balise
contient trois liens ctifs de classe map pour lesquels lattribut title est renseign. Ainsi,
Images 85
une info-bulle contenant le texte de lattribut title sera afche lorsque le pointeur se
trouvera au-dessus de chacune des zones ractives.
La partie CSS du code contient deux styles.
Le slecteur didenticateur #imagemap dnit les caractristiques du <div>
imagemap: arrire-plan (background) et dimensions (width et height).
Le slecteur de classe .map dnit les caractristiques des zones cliquables: afchage
ottant (foat: left;), taille (width et height) et bordures (border).
Figure 5.5
La troisime
zone ractive
est pointe, ce
qui provoque
lafchage de
lattribut titre
de la balise <a>
correspondante.
Album photos
La ralisation dun album photos HTML/CSS/jQuery est intressante plus dun gard.
Elle repose sur les actions suivantes:
prchargement des images de lalbum;
afchage de la premire image;
dnition de liens hypertexte ctifs grs en jQuery.
Cet album est compos de cinq photos de mme taille. Ici, 600 374 pixels (voir
Figure5.6). Voici le code:
<!DOCTYPE html>
<html>
<head>
a { padding-right: 20px; }
</style>
</head>
86 Chapitre 5
<body>
Choisissez limage aficher :
<a id="i1" href=#>01</a>
<a id="i2" href=#>02</a>
<a id="i3" href=#>03</a>
<a id="i4" href=#>04</a>
<a id="i5" href=#>05</a>
<br /><br /><img id= "image" src="i1.jpg">

<img src="i2.jpg" style="display: none;" />
<script>
$(function(){
$('#i1').click(function(){
$('#image').attr('src','i1.jpg');
});
});
});
});
});
});
</script>
</body>
</html>
La partie HTML du code afche le texte "Choisissez limage afcher" suivi des liens
permettant dafcher les cinq images. Observez la syntaxe utilise. Par exemple pour le
premier lien:
<a id="i1" href=#>01</a>
Lattribut href ne pointe vers aucune image. Ce qui laisse supposer que le traitement du
clic se fera en CSS ou en jQuery. Le code HTML se poursuit par lafchage de la premire
image et le prchargement des quatre autres.
Le code CSS est trs simple. Il se limite dnir un padding droite de 20pixels sur tous
les liens hypertexte an de les espacer:
a { padding-right: 20px; }
Images 87
Figure 5.6
Un album photos
lmentaire en
HTML5/CSS3/jQuery.
Les dernires instructions sont crites en jQuery. Elles permettent de ragir aux clics de
lutilisateur sur les cinq liens hypertexte. Examinons le code relatif au clic sur le premier
lien:
});
Lorsque llment didentiant #i1 (cest--dire le premier lien hypertexte) est cliqu,
llment didentiant #image (cest--dire limage afche dans le document) voit son
attribut src initialis i1.jpg, ce qui provoque lafchage de limage i1.jpg.
Les quatre blocs dinstructions qui suivent sont tout fait comparables, ceci prs quils
capturent les clics sur les liens #i2 #i5 et afchent les images i2.jpg i5.jpg.
Exercice 4
Vous allez enrichir le code HTML et CSS de lexercice3.
Rendez-vous sur le site www.backgroundcity.com, tlchargez une texture votre
convenance et permettez lutilisateur de lutiliser en arrire-plan de la page en ajoutant
le lien Texture dans le bas de page.
Insrez le logo HTML5/CSS3/jQuery et modiez lemplacement du titre pour obtenir le
rsultat reprsent la Figure5.7. Le logo otte gauche et est dcal de 25pixels par
rapport au bord suprieur de son conteneur. Quant au titre, il otte droite et est dcal
de 100pixels par rapport au bord suprieur de son conteneur.
Figure 5.7
Len-tte a t modi
et un lien Texture a t
ajout dans le bas de
page.
6
Ombrages et arrondis
Le CSS3 apporte de nombreuses amliorations dans la mise en forme des lments
HTML. En particulier en ce qui concerne lombrage et les coins arrondis. Ce chapitre va
vous montrer comment ombrer des lments textuels et non textuels et comment ajouter
des ombres sur des lments textuels et non textuels.
Ombrer des objets non textuels
Lombrage des lments HTML5 non textuels se fait via la proprit CSS3 box-shadow:
box-shadow: ofset-horiz ofset-vert rayon-ombrage couleur;
O:
ofset-horiz est le dcalage horizontal de lombrage en pixels.
ofset-vert est le dcalage vertical de lombrage en pixels.
rayon-ombrage est le rayon de lombrage en pixels.
couleur est la couleur de lombrage.
Cette proprit prsente deux avantages: elle est compatible avec la quasi-totalit des
navigateurs actuels (y compris Internet Explorer) et elle sapplique tous les lments
HTML5.
titre dexemple, dans le code suivant, nous appliquons la proprit box-shadow une
balise<div>.
<!DOCTYPE html>
<html>
<head>
<title>Ombrage CSS3</title>
<style>
.ombrageCSS3 {
width: 300px;
height: 300px;
background: yellow;
font-size: 400%;
box-shadow: 10px 10px 5px grey;
}
</style>
90 Chapitre 6
</head>
<body>
<div class="ombrageCSS3">
Texte lintrieur de la balise <div>
</div>
</body>
</html>
Les instructions CSS dnissent les dimensions, la couleur darrire-plan, la taille des
caractres et les proprits de lombrage. La Figure6.1 prsente le rsultat de ce code
dans Internet Explorer 11.
Figure6.1
Lombrage a une
paisseur de 10pixels et
un rayon de 5pixels.
Pour que lombrage soit plus difus, il suft daugmenter son rayon. La Figure 6.2
reprsente la mme page, mais, ici, le rayon a t x 25 pixels dans la proprit
box-shadow:
box-shadow: 10px 10px 25px grey;
Figure6.2
Ombrage CSS3 difus
dune balise<div>.
Ombrages et arrondis 91
En inversant le signe des deux premiers paramtres de la proprit box-shadow, on
peut changer la position de la bordure. Par exemple, avec la dclaration de style suivante,
la bordure apparat comme la Figure6.3:
box-shadow: -10px -10px 25px grey;
Figure6.3
La position de lombrage
a t inverse.
La proprit box-shadow peut galement tre applique une image. Il suft pour cela
de dnir la classe ombreimage et de lafecter la balise <img> (voir Figure6.4).
.ombreimage { box-shadow: 10px 10px 25px grey; }
<img class="ombreimage" src="paysage.jpg" width="400px" />
Figure6.4
Lombrage est
appliqu
une image.
92 Chapitre 6
Ombrer des objets textuels
Lombrage CSS3 dlments textuels se fait via la proprit text-shadow:
text-shadow: ofset-horiz ofset-vert paisseur couleur;
O:
ofset-horiz est le dcalage horizontal de lombrage en pixels.
ofset-vert est le dcalage vertical de lombrage en pixels.
paisseur est lpaisseur de lombrage en pixels.
couleur est la couleur de lombrage.
Voici un exemple dutilisation de cette proprit. Le rsultat de ce code est reprsent
la Figure6.5.
<!DOCTYPE html>
<html>
<head>
<title>Ombrage de texte en CSS3</title>
<style>
.otexte {
font-family: magneto;
font-size: 60px;
text-shadow: 4px 4px 4px grey;
}
</style>
</head>
<body>
<p class="otexte">Ce texte est ombr</p>
</body>
</html>
Figure6.5
Ombrage de
texte CSS3.
Arrondir les coins dun lment
de type block
Pour dnir des arrondis sur un lment de type block, vous utiliserez la proprit
CSS3 border-radius. Avec certains navigateurs, il nest pas ncessaire dutiliser des
prxes:
border-radius: r1 r2 r3 r4;
O r1, r2, r3 et r4 reprsentent respectivement le rayon des coins suprieur gauche,
suprieur droit, infrieur droit et infrieur gauche de llment.
Si un seul rayon est spci, il sapplique aux quatre coins de llment.
Cet exemple dnit une bordure noire paisse de 1pixel autour dune balise <div> et
arrondit ses quatre angles avec un rayon de courbure de 20pixels (voir Figure6.6):
<!DOCTYPE html>
<html>
<head>
<title>Une bote coins arrondis en CSS3</title>
<style>
.arrondi {
border-radius: 20px;
}
</style>
</head>
<body>
<div class="arrondi">Bote bords arrondis en CSS3</div>
</body>
</html>
Figure6.6
Un arrondi uniforme de 20 pixels.
Comme vous pouvez le voir la Figure 6.6, larrondi stend sur toute la largeur de
la page, car la balise <div> na pas t dimensionne. Il est possible de limiter ses
94 Chapitre 6
dimensions avec les proprits width et height. Dautre part, le texte lintrieur de
la balise <div> est un peu trop coll sur le bord gauche. Pour rsoudre ce problme,
il suft de dnir un padding. Pour naliser la mise en forme, vous pouvez galement
modier lalignement du texte avec la proprit text-align et colorer larrire-plan
avec la proprit background. Voici le code CSS3 remani. Son rsultat est reprsent
la Figure6.7:
.arrondi {
padding: 10px;
width: 250px;
height: 200px;
background:#ADCF4F;
text-align: center;
}
Figure6.7
Un arrondi CSS3 amlior.
Larrire-plan peut galement tre une image, rpte si ncessaire pour couvrir toute
la surface de llment. Ici, par exemple, nous avons pris limage fond.gif et nous lavons
rpte pour couvrir toute la surface de la balise <div>. La taille des caractres a
galement t modie, ainsi que la hauteur de la balise <div> et lpaisseur de la
bordure. Le rsultat de ce nouveau code CSS est reprsent la Figure6.8.
.arrondi
{
padding: 10px;
width: 250px;
height: 300px;
font-size: 60px;
background: url("fond.gif") repeat;
text-align: center;
}
Figure6.8
Un arrondi avec image darrire-
plan.
Dans ce dernier exemple, nous appliquons des arrondis difrents sur un lment div
pour lui donner une forme un peu plus volue (voir Figure6.9).
<!DOCTYPE html>
<html>
<head>
<title>Une bote coins arrondis en CSS3</title>
<style>
.arrondi {
border-radius: 50px 50px 200px 50px;
width: 350px;
height: 150px;
padding-top: 50px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="arrondi">
Bote bords arrondis en CSS3
</body>
</html>
96 Chapitre 6
Figure6.9
Les coins nont pas tous le mme
rayon.
Ombrages et arrondis 97 Ombrages et arrondis 97
Exercice 5
Vous allez enrichir le code CSS de lexercice 4. La Figure6.10 illustre le rsultat obtenir.
Ont t ajouts:
Sur les lments #entete, #corps et #basdepage : une ombre grise dcale de
5pixels droite et vers le bas, et de rayon 5 pixels.
Sur les lments #entete, #corps et #basdepage: un arrondi uniforme de rayon
15 pixels.
Sur llment #titre: une ombre grise dcale de 4 pixels droite et vers le bas, et
de rayon 4 pixels.
Figure 6.10
La page a une tout
autre allure avec
les arrondis et les
ombres.
7
Menus
Pour accder aux difrentes pages qui composent un site Web, le plus simple consiste
utiliser un menu. Ce chapitre va vous montrer comment crer un menu vertical ottant,
un menu horizontal, et comment ragir aux actions de lutilisateur dans le menu via du
code CSS et jQuery.
Menu vertical ottant en HTML5
La balise <menu> est apparue dans le langage HTML5. Cette balise fait exactement ce
que son nom suggre, cest--dire dnir un menu dans une page Web, mais elle nest
pour linstant pas implmente par les navigateurs actuels. Nous nous orienterons donc
vers une solution alternative compose de code HTML et CSS.
Pour crer un menu vertical, nous utiliserons une liste puces <ul>, lgrement modie
par un style CSS.
<!DOCTYPE html>
<html>
<head>
<title>Menu vertical lmentaire</title>
<style>
#vertical {
width: 100px;
foat: right;
}
li { list-style-type: none; }
#corps { text-align: justify; }
</style>
</head>
<body>
<ul id="vertical">
<li><a href="page1.htm">Page 1</a></li>
</ul>
100 Chapitre 7
<p id="corps">Iam summus Pater architectus Deus hanc quam videmus mundanam
domum, divinitatis templum augustissimum, archanae legibus sapientiae
fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos
aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes
omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex
esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret,
magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6
testantur) absolutis, de producendo homine postremo cogitavit. Verum nec
erat in archetypis unde novam sobolem efingeret, nec in thesauris quod novo
flio hereditarium largiretur, nec in subselliis totius orbis, ubi universi
contemplator iste sederet.</p>
</body>
</html>
Le style #vertical dnit la largeur du menu laide de la proprit width et le
positionne comme ottant, sur la partie droite de la page, an que le reste de la page
puisse senrouler autour (voir Figure7.1).
Le deuxime style supprime la puce des balises <li> laide de la proprit
list-style-type.
Enn, le style #corps dnit un alignement justi sur le texte afch dans la page.
Le corps du document met en place le menu via la balise <ul>. Il afche ensuite un texte
issu du site http://fr.lipsum.com/ pour matrialiser le corps de la page.
Figure7.1
Un menu vertical
lmentaire compos de
cinq liens hypertexte.
Menu horizontal en HTML5
Pour crer un menu horizontal, le plus simple consiste utiliser une liste ul et afecter la
valeur inline-block la proprit display des lments li de cette liste. Ainsi, ces
derniers ne seront pas afchs verticalement, en tant que blocs, mais horizontalement,
sur une mme ligne (voir Figure7.2).
<!DOCTYPE html>
<html>
<head>
<title>Menu horizontal lmentaire</title>
<style>
Menus 101
#horizontal { list-style: none; }
#horizontal li {
display: inline-block;
padding-left: 2em;
}
</style>
</head>
<body>
<ul id="horizontal">
<li><a href= "page5.htm">Page 5</a></li>
</ul>
<p id="corps">Iam summus Pater architectus Deus hanc quam videmus mundanam
domum, divinitatis templum augustissimum, archanae legibus sapientiae
fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos
aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes
omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex
testantur) absolutis, de producendo homine postremo cogitavit. Verum necerat
in archetypis unde novam sobolem efingeret, nec in thesauris quod novo flio
hereditarium largiretur, nec insubselliis totius orbis, ubi universi
</body>
</html>
Les puces de la liste sont supprimes en afectant la valeur none la proprit
list-style de la liste <ul>:
Le code CSS se poursuit par la dnition des caractristiques des lments de la liste.
Le simple fait dinitialiser la proprit display inline-block provoque lafchage
horizontal des lments de la liste <ul>. Lespacement entre les entres du menu est
x avec la proprit padding-left.
padding-left: 2em;
Enn, le texte contenu dans le document est justi en afectant la valeur justify la
proprit text-align de la balise didentiant #corps:
Le corps du document consiste en une liste <ul>, parent de cinq lments li qui
constituent les entres du menu et un peu de texte encapsul par une balise <p>.
102 Chapitre 7
Figure7.2
Les cinq entres de
menu sont afches
horizontalement.
Info
Si vous aviez attribu un comportement inline aux lments li, le rsultat aurait t
identique. Cependant, il est prfrable dopter pour un comportement inline-block,
car ainsi, vous pourrez, le cas chant, xer leurs dimensions (width et height) et/ou
leurs marges (margin).
Amlioration du menu avec quelques
proprits CSS
Quil soit vertical ou horizontal, il est possible damliorer le comportement dun menu en
dnissant quelques instructions CSS.
Pour mettre en vidence le menu point par la souris, vous pouvez changer sa couleur
darrire-plan en utilisant la pseudo-classe :hover comme dclencheur. Par exemple,
vous pourriez afecter une couleur darrire-plan yellow lentre de menu pointe par
la souris en dnissant la rgle de style suivante:
li:hover { background: yellow; }
Les liens utiliss dans un menu sont par dfaut souligns. Il est trs simple de supprimer
le soulignement en afectant la valeur none la proprit text-decoration des
balises <a>:
a { text-decoration: none; }
Vous pouvez mettre en vidence chaque entre de menu en lentourant dune bordure.
Par exemple, pour afcher une bordure pointille noire de 1 pixel, vous utiliserez
li { border: 1px dotted black; }
Enn, vous pouvez dnir des arrondis autour de chaque menu en utilisant la proprit
border-radius:
li { border-radius: 15px; }
Menus 103
Si vous tenez compte de toutes ces remarques, les styles de la section intitule Menu
horizontal en HTML5" pourraient tre transforms comme ceci (voir Figure7.3):
<style>
li {
padding-left: 1em;
padding-right: 1em;
border: 1px dotted black;
}
a { text-decoration: none; }
li:hover { background: yellow; }
</style>
Figure 7.3
Quelques instructions ont
suf pour modier lallure
du menu horizontal.
Menu droulant
Pour crer un menu droulant, il suft dimbriquer deux listes <ul>, la premire contenant
les entres principales du menu et la seconde, les entres secondaires (voir Figure7.4).
<!DOCTYPE html>
<html>
<head>
<title>Menu droulant</title>
<style>
#principal { height: 30px; }
#principal li {
list-style-type: none;
foat: left;
width: 150px;
border-style: dashed;
border-width: 1px;
104 Chapitre 7
}
#principal li a:link, #principal li a:visited {
display: block;
background: #E0FCC8;
margin: 0;
padding: 5px 6px;
text-decoration: none;
color: black;
}
#principal li a:hover { background-color: #A5F95B; }
#principal .secondaire {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#principal .secondaire li {
foat: none;
border: 0;
}
#principal .secondaire li a:link, #principal .secondaire li a:visited {
display: block;
text-decoration: none;
}
#principal .secondaire li a:hover { background-color: #A5F95B; }
#principal li:hover > .secondaire { display: block; }
</style>
</head>
<body>
<ul id="principal">
<li><a href="#">Page 1</a>
<ul class="secondaire">
<li><a href="page1-1.htm">Page 1 - Sous-page 1</a></li>
</ul>
</li>
<li><a href= "page2-3.htm">Page 2 - Sous-page 3</a></li>
</ul>
</li>
Menus 105
</ul>
</li>
</ul>
</body>
</html>
Examinons le code HTML.
Le corps du document hberge deux listes <ul> imbriques. Le menu principal est mis
en place par la balise <ul id="principal"> et par ses balises <li> enfants. Les
menus secondaires sont dnis dans les balises <ul class="secondaire"> et leurs
enfants <li>.
Examinons les styles CSS qui vont transformer ces listes imbriques en un menu.
Le style #principal dnit la hauteur du menu principal: 30pixels.
Le style #principal li dnit lallure des entres du menu principal: les puces sont
supprimes (list-style-type), les lments du menu ottent gauche (foat:
left;) ont une largeur xe (width) et une bordure qui les dlimite visuellement
(border-style et border-width).
Les styles #principal li a:link et #principal li a:visited dnissent
les caractristiques des liens non visits (a:link) et visits (a:visited) afchs
dans les entres principales du menu: afchage en mode bloc (display: block;),
couleur darrire-plan (background), marges (margin et padding), soulignement/
surlignement (text-decoration), couleur du texte (color).
Le style #principal li a:hover dnit la couleur des entres principales de
menu lorsquelles sont pointes (background-color).
Le style #principal .secondaire dnit les caractristiques des menus
secondaires: aucun afchage par dfaut (display: none;), aucune puce (list-
style-type: none;), aucune marge (margin: 0; padding: 0;) et aucune
bordure (border: 0).
Le style #principal .secondaire li interdit lafchage des entres secondaires
de menu (foat: none;) et supprime toute bordure entre les entres secondaires de
menu (border: 0;).
Les styles #principal .secondaire li a:link et #principal .secondaire
li a:visited dnissent les caractristiques des liens non visits (a:link) et
visits (a:visited) afchs dans les entres secondaires du menu : afchage en
mode bloc (display: block;) et aucune puce (text-decoration: none;).
Le style #principal .secondaire li a:hover dnit la couleur darrire-plan
dun menu secondaire lorsquil est point (background-color).
Enn, le style #principal li:hover > .secondaire dnit le comportement des
lments <ul> de classe secondaire, enfants directs dune entre de menu principal
(#principal) pointe (li:hover). Linitialisation la valeur block de la proprit
display provoque lafchage du menu secondaire correspondant (display vaut
none lorsque la souris ne pointe pas une entre principale de menu).
106 Chapitre 7
Figure7.4
Un menu horizontal
avec plusieurs
commandes
secondaires.
Info
Pour amliorer le rendu dun menu droulant, vous pourriez dnir des arrondis et des
ombres en ajoutant quelques instructions CSS au code prcdent.
Menu droulant vertical en jQuery
Pour faciliter les dveloppements en jQuery, de trs nombreux auteurs proposent des
"plugins" qui viennent apporter de nouvelles instructions la bibliothque dj bien
volue de jQuery. Lun de ces plugins fait des merveilles en ce qui concerne (entre
autres) la dnition de menus: jQuery UI.
Pour utiliser ce plugin, il suft dy faire rfrence sur un CDN, comme vous le faites
habituellement pour jQuery:
<script src=http://code.jquery.com/ui/1.10.3/jquery-ui.js></script>
Examinons un exemple de code. Son excution est reprsente la Figure7.5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/
jquery-ui.css" />
<script src=http://code.jquery.com/jquery-1.9.1.js></script>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
Menus 107
<ul id="menu">
<li class="ui-state-disabled"><a href="#">VB.Net</a></li>
<li class="ui-state-disabled"><a href="#">Delphi</a></li>
<li>
<a href="#">HTML5/CSS3</a>
<ul>
<li class="ui-state-disabled"><a href="#">Rennes</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Metz</a></li>
<li><a href="#">Toulouse</a></li>
</ul>
</li>
<li>
<a href="#">JavaScript</a>
<ul>
<li><a href= "#">Rennes</a></li>
<li><a href="#">Lyon</a></li>
</ul>
</li>
<li>
<a href="#">jQuery</a>
<ul>
<li><a href="#">Rennes</a></li>
<li class="ui-state-disabled"><a href="#">Marseille</a></li>
</ul>
</li>
<li><a href="#">PHP5/MySQL</a></li>
</ul>
</body>
</html>
Figure 7.5
Un menu vertical deux niveaux en
jQuery.
108 Chapitre 7
La partie HTML du code est lmentaire. Elle consiste en une liste puces principale
didentiant #menu:
<ul id="menu">

</ul>
Dune faon trs classique, les entres principales de cette liste sont des balises <li>.
Certaines dentre elles peuvent tre dsactives en leur afectant la classe ui-state-
disabled. Elles apparaissent alors en gris et ne peuvent pas tre slectionnes par
lutilisateur:
<li class="ui-state-disabled"><a href="#">VB.Net</a></li>
Certaines balise <li> peuvent contenir une liste <ul>. Dans ce cas, elles donnent accs
un menu secondaire compos dune ou de plusieurs entres (dont certaines peuvent
tre dsactives en leur afectant la classe ui-state-disabled):
<li>
<a href= "#">jQuery</a>
<ul>
<li><a href="#">Rennes</a></li>
<li class="ui-state-disabled"><a href="#">Marseille</a></li>
</ul>
</li>
Ce code fait rfrence la feuille de styles externes sunny, spcique jQuery UI:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/
jquery-ui.css" />
Pour modier lallure du menu, vous pouvez faire rfrence lune des feuilles de styles
suivantes:
http://code.jquery.com/ui/1.10.3/themes/base/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/blitzer/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/dark-hive/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/dot-luv/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/eggplant/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/excite-bike/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/ick/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/hot-sneaks/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/humanity/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/pepper-grinder/jquery-ui.css
Menus 109
http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/swanky-purse/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/trontastic/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css
http://code.jquery.com/ui/1.10.3/themes/vader/jquery-ui.css
Examinons les bibliothques utilises dans cette page:
La premire fait rfrence la bibliothque jQuery sur le CDN http://code.jquery.com.
La deuxime fait rfrence au plugin jQuery UI sur le CDN code.jquery.com. Aprs
lexcution de ces deux balises, la transformation des listes puces imbriques en un
menu sophistiqu est un vrai jeu denfant.
Il suft dexcuter la fonction menu() sur la balise <ul> qui reprsente le menu principal
(ici, la balise <ul> didentiant #menu):
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
Et de dnir la largeur du menu en agissant sur la classe ui-menu:
<style>
.ui-menu { width: 150px; }
</style>
Rien dautre. Avouez que jQuery est capable de bien des prouesses!
Info
Pour aller plus loin avec les menus jQuery UI, consultez la page http://api.jqueryui.com/
menu/.
Menu droulant horizontal en jQuery
Bien souvent, les menus utiliss sur un site Web sont horizontaux. Partant de ce constat,
nous allons transformer le menu vertical prcdent en un menu horizontal. Pour cela,
nous allons ajouter quelques rgles CSS (voir Figure7.6):
<style>
.ui-menu { min-height: 35px; }
110 Chapitre 7
#menu { width: 900px; }
#menu>li {
width: 150px;
foat: left;
}
</style>
Figure 7.6
Le menu est
maintenant
horizontal.
Examinons les instructions CSS utilises.
La hauteur du menu principal est xe 35pixels:
.ui-menu { min-height: 35px; }
Et sa largeur, 900pixels:
#menu { width: 900px; }
Cette valeur correspond la somme des largeurs des entres de menu principales.
Dans notre exemple, il y a cinq entres de menu principales de largeur 150pixels, ce qui
reprsente un menu de 900pixels.
Les lments du menu ont une largeur xe de 150pixels et ils sont positionns en ottant
gauche, ce qui provoque leur passage lhorizontale:
#menu>li {
width: 150px;
foat: left;
}
Menus 111 Menus 111
Exercice 6
Modiez le code HTML, CSS et jQuery de lexercice5 pour obtenir le rsultat reprsent
la Figure7.7.
Quelques indices:
Utilisez la liste puces qui se trouvait dans le corps du document pour crer un menu
jQuery UI horizontal.
Choisissez le thme jQuery UI le plus appropri la page.
Pensez dnir des marges suprieure et infrieure sur le menu, an quil ne masque
pas lombre du bandeau suprieur et quil soit spar du bloc suivant.
Figure 7.7
Le menu
horizontal a pris
place.
8
Formulaires
et stockage local
de donnes
Certaines pages Web permettent aux visiteurs de saisir des donnes personnelles. Par
exemple, les pages dinscription, les pages de connexion la zone membre (login) ou
encore les pages permettant de saisir des commentaires. Ce chapitre va vous donner
toutes les informations ncessaires pour implmenter de telles pages, en HTML5, CSS3
et jQuery.
Dnir un formulaire
Composs dun ou de plusieurs champs de saisie, les formulaires sont dlimits par les
balises <form> et </form>:
<form name="nom"
enctype="application/x-www-form-urlencoded|multipart/form-data|text/plain"
action="programme|action"
method="get|post"
autocomplete="on|of">
...
</form>
O:
name est le nom du formulaire.
enctype dtermine le type dencodage du formulaire. Dans la plupart des formulaires,
cet attribut est omis. Une seule exception: lenvoi de chier par formulaire. Dans ce cas,
lattribut enctype doit tre initialis multipart/form-data. Nous y reviendrons
en dtail un peu plus loin dans ce chapitre.
action est le nom du programme auquel les donnes doivent tre transmises
(www.site.com/traitement.php par exemple) ou laction accomplir
(mailto:adresse e-mail par exemple).
114 Chapitre 8
method est la mthode de transmission des donnes du formulaire : get poste
les donnes dans ladresse URL et post dans le corps de la requte. La seconde
mthode est prfrable la premire car elle nafche pas en clair les donnes
saisies dans le formulaire (ce qui pourra tre gnant si des donnes condentielles
sont transmises). De plus, la taille des donnes nest pas limite, alors quelle ne peut
dpasser 256octets dans la mthode get.
autocomplete indique si le formulaire doit tre complt automatiquement (on)
ou non (of) en utilisant les donnes dj saisies par lutilisateur dans des champs
similaires.
Envoi dun formulaire par mail
La plupart du temps, les informations saisies dans un formulaire sont transmises un
script PHP sur le serveur en vue de leur traitement. Le langage PHP nest pas tudi en
dtail dans le cadre de cet ouvrage. Cependant, nous allons faire une petite exception en
ce qui concerne la transmission des donnes du formulaire par e-mail.
Certes, vous pouvez dnir une action de type mailto dans la balise <form>:
<form name="monFormulaire" method="post" action="mailto:adresse@fai.com">
Cette technique fonctionne parfaitement condition quun client de messagerie soit
install chez lutilisateur. Dans le cas contraire, les donnes ne vous seront pas transmises!
Pour contourner ce problme, vous allez utiliser linstruction PHP mail():
$resultat = mail(destin, titre, texte, de);
O:
destin est ladresse du destinataire du message;
titre est le titre du message;
texte est le texte (brut ou HTML) envoy dans le corps du message;
de est len-tte du message, compos des lments suivants, spars entre eux par
un retour charriot (\n):
ladresse mail de lmetteur du message;
le type MIME du message;
le type du contenu;
le charset utilis dans le message.
Voici un exemple de code. Ici, le code HTML "<font color=\"red\">Ce mail a
t envoy depuis <b>un script PHP</b>.</font>" est envoy dans le corps
du mail:
<?php
$titre = "Envoi de mail par PHP";
$texte = "<font color=\"red\">Ce mail a t envoy depuis <b>un script PHP</b>.
</font>";
$destinataire = "prenom.nom.@fai.com";
$delapartde = "expediteur@fai.com";
$from = "From:".$delapartde."\n";
$from .= "MIME-version: 1.0\n";
Formulaires et stockage local de donnes 115
$from .= "Content-type: text/html\n";
$from .= "charset: UTF-8\n";
if (!mail($destinataire,$titre,$texte,$from))
echo "Un problme sest produit lors de lenvoi du message. Recommencez
SVP.";
?>
Ce code doit tre stock sur le serveur, dans un chier dextension .php. Si ce chier a
pour nom "mail.php", la balise <form> sera initialise comme ceci ( condition que le
chier mail.php se trouve dans le mme dossier que la page HTML courante):
<form name="monFormulaire" method="post" action="mail.php">
Dans cet exemple, le texte envoy dans le message est crit "en dur". Cest--dire quil
est identique chaque fois que la fonction PHP mail() est sollicite. Voyons maintenant
comment insrer dans le mail les hypothtiques champs ch1, ch2 et ch3 dun formulaire
transmis par la mthode POST.
<?php
$ch1 = $_POST['ch1'];
$ch2 = $_POST['ch2'];
$ch3 = $_POST['ch3'];
$titre = "Envoi de mail par PHP";
$texte = "Voici les données du formulaire :<br><ul><li>ch1=".$ch1."</li>
<li>ch2=".$ch2."</li><li>ch3=".$ch3."</li></ul>";
$destinataire = "prenom.nom.@fai.com";
$delapartde = "expediteur@fai.com";
SVP.";
?>
Les premires lignes rcuprent les donnes et les stockent dans les variables $ch1,
$ch2 et $ch3. Les donnes ainsi rcupres sont alors insres dans le corps du
message:
$texte = "Voici les données du formulaire :<br><ul><li>ch1=".$ch1."</li>
<li>ch2=".$ch2."</li><li>ch3=".$ch3."</li></ul>";
116 Chapitre 8
Les difrents lments utilisables dans
un formulaire
Outre les incontournables zones de texte et boutons denvoi, de nombreux autres types
de champs sont utilisables en HTML (certains sont apparus dans la version5 du langage):
Balise Signication
<feldset>contenu</feldset> Groupe doptions permettant de rassembler
plusieurs champs.
<legend>texte</legend> Lgende afche dans un lment feldset.
<label>texte</label> Simple lgende textuelle.
<input type="text" name="Nom"
id="identifant" value="valeur">
Zone de texte.
<input type="button" name="Nom"
id="identifant" value="Lgende du
bouton">
Bouton.
<input type="image" src="image.
jpg" id="identifant">
Bouton contenant une image.
<input type="password" name="Nom"
id="identifant" value="valeur par
dfaut">
Zone de saisie dun mot de passe.
<input type="checkbox" name="Nom"
id="identifant" value="Valeur">
Case cocher.
<input type="radio" name="Nom"
id="identifant" value="Valeur">
Bouton radio.
<input type="hidden" name="Nom"
id="identifant" value="valeur">
Champ cach. Bien quil napparaisse pas
dans le formulaire, son contenu est envoy au
serveur lorsque lutilisateur clique sur le bouton
Submit.
<input type="submit" name="Nom"
id="identifant" value="Texte
afich sur le bouton">
Bouton denvoi, pour envoyer les donnes du
formulaire au serveur.
<input type="reset" name="Nom"
id="identifant" value="Texte
afich sur le bouton">
Bouton de rinitialisation du formulaire.
<input type="date" name="Nom"
id="identifant" title="Date(jj-mm-
aaaa)" value="Une date">
Champ spcialis dans la saisie de dates
(seulement pour les navigateurs Opera et
Chrome au moment o jcris ces lignes).
<input type="time" name="Nom"
id="identifant" title="Heure(hh-
mm)" value="10:00">
Champ spcialis dans la saisie dheures
(seulement pour les navigateurs Opera et
Chrome au moment o jcris ces lignes).
<input type="datetime" name="Nom"
id="identifant">
Champ spcialis dans la saisie de dates et
dheures (seulement pour les navigateurs
Opera et Chrome au moment o jcris ces
lignes).
<input type="number" name="Nom"
id="identifant" value="55">
Champ spcialis dans la saisie des nombres.
<input type="color" name="Nom"
id="identifant" value="red">
Palette de couleurs (aucun navigateur nest
encore compatible).
<input type="search" name="Nom"
id="identifant" list="datalist"
value="Valeur par dfaut">
Zone de texte permettant defectuer des
recherches.
<input type="range" min="-500"
max="500" value="0" step="10"
name="Nom" id="identifant">
Curseur pour faciliter la saisie de valeurs
numriques (uniquement sur Safari au moment
o jcris ces lignes).
<input type="email" name="Nom"
id="identifant">
Champ spcialis dans la saisie dadresses
e-mail.
<input type="url" name="Nom"
id="identifant">
Champ spcialis dans la saisie dadresses
URL.
<input type="tel" name="Nom"
id="identifant">
Champ spcialis dans la saisie de numros
de tlphone (uniquement sur les versions
mobiles des navigateurs au moment o jcris
ces lignes).
<input type="fle" name="Nom"
id="identifant">
Champ permettant de slectionner un chier
dans les mmoires de masse de lordinateur.
<datalist id="identifant"><option
value="valeur1">...<option
value="valeurN"></datalist>
Facilite la saisie en implmentant
lautocomplete sur plusieurs valeurs
prdnies dans des lments option.
<textarea cols="Nombre
colonnes" rows="Nombre lignes"
id="identifant">Texte par dfaut</
textarea>
Zone de saisie multiligne.
<select name="Nom"
id="identifant"><option
value="valeurN"></select>
Liste droulante.
<select name="Nom" size="4"
Zone de liste (ici, quatre lments sont
afchs).
<option name="Nom" size="4"
Zone de liste (ici, quatre lments sont
afchs).
<output name="Nom"> Afchage dun rsultat.
118 Chapitre 8
Quelques exemples de formulaires
Cette section passe en revue plusieurs exemples typiques de formulaires. Libre vous
de les adapter pour rpondre vos besoins.
Formulaire de login
Tous les sites qui disposent dune zone membre ou sur lesquels lutilisateur peut laisser
des messages doivent tre en mesure didentier chaque utilisateur. Cest le rle du
formulaire de login. Trs simple, ce formulaire contient un champ pour la saisie du nom
de lutilisateur, un champ pour la saisie du mot de passe et un bouton de soumission au
formulaire (voir Figure8.1).
Figure 8.1
Un traditionnel formulaire
de login.
Voici le code utilis:
<!DOCTYPE html>
<html>
<head>
<title>Formulaire de login</title>
label {
width: 130px;
margin-left: 10px;}
input {
width: 200px;
}
input[type="submit"] {
margin-left: 144px;
width: 150px;
}
input { margin-bottom: 10px; }
feldset {
width: 400px;
background-color: #E3FAF4;
}
</style>
</head>
<body>
<form action="traitement.php" method="post">
<feldset>
<legend>Entrez vos identifants</legend>
<br><label>Nom dutilisateur</label>
<input type="text" name="user" id="user"><br>
<label>Mot de passe</label>
<input type="password" name="pass" id="pass">
<input type="submit" name="connect" id="connect" value="Connexion"><br>
</feldset>
</form>
</body>
</html>
Le formulaire est entour par les balises <form> et </form>. Lorsque lutilisateur
cliquera sur le bouton de soumission, les donnes seront transmises au programme
traitement.php en utilisant la mthode POST:
</form>
Une balise <feldset> est utilise pour difrencier visuellement les donnes du
formulaire du reste de la page. Dans cet exemple, la page se limite au seul formulaire,
mais je tenais vous prsenter cette technique, qui est tout aussi pratique questhtique.
La balise <legend> dnit le texte qui sera afch dans la partie suprieure gauche du
cadre de la balise <feldset>:
<feldset>
<legend> Entrez vos identifants </legend>
</feldset>
Le formulaire est compos dun champ de type text, dun champ de type password
et dun champ de type submit. Le premier permet de saisir le nom de lutilisateur, le
deuxime permet de saisir le mot de passe (en substituant chaque caractre par un
caractre de remplacement) et le troisime permet denvoyer les lments saisis au
programme traitement.php.
Ces balises sont mises en forme par quelques lignes de CSS.
Pour aligner visuellement les zones de saisie, les labels sont redimensionns. tant donn
que les balises <label> sont de type inline, elles sont au pralable converties en
inline-bloc pour pouvoir tre redimensionnes. Enn, une marge gauche de 10pixels
est dnie pour viter que le texte des labels ne soit coll au cadre de la balise <feldset>:
label {
width: 280px;
margin-left: 10px;
}
Le bouton est dplac vers la droite pour saligner sur les zones de saisie et sa largeur
est rednie:
120 Chapitre 8
margin-left: 294px;
width: 150px;
}
An darer le formulaire, un espace est mnag aprs chaque champ input:
Enn, la balise <feldset> est redimensionne et colore an de difrencier le
formulaire du reste de la page:
feldset {
width: 650px;
}
Formulaire de saisie de commentaires
Si vous voulez que vos visiteurs puissent vous laisser des commentaires, vous devez
ajouter un formulaire de saisie de commentaires (voir Figure8.2).
Figure 8.2
Un formulaire
de saisie de
commentaires
lmentaire.
Voici le code correspondant. Ici, on suppose que lutilisateur sest dj identi avec un
formulaire de login.
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" />
<title>Formulaire denvoi de commentaire</title>
feldset {
width: 700px;
}
textarea, input[type="submit"] { margin-left: 10px; }
</style>
</head>
<body>
<feldset>
<legend> Entrez votre commentaire puis cliquez sur Envoyer </legend>
<br><textarea name="commentaire" id="commentaire" cols="80" rows="10">
</textarea>
<br><br><input type="submit" name="envoyer" id="envoyer" value="Envoyer">
<br><br>
</feldset>
</form>
</body>
</html>
Le commentaire est saisi laide dune balise <textarea> et envoy au programme
traitement.php avec un bouton de type submit. Le code CSS de mise en forme est trs
simple. La balise <feldset> est redimensionne et colorise:
feldset {
width: 700px;
}
Puis une marge gauche de 10 pixels est dnie sur les deux champs du formulaire an
dviter quils ne safchent trop gauche:
textarea, input[type="submit"] { margin-left: 10px; }
Formulaire denvoi de fichier
Il est parfois ncessaire denvoyer un chier au serveur. Pour cela, vous utiliserez un
formulaire un peu particulier dans lequel lattribut enctype est initialis multipart/
form-data (voir Figure8.3).
Figure 8.3
Ce formulaire permet
denvoyer un chier
au serveur.
122 Chapitre 8
Voici le code correspondant:
<!DOCTYPE html>
<html>
<head>
<title>Formulaire denvoi de fchier</title>
label {
width: 180px;
margin-left: 10px;
}
margin-left: 194px;
width: 150px;
}
feldset {
width: 500px;
}
</style>
</head>
<body>
<form action="traitement.php" method="post" enctype="multipart/form-data">
<feldset>
<legend>Envoi dun fchier local</legend>
<br><label>Choisissez un fchier</label>
<input type="fle" name="fchier" id="fchier"><br>
<input type="submit" name="envoyer" id="connect" value="Connexion"><br>
</feldset>
</form>
</body>
</html>
Pour que le formulaire puisse transmettre au serveur le chier slectionn par lutilisateur,
lattribut enctype de la balise <form> est initialis multipart/form-data:
<form action="traitement.php" method="post" enctype="multipart/form-data">
...
</form>
Le formulaire contient un label, un champ de type fle et un bouton de type submit.
La mise en forme des lments du formulaire est similaire celle dcrite dans le formulaire
de login. Nous ny reviendrons pas.
Sondage
Pour valoriser vos visiteurs et pour mieux les connatre, vous pouvez crer des sondages
en ligne. La plupart du temps, les informations saisies se limitent des boutons radio et
des cases cocher, mais rien ne vous empche dutiliser dautres types de champs. Dans
cet exemple, les choix de lutilisateur se bornent cocher un ou plusieurs boutons radio
et slectionner une option parmi trois (voir Figure8.4).
Figure 8.4
Un sondage
lmentaire.
<!DOCTYPE html>
<html>
<head>
<title>Sondage</title>
label {
width: 280px;
margin-left: 10px;
}
margin-left: 294px;
width: 150px;
}
feldset {
width: 650px;
}
</style>
</head>
<body>
<feldset>
<legend> Votre opinion est importante... </legend>
<br><label>Quel navigateur utilisez-vous ?</label>
<input type="checkbox" name="ie" id="ie" value= "ie">Internet Explorer
<input type="checkbox" name="f" id="f" value="f">Firefox
124 Chapitre 8
<input type="checkbox" name="ie" id="ie" value="gc">Google Chrome
<br><label>Quel est votre systme dexploitation ?</label>
<input type="radio" name="systeme" id="w8" value="w8">Windows 8
<input type="radio" name="systeme" id="w7" value="w7">Windows 7
<input type="radio" name="systeme" id="xp" value="xp">Windows XP
<input type="submit" name="envoyer" id="envoyer" value="Envoyer"><br>
</feldset>
</form>
</body>
</html>
Le formulaire est plus imposant que dans les exemples prcdents car le nombre de
champs est bien plus consquent. Pour que lutilisateur ne puisse slectionner quun seul
bouton radio, nous avons donn le mme nom (attribut name) aux trois boutons radio.
Si nous avions choisi trois noms difrents, lutilisateur aurait pu slectionner les trois
boutons radio.
Le code de mise en forme CSS devrait tre limpide, puisquil correspond, quelques
dtails prs, celui utilis dans les exemples prcdents. Nous ny reviendrons pas.
Focus
En HTML5, il est trs simple de donner le focus un champ input de type text. En
efet, il suft dinsrer lattribut autofocus dans la balise correspondante. Par exemple:
<input type="text" name="nom" id="nom" autofocus>
Pour savoir quel champ a le focus, vous utiliserez des instructions jQuery. Le formulaire
reprsent la Figure8.5 contient quatre champs input de type text. Par dfaut, le
premier champ de saisie a le focus. Le formulaire est suivi par une balise <span> dans
laquelle le champ qui a le focus est identi.
Figure 8.5
Lutilisateur a donn le
focus au troisime champ
input de type text.
<!DOCTYPE html>
<html>
<head>
<title>Focus</title>
label {
width: 100px;
margin-left: 10px;
}
margin-left: 114px;
width: 150px;
}
feldset {
width: 350px;
}
</style>
</head>
<body>
<feldset>
<legend> Qui a le focus ? </legend>
<br><label>Prnom</label>
<input type="text" name="prenom" id="prenom" autofocus>
<br><label>Nom</label>
<input type="text" name="nom" id="nom">
<br><label>Adresse</label>
<input type="text" name="adresse" id="adresse">
<br><input type="submit" name="envoyer" id="envoyer" value="Envoyer"><br>
<br><span id="info"></span>
</feldset>
</form>
<script>
$(function(){
$('input').focus(function(){
qalf = $(this).attr('id');
$('#info').html('Le champ ' + qalf + ' a le focus.');
});
});
</script>
</body>
</html>
Le code jQuery est lmentaire.
Lorsquun champ de type input a le focus:
126 Chapitre 8
La valeur stocke dans son attribut id est mmorise dans la variable qalf (qui a le
focus):
qalf = $(this).attr('id');
Un texte est alors afch dans la balise <span> did #info:
$('#info').html('Le champ ' + qalf + ' a le focus.');
Mettre en vidence llment qui a le focus
Pour faciliter lidentication du champ de saisie qui a le focus, vous pouvez modier sa
couleur darrire-plan avec quelques instructions jQuery.
<script>
$(function(){
qalf = '#' + $(this).attr('id');
$(qalf).css('background-color','#E3FAF4');
});
});
$('input').blur(function(){
$(qalf).css('background-color','#FFFFFF');
});
</script>
Lorsquun champ input obtient le focus:
Son identiant est stock dans la variable qalf, en le faisant prcder du signe # pour
le rendre directement utilisable:
La variable qalf est alors utilise comme slecteur pour pointer vers lunique champ qui
a le focus, puis la proprit CSS background-color de ce champ est modie via la
fonction css() pour arriver au rsultat souhait:
$(qalf).css('background-color','#E3FAF4');
Ces instructions ne sont pas sufsantes: il faut galement penser restituer la couleur
blanche larrire-plan de tous les champs qui nont pas le focus. Pour isoler ces champs,
on utilise la fonction blur():
$('input').blur(function(){
Lidentiant de chacun des lments concerns est tour tour mmoris dans la variable
qnplf (qui na pas le focus), en le faisant prcder du caractre # pour le rendre
directement utilisable:
qnplf = '#' + $(this).attr('id');
Cet identiant est utilis pour sadresser tour tour tous les champs qui nont pas le
focus, puis modier leur couleur darrire-plan:
$(qnplf).css('background-color','#FFFFFF');
La Figure 8.6 prsente le rsultat obtenu en remplaant le code jQuery de lexemple
prcdent par celui dcrit dans cette section.
Figure 8.6
Le champ qui a le focus est
facilement identiable par
sa couleur darrire-plan.
Validation de donnes
Lorsquun champ de saisie est obligatoire, il suft de lui afecter lattribut required.
titre dexemple, dans ce formulaire, le champ de saisie Nom est obligatoire. Si lutilisateur
clique sur le bouton de soumission du formulaire sans avoir renseign le champ Nom, un
message derreur est gnr et le formulaire nest pas envoy (voir Figure8.7).
<!DOCTYPE html>
<html>
<head>
<title>Champ de saisie obligatoire</title>
label, input {
width: 200px;
margin-left: 10px;
}
</style>
</head>
<body>
<form id="validation">
<label>Nom</label> <input name="Nom" required>
<input type=submit value="Valider">
</form>
</body>
</html>
128 Chapitre 8
Figure8.7
Ce champ doit
tre renseign
pour que le
formulaire soit
valide.
Validation de-mails et dadresses URL
Le champ daction des attributs required est bien plus tendu, puisquil permet
galement de valider des donnes complexes (telles que des adresses e-mail ou des
URL). titre dexemple, le formulaire ci-aprs teste la validit des champs email et
url. Lorsquon clique sur le bouton de soumission du formulaire, un message derreur
safche si un de ces deux champs nest pas conforme (voir Figure8.8).
<!DOCTYPE html>
<html>
<head>
<title>Validation e-mail et url</title>
label, input, textarea {
margin-left: 10px;
margin-bottom: 15px;
}
label {
width: 100px;
}
</style>
</head>
<body>
<label>Nom</label><input name="Nom"><br>
<label>e-mail</label><input type=email name="email" required><br>
<label>Adresse URL</label><input type=url name="url" required><br>
<label>Commentaire</label><textarea name="comment"></textarea><br>
<input type=submit value="Valider"></p>
</form>
</body>
</html>
Figure8.8
Ladresse e-mail
nest pas correcte.
Info
Pour faciliter la reconnaissance des champs obligatoires, il est possible dutiliser quelques
lignes de CSS. Par exemple, cette ligne afecte un arrire-plan de couleur jaune aux
champs <input> dont lattribut required est spci (voir Figure 8.9):
input:required { background:yellow; }
Figure8.9
Les champs
obligatoires
sont clairement
identis.
Validation par une expression rgulire
Pour valider la saisie dans un champ de type texte, vous pouvez utiliser une expression
rgulire en respectant les conventions listes dans le tableau suivant:
Expression Signication Exemple
. Nimporte quel caractre a, b, z, T, 1, @, etc.
? Rpte zro ou une fois le caractre
prcdent
xy? signie x ou xy
* Rpte zro, une ou plusieurs fois le
caractre prcdent
xy* signie x, xy, xyy, xyyy, etc.
+ Rpte une ou plusieurs fois le
caractre prcdent
xy+ signie xy, xyy, xyyy, etc.
130 Chapitre 8
\ Le caractre dchappement \ autorise
lutilisation de caractres rservs
\. est quivalent au point dcimal
[xyz] Un caractre unique de lexpression [xyz] signie x, y ou z
[^xyz] Un caractre unique lexclusion des
caractres de lexpression
[^xyz] signie un caractre quelconque
sauf x, y et z
[a-z] Un caractre unique compris entre les
deux bornes
[a-zA-Z] signie une lettre minuscule ou
majuscule quelconque
exp1|exp2 exp1 ou exp2 PHP4|PHP5 signie PHP4 ou PHP5
{min, max} Rptition du caractre prcdent entre
min et max fois
x{2,3} signie xx ou xxx, x{1,} signie x,
xx, xxx, xxxx, etc.; x{,3} signie chane
vide, x, xx ou xxx
Par exemple, pour limiter la saisie un caractre majuscule suivi de quatre chifres,
vous utiliserez lexpression rgulire suivante:
[A-Z][0-9]{4}
Cette expression doit tre afecte lattribut pattern du champ, et le message
afcher en cas de non-concordance entre la saisie et le modle doit tre spci dans
lattribut title. Par exemple:
Entrez un code <input type="text" pattern="[A-Z][0-9]{4}" title="une lettre
majuscule suivie de quatre chifres">
Voici un exemple de code complet. La Figure 8.10 prsente lefet produit lorsque
lutilisateur saisit une information sans respecter le modle:
<!DOCTYPE html>
<html>
<head>
<title>Validation par expression rgulire</title>
</head>
<body>
Entrez un code
<input type="text" pattern="[A-Z][0-9]{4}" title="une lettre majuscule
suivie de quatre chifres">
<input type="submit" value="Valider">
</form>
</body>
</html>
Figure 8.10
La saisie nest pas
valide.
Prenons un autre exemple. Pour savoir si une adresse e-mail est valide, vous pouvez
utiliser un champ de type email. Mais si vous voulez personnaliser le message afch
lorsque lutilisateur entre une adresse e-mail invalide, vous utiliserez un champ de type
text auquel vous appliquerez lexpression rgulire suivante:
[a-z0-9._-]+@[a-z]{2,}\.[a-z]{2,4}
Examinons cette squence:
Ladresse e-mail commence par un nombre quelconque de lettres minuscules, de
chifres, de points dcimaux, de caractres de soulignement et de tirets: [a-z0-9._-
]+
Elle est suivie du caractre @
Dune squence de deux ou plus de deux lettres: [a-z]{2,}
Dun point dcimal: \.
Et enn dune squence de 2 4 lettres qui termine ladresse e-mail: [a-z]{2,4}
Voici un exemple de code. La Figure 8.11 montre le message afch lorsque ladresse
e-mail saisie nest pas valide:
<!DOCTYPE html>
<html>
<head>
<title>Validation de-mail par expression rgulire</title>
</head>
<body>
Entrez une adresse e-mail
<input type="text" pattern="[a-z0-9._-]+@[a-z]{2,}\.[a-z]{2,4}" title="une
ou plusieurs lettres ou chifres suivies du caractre @ suivi de deux ou plus de
deux caractres suivi dun point suivi de deux quatre caractres">
<input type="submit" value="Valider">
</form>
</body>
</html>
132 Chapitre 8
Figure 8.11
Le message
derreur peut tre
personnalis en
utilisant un champ
de type text.
Modier le style dun champ en
fonction de sa validit
Les pseudo-classes:valid et:invalid permettent de modier les caractristiques des
champs qui (respectivement) respectent ou ne respectent pas le modle spci. Par
dfaut, lorsquun champ de saisie ne respecte pas le modle:
Firefox afecte la valeur red la proprit box-shadow du champ;
Internet Explorer afecte la valeur red la proprit border-color du champ;
Chrome et Opera najoutent aucun style, mais placent le focus sur le premier champ
erron.
En utilisant les pseudo-classes :valid et :invalid, vous allez pouvoir modier ce
comportement par dfaut et luniformiser pour tous les navigateurs.
Voici un exemple de code:
<!DOCTYPE html>
<html>
<head>
<title>Mise en vidence des champs invalides</title>
label, input, textarea {
margin-left: 10px;
margin-bottom: 15px;
}
label {
width: 100px;
}
input[type=text]:invalid {background-color: red; }
input[type=text]:valid {background-color: green; }
</style>
</head>
<body>
<label>Nom</label><input name="Nom"><br>
<label>e-mail</label><input type="text" name="email" pattern="[a-z0-9._-]
+@[a-z]{2,}\.[a-z]{2,4}" title="Mauvaise adresse e-mail"><br>
<label>Adresse URL</label><input type= "url" name="url" required><br>
<label>Tlphone</label><input type="text" name="phone" pattern="[0-9]{10,10}"
title="Mauvais numro de tlphone"><br>
<input type=submit value="Valider"></p>
</form>
</body>
</html>
Le formulaire contient quatre champs de saisie: un nom, une adresse e-mail, une adresse
URL et un numro de tlphone. Le nom na aucun critre de validation. Ladresse URL
est requise (attribut required). Enn, un modle de saisie est dni pour ladresse
e-mail et le numro de tlphone.
Outre les rgles de mise en page du formulaire, deux rgles de mise en forme sont
dnies sur les champs input de type text, cest--dire sur les deux champs qui
possdent un modle de saisie:
input[type=text]:invalid {background-color: red; }
input[type=text]:valid {background-color: green; }
Si la saisie nest pas valide, larrire-plan du champ devient rouge. Il devient vert lorsque
la saisie est valide. Ce comportement est dynamique. Entendez par l que les rgles de
mise en forme sont appliques pendant la saisie. En voyant un arrire-plan de couleur
verte, lutilisateur sait que la donne saisie est valide (voir Figure8.12).
Figure 8.12
Ladresse e-mail
nest pas correcte;
en revanche,
le numro de
tlphone
respecte la rgle
de validation.
134 Chapitre 8
Stockage local de donnes
Avec HTML5, le stockage de donnes sur le poste client est dsormais un jeu denfant.
Voyons ce que HTML5 propose. Le code utiliser est du JavaScript. Il repose sur
lutilisation des fonctions associes lobjet localStorage:
Fonction Signication
localStorage.getItem('nom') Retourne la valeur correspondant au nom
spci dans largument
localStorage.setItem('nom',
'valeur')
Stocke la valeur spcie sous le nom spci
dans largument
localStorage.key(position) Retourne le nom de llment stock la
position spcie (0correspond la premire
position de sauvegarde)
localStorage.length Retourne le nombre de donnes mmorises
localStorage.clear() Eface toutes les donnes sauvegardes
localStorage.removeItem('nom') Eface la donne sauvegarde sous le nom
spci dans largument
Pour bien comprendre comment utiliser ces fonctions JavaScript, rien de tel quun peu
de code. Dans cet exemple, vous pouvez enregistrer des donnes dans lespace de
stockage local du navigateur, visualiser les donnes stockes, efacer une donne ou
toutes les donnes (voir Figure8.13).
<!DOCTYPE HTML>
<html>
<head>
<title>Stockage local HTML5</title>
<style>
div {
border-width: 1px;
border-style: dotted;
width: 450px;
}
h2, label, input[type=button] {margin-left: 10px; }
#donnees { background-color: #F4CFD7; }
#valeurs { background-color: #CFF4EF; }
</style>
<script>
function Afiche() {
var key = "";
var NomValeur = "<tr><th>Nom</th><th>Valeur</th></tr>\n";
var i=0;
for (i=0; i<=localStorage.length-1; i++)
{
key = localStorage.key(i);
NomValeur += "<tr><td>"+key+"</td>\n<td>"+localStorage.getItem(key)+
"</td></tr>\n";
}
document.getElementById('NomValeur').innerHTML = NomValeur;
}
function Enregistre() {
var nom = document.forms.editor.name.value;
var valeur = document.forms.editor.data.value;
localStorage.setItem(nom, valeur);
Afiche();
}
function Lit() {
document.forms.editor.data.value = localStorage.getItem(nom);
Afiche();
}
function Eface() {
document.forms.editor.data.value = localStorage.removeItem(nom);
Afiche();
}

function EfaceTout() {
localStorage.clear();
Afiche();
}
</script>
</head>
<body onload="Afiche()">
<h1>Stockage local HTML5</h1>
<form name=editor>
<div id="donnees">
<h2>Dfnissez la donne stocker</h2>
<p><label>Nom</label> <input type="text" name="name">
<label>Valeur</label> <input type="text" name="data"></p>
<p>
<input type="button" value="Lire" onclick="Lit()">
<input type="button" value="Enregistrer" onclick="Enregistre()">
<input type="button" value="Efacer" onclick="Eface()">
<input type="button" value="Tout efacer" onclick="EfaceTout()">
</p>
</div>
<br><br>
<div id="valeurs">
<h2>Donnes stockes</h2>
<table id="NomValeur" border="1"></table>
</div>
</form>
</body>
</html>
136 Chapitre 8
Figure8.13
Ce code permet de lire et
denregistrer des donnes dans
lespace local du navigateur.
Formulaires et stockage local de donnes 137 Formulaires et stockage local de donnes 137
Exercice 7
Dnissez un formulaire denregistrement similaire la Figure 8.14. Ce formulaire sera
afch lorsque lutilisateur cliquera sur la commande de menu Zone membre.
Figure 8.14
Le formulaire dinscription la zone
membre.
Avant que vous ne plongiez dans le code, voici quelques prcisions importantes:
Les trois champs de saisie du formulaire sont de type required.
Le pseudo doit tre compos de 3 8 caractres alphanumriques (a z, A Z, 0 9).
Le mot de passe doit tre compos de 5 caractres alphanumriques (a z, A Z,
09).
Le code PHP utiliser est le suivant:
<?php
$mail = $_POST['mail'];
$pseudo = $_POST['pseudo'];
$pass = $_POST['pass'];
$titre = "Formulaire dinscription mon eFormation";
$texte = "Voici les données du formulaire :<br><ul><li>ch1=".$mail.
"</li><li>ch2=".$pseudo."</li><li>ch3=".$pass."</li></ul>";
$destinataire="adresse@destinataire.com";
$delapartde = $mail;
138 Chapitre 8
SVP.";
else {
echo "Les donnes ont t transmises.<br><br>";
echo "<a href='http://www.mediaforma.com/eformation/exercice7/index.htm'>
Retourner au site</a>";
}
?>
Les champs qui seront transmis ce programme doivent donc avoir les noms suivants:
mail, pseudo et pass.
Pour vrier le bon fonctionnement de ce code, afectez votre propre adresse e-mail la
variable $destinataire. Vous recevrez ainsi les donnes saisies dans le formulaire:
Exercice 8
Dnissez le formulaire de contact reprsent la Figure8.15.
Figure 8.15
Le formulaire de contact du site.
Les deux champs de saisie de ce formulaire sont requis. Voici le code PHP qui vous
permettra denvoyer les donnes saisies la bote mail de votre choix:
<?php
$mail = $_POST['mail'];
$message = $_POST['message'];
$titre = "Formulaire de contact mon eFormation";
$texte = "Voici le message de lutilisateur : ".htmlentities($message, ENT_
QUOTES, "UTF-8");
$delapartde = $mail;
SVP.";
else {
echo "Les donnes ont t transmises.<br><br>";
echo "<a href='http://www.mediaforma.com/eformation/exercice7/index.htm'>
Retourner au site</a>";
}
?>
Les champs qui seront transmis ce programme doivent donc avoir les noms suivants:
mail et message.
Pour vrier le bon fonctionnement de ce code, afectez votre propre adresse e-mail la
variable $destinataire. Vous recevrez ainsi les donnes saisies dans le formulaire:
9
Tableaux
Il est frquent davoir recours un tableau pour reprsenter des donnes tabulaires
en HTML. Dans les chapitres prcdents, vous avez vu que cette pratique pouvait tre
facilement contourne laide de balises inline transformes en inline-block et
redimensionnes via la proprit width. Il est temps de dcouvrir les tableaux et ce
quils pourront vous apporter dans lagencement de sites Web.
Dnir un tableau en HTML
Un tableau est dni laide de la balise <table>. Pour matrialiser les bordures autour
des cellules, vous pouvez insrer lattribut border dans la balise <table>. Un tableau
est compos de plusieurs lignes dnies avec la balise <tr>. Chaque ligne contient une
ou plusieurs cellules dnies:
avec la balise <th> sil sagit dune cellule de titre;
avec la balise <td> sil sagit dune cellule contenant une donne.
La structure gnrale dun tableau est donc la suivante:
<table border>
<tr>
<th>Titre colonne 1</th>
</tr>
<tr>
<td>Cellule 1 ligne 1</td>
</tr>
<tr>
</tr>
</table>
142 Chapitre 9
Dnir un tableau en CSS
Pour dnir un tableau en CSS, vous pouvez utiliser, par exemple:
une balise <div> comme parent du tableau;
des balises <p> pour reprsenter les cellules;
des balises <span> pour reprsenter les cellules.
Info
Pour difrencier les cellules de titre des cellules de donnes, vous afecterez une classe
la ligne contenant les cellules de titre et vous dnirez leurs caractristiques en CSS.
Voici un exemple de tableau lmentaire (voir Figure9.1):
<!DOCTYPE HTML>
<html>
<head>
<title>Un tableau en CSS</title>
.titre { font-weight: bold; }
span {
foat: left;
width: 150px;
padding: 5px;
}
p { clear: left; }
</style>
</head>
<body>
<div>
<p class="titre">
<span>Titre colonne 1</span>
<span>Titre colonne 2</span>
</p>
<p>
<span>Cellule 1 ligne 1</span>
</p>
<p>
</p>
</div>
</body>
</html>
Tableaux 143
Figure 9.1
Ce tableau
a t cr
sans la balise
<table>.
Voici quelques explications sur ce code.
Le tableau est dni laide dune balise <div>, les lignes laide de balises <p> et les
cellules laide de balises <span>. La classe titre est afecte ligne de titre, pour la
difrencier des autres lignes du tableau.
Examinons le code CSS mis en uvre.
Les textes contenus dans la ligne de titre sont afchs en gras. Dans le cas prsent,
aucun texte nest afch dans la ligne de titre. En revanche, ses deux enfants <span>
hritent des proprits de leur parent et, donc, afchent le texte en gras:
.titre { font-weight: bold; }
Pour que les cellules du tableau (cest--dire les balises <span>) safchent les unes la
suite des autres, on les fait otter sur le ct gauche avec la proprit foat:
span {
foat: left;
Pour pouvoir les redimensionner, on leur attribue un comportement inline-block et
on dnit leur largeur:
width: 150px;
Un espace de 5pixels est mnag autour des balises <span> pour les arer et viter
que le texte ne soit trop proche des bordures:
padding: 5px;
Enn, une bordure continue noire paisse de 1pixel est afche autour de chaque balise
<span>:
Pour que chaque nouvelle ligne commence au-dessous (et non ct) de la prcdente,
la proprit clear des balises <p> est initialise left:
p { clear: left; }
144 Chapitre 9
Bordures autour des cellules
Au dbut du chapitre, vous avez vu quil tait possible dutiliser lattribut HTML border
pour afcher une bordure autour des cellules dun tableau. Vous pouvez aller plus loin en
utilisant la proprit CSS border.
Accessible dans les lments table, th et td, la proprit border permet
(respectivement) de dnir la bordure autour du tableau, des cellules de titre et des
cellules de donnes. Voici sa syntaxe:
border: paisseur style couleur;
O:
paisseur est lpaisseur de la bordure : thin, medium, thick ou une valeur
numrique exprime en pixels (px), points (pt), pourcentage (%), ou une autre unit
de mesure CSS.
style est le style de la bordure : dashed, dotted, double, solid, insert,
groove, ridge ou outset.
couleur est la couleur de la bordure : une couleur prdnie, comme Silver ou
DarkBlue, ou une valeur hexadcimale, comme #341276.
Dans cet exemple, nous traons une bordure pointille noire paisse de 4pixels autour
du tableau et une bordure continue rouge paisse de 1pixel autour des cellules de titre
<th> et des cellules de donnes <td> (voir Figure9.2).
<!DOCTYPE html>
<html>
<head>
<title>Bordures autour dun tableau</title>
<style>
table
{
border: 4px dashed black;
}
th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
</tr>
<tr>
<td>Elment 1 ligne 1</td>
Tableaux 145
</tr>
<tr>
</tr>
</table>
</body>
</html>
Figure9.2
Mise en place
de deux styles
de bordures.
Info
Lpaisseur, le style et la couleur des quatre lments qui composent une bordure
peuvent tre difrencis en utilisant les proprits suivantes:
paisseur: border-top-width, border-right-width, border-bottom-width,
border-left-width.
Style : border-top-style, border-right-style, border-bottom-style,
border-left-style.
Couleur : border-top-color, border-right-color, border-bottom-color,
border-left-color.
Fusionner et sparer des bordures
La proprit CSS border-collapse dtermine si les cellules dun tableau sont
spares (valeur separate) ou fusionnes (valeur collapse).
Les deux tableaux reprsents la Figure9.3 sont identiques, ceci prs que le premier
a une proprit border-collapse initialise separate et le second collapse.
Le code utilis est le mme qu la section prcdente, lexception dune dclaration de
style border-collapse, insre dans le style table:
table {
border: 4px dashed black;
border-collapse: collapse;
}
146 Chapitre 9
Figure9.3
Les bordures
peuvent tre
spares ou
fusionnes.
Espacer les cellules
La proprit border-spacing dtermine lespace qui spare les bordures des cellules
adjacentes dun tableau.
Dans cet exemple (voir Figure 9.4), nous dnissons un tableau encadr par une
bordure continue noire paisse de 1pixel. Les cellules (<td>) sont spares (border-
collapse: separate;) et espaces de 10pixels (border-spacing: 10px;). Pour
bien difrencier les cellules du tableau, une couleur darrire-plan a t afecte aux
balises <td> et une autre la balise <table>:
<!DOCTYPE html>
<html>
<head>
<title>Espacer les cellules dun tableau</title>
<style>
table {
text-align: center;
border-collapse: separate;
border-spacing: 10px;
background-color: #CFF4EF;
}
td {
width: 120px;
background-color: #F4CFD7;
}
</style>
</head>
<body>
<table>
<tr>
<td>Date</td>
<td>Articles</td>
<td>Prix</td>
</tr>
<tr>
Tableaux 147
<td>12/08</td>
<td>21</td>
<td>5412</td>
</tr>
<tr>
<td>17/08</td>
<td>14</td>
<td>1519</td>
</tr>
</table>
</body>
</html>
Figure9.4
Les bordures des
cellules sont espaces
de 10pixels.
Fusionner des cellules
Les cellules dun tableau peuvent tre fusionnes horizontalement et/ou verticalement
en utilisant respectivement les attributs colspan et rowspan. Par exemple, linstruction
suivante fusionne horizontalement la cellule courante avec la cellule suivante:
<td colspan="2">contenu</td>
Ou encore linstruction suivante fusionne verticalement la cellule courante avec les deux
cellules suivantes:
<td rowspan="2">contenu</td>
Pour bien comprendre le fonctionnement de ces deux attributs, rien de tel quun peu de
code. La Figure9.5 reprsente le tableau que nous voulons afcher.
Figure 9.5
Plusieurs fusions
de cellules sont
ncessaires pour arriver
ce rsultat.
148 Chapitre 9
Dans ce tableau, certaines cellules nont pas de bordures, dautres sont fusionnes
horizontalement ou verticalement, dautres encore sont plus traditionnelles et occupent
un seul emplacement dans le tableau. Voici le code lorigine de ce tableau:
<!DOCTYPE html>
<html>
<head>
<title>Arrire-plan des cellules</title>
<style>
table { border-collapse: collapse; }
td
{
text-align: center;
color: blue;
font-weight: bold;
font-size: 200%;
width: 200px;
}
td.sansbord {border: none; }
</style>
</head>
</body>
<table>
<tr><td rowspan="2" class="sansbord"></td><td rowspan="2" class="sansbord">
</td><td rowspan="2">Anne</td><td colspan="2">Bilan</td></tr>
<tr><td>Recettes</td><td>Dpenses</td></tr>
<tr><td rowspan="4">Dpartement</td><td rowspan=2>Informatique</td>
<td>2012</td><td>53</td><td>50</td></tr>
<tr><td>2013</td><td>56</td><td>50</td></tr>
<tr><td rowspan="2">Mathmatiques</td><td>2012</td><td>44</td><td>43</td>
</tr>
</table>
</body>
</html>
Pour faciliter la comprhension du code, chaque ligne du tableau est dcrite sur une
ligne HTML, entre les balises <tr> et </tr>. Il vous suft de dcrire ce qui doit safcher
dans le tableau, ligne par ligne. Examinons la premire ligne:
<tr><td rowspan="2" colspan="2"class="sansbord"></td><td rowspan="2">Anne</td>
<td colspan="2">Bilan</td></tr>
La premire cellule occupe deux lignes (rowspan="2") et deux colonnes (colspan="2")
et na pas de bordures (class="sansbord"). La deuxime cellule occupe deux lignes
(rowspan="2") et la dernire cellule occupe deux colonnes (colspan="2").
Observez la Figure9.5. La deuxime ligne du tableau ne comporte que deux cellules:
Recettes et Dpenses. Il nest donc pas ncessaire de dcrire les cellules prcdentes
puisquelles font dj partie de la ligne prcdente (rowspan="2"):
<tr><td>Recettes</td><td>Dpenses</td></tr>
Tableaux 149
Examinons la troisime ligne:
<tr><td rowspan="4">Dpartement</td><td rowspan=2>Informatique</td><td>2012</td>
<td>53</td><td>50</td></tr>
La premire cellule doit staler sur quatre lignes (rowspan="4") et la deuxime sur
deux lignes (rowspan="2"). Les cellules suivantes noccupent quun emplacement.
La ligne suivante ne dcrit que les cellules qui contiennent les valeurs 2013, 56 et 50. En
efet, les autres cellules ont dj t dcrites dans linstruction prcdente puisquelles
occupent plusieurs lignes:
Je pense que vous avez compris le principe. La ligne suivante contient la cellule
Mathmatiques qui stale sur deux lignes, et les cellules 2012, 44 et 43:
<tr><td rowspan="2">Mathmatiques</td><td>2012</td><td>44</td><td>43</td></tr>
Enn, la dernire cellule contient les cellules 2013, 48 et 42. Les premires cellules
(Dpartement et Mathmatiques) ont t dcrites dans les instructions prcdentes:
Ajouter une lgende au tableau
La balise <caption> permet dajouter une lgende un tableau. Elle doit tre unique
et insre immdiatement aprs la balise <table>. Par dfaut, la lgende est afche
au-dessus du tableau et centre horizontalement sur le tableau. Cependant, vous pouvez
utiliser la proprit CSS caption-side pour prciser lemplacement de la lgende.
Cette proprit peut prendre les valeurs suivantes:
top: lgende au-dessous du tableau (valeur par dfaut).
bottom: lgende au-dessus du tableau.
left: lgende gauche du tableau.
right: lgende droite du tableau.
Bien entendu, vous pouvez xer un ou plusieurs autres arguments dans le style de
llment caption, en particulier lalignement du texte, la taille et les attributs des
caractres.
Dans cet exemple (voir Figure 9.6), nous afchons la lgende au-dessous du tableau
(caption-side: bottom;) et nous modions les attributs du texte de la lgende :
caractres en italique (font-style: italic;) et texte align droite de llment
table (text-align: right;).
<!DOCTYPE html>
<html>
<head>
<title>Lgender un tableau</title>
<style>
table, td {
border-collapse: collapse;
150 Chapitre 9
}
table > caption {
caption-side: bottom;
font-style: italic;
text-align: right;
}
</style>
</head>
<body>
<table border>
<caption>Titre du tableau</caption>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Figure9.6
La lgende a t mise
en forme et safche
au-dessous et droite
du tableau.
Arrire-plan des cellules
Larrire-plan des cellules peut tre une couleur uniforme ou une image. Dans le premier
cas, vous utiliserez la proprit background-color et, dans le second, la proprit
background: url.
Dans cet exemple, nous appliquerons trois textures darrire-plan, librement tlcharges
sur le site www.webtexture.net. La texture fond1.jpg est applique la premire ligne du
tableau, la texture fond2.jpg la premire colonne du tableau (hormis la premire ligne)
et la texture fond3.jpg toutes les autres cellules (voir Figure9.7).
<!DOCTYPE html>
<html>
<head>
<title>Arrire-plan des cellules</title>
Tableaux 151
<style>
table {
text-align: center;
color: blue;
font-weight: bold;
font-size: 200%;
}
td {width: 200px;}
td.fond1 { background:url(fond1.jpg); }
</style>
</head>
</body>
<table>
<tr>
<td class="fond1">Date</td>
<td class="fond1">Articles</td>
<td class="fond1">Prix</td>
</tr>
<tr>
<td class="fond2">12/08</td>
<td class="fond3">21</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
152 Chapitre 9
Figure9.7
Trois textures
darrire-plan
sont appliques
aux cellules de
ce tableau.
Alignement dans les cellules
Vous utiliserez les proprits CSS text-align et vertical-align pour dnir
(respectivement) lalignement horizontal et vertical des cellules dans un tableau.
La proprit text-align peut prendre les valeurs left (gauche), right (droite),
center (centr) ou justify ( justi).
La proprit vertical-align peut prendre les valeurs top (alignement sur la partie
suprieure de la cellule), bottom (alignement sur la partie infrieure de la cellule) ou
middle (centr sur la hauteur de la cellule).
Cet exemple utilise les trois valeurs possibles pour les proprits text-align et
vertical-align travers les classes c1, c2 et c3, successivement appliques aux
cellules des premire, deuxime et troisime lignes de la table (voir Figure 9.8). An
que vous puissiez bien visualiser lefet des difrents types dalignements, la taille des
cellules a t modie (width: 200px; et height: 40px;).
<!DOCTYPE html>
<html>
<head>
<title>Alignement des cellules</title>
<style>
td { border: 1px solid black; }
td { width: 200px; height: 40px; }
td.c1 { text-align: center; vertical-align: middle; }
td.c2 { text-align: left; vertical-align: top; }
td.c3 { text-align: right; vertical-align: bottom; }
</style>
</head>
<body>
<table>
<tr>
<tr>
<td class="c1">Date</td>
<td class="c1">Articles</td>
Tableaux 153
<td class="c1">Prix</td>
</tr>
<tr>
<td class="c2">12/08</td>
<td class="c2">21</td>
</tr>
<tr>
<td class="c3">17/08</td>
</tr>
</table>
</body>
</html>
Figure9.8
Alignements horizontal
et vertical dans les
cellules dun tableau.
Difrencier lignes paires et lignes
impaires
Pour amliorer la lisibilit des tableaux contenant de nombreuses colonnes, il est courant
dalterner les difrentes couleurs des lignes. Le pseudo-slecteur tr:nth-child()
vous sera dune grande aide. En efet, en prcisant odd ou even entre les parenthses,
CSS slectionne les lignes impaires ou les lignes paires. Il suft alors de leur appliquer la
couleur darrire-plan souhaite.
Dans cet exemple, les lignes impaires (odd) ont un arrire-plan de couleur silver et les
lignes paires (even) un arrire-plan blanc (voir Figure9.9).
<!DOCTYPE html>
<html>
<head>
<title>Difrenciation des lignes paires/impaires</title>
<style>
table { border: 1px solid black; }
tr:nth-child(odd) { background-color: silver; }
tr:nth-child(even) { background-color: white; }
td { width: 200px; text-align: center; }
154 Chapitre 9
</style>
</head>
</body>
<table>
<tr><td>Date</td><td>Articles</td><td>Prix</td></tr>
<tr><td>12/08</td><td>21</td><td>5412</td></tr>
</table>
</body>
</html>
Figure9.9
Lalternance
des couleurs
amliore la
lisibilit du
tableau.
Mise en forme des cellules vides
Le pseudo-slecteur:empty permet de sadresser aux cellules vides dun tableau. Il est
alors trs simple de les mettre en vidence en modiant leur couleur darrire-plan ou
leur bordure.
Dans cet exemple, toutes les cellules ont un arrire-plan de couleur #dfd, lexception
des cellules vides, qui ont un arrire-plan de couleur grise (voir Figure9.10).
<!DOCTYPE html>
<html>
<head>
<title>Bordure des cellules vides</title>
<style>
td { background-color: #dfd; border: 1px solid black; padding: 5px;}
:empty {background-color: grey; }
</style>
</head>
<body>
<table id="table1">
<tr><td>Elment 1 ligne 1</td><td></td><td>Elment 3 ligne 1</td></tr>
<tr><td></td><td>Elment 2 ligne 2</td><td>Elment 3 ligne 2</td></tr>
</table>
</body>
</html>
Tableaux 155
Figure9.10
Les cellules vides
sont difrencies des
autres en jouant sur
leur couleur darrire-
plan.
Arrondis et ombrages
Les proprits CSS border-radius, border-shadow et text-shadow peuvent tre
utilises dans un tableau pour (respectivement) arrondir les angles du tableau, dnir un
ombrage sur le tableau et sur le texte afch dans le tableau. Dans cet exemple, nous
allons agir sur les caractristiques suivantes:
angles arrondis;
ombrage du tableau;
ombrage du texte dans les balises <th>;
dnition dune largeur de cellule xe et centrage des donnes dans les cellules.
Figure9.11
Le tableau mis en
forme a une re
allure!
<!DOCTYPE html>
<html>
<head>
<title>Arrondis et ombrages</title>
<style>
table {
border: 4px double black;
border-spacing: 0;
text-align: center;
color: blue;
font-weight: bold;
156 Chapitre 9
font-size: 200%;
box-shadow: gray 5px 5px 6px;
}
th {
color: #ff;
font-size: 110%;
text-shadow: gray 2px 2px 2px;
}
td { width: 200px; }
</style>
</head>
</body>
<table>
<tr><th>Date</th><th>Articles</th><th>Prix</th></tr>
</table>
</body>
</html>
Tableaux 157 Tableaux 157
Exercice 9
Vous allez complter le code dni dans les exercices prcdents. Dnissez la page
news.htm pour afcher les news du site, comme dans la Figure9.12.
Figure 9.12
Le rsultat
atteindre.
Comme vous le voyez, les news sont afches dans un tableau comportant une ligne de
titre et une ligne pour chaque news. Les lignes sont colores alternativement en gris et
en blanc, les bordures sont arrondies, et une ombre porte est dnie en bas et droite
du tableau.
10
Mise en page
Ce chapitre est trs important. Il sintresse au nouveau dcoupage des pages en HTML5
et aux techniques de mise en page en CSS3. Vous y dcouvrirez entre autres comment
modier le comportement block ou inline des balises, comment donner un aspect
smantique votre code HTML5, ou encore comment dnir un afchage qui sadapte
la largeur de la fentre (adaptative Web design).
inline, block ou les deux?
Les balises HTML sont utilises pour afcher des donnes sur lcran ou pour encapsuler
dautres balises HTML. On peut classer ces balises en deux grands groupes : inline
et block. Comme leur nom le suggre, les lments de type inline safchent
horizontalement, les uns derrire les autres, si la largeur de la fentre le permet.
Inversement, les lments de type block safchent verticalement, les uns aprs les
autres.
Les balises de type inline sont les suivantes:
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>,
<samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>,
<textarea>, <tt> et <var>.
Les balises de type block sont les suivantes:
<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>,
<div>, <dl>, <feldset>, <fgcaption>, <fgure>, <footer>, <form>, <h1>
<h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>,
<section>, <table>, <tfoot>, <ul>, <video>.
Contrairement aux balises de type inline, les balises de type block peuvent tre
redimensionnes et positionnes de faon absolue sur une page. Il est parfois ncessaire
de redimensionner et/ou de positionner de faon absolue une balise de type inline.
Dans ce cas, on lui afecte un rendu inline-block avec cette instruction CSS:
lment { display: inline-block; }
O lment est llment HTML (la balise sans les signes "<" et ">") dont on dsire
changer le type.
Bien quelle soit toujours utilise pour des raisons de rtrocompatibilit, la catgorisation
inline et block des balises na plus cours en HTML5. Cette mouture du langage
160 Chapitre 10
dnit un nouveau schma de structuration de donnes: les lments sont regroups
de manire logique selon leurs rles smantiques. Par exemple, <span> et <strong>
appartiennent au groupe text-level semantics, ou encore <img>, <audio> et <video>
appartiennent au groupe embedded content. Le tableau ci-aprs dtaille le contenu des
principaux groupes smantiques
Groupes smantiques lments
root html
metadata head, title, base, link, meta, style
scripting script
sections body, section, nav, article, aside, h1 h6, hgroup, header,
footer, address
grouping content p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, fgure, fgcaption,
div
text-level semantics a, em, strong, small, s, cite, g, dfn, abbr, time, code, var, samp,
kbd, sub, sup, i, b, mark, ruby, rt, rp, bdi, bdo, span, br, wbr
edits ins, del
embedded content img, iframe, embed, object, param, video, audio, source,
track, canvas, map, area, MathML, svg
tabular data table, caption, colgroup, col, tbody, thread, tfoot, tr, td, th
forms form, feldset, legend, label, input, button, select,
datalist, optgroup, option, textarea, keygen, output,
progress, meter
interactive elements details, summary, command, menu, device
Le rendu inline, block ou inline-block dpend du CSS et na rien voir avec
la spcication HTML5. En tant que dveloppeur HTML5, vous ne devez donc pas
confondre les groupes dappartenance HTML5 et le rendu CSS.
Nouvelle organisation des documents
Bien souvent, les pages Web sont constitues dun en-tte et dun pied de page, dun
menu, dune zone rserve au contenu (article, images, vidos, etc.) et, ventuellement,
dune zone annexe, nayant aucun rapport direct avec le contenu de la page (voir
Figure10.1). Ce type de page est souvent dni laide de plusieurs balises <div>:
Mise en page 161
Figure 10.1
Une page Web
traditionnelle
constitue dun
assemblage de
balises <div>.
<!DOCTYPE html>
<html>
<head>
<title>Une page avec en-tte, pied de page, menu, zone annexe et zone de
contenu</title>
<link rel="stylesheet" href="style0.css">
</head>
<body>
<div id="entete">
<h1>En-tte du document</h1>
Texte de len-tte
</div>
<div id="barre-navigation">
<h2>Menu</h2>
<ul>
<br><br>
</ul>
</div>
<div id="barre-droite">
Texte annexe, afich dans la partie droite de la page<br><br>
</div>
<div class="article">
Zone rserve au contenu de la page
<h2>Premier article</h2>
Texte du premier article
</div>
<div class="article">
<h2>Deuxime article</h2>
162 Chapitre 10
Texte du deuxime article
</div>
<div id="pied-de-page">
<p>Copyright et e-mail du webmaster</p>
</div>
</body>
</html>
Voici le code CSS correspondant, stock dans le chier style0.css:
#entete { background-color: red; }
#barre-navigation {
foat:left;
width:20%;
background-color:yellow;
}
#barre-droite {
foat:right;
width:20%;
background-color:gray;
}
h2 { margin:0; padding:0; }
.article { width:80%; background-color: #66FFFF; }
#pied-de-page { clear:both; background-color: #99FF66; }
En HTML5, le code a une tout autre allure: les balises <div> disparaissent au prot de
balises ayant une plus forte connotation smantique. Si le rsultat nal est trs proche du
prcdent (voir Figure10.2), le code HTML a un aspect compltement difrent:
Figure 10.2
Le rendu est
quasiment identique
mais, ici, les balises
<div> ont disparu
du code.
<!DOCTYPE html>
<html>
<head>
<title>Un document HTML5 avec en-tte, pied de page, menu, zone annexe et
zone de contenu</title>
Mise en page 163
<link rel="stylesheet" href="style1.css">
<script src="Creation-elements-HTML5.js"></script>
</head>
<body>
<header>
<h1>En-tte du document</h1>
Texte de len-tte
</header>
<nav>
<h2>Menu</h2>
<ul>
</ul>
<br><br><br>
</nav>
<aside>
Texte afich dans la partie droite de la page avec la balise <
aside><br><br>
</aside>
<article>
<h2>Premier article</h2>
<p>Texte du premier article</p>
</article>
<article>
<h2>Deuxime article</h2>
<p>Texte du deuxime article</p>
</article>
<footer>
<p>Copyright et e-mail du webmaster</p>
</footer>
</body>
</html>
Comme vous pouvez le voir, les balises <div> ont t remplaces par les balises
<header>, <nav>, <aside>, <article> et <footer>.
<article> correspond une entit autonome du document: par exemple, un article
(ou un ensemble darticles) extrait dun blog ou dun forum.
<aside> dnit un contenu qui na pas de rapport direct avec la page. Il peut tre
utilis pour dnir un menu ou pour donner accs aux archives du site.
<header> et <footer> dnissent len-tte et le pied de page dune section ou
dune page Web.
<nav> est destin contenir des liens de navigation dans le site.
Len-tte du document fait appel la feuille de styles style1.css. Voici le code utilis:
header, nav, article, section, footer, aside { display: block; }
header { background-color: red; }
nav {
foat:left;
164 Chapitre 10
width:20%;
background-color:yellow;
}
article { background-color: #66FFFF; width:80%; }
aside {
foat:right;
width:20%;
background-color:gray;
}
footer { clear:both; background-color: #99FF66; }
Dans ces instructions, notez que le rendu block (display: block;) a t afect aux
nouveaux lments HTML5. Cette pratique assure le support de ces nouveaux lments
dans les navigateurs peu ou pas compatibles.
Les navigateurs Internet Explorer8 et infrieur ne sont pas en mesure dafecter un style
aux nouveaux lments HTML5. En efet, puisquils ne les connaissent pas, ils doivent
les intgrer au DOM via la mthode createElement. Pour ce faire, quelques lignes de
JavaScript sont ncessaires. Cest la raison dtre du script Creation-elements-HTML5.js,
invoqu dans len-tte du document HTML5. Voici le code utilis:
document.createElement("footer");
document.createElement("header");
document.createElement("article");
document.createElement("nav");
document.createElement("aside");
Attention
Cette technique dpend de JavaScript. Sil nest pas activ sur un client Internet Explorer,
les nouveaux lments HTML5 seront de type inline par dfaut, et les pages ne seront
pas bien reprsentes!
Positionner les lments afchs sur
une page
Lorsque aucune rgle CSS de mise en page nest dnie, les lments safchent les uns
aprs les autres, en partant de la balise <body> jusqu la balise </body>. Lafchage
se fait sur une mme ligne si les lments sont de type inline. Il se fait verticalement si
les lments sont de type block
1
.
La proprit CSS position permet de modier lordre dafchage squentiel des
lments. Quatre techniques de positionnement peuvent tre utilises: static, fxed,
relative et absolute.
1.. Je devrais plutt dire "Lafchage se fait sur une mme ligne si les balises appartiennent un groupe
smantique de rendu inline. Il se fait verticalement si les balises appartiennent un groupe smantique de
rendu block." Mais je suis sr que vous me pardonnerez cet abus de langage.
Mise en page 165
Positionnement static
Il sagit du positionnement par dfaut des lments, cest--dire lorsque aucune rgle
de mise en page nest dnie. Les lments positionns de faon statique suivent le ux
normal de la page, en fonction de leur rendu (inline ou block) et des ventuels autres
lments rencontrs sur leur chemin. Les proprits CSS top, bottom, left et right
nont aucun efet sur ces lments.
Positionnement fixed
Lorsquun lment a un positionnement fxed, il reste immobile dans la page. Sa
position est dtermine par ses proprits CSS top, left, bottom et right. Quelques
consquences pour les lments de position xe:
Ils sont insensibles la position des barres de dlement du navigateur.
Ils sortent du ux normal de lafchage: cest comme sils nexistaient pas.
Ils peuvent se superposer aux autres lments afchs dans la page.
Voici un exemple de positionnement fxed. Ici, le paragraphe de classe fxe est positionn
20pixels du bord suprieur et 10pixels du bord gauche de la zone dafchage du
navigateur. Pour bien difrencier ce texte du reste de la page, ses caractristiques ont
t modies. Les caractres apparaissent en rouge et ont une taille trois fois suprieure
la taille par dfaut. La Figure10.3 montre que le texte positionn en fxed est insensible
la position de la barre de dlement verticale du navigateur.
<!DOCTYPE html>
<html>
<head>
<title>Positionnement fxe</title>
p.fxe {
font-size: 300%;
color: red;
position: fxed;
top: 20px;
left: 10px;
}
</style>
</head>
<body>
<p class="fxe">Texte en position fxe</p>
But I must explain to you how all this mistaken idea of denouncing pleasure and
praising pain was born and I will give you a complete account of the system,
and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because those who do not know how to pursue
pleasure rationally encounter consequences that are extremely painful. Nor
again is there anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in which
toil and pain can procure him some great pleasure. To take a trivial example,
which of us ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to fnd fault with a man who chooses to
166 Chapitre 10
enjoy a pleasure that has no annoying consequences, or one who avoids a pain
that produces resultant pleasure
</body>
</html>
Figure 10.3
Le texte positionn en fxed
se trouve toujours au mme
emplacement.
Toutes les balises qui produisent un afchage dans le navigateur peuvent tre positionnes
en fxed (<p>, <img>, <table>, <div>, etc.). Supposons que vous vouliez utiliser
une image xe en arrire-plan dune page. Vous utiliserez la proprit background-
attachment (et non la proprit position) pour arriver vos ns (voir Figure10.4):
body {
background:url(chat.jpg) top right no-repeat;
background-attachment:fxed;
}
Info
Si lide vous est venue dutiliser la proprit opacity pour modier lopacit de
limage darrire-plan, sachez que cette technique nest pas possible. Elle aurait pour
consquence de modier lopacit du texte afch dans le corps du document, et donc
de le rendre encore moins lisible. Si vous voulez jouer sur lopacit de limage darrire-
plan, vous devez utiliser un logiciel graphique quelconque pour agir directement sur
limage.
Mise en page 167
Figure 10.4
Limage darrire-plan est xe dans
la page et reste insensible la
position des barres de dlement.
Positionnement relative
Lorsquun lment est position de faon relative, ses proprits top, bottom, left et
right permettent de le dcaler par rapport sa position originale.
Dans ce premier exemple, trois titres h2 sont afchs. Le premier nest pas repositionn.
Le deuxime est dcal de 20pixels vers la gauche et le troisime de 20pixels vers la
droite (voir Figure10.5).
<!DOCTYPE html>
<html>
<head>
<title>Positionnement relative</title>
h2.gauche20 {
position:relative;
left:-20px;
}
h2.droite20 {
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>Un titre h2 non repositionn</h2>
<h2 class="gauche20">Un titre h2 dcal de 20px gauche</h2>
<h2 class="droite20">Un titre h2 dcal de 20px droite</h2>
</body>
</html>
168 Chapitre 10
Figure 10.5
Les deuxime et
troisime titres h2
sont dcals par
un positionnement
relatif.
Deux remarques:
1. Lorsquun lment est positionn de faon relative, il peut se superposer aux autres
lments afchs dans la page.
2. Lespace rserv lafchage de llment repositionn est toujours rserv dans le
ux de la page.
Lexemple de code suivant devrait apporter des rponses vos questions si vous vous
en posez encore. Ici, trois titres h2 sont afchs. Le premier et le troisime ne sont pas
repositionns. Le deuxime est dcal de 50pixels vers le haut et vers la droite. Comme
le montre la Figure 10.6, les premier et deuxime titres h2 se superposent et lespace
rserv au deuxime titre h2 est conserv dans le ux.
<!DOCTYPE html>
<html>
<head>
<title>Positionnement relative</title>
h2.hautdroite50 {
position:relative;
top:-50px;
left: 50px;
color: red;
}
</style>
</head>
<body>
<h2>Un titre h2 non repositionn</h2>
<h2 class="hautdroite50">Un titre h2 dcal de 20px gauche</h2>
<h2>Un autre titre h2 non repositionn</h2>
</body>
</html>
Mise en page 169
Figure 10.6
Le deuxime titre
h2 est dcal de 50
pixels vers le haut et
la droite.
Positionnement absolute
Lorsquun lment est positionn de faon absolue, on dnit ses coordonnes par
rapport au premier lment parent dont le positionnement nest pas statique. En labsence
dun tel lment, le positionnement se fait par rapport la balise <html>.
Voici un exemple de code. Ici, un paragraphe est positionn de faon absolue 50pixels
du bord suprieur et 50pixels du bord gauche de la page (voir Figure10.7).
<!DOCTYPE html>
<html>
<head>
<title>Positionnement absolute</title>
.abs50-50 {
position:absolute;
top:50px;
left: 50px;
color: red;
font-size: 200%;
}
</style>
</head>
<body>
<p class="abs50-50">Ce texte est positionn de faon absolue 50 pixels du
bord suprieur et 50 pixels du bord gauche de la page.</p>
<p>But I must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete account
of the system, and expound the actual teachings of the great explorer of the
truth, the master-builder of human happiness. No one rejects, dislikes, or
avoids pleasure itself, because it is pleasure, but because those who do not
know how to pursue pleasure rationally encounter consequences that are
extremely painful. Nor again is there anyone who loves or pursues or desires to
obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure.
To take a trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any right
to fnd fault with a man who chooses to enjoy a pleasure that has no annoying
consequences, or one who avoids a pain that produces resultant pleasure</p>
</body>
</html>
170 Chapitre 10
Figure 10.7
Positionnement absolu dun
paragraphe.
Contrairement aux lments positionns de faon relative, les lments positionns de
faon absolue ne font plus partie du ux de la page. Aucun espace vide nest donc afch
lemplacement quils auraient occup sils navaient pas t repositionns.
Faire otter un lment
Vous savez maintenant comment positionner des lments dans une page en modiant
leur proprit position. Vous pouvez galement jouer sur la proprit foat pour
retirer un lment du ux de la page et le positionner le plus possible vers la gauche
(foat: left;) ou vers la droite (foat: right;) dans son conteneur.
Ce mode de positionnement est essentiellement utilis pour crer des mises en page qui
sadaptent la largeur de la fentre et pour aligner des images. titre dexemple, nous
allons initialiser left la proprit foat de trois balises <div> pour les faire otter
gauche de la page. Chacune de ces balises contient une image et un bouton. Lorsque
lun des boutons est cliqu, la valeur none est afecte la proprit display du
<div> correspondant, ce qui provoque sa disparition de la page et le repositionnement
gauche des <div> restants (voir Figure10.8).
Figure 10.8
La ou les images
qui suivent le
<div> supprim
se repositionnent
automatiquement sur la
gauche de la page.
Mise en page 171
Voici le code utilis:
<!DOCTYPE html>
<html>
<head>
<title>Positionnement foat</title>
div {
width: 100px;
padding: 5px;
margin-left: 10px;
foat: left;
text-align: center;
}
</style>
</head>
<body>
<div id="mini1"><img src="mini1.jpg"><br><button id="bouton1">Supprimer</
button></div>
button></div>
button></div>
<script>
$(function(){
$('#bouton1').click(function(){
$('#mini1').css('display','none');
});
});
});
});
</script>
</body>
</html>
Examinons ce code.
Le corps du document contient trois balises <div> didentiants #mini1, #mini2 et
#mini3. Chacune des balises <div> contient une image et un bouton. Ce bouton a
pour identiant #bouton1 dans le premier <div>, #bouton2 dans le deuxime et
#bouton3 dans le troisime.
Le style div modie lallure des trois balises <div>. Une bordure pointille de couleur
noire paisse de 1pixel est afche autour du <div>. La largeur de llment est xe
100pixels, une marge interne de 5pixels est dnie tout autour de llment, une marge
gauche de 10 pixels est dnie pour espacer les <div> entre eux et un alignement
172 Chapitre 10
centr est dni pour centrer limage et le bouton dans les 100pixels attribus chaque
<div>.
Vous vous en doutez, cest le code jQuery qui provoque la disparition des <div>.
Lorsquun bouton est cliqu:
La proprit display de la balise <div> correspondante est initialise none via la
fonction css(), ce qui provoque la disparition du <div> et le ralignement gauche
des <div> restants:
Mise en page sur plusieurs colonnes
Quelques instructions CSS3 sufsent pour dnir un multicolonnage. Alors que jcris ces
lignes, cette technique fonctionne sans prxe dans les navigateurs Internet Explorer10
et suprieur, et partiellement avec prxe dans les navigateurs Gecko et WebKit.
Pour dnir un multicolonnage CSS3, il suft de xer la largeur des colonnes et lespace
entre deux colonnes. Voici le code utilis:
<!DOCTYPE html>
<html>
<head>
<title>Multicolonnage</title>
<style>
.multi-col {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}
</style>
</head>
<body>
<div class="multi-col">
Iam summus Pater architectus Deus hanc quam videmus mundanam domum,
divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat.
Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis
vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena
animalium turba complerat. Sed, opere consummato, desiderabat artifex
testantur) absolutis, de producendo homine postremo cogitavit. Verum nec
erat in archetypis unde novam sobolem efingeret, nec in thesauris quod novo
flio hereditarium largiretur, nec in subselliis totius orbis, ubi universi
</div>
</body>
</html>
Mise en page 173
Le corps du document se contente de dnir une balise <p> de classe multi-col et
de lui afecter un long texte. La partie intressante du code se trouve dans le CSS3. La
classe multi-col dnit la largeur des colonnes pour les navigateurs Mozilla et WebKit.
.multi-col
{
Lespace entre les colonnes est x 20pixels:
column-gap: 20px;
Comme vous pouvez le constater (voir Figures 10.9 et 10.10), le nombre de colonnes
dpend de la largeur de la page dans le navigateur.
Figure10.9
Ici, le texte occupe
quatre colonnes.
Figure10.10
La largeur de la
page tant plus
importante, le texte
occupe maintenant six
colonnes.
Si le nombre de colonnes doit rester xe, utilisez les proprits CSS3 -moz-column-
count, -webkit-column-count et column-count. Par exemple, pour dnir trois
colonnes, quelle que soit la largeur de la fentre, ajoutez les trois lignes suivantes dans
la classe multi-col:
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
Si ncessaire, vous pouvez galement insrer un trait sparateur entre les colonnes
en utilisant les proprits CSS3 -moz-column-rule, -webkit-column-rule et
column-rule dont voici la syntaxe:
-moz-column-rule: largeur style couleur;
174 Chapitre 10
-webkit-column-rule: largeur style couleur;
column-rule: largeur style couleur;
O:
largeur est la largeur du trait en pixels.
style est le style du trait. Il peut prendre lune des valeurs suivantes : dotted,
dashed, solid, insert, double, groove, ridge ou outset.
couleur est la couleur du trait.
Par exemple, pour dnir un trait sparateur continu noir et dpaisseur 1 pixel, vous
utiliserez les deux proprits suivantes:
-moz-column-rule: 1px solid black;
-webkit-column-rule: 1px solid black;
column-rule: 1px solid black;
Pour terminer, sachez quil est possible de dnir la couleur darrire-plan du texte avec
la proprit background et lalignement du texte dans les colonnes avec la proprit
text-align. Par exemple, pour afecter un arrire-plan gris et pour justier le texte
dans les colonnes, servez-vous des proprits suivantes:
background:#ccc;
text-align:justify;
La Figure 10.11 reprsente lafchage du document prcdent dans lequel plusieurs
proprits CSS3 ont t ajoutes.
.multi-col {
-moz-column-count: 3;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-rule: 1px solid black;
column-gap: 20px;
column-count: 3;
column-rule: 1px solid black;
background:#ccc;
text-align:justify;
}
Figure10.11
Le texte est
maintenant afch
sur trois colonnes,
indpendamment
de la largeur de la
fentre.
Mise en page 175
Info
La proprit -webkit-column-rule rassemble plusieurs paramtres qui peuvent
tre diviss en -webkit-column-rule-color, -webkit-column-rule-style et
-webkit-column-rule-width. Il en va de mme de la proprit -moz-column-
rule qui peut tre divise en -moz-column-rule-color, -moz-column-rule-
style et -moz-column-rule-width. Et de la proprit column-rule qui peut tre
divise en column-rule-color, column-rule-style et column-rule-width.
Marges
Toutes les balises visuelles (cest--dire celles qui afchent du contenu sur lcran)
possdent des marges internes et externes. Vous pouvez modier ces marges en agissant
sur les proprits CSS padding (marges internes) et margin (marges externes). titre
dexemple, le code suivant dnit une balise <div> et y insre du texte. Quelques rgles
mettent en vidence les marges internes et externes (voir Figure10.12):
<!DOCTYPE html>
<html>
<head>
<title>Margin et padding</title>
<style>
body { background-color: yellow; }
div {
margin: 100px;
padding: 50px;
background-color: red;
width: 300px;
height: 250px;
text-align: justify;
}
</style>
</head>
<body>
<div>At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident, similique sunt
in culpa qui oficia deserunt mollitia animi, id est laborum et dolorum fuga. Et
harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
placeat facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus.</div>
</body>
</html>
176 Chapitre 10
Figure 10.12
Les marges internes
sont xes
50pixels et les
marges externes
100pixels.
Examinons le code CSS.
Larrire-plan du document a une couleur jaune:
body { background-color: yellow; }
Les marges externes de la balise <div> sont xes 100pixels et les marges internes
50pixels:
div {
margin: 100px;
padding: 50px;
La balise <div> est dimensionne 300250 pixels, son arrire-plan est de couleur
rouge et le texte qui y est afch est justi:
width: 300px;
height: 250px;
text-align: justify;
Info
Si ncessaire, il est possible de difrencier les quatre marges internes ou externes en
utilisant les proprits CSS suivantes. Pour les marges externes: margin-top, margin-
left, margin-bottom et margin-right. Pour les marges internes: padding-top,
padding-left, padding-bottom et padding-right.
Mise en page 177
Responsive Web Design
(Media Queries CSS)
Le Web est de plus en plus consult sur des priphriques de petite taille (tlphones,
tablettes, netbooks). Cest pourquoi il est trs important dadapter lafchage de vos
pages ces nouveaux modes de consultation. Jusqu rcemment, les concepteurs
de sites Web se voyaient contraints de crer deux versions de leurs pages : une pour
les ordinateurs et une pour les priphriques mobiles de petite taille. Aujourdhui, les
Media Queries du langage CSS3 proposent une solution simple, lgante et trs efcace
ce problme. Ils permettent en efet de dnir le style dune page Web en fonction
de plusieurs facteurs lis la surface dafchage: la largeur, la hauteur, lorientation, la
rsolution, etc. Cerise sur le gteau: la plupart des navigateurs actuels (Internet Explorer,
Firefox, Firefox Mobile, Chrome, Safari, Safari Mobile, iOS Safari, Android, Opera Mini,
Opera Mobile et BlackBerry) sont compatibles avec cette fonctionnalit.
Les Media Queries sont des expressions dont la valeur est vraie ou fausse. Lorsquun
Media Query a pour valeur true, les instructions situes entre les accolades qui le
suivent sont excutes. Elles sont ignores dans le cas contraire.
Si ncessaire, vous pouvez associer plusieurs expressions laide doprateurs logiques:
Oprateur Signication
and et
only uniquement: masque la suite sur les navigateurs non compatibles avec les Media
Queries
not non
or ou
Les Media Queries reposent sur la proprit CSS3 @media. Le tableau suivant rassemble
quelques-unes des syntaxes utilisables:
Syntaxe Signication
@media (max-width: largeur) { } Largeur de la fentre infrieure la largeur
spcie
@media (max-device-width:
largeur) { }
Largeur du priphrique infrieure la largeur
spcie
@media (min-width: largeur1) and
(max-width: largeur2) { }
Largeur de la fentre comprise entre les deux
largeurs spcies
@media (max-device-width:
largeur) and (orientation:
landscape) { }
Largeur du priphrique infrieure la largeur
spcie, et cran tenu horizontalement
178 Chapitre 10
Voici un exemple de code. Ici, quatre <div> sont afches. En fonction de la rsolution
du priphrique (max-device-width) ou de lcran (min-width et max-width), lune
des <div> voit son arrire-plan color en rouge.
<!DOCTYPE html>
<html>
<head>
<title>Media Queries</title>
<style>
div {
border: dotted 1px #666;
padding: 5px 10px;
margin: 40px;
}
@media (max-device-width: 480px) {
.iphone {
background: red;
}
}
@media (max-width: 600px) {
.inf600 {
background: red;
}
}
@media (min-width: 900px) {
.sup900 {
background: red;
}
}
@media (min-width: 600px) and (max-width: 900px) {
.de600a900 {
background: red;
}
}
</style>
</head>
<body>
<div class="iphone">Cette div apparat en rouge si la largeur maximale de
lcran est de 480 pixels</div>
<div class="inf600">Cette div apparat en rouge si la largeur de la fentre
est infrieure 600 pixels</div>
<div class="de600a900">Cette div apparat en rouge si la largeur de la
fentre est comprise entre 600 et 900 pixels</div>
<div class="sup900">Cette div apparat en rouge si la largeur de la fentre
est suprieure 900 pixels</div>
</body>
</html>
La Figure10.13 illustre plusieurs excutions de ce code, en utilisant difrentes largeurs
de fentre.
Mise en page 179
Figure 10.13
La mise en forme
dpend de la
largeur de la
fentre.
Info
Il est galement possible dutiliser un chier CSS ou un autre en fonction de la rsolution
du priphrique/de lcran. Pour cela, vous insrerez des lments link du type suivant
dans len-tte du document. Ici, le style 600px.css est utilis si lcran a une largeur
infrieure 600pixels.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css" />
Si ces quelques rudiments de Media Queries vous ont laiss sur votre faim, je vous
conseille de consulter les pages https://developer.mozilla.org/fr/docs/CSS/Media_
queries, www.w3.org/TR/css3-mediaqueries/ et www.w3.org/TR/css3-mediaqueries/
pour en savoir un peu plus.
Optimiser les pages dun site Web
En tant que concepteur de sites Web, il est important de rassembler le code CSS dans
une feuille de styles externe et dy faire rfrence dans chacune de vos pages en utilisant
une balise <link> dans len-tte, entre les balises <head> et </head>:
<link rel="stylesheet" href="maFeuilleDeStyles.css">
De mme, je vous conseille de rassembler vos codes jQuery dans un chier externe et
dy faire rfrence dans chacune de vos pages en utilisant une balise <script>, aprs
avoir invoqu la bibliothque jQuery sur un CDN:
<script src="monCodeJquery.js"></script>
Enn, si vos pages sont construites sur le mme modle, vous pourrez restreindre
lcriture de code en plaant les parties constantes du code HTML dans autant de chiers
que ncessaire et en invoquant ces chiers laide de linstruction PHP $include.
Supposons, par exemple, que le dbut et la n de vos pages utilisent systmatiquement
le mme code. Vous pourriez crer les chiers debut.htm et n.htm, et insrer ces deux
chiers dans vos pages comme ceci:
180 Chapitre 10
<?php
include "debut.htm">
?>

<?php
include "fn.htm">
?>
Info
Pour que ce code puisse fonctionner, vous devez le stocker sur le serveur dans un chier
dextension .php. Bien entendu, ces instructions ne donneront aucun rsultat en local,
sauf si vous installez un serveur PHP, tel WAMP Server (www.wampserver.com).
Mise en page 181 Mise en page 181
Exercice 10
Remplacez les balises <div> utilises dans la page index.htm par leurs quivalents
smantiques HTML5: <header>, <nav>, <article> et <footer>.
Exercice 11
Dnissez une mise en page qui sadapte la largeur de la fentre pour la page index.
htm. Lorsque la fentre a une largeur infrieure ou gale 900 pixels:
Supprimez le titre "eFormation HTML5 CSS3 jQuery" dans le bandeau den-tte.
Transformez le menu <ul> en une liste <select>.
Exercice 12
Appliquez la technique dcrite dans la section "Optimiser les pages dun site Web" pour
insrer les instructions jQuery dans un chier annexe que vous appellerez jquerysite.js.
Appliquez la technique PHP dcrite dans la section "Optimiser les pages dun site Web"
pour optimiser le dcoupage du chier index.htm. Pour cela:
1. Dnissez les parties constantes dindex.htm dans deux chiers nomms debut.htm
et n.htm.
2. Renommez le chier index.htm en index.php.
3. Utilisez deux instructions include pour invoquer les chiers debut.htm et n.htm dans
le chier index.php et, ainsi, simplier le code de la page.
Simpliez le code des autres pages en utilisant la mme technique.
11
Gestion
vnementielle
Chacun leur manire, les langages HTML, CSS et jQuery permettent de capturer et de
traiter plusieurs types dvnements, tels que les clics de souris, le chargement dune
page ou dune image, le passage du pointeur au-dessus dun lment, etc. Ce chapitre
passe en revue toutes les techniques utilisables. Aprs sa lecture, vous saurez grer les
vnements lis la fentre du navigateur, au clavier, la souris, aux formulaires, aux
mdias et lorientation.
Gestion vnementielle en HTML
Pour capturer un vnement en HTML5, il suft dinsrer lattribut correspondant dans
llment cible et de prciser le nom de la fonction JavaScript excuter, en lui passant
zro, un ou plusieurs arguments. Lorsque lvnement se produit, le code JavaScript
correspondant est excut.
Dans le code suivant, par exemple, trois vnements sont capturs:
chargement du document;
clic sur le bouton1;
clic sur le bouton2.
Ils excutent respectivement les fonctions JavaScript load(), bouton() avec un
argument gal1, et bouton() avec un argument gal2.
<!DOCTYPE html>
<html>
<head>
<title>Gestion vnementielle</title>
<script>
function load() {
document.getElementById("status").innerHTML = "Lvnement 'load' a t
gnr.";
}
function bouton(b) {
184 Chapitre 11
document.getElementById("status").innerHTML = "Le bouton " +b + " a t
cliqu.";
}
</script>
</head>
<body onload="load()" onunload="unload();">
<p>Status: <span id="status">En attente.'</span></p>
<button onClick="bouton(1)">Bouton 1</button>
<button onClick="bouton(2)">Bouton 2</button>
</body>
</html>
Le corps du document afche un lment span did status, qui donne ltat du
document, et deux boutons de commande. Au dbut du chargement de la page, llment
span afche le texte "En attente". Ds que le document est entirement charg dans le
navigateur, lvnement onload() est gnr et la fonction load() afche le message
"Lvnement 'load' a t gnr." dans llment span.
Lorsque lutilisateur clique sur un des boutons de commande, la fonction bouton()
est excute. Elle afche un message dans llment span qui dpend du paramtre
transmis, et donc du bouton cliqu (voir Figure11.1).
Figure11.1
Le premier bouton a
t cliqu.
Gestion vnementielle en CSS
CSS est assez pauvre en ce qui concerne la gestion vnementielle. Vous utiliserez
essentiellement les pseudo-classes:hover et:focus. La classe:hover cible llment
qui est survol par la souris. Lorsquun tel vnement se produit, vous pouvez modier
ses caractristiques en agissant sur une ou plusieurs de ses proprits. Par exemple,
pour ajouter une bordure rouge paisse de 5pixels autour des images contenues dans
un document lorsquelles sont survoles par la souris, vous utiliserez le code CSS suivant:
img:hover { border: 5px solid red;}
La pseudo-classe :focus cible la balise qui a le focus (gnralement une balise dun
formulaire). Elle permet de modier la couleur darrire-plan (ou un autre style quelconque)
de la balise qui a le focus. titre dexemple, cette instruction afecte un arrire-plan de
couleur rouge la balise input de type text qui a le focus:
input[type=text]:focus {background: red;}
Gestion vnementielle 185
Gestion vnementielle en jQuery
jQuery est en mesure de ragir aux vnements gnrs par la souris, le clavier et les
lments du DOM. Pour cela, vous devez dnir une mthode de gestion vnementielle
en crivant quelque chose comme ceci:
$(slecteur).vnement(function(){
// Gestion de lvnement
});
O:
slecteur permet de slectionner un ou plusieurs lments du DOM.
vnement est le nom de lvnement grer.
Par exemple, pour afcher une bote de message lorsque lutilisateur clique sur une
image did #img, vous utiliserez le code suivant:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="img" src="chat250.jpg">
<script>
$(function(){
$('#img').click(function(){
alert('Vous avez cliqu sur l\'image');
});
});
</script>
</body>
</html>
vnements lis la fentre
De nombreux vnements lis la fentre du navigateur peuvent tre dtects. Le
tableau suivant en dresse la liste. En HTML, vous utiliserez les attributs correspondants.
En jQuery, vous appliquerez les vnements au slecteur $(window).
vnement Attribut HTML Excution du script
afterprint onafterprint Aprs limpression
beforeprint onbeforeprint Avant limpression
beforeonload onbeforeonload Avant le chargement du document
blur onblur Lorsque la fentre perd le focus
186 Chapitre 11
error onerror Lorsquune erreur est dtecte
focus onfocus Lorsque le focus est donn la fentre
haschange onhaschange Lorsque le contenu du document est modi
load onload Lorsque le document est charg
message onmessage Quand le message est gnr
ofline onofline Au passage de ltat en ligne ltat dconnect
online ononline Au passage de ltat dconnect ltat en ligne
pagehide onpagehide Lorsque la fentre devient invisible
pageshow onpageshow Lorsque la fentre devient visible
popstate onpopstate Lorsque lhistorique de la page change
redo onredo Aprs lexcution dun "redo"
resize onresize Au redimensionnement de la fentre
storage onstorage Au chargement dun document
undo onundo lexcution dun "undo"
unload onunload Lorsque lutilisateur change de document
Pour illustrer lutilisation de ces vnements en HTML5, ce code afche un message
lorsque la page est entirement charge, puis juste avant le passage une autre page.
<!DOCTYPE html>
<html>
<head>
<title>Evnements lis la fentre</title>
<script>
function unload() {
document.getElementById("status").innerHTML = "Lvnement 'unload' a t
gnr";
}
function load() {
document.getElementById("status").innerHTML = "Lvnement 'load' a t
gnr";
}
</script>
</head>
<body onload="load()" onunload="unload();">
<p>Status: <span id="status">En attente de lvnement 'unload'</span></p>
</body>
</html>
Voyons maintenant comment capturer un vnement fentre avec jQuery. Ici, une bote
de message est afche chaque redimensionnement de la fentre.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<H2>Redimensionnez la fentre</h2>
<script>
$(function(){
$(window).resize(function(){
alert('Vous avez redimensionn la fentre');
});
});
</script>
</body>
</html>
vnements lis au clavier
Le tableau suivant dresse la liste des vnements lis au clavier. En HTML, vous utiliserez
les attributs correspondants. En jQuery, vous appliquerez les vnements llment
concern.
keydown onkeydown Lorsquune touche est presse
keypress onkeypress Lorsquune touche est presse puis relche
keyup onkeyup Lorsquune touche est relche
Cet exemple afche un lment span et une zone de texte <input type="text">.
Un caractre tap dans la zone de texte est rcupr via la fonction vnementielle
faitecho, dclenche sur lvnement onkeypress. Le code de la touche utilise est
rcupr (ev.keyCode), converti en une chane (String.fromCharCode()) afche
dans llment span (document.getElementById("echo").innerHTML).
<!DOCTYPE html>
<html>
<head>
<script>
function faitecho(ev) {
document.getElementById("echo").innerHTML =
document.getElementById("echo").innerHTML + String.fromCharCode(ev.keyCode);
}
</script>
</head>
<body>
<p>echo: <span id="echo"></span></p>
<input type="text" id="saisie" onkeypress="return faitecho(event);">
</body>
</html>
188 Chapitre 11
Voici lquivalent de ce code en jQuery:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>echo: <span id="echo"></span></p>
<input type="text" id="saisie" onkeypress="return faitecho(event);">
<script>
$(function(){
$('#saisie').keypress(function(ev){
temp = $('#echo').text();
temp += String.fromCharCode(ev.keyCode);
$('#echo').text(temp);
});
});
</script>
</body>
</html>
vnements lis la souris
Le tableau suivant dresse la liste des vnements lis la souris. En HTML, vous utiliserez
les attributs correspondants. En jQuery, vous appliquerez les vnements llment
concern.
click onclick Au clic du bouton gauche
dblclick ondblclick Au double clic du bouton gauche
drag ondrag Lorsquun lment est dplac par la technique du glisser-
dposer
dragend ondragend Lorsquun lment a ni dtre dplac par la technique du
glisser-dposer
dragenter ondragenter Lorsquun lment a t dplac sur une destination valide
dragleave ondragleave Lorsquun lment est dplac depuis un emplacement
valide
dragover ondragover Lorsquun lment est en cours de dplacement vers une
destination valide
dragstart ondragstart Au dbut du glisser-dposer
drop ondrop Au dpt de llment sur la destination
mousedown onmousedown Lorsque le bouton de la souris est enfonc
mousemove onmousemove Lorsque le pointeur se dplace
mouseout onmouseout Lorsque le pointeur se dplace en dehors dun lment
mouseover onmouseover Lorsque le pointeur est dplac sur un lment
mouseup onmouseup Au relchement du bouton de la souris
mousewheel onmousewheel Au dplacement de la roulette de la souris
scroll onscroll Lorsque la barre de dlement de llment est utilise
Cet exemple capture les vnements souris lis un lment img et les afche dans un
lment span.
<!DOCTYPE html>
<html>
<head>
<script>
function traitement(param) {
document.getElementById("activite").innerHTML = param;
}
</script>
</head>
<body>
<img src="chien250.jpg"
onclick="traitement('clic souris');"
ondblclick="traitement('double-clic souris');"
ondrag="traitement('dplacement');"
ondrop="traitement('relchement de l''image');"
onmousedown="traitement('bouton souris enfonc');"
onmousemove="traitement('dplacement de la souris');"
onmousemove="traitement('dplacement du pointeur en dehors de
l''image');"
onmouseover="traitement('dplacement du pointeur au-dessus de
l''image');"
onmouseup="traitement('relchement du bouton de la souris');"
onmousewheel="traitement('dplacement de la roulette de la souris');"
>
<p>Activit : <span id="activite"></span></p>
</body>
</html>
Voici le code quivalent en jQuery:
<!DOCTYPE html>
<html>
<head>
<script>
190 Chapitre 11
}
</script>
</head>
<body>
<img id="img" src="chien250.jpg">
<script>
$(function(){
$('#img').click(function(){ traitement('clic souris'); })
.dblclick(function(){ traitement('double-clic souris'); })
.drag(function(){ traitement('dplacement'); })
.drop(function(){ traitement('relchement de l\'image'); })
.mousedown(function(){ traitement('bouton souris enfonc'); })
.mousemove(function(){ traitement('dplacement de la souris');
})
.mousemove(function(){ traitement('dplacement du pointeur en
dehors de l\'image'); })
.mouseover(function(){ traitement('dplacement du pointeur
au-dessus de l\'image'); })
.mouseup(function(){ traitement('relchement du bouton de la
souris'); })
.mousewheel(function(){ traitement('dplacement de la roulette
de la souris'); });
});
</script>
</body>
</html>
Cette version du code chane les fonctions vnementielles sur limage. Nous avons
galement conserv la fonction JavaScript traitement. Si vous prfrez, une solution
"tout jQuery" est envisageable. Vous pourriez crire quelque chose comme ceci pour
traiter lvnement click:
$('#img').click(function(){
$('#activite').html('clic souris');
})
vnements lis aux formulaires
Le tableau suivant dresse la liste des vnements lis aux actions efectues dans
un formulaire. En HTML, vous utiliserez les attributs correspondants. En jQuery, vous
appliquerez les vnements llment concern.
blur onblur Lorsquun lment perd le focus
change onchange Lorsque la valeur/le contenu dun lment change
contextmenu oncontextmenu Lorsquun menu contextuel est droul
focus onfocus Lorsquun lment reoit le focus
formchange onformchange Lorsque le contenu du formulaire change
forminput onforminput Lorsque lutilisateur entre des donnes dans le formulaire
input oninput Lorsquun lment reoit des donnes entres par
lutilisateur
invalid oninvalid Lorsquun lment nest pas valide
select onselect Lorsquun lment est slectionn
submit onsubmit Lorsque le formulaire est soumis (gnralement au clic sur
le bouton Submit)
Cet exemple capture les actions efectues sur une zone de texte et un bouton Submit,
et les afche dans un lment span.
<!DOCTYPE html>
<html>
<head>
<script>
}
</script>
</head>
<body>
<form name="MonFormulaire" method="post" >
<label>Quel est le meilleur systme dexploitation selon vous ?</label>
<input name="texte"
placeholder="Entrez votre rponse ici"
onfocus="traitement('La zone de texte a le focus');"
onblur="traitement('La zone de texte a perdu le focus');"
>
<input type="submit" value="Envoyer" onsubmit="traitement('Le bouton Submit
a t press');">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
192 Chapitre 11
<form name="MonFormulaire" method="post" >
<label>Quel est le meilleur systme dexploitation selon vous ?</label>
<input name="texte" id="texte" placeholder="Entrez votre rponse ici">
<input type="submit" id="validation" value="Envoyer">
</form>
<script>
$(function(){
$('#texte').focus(function(){ $('#activite').text('La zone de texte a le
focus'); });
$('#texte').blur(function(){ $('#activite').text('La zone de texte a
perdu le focus'); });
$('#validation').submit(function(){ $('#activite').text('Le bouton Submit
a t press'); });
});
</script>
</body>
</html>
vnements lis aux mdias
Le tableau suivant dresse la liste des vnements lis aux lments video, image et
audio. En HTML, vous utiliserez les attributs correspondants. En jQuery, vous dnirez
un gestionnaire dvnements avec la fonction on(). Transmettez lvnement en
premier paramtre de la fonction et traitez lvnement dans le deuxime paramtre de
la fonction.
abort onabort Sur lvnement "abort"
canplay Lorsque le mdia peut commencer
tre lu (il peut tre amen sarrter si
le bufer de lecture devient vide)
canplaythrough oncanplaythrough Lorsque le mdia peut tre lu sans
interruption jusqu la n
durationchange ondurationchange Lorsque la longueur du mdia change
emptied onemptied Lorsque le mdia nest plus accessible
la suite dun problme de rseau
ou dune erreur de chargement, par
exemple
ended onended Lorsque le mdia a t entirement
jou
error onerror Lorsquune erreur survient pendant le
chargement du mdia
loadeddata onloadeddata Lorsque les donnes du mdia ont t
charges
loadedmetadata onloadedmetadata Lorsque la dure et les autres
caractristiques du mdia ont t lues
loadstart onloadstart Lorsque le navigateur commence
charger les donnes du mdia
pause onpause Lorsque le mdia est mis en pause
play onplay Lorsque le mdia est mis en lecture
play onplay Lorsque le mdia a commenc tre
jou
progress onprogress Lorsque llment est en cours de
rcupration des donnes pour le
mdia
ratechange onratechange Lorsque la vitesse de lecture change
readystatechange onreadystatechange Lorsque ltat (prt/pas prt) du mdia
change
seeked onseeked Lorsque la recherche a pris n
seeking onseeking Pendant la recherche (attribut
seeking=true)
stalled onstalled Lorsquune erreur est rencontre lors
de la rcupration des donnes
suspend onsuspend Lorsque la rcupration des donnes
est arrte avant la n
timeupdate ontimeupdate Lorsque la position de lecture change
volumechange onvolumechange Lorsque le volume du mdia est
modi
waiting onwaiting Lorsque le mdia nest plus en mode
de lecture mais que lutilisateur peut
demander une relecture
Cet exemple afche une vido issue du site Mediaforma (www.mediaforma.com) dans
un lment video. Tous les vnements lis cet lment sont capturs et afchs
dans un lment span, au-dessous de llment video (voir Figure11.2).
<!DOCTYPE html>
<html>
<head>
<script>
function etat(param) {
}
</script>
</head>
<body>
<video id="video" src="http://www.mediaforma.com/uneminuteparjour/video/
godmode.mp4"
194 Chapitre 11
controls="controls"
poster="http://www.mediaforma.com/uneminuteparjour/thumbs/godmode.jpg"
onabort="etat('onabort');"
oncanplay="etat('oncanplay');"
oncanplaythrough="etat('oncanplaythrough');"
ondurationchange="etat('ondurationchange');"
onemptied="etat('onemptied');"
onended="etat('onended');"
onerror="etat('onerror');"
onloadeddata="etat('onloadeddata');"
onloadedmetadata="etat('onloadedmetadata');"
onloadstart="etat('onloadstart');"
onpause="etat('onpause');"
onplay="etat('onplay');"
onplaying="etat('onplaying');"
onprogress="etat('onprogress');"
onratechange="etat('onratechange');"
onreadystatechange="etat('onreadystatechange');"
onseeked="etat('onseeked');"
onseeking="etat('onseeking');"
onstalled="etat('onstalled');"
onsuspend="etat('onsuspend');"
ontimeupdate="etat('ontimeupdate');"
onvolumechange="etat('onvolumechange');"
onwaiting="etat('onwaiting');"
>
</video>
</body>
</html>
Figure11.2
La vido est en cours de lecture.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video" src="http://www.mediaforma.com/uneminuteparjour/video/
godmode.mp4" poster="http://www.mediaforma.com/uneminuteparjour/thumbs/
godmode.jpg" controls >
</video>
<script>
$(function(){
$('#video').on('abort', function(){ $('#activite').text('onabort'); })
.on('canplay', function(){ $('#activite').text('oncanplay');
})
.on('canplaythrough', function(){ $('#activite').
text('oncanplaythrough'); })
.on('durationchange', function(){ $('#activite').
text('ondurationchange'); })
.on('emptied', function(){ $('#activite').text('onemptied');
})
.on('ended', function(){ $('#activite').text('onended'); })
.on('error', function(){ $('#activite').text('onerror'); })
.on('loadeddata', function(){ $('#activite').
text('onloadeddata'); })
.on('loadedmetadata', function(){ $('#activite').
text('onloadedmetadata'); })
.on('loadstart', function(){ $('#activite').
text('onloadstart'); })
.on('pause', function(){ $('#activite').text('onpause'); })
.on('play', function(){ $('#activite').text('onplay'); })
.on('playing', function(){ $('#activite').text('onplaying');
})
.on('progress', function(){ $('#activite').text('onprogress');
})
.on('ratechange', function(){ $('#activite').
text('onratechange'); })
.on('readystatechange', function(){ $('#activite').
text('onreadystatechange'); })
.on('seeked', function(){ $('#activite').text('onseeked'); })
.on('seeking', function(){ $('#activite').text('onseeking');
})
.on('stalled', function(){ $('#activite').text('onstalled');
})
.on('suspend', function(){ $('#activite').text('onsuspend');
})
.on('timeupdate', function(){ $('#activite').
text('ontimeupdate'); })
196 Chapitre 11
.on('volumechange', function(){ $('#activite').
text('onvolumechange'); })
.on('waiting', function(){ $('#activite').text('onwaiting');
});
});
</script>
</body>
</html>
Info
Remarquez lutilisation de la fonction on() pour dnir les gestionnaires pour chaque
vnement. Les vnements ne sont en efet pas des fonctions directement utilisables
dans le code. Notez galement le chanage des fonctions on() pour simplier lcriture
du code jQuery.
vnements lis lorientation
Les ordinateurs rcents, les tlphones mobiles et les tablettes sont quips de capteurs
qui fournissent des informations sur lorientation, le mouvement et lacclration de
ces appareils. Certains navigateurs Web donnent accs ces informations. Dans cette
section, nous allons voir comment dtecter lorientation et linclinaison dun matriel.
Dtecter lorientation dun appareil
Au moment o jcris ces lignes, seuls quelques navigateurs (dont Google Chrome, iOS
Safari et Android) supportent ces fonctionnalits. La premire chose faire est donc de
tester si le navigateur utilis est compatible.
La valeur retourne par window.DeviceOrientationEvent indique si le navigateur
est (true) ou nest pas (false) en mesure de dtecter lorientation de lappareil:
if (window.DeviceOrientationEvent)
alert('DeviceOrientation support');
else
alert('DeviceOrientation non support');
Si lorientation de lappareil peut tre dtecte, dnissez un gestionnaire dvnements
pour lvnement orientationchange:
window.addEventListener('orientationchange', function(event){}, false);
titre dexemple, les quelques lignes de code suivantes afchent lorientation du matriel
dans un lment span:
<!DOCTYPE html>
<html>
<head>
<title>device Orientation</title>
<script>
if (window.DeviceOrientationEvent) {
window.addEventListener('orientationchange', function(event) {
document.getElementById("status").innerHTML='orientation : ' + window.
orientation + ' degrs';
}, false);
}
</script>
</head>
<body>
<span id="status">Modifez lorientation de votre device</span>
</body>
</html>
Le corps du document contient un lment span didentiant status qui invite
lutilisateur modier lorientation de son matriel:
Examinons len-tte du document.
Aprs avoir dtect la compatibilit du navigateur avec cette fonctionnalit:
if (window.DeviceOrientationEvent)
Une bote de message est afche pour signier la compatibilit:
Et un gestionnaire dvnements est mis en place sur lvnement orientationchange:
window.addEventListener('orientationchange', function(event){...}, false);
Lorientation du matriel est alors afche dans llment span:
document.getElementById("status").innerHTML='orientation : ' + window.orientation
+ ' degrs';
Dtecter linclinaison dun appareil
Supposons maintenant que vous vouliez afcher linclinaison dun appareil. Commencez
par tester la valeur retourne par window.DeviceMotionEvent : true indique que
le navigateur est compatible avec cette fonctionnalit, false indique quil nest pas
compatible avec cette fonctionnalit:
if (window.DeviceMotionEvent)
alert('DeviceMotion support');
else
alert('DeviceMotion non support');
Si linclinaison de lappareil peut tre dtecte, dnissez un gestionnaire dvnements
pour lvnement devicemotion:
window.addEventListener('devicemotion', function(event){}, false);
titre dexemple, les quelques lignes de code suivantes afchent dans un lment span
lorientation du matriel selon les axes X, Y, Z:
<!DOCTYPE html>
<html>
198 Chapitre 11
<head>
<title>device Motion</title>
<script>
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', function(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
document.getElementById("status").innerHTML = "<ul><li>X : " + x + "
</li><li>Y : " + y + "</li><li>Z : " + z + "</li></ul>";
}, false);
}
</script>
</head>
<body>
</body>
</html>
Le corps du document contient un lment span didentiant status qui invite
lutilisateur modier lorientation de son matriel:
Examinons len-tte du document.
Aprs avoir dtect la compatibilit du navigateur avec cette fonctionnalit:
if (window.DeviceMotionEvent)
Une bote de message est afche pour signier la compatibilit:
alert('DeviceMotion support');
Et un gestionnaire dvnements est mis en place sur lvnement devicemotion:
window.addEventListener('devicemotion', function(event){...}, false);
Linclinaison du matriel est alors afche dans llment span:
document.getElementById("status").innerHTML = "<ul><li>X : " + x + "</li><li>Y :
" + y + "</li><li>Z : " + z + "</li></ul>";
Info
LAPI DeviceMotion retourne des acclrations et non des angles. Cependant, ces
grandeurs peuvent tre assimiles. Ainsi par exemple, si vous posez votre matriel
sur un support parfaitement horizontal, les valeurs afches pour X et Y devraient tre
gales 0.
Gestion vnementielle 199 Gestion vnementielle 199
Exercice 13
Dans cet exercice, vous allez modier le chier membre.php.
Capturez les frappes de lutilisateur dans les deux premires zones de texte et
convertissez-les en caractres minuscules au fur et mesure de la frappe. Pour cela,
vous mettrez en place un gestionnaire dvnements jQuery li la saisie dans chacune
des deux zones de texte.
12
Multimdia
Ce chapitre va vous montrer comment jouer des chiers audio et vido sur un site en
utilisant les balises HTML5 <audio> et <video> et comment piloter les contrles
audio et vido en jQuery.
Insrer un lment audio
Avec llment audio, linsertion dun objet audio dans une page Web devient un vrai jeu
denfant. De plus, il nest plus ncessaire de se soucier de savoir si linternaute a install
les bons codecs: ces derniers sont inclus de faon native dans le langage!
Voici la syntaxe de la balise audio:
<audio src="nom" controls preload="none|metadata|auto" loop muted autoplay>
O:
nom dnit le chemin et le nom du chier audio. Les difrents formats audio utilisables
sont OGG, AAC, MP3, WAV, AIFF et AU.
controls, sil est prsent, demande lafchage dune barre de contrle pour agir sur
le son.
preload indique comment le son doit tre tlcharg avant quil ne soit jou: none
(aucun tlchargement), metadata (tlchargement des mtadonnes associes
uniquement) ou auto (laisse le navigateur dcider).
loop, sil est prsent, provoque la lecture sans n du son.
muted, sil est prsent, met le volume de lecture 0.
autoplay, sil est prsent, dclenche la lecture du son ds que possible, en accord
avec lattribut preload.
Lattribut src peut tre spci en dehors de llment audio sous la forme dun ou de
plusieurs lments source. Ainsi, en fonction du navigateur utilis, un format audio ou
un autre sera utilis. Il est mme possible de spcier un lien pour tlcharger le chier
audio, dans le cas o le navigateur ne reconnatrait pas llment audio.
202 Chapitre 12
Attention
Tous les navigateurs ne sont pas compatibles avec les difrents formats audio. Le tableau
ci-aprs donne un aperu des formats utilisables dans chaque navigateur.
Navigateur OGG AAC MP3 WAV AIFF
Chrome 23 et suprieur x x x
Firefox 17 et suprieur x x
Internet Explorer 10 et suprieur x
Opera 12 et suprieur x x
Safari 5.1 et suprieur x x x x
Info
Pour savoir si votre navigateur est compatible avec la balise HTM5 <audio>, le plus
simple consiste afcher la page http://html5test.com (voir Figure 12.1).
Figure 12.1
Google Chrome 31 est
bien compatible avec la
balise <audio>.
Voici un exemple dutilisation de la balise <audio>. Ici, les versions OGG, AAC, MP3, WAV,
AIFF et AU du mme son ont t spcies dans des balises <source>. Le navigateur
utilisera le premier format avec lequel il est compatible. Sil nest pas compatible avec
llment audio, un lien permettant de tlcharger le son (ici, au format MP3) sera afch.
<!DOCTYPE html>
<html>
<head>
<title>Llment audio</title>
Multimdia 203
</head>
<body>
<audio controls preload="auto" autobufer>
<source src="son.ogg" type="audio/ogg">
<source src="son.aac" type="audio/aac">
<source src="son.mp3" type="audio/mp3">
<source src="son.wav" type="audio/wav">
<source src="son.aif" type="audio/aif">
<source src="son.au" type="audio/au">
<a href="son.mp3">Tlcharger <cite>le commentaire audio au format mp3
</cite></a>
</audio>
</body>
</html>
La Figure12.2 reprsente un exemple dexcution de ce code dans Internet Explorer11.
Figure12.2
La balise <audio>
est bien supporte
dans Internet
Explorer11.
Info
Si vous voulez convertir vos chiers audio aux formats OGG, AAC, MP3, WAV, AIFF et AU,
il est conseill de tlcharger le logiciel Sothink Free Video Converter en vous rendant
sur la page www.myconverters.com/video-converter/fr/.
Piloter une balise <audio> en jQuery
La balise <audio> peut tre pilote avec des instructions jQuery. titre dexemple, le
code suivant utilise cinq boutons pour interagir avec une balise <audio>. Vous pouvez
jouer le son li la balise <audio>, faire une pause ou larrter, augmenter ou diminuer
le volume sonore (voir Figure12.3).
Figure 12.3
Les cinq boutons
permettent dinteragir
avec la balise
<audio>.
204 Chapitre 12
Voici le code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8" />
<title>Llment audio</title>
</head>
<body>
<audio id="music" controls preload="auto" autobufer>
<source src="son.ogg" type="audio/ogg">
<source src="son.aac" type="audio/aac">
<source src="son.mp3" type="audio/mp3">
<source src="son.wav" type="audio/wav">
<source src="son.aif" type="audio/aif">
<source src="son.au" type="audio/au">
<a href="son.mp3">Tlcharger le son au format mp3</a>
</audio>
<br>
<input type="button" value="Play" id="play" />
<input type="button" value="Pause" id="pause" />
<input type="button" value="Stop" id="stop" />
<input type="button" value="Plus fort" id="plus" />
<input type="button" value="Moins fort" id="moins" />
<script>
$(function(){
$('#play').click(function(){
$('#music')[0].play();
});
$('#pause').click(function(){
$('#music')[0].pause();
});
$('#stop').click(function(){
$('#music')[0].pause();
$('#music')[0].currentTime=0;
});
$('#plus').click(function(){
$('#music')[0].volume+=0.1;
});
$('#moins').click(function(){
$( '#music')[0].volume-=0.1;
});
});
</script>
</body>
</html>
Ce code est lmentaire: il se contente dutiliser les fonctions play() et pause() et
de modier la valeur des variables currentTime et volume de llment audio cibl.
Multimdia 205
Si vous voulez cacher le player audio, remplacez cette balise:
<audio id="music" controls preload="auto" autobufer>
Par la suivante:
<audio id="music" preload="auto" autobufer>
Insrer un lment vido
Avec la balise <video>, linsertion dun objet vido dans une page Web nest plus une
corve. Voici la syntaxe utiliser:
<video src="nom" controls preload="none|metadata|auto" loop muted autoplay>
O:
nom dnit le chemin et le nom du chier vido, au format OGG ou MP4.
controls, sil est prsent, demande lafchage dune barre de contrle pour agir sur
la vido.
preload indique comment la vido doit tre tlcharge avant quelle ne soit
joue: none (aucun tlchargement), metadata (tlchargement des mtadonnes
associes uniquement) ou auto (laisse le navigateur dcider).
loop, sil est prsent, provoque la lecture sans n de la vido.
muted, sil est prsent, met le volume de lecture 0.
autoplay, sil est prsent, dclenche la lecture de la vido ds que possible, en
accord avec lattribut preload.
Lattribut src peut tre spci en dehors de llment video sous la forme dun ou
de plusieurs lments source. Ainsi, en fonction du navigateur, un format vido ou
un autre sera utilis. Il est mme possible de spcier une variante ash et/ou un lien
pour tlcharger le chier audio, dans le cas o le navigateur utilis ne reconnatrait pas
llment video.
Llment video est entirement support dans tous les navigateurs modernes. Attention
cependant, faute daccord entre les difrents navigateurs, vous devrez fournir plusieurs
formats vido (Ogg Theora, H.264, MP4 et WebM) pour assurer une compatibilit aussi
grande que possible:
Ogg Theora pour les navigateurs Firefox 3.6 et suprieur, Opera 10.6 et suprieur, et
Google Chrome 6 et suprieur.
MP4 cod en H.264 pour les navigateurs Internet Explorer9 et suprieur, Safari 5 et
suprieur, et Google Chrome 6 et suprieur.
WebM pour les navigateurs Opera 10.6 et suprieur, Chrome 6 et suprieur, et Firefox
3.6 et suprieur.
Pour gnrer des chiers aux formats Ogg, MP4 et WebM, le plus simple consiste
utiliser le logiciel gratuit Miro Video Converter, tlchargeable la page
www.mirovideoconverter.com. Une fois que le logiciel est install sur votre ordinateur,
dposez le chier convertir dans la fentre de lapplication, choisissez le format cible
et cliquez sur Convert (voir Figure12.4).
206 Chapitre 12
Figure12.4
Un chier WMV est sur le point dtre converti au
format WebM.
Le code ci-aprs afche une vido issue du site de formation en ligne Mediaforma.
Lorsque le navigateur utilis supporte llment video, il est afch au format MP4 ou
Ogg (<source>). Dans le cas contraire, une version ash est utilise (object). Il lui est
mme possible de tlcharger la vido(a).
<!DOCTYPE HTML>
<html>
<head>
<title>Llment video</title>
</head>
<body>
<video controls>
<source src="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4"
type="video/mp4" />
<source src="http://www.mediaforma.com/win7/videx/nettoyage-disque.ogg"
type="video/ogg" />
<object width="800" height="600" type="application/x-shockwave-fash"
data="http://www.mediaforma.com/win7/videx/nettoyage-disque.swf">
<param name="movie" value="http://www.mediaforma.com/win7/videx/
nettoyage-disque.ogg" />
<param name="fashvars" value="controlbar=over&image=
http://www.mediaforma.com/win7/videx/nettoyer-disque.jpg&fle=
http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4" type="video/mp4" />
<img src="http://www.mediaforma.com/win7/videx/nettoyer-disque.jpg"
width="640" height="360" alt="Nettoyage du disque"
title="Le navigateur ne supporte pas la balise &lg;video>.
Tlchargez la vido en cliquant sur le lien ci-aprs" />
</object>
Multimdia 207
<p><a href="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4">
Tlcharger la vido</a>.</p>
</video>
</body>
</html>
La Figure12.5 reprsente lexcution de ce code dans Internet Explorer.
Figure12.5
La vido est lue dans Internet
Explorer.
Astuce
Pour vous assurer de la prise en compte des formats vido dans les navigateurs, pensez
ajouter les trois lignes suivantes dans le chier .htaccess, situ la racine du site:
AddType video/ogg .ogv
AddType audio/ogg .oga
AddType video/mp4 .m4v .mp4
Piloter une balise <video> en jQuery
Tout comme la balise <audio>, la balise <video> peut tre pilote avec des instructions
jQuery. Quelques modications mineures dans le code de la section "Piloter une balise
<audio> en jQuery" permettent de dialoguer avec la balise <video> pour la piloter en
utilisant des contrles HTML traditionnels, comme des boutons ou des liens hypertexte.
Voici le code utilis. Ici, les contrles de la balise <video> ont t dsactivs en
supprimant lattribut controls:
<!DOCTYPE HTML>
<html>
<head>
208 Chapitre 12
<title>Llment video</title>
</head>
<body>
<video id="video">
<source src="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4"
type="video/mp4" />
<source src="http://www.mediaforma.com/win7/videx/nettoyage-disque.ogg"
type="video/ogg" />
<object width="800" height="600" type="application/x-shockwave-fash"
data="http://www.mediaforma.com/win7/videx/nettoyage-disque.swf">
<param name="movie" value="http://www.mediaforma.com/win7/videx/
nettoyage-disque.ogg" />
<param name="fashvars" value="controlbar=over&image=http:
//www.mediaforma.com/win7/videx/nettoyer-disque.jpg&fle=http:
//www.mediaforma.com/win7/videx/nettoyage-disque.mp4" type= "video/mp4" />
<img src="http://www.mediaforma.com/win7/videx/nettoyer-disque.jpg"
width="640" height="360" alt="Nettoyage du disque"
title="Le navigateur ne supporte pas la balise &lg;video>.
Tlchargez la vido en cliquant sur le lien ci-aprs" />
</object>
<p><a href="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4">
Tlcharger la vido</a>.</p>
</video>
<br>
<input type="button" value="Play" id="play" />
<input type="button" value="Pause" id="pause" />
<input type="button" value="Stop" id="stop" />
<input type="button" value="Plus fort" id="plus" />
<input type="button" value="Moins fort" id="moins" />
<script>
$(function(){
$('#play').click(function(){
$('#video')[0].play();
});
$('#pause').click(function(){
$('#video')[0].pause();
});
$('#stop').click(function(){
$('#video')[0].pause();
$('#video')[0].currentTime=0;
});
$('#plus').click(function(){
$('#video')[0].volume+=0.1;
});
$('#moins').click(function(){
$('#video')[0].volume-=0.1;
});
});
</script>
</body>
</html>
Multimdia 209 Multimdia 209
Exercice 14
Vous allez crer la page apropos.php pour complter le site dni dans les exercices
prcdents.
Je vous propose de concevoir une vido (ou de la rcuprer sur Internet), de la convertir
aux formats Ogg et MP4 avec Miro Video Converter et de lafcher dans la page apropos.
php en mode autoplay, pour quelle se joue ds louverture de la page.
13
Transformations,
transitions et
animations
Il est dsormais trs simple dappliquer des transformations (translations, rotations,
changements dchelle) en utilisant quelques instructions CSS3 ou jQuery et de les
animer avec des pseudo-classes CSS3 ou du code jQuery. Les transformations et les
animations sont supportes par la plupart des navigateurs de dernire gnration :
WebKit (Safari, Chrome), Gecko (Firefox), Opera ainsi quInternet Explorer9 et ultrieur.
Vous pouvez donc les utiliser sans vous proccuper de leur compatibilit.
En rgle gnrale, vous pouvez utiliser indifremment des instructions CSS3 ou jQuery.
Cest une afaire de got personnel. Le rsultat obtenu sera similaire.
Transformations
Dans les pages suivantes, vous allez dcouvrir comment appliquer une translation, une
rotation, un changement dchelle ou une inclinaison un lment HTML quelconque. Si
vous voulez aller plus loin, vous pourrez dnir des transformations plus complexes en
passant par une "matrice de transformation".
Translations
Tous les lments HTML5 peuvent subir une translation par lintermdiaire de la fonction
translate() applique la proprit transform. Voici la syntaxe utiliser:
transform: translate(h, v);
O h dnit le dplacement horizontal (positif pour un dplacement vers la droite,
ngatif pour un dplacement vers la gauche) etv le dplacement vertical (positif pour un
dplacement vers le bas, ngatif pour un dplacement vers le haut).
Le rsultat de ce code, afch dans Internet Explorer11, est reprsent la Figure13.1.
<!DOCTYPE html>
<html>
212 Chapitre 13
<head>
<title>Translations</title>
<style>
div {
width: 200px;
height: 60px;
background-color: SkyBlue;
margin: 20px;
border-color: black;
border-width: 5px;
}
.droite { transform : translate(20px, 0px); -webkit-transform :
translate(20px, 0px); }
.gauche { transform : translate(-20px, 0px); -webkit-transform :
translate(-20px, 0px); }
.haut { transform : translate(0px, -5px); -webkit-transform :
translate(0px, -5px); }
.bas { transform : translate(0px, 20px); -webkit-transform : translate(0px,
20px); }
.hautdroite { transform : translate(15px, -15px); -webkit-transform :
translate(15px, -15px); }
</style>
</head>
<body>
<div>
Bote sans dplacement
</div>
<div class="droite">
Bote dplace droite de 20px
</div>
<div class="gauche">
Bote dplace gauche de 20px
</div>
<div class="haut">
Bote dplace vers le haut de 5px
</div>
<div class="bas">
Bote dplace vers le bas de 5px
</div>
<div class="hautdroite">
Bote dplace vers le haut et la droite de 15px
</div>
</body>
</html>
Remarquez la prsence du prxe -webkit dans le code CSS3 pour sadresser aux
navigateurs WebKit. Alors que jcris ces lignes, seul Google Chrome (navigateur base
du moteur WebKit, en version 31 dans nos tests) a ncessit une proprit transform
prxe. Les navigateurs Firefox version 25 et Internet Explorer 11 se sont contents de la
Transformations, transitions et animations 213
version gnrique de la proprit transform. Pour assurer la compatibilit de ce code
avec des navigateurs plus anciens, vous pouvez vous adresser directement plusieurs
autres navigateurs en utilisant les prxes appropris. Par exemple:
-moz-transform : translate(15px, -15px);
-o-transform : translate(15px, -15px);
-ms-transform : translate(15px, -15px);
Figure13.1
Translations CSS3 dans Internet
Explorer11.
Info
Si la translation ne doit tre applique que sur un des axes, vous pouvez galement
utiliser les fonctions translateX(h) ou translateY(v), o hreprsente la
translation horizontale et vla translation verticale, en adoptant les mmes conventions de
direction que dans la fonction translate().
Lorsquun dcalage doit tre efectu suite une action de lutilisateur (un clic sur un
bouton ou sur un lien par exemple), le plus simple consiste utiliser quelques instructions
jQuery. Dans le code suivant, un clic sur le bouton dcale limage de 100pixels vers la
droite.
<!DOCTYPE html>
<html>
<head>
<title>Translation en jQuery</title>
</head>
<body>
<img src="chat250.jpg" id="chat"><br>
214 Chapitre 13
<button id="decaler">Dcaler vers la droite</button>
<script>
$(function(){
$('#decaler').click(function(){
$('#chat').css('transform','translate(100px, 0px)').css('-webkit-
transform', 'translate(100px, 0px)');
});
});
</script>
</body>
</html>
Rotations
Tous les lments HTML5 peuvent subir une rotation via la fonction rotate() applique
la proprit transform. Voici la syntaxe utiliser:
transform: rotate(rdeg);
O rdeg est langle de la rotation en degrs. Une valeur positive provoque une rotation
dans le sens horaire, et une valeur ngative provoque une rotation dans le sens
trigonomtrique.
Voici un exemple dutilisation de cette proprit. Le rsultat de ce code, afch dans
Firefox, est reprsent la Figure13.2.
<!DOCTYPE html>
<html>
<head>
<title>Rotations</title>
<style>
div {
width: 200px;
height: 60px;
background-color: SkyBlue;
margin-top: 120px;
border-width: 5px;
}
.rotdroite45 { transform : rotate(45deg); -webkit-transform :
rotate(45deg); }
.rotgauche90 { transform : rotate(-90deg); -webkit-transform : rotate
(-90deg); }
</style>
</head>
<body>
<div style="border-width: 5px;">
La <div> originale
</div>
<div class="rotdroite45">
La <div> aprs une rotation droite de 45
</div>
<div class="rotgauche90">
La <div> aprs une rotation gauche de 90
</div>
</body>
</html>
Dans le code CSS3, remarquez:
lafchage en mode inline-block des balises <div> de faon quelles apparaissent
sur une mme ligne;
la dnition de la proprit margin-top, pour que les balises <div> ne soient pas
tronques aprs rotation;
lutilisation du prxe -webkit pour sadresser aux navigateurs WebKit.
Pour assurer la compatibilit de ce code avec des navigateurs plus anciens, vous
pouvez vous adresser directement plusieurs autres navigateurs en utilisant les prxes
appropris. Par exemple:
-moz-transform : rotate(45deg);
-o-transform : rotate(45deg);
-ms-transform : rotate(45deg);
Figure13.2
Rotation CSS3 dans
Firefox 25.
Lorsquune rotation doit tre efectue suite une action de lutilisateur (un clic sur un
bouton ou sur un lien par exemple), le plus simple consiste utiliser quelques instructions
jQuery. Dans le code suivant, un clic sur le bouton applique une rotation de 45 vers la
droite une balise <div>.
<!DOCTYPE html>
<html>
<head>
<title>Translation en jQuery</title>
div {
width: 200px;
height: 200px;
216 Chapitre 13
border: dashed 5px black;
margin: 50px;
}
</style>
<script src= http://code.jquery.com/jquery.min.js></script>
</head>
<body>
<div id="leDiv"></div>
<button id="tourner">45 vers la droite</button>
<script>
$(function(){
$('#tourner').click(function(){
$('#leDiv').css('transform','rotate(45deg)').css('-webkit-
transform','rotate(45deg)');
});
});
</script>
</body>
</html>
Changements dchelle
Les lments HTML5 peuvent subir un changement dchelle quand la fonction scale()
est applique la proprit CSS3 transform. Voici la syntaxe utiliser:
transform: scale(ex, ey);
O ex et ey reprsentent les facteurs dchelle selon les axes des abscisses et des
ordonnes. Par dfaut, si ey nest pas spci, il est suppos gal ex.
Le code ci-aprs applique deux changements dchelle sur une image (voir Figure13.3):
<!DOCTYPE html>
<html>
<head>
<title>Changements dchelle</title>
<style>
.e200 {
-webkit-transform : scale(2);
transform : scale(2);
}
.e50 {
-webkit-transform : scale(.5);
transform : scale(.5);
}
</style>
</head>
<body>
<img src="cheval250.jpg">
<img src="cheval250.jpg" class="e200">
<img src="cheval250.jpg" class="e50">
</body>
</html>
Figure13.3
Les images se
chevauchent.
Comme vous pouvez le voir, les trois images se superposent. En fait, elles sont afches
comme si chacune avait la taille de limage originale. Pour rgler ce problme, vous
dnirez une marge entre elles avec la proprit CSS margin:
img { margin: 30px; }
Le rsultat et maintenant bien plus acceptable (voir Figure13.4).
Figure13.4
La proprit margin a
rgl le problme.
218 Chapitre 13
Vous pouvez galement utiliser les fonctions scaleX(ex) et scaleY(ey) o ex et
ey reprsentent les facteurs dchelle en abscisse et en ordonne. Ces fonctions sont
respectivement quivalentes scale(ex,1) et scale(1, ey). Elles produisent donc
une dformation de llment. Dans le code suivant, limage est tire horizontalement
avec un facteur dchelle2 (voir Figure13.5).
<!DOCTYPE html>
<html>
<head>
<title>Changements dchelle</title>
<style>
img { margin: 60px; }
.x2 {
-webkit-transform : scaleX(2);
transform : scaleX(2);
}
</style>
</head>
<body>
<img src="cheval250.jpg" class="x2">
</body>
</html>
Figure13.5
Limage originale a
subi un changement
dchelle scaleX(2).
Lorsquun changement dchelle doit tre efectu suite une action de lutilisateur (un
clic sur un bouton ou sur un lien par exemple), le plus simple consiste utiliser quelques
instructions jQuery. Dans le code suivant, un clic sur le bouton applique une image
alternativement un agrandissement ou un retour la taille normale.
<!DOCTYPE html>
<html>
<head>
<title>Changement dchelle en jQuery</title>
</head>
<body>
<img src="chien250.jpg" id="chien"></div>
<button id="echelle">Changer lchelle</button>
<script>
$(function(){
$('#echelle').click(function(){
$('#chien').toggle(function(){ $(this).css('transform','scale(0)'); },
function(){ $(this).css('transform','scale(1)'); });
});
});
</script>
</body>
</html>
Info
Jusquici, nous navons pas utilis la fonction jQuery toggle(). Trs pratique, elle
permet dexcuter alternativement une fonction ou une autre. Ici, le premier clic sur le
bouton provoque le redimensionnement de limage jusqu sa disparition (scale(0)). Le
deuxime lafche dans sa taille originale (scale(1)). Le troisime la fait disparatre. Le
quatrime lui rend sa taille originale, etc.
Inclinaisons
Les lments HTML5 peuvent tre inclins avec la fonction skew() applique la
proprit CSS3 transform. Voici la syntaxe utiliser:
transform: skew(ax, ay);
O ax et ay reprsentent les angles dinclinaison selon les axes des abscisses et des
ordonnes. Les valeurs positives de ax inclinent llment dans le sens trigonomtrique.
Quant aux valeurs positives de ay, elles linclinent vers larrire. Par dfaut, si ay nest
pas spci, il est suppos gal0. Dans ce cas, il ny a donc pas dinclinaison selon
laxe des ordonnes.
Le code ci-aprs applique des inclinaisons sur une image (voir Figure13.6).
<!DOCTYPE html>
<html>
<head>
<title>Inclinaison</title>
<style>
img { margin-top: 60px; margin-left: 40px; }
.xy15 {
-webkit-transform : skew(15deg, 15deg);
transform : skew(15deg, 15deg);
}
220 Chapitre 13
.xy-25 {
-webkit-transform : skew(-25deg, -25deg);
transform : skew(-25deg, -25deg);
}
</style>
</head>
<body>
<img src="chien250.jpg">
<img src="chien250.jpg" class="xy15">
<img src="chien250.jpg" class="xy-25">
</body>
</html>
Figure13.6
Inclinaison selon les
axesX etY.
Si linclinaison ne doit tre applique que sur un des axes, vous pouvez galement
utiliser les fonctions skewX(ax) ou skewY(ay), o ax et ay reprsentent les angles
dinclinaison selon les axes des abscisses et des ordonnes.
Info
Ce qui a t dit dans les sections prcdentes concernant lutilisation de code jQuery
sapplique galement la fonction skew(). Libre vous dutiliser quelques lignes de
jQuery pour incliner un lment suite une action de lutilisateur.
Matrices
Dun point de vue mathmatique, toutes les transformations CSS3 peuvent tre
reprsentes par une matrice 33 de la forme suivante:
Figure13.7
Matrice de transformation.
La matrice de transformation permet de relier les anciennes et les nouvelles coordonnes
des lments transforms avec la relation suivante:
Figure13.8
Lien entre les anciennes et les nouvelles coordonnes.
Les transformations tudies jusquici sont quivalentes aux matrices reprsentes la
Figure13.9.
Figure13.9
Matrices de transformation.
222 Chapitre 13
Six valeurs seulement sont utilises dans ces matrices, cest pourquoi il est possible de
les exprimer en tant que simples vecteurs [ a b c d e f ].
Si vous tes laise avec la manipulation des matrices, vous pouvez employer la fonction
matrix()applique la proprit CSS3 transform. En voici la syntaxe:
transform: matrix(a, b, c, d, e, f);
O a, b, c, d, e et f sont les coefcients de la matrice33.
Pour efectuer une rotation de 90degrs dans le sens des aiguilles dune montre, vous
utiliserez la matrice reprsente Figure13.10.
Figure13.10
Rotation de
90degrs dans
le sens inverse
trigonomtrique.
Les coefcients sont donc les suivants: 0, 1, 1, 0, 0, 0.
Voici le code HTML5/CSS3 correspondant. La Figure13.11 reprsente son excution dans
Internet Explorer 11.
<!DOCTYPE html>
<html>
<head>
<title>Matrices de transformation</title>
<style>
img { margin-top: 60px; margin-left: 40px; }
.mat90 {
-webkit-transform : matrix(0, 1, -1, 0, 0, 0);
transform : matrix(0, 1, -1, 0, 0, 0);
}
</style>
</head>
<body>
<img src="cheval250.jpg" class="mat90">
</body>
</html>
Figure13.11
La rotation a t
efectue via la
fonction matrix().
Il est possible de cumuler plusieurs transformations en multipliant les matrices 3 3
correspondantes (voir Figure13.12).
Figure13.12
Transformations
multiples.
Une autre solution consiste spcier les transformations la suite de la proprit en
les sparant par un espace. Par exemple, pour efectuer une translation vers la droite
de 50 pixels et une rotation de 90 degrs dans le sens des aiguilles dune montre, la
dclaration de style suivante est correcte:
transform: translate(50px, 0) rotate(90deg);
Info
Ce qui a t dit dans les sections prcdentes concernant lutilisation de code jQuery
sapplique galement la fonction matrix(). Vous pouvez donc appliquer une matrice
un lment HTML suite une action de lutilisateur.
Transitions
Vous pouvez animer les transformations CSS3 avec des pseudo-classes ou du code
jQuery comme facteurs dclenchants. Ainsi, par exemple, une rotation ou une translation
peut tre afche progressivement lorsque lutilisateur dplace le pointeur ou clique
sur un lment quelconque. Cette fabuleuse nouveaut rside dans la proprit CSS3
transition dont voici la syntaxe:
transition: proprit dure type dlai;
224 Chapitre 13
O:
proprit est une proprit CSS: background, opacity ou width, par exemple.
dure est la dure de lanimation en secondes.
type est le type de lanimation. Ce paramtre peut prendre lune des valeurs suivantes:
linear: aucun efet.
cubic-bezier(x1, y1, x2, y2): courbe de Bzier dont les points P0 et P3
ont pour valeurs (0,0) et (1,1).
ease: quivalent cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in: (0.42, 0, 1.0, 1.0).
ease-out: (0, 0, 0.58, 1.0).
ease-in-out: (0.42, 0, 0.58, 1.0).
dlai est le dlai avant le dclenchement de lanimation.
La proprit transition est compatible avec tous les navigateurs actuels. Cependant,
si vous voulez lui assurer un support plus tendu, vous pouvez utiliser les prxes
habituels: -moz-transition, -webkit-transition, -o-transition, etc.
Modification progressive dune proprit
Cette section montre comment dnir des animations sur la couleur et/ou la transparence
des lments.
Modier la couleur dun lment
Notre premier exemple va consister animer la couleur dun lment au survol. Pour ce
faire, vous devez:
dnir une classe contenant la proprit transition: color et lafecter
llment concern;
dnir la pseudo-classe associe et xer la couleur atteindre.
Ici, le code HTML5 afche un paragraphe de texte de classe anim-couleur. Le
code CSS de la classe anim-couleur dnit la taille des caractres et le type de la
transition: color 2s ease-in. Quant la pseudo-classe anim-couleur:hover, elle
se contente de dnir la couleur cible lorsque llment est survol.
<!DOCTYPE html>
<html>
<head>
<title>Animation de la couleur</title>
<style>
.anim-couleur {
font-size: 40px;
transition: color 2s ease-in;
}
.anim-couleur:hover { color: red; }
</style>
</head>
<body>
<p class="anim-couleur">Placez le pointeur sur ce texte</p>
</body>
</html>
Modier la transparence dun lment
La proprit opacity permet de rgler la transparence dun lment. Pour faire
disparatre un lment au survol, il suft de dnir:
une classe dans laquelle la proprit transition: opacit est initialise et
lafecter llment concern;
la pseudo-classe correspondante dans laquelle lopacit cible est spcie.
Dans ce code, par exemple, limage disparat progressivement lorsquelle est survole.
<!DOCTYPE html>
<html>
<head>
<title>Animation de la transparence</title>
<style>
.anim-opacite { transition: opacity 2s linear; }
.anim-opacite:hover { opacity: 0; }
</style>
</head>
<body>
<img class="anim-opacite" src="cheval250.jpg" />
</body>
</html>
Animer une transformation
En utilisant conjointement les proprits CSS3 transform et transition, vous
naurez besoin que de quelques lignes de code pour animer une transformation.
Pour dplacer progressivement de 50pixels une image lorsquelle est survole, voici le
code utiliser:
<!DOCTYPE html>
<html>
<head>
<title>Animation dune translation</title>
<style>
.animation { transition: all 2s linear; }
.animation:hover {
transform: translate(50px, 0);
-webkit-transform: translate(50px, 0);
}
</style>
</head>
226 Chapitre 13
<body>
<img class="animation" src="cheval250.jpg" />
</body>
</html>
Le code HTML5 se contente dafcher une image de classe animation.
La classe animation dnit la proprit transition:
transition: all 2s linear;
Lanimation sera linaire et elle durera deux secondes. La valeur all tant applique
au premier paramtre, toutes les proprits modies pour cet lment seront
automatiquement animes. Ici, seule une translation est applique limage, mais on
aurait pu galement ajouter une disparition progressive, une rotation ou un quelconque
autre efet.
Pour vous en convaincre, modiez la pseudo-classe animation:hover comme suit:
.animation:hover
{
transform: translate(50px, 0) rotate(360deg);
-webkit-transform: translate(50px, 0) rotate(360deg);
opacity: 0;
}
Maintenant, lorsque limage est pointe, elle subit simultanment une translation, une
rotation et une disparition via la proprit opacity.
Dclencher une animation en jQuery
Il peut tre intressant de dclencher une animation en jQuery. Pour cela, il suft de
dnir une fonction de gestion vnementielle associe, par exemple, la proprit
onClick dun lment HTML button.
Ce code montre comment dclencher une animation sur lattribut top dune balise
<div> la suite dun clic sur un <button>, puis comment restituer la position initiale de
la balise <div> la suite dun clic sur un autre bouton.
<!DOCTYPE html>
<html>
<head>
<title>Animation dclenche en jQuery</title>
<style>
div {
position: absolute;
left: 100px;
top: 100px;
height: 50px;
width: 100px;
padding: 10px;
background: Yellow;
transition: top 1s ease-in;
}
</style>
</head>
<body>
<button id="animer">Cliquez ici pour animer la <div></button>
<button id="revenir">Cliquez ici pour rinitialiser la <div></button>
<div id="madiv">Une simple balise <div></div>
<script>
$(function(){
$('#animer').click(function(){
$('#madiv').css('top', '150px');
});
$('#revenir').click(function(){
});
});
</script>
</body>
</html>
Figure13.13
Ces deux boutons
agissent sur la proprit
top de la balise <div>.
Examinons le code.
La partie HTML5 dnit deux <button> didentiants animer et revenir et une <div>
didentiant madiv.
La partie CSS3 dnit les caractristiques de la balise <div>: position (top, left), taille
(width, height), marges internes (padding), couleur darrire-plan (background),
type de la transition (transition: top).
La partie jQuery dnit les gestionnaires vnementiels lis aux clics sur les deux
boutons. Tous deux modient lattribut top de la balise <div> en utilisant la fonction
css():
Ce code est certes lmentaire mais, en y insrant des instructions plus volues
(notamment en agissant sur la proprit transform), vous pourrez commander des
animations la demande.
228 Chapitre 13
Quelques animations classiques
Cette section passe en revue quelques animations frquemment utilises et vous montre
comment les mettre en place laide dinstructions CSS3/jQuery.
Apparition et disparition
Dans les pages prcdentes, vous avez appris faire disparatre progressivement
un lment HTML en utilisant la proprit transition et en jouant sur lopacit de
llment. Pour simplier encore la tche, vous pouvez faire appel aux fonctions jQuery
show() et hide(). Ces fonctions peuvent tre utilises avec zro, un, deux ou trois
arguments:
Sans argument, la disparition ou lapparition dure 400millisecondes.
Lorsquun argument est spci, il peut indiquer une dure (slow, fast ou en
millisecondes) ou un mode de disparition/dapparition (linear, swing, easeInQuad,
etc.) Reportez-vous la page http://api.jqueryui.com/easings/ pour savoir quelles
constantes vous pouvez utiliser.
Lorsque deux arguments sont spcis, ils indiquent la dure de lanimation et la
fonction utiliser lorsque lanimation est termine (fonction de callback).
Lorsque trois arguments sont spcis, ils indiquent la dure de lanimation, le mode
de disparition/dapparition et la fonction utiliser lorsque lanimation est termine.
titre dexemple, le code suivant fait disparatre progressivement une image lorsquelle
est survole par la souris et la fait rapparatre lorsque le pointeur se trouve en dehors
de la zone dafchage originale de limage.
<!DOCTYPE html>
<html>
<head>
<title>Apparition et disparition progressive en jQuery</title>
</head>
<body>
<img src="cheval250.jpg" id="image">
<script>
$(function(){
$('#image').mouseenter(function(){
$(this).hide(1000);
});
$('#image').mouseleave(function(){
$(this).show(1000);
});
});
</script>
</body>
</html>
Les fonctions jQuery mouseenter() et mouseleave() sont excutes lorsque le
pointeur de la souris (respectivement) entre puis sort de la zone dafchage du slecteur.
Ici, llment concern est limage didentiant #image:
$('#image').mouseenter(function(){ ... });
$('#image').mouseleave(function(){ ... });
La dure de lanimation est xe 1000 millisecondes. Limage disparat/apparat donc
en une seconde:
$(this).hide(1000);
$(this).show(1000);
Enchaner plusieurs disparitions/apparitions
En utilisant la fonction de callback des fonctions show() et hide(), il est possible
denchaner plusieurs disparitions ou apparitions. titre dexemple, le code suivant fait
disparatre lune aprs lautre les quatre balises <div> contenues dans le document
lorsque le pointeur de la souris est plac au-dessus de la premire balise <div> (voir
Figure13.13):
<!DOCTYPE html>
<html>
<head>
<title>Apparition et disparition progressive en jQuery</title>
div {
width: 150px;
height: 150px;
}
#vert { background-color: green; }
#rouge { background-color: red; }
#jaune { background-color: yellow; }
#bleu { background-color: blue; }
</style>
</head>
<body>
<div id="vert"></div>
<div id="rouge"></div>
<div id="jaune"></div>
<div id="bleu"></div>
<script>
$(function(){
$('#vert').mouseenter(function(){
$('div').frst().hide(1000,function suivant1(){
$(this).next().hide(1000, suivant1);
});
});
230 Chapitre 13
$('#vert').mouseleave(function(){
$('div').frst().show(1000,function suivant2(){
$(this).next().show(1000, suivant2);
});
});
});
</script>
</body>
</html>
Figure 13.14
Les quatre balises
<div> disparaissent
tour tour.
Les lments dclencheurs de lanimation sont lentre et la sortie de la zone dafchage
de la premire balise <div>:
$('#vert').mouseenter(function(){ ... });
$('#vert').mouseleave(function(){ ... });
Lorsque le pointeur survole la premire balise <div>, on la fait disparatre en 1 000
millisecondes:
$('div').frst().hide(1000,function suivant1(){
Lorsque la disparition est termine, la fonction de callback suivant1() est excute.
Cette fonction fait disparatre la balise <div> suivante, si elle existe. Cette disparition
termine, la fonction suivant1() est nouveau appele pour faire disparatre la balise
<div> suivante, si elle existe:
$(this).next().hide(1000, suivant1);
Lorsque le pointeur quitte la zone dafchage de la premire balise <div> :
$('#vert').mouseleave(function(){
Cette balise est nouveau afche en une seconde avec la fonction show():
$('div').frst().show(1000,function suivant2(){
Une fois la balise afche, la fonction de callback suivant2() est excute. Cette
fonction afche la balise <div> suivante, si elle existe. Une fois lafchage termin, la
fonction suivant2() est excute de faon rcursive jusqu ce que la dernire balise
<div> soit afche:
$(this).next().show(1000, suivant2);
Fondu enchan
Les fonctions fadeOut() et fadeIn() permettent respectivement de faire disparatre
et de faire apparatre progressivement des lments HTML quelconques. La syntaxe de
ces fonctions est la mme que celle des fonctions show() et hide(). Elles peuvent
donc admettre zro, un, deux ou trois arguments. Reportez-vous la section prcdente
pour en savoir plus au sujet de ces arguments.
Dans ce code, deux images de mme taille sont afches lune sur lautre. Lorsque le
pointeur de la souris est plac au-dessus de limage visible, elle est progressivement
cache pour rvler lautre image. Inversement, lorsque le pointeur est dplac en
dehors de limage, la premire image apparat progressivement en cachant celle qui tait
visible.
<!DOCTYPE html>
<html>
<head>
<title>Fondu enchan en jQuery</title>
img {
position: absolute;
top: 100px;
left: 100px;
}
#f1 { z-index: 2; }
#f2 { z-index: 1; }
</style>
</head>
<body>
<img src="fondu1.jpg" id="f1">
<script>
$(function(){
$('#f1').mouseenter(function(){
$('#f1').fadeOut(2000);
});
$('#f1').mouseleave(function(){
$('#f1').fadeIn(2000);
});
});
</script>
</body>
</html>
Les deux images sont places dans le DOM laide de deux balises <img>:
232 Chapitre 13
Pour afcher les deux images lune sur lautre, il suft dafecter la valeur absolute leur
proprit position et de dnir leur emplacement avec les proprits top et left:
position: absolute;
top: 100px;
left: 100px;
La proprit z-index est utilise pour dcider quelle image sera au-dessus de lautre.
Ici, cest limage didentiant #f1 qui sera visible par dfaut, car sa proprit z-index a
la plus grande valeur:
#f1 { z-index: 2; }
#f2 { z-index: 1; }
Les vnements qui dclenchent lanimation sont le dbut et la n du survol de limage
#f1:
$('#f1').mouseenter(function(){ ... });
$('#f1').mouseleave(function(){ ... });
Lorsque le pointeur survole limage #f1, un fadeOut de deux secondes lui est appliqu,
ce qui provoque sa disparition progressive:
$('#f1').fadeOut(2000);
Lorsque le pointeur ne survole plus limage #f1, un fadeIn de deux secondes lui est
appliqu, ce qui provoque son apparition progressive:
$('#f1').fadeIn(2000);
Animations personnalises
La fonction animate() permet danimer une proprit CSS quelconque. Cette fonction
admet plusieurs syntaxes, mais nous utiliserons uniquement celle-ci:
animate({ proprit1: valeur1, proprit2: valeur2, etc. },
dure, modle, function(){
// Instructions excutes aprs lanimation
});
O:
proprit1, proprit2, etc., sont les proprits animer.
valeur1, valeur2, etc., sont les valeurs afecter aux proprits correspondantes.
dure est la dure de lanimation en millisecondes.
modle est le modle de progression de lanimation (swing ou linear).
function() est la fonction de callback. Ses instructions seront excutes lorsque
lanimation sera termine.
titre dexemple, nous allons utiliser la fonction animate() pour dplacer une balise
<div> an de lui faire dcrire un carr de 200pixels de ct. Voici le code utilis:
<!DOCTYPE html>
<html>
<head>
<title>Animate() jQuery</title>
div {
position: absolute;
width: 150px;
height: 150px;
top: 50px;
left: 50px;
background-color: green;
}
</style>
</head>
<body>
<button id="animation">Cliquez ici pour animer la balise <div>
</button><br>
<div></div>
<script>
$(function(){
$('#animation').click(function(){
$('div').animate({left: '250px'})
.animate({top: '250px'})
.animate({left: '50px'})
.animate({top: '50px'});
});
});
</script>
</body>
</html>
Lorsque lutilisateur clique sur le bouton:
Quatre animations senchanent en modiant progressivement les proprits top et
left de la balise <div> via la fonction animate(). Par exemple, la premire animation
dplace la balise <div> de son emplacement par dfaut (20pixels du bord gauche)
250pixels du bord gauche:
Difrer une animation
La fonction delay() permet de difrer lexcution dune animation. Il suft de prciser
le dlai dattente en millisecondes dans les parenthses. Par exemple, pour marquer une
pause dune seconde entre chacun des dplacements de lanimation prcdente, vous
chanerez plusieurs reprises les fonctions animate() et delay():
234 Chapitre 13
.delay(1000)
.animate({top: '250px'})
.delay(1000)
.animate({left: '50px'})
.delay(1000)
.animate({top: '50px'});
});
Mettre en place un timer
Il est parfois ncessaire de rpter un traitement intervalles rguliers. En utilisant le
langage JavaScript, quelques instructions sufront. Dnissez le code excuter dans
une fonction et utilisez la fonction setInterval() pour faire rfrence cette fonction
en indiquant la priodicit de lexcution. Voici le code utiliser:
function bis(){
//Une ou plusieurs instructions
}
setInterval(bis,priode en ms);
Supposons que vous vouliez afcher la date et lheure systme dans une page Web.
Pour cela, la fonction setInterval() est tout indique. Il sufra en efet dcrire les
instructions ncessaires lafchage de lheure toutes les secondes et de lancer cette
fonction toutes les secondes.
Avant de passer au code, vous devez savoir que lheure systme est accessible en
dnissant une variable JavaScript de type Date et en lui appliquant les fonctions
getHours(), getMinutes() et getSeconds() pour rcuprer les heures, les
minutes et les secondes. Voici le code utiliser:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Horloge lmentaire</title>
</head>
<body>
<div id="heure"></div>
<script>
$(function() {
function horloge(){
var hms = new Date();
var h, m, s;
h = hms.getHours();
if (h<10) h = "0" + h;
m = hms.getMinutes();
if (m<10) m = "0" + m;
s = hms.getSeconds();
if (s<10) s = "0" + s;
$('#heure').html(h + ' : ' + m + ' : ' + s);
}
setInterval(horloge,1000);
});
</script>
</body>
</html>
La fonction horloge() commence par crer un objet Date. Elle dnit ensuite les
variables h, m et s, et les initialise avec les fonctions getHours(), getMinutes()
et getSeconds(). Pour que les heures, les minutes et les secondes soient toujours
afches avec deux chifres, la valeur des variables h, m et s est teste. En fonction
du rsultat, un "0" vient ventuellement prxer la composante h, m et/ou s. Lheure
systme est enn afche dans la balise did heure laide dune instruction jQuery (voir
Figure13.15):
$('#heure').html(h + ' : ' + m + ' : ' + s);
Figure 13.15
Lheure est bien
afche au
format HH:MM:SS.
Exercice 15
Dans cet exercice, vous allez ajouter un slider la page apropos.php, droite de la
vido. Pour cela, vous utiliserez cinq images de mmes dimensions, nommes slider1.jpg
slider5.jpg et accessibles ces adresses (voir Figure13.16):
http://www.mediaforma.com/eformation/exercice15/slider1.jpg
Figure 13.16
Les cinq images
utiliser dans le slider.
Pour faciliter les choses, il est conseill de crer une image unique contenant les cinq
images mises bout bout. Vous appellerez cette image slider.jpg (voir Figure13.17).
Figure 13.17
Les cinq images ont t places les unes derrire les autres.
Les images slider1.jpg slider5.jpg ont une taille gale 600 250 pixels.
Limage slider.jpg doit donc avoir une taille gale 3000250pixels. Pour obtenir lefet
recherch, vous dcalerez limage vers la gauche de 600, 1200, 1800 puis 2400pixels.
Jen ai bien assez dit. Je vous suggre donc de vous mettre au codage sans plus attendre.
14
Mise jour
avec AJAX
Ce chapitre va sintresser une technique de programmation impressionnante: AJAX.
Avec quelques instructions jQuery, vous allez pouvoir mettre jour une portion dune
page Web sans toucher au reste de la page. Les applications de cette technique sont
aussi nombreuses quexaltantes! Vous pourrez, par exemple, raliser un chat, afcher le
nombre de visiteurs connects votre site ou encore les cours de la Bourse
Charger un chier
Pour mettre jour un lment sur une page Web en utilisant des donnes stockes sur
un serveur, le plus simple consiste utiliser la mthode jQuery load():
load('URL de llment', function() {
//une ou plusieurs instructions excutes aprs le chargement des donnes
});
La fonction de callback est facultative. Si elle est prsente, les instructions qui la
composent seront excutes lorsque le chier aura t entirement rapatri par la
mthode load().
titre dexemple, ce document HTML contient deux boutons et un lment div. Le
premier bouton va tre utilis pour afcher un texte dans llment div et le deuxime
pour afcher une image dans ce mme lment:
<!DOCTYPE html>
<html>
<head>
<title>Chargement AJAX avec load()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-style: solid;
border-width: 3px;
238 Chapitre 14
}
</style>
</head>
<body>
<button id="charge-texte">Charger le texte</button>
<button id="charge-image">Charger limage</button><br/><br/>
<div id="zone"></div>
<script>
$(function() {
$('#charge-texte').on('click', function(){
$('#zone').load('texte.htm');
});
$('#charge-image').on('click', function(){
$('#zone').load('image.htm');
});
});
</script>
</body>
</html>
Dans cet exemple, aucune fonction callback ntant spcie dans les paramtres
de la mthode load(), cette dernire se contente de charger les chiers HTML
correspondants et de les afcher dans llment div.
Voici le code du chier texte.htm:
<p>
<font size="3"><i>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing
elit. Sed non risus. Lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa,
varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis
semper.</i></font>
</p>
Et voici le code du chier image.htm:
<p><img src="chat.jpg"></p>
La Figure14.1 prsente le rsultat obtenu suite au clic sur le premier bouton.
Mise jour avec AJAX 239
Figure 14.1
Seul le contenu du
<div> a t mis
jour lorsque le
bouton a t cliqu.
$.get()
La mthode load() nest pas la seule pouvoir rcuprer des donnes via AJAX. Vous
pouvez galement utiliser:
la fonction jQuery $.get() pour obtenir des donnes envoyes par le serveur en
utilisant une requte HTTP GET;
la fonction jQuery $.post() pour obtenir des donnes envoyes par le serveur en
utilisant une requte HTTP POST.
Vous utiliserez la fonction $.get() si les donnes envoyes au serveur sont de petite
taille. Vous utiliserez la fonction $.post() si les donnes envoyes au serveur sont de
grande taille et/ou contiennent des informations condentielles (un mot de passe, par
exemple).
Voici la syntaxe de la fonction $.get():
$.get(URL, function() {
// Une ou plusieurs instructions excutes lorsque les donnes ont t
rapatries
});
titre dexemple, nous allons excuter un chier PHP an dextraire les donnes qui y
sont stockes. Ces donnes correspondent aux trois lois de la robotique dIsaac Asimov.
LURL passe sera du type suivant:
donnees?l=1 // pour obtenir la premire loi
donnees?l=2 // pour obtenir la deuxime loi
donnees?l=3 // pour obtenir la troisime loi
240 Chapitre 14
Voici le code du chier PHP:
<?php
$loi = array("Un robot ne peut porter atteinte un tre humain, ni, restant
passif, permettre quun tre humain soit expos au danger.",
"Un robot doit obir aux ordres que lui donne un tre humain, sauf
si de tels ordres entrent en confit avec la Premire loi.",
"Un robot doit protger son existence tant que cette protection
nentre pas en confit avec la Premire ou la Deuxime loi.");
$l=$_GET["l"];
echo "<u>Loi de la robotique N ".$l."</u><br><br>";
echo "<b>".$loi[$l-1]."</b>";
?>
Les premires lignes dnissent le tableau $loi et y mmorisent les trois lois de la
robotique.
La valeur passe dans lURL est rcupre et stocke dans la variable $l:
$l=$_GET["l"];
Linstruction suivante afche un texte soulign:
Et la dernire instruction afche la loi extraite du tableau $loi:
echo "<b>".$loi[$l-1]."</b>";
Voici le code HTML5/jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Requte AJAX $.get()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-width: 3px;
}
</style>
</head>
<body>
<h2>Les lois de la robotique, selon Isaac Asimov</h2>
<button id="loi1">Loi N 1</button>
<button id="loi3">Loi N 3</button><br/>
<script>
$(function() {
$('#loi1').on('click', function(){
$.get('donnees.php?l=1',function(data){
$('#zone').html(data);
});
});
});
});
});
});
});
</script>
</body>
</html>
Le corps du document dnit un titre h2, trois boutons et un lment div did #zone.
<button id="loi3">Loi N 3</button><br/>
Lorsque le premier bouton est cliqu, une requte GET est efectue sur lURL
http://www.mediaforma.com/eformation/donnees.php?l=1:
Lorsque les donnes ont t rapatries, la fonction callback sexcute. Les donnes
rcupres sont afches dans llment div #zone :
Les deux autres boutons ont un comportement similaire, ceci prs quils envoient
(respectivement) les paramtres l=2 et l=3 au programme PHP. Ceci an dafcher la
deuxime et la troisime loi de la robotique.
La Figure 14.2 reprsente le rsultat obtenu lorsque lutilisateur clique sur le premier
bouton.
242 Chapitre 14
Figure 14.2
La premire loi
est afche dans
le <div> suite au
clic sur le premier
bouton.
Cet exemple est accessible partir de lURL www.mediaforma.com/eformation/get.htm.
$.post()
Dans lexemple prcdent, les paramtres passs apparaissaient dans lURL. Pour garder
les paramtres secrets ou pour passer des donnes de taille importante, vous utiliserez
une requte POST.
Voici la syntaxe de la fonction $.post():
$.post(URL, {donne1: 'valeur1', donne2: 'valeur2',}, function() {
// Une ou plusieurs instructions excutes lorsque les donnes ont t
rapatries
});
Ici, les donnes sont passes dans le deuxime paramtre de la fonction $.post().
Nous allons modier le code du programme prcdent pour accder aux donnes via
une requte POST.
LURL interroge aura pour nom "donneesPost.php". Une seule donne nomme "l" sera
communique. Elle aura pour valeur 1, 2 ou 3 selon la loi afcher.
Le programme PHP est lgrement difrent:
<?php
$loi = array("Un robot ne peut porter atteinte un tre humain, ni, restant
passif, permettre quun tre humain soit expos au danger.",
"Un robot doit obir aux ordres que lui donne un tre humain, sauf
si de tels ordres entrent en confit avec la Premire loi.",
"Un robot doit protger son existence tant que cette protection
nentre pas en confit avec la Premire ou la Deuxime loi.");
$l=$_POST["l"];
echo "<b>".$loi[$l-1]."</b>";
?>
Le code HTML5/jQuery est galement lgrement difrent:
<!DOCTYPE html>
<html>
<head>
<title>Requte AJAX $.post()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-width: 3px;
}
</style>
</head>
<body>
<button id="loi3">Loi N 3</button><br><br>
<script>
$(function() {
$.post('donneesPost.php',{l:'1'},function(data){
});
});
});
});
});
});
});
</script>
</body>
</html>
Le rsultat est bien entendu le mme que pour la requte $.get() (voir Figure14.3).
244 Chapitre 14
Figure 14.3
Ici, le deuxime
bouton a t cliqu.
$.ajax()
La fonction $.ajax() permet dmettre des requtes AJAX. Elle admet de trs nombreux
paramtres. Pour avoir une description exhaustive de cette fonction, reportez-vous la
documentation en ligne: http://api.jquery.com/jQuery.ajax/.
Dans cet ouvrage, nous utiliserons lune des syntaxes de la fonction $.ajax():
$.ajax(options);
O options peut contenir les lments suivants:
type: type de la requte, GET ou POST (GET par dfaut).
url: adresse laquelle la requte doit tre envoye.
data: donnes envoyer au serveur.
dataType: type des donnes qui doivent tre retournes par le serveur (xml, html,
script, json, text).
success: fonction appeler si la requte aboutit.
error: fonction appeler si la requte naboutit pas.
timeout: dlai maximal (en millisecondes) pour que la requte soit excute. Si ce
dlai est dpass, la fonction spcie dans le paramtre error sera excute.
titre dexemple, nous allons rcrire les programmes get.htm et post.htm pour utiliser la
fonction $.ajax() la place des fonctions $.get() et $.post().
Requte GET via la fonction $.ajax()
Voici lquivalent du code get.htm rcrit en utilisant la fonction $.ajax() :
<!DOCTYPE html>
<html>
<head>
<title>Requte get $.ajax()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-width: 3px;
}
</style>
</head>
<body>
<script>
$(function() {
$.ajax({
type: 'GET',
url: 'donnees.php?l=1',
timeout: 3000,
success: function(data){
},
error: function(){
$('#zone').html('Cette requte AJAX n\'a pas abouti');
}
});
});
$.ajax({
type: 'GET',
timeout: 3000,
},
error: function(){
246 Chapitre 14
}
});
});
$.ajax({
type: 'GET',
timeout: 3000,
},
error: function(){
}
});
});
});
</script>
</body>
</html>
Le code est bien plus "verbeux" quavec la fonction $.get(), mais il est aussi trs simple
comprendre, facile maintenir et plus complet. Ici, nous avons introduit un message
derreur si la requte naboutit pas:
error: function(){
}
Ce code est accessible ici : www.mediaforma.com/eformation/getAjax.htm (voir
Figure14.4).
Figure 14.4
Le troisime bouton
a t cliqu.
Requte POST via la fonction $.ajax()
Voici lquivalent du code post.htm (voir la section intitule "$.post()") rcrit en
utilisant la fonction $.ajax():
<!DOCTYPE html>
<html>
<head>
<title>Requte post $.ajax()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-width: 3px;
}
</style>
</head>
<body>
<script>
$(function() {
$.ajax({
type: 'POST',
url: 'donneesPost.php',
data: {l:'1'},
timeout: 3000,
},
error: function(){
}
});
});
$.ajax({
type: 'POST',
data: {l:'2'},
timeout: 3000,
248 Chapitre 14
},
error: function(){
}
});
});
$.ajax({
type: 'POST',
data: {l:'3'},
timeout: 3000,
},
error: function(){
}
});
});
});
</script>
</body>
</html>
Ce code est accessible ici: www.mediaforma.com/eformation/postAjax.htm.
Vous en savez maintenant bien assez pour lancer des requtes AJAX sur votre site. Un
petit exercice va conrmer vos acquis.
Mise jour avec AJAX 249 Mise jour avec AJAX 249
Exercice 16
En utilisant une requte AJAX, afchez le cours du CAC 40 dans la page principale du
site index.htm. Le but recherch est reprsent la Figure14.5.
Figure 14.5
Le cours du CAC 40 est afch dans la balise <article>.
Pour arriver ce rsultat, vous ferez appel au programme litCac40.php dont voici le code:
<?php
$path = "http://download.fnance.yahoo.com/d/quotes.csv?s=%5EFCHI&f=l1";
$yahooquote = fopen($path, "r");
$line = fgets($yahooquote); // Rcupration du CAC 40
echo "<br /><br />Le CAC 40 vaut ".$line. "points."; // Afichage
fclose($yahooquote);
?>
Ce programme se trouve ladresse www.mediaforma.com/eformation/exercice16/
litCac40.php. Il utilise le serveur Yahoo Finance pour rcuprer et afcher la valeur du
CAC40.
15
Mise en ligne
dun site
Vous tes maintenant arriv au terme de votre apprentissage. Quel chemin parcouru !
Vous tes dsormais capable de dnir vos propres pages Web en y incluant du code
HTML5, CSS3 et jQuery. Pour linstant, ce code fonctionne en local sur votre ordinateur.
Il est temps de le rendre accessible sur le Web. Tout ce que vous devez savoir ce sujet
se trouve dans ce dernier chapitre.
Choisir un hbergeur
Pour que votre site soit accessible sur le Web, vous devez choisir un hbergeur
de sites. De trs nombreux hbergeurs sont prsents, tant en France qu
ltranger. Pour vous aider dans votre choix, vous pouvez consulter des annuaires
dhbergement, comme www.hebergementweb.org, www.guide-hebergeur.fr ou
www.10meilleurshebergementsweb.fr. Ces annuaires sont prendre "avec prcaution",
mais ils vous aideront dbroussailler le terrain
Pour commencer, vous devrez choisir le type de lhbergement: ddi ou mutualis. Dans
un hbergement ddi, un serveur Web est entirement allou votre site. En revanche,
dans un hbergement mutualis, votre site partage un serveur avec dautres sites. Dans
la plupart des cas, un hbergement mutualis est largement sufsant. Si la ractivit de
ce type dhbergement peut tre infrieure celle dun serveur ddi (vous partagez en
efet la bande passante, le processeur, la mmoire et les accs disque avec les autres
sites), le prix de lhbergement peut tre divis par dix ou plus! Personnellement, jutilise
un hbergement mutualis pour tous mes sites. Certains hbergent des vidos, dautres
uniquement du texte et des images. Certains totalisent 100 200 visiteurs uniques par
jour, dautres 1000 1500. Pour linstant, aucun utilisateur ne sest plaint de la lenteur de
mes sites. Je vous conseille donc dopter pour un hbergement mutualis. Vous pourrez
toujours faire voluer votre compte vers un hbergement ddi si le besoin sen fait
sentir.
Le serveur Web peut fonctionner sous Linux ou sous Windows. Pour choisir le systme le
mieux adapt vos besoins, posez-vous les questions suivantes:
1. Avez-vous lintention de programmer en PHP ou en Perl et/ou dassocier votre site
une base de donnes MySQL?
252 Chapitre 15
2. Allez-vous utiliser des outils de dveloppement Microsoft, tels que Visual Studio, pour
dvelopper des sites ASP?
Dans le premier cas, Linux est le choix qui simpose. Dans le second, une seule solution,
vous devez opter pour un serveur ASP. Enn, si vous navez aucune rponse ces
questions et/ou si vous ne comprenez pas leur signication, dcidez-vous pour un serveur
Linux. Il ofrira autant de fonctionnalits que son confrre Windows un cot infrieur.
Crer un nom de domaine
Personnellement, jutilise lhbergeur OVH dont je suis satisfait, mais rien ne vous
empche de choisir un autre hbergeur, qui correspondrait mieux vos attentes. Quel
que soit votre choix, vous allez devoir choisir un nom de domaine pour votre site. Optez
pour un nom qui correspond au contenu du site et qui nest pas dj pris!
Sur OVH, par exemple, il suft dentrer un nom de domaine pour connatre sa disponibilit
pendant la frappe (voir Figure15.1).
Figure 15.1
Les domaines
monsiteamoi.eu
et monsiteamoi.
net sont
disponibles. Mais
pas les domaines
monsiteamoi.fr ni
monsiteamoi.com.
Lorsque vous avez trouv un nom de domaine appropri et disponible, cliquez sur
Commander (ou sur un autre lien/bouton quivalent) puis suivez la procdure de
rservation de nom de domaine. Quelques instants aprs avoir cr votre nom de domaine
et rserv un espace chez un hbergeur, vous recevez un e-mail qui vous informe que
votre espace sera actif dans un dlai denviron 24 48 heures (voir Figure15.2).
Mise en ligne dun site 253
Figure 15.2
Le nom de domaine
sera cr sous peu.
Vous devrez donc vous armer de patience et attendre jusqu lactivation de votre espace.
Cet e-mail contient galement:
1. Les informations permettant daccder votre espace client: votre nom dutilisateur
et votre mot de passe.
2. Les informations permettant daccder la messagerie associe votre nom de
domaine.
3. Les codes ncessaires pour vous connecter votre espace en FTP: le nom du serveur
FTP, le login et le mot de passe.
Ces informations seront ncessaires pour transfrer vos chiers dans votre espace.
Transfrer les chiers en FTP
Pour transfrer vos chiers dans votre espace, vous devez utiliser un client FTP. Je vous
conseille lexcellent FileZilla, librement tlchargeable ladresse http://lezilla-project.org/.
Cliquez sur Download FileZilla Client, puis sur un des liens proposs sous Windows, et
installez FileZilla.
254 Chapitre 15
Figure 15.3
Le client FileZilla
est sur le point
dtre tlcharg.
Vous allez maintenant uploader vos chiers HTML, CSS et JS sur votre espace Web.
Lancez FileZilla. Lancez la commande Gestionnaire de sites dans le menu Fichier ou
appuyez sur Ctrl + S. Une bote de dialogue intitule Gestionnaire de sites safche.
Cliquez sur Nouveau site. Entrez le nom de votre site et appuyez sur Entre. Ce nom na
aucune importance en soi: il sert simplement identier votre espace Web.
Reportez-vous le-mail qui vous a t envoy par votre hbergeur. Vous y trouverez les
informations permettant daccder votre espace FTP (voir Figure15.4).
Figure 15.4
Toutes les informations
ncessaires sont
contenues dans le-mail de
lhbergeur.
Mise en ligne dun site 255
Plusieurs informations sont ncessaires pour tablir une connexion FTP avec votre
espace Web:
Entrez le nom du serveur FTP dans la zone de texte Hte.
Choisissez Normale dans la liste droulante Type dauthentication.
Entrez votre Login FTP dans la zone de texte Identiant et votre mot de passe FTP
dans la zone de texte Mot de passe (voir Figure 15.5).
Figure 15.5
Laccs au serveur
FTP est maintenant
paramtr.
Ces informations entres, cliquez sur OK pour fermer la bote de dialogue en enregistrant
la nouvelle connexion.
Lancez la commande Gestionnaire de sites dans le menu Fichier ou appuyez sur Ctrl+S,
puis double-cliquez sur la connexion que vous venez de crer dans la zone de liste
Slectionnez une entre.
Votre espace Web apparat dans le volet droit de la fentre de FileZilla et les mmoires
de masse de lordinateur dans le volet gauche. Slectionnez un un les chiers placer
sur le serveur FTP dans le volet gauche et dposez-les dans le volet droit en utilisant la
technique du glisser-dposer de Windows (voir Figure15.6).
256 Chapitre 15
Figure 15.6
Il suft de dposer les
chiers uploader dans
le volet droit.
Supposons que votre nom de domaine soit www.monsiteamoi.eu. Si vous uploadez le chier
album-photo.htm la racine du site, il sera accessible ladresse www.monsiteamoi.eu/
album-photo.htm.
Cette fois-ci, cet ouvrage est bel et bien termin. Jespre que vous y avez appris
beaucoup de choses, et je vous souhaite beaucoup de succs avec vos sites Web.
Index 257
Symboles
:
empty 154
rst-child 31
rst-letter 32
rst-line 32
focus 32, 184
invalid 132
lang 32
link 31
valid 132
visited 31
# 32
$() 4, 37
$.ajax() 244, 245, 247
$.get() 239
$.post() 242
<gcaption> 78
<gure> 78
@font-face 50
-khtml 5
<link> 14
@media 177
-moz 5
-ms 5
22
-o 5
<span> 191
-webkit 5
A
a 27, 54
a:visited 54
abort 192
absolute 164, 169
afterprint 185
AJAX 237, 249
charger un chier 237
Album photos 85
Alias 37
alt 75
animate() 232
Animations 211
en jQuery 226
personnalises 232
Apparition 228
Arrire-plan d'un conteneur 77
Arrondis 89
article 163
ASCII 29
aside 163
attr() 40
Attributs des caractres 49
audio 201
jQuery 203
autofocus 124
B
b 24
background:url 150
Index
258 Index
background-color 59, 150
background-image 47
background-position 47
background-repeat 47
Balises 3
beforeonload 185
beforeprint 185
Bibliothque jQuery 7, 16
block 43, 159, 160
blur 185, 190
body 21
BOM 9
border 75
border-collapse 145
border-radius 93
border-spacing 146
box-shadow 89
br 22
Byte Order Mark 9
C
CAC 40 249
callback 228
canplay 192
canplaythrough 192
Centrer une image dans un conteneur 79
change 190
Changements d'chelle 216
Charset 9
checked 34
Choisir un hbergeur 251
Chrome 7
class 30, 75
Classe 30
Clavier, vnements 187
click 188
Code
multichier 19
tout en un 19
Code ASCII 29
color 59
color-stop 70
colspan 147
Compatibilit 4
contains 34
contextmenu 190
Corps du document 21
Couleur
d'arrire-plan 59
des lments 59
du texte 59
modication progressive 224
Crer un nom de domaine 252
css() 39
CSS 2, 29
dans les balises 13
feuille de styles externe 14
feuille de styles interne 13
vs HTML 15
CSS3 12
prxe 5
cursive 47
D
datalist 117
Date 234
dblclick 188
dd 44
Dclaration de type de document 4
delay() 233
Dtecter l'inclinaison d'un appareil 197
DeviceOrientationEvent 196
dfn 44
Difrer une animation 233
Disparition 228
display 79
DOCTYPE 4
Document Object Model 4
Documents, organisation 160
DOM 4
drag 188
dragend 188
dragenter 188
dragleave 188
dragover 188
dragstart 188
drop 188
dt 44
DTD 4
durationchange 192
E
edits 160
lments 3
arrondir 93
audio 201
em 24
embedded content 160
emptied 192
empty 34
enabled 34
Index 259
enctype 121
ended 192
error 186, 192
vnements
clavier 187
formulaires 190
mdias 192
orientation 196
souris 188
Exercices
1 42
2 57
3 72
4 88
5 97
6 111
7 137
8 138
9 157
10 181
11 181
12 181
13 199
14 209
15 236
16 249
Expression rgulire 129
F
fadeIn() 231
fadeOut() 231
fantasy 47
Fentre
vnements 185
Feuille de styles 4
externe 12, 14
interne 12, 13
fFormulaire
dnir 113
eldset 116
FileZilla 253
Firefox 6
rst-of-type 33
xed 164, 165
oat 72, 170
focus 186, 191
Focus 124
Fondu enchan 231
font-family 47
font-size 48
Font Squirrel 52
font-style 49
font-variant 50
font-weight 49
footer 163
formchange 191
forminput 191
forms 160
Formulaires 113
de login 118
d'envoi de chier 121
de saisie de commentaires 120
lments 116
envoi par e-mail 114
vnements 190
FTP 253
G
en CSS 184
en HTML 183
en jQuery 185
getHours() 234
getMinutes() 234
getSeconds() 234
Google Chrome 7
gradient 62, 65, 67
Gradient
diagonal 65
horizontal 64
linaire multiple 65
linaire 62
radial 67
deux couleurs 67
multiple 70
restreint 69
vertical 63
grouping content 160
H
h1 23
h6 23
haschange 186
header 163
Hbergeur 251
height 75
hide() 228
Horloge 235
html() 38
HTML 2
commentaires 11
260 Index
validation 11
html5test 4
I
i 24
id 28, 75
Images 75
alt 75
border 75
class 75
empiler 82
height 75
id 75
insrer 75
lgender 78
liens hypermdia 78
prchargement 83
ractives 84
survol 81
title 75
width 76
img 75
img:hover 81
Inclinaison 197, 219
inline 43, 159, 160
inline-block 159, 160
input 191
input:required 129
input type= 116, 117
Insrer une image 75
interactive elements 160
Internet Explorer9 5
invalid 191
ISO-8859-1 9
J
jQuery 3, 7, 37
chanage 41
enchaner plusieurs disparitions/
apparitions 229
slecteur CSS 37
slecteurs spciques 38
K
keydown 187
keypress 187
keyup 187
Konqueror 5
L
label 116
Langue
de traitement 10
du document 9
primaire 10
last-child 33
last-of-type 34
legend 116
Lgendes 78
li 25
Liens
e-mail 29
hypertexte 27, 54
vers un chier 29
linear-gradient 62, 65
Link 13
Listes
puces 25
HTML 44
numrotes 25
personnaliser 45
list-style-image 45
list-style-type 34, 45
load 186
load() 237
loadeddata 192
loadedmetadata 193
loadstart 193
localStorage 134
M
Marges 175
margin 175
mark 25
Matrices 220
matrix 222
Media Queries 177
Mdias, vnements 192, 196
menu 99
Menus 99
droulant 103
horizontal 109
vertical 106
horizontal 100
vertical ottant 99
message 186
Meta 9, 10
metadata 160
Midori 5
Index 261
Mise en forme 15
Mise en ligne d'un site 251
Mise en page 159
sur plusieurs colonnes 172
monospace 47
mousedown 188
mousemove 189
mouseout 189
mouseout() 82
mouseover 189
mouseover() 82
mouseup 189
mousewheel 189
Mozilla 5
MP4 205
Multicolonnage 172
multipart/form-data 121
N
nav 163
Nom de domaine 252
not 34
Notepad++ 6, 7
nth-child 33
nth-last-child 33
nth-last-of-type 33
nth-of-type 33
O
ofine 186
Ogg Theora 205
ol 26
Ombrages 89
Omni Web 5
onabort 192
onafterprint 185
onbeforeonload 185
onbeforeprint 185
onblur 185, 190
oncanplay 192
oncanplaythrough 192
onchange 190
onclick 188
oncontextmenu 190
ondblclick 188
ondrag 188
ondragend 188
ondragenter 188
ondragleave 188
ondragover 188
ondragstart 188
ondrop 188
ondurationchange 192
onemptied 192
onended 192
onerror 186, 192
onfocus 186, 191
onformchange 191
onforminput 191
onhaschange 186
oninput 191
oninvalid 191
onkeydown 187
onkeypress 187
onkeyup 187
online 186
onload 186
onloadeddata 192
onloadedmetadata 193
onloadstart 193
only-child 34
only-of-type 34
onmessage 186
onmousedown 188
onmousemove 189
onmouseout 189
onmouseover 189
onmouseup 189
onmousewheel 189
onofine 186
ononline 186
onpagehide 186
onpageshow 186
onpause 193
onplay 193
onpopstate 186
onprogress 193
onratechange 193
onreadystatechange 193
onredo 186
onresize 186
onscroll 189
onseeked 193
onseeking 193
onselect 191
onstalled 193
onstorage 186
onsubmit 191
onsuspend 193
ontimeupdate 193
onundo 186
262 Index
onunload 186
onvolumechange 193
onwaiting 193
opacity 225
Opera 5
option 117
output 117
P
p 23
padding 94, 175
padding-left 47
pagehide 186
pageshow 186
Pages Web, optimiser 179
Paragraphes 23
pause 193
play 193
Polices 47
libres de droits 52
popstate 186
position 164
Positionnement
absolute 169
xed 165
relative 167
static 165
Prxes 5
CSS3 5
progress 193
Proprits, modication progressive 224
Pseudo-classes 31
rst-child 31
focus 32
hover 32
lang 32
link 31
visited 31
Pseudo-lments
rst-letter 32
rst-line 32
R
radial-gradient 67
ratechange 193
readystatechange 193
Recommandation candidate 5
redo 186
Rfrencement 10
relative 164, 167
Rendu 160
required 127
resize 186
Responsive Web Design 177
RGB 59
RGB() 60
RGBA 59
RGBA() 61
root 33, 160
Rotations 214
rowspan 147
S
Safari 5
sans-serif 47
scale 216
scaleX 218
scaleY 218
scripting 160
scroll 189
sections 160
seeked 193
seeking 193
select 117, 191
Slecteurs
CSS 30, 32
de classe 30
volus 33
hirarchiques 33
selection 34
serif 47
setInterval() 234
show() 228
Site Web 1
skew 219
small 25
Sondage 123
Souris, vnements 188
Squelette standard 7, 10
stalled 193
static 164, 165
Stockage local de donnes 113, 134
storage 186
strong 24
Styles, feuille de styles interne 13
submit 191
suspend 193
T
table 141
Index 263
Tableaux 141
ajouter une lgende 149
alignement dans les cellules 152
arrire-plan des cellules 150
arrondis et ombrages 155
bordures 144
fusionnes 145
spares 145
cellules vides 154
dnir 141, 142
espacer les cellules 146
fusionner des cellules 147
lignes paires et impaires 153
tabular data 160
Tags 3
Taille des caractres 48
target 34
text-align 152
textarea 117
text-decoration 49, 55
Texte, ombrage 92
text-indent 50
text-level semantics 160
text-shadow 92
text-transform 49
Timer 234
timeupdate 193
title 75
Title 10
Titre du document 10
Titres et sous-titres 23
tr:nth-child() 153
Transfrer les chiers en FTP 253
transform 211, 216, 219, 222
Transformations 211
animer 225
chelle 216
inclinaison 219
matrice 220
transition 223
Transitions 211, 223
Translations 211
Transparence
et opacit 61
modication progressive 225
U
u 25
ul 25
undo 186
unload 186
UTF-8 9
V
Validation
d'adresses URL 128
de donnes 127
d'e-mails 128
du code 11
par une expression rgulire 129
validator.nu 11
vertical-align 79, 152
video 193, 205
jQuery 207
volumechange 193
W
waiting 193
Webkit 5
WebM 205
width 76
Z
z-index 82

Html5-Css3-Jquery de Michel Martin PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Html5-Css3-Jquery de Michel Martin PDF

Hochgeladen von

Copyright:

Verfügbare Formate

HTML5, CSS3

<a name="bas" />

Das könnte Ihnen auch gefallen