html5 css3 Jquery de Michel Martin PDF

Michel Martin
HTML5, CSS3
& jQuery
Table des matières
Introduction ......................................................................................................VII
Les sources de l’ouvrage .................................................................................................................VII
Site compagnon..................................................................................................................................VII
Rubriques spéciales de ce livre.................................................................................................... VIII
Joindre l’auteur ................................................................................................................................. VIII
1. Avant de commencer......................................................................................1
Mais, au fait, qu’est-ce qu’un site Web ? .........................................................................................1
Qu’apporte chaque langage ? .........................................................................................................2
Vocabulaire et conventions d’écriture............................................................................................ 3
Compatibilité HTML5/CSS3............................................................................................................... 4
Les outils de développement............................................................................................................6
Votre première page HTML avec Notepad++............................................................................... 7
Premier contact avec le langage CSS3 ........................................................................................ 12
Pourquoi préférer 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. Éléments textuels ........................................................................................43

Les balises permettant d’afficher du texte ..................................................................................43
Listes HTML .........................................................................................................................................44
Personnaliser une liste..................................................................................................................... 45
Choisir la police du texte..................................................................................................................47
Taille des caractères......................................................................................................................... 48
Attributs des caractères................................................................................................................... 49
Utiliser des polices de caractères non conventionnelles....................................................... 50
Mise en forme des liens hypertexte ............................................................................................. 54
Exercice 2.............................................................................................................................................57
4. Couleur des éléments.................................................................................59

Couleur du texte................................................................................................................................ 59
Couleur d’arrière-plan d’un élément ............................................................................................ 59
Définir une couleur par son code RGB........................................................................................ 60
Table des matières III

Transparence et opacité des éléments ........................................................................................ 61
Gradient linéaire ................................................................................................................................ 62
Gradient radial.....................................................................................................................................67
Exercice 3 .............................................................................................................................................72
5. Images ..........................................................................................................75
Insérer une image dans une page.................................................................................................75
Une image en arrière-plan d’une page ........................................................................................76
Une image en arrière-plan d’un conteneur .................................................................................77
Utiliser une image comme lien hypermédia................................................................................78
Légender une image .........................................................................................................................78
Centrer une image dans un conteneur ........................................................................................79
Modifier les caractéristiques d’une image lorsqu’elle est survolée...................................... 81
Empiler des images .......................................................................................................................... 82
Préchargement d’images ................................................................................................................ 83
Images réactives................................................................................................................................ 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 d’un élément de type block.......................................................................... 93
Exercice 5.............................................................................................................................................97
7. Menus ............................................................................................................99
Menu vertical flottant en HTML5................................................................................................... 99
Menu horizontal en HTML5 ...........................................................................................................100
Amélioration du menu avec quelques propriétés CSS ..........................................................102
Menu déroulant.................................................................................................................................103
Exercice 6............................................................................................................................................. 111
8. Formulaires et stockage local de données .............................................113

Définir un formulaire......................................................................................................................... 113
Envoi d’un formulaire par mail ....................................................................................................... 114
Les différents éléments utilisables dans un formulaire ...........................................................116
Quelques exemples de formulaires .............................................................................................118
Focus ................................................................................................................................................... 124
Validation de données .................................................................................................................... 127
Modifier le style d’un champ en fonction de sa validité......................................................... 132
Stockage local de données........................................................................................................... 134
Exercice 7 ........................................................................................................................................... 137
Exercice 8........................................................................................................................................... 138
IV Table des matières

9. Tableaux ......................................................................................................141
Définir un tableau en HTML............................................................................................................ 141
Définir un tableau en CSS.............................................................................................................. 142
Bordures autour des cellules ........................................................................................................ 144
Fusionner et séparer des bordures ............................................................................................ 145
Espacer les cellules ......................................................................................................................... 146
Fusionner des cellules .................................................................................................................... 147
Ajouter une légende au tableau...................................................................................................149
Arrière-plan des cellules.................................................................................................................150
Alignement dans les cellules.........................................................................................................152
Différencier 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 éléments affichés sur une page ......................................................................164
Faire flotter un élément .................................................................................................................. 170
Mise en page sur plusieurs colonnes ......................................................................................... 172
Marges ................................................................................................................................................ 175
Responsive Web Design (Media Queries CSS) ........................................................................ 177
Optimiser les pages d’un site Web.............................................................................................. 179
Exercice 10 ..........................................................................................................................................181
Exercice 11............................................................................................................................................181
Exercice 12 ..........................................................................................................................................181
11. Gestion événementielle........................................................................... 183

Gestion événementielle en HTML ............................................................................................... 183
Gestion événementielle en CSS .................................................................................................. 184
Gestion événementielle en jQuery..............................................................................................185
Événements liés à la fenêtre .........................................................................................................185
Événements liés au clavier ............................................................................................................ 187
Événements liés à la souris ...........................................................................................................188
Événements liés aux formulaires .................................................................................................190
Événements liés aux médias.........................................................................................................192
Événements liés à l’orientation.....................................................................................................196
Exercice 13..........................................................................................................................................199
Table des matières V

12. Multimédia................................................................................................ 201
Insérer un élément audio ...............................................................................................................201
Piloter une balise <audio> en jQuery......................................................................................203
Insérer un élément vidéo ..............................................................................................................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 personnalisées...........................................................................................................232
Différer une animation ................................................................................................................... 233
Mettre en place un timer............................................................................................................... 234
Exercice 15 ........................................................................................................................................236
14. Mise à jour avec AJAX ............................................................................237

Charger un fichier............................................................................................................................ 237
$.get() ...........................................................................................................................................239
$.post().........................................................................................................................................242
$.ajax()......................................................................................................................................... 244
Exercice 16 ........................................................................................................................................249
15. Mise en ligne d’un site ............................................................................ 251

Choisir un hébergeur ......................................................................................................................251
Créer un nom de domaine............................................................................................................252
Transférer les fichiers en FTP.......................................................................................................253
Index............................................................................................................... 257
VI Table des matières

Introduction
Vous n’avez jamais créé de pages Web, mais vous rêvez de le faire ? Vous utilisez un CMS
et vous aimeriez améliorer les pages qui y ont été créées ? Ce livre est fait pour vous !
Au fil des pages, vous découvrirez :
■■ les bases des langages HTML, CSS et jQuery ;
■■ comment afficher des éléments textuels en HTML ;
■■ les techniques permettant de modifier la couleur des éléments affichés ;
■■ comment afficher des images, les mettre en page et réaliser un album photos ;
■■ les techniques d’ombrage et d’arrondi du CSS3 ;
■■ comment mettre en place des menus en HTML5 et CSS3 ;
■■ la définition de formulaires (simples et évolués) en HTML5 ;
■■ le stockage local de données en HTML5 ;
■■ la définition et la mise en forme de tableaux en HTML5 et CSS3 ;
■■ les techniques de mise en page CSS ;
■■ la gestion événementielle en HTML, CSS et jQuery ;
■■ l’utilisation d’éléments multimédia dans des pages HTML5 ;
■■ les transformations et animations en CSS3 et jQuery ;
■■ la mise à jour d’une portion de page HTML avec Ajax ;
■■ la mise en ligne d’un site Web.
Les sources de l’ouvrage

Les éditions Pearson mettent à disposition sur le site www.moneformation.fr l’ensemble
des codes passés en revue dans cet ouvrage. Ces codes sont rassemblés dans une
archive au format ZIP. Pour accéder aux fichiers correspondants, il vous suffit de déziper
cette archive en double-cliquant dessus dans l’Explorateur de fichiers et en cliquant sur
Extraire tout dans la barre d’outils.
Site compagnon
Cet ouvrage est accompagné d’un site Web sur lequel se trouvent tous les corrigés
des exercices en vidéo. Pour accéder à ces derniers, rendez-vous à l’adresse www.
moneformation.fr, inscrivez-vous pour activer votre compte et accéder aux corrigés des
exercices. Vous aurez besoin de consulter le présent ouvrage pour créer votre compte
et répondre à la question de sécurité. Chaque fois que vous voudrez réaliser un exercice
de l’ouvrage, vous pourrez vous référer à la page correspondante de l’exercice sur le
site Web.
Introduction VII
Rubriques spéciales de ce livre
Astuce
Elles fournissent des remarques
particulières ou des raccourcis
inhabituels du langage.
Info
Elles donnent des informations
complémentaires sur le sujet étudié,
sans être indispensables pour la tâche
en cours.
Attention
Elles attirent votre attention sur des
points particulièrement importants ou
qui demandent une relecture pour être
correctement assimilés.
Joindre l’auteur
Une question ? Une remarque ? Une suggestion ? N’hésitez pas à me joindre en vous
rendant sur le site www.mediaforma.com et en sélectionnant l’onglet Contact.
VIII Introduction
1
Avant de commencer
Cet ouvrage est consacré aux langages de programmation HTML5, CSS3 et jQuery.
Vous vous demandez certainement s’il est absolument nécessaire d’apprendre 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 suffire !
S’il est vrai que, contrairement au HTML, les langages CSS et jQuery ne sont pas
obligatoires, vous verrez qu’ils apportent un confort non négligeable et que, tout bien
considéré, ils sont quasiment incontournables pour quiconque désire créer un site Web
bien structuré, facilement maintenable et agréable à utiliser…
Mais, au fait, qu’est-ce qu’un site Web ?

Un site Web est constitué d’une ou de plusieurs pages Web.
Attention
Je dis bien "site Web" et non "site Internet" ! Beaucoup de personnes considèrent
qu’Internet se limite au Web et parlent tout naturellement de sites Internet. Mais alors,
est-ce que l’échange de messages e-mail, les téléchargements FTP et les dialogues en
direct ne font pas partie d’Internet ? Bien sûr que si ! Comme vous lisez cet ouvrage, vous
allez acquérir une certaine expérience dans le développement de sites Web et, en tant
qu'"expert", il est important que vous utilisiez le bon vocabulaire.
Lorsqu’un site est constitué d’une seule page, il se contente d’afficher un nombre réduit
d’informations, ou il utilise une technique qui lui permet d’afficher plusieurs pages dans
une seule. Ceci est possible en mettant en place un système d’onglets qui contiennent
chacun une partie des informations à afficher.
Lorsqu’un site est constitué de plusieurs pages, ces dernières sont reliées entre elles par
des liens hypertexte ou hypermédia. Dans la Figure 1.1, par exemple, cet extrait de page
contient plusieurs liens hypertexte et hypermédia.
Figure 1.1
Cette figure
représente une
partie de la page
principale du site
www.microsoft.com.
Vous l’aurez compris, les liens hypertexte sont des éléments textuels sur lesquels on peut
cliquer pour accéder à d’autres pages. Quant aux liens hypermédia, ils sont également
cliquables, mais représentés par des éléments non textuels (des images en général).
La page principale d’un site est appelée "page d’accueil" ou "homepage". C’est elle qui
donne accès aux autres pages du site, en utilisant une structure arborescente dans
laquelle les pages de tous les niveaux peuvent faire référence aux pages des autres
niveaux.
Figure 1.2
La structure
arborescente
d’un site
composé de
six pages.
Qu’apporte chaque langage ?

Les langages HTML, CSS et jQuery sont utilisés dans des domaines très différents :
■■ Le HTML permet de définir le contenu des pages. Entendez par là le texte, les images
et les autres éléments qui doivent être affichés dans le navigateur. Dans cet ouvrage,
nous utiliserons la version 5 du langage. Il s’agit en effet d’un standard unanimement
reconnu et universellement utilisé dans tous les navigateurs récents, sur les ordinateurs,
les tablettes et les téléphones.
■■ Le CSS permet de mettre en forme les éléments affichés (dimensions, bordures,
couleurs, etc.) et de les agencer dans les pages (position, marges, ancrage, etc.). Dans
cet ouvrage, nous utiliserons la version 3 du langage. Certaines instructions CSS3 ne
sont pas encore finalisées, mais les choses vont en s’améliorant au fil du temps.
2 Chapitre 1
■■ Le jQuery est essentiellement utilisé pour apporter du mouvement et de l’interactivité
aux pages Web. Nous l’utiliserons pour animer des zones de l’écran et pour réagir aux
actions de l’utilisateur.
Comme vous commencez à le pressentir, ces trois langages forment un tout et la réalisation
de pages Web en omettant l’un d’entre eux n’est pas une bonne idée. Rassurez-vous,
votre apprentissage se fera de façon progressive, pratique et indolore. Très vite, vous
serez capable de créer des sites évolués et compatibles avec les standards actuels.
Info
jQuery n’est pas un langage, mais une bibliothèque, qui vient compléter et simplifier
l’utilisation du langage JavaScript.
Vocabulaire et conventions d’écriture

Avant de commencer votre apprentissage, vous devez connaître quelques termes
techniques :
Le langage HTML est composé de balises (ou tags) délimitées par les signes "<" et ">".
Voici quelques balises utilisables en HTML :
<html> et </html>
<u> et </u>
<img>
Les balises sont généralement ouvertes et fermées. Le signe "/", précisé après le "<" de
début de balise, indique qu’il s’agit d’une 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 qu’elles sont
"autofermantes". Dans ce cas, le signe "/" est placé à la fin de la balise, juste avant le ">".
Par exemple :
<br />
<hr />
<meta />
Lorsque les signes "<" et ">" sont omis, on parle non plus de balises mais d’éléments.
Nous utiliserons alternativement ces deux termes dans cet ouvrage.
Certaines balises comportent un ou plusieurs paramètres, nommés "attributs". Par
exemple, la balise <img> suivante utilise l’attribut src pour indiquer le chemin et le nom
de l’image à afficher :
<img src="images/banniere.jpg" />
D’une manière plus générale, toutes les balises HTML sont construites sur le même
modèle :
<élément attr1="val1" attr2="val2" attr3="val3" …>
Où élément est le nom d’un élément HTML (a, img, link ou body par exemple), les
attr sont des attributs HTML et les val sont les valeurs affectées à ces attributs. Les
Avant de commencer 3
couples attribut-valeur permettent de paramétrer l’élément auquel ils s’appliquent. Par
exemple, vous pouvez définir l’adresse de la page à atteindre dans un lien hypertexte
<a>, l’image à afficher dans une balise <img>, ou encore le nom d’un formulaire dans
une balise <form>.
La première balise d’un document HTML5 est appelée "DTD" (pour déclaration 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 systématiquement écrites en caractères
minuscules.
Les instructions CSS sont généralement regroupées dans l’en-tête du document HTML
ou dans un fichier spécifique appelé "feuille de styles". Elles consistent en un ensemble
de couples "propriété: valeur;". Voici quelques instructions CSS :
background: yellow;
float: left;
height: 20px;
jQuery est essentiellement utilisé pour interagir avec le DOM (Document Object Model).
Cet acronyme fait référence à une structure de données qui représente un document
HTML comme une arborescence. Avec jQuery, vous pouvez interroger le DOM pour
connaître les caractéristiques des balises (attributs et valeurs HTML, mais aussi propriétés
et valeurs CSS) et les modifier.
La fonction jQuery(), souvent remplacée par son alias $() pour raccourcir l’écriture,
est le point d’entrée de la bibliothèque jQuery. Elle permet d’accéder à toutes les
méthodes de la bibliothèque. Lorsqu’une méthode jQuery est invoquée, elle retourne un
objet jQuery, qui consiste en zéro, un ou plusieurs éléments piochés dans le DOM. Voici
un exemple d’instruction jQuery :
$('#affiche').html('La condition est respectée');
Ici, le texte "La condition est respectée" est affecté à l’élément d’identifiant affiche du
DOM.
Compatibilité HTML5/CSS3
Alors que nous écrivons ces lignes, quelques nouveaux éléments propres au langage
HTML5 ne sont pas encore entièrement implémentés sur les navigateurs. Pour connaître le
taux de compatibilité de votre navigateur, rendez-vous sur la page http://html5test.com/.
Un compte rendu clair et succinct y sera présenté et une note lui sera attribuée. Comme le
montre la Figure 1.3, Google Chrome est aujourd’hui le navigateur le plus compatible avec
le standard HTML5.
4 Chapitre 1
Figure 1.3
Comparaison des
navigateurs Google
Chrome 30, Firefox 25
et Internet Explorer 11
sous Windows 8.1.
Les éléments inconnus du navigateur sont généralement ignorés. Mais il est possible
de leur affecter un style en utilisant une feuille de styles CSS. Notez cependant qu’un
traitement particulier doit être réservé à Internet Explorer 8 et inférieur. En effet, celui-ci
doit intégrer les éléments inconnus à son DOM via la méthode createElement. Sans
quoi, il ne sera pas en mesure de leur affecter un style. D’autre part, il est nécessaire
d’attribuer un rendu block à ces éléments en initialisant leur propriété CSS display.
Nous y reviendrons en détail par la suite.
Concernant le langage CSS, les principaux navigateurs utilisent un préfixe pour (pré)
implémenter les nouvelles propriétés 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 Explorer 9 et supérieur.
Tant que la spécification du langage n’a pas atteint au moins le statut de recommandation
candidate, vous devrez utiliser plusieurs préfixes dans les propriétés CSS3 pour assurer
la plus grande compatibilité possible. À terme, ces préfixes ne devraient plus avoir cours
et une seule instruction devrait être interprétée à l’identique dans tous les navigateurs.
Wait and see…
Si vous utilisez encore des fonctions CSS spécifiques d’Internet Explorer (DropShadow(),
filter() ou gradient(), par exemple), mieux vaut les inclure dans une feuille de styles
particulière, appelée dans un commentaire conditionnel, dans l’en-tête du document :
<head>

</head>
Si, par la suite, vous décidez de remplacer ces fonctions par du code CSS3, il vous suffira
de supprimer l’élément link correspondant.
Les outils de développement

Pour pouvoir développer en HTML5/CSS3/jQuery, vous devez télécharger puis installer
quelques briques logicielles : l’éditeur Notepad++, les navigateurs Firefox et Chrome et
la bibliothèque jQuery.
Notepad++
Notepad++ est un éditeur de code multilangage à coloration syntaxique. Distribué sous
licence GPL, vous pouvez librement l’installer et l’utiliser sur votre ordinateur. Rendez-
vous sur la page http://notepad-plus-plus.org/fr/, cliquez sur Téléchargement dans la
partie gauche de la page, puis sur DOWNLOAD pour télécharger la dernière version en
date de Notepad++. Le fichier téléchargé est une archive auto-extractible. Il suffit donc de
double-cliquer dessus pour l’installer.
Figure 1.4
Téléchargement de Notepad++.
Firefox
Firefox est un excellent navigateur Web. Il doit faire partie de la panoplie du développeur
Web, afin de tester la compatibilité du code.
Pour télécharger Firefox, rendez-vous sur la page www.mozilla.org/fr/firefox/new/ et
cliquez sur le bouton Firefox, Téléchargement gratuit. Un fichier exécutable d’installation
sera alors téléchargé. Cliquez sur Exécuter pour procéder à l’installation de Firefox sur
votre ordinateur.
6 Chapitre 1
Google Chrome
Chrome est actuellement le navigateur le plus compatible avec les langages HTML5 et
CSS3. Vous vous devez donc de l’installer sur votre ordinateur, ne serait-ce que pour
avoir un avant-goût des possibilités offertes par les instructions les plus évoluées de
ces langages. Sans aucun doute possible, les autres navigateurs seront en mesure
d’interpréter ces instructions dans un avenir proche.
Pour télécharger Google Chrome, rendez-vous sur la page www.google.fr/intl/fr/
chrome/browser/ et cliquez sur Télécharger Google Chrome.
La bibliothèque jQuery
jQuery est une bibliothèque JavaScript. En d’autres termes, il s’agit d’un fichier d’extension
.js. Pour développer du code jQuery, il suffit de faire référence à la bibliothèque jQuery
avec une instruction du type suivant :
<script src="chemin">
</script>
Où chemin représente le chemin complet permettant d’accéder à la bibliothèque jQuery.

Le plus simple consiste à faire référence à un CDN (Content Delivery Network). De la
sorte, vous obtiendrez automatiquement la dernière 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 bibliothèque ait déjà été utilisée par votre navigateur et se trouve dans sa
mémoire tampon. Dans ce cas, il ne sera pas nécessaire de la charger à nouveau : son
accès sera immédiat.
Deux versions de jQuery sont disponibles : une première traditionnelle, visualisable dans
Notepad++, et une seconde minifiée, de façon à réduire sa taille au maximum. Pour arriver
à ce résultat, les espaces, les tabulations et les commentaires ont été supprimés de la
bibliothèque traditionnelle. La bibliothèque jQuery est donc incompréhensible pour nous,
pauvres humains, mais elle est strictement identique à la version non minifiée d’un point
de vue fonctionnel. Je vous conseille donc d’utiliser la version minifiée afin de réduire
le temps nécessaire à son chargement, si elle ne se trouve pas déjà dans le cache du
navigateur.
Vous utiliserez donc l’instruction suivante :
<script src="http://code.jquery.com/jquery.min.js">
</script>
Votre première page HTML avec

Notepad++
Dans cette section, vous allez développer votre première page en HTML5 et CSS3. Le
code mis en place servira de base à tous les autres codes développés dans cet ouvrages.
Nous le qualifierons de "squelette standard".
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 qu’il s’agit d’une page développée en HTML5.

Les balises <html> et </html> délimitent le document HTML.
Les balises <head> et </head> constituent l’en-tête du document. Entre ces balises,
vous définirez différents éléments tels que :
■■ le texte affiché dans la barre de titre du navigateur ;
■■ le jeu de caractères utilisé dans la page ;
■■ des informations de référencement à l’attention des moteurs de recherche, etc.
Les balises <body> et </body> délimitent le document. C’est ici que vous insérerez le
contenu (texte, images, etc.) qui doit être affiché 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 sélectionnant Hyper Text Markup
Language dans la liste déroulante Type (voir Figure 1.5).
Figure 1.5
Le code est sauvegardé dans un
fichier HTML.
Dès que le fichier est sauvegardé, les instructions changent de couleur. En effet,
Notepad++ sait maintenant que les instructions sont écrites en HTML et il peut leur
appliquer une coloration syntaxique (voir Figure 1.6).
8 Chapitre 1
Figure 1.6
Les instructions sont colorées car
Notepad++ connaît le langage
utilisé.
Langue du document
La langue française utilise des caractères spécifiques tels que é, è, â, ç, etc. Pour que ces
derniers soient affichés correctement dans tous les navigateurs du monde, vous devez
utiliser un jeu de caractères (ou charset).
Les charsets ( jeux de caractères) sont associés à la notion de claviers nationaux. Pour
indiquer aux navigateurs dans quel jeu de caractères vous travaillez, vous pouvez insérer
une balise <meta charset=> dans l’en-tête de votre document.
Vous utiliserez le jeu de caractères :
■■ ISO-8859-1 pour accéder directement à la majorité des caractères des langues
occidentales (français, anglais, allemand, espagnol, etc.).
■■ UTF-8 pour afficher sur une même page des caractères issus de plusieurs langues
(français et japonais, par exemple). Consultez la page www.columbia.edu/kermit/
utf8.html pour vous rendre compte des immenses possibilités du jeu de caractères
UTF-8.
Dans cet ouvrage, nous utiliserons systématiquement le jeu de caractères UTF-8, bien
plus universel et… indépendant des frontières.
Pour utiliser le jeu de caractères UTF-8, il ne suffit pas d’insérer une balise <meta> dans
le code : vous devez également vous assurer que Notepad++ utilise ce type d’encodage.
Déroulez le menu Encodage et sélectionnez la commande Encoder en UTF-8 (sans BOM).
Info
L’encodage UTF-8 avec BOM (pour Byte Order Mark) ajoute une espace insécable de
largeur nulle en début de fichier. Étant donné que ce caractère n’a aucune utilité en
UTF-8, je vous conseille d’utiliser un encodage UTF-8 sans BOM. D’autant plus qu’un
encodage avec BOM peut provoquer une erreur de type "headers already sent by"
lorsque vous effectuez une redirection de page Web.
Une fois le jeu de caractères spécifié, vous devez également indiquer la langue utilisée
dans le document. Cette information est en effet primordiale pour le référencement
(moteurs de recherche) et l’accessibilité (lecteurs d’écran) de la page.
La langue d’un document HTML présente deux types d’informations :
■■ La langue "primaire", qui correspond au public visé. Elle peut être spécifiée :
– Dans le champ d’en-tête HTTP, au niveau du serveur. Par exemple, sur un serveur
APACHE, la ligne suivante peut être insérée dans le fichier .htaccess du dossier
concerné :
Content-Language :fr
– Dans le document, par l’intermédiaire d’un élément meta :

<meta http-equiv="Content-Language" content="fr" />
■■ La langue "de traitement", qui correspond au contenu de la page. Elle doit être spécifiée
dans l’attribut lang. Si cet attribut est défini dans la balise <html>, toutes les autres
balises hériteront de cette langue :
<HTML lang="fr" />
Référencement
La balise <meta> peut également être utilisée comme aide au référencement d’une
page. Vous pouvez préciser :
■■ les mots-clés associés à la page ;
■■ la description de la page ;
■■ le nom de l’auteur de la page.
<meta name="keywords" content="mot-clé1, mot-clé2, mot-clé3, …" />)
<meta name="description" content="Description de la page en quelques phrases." />
<meta name= "author" content="Nom de l’auteur" />
Info
La balise <meta name="keywords"> ne fait plus partie de l’algorithme d’indexation de
Google. Autant dire qu’elle est devenue quasiment… obsolète !
Titre du document
Le titre du document est spécifié entre les balises <title> et </title>, dans l’en-tête
du document. Le texte entré entre ces deux balises est affiché dans la barre de titre du
navigateur. Il joue également un rôle très important dans le référencement de la page. Il
est donc important de choisir un titre approprié pour chaque page.
Squelette standard HTML5

Compte tenu des remarques précédentes, le squelette standard devient donc le suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="fr" />
10 Chapitre 1
<meta name="description" content="Description de la page en quelques
➥phrases." />
<meta name="author" content="Nom de l’auteur" />
<title>Titre de la page</title>
</head>
<body>
</body>
</html>
Des commentaires dans le code

Il est très important d’insérer des commentaires dans le code que vous développez. Si
vous devez y apporter des modifications, vous saurez tout de suite quelle partie du code
est concernée…
En HTML, vous utiliserez une balise un peu particulière :

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 sélectionnée dans la liste déroulante Validator Input, le fichier 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 Figure 1.7 illustre un
exemple de validation de code depuis un serveur Web.
Figure 1.7
Le code HTML5 est valide.
Info
Si vous préférez utiliser le validateur du W3C, tapez l’adresse suivante dans la barre
d’adresse de votre navigateur : http://validator.w3.org/.
Premier contact avec le langage CSS3

Vous savez maintenant écrire un squelette HTML5 standard. Il est temps d’aborder le
langage CSS, ou plus exactement la version 3 du langage CSS.
Comme nous l’avons dit précédemment, le langage CSS est utilisé pour mettre en forme
les éléments affichés (dimensions, bordures, couleurs, etc.) et les agencer dans les
pages (position, marges, ancrage, etc.). Pour cela, on utilise des couples "propriété:
valeur;" que l’on affecte à certains éléments de la page. Vous voyez, il n’y a rien de
bien compliqué là-dedans. Le tout est de connaître (ou de savoir retrouver, ce qui est bien
plus simple) les innombrables propriétés CSS utilisables. Dans le chapitre suivant, vous
verrez qu’en parlant correctement à votre moteur de recherche préféré, la tâche est bien
plus simple qu’on ne pouvait le supposer.
Où écrire le code CSS ?

Le code CSS peut être écrit :
■■ dans les balises concernées ;
■■ dans l’en-tête du document (on parle de feuille de styles interne) ;
■■ dans un fichier séparé (on parle de feuille de styles externe).
Ces trois techniques n’ont pas la même "précédence". Entendez par là que si vous
affectez trois valeurs différentes à une même propriété CSS (une dans une balise HTML,
une dans l’en-tête du document et une dans une feuille de styles externe), deux des
valeurs affectées seront écrasées par la troisième. Mais alors, qui est le vainqueur dans
cette foire d’empoigne, et quelle est l’utilité d’un tel fonctionnement ?
Eh bien, le code CSS écrit dans une balise écrase celui qui est défini dans l’en-tête du
document, et ce dernier écrase celui qui est défini dans une feuille de styles externe.
Imaginez le scénario suivant : vous définissez toutes les propriétés de mise en forme et
de mise en page de votre site dans une feuille de styles externe. Cette feuille de styles
est utilisée par toutes les pages de votre site afin de leur conférer un même look and feel.
Imaginez maintenant qu’il soit possible de modifier quelques propriétés CSS dans chaque
page afin de leur donner une mise en forme/en page qui reprend les lignes générales du
site, mais qui, par certains côtés, leur confère un aspect unique. Pour arriver à ce résultat,
il vous suffira de redéfinir ces propriétés dans l’en-tête de chaque page. Enfin, supposons
que certaines balises ne doivent pas se conformer aux règles définies dans la feuille de
styles externe et/ou interne. Pour cela, vous définirez leurs caractéristiques directement
dans les balises.
12 Chapitre 1
Styles CSS dans les balises
Pour définir des propriétés CSS dans une balise, vous utiliserez l’attribut style :
<balise style="propriété1: valeur1; propriétéN: valeurN;">
où :
■■ balise est un nom de balise : <p> ou <h1>, par exemple.
■■ propriété1 à propriétéN sont des propriétés de style de la balise.
■■ valeur1 à valeurN sont les valeurs affectées aux propriétés.
À titre d’exemple, pour affecter la couleur jaune à l’arrière-plan d’un élément p, vous
utiliserez le code suivant :
<p style="background-color:yellow;">
Ce texte a un arrière-plan jaune
</p>
Pour utiliser la police Verdana corps 18 dans un titre h2, 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 désiriez écraser les propriétés définies par défaut dans une feuille
de styles externe, cette technique n’est pas optimale, car elle est limitée au seul élément
qui l’utilise. Dans la mesure du possible, privilégiez l’utilisation d’une feuille de styles
externe (fichier d’extension .css) reliée au document à l’aide d’un élément link. Cette
même feuille de styles pourra être utilisée dans tous les documents apparentés pour
uniformiser leur apparence.
Feuille de styles interne

Dans la section précédente, vous avez vu qu’il était possible de définir des attributs
de mise en forme directement dans les balises HTML. Pour étendre la portée de ces
définitions, vous pouvez les regrouper dans l’en-tête du document HTML, entre les
balises <style> et </style> :
<style type="text/css">
</style>
Voici la syntaxe permettant d’affecter des propriétés à une balise :

élément {propriété1:valeur1; … propriétéN:valeurN;}
où :
■■ élément est un nom d’élément : p ou h1, par exemple.
■■ propriété1 correspond aux propriétés de style de l’élément.
■■ valeur1 correspond aux valeurs affectées aux propriétés.
À titre d’exemple, pour définir dans tout le document un arrière-plan jaune pour les
éléments 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 n’est pas optimale, car elle est limitée au seul document qui l’utilise.
Dans la mesure du possible, privilégiez l’utilisation d’une feuille de styles externe (fichier
d’extension .css) reliée au document à l’aide d’un élément link. Elle pourra être utilisée
dans toutes les pages d’un même site pour uniformiser leur apparence.
Feuille de styles externe

Pour étendre encore le champ d’action des styles définis dans l’en-tête d’un document,
vous pouvez les stocker dans une feuille de styles externe (fichier .css). Dans ce cas,
plusieurs pages HTML pourront utiliser cette feuille de styles afin d’obtenir une même
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 fichier moncss.css contienne les deux éléments de style ci-après :
p {background-color:yellow;}
h2 {font-family:Verdana; font-size: 18px;>
Un document HTML y fera référence avec les instructions suivantes :

<!DOCTYPE html>
<html>
<head>
<title>Une feuille de styles externe</title>
</head>
<body>
14 Chapitre 1


</body>
</html>
Pourquoi préférer CSS à HTML pour la

mise en forme ?
Dans les sections précédentes, vous avez vu qu’il est possible de définir les propriétés
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 à définir un site Web
composé de plusieurs page, je vous conseille de créer une feuille de styles externe et d’y
faire référence dans chaque page avec une balise <link>. Ainsi, vos pages auront tout
naturellement la même apparence.
De plus, si vous voulez changer certaines caractéristiques du site (la couleur d’arrière-
plan, la hauteur de la bannière, la police des titres h2, ou n’importe quelle autre propriété),
vous n’aurez qu’un seul fichier à modifier : la feuille de styles externe. Les modifications
seront automatiquement reportées sur toutes les pages du site, qu’il s’agisse de quelques
pages seulement ou de plusieurs centaines !
Un exemple de code CSS

Ce document HTML affiche une liste à puces comportant quatre points. La mise en forme
du document est assurée 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>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ul>
</body>
</html>
Voici le code de la feuille de styles moncss.css :

li
{
color: blue;
background: #FF4040;
margin: 14px 14px 14px 14px;
list-style: square;
}
Ici, nous définissons les caractéristiques de la liste à puces :

■■ Couleur des caractères : blue.
■■ Arrière-plan : #FF4040.
■■ Marges : 14px.
■■ Style des puces : square.
Le résultat de ce code est représenté dans la Figure 1.8.
Figure 1.8
Tous les éléments de la liste ont été affectés par la
feuille de styles externe.
Premier contact avec jQuery

Arrivé à ce point dans la lecture de cet ouvrage, vous savez :
■■ définir un squelette HTML5 standard ;
■■ modifier les propriétés CSS d’une balise en utilisant l’attribut style ;
■■ définir une feuille de styles interne ;
■■ définir une feuille de styles externe et l’utiliser dans un document HTML.
Il est temps d’aborder le troisième langage : jQuery.
Où écrire le code jQuery ?

Pour être en mesure d’utiliser du code jQuery, vous allez dans un premier temps faire
référence à la bibliothèque jQuery avec l’instruction suivante :
<script src="http://code.jquery.com/jquery.min.js"></script>
Vous pourrez ensuite insérer des instructions jQuery dans le code HTML, entre les balises
<script> et </script> :
<script>
16 Chapitre 1
// Une ou plusieurs instructions jQuery
</script>
Comme nous l’avons dit précédemment, jQuery est utilisé pour interroger et pour
modifier le DOM, c’est-à-dire les éléments affichés dans une page Web. Imaginez que
vous commenciez à interroger/modifier des éléments qui ne sont pas encore affichés.
Cela produirait une belle pagaille, et peut-être même un "plantage" du navigateur. La
première précaution à prendre lorsque l’on écrit du code jQuery est donc de s’assurer de
la disponibilité du DOM. Voici comment cela s’écrit en jQuery :
jQuery(document).ready(function(){
// Ici, le DOM est entièrement disponible
});
Fort heureusement, cette syntaxe peut être simplifiée :

$(function(){
// Ici, le DOM est entièrement disponible
});
Un grand pas en avant a été franchi !

Vous savez maintenant faire référence à la bibliothèque 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 règles de style CSS. Eh bien, jQuery apporte
plusieurs avantages :
■■ Les éléments affichés sur l’écran peuvent réagir aux actions de l’utilisateur. Par exemple,
il est possible d’effectuer des calculs et d’afficher un résultat lorsque l’utilisateur clique
sur un bouton. Ou encore de modifier les caractéristiques d’un élément suite à certains
événements (frappe au clavier, clic souris, heure système, etc.).
■■ Les éléments affichés dans une page peuvent être facilement animés (apparition,
disparition, translation) de façon automatique ou suite à une action de l’utilisateur.
■■ En utilisant la technologie AJAX, jQuery peut mettre à jour une partie de la page Web
courante. Par exemple, pour afficher le nom des personnes connectées à un site Web,
ou encore pour mettre à jour le cours d’une action cotée en Bourse.
Vous voyez, les avantages de jQuery ne manquent pas. Et tout ce que nous venons de
citer n’est pas réalisable en HTML5/CSS3. J’espère vous avoir convaincu. Si ce n’est 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 affiché en HTML, directement dans le corps du document, et
un autre est affiché dans une balise <span> par une instruction jQuery :
<!DOCTYPE html>
<html>
<head>
<title>HTML et jQuery</title>
<script src=http://code.jquery.com/jquery.min.js></script>
</head>
<body>
Ce texte est affiché en HTML<br>
<span id="texte2"></span>
<script>
$(function(){
$('#texte2').html('... et celui-ci par jQuery.');
});
</script>
</body>
</html>
Pour l’instant, il n’est pas utile que vous compreniez le fonctionnement de ce programme.
Remarquez juste qu’un <span> d’identifiant texte2 est défini dans le corps du
document :
Et que ce <span> est modifié avec une instruction jQuery :

Tout ceci sera bien plus clair lorsque vous connaîtrez mieux jQuery. En attendant, exécutez
ce code dans votre navigateur et constatez que jQuery est bien en mesure d’afficher du
texte dans le <span> (voir Figure 1.9).
Figure 1.9
HTML et jQuery cohabitent parfaitement.
HTML, CSS et jQuery : deux approches

Dans la section précédente, vous avez vu que le code jQuery pouvait se trouver dans
le fichier HTML de la page. De la même façon, vous pouvez insérer 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 créer plusieurs fichiers :
18 Chapitre 1
■■ Un pour le code HTML, limité au squelette standard et aux données qui doivent être
affichées dans la page.
■■ Un pour le code CSS (feuille de styles externe) contenant les règles de mise en forme
et de mise en page.
■■ Un ou plusieurs pour le code jQuery. Ces éléments sont alors appelés en utilisant
autant de balises <script> que nécessaire.
À titre d’exemple, nous allons étendre le code précédent pour y inclure quelques règles
CSS et le découper en plusieurs fichiers.
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 affiché 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 affiché en HTML</p>
<script src="jquery-seul.js"></script>
</body>
</html>
Voici le code CSS, stocké dans le fichier css-seul.css :

p {background-color: lime;}
span {background-color: red;}
Voici le code jQuery, stocké dans le fichier jquery-seul.js :

$(function(){
});
Autant que possible, vous privilégierez l’approche multifichier. En particulier si le site que
vous développez comporte de nombreuses pages. En réutilisant le code CSS et jQuery
dans chacune des pages qui le nécessitent, vous réduirez le temps de développement
et faciliterez la maintenance du site.
20 Chapitre 1
2
Premiers pas en
HTML, CSS et jQuery
Arrivé à ce point dans la lecture de l’ouvrage, vous êtes en mesure de créer un squelette
HTML5 standard, de définir des règles de mise en forme CSS (directement dans les
balises, dans une feuille de styles interne ou externe) et d’invoquer la bibliothèque jQuery.
Bien que nécessaires, ces connaissances ne sont pas encore suffisantes pour créer des
pages Web dignes de ce nom. Ce deuxième 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 c’est ce langage qui permettra de construire les fondations de
vos pages Web.
Textes, sauts de ligne et paragraphes

Les éléments textuels insérés dans le corps du document, c’est-à-dire entre les balises
<body> et </body>, sont affichés tels quels dans le navigateur. Il est inutile d’insérer
plusieurs sauts de ligne et/ou plusieurs espaces dans le texte :
■■ Les sauts de ligne (simples ou multiples) seront purement et simplement éliminés lors
de l’interprétation du code dans le navigateur.
■■ Les espaces multiples seront remplacées par une espace simple lors de l’interprétation
du code dans le navigateur.
Examinez le code suivant :
<!DOCTYPE html>
<html>
<head>
<title>Espaces et sauts multiples</title>
</head>
<body>
Ce texte est volontairement écrit sur
plusieurs lignes et de multiples espaces

sont insérées entre les mots
</body>
</html>
D’après vous, comment sera affiché ce texte dans le navigateur ? Jetez un œil à la
Figure 2.1 pour constater à quel point votre navigateur peut manquer de discernement !
Figure 2.1
Les espaces
multiples et les
sauts de ligne sont
ignorés.
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 considération, vous les remplacerez par autant d’entités
que nécessaire. Le code précédent 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 insérées
➥entre les mots
</body>
</html>
Comme le montre la Figure 2.2, cette fois-ci, les espaces et les sauts de ligne sont bien
interprétés.
Figure 2.2
Le navigateur se
comporte bien…
lorsqu’on lui parle
correctement.
22 Chapitre 2
Pour terminer cette section, sachez que vous pouvez également utiliser la balise <p></
p> pour créer des paragraphes.
À titre d’exemple, si vous insérez ces trois lignes de code entre les balises <body> et
</body> d’un squelette standard, vous obtenez le résultat représenté à la Figure 2.3 :
<p>Ceci est un premier paragraphe.</p>
<p>Ceci est un deuxième paragraphe.</p>
<p>Et ceci est un troisième paragraphe.</p>
Figure 2.3
Contrairement aux sauts de ligne <br>, un espace supplémentaire est inséré entre chaque
paragraphe.
Info
En utilisant des règles CSS simples, il est possible de définir la taille des espaces affichés
avant et après un paragraphe.
Titres et sous-titres sur une page

Lorsque vous saisissez le contenu d’une 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 Figure 2.4 montre comment est interprété 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>
Premiers pas en HTML, CSS et jQuery 23

Figure 2.4
Les six niveaux de
titre du HTML.
Le texte inséré dans une balise de titre est important pour les personnes qui lisent la
page Web, mais également pour les moteurs de recherche qui référencent 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> représente maintenant une portée de texte à déporter
stylistiquement de la prose normale sans transmettre d’importance en plus, telle que
les mots-clés dans un résumé de document, des noms de produits dans un article, ou
d’autres portées de texte dont la présentation typographique typique est en gras."
Toujours selon le W3C : "La balise <strong> représente maintenant l’importance plutôt
que la forte emphase."
Après avoir lu et relu cette prose, vous pouvez comprendre – si je ne m’abuse – que la
balise <b> met en avant de façon modérée 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 utilisée pour afficher des termes techniques, des pensées, des
désignations taxonomiques, des expressions idiomatiques, etc. Pour mettre en avant un
texte affiché en italique, vous utiliserez la balise <em>.
Tapez ce code entre les balises <body> et </body> et exécutez-le. Vous devriez obtenir
le résultat représenté Figure 2.5 :
<p><b>Ce texte est affiché en gras mais n’est pas mis en avant</b></p>
<p><strong>Ce texte est affiché en gras et est mis en avant</strong></p>
<p><i>Ce texte est affiché en italique mais n’est pas mis en avant</i></p>
<p><em>Ce texte est affiché en italique et est mis en avant</em></p>
Figure 2.5
Visuellement, aucune
différence entre b et
strong ni entre i et em.
24 Chapitre 2
Comme vous pouvez le voir, les balises <b> et <strong> produisent le même effet dans
le navigateur. Il en va de même pour les balises <i> et <em>. Dans ce cas, pourquoi
HTML5 propose-t-il plusieurs balises pour obtenir le même résultat ? Cette distinction
est importante pour la deuxième audience de vos pages. Entendez par là les robots qui
parcourent le Web à des fins d’indexation. Ces programmes n’ont que faire de l’aspect
visuel d’une page. Pour eux, ce qui importe, c’est le "poids" des mots utilisés. Ainsi, vous
utiliserez les balises <strong> et <em> si vous voulez mettre en avant un mot ou un bloc
de texte tout en modifiant son allure. En revanche, vous utiliserez les balises <b> et <i>
si vous ne voulez faire passer aucun message aux robots d’indexation.
Pour différencier un mot visuellement (et non sémantiquement), vous pouvez également :
■■ le souligner en l’entourant des balises <u> et </u> ;
■■ le surligner en l’entourant des balises <mark> et </mark> ;
■■ l’afficher en caractères de petite taille, en l’entourant des balises <small> et </
small>.
Tapez ce code entre les balises <body> et </body> et exécutez-le. Vous devriez obtenir
le résultat représenté Figure 2.6 :
<p><mark>Ce texte est marqué</mark></p>
<p><u>Ce texte est souligné</u></p>
<p><small>Ce texte est affiché en caractères de petite taille</small></p>
Figure 2.6
D’autres formes
de différenciation.
Listes à puces et listes numérotées

Les listes à puces et les listes numérotées sont monnaie courante sur le Web. Elles
permettent de créer des énumérations non chronologiques ou chronologiques. Dans
le premier cas, les entrées de la liste sont précédées d’un tiret, d’une puce ou d’un
autre caractère. Dans le second cas, les entrées de la liste sont précédées d’un nombre
croissant, ce qui leur confère un aspect temporel.
Une liste à puces est délimitée par les balises <ul> et </ul> (ul est l’abréviation de
unordered list, soit en français "liste non ordonnée"). Chaque élément de la liste est
délimité par les balises <li> et </li> (voir Figure 2.7) :
<ul>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ul>

Figure 2.7
Une liste à puces.
Une liste numérotée est délimitée par les balises <ol> et </ol> (ol est l’abréviation de
ordered list, soit en français "liste ordonnée"). Chaque élément de la liste est délimité par
les balises <li> et </li> (voir Figure 2.8) :
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ol>
Figure 2.8
Une liste numérotée.
Il est possible d’imbriquer plusieurs liste. Pour cela, il suffit d’insérer une balise <ul> ou
<ol> avant que la balise de la liste précédente (<ul> ou <ol>) n’ait été fermée. À titre
d’exemple, le code suivant imbrique une liste numérotée dans une liste à puces, elle-
même imbriquée dans une liste numérotée (voir Figure 2.9) :
<ol>
<li>Entrée principale 1</li>
<ul>
<li>Entrée secondaire 1</li>
<ol>
<li>Première entrée de niveau 3</li>
<li>Deuxième entrée de niveau 3</li>
<li>Troisième entrée de niveau</li>
</ol>
</ul>
</ol>
26 Chapitre 2
Figure 2.9
Trois listes imbriquées.
Liens hypertexte
La magie du Web tient en grande partie aux liens hypertexte : en définissant des liens sur
vos pages, il est possible de renvoyer l’utilisateur vers une page de votre site ou vers une
page hébergée à plusieurs milliers de kilomètres…
Les liens hypertexte sont définis avec la balise <a> :
<a href="adresse">texte</a>
Où adresse est l’adresse de la page à atteindre et texte est le texte sur lequel
l’utilisateur cliquera pour accéder à la page visée. Par exemple, l’instruction suivante
permet de créer un lien hypertexte qui donne accès au site Web de Microsoft France
(voir Figure 2.10) :
<a href="http://www.microsoft.com/fr-fr/default.aspx">Cliquez ici pour accéder au
➥ site de Microsoft</a>
Figure 2.10
Un clic suffit pour accéder
au site de Microsoft France.

Lien vers une partie spécifique d’une page
Lorsqu’une page contient un grand nombre d’informations, il peut être utile de marquer
certains emplacements bien précis (des titres, par exemple) pour faciliter sa lecture. Vous
pouvez alors vous déplacer rapidement vers les éléments marqués via un lien hypertexte.
Pour marquer une balise quelconque, il suffit d’y insérer un attribut id. Par exemple :
<h2 id="marque">Un titre</h2>
Pour accéder à cet emplacement dans la page, vous devez définir un lien hypertexte qui
pointe vers l’identifiant, précédé d’un caractère "#".
Examinez ce code :
<h2 id="haut">Haut de la page</h2>
<a href="#bas">Accéder 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">Accéder au début de la page</a>
Les ancres haut et bas sont définies au début et à la fin du document :

<a name="haut" />
…
<a name="bas" />
Au début du document, un lien hypertexte fait référence à l’ancre bas. Lorsque ce lien est
cliqué, la partie inférieure du document s’affiche dans le navigateur :
<a href="#bas">Accéder au bas de la page</a><br />
À la fin du document, un lien fait référence à l’ancre haut. Lorsque ce lien est cliqué, la
partie supérieure du document s’affiche dans le navigateur :
<a href="#haut">Accéder au début de la page</a>
Si vous voulez tester ce code, assurez-vous que tout le document ne puisse pas s’afficher
d’une seule traite dans le navigateur. Dans ce cas, les liens hypertexte sembleraient
n’avoir aucun effet (voir Figure 2.11).
Info
Un peu plus haut, vous avez appris à créer des liens hypertexte vers des pages Web.
En ajoutant des identifiants à certaines balises dans ces pages, vous pouvez créer des
liens qui pointent vers ces identifiants depuis une autre page Web. Ainsi, si l’identifiant
partie2 a été défini dans la page introduction.htm, vous pouvez définir le lien suivant
pour afficher la page introduction.htm et décaler l’affichage jusqu’à la balise d’id
partie2 :
<a href="introduction.htm#partie2">Cliquez ici pour afficher la partie 2 de
➥l’introduction</a>
28 Chapitre 2
Figure 2.11
Les deux liens sont bien fonctionnels,
à condition que la fenêtre soit de taille
réduite.
Autres types de liens

Les liens hypertexte ne pointent pas forcément vers des pages Web. Vous pouvez
également définir un lien qui pointe vers un fichier. Ici, par exemple, le lien permet à
l’utilisateur de télécharger le fichier document.pdf.
<a href="http://www.monsite.com/fichiers/document.pdf">Cliquez ici pour
➥télécharger document.pdf </a>
Vous pouvez également définir un lien vers une adresse e-mail. Ici, par exemple, le lien
ouvre une fenêtre de composition de message dans le client de messagerie par défaut de
l’utilisateur et insère l’adresse qui suit le mot-clé mailto: dans le champ A du message :
<a href="mailto:prenom.nom@domaine.com">Cliquez ici pour m’envoyer un message</a>
Si vous le souhaitez, il est possible d’aller plus loin avec ce type de lien, en définissant
le sujet du message (subject), les destinataires secondaires (cc) et/ou cachés (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
caractères sont présents 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 très étendu. Entendez par là qu’il est simple de le
mettre en œuvre, mais difficile de connaître toutes les propriétés qu’il peut manipuler.
Pour avoir un aperçu assez complet des propriétés 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…

Le principe de base du langage CSS est élémentaire : on affecte un ensemble de couples
propriété-valeur à une ou plusieurs balises HTML.
Modification de toutes les occurrences d’une balise

Supposons que vous vouliez modifier les caractéristiques de tous les paragraphes
(balises <p>) d’une page. Commencez par définir une feuille de styles interne entre
les balises <head> et </head> du document. Insérez le nom de l’élément concerné
(c’est-à-dire le nom de la balise sans les signes < et >) entre les balises <style> et </
style>, ajoutez des accolades et définissez les couples propriété-valeur correspondant
aux caractéristiques que vous voulez modifier :
p {
propriété1: valeur1;
etc.
}
</style>
Ce mode d’écriture peut être généralisé à toutes les balises du langage HTML : si vous
voulez modifier les caractéristiques de toutes les occurrences d’une balise (<img>, <a>,
<p>, <table>, etc.) dans une page, indiquez le nom de l’élément concerné et définissez
autant de couples propriété-valeur que nécessaire.
Modification de certaines occurrences d’une balise

Supposons maintenant qu’une page HTML contienne plusieurs paragraphes <p> et que
certains d’entre eux doivent avoir une apparence différente. La technique précédente
n’est pas utilisable, car elle modifierait les caractéristiques de toutes les balises <p>. Pour
arriver au but recherché, il faut donc non pas s’adresser à un élément dans la feuille de
styles, mais à un sélecteur, c’est-à-dire à une entité capable de différencier les balises
d’un même type :
selecteur {
etc.
}
</style>
Le sélecteur de classe est certainement celui qui est le plus utilisé. Pour le mettre en
œuvre, vous définirez l’attribut class dans les balises concernées. Par exemple, pour
afficher le texte de certaines balises <p> en bleu et celui de certaines autres en rouge,
vous définirez les classes bleu et rouge comme ceci :
<p class="bleu">Texte en bleu</p>
<p class="rouge">Texte en rouge</p>
30 Chapitre 2
Vous vous doutez que ce code ne suffit 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 décimal utilisé devant les mots bleu et rouge dans le code CSS indique qu’il
s’agit d’un sélecteur de classe et non d’un élément HTML. Les classes peuvent concerner
plusieurs balises, éventuellement de types différents. Par exemple, si vous affectez la
classe rouge à une balise <p> et à une balise <span>, le texte inséré dans ces deux
balises sera affiché en rouge si vous définissez la règle suivante :
.rouge {color: red;}
Si vous voulez limiter cette règle de style aux seules balises <span> de classe rouge,
vous utiliserez un autre sélecteur :
span.rouge {color: red;}
Enfin, si vous voulez appliquer cette règle de style aux balises <span> de classe rouge
et aux balises <p> de classe r, vous utiliserez le sélecteur suivant :
span.rouge, p.r {color: red;}
Pseudo-classes
Le sélecteur de pseudo-classe est représenté par le caractère deux-points (:).
Vous ferez appel aux pseudo-classes pour cibler des balises en fonction de caractéristiques
inaccessibles aux sélecteurs traditionnels : premier enfant ou focus, par exemple.
La pseudo-classe :first-child permet de cibler le premier enfant d’une balise. Par
exemple, pour mettre en gras la première balise <p> enfant de la balise <div>, vous
utiliserez le sélecteur suivant :
div p:first-child {font-weight: bold;}
Les pseudo-classes :link et :visited ciblent les balises <a> dont (respectivement) le

lien n’a pas été visité/a été visité. Les deux lignes suivantes définissent la couleur des
liens :
:link {color: fushia}
:visited {color: navy}

La pseudo-classe :focus cible les balises qui ont le focus (généralement les balises d’un
formulaire). Elle permet très simplement de modifier la couleur d’arrière-plan (ou un autre
style) d’un marqueur. Ici, par exemple, nous affectons un arrière-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 d’une image lorsqu’elle est pointée par la souris :
img:hover {border-style: dotted;}
La pseudo-classe :lang permet de définir un style en fonction de la langue du document.

Ici, par exemple, nous définissons les guillemets à utiliser pour la langue française :
xml:lang(fr) {quotes: '«<' '»';}
D’une façon traditionnelle, les CSS sont liés à un élément, en fonction de sa position
dans l’arbre du document. Cependant, il peut être utile de faire appel à un pseudo-
élément pour effectuer des mises en forme à partir d’informations absentes de l’arbre du
document. Par exemple, pour définir le style de la première ligne ou du premier caractère
d’une balise.
Le pseudo-élément :first-line cible la première ligne d’une balise. Ici, par exemple, la
première ligne de la balise <p> est affichée en rouge.
p:first-line {color:red;}
Le pseudo-élément :first-letter cible le premier caractère d’une balise. Ici, par

exemple, nous doublons la taille du premier caractère d’une balise <p> et nous lui
affectons l’attribut gras :
p:first-letter {font-size: 200%; font-weight: bold;}
Sélecteurs CSS élémentaires

Le langage CSS peut manipuler de nombreux sélecteurs.
■■ Le sélecteur d’identificateur est représenté par le caractère dièse (#). Il cible l’élément
dont l’attribut id a la valeur spécifiée. Ici, seul l’élément dont la propriété id vaut
corne est concerné : #corne.
■■ Vous pouvez restreindre le ciblage en précisant un élément devant le sélecteur d’id.
Ici, par exemple, seul l’élément p dont le marqueur id vaut corne est concerné :
p#corne.
■■ Un sélecteur descendant est construit avec deux sélecteurs traditionnels (ou plus)
séparés par une espace. Il cible les enfants du premier sélecteur. Par exemple, pour
affecter un arrière-plan jaune à tous les éléments li enfants d’un élément div, vous
utiliserez le sélecteur descendant suivant : div li.
■■ Un sélecteur d’attribut cible les éléments en fonction de la présence d’attributs et/ou
de leurs valeurs. Par exemple, pour affecter une taille de 120 % à tous les éléments qui
possèdent un attribut perso, vous utiliserez le sélecteur suivant : [perso].
■■ Pour cibler les seuls éléments dont l’attribut perso a pour valeur vert, vous utiliserez
le sélecteur suivant : [perso=vert].
32 Chapitre 2
Sélecteurs hiérarchiques
Tous les objets du DOM font partie d’un arbre commun dont la racine est la balise <body>.
Le tableau suivant dresse la liste des sélecteurs hiérarchiques utilisables en CSS.
Syntaxe Signification
p > e Éléments e directement descendants d’éléments p
p + e Éléments e directement précédés d’un élément p
p ~ e Éléments e précédés d’un élément p
Sélecteurs CSS3 évolués

Vous voulez aller plus loin avec les sélecteurs ? Le tableau suivant passe en revue les
sélecteurs évolués utilisables en CSS3.
nom_élément[attr="valeur"] Tout élément nom_élément dont la valeur de
l’attribut attr est égale à la chaîne valeur
nom_élément[attr^="valeur"] Tout élément nom_élément dont la valeur de
l’attribut attr commence exactement par la
chaîne valeur
nom_élément[attr$="valeur"] Tout élément nom_élément dont la valeur de
l’attribut attr finit exactement par la chaîne
valeur
nom_élément[attr*="valeur"] Tout élément nom_élément dont la valeur de
l’attribut attr contient la sous-chaîne valeur
nom_élément[attr|="valeur"] Tout élément nom_élément dont la valeur de
l’attribut attr est une chaîne séparée par des
tirets et dont la première partie commence par
valeur
nom_élément:root Un élément nom_élément, racine du document
nom_élément:nth-child(n) Un élément nom_élément qui est le énième
enfant de son parent
nom_élément:nth-last-child(n) Un élément nom_élément qui est le énième
enfant de son parent en comptant depuis le
dernier enfant
nom_élément:nth-of-type(n) Un élément nom_élément qui est le énième
enfant de son parent et de ce type
nom_élément:nth-last-of-type(n) Un élément nom_élément qui est le énième
enfant de son parent et de ce type en comptant
depuis le dernier enfant
nom_élément:last-child Un élément nom_élément, dernier enfant de
son parent
nom_élément:first-of-type Un élément nom_élément, premier enfant de
son type

nom_élément:last-of-type Un élément nom_élément, dernier enfant de
son type
nom_élément:only-child Un élément nom_élément, seul enfant de son
parent
nom_élément:only-of-type Un élément nom_élément, seul enfant de son
type
nom_élément:empty Un élément nom_élément qui n’a aucun enfant
nom_élément:target Un élément nom_élément qui est la cible de
l’URL d’origine
nom_élément:enabled Un élément d’interface utilisateur nom_élément
qui est actif ou inactif
nom_élément:checked Un élément d’interface utilisateur nom_élément
qui est coché ou dont l’état est indéterminé
(bouton radio ou case à cocher, par exemple)
nom_élément:contains("attr") Un élément nom_élément dont le contenu
textuel concaténé contient la sous-chaîne attr
nom_élément:selection La partie d’un élément nom_élément qui est
actuellement sélectionnée par l’utilisateur
nom_élément:not(sel) Un élément nom_élément qui n’est pas
représenté par le sélecteur simple sel
Info
Pour avoir un aperçu général des sélecteurs utilisables en CSS, reportez-vous à la page
dédiée du W3C :
www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html.
Un exemple d’utilisation
Pour illustrer la mise en forme des balises en CSS, nous allons nous intéresser aux listes
(à puces et numérotées).
Les puces et les numéros utilisés dans une liste peuvent être personnalisés via la
propriété CSS list-style-type. Pour une liste à puces, cette propriété peut prendre
les valeurs suivantes :
■■ disc : puce ronde remplie.
■■ circle : puce ronde vide.
■■ square : carré rempli.
■■ none : aucun signe.
Pour une liste ordonnée décimale, la propriété list-style-type peut prendre les
valeurs suivantes :
■■ decimal : 1, 2, 3.
■■ decimal-leading-zero : 01, 02, 03.
■■ hebrew : numérotation hébraïque traditionnelle.
34 Chapitre 2
■■ armenian : numérotation arménienne traditionnelle.
■■ georgian : numérotation géorgienne 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 numérotation.
Enfin, pour une liste ordonnée alphabétique, la propriété 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 numérotation.
Nous allons travailler sur une liste numérotée et sur une liste à puces :
<h2>Check-list voiture</h2>
<ol>
<li>Niveaux</li>
<li>Vidange</li>
<li>Courroie</li>
<li>Décrassage</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 affichées comme à la Figure 2.13.
Supposons que vous vouliez modifier la mise en forme de ces deux listes pour arriver au
résultat représenté Figure 2.14.

Figure 2.13
Une liste numérotée et une liste à puces
sans mise en forme.
Figure 2.14
Les deux listes ont été mises en forme
avec des instructions CSS.
Commençons par les règles CSS les plus simples.

L’énumération de la liste numérotée est de type lower-latin, et la liste à puces utilise
des carrés pour différencier chaque élément :
ol { list-style-type: lower-latin;}
ul { list-style-type: square;}
Les éléments de la liste à puces, c’est-à-dire les enfants li de l’élément ul (ul li), sont
écrits avec la police Calibri de type x-large :
ul li {
font-family: Calibri;
font-size: x-large;
}
36 Chapitre 2
Enfin, les premier, troisième et septième enfants li de la liste ol sont affichés en
caractères 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;
}
Définissez ces règles dans l’en-tête de la page, entre les balises <style> et </style>,
et vous devriez obtenir le résultat recherché :
<head>
// Les règles de style sont définies ici
</style>
</head>
Les bases de jQuery

La bibliothèque jQuery est accessible via la fonction jQuery() ou son alias $(). Cette
fonction admet un ou plusieurs arguments et retourne un objet jQuery. Les arguments
passés à la fonction jQuery() peuvent être du type suivant :
■■ Un élément HTML. Le résultat retourné est un objet jQuery qui représente cet élément.
Par exemple, $('a') retourne un objet qui représente les liens hypertexte de la page.
■■ Un sélecteur CSS. Le résultat retourné est un objet jQuery qui représente le ou les
éléments correspondant au sélecteur. Par exemple, $('img.petit') retourne
un objet qui représente l’image ou les images (si elles existent) de classe petit
contenues dans la page.
Désigner un ou plusieurs éléments jQuery

La syntaxe générale d’une instruction jQuery est la suivante :
$(sel).action();
Où sel est un élément HTML ou un sélecteur CSS destiné à cibler un ou plusieurs

éléments dans le DOM, et action est la fonction jQuery à appliquer à la sélection.
Par exemple, l’instruction suivante insère le texte "bonjour" dans le span d’identifiant
message :
$('span#message').html('bonjour');
Ou encore l’instruction suivante insère le texte "vide" dans tous les éléments de classe
data :
$('.data').html('vide');

Sélecteurs spécifiques jQuery
Tous les sélecteurs du langage CSS peuvent être utilisés en jQuery. Cependant, quelques
sélecteurs et pseudo-sélecteurs sont uniquement accessibles en jQuery :
Sélecteur Éléments sélectionnés

:even Éléments pairs
:odd Éléments impairs
:eq() Éléments dont l’index est spécifié
:gt() Éléments dont l’index est supérieur à (greater than) l’index spécifié
:lt() Éléments dont l’index est inférieur à (lower than) l’index spécifié
Quelques exemples :
1. Pour surligner en jaune la deuxième balise <li> du document, vous utiliserez
l’instruction suivante :
$('li:eq(1)').css('background-color','yellow');
2. Pour surligner en jaune les balises <li> paires à partir de la deuxième, vous utiliserez
$('li:even:gt(1)').css('background-color','yellow');
3. Pour affecter une couleur d’arrière-plan rouge aux éléments pairs d’un tableau et une
couleur d’arrière-plan jaune aux éléments 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 aperçu global de tous les sélecteurs utilisables en jQuery, consultez la page
http://api.jquery.com/category/selectors/.
Modifier les propriétés CSS d’un élément

La fonction html() est loin d’être la seule disponible. Pour avoir un aperçu complet
des fonctions jQuery, rendez-vous sur la page http://api.jquery.com/. Pour trouver plus
facilement les fonctions qui vous intéressent, le plus simple est de restreindre l’affichage
en utilisant les catégories affichées dans la partie gauche de la page, puis de cliquer sur
une fonction pour savoir comment l’utiliser (voir Figure 2.15).
38 Chapitre 2
Figure 2.15
Toutes les
fonctions
jQuery sont
listées sur
cette page.
Supposons par exemple que vous vouliez modifier la couleur d’une balise <span>. Pour
cela, vous devez agir sur la propriété CSS color. Vous devez donc trouver la fonction
qui permet de modifier une propriété CSS. Cliquez sur la catégorie CSS, dans la partie
gauche de la page. Il ne vous reste plus qu’à trouver la fonction adéquate. Un rapide coup
d’œil à la partie droite de la page, et vous constatez que la fonction css() correspond
exactement à ce que vous recherchez (voir Figure 2.16).
Figure 2.16
La fonction
css() permet
de lire et de
modifier une
propriété CSS.
Cliquez sur le lien css() pour connaître le gabarit de la fonction et avoir des détails sur son
utilisation (voir Figure 2.17).

Figure 2.17
Le gabarit de la
fonction css().
La fonction css() peut donc être utilisée en lecture (pour connaître la valeur d’une
propriété) ou en écriture (pour affecter une valeur à une propriété). Pour modifier la
couleur d’une 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 d’un élément

Il est également possible de lire et de modifier les attributs d’une balise HTML en jQuery.
Pour savoir quelle fonction utiliser, rendez-vous sur la page http://api.jquery.com,
sélectionnez la catégorie Attributes dans la partie gauche de la page et observez la liste
des fonctions de cette catégorie (voir Figure 2.18).
Figure 2.18
La fonction attr() permet
de lire et de modifier la
valeur d’un attribut.
40 Chapitre 2
À titre d’exemple, supposons que vous vouliez modifier l’attribut src de la balise <img>
suivante en utilisant jQuery :
<img id="image1" src="chat.jpg">
Vous pourriez utiliser l’instruction suivante :

$('#image1').attr('src','chien.jpg');
Arrivé à ce point dans la lecture de cet ouvrage, vous commencez certainement à

entrevoir les immenses possibilités de la bibliothèque jQuery. La page http://api.jquery.
com est votre alliée : avec un peu de temps et de patience, vous aurez tôt fait de trouver
les fonctions jQuery adaptées aux actions que vous voulez accomplir.
Pour l’instant, vous connaissez trois fonctions jQuery :
■■ html(), qui lit ou modifie le texte inséré dans les balise <p>, <span> ou <div> ;
■■ css(), qui lit ou modifie des propriétés CSS ;
■■ attr(), qui lit ou modifie les attributs HTML d’une balise.
Cela est largement suffisant pour commencer à manipuler le DOM. Mais rassurez-vous,
vous n’avez pas encore fait le tour de jQuery. Comme vous le verrez dans la suite de
l’ouvrage, cette bibliothèque vous réserve bien des surprises !
Chaînage jQuery
Les fonctions jQuery retournent un objet jQuery. Il est donc possible de chaîner différentes
fonctions pour effectuer plusieurs actions en une seule instruction. Par exemple, pour
modifier la couleur du texte et la couleur de l’arrière-plan d’une balise <span> d’id
#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 chaînant
les deux fonctions css() :
$('#monTexte').css('color','red').css('background','yellow');
Cette technique fonctionne sur toutes les fonctions jQuery. Libre à vous de l’utiliser ou de
définir une seule action par instruction. Le résultat obtenu sera le même.

Exercice 1
Retrouvez les fichiers d'exercices et leurs corrigés sur le
site compagnon http://moneformation.pearson.fr
Vous allez enfin mettre en pratique tout ce que vous avez appris sur les langages HTML
et CSS, et sur la bibliothèque jQuery. Le résultat à obtenir est représenté Figure 2.19.
Figure 2.19
Le résultat final.
Cette page est composée des éléments suivants :

■■ Un titre <h2>. Les caractères ont une taille de 30 px et une couleur #a1b5ee.
■■ Un paragraphe contenant la première phrase affichée en rouge.
■■ Un paragraphe contenant les deux phrases suivantes, affichées sur un arrière-plan de
couleur lightgrey.
■■ Un paragraphe contenant les deux dernières phrases affichées en gras et de couleur
#2b971b.
Vous utiliserez du code CSS pour modifier les caractéristiques du titre, et du code jQuery
pour modifier les caractéristiques des trois paragraphes.
42 Chapitre 2
3
Éléments textuels
Les balises permettant d’afficher
du texte
Pour afficher du texte dans le navigateur, il suffit de le saisir entre les balises <body>
et </body>. Cependant, pour faciliter sa mise en forme à l’aide d’instructions CSS ou
jQuery, vous pouvez encapsuler le texte dans plusieurs balises : <p>, <span>, <div> et
<h1> à <h6>. Vous connaissez la plupart d’entre elles :
■■ <p></p> définit un paragraphe, c’est-à-dire un bloc de texte suivi d’un saut de ligne.
■■ <span></span> isole un bloc de texte afin de faciliter sa mise en forme.
■■ <div></div> isole un bloc pouvant contenir du texte, des images, des vidéos et
n’importe quel autre type de données.
■■ <h1> à <h6> définissent 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 s’affichent les unes sous les autres. Quant
à <span>, il s’agit d’une balise de type inline. Son utilisation dans une balise <div>
ou <p> ne rompra pas le flot du texte qui continuera à s’afficher sur la même ligne, si les
dimensions de la fenêtre le permettent bien entendu.
Pour bien comprendre la différence entre les balises de type block et les balises de type
inline, observez le code ci-après et son résultat dans le navigateur, comme représenté
Figure 3.1 :
<h1>Un titre h1</h1>
<h2>suivi d’un titre h2</h2>
<p>Ce texte</p>
<p>montre les différences entre <span>les balises de type inline</span> et les
➥balises </p>
<div>de type block</div>
Figure 3.1
Les balises de type
block s’affichent les
unes sous les autres. Les
balises de type inline
s’affichent les unes à la
suite des autres.
Comme vous pouvez le voir, seule la balise <span> ne provoque aucune rupture dans
l’écriture du texte. Toutes les autres balises provoquent un passage à la ligne et un saut
de ligne.
Listes HTML
Dans le chapitre précédent, vous avez fait connaissance avec les listes à puces (<ul>)
et les listes numérotées (<ol>). Le langage HTML5 permet également de créer des
listes de descriptions. Les listes de descriptions étaient déjà présentes dans HTML 4.x.
Souvent boudées et utilisées de manière non sémantique, elles ont subi un lifting pour
être remises au goût du jour dans HTML5. La balise <dfn> est essentiellement utilisée
pour encapsuler les mots d’un glossaire, à l’intérieur de la balise <dt>. Notez qu’on
peut également définir plusieurs descriptions (<dd>) pour un seul nom (<dt>), ou encore
regrouper plusieurs noms pour une seule description.
Cet exemple vous aidera à mieux comprendre l’utilité des listes de descriptions (voir
Figure 3.2) :
<dl>
<dt><dfn>Bit</dfn></dt>
<dd>Information représentée par un symbole à deux valeurs généralement notées 0
➥et 1, associées aux deux états d’un dispositif.</dd>
<dt><dfn>Octet</dfn></dt>
<dd>Ensemble ordonné de huit éléments binaires traités comme un tout.</dd>
</dl>
Figure 3.2
Les mots du glossaire
et les descriptions sont
automatiquement mis en
forme grâce aux balises
<dfn>, <dt> et <dd>.
44 Chapitre 3
Personnaliser une liste
Dans les pages précédentes, vous avez vu qu’il était possible de personnaliser le type
des puces ou des numéros dans une liste, en utilisant la propriété CSS list-style-
type.
ol { list-style-type: lower-latin;}
ul { list-style-type: square;}
Ces propriétés 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 défaut en CSS3, sachez
que la propriété list-style-image permet d’utiliser n’importe quelle image comme
symbole de puce. Voici sa syntaxe :
list-style-image: url(adresse);
Où adresse est l’adresse URI de la puce, au format GIF ou JPEG.

Pour trouver des puces librement téléchargeables, rendez-vous sur la page
http://createafreewebsite.net/free_bullets.html. Cliquez du bouton droit sur l’une des
puces proposées et sélectionnez Enregistrer l’image sous dans le menu pour l’enregistrer
sur votre disque dur. Il ne vous reste plus qu’à affecter l’URI de la puce à la propriété
list-style-image pour obtenir l’effet recherché (voir Figure 3.3) :
<!DOCTYPE html>
<html>
<head>
<title>Liste à puces</title>
ul {list-style-image: url(blueball.gif);}
</style>
</head>
<body>
<ul>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ul>
</body>
</html>
Éléments textuels 45
Figure 3.3
La liste à puces a désormais une tout
autre allure.
Info
Si l’image spécifiée dans la propriété list-style-image n’est pas trouvée, la puce par
défaut la remplacera. Si vous souhaitez une puce circle, square ou aucune puce, vous
devrez initialiser la propriété list-style-type en conséquence. Par exemple :
ul {
list-style-image: url(blueball.gif);
list-style-type: square;
}
Je ne sais pas si vous l’avez remarqué, mais les puces de la Figure 3.3 ne sont pas
alignées horizontalement avec le texte qui les suit. Ceci vient du fait que leur hauteur
est inférieure à celle du texte. Pour résoudre ce problème, vous utiliserez une image
d’arrière-plan à la place de la propriété list-style-image (voir Figure 3.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>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ul>
46 Chapitre 3
</body>
</html>
Figure 3.4
Les puces sont maintenant bien
alignées.
Quelques explications s’imposent :

■■ Les puces sont désactivées en affectant la valeur none à la propriété list-style-
type.
■■ L’image d’arrière-plan est définie avec la propriété background-image des éléments
li.
■■ Pour interdire la répétition de l’image d’arrière-plan, on affecte la valeur no-repeat à
la propriété background-repeat.
■■ La propriété background-position décale l’image d’arrière-plan vers le bas pour
obtenir un alignement horizontal avec le texte.
■■ La propriété padding-left décale les puces sur le côté gauche de 25 pixels.
■■ Enfin, la taille des lignes est augmentée avec la propriété 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 employée dans une balise, vous utiliserez la propriété CSS font-
family :
font-family: police1, …, policeN;
Lorsque plusieurs polices sont spécifiées, la première police disponible sur l’ordinateur
où s’exécute le code est utilisée. Vous devez choisir en dernier lieu un nom de police
générique, qui existera forcément sur tous les ordinateurs : serif, sans-serif, cursive,
fantasy ou monospace.
Voici quelques types de polices correspondant à chacun des types génériques :
■■ 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.
La définition 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 placés entre guillemets.
Il est fortement déconseillé de choisir une police fantasy pour afficher vos textes. En
effet, chaque système d’exploitation possède ses propres polices fantasy. L’affichage
est donc des plus aléatoires.
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 concernées :

<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 caractères

La taille des polices est choisie avec la propriété font-size. Les valeurs peuvent être
spécifiées en inches (in), centimètres (cm), millimètres (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 d’information, 1 point = 1/72 pouce, 1 pica = 12 points, 1 pouce = 2,54 cm, 1 em
correspond grossièrement à la hauteur de la lettre "Ç" et 1 ex à la hauteur de la lettre
minuscule "x".
La taille des polices fait référence à la distance comprise entre la partie supérieure
des lettres majuscules et la partie inférieure des lettres qui contiennent un jambage,
comme le g ou le y. À cette distance s’ajoute un léger espace complémentaire appelé
"interlignage", destiné à séparer les lignes les unes des autres (voir Figure 3.5).
48 Chapitre 3
Figure 3.5
Termes techniques relatifs à la
taille des polices.
Attributs des caractères

La propriété font-weight définit la graisse des caractères. Les valeurs possibles sont
normal (valeur par défaut), bold, bolder, lighter, 100, 200, 300, 400, 500, 600,
700, 800, ou 900. Voici un exemple d’utilisation :
■■ En HTML : <body style="font-weight: bold;">…</body>
■■ En CSS : body {font-weight: bolder;}
■■ En jQuery : $('body').css('font-weight','bold');
La propriété font-style détermine l’orientation de la police. Elle peut être initialisée
avec trois valeurs : normal (lettres droites), italic (lettres penchées à droite) et
oblique (lettres penchées à gauche, si la police admet cette valeur).
Voici un exemple d’utilisation :
■■ 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 propriété text-decoration détermine le soulignement ou le surlignement d’un
élément. Les valeurs possibles sont les suivantes :
■■ none : aucune décoration.
■■ underline : caractères soulignés.
■■ overline : caractères surlignés.
■■ blink : caractères clignotants (sauf sous Internet Explorer).
■■ line-through : caractères barrés.
■■ 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 propriété text-transform permet de mettre un texte en minuscules ou en
majuscules. Les valeurs possibles sont les suivantes :
■■ none : aucune transformation.
■■ capitalize : première lettre des mots en majuscule.
■■ uppercase : tous les caractères en majuscules.
■■ lowercase : tous les caractères 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 propriété font-variant permet de mettre un texte en petites majuscules lorsque la
valeur small-caps lui est affectée :
■■ 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 propriété text-indent définit l’indentation de la première ligne d’un paragraphe.
La valeur de l’indentation peut être spécifiée en utilisant une unité de taille quelconque
(px, pt, mm, in, etc.) ou un pourcentage. Si la valeur est négative, le texte est décalé vers
la gauche. Dans ce cas, pensez à définir une marge à gauche : sinon, le début du texte
risque d’être masqué. Voici un exemple d’utilisation :
■■ En HTML : <p id="ti" style="text-indent: 30px;">Ce paragraphe est
indenté de 30 px sur la première ligne</p>
■■ En CSS : p#ti {text-indent: 30px;}
■■ En jQuery : $('p#ti').css('text-indent', '30px');
Utiliser des polices de caractères non

conventionnelles
Dans les pages précédentes, vous avez appris à utiliser la propriété CSS font-family
pour définir la police à employer dans une balise, un groupe de balises ou tout le
document. Cette propriété fonctionne parfaitement, mais les polices utilisables sont
limitées à celles qui sont installées sur le poste de l’utilisateur. Dans cette section, je vais
vous montrer comment utiliser une police quelconque, et ce, qu’elle soit ou qu’elle ne
soit pas installée sur le poste de l’utilisateur. Ce prodige tient à l’utilisation de la propriété
CSS3 @font-face. Une seule limitation : le navigateur utilisé doit être assez récent pour
"comprendre" cette propriété. Ne vous en faites pas trop à ce sujet, car la quasi-totalité
des navigateurs est compatible. Voici le gabarit de cette propriété :
@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)];
}
50 Chapitre 3
Où :
■■ nom-police est le nom de la police, tel qu’il sera utilisé dans la feuille de styles.
■■ style-police définit le style de la police : all, normal, italic ou oblique.
■■ petites-capitales indique la casse des caractères : 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 définit l’état 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 définit 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 spécifiques.
■■ nom-local définit le nom local de la police, au cas où cette dernière serait installée
sur l’ordinateur.
■■ url-police définit l’adresse URL de la police accessible sur le serveur.
■■ format-police définit le format de la police : truedoc-pfr (TrueDoc™ Portable
Font Resource, .pfr), embedded-opentype (Embedded OpenType, .eot), type-
1 (PostScript™ Type 1, .pfb ou .pfa), truetype (TrueType, .ttf) ou opentype
(OpenType, .ttf).
À titre d’exemple, pour implémenter la police serveur Little Bird, disponible dans le
dossier Fonts, sous le nom LittleBird.ttf, vous définirez la propriété suivante :
@font-face
{
font-family: "Little Bird";
src: url("fonts/LittleBird.ttf");
}
Pour utiliser une police implémentée via @font-face, il suffit d’affecter la propriété
font-family définie dans @font-face à un élément ou une classe quelconque. Ici,
par exemple, nous affectons la police serveur Little Bird au titre h1 du document (voir
Figure 3.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>
<body>
<h1>Un titre en Little Bird</h1>
</body>
</html>
Figure 3.6
Le titre h1 est affiché avec la
police Little Bird.
Où trouver des polices libres de droits ?

Vous savez maintenant comment implémenter une police serveur. Reste encore à
trouver… des polices compatibles avec ce procédé. Rassurez-vous, de très nombreuses
polices libres de droits sont téléchargeables sur les sites www.dafont.com,
www.fontsquirrel.com/fonts et www.grsites.com/archive/fonts/.
Les polices de caractères disponibles sur ces trois sites peuvent être proposées sous
une forme TTF, EOT, SVG ou WOFF. Chaque navigateur est compatible avec une partie
seulement de ces formats de fichiers. 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 suffit alors de référencer 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.woff');
}
Vous vous demandez certainement comment obtenir les quatre variantes d’une police.
Rendez-vous sur le site Font Squirrel (www.fontsquirrel.com/fonts/) et basculez sur
l’onglet WEBFONT GENERATOR, dans la partie supérieure de la page. Sélectionnez
l’option OPTIMAL, cochez la case Yes, the fonts I’m uploading are legally eligible for Web
embedding et cliquez sur Add Fonts pour ajouter la police que vous voulez convertir (voir
Figure 3.7).
52 Chapitre 3
Figure 3.7
La police
LittleBird
Medium a été
uploadée.
Il ne vous reste plus qu’à cliquer sur DOWNLOAD YOUR KIT pour générer les autres
formats de polices. Quelques instants plus tard, Font Squirrel vous proposera de
télécharger une archive au format ZIP dans laquelle se trouvent les quatre versions de la
police (voir Figure 3.8).
Figure 3.8
Le kit contenant les quatre versions de la police a été généré.
Il ne vous reste plus qu’à dézipper l’archive pour accéder aux quatre versions des polices
(voir Figure 3.9).
Figure 3.9
Les quatre versions
des polices sont
accessibles dans
le kit.
Pour faciliter les choses, le fichier stylesheet.css contient le code CSS3 nécessaire à
l’implémentation de la police :
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 18, 2013 */
@font-face {
font-family: 'littlebirdmedium';
src: url('littlebird-webfont.eot');
src: url('littlebird-webfont.eot?#iefix') format('embedded-opentype'),
url('littlebird-webfont.woff') format('woff'),
url('littlebird-webfont.ttf') format('truetype'),
url('littlebird-webfont.svg#littlebirdmedium') format('svg');
font-weight: normal;
font-style: normal;
Le fichier littlebird-demo.html, inclus dans le pack, donne également le code HTML5

nécessaire pour utiliser la police sur tous les navigateurs (voir Figure 3.10).
Figure 3.10
Démonstration de l’utilisation
de la police. Ici, dans
Internet Explorer 11.
Mise en forme des liens hypertexte

Dans le Chapitre 1, vous avez appris à définir des liens hypertexte. Cette section va vous
montrer comment les mettre en forme en utilisant des instructions CSS et jQuery.
Par défaut, les liens hypertexte apparaissent en caractères bleus soulignés lorsqu’ils
n’ont pas été visités. Ils sont affichés en caractères bordeaux soulignés lorsqu’ils ont été
visités.
Vous utiliserez la propriété CSS color pour choisir d’autres couleurs :
■■ a {color: valeur;} pour les liens non visités ;
■■ a:visited {color: valeur;} pour les liens visités.
54 Chapitre 3
Le type de soulignement peut également être choisi avec la propriété CSS
text-decoration :
■■ a {text-decoration: valeur;} pour les liens non visités ;
■■ a:visited {text-decoration: valeur} pour les liens visités.
La propriété text-decoration peut prendre les valeurs suivantes :
■■ none : aucun soulignement.
■■ underline : soulignement par défaut, 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 différentes couleurs et décorations
que peuvent revêtir les liens non visités et les liens visités.
<!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 propriétés relatives au texte sont également utilisables dans un style relatif aux liens
hypertexte. Vous utiliserez en particulier les propriétés suivantes :
■■ font-family : police(s) à utiliser.
■■ font-size : taille des caractères.
■■ font-style : orientation des caractères (normal, italic ou oblique).
■■ font-weight : graisse de la police.
■■ font-variant : caractères par défaut (normal) ou petites majuscules (small-caps).
■■ text-transform : casse des caractères (none, capitalize, uppercase ou
lowercase).
■■ background-color : couleur d’arrière-plan du lien.
Enfin, notez qu’il est possible d’utiliser la pseudo-classe a:hover, associée à la propriété
color, pour changer la couleur des liens hypertexte lorsque le pointeur les survole. Ici,
par exemple, le lien est affiché en rouge lorsqu’il est pointé par la souris :
a:hover {color: red;}
Toutes les propriétés abordées dans cette section sont également accessibles en jQuery,
via la fonction css(). Par exemple, pour que les liens hypertexte soient affichés avec un
soulignement au-dessus du lien lorsqu’ils ont été visités, vous utiliserez le code suivant :
$('a:visited').css('text-decoration', 'overline');
56 Chapitre 3
Exercice 2
Définissez le code HTML et CSS nécessaire pour obtenir le résultat présenté à la
Figure 3.11. Sauvegardez le code HTML dans le fichier index.htm et le code css dans le
fichier site.css.
Figure 3.11
Le résultat à obtenir.
Pour parvenir à ce résultat, vous devez :

1. Télécharger la police serveur TTF "On the move" sur le site www.dafont.com (dans la
catégorie Fantaisie/BD, Comic).
2. Convertir cette police aux formats EOT, WOFF et SVG en utilisant le site Font Squirrel.
3. Affecter cette police à tout le texte affiché dans la page.
4. Définir les en-tête et pied de page de la page avec deux balises <div>.
5. Insérer une liste à puces contenant les entrées "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 éléments
Couleur du texte
La couleur du texte est définie par la propriété CSS color. Voici sa syntaxe :
color: couleur;
La valeur couleur peut être spécifiée :

■■ "En dur", c’est-à-dire sous la forme d’un nom normalisé : red ou olive, par exemple.
■■ À l’aide d’un code hexadécimal sur 6 digits : #RRVVBB (où RR, VV et BB sont les
composantes rouge, verte et bleue de la couleur, codées en hexadécimal entre 00
et FF).
■■ À l’aide de la fonction RGB(R,G,B) ou RGBA(R,G,B,A) (voir les sections "Définir
une couleur par son code RGB" et "Transparence et opacité des éléments").
En HTML : <span style="color: silver;">Texte de couleur silver</span>
En CSS : sélecteur { color: silver; }
En jQuery : $('sélecteur').css('color', 'silver');
Couleur d’arrière-plan d’un élément

La couleur d’arrière-plan d’un élément est définie par la propriété CSS background-
color. Voici sa syntaxe :
background-color: couleur;
La valeur couleur peut être spécifiée :

■■ "En dur", c’est-à-dire sous la forme d’un nom normalisé : yellow ou skyblue, par
exemple.
■■ À l’aide d’un code hexadécimal sur 6 digits : #RRVVBB (où RR, VV et BB sont les
composantes rouge, verte et bleue de la couleur, codées en hexadécimal entre 00
et FF).
■■ À l’aide de la fonction RGB (R,V,B), ou RGBA(R,V,B,A) (voir les sections "Définir
une couleur par son code RGB" et "Transparence et opacité des éléments").
En HTML : <span style="background-color: #01B0F0;">Texte de couleur
#01B0F0</span>
En CSS : sélecteur { background-color: #01B0F0; }
En jQuery : $('sélecteur').css('background-color', '#01B0F0');
Définir une couleur par son code RGB

La fonction RGB(R, G, B) permet de définir une couleur en fonction de ses composantes
rouge, verte et bleue. Cette fonction s’applique à n’importe quelle propriété dont la valeur
est une couleur : color, background-color, border-color, etc.
La fonction RGB() admet trois paramètres :
RGB(red, green, blue)
Où red, green et blue sont les composantes rouge, verte et bleue de la couleur. Ces
trois informations peuvent prendre 256 valeurs, codées entre 0 et 255.
Voici deux exemples d’utilisation en HTML :
<p style="color:rgb(255, 0, 0);">Ce texte est affiché en rouge</p>
<p style="background-color:rgb(255, 255, 0);">et celui-ci a un arrière-plan de
➥couleur jaune</p>
Bien entendu, cette fonction peut également être utilisée dans une règle CSS ou dans
une instruction jQuery. Voici comment pourrait être réécrit le code précédent 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 affiché en rouge</p>
<p style="background-color:rgb(255,255,0);">et celui-ci a un arrière-plan de
➥couleur jaune</p>
<p id="css1">Ce texte est affiché en rouge</p>

<p id="css2">et celui-ci a un arrière-plan de couleur jaune</p>
<p id="jq1">Ce texte est affiché en rouge</p>

<p id="jq2">et celui-ci a un arrière-plan de couleur jaune</p>
<script>
60 Chapitre 4
$(function(){
$('#jq1').css('color', 'rgb(255, 0, 0)');
$('#jq2').css('background-color', 'rgb(255, 255, 0)');
});
</script>
</body>
</html>
Transparence et opacité des éléments

La fonction RGBA() rend plus ou moins transparentes les couleurs manipulées dans le
code CSS3. Cette fonction s’applique à n’importe quelle propriété dont la valeur est une
couleur : color, background-color, border-color, etc.
La fonction RGBA() admet quatre paramètres :
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 256 valeurs, codées entre 0 et 255.
■■ alpha est le degré d’opacité de la couleur. Cette information est un nombre décimal
codé entre 0 (transparent) et 1 (opaque).
La fonction RGBA() ne doit pas être confondue avec la propriété CSS opacity. La
première agit sur une propriété CSS et la seconde sur un élément HTML. L’exemple
suivant va clarifier les choses (voir Figure 4.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>
Couleur des éléments 61

</body>
</html>
Figure 4.1
La fonction RGBA() et la propriété
opacity sont bien différentes.
Comme vous pouvez le voir, la fonction RGBA() n’affecte que la couleur d’arrière-plan
dans la balise d’identifiant #div2, alors que la propriété opacity affecte la couleur
d’arrière-plan et le texte dans la balise #div3.
Gradient linéaire
Il est bien souvent nécessaire de réaliser un dégradé dans l’arrière-plan d’un conteneur
HTML. Au moment où j’écris ces lignes, cette possibilité n’est pas implémentée de façon
standard sur les navigateurs. Pour définir un gradient linéaire, vous devrez utiliser des
préfixes destinés à 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 détaillée de ces trois propriétés :
-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 représente les coordonnées du point de départ du gradient : sur le navigateur
Mozilla et Internet Explorer, p1 peut prendre une ou plusieurs des valeurs suivantes :
top, left, right et/ou down. Sur les navigateurs WebKit, p1 représente un
pourcentage horizontal et un pourcentage vertical.
62 Chapitre 4
■■ p2 représente les coordonnées du point d’arrivée du gradient sur les navigateurs
WebKit. Il est défini par un pourcentage horizontal et un pourcentage vertical de la
zone cible.
■■ c1 est la couleur de départ du gradient.
■■ c2 est la couleur de fin du gradient.
Gradient vertical
Par exemple, pour définir un gradient vertical de la couleur rouge à la couleur bleue, vous
utiliserez les déclarations 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 affecté à une balise <div>
de 200 pixels sur 200 (voir Figure 4.2) :
<!DOCTYPE html>
<html>
<head>
<title>Gradient linéaire</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.

Gradient horizontal
Pour définir un gradient horizontal de la couleur rouge à la couleur jaune, vous utiliserez
les déclarations 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 l’exemple précédent, le gradient vertical est
affecté à une balise <div> de 200 pixels sur 200 (voir Figure 4.3) :
<!DOCTYPE html>
<html>
<head>
<title>Gradient linéaire 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.
64 Chapitre 4
Gradient diagonal
Pour définir un gradient diagonal de la couleur rouge à la couleur jaune, il suffit de
changer les coordonnées du point de départ (Gecko, Internet Explorer) ou des points
de départ et d’arrivée (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 Figure 4.4 représente le résultat obtenu dans Internet Explorer 11.
Figure 4.4
Un gradient diagonal du coin supérieur gauche
au coin inférieur droit.
Gradient linaire multiple

Dans la section précédente, vous avez appris à définir un gradient linéaire composé de deux
couleurs. Il est possible de lui adjoindre des couleurs intermédiaires, en ajoutant quelques
paramètres dans les propriétés -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 coordonnées des différentes transitions de couleurs, exprimées en
pourcentages.
■■ Les ci sont les différentes 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 coordonnées des points de départ et d’arrivée du gradient, exprimées
en pourcentages.

■■ Les ci sont les différentes couleurs du gradient.
■■ Les vi sont les positions des différentes transitions de couleurs, exprimées dans un
nombre décimal compris entre 0 et 1.
À titre d’exemple, nous allons définir un gradient linéaire horizontal du rouge au blanc en
passant par le bleu et le jaune. Les zones attribuées à chaque couleur auront la même
taille. Pour arriver à ce résultat, il est nécessaire de définir deux points intermédiaires à
33 % et 66 % de la zone cible. Voici le code utilisé (voir Figure 4.5) :
<!DOCTYPE html>
<html>
<head>
<title>Gradient linéaire 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>
Figure 4.5
Plusieurs transitions ont été
définies dans ce gradient
horizontal.
Pour créer vos gradients plus aisément, vous pouvez vous rendre sur la page
http://gradients.glrzad.com/, où quelques réglages élémentaires permettent d’obtenir
le code CSS3 correspondant (voir Figure 4.6).
66 Chapitre 4
Figure 4.6
Un générateur de gradients en ligne.
Gradient radial
Vous savez maintenant affecter un gradient linéaire à un conteneur quelconque. Cette
section va vous montrer comment créer des gradients radiaux, c’est-à-dire des dégradés
de couleurs qui rayonnent depuis leur origine en décrivant un cercle ou une ellipse. Les
propriétés à 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 supérieur.
Gradient radial à deux couleurs

Voici la syntaxe à utiliser pour définir un gradient radial comportant une couleur de départ
et une couleur d’arrivée.
Pour les navigateurs WebKit :
background: -webkit-gradient(radial, p1, r1, p2, r2, from(c1), to(c2));
Où :
■■ p1 représente les coordonnées du point intérieur du gradient.
■■ r1 est le rayon intérieur du gradient.
■■ p2 représente les coordonnées du point extérieur du gradient.
■■ r2 est le rayon extérieur du gradient.
■■ c1 est la couleur intérieure du gradient.
■■ c2 est la couleur extérieure du gradient.
Pour les navigateurs Gecko et Internet Explorer 10 et supérieur :
background: -moz-radial-gradient(p1, forme taille, c1, c2);
background: -ms-radial-gradient(p1, forme taille, c1, c2);

Où :
■■ p1 représente les coordonnées du point intérieur du gradient.
■■ forme représente la forme du gradient : circle (cercle) ou ellipse (ellipse).
■■ taille est la taille du gradient. Ce paramètre peut prendre l’une 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 l’espace disponible jusqu’au
coin le plus proche du conteneur ;
– farthest-side (ou cover) pour que le gradient occupe tout l’espace disponible
jusqu’au coin le plus éloigné du conteneur.
■■ c1 est la couleur intérieure du gradient.
■■ c2 est la couleur extérieure du gradient.
Par exemple, pour définir un gradient radial du rouge au jaune, vous utiliserez les
déclarations 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 affecté à une balise <div> de 200 pixels
sur 200 (voir Figure 4.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>
68 Chapitre 4
Figure 4.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
utilisées, en fonction du navigateur visé.
Pour les navigateurs WebKit, il suffit de définir un rayon extérieur de plus petite taille dans
le code CSS3. Ici, 50 pixels au lieu de 150 :
➥to(yellow));
Pour les navigateurs Gecko et Internet Explorer 10 et supérieur, il est nécessaire d’ajouter
deux pourcentages lors de la définition des couleurs. Ici, le rouge constitue le point de
départ du gradient (0 %) et le jaune s’arrête à 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 Figure 4.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));

background: -ms-radial-gradient(50% 50%, circle farthest-side, red 0%,
➥yellow 30%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Figure 4.8
Le gradient n’occupe pas toute la surface du
conteneur.
Gradient radial multiple

Tout comme pour les gradients linéaires, il est possible de définir plusieurs couleurs dans
un gradient radial. La syntaxe à utiliser est très différente selon les navigateurs visés.
Pour les navigateurs WebKit, un ou plusieurs color-stop doivent être définis entre la
couleur de départ (from) et la couleur d’arrivée (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 supérieur, la syntaxe est beaucoup
plus simple : il suffit de préciser les différentes couleurs comme paramètres de la propriété
-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>
70 Chapitre 4
<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>
Figure 4.9
Un gradient radial multiple.

Exercice 3
Modifiez le code de l’exercice précédent pour insérer trois liens dans le bas de page,
comme dans la Figure 4.10. Utilisez des instructions jQuery pour modifier la couleur
d’arrière-plan de la balise <body> comme ceci :
Clic sur le lien Effet

Uni Couleur unie white
Horizontal Gradient linéaire horizontal : de la couleur red (à gauche) à la couleur yellow (à
droite)
Vertical Gradient linéaire vertical, de la couleur red (en haut) à la couleur yellow (en bas)
Figure 4.10
Le résultat à atteindre.
Ici, le lien Vertical a été
cliqué.
Pour arriver à ce résultat, vous devez utiliser deux techniques qui n’ont pas encore été
décrites : l’alignement CSS float et l’exécution de code jQuery lorsqu’un élément HTML
est cliqué.
Dans la Figure 4.10, les mots Uni, Horizontal et Vertical sont alignés à gauche et le
copyright est aligné à droite. Pour arriver à ce résultat, vous encapsulerez le copyright
dans une balise <span> et vous initialiserez à right sa propriété CSS float.
Le code jQuery à mettre en œuvre pour réagir au clic sur un élément d’identifiant
#unElement est le suivant :
$('#unElement').click(function() {
72 Chapitre 4
// Une ou plusieurs instructions jQuery
});
Pour l’instant, contentez-vous d’utiliser ce code. Il vous sera expliqué en détail dans le
Chapitre 10.

5
Images
Ce chapitre est très important. Il va vous apprendre à insérer des images dans toutes
sortes de conteneurs (le corps du document, une division, un tableau, etc.), mais
également à effectuer des traitements CSS et jQuery sur les images. À son issue, vous
saurez entre autres comment empiler plusieurs images et comment les animer pour
réaliser un diaporama sur une page Web.
Insérer une image dans une page

Vous utiliserez la balise <img> pour insérer une image GIF, JPG ou PNG dans une page.
Voici sa syntaxe minimaliste :
<img src="nom" />
Où nom est le chemin complet de l’image. Par exemple, img/monimage.gif pour une
image locale située dans le dossier enfant img, ou encore http://nom-site/nom-
dossier/nom-image.jpg pour l’image nom-image.jpg accessible dans le dossier
nom-dossier de la page http://nom-site.
Plusieurs autres attributs optionnels peuvent être utilisés. Ils sont résumés dans le tableau
suivant.
Attribut Signification Valeurs possibles Exemple

alt texte affiché si un texte quelconque <img src="images/im1.jpg"
l’image n’est pas alt="texte de remplacement">
accessible
border bordure autour de 0 (pas de bordure) ou <img src="images/im1.jpg"
l’image 1 (bordure) border="1">
class nom de la classe un nom quelconque <img src="images/im1.jpg"
associée à l’image class="type1">
height hauteur de l’image une valeur numérique <img src="images/im1.jpg"
en pixels quelconque height="300">
id nom de l’image un identifiant <img src="images/im1.jpg"
quelconque id="cygnes">
title info-bulle de l’image un texte quelconque <img src="images/im1.jpg"
title="Un groupe de cygnes
sur le lac de Grigny">
width hauteur de l’image une valeur numérique <img src="images/im1.jpg"
en pixels quelconque width="200">
Une image en arrière-plan d’une page

Pour insérer une image en arrière-plan d’une page Web, vous pouvez utiliser une
approche HTML ou CSS.
En HTML, il vous suffit d’agir sur la balise <html>. Ici, l’image d’arrière-plan a pour nom
"paysage.jpg" et se trouve dans le même dossier que la page :
<html style="background: url(paysage.jpg);">
Si l’image est plus petite que la page, elle est répétée autant de fois que nécessaire
pour couvrir la totalité de la page. Ce comportement est souhaitable si l’image est une
trame de fond. En revanche, il est désastreux s’il s’agit d’une photo. Pour résoudre ce
problème, vous pouvez centrer l’image en interdisant son redimensionnement. Voici le
code à utiliser :
<html style="background: url(paysage.jpg) no-repeat center fixed;">
L’approche CSS va nous permettre d’aller plus loin en redimensionnant l’image de façon
qu’elle occupe la totalité de la fenêtre. Dans un premier temps, voici le code nécessaire
pour affecter une image d’arrière-plan à la page :
html {
background: url(paysage.jpg);
}
Si vous voulez que l’image soit centrée et qu’elle n’apparaisse qu’une seule fois, le code
CSS devient :
html {
background: url(paysage.jpg) no-repeat center fixed;
}
Enfin, si vous voulez que l’image soit automatiquement redimensionnée pour occuper la
totalité de la fenêtre, le code à utiliser est le suivant :
html {
background: url(paysage.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
76 Chapitre 5
Une image en arrière-plan
d’un conteneur
Vous pouvez insérer une image d’arrière-plan dans un conteneur quelconque (une balise
<div>, une cellule de tableau <td>, un paragraphe <p>, etc.). Pour cela, définissez une
classe qui initialise l’arrière-plan de l’élément avec la propriété background, puis faites
référence à cette classe dans les éléments concernés.
Dans le code suivant, la classe bgimage est successivement affectée aux balises <p>,
<td>, <div>, <span> et <a>. Le résultat est représenté à la Figure 5.1.
<!DOCTYPE html>
<html>
<head>
<title>Une image en arrière-plan d’un 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 première cellule</td>
<td>Texte dans la deuxième 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 accéder au
➥moteur de recherche Bing</a>
</body>
</html>
Images 77
Figure 5.1
De nombreux éléments HTML
peuvent utiliser une image
d’arrière-plan.
Utiliser une image comme lien

hypermédia
Pour qu’une image devienne "cliquable" et joue ainsi le rôle de lien hypermédia, il suffit
d’insérer sa balise <img> dans une balise <a> :
<a href="une-page.htm"><img src="une-image.jpg"></a>
Par défaut, un cadre entoure les images utilisées comme liens hypermédia. Pour
supprimer ce cadre, affectez la valeur 0 à l’attribut border de l’image :
<a href="une-page.htm"><img src="une-image.jpg" border="0"></a>
Légender une image

Dans les livres et les magazines, les illustrations et les graphiques sont souvent repérés
par une légende. Pour légender une image en HTML5, vous utiliserez les balises <figure>
et <figcaption>. Voici un exemple de code et son résultat représenté à la Figure 5.2 :
<!DOCTYPE html>
<html>
<head>
<title>Légendage d’images</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.
<figure>
<img src="petitpaysage.jpg">
78 Chapitre 5
<figcaption>Un paysage hivernal.</figcaption>
</figure>
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 <figcaption> doit être définie comme premier ou dernier enfant de la balise
<figure>.
Figure 5.2
L’image et sa légende sont
automatiquement indentées par
rapport au texte avoisinant.
Centrer une image dans un conteneur

Pour centrer une image dans un conteneur <div>, vous utiliserez plusieurs propriétés
CSS.
Le centrage horizontal se fait avec la propriété text-align. En effet, la balise <img>
est de type inline et se comporte comme un simple texte. Il est donc possible de la
centrer avec la propriété text-align.
Pour centrer verticalement l’image dans le <div>, deux étapes sont nécessaires. Dans
un premier temps, on modifie le comportement du <div> en lui conférant l’apparence et
les propriétés d’une cellule de tableau. Pour cela, on affecte la valeur table-cell à sa
propriété display. Dans un second temps, on affecte la valeur middle à sa propriété
vertical-align.
Images 79
Voici un exemple de code et son effet, représenté à la Figure 5.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
L’image est bien centrée
dans le conteneur <div>.
80 Chapitre 5
Modifier les caractéristiques d’une
image lorsqu’elle est survolée
Il est possible de modifier les caractéristiques d’une image (taille, contour, transparence,
etc.) lorsqu’elle est survolée par le pointeur de la souris. Pour cela, vous pouvez utiliser
une approche CSS ou jQuery.
En CSS, le pseudo-sélecteur img:hover permet de cibler l’image lorsqu’elle est survolée
par le pointeur. Il suffit alors de modifier une ou plusieurs propriétés pour obtenir l’effet
souhaité. Vous pouvez, par exemple, agir sur les propriétés suivantes :
■■ height et width : largeur et hauteur de l’image.
■■ opacity : opacité de l’image.
■■ top et left : position de l’image si elle est positionnée de façon absolue.
■■ border : bordure de l’image.
À titre d’exemple, voici comment modifier les dimensions d’une image lorsqu’elle est
survolée par le pointeur de la souris :
<!DOCTYPE html>
<html>
<head>
<title>Agrandissement d’une image au survol</title>
#paysage:hover { width: 500px; }
</style>
</head>
<body>
<img src="paysage.jpg" id="paysage" width="250">
</body>
</html>
L’approche jQuery est tout aussi simple. Voici un exemple de code dans lequel la position
de l’image est modifiée au survol de la souris :
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" />
<title>Agrandissement d’une image au survol</title>
#paysage {
position: absolute;
top: 20px;
left: 120px;
}
</style>
</head>
<body>
Images 81
<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 d’identifiant

#paysage. Ainsi, nous ciblons l’image (respectivement) survolée par la souris et non
survolée par la souris. Les instructions utilisées sont très simples. Dans le premier cas, la
propriété CSS top est initialisée à 100px :
Dans le deuxième cas, elle est initialisée à 20px :

Empiler des images

La propriété z-index permet de spécifier la position relative de plusieurs éléments
empilés. Plus z-index est élevé, plus l’élément se trouve en avant-plan. Inversement,
plus z-index est faible, plus l’élément se trouve en arrière-plan.
Dans cet exemple, nous superposons quatre images en jouant sur leur z-index.
Lorsqu’une image est pointée, son z-index est initialisé à 100 pour la faire passer en
avant-plan (voir Figure 5.4).
<!DOCTYPE html>
<html>
<head>
<title>Empilement d’images 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>
82 Chapitre 5
<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
L’image pointée passe en avant-plan.
Préchargement d’images
Si vous utilisez la pseudo-classe :hover pour afficher une image, cette dernière sera
chargée au moment où le pointeur sera placé sur le lien. En fonction du poids de l’image
et de la nature de la connexion Internet, le délai nécessaire au chargement de l’image
peut s’avérer gênant. Pour résoudre ce problème, vous préchargerez l’image en forçant
à la valeur none sa propriété display.
<body>
...
<img src="monimage.jpg" style="display: none;" />
...
</body>
L’image est préchargée lors de l’ouverture de la page. Son affichage sera donc immédiat
à l’utilisation de la pseudo-classe :hover.
Images 83
Attention
La ou les images préchargées doivent être spécifiées aussi bas que possible dans le
code HTML. En effet, l’exécution du code HTML étant séquentielle, l’affichage de la page
sera retardé par les instructions de préchargement. Mieux vaut donc repousser ces
instructions vers la fin du listing.
Images réactives
Les images réactives comportent une ou plusieurs zones cliquables. Lorsque l’utilisateur
clique sur l’une d’entre elles, un traitement particulier est effectué ou une page Web
annexe est ouverte. Il est possible d’utiliser le langage CSS pour rendre une image
réactive. Il suffit pour cela de définir autant de balises <a> que de zones réactives et de
dimensionner ces balises en conséquence par l’intermédiaire d’un ou de plusieurs styles.
Dans cet exemple, nous allons définir trois zones réactives sur les trois couleurs du
drapeau français (voir Figure 5.5). Le découpage étant élémentaire, un seul style sera
nécessaire pour mettre en place les trois zones réactives.
<!DOCTYPE html>
<html>
<head>
<title>Empilement d’images avec z-index</title>
#imagemap {
background: url(drapeau_francais.jpg) top left no-repeat;
width:460px;
height: 302px;
}
.map {
float: 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> d’identificateur imagemap. Cette balise
contient trois liens fictifs de classe map pour lesquels l’attribut title est renseigné. Ainsi,
84 Chapitre 5
une info-bulle contenant le texte de l’attribut title sera affichée lorsque le pointeur se
trouvera au-dessus de chacune des zones réactives.
La partie CSS du code contient deux styles.
■■ Le sélecteur d’identificateur #imagemap définit les caractéristiques du <div>
imagemap : arrière-plan (background) et dimensions (width et height).
■■ Le sélecteur de classe .map définit les caractéristiques des zones cliquables : affichage
flottant (float: left;), taille (width et height) et bordures (border).
Figure 5.5
La troisième
zone réactive
est pointée, ce
qui provoque
l’affichage de
l’attribut titre
de la balise <a>
correspondante.
Album photos
La réalisation d’un album photos HTML/CSS/jQuery est intéressante à plus d’un égard.
Elle repose sur les actions suivantes :
■■ préchargement des images de l’album ;
■■ affichage de la première image ;
■■ définition de liens hypertexte fictifs gérés en jQuery.
Cet album est composé de cinq photos de même taille. Ici, 600 × 374 pixels (voir
Figure 5.6). Voici le code :
<!DOCTYPE html>
<html>
<head>
a { padding-right: 20px; }
</style>
</head>
Images 85
<body>
Choisissez l’image à afficher :
<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 affiche le texte "Choisissez l’image à afficher" suivi des liens
permettant d’afficher les cinq images. Observez la syntaxe utilisée. Par exemple pour le
premier lien :
<a id="i1" href=#>01</a>
L’attribut 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 l’affichage de la première
image et le préchargement des quatre autres.
Le code CSS est très simple. Il se limite à définir un padding à droite de 20 pixels sur tous
les liens hypertexte afin de les espacer :
a { padding-right: 20px; }
86 Chapitre 5
Figure 5.6
Un album photos
élémentaire en
HTML5/CSS3/jQuery.
Les dernières instructions sont écrites en jQuery. Elles permettent de réagir aux clics de
l’utilisateur sur les cinq liens hypertexte. Examinons le code relatif au clic sur le premier
lien :
});
Lorsque l’élément d’identifiant #i1 (c’est-à-dire le premier lien hypertexte) est cliqué,
l’élément d’identifiant #image (c’est-à-dire l’image affichée dans le document) voit son
attribut src initialisé à i1.jpg, ce qui provoque l’affichage de l’image i1.jpg.
Les quatre blocs d’instructions qui suivent sont tout à fait comparables, à ceci près qu’ils
capturent les clics sur les liens #i2 à #i5 et affichent les images i2.jpg à i5.jpg.
Images 87
Exercice 4
Vous allez enrichir le code HTML et CSS de l’exercice 3.
Rendez-vous sur le site www.backgroundcity.com, téléchargez une texture à votre
convenance et permettez à l’utilisateur de l’utiliser en arrière-plan de la page en ajoutant
le lien Texture dans le bas de page.
Insérez le logo HTML5/CSS3/jQuery et modifiez l’emplacement du titre pour obtenir le
résultat représenté à la Figure 5.7. Le logo flotte à gauche et est décalé de 25 pixels par
rapport au bord supérieur de son conteneur. Quant au titre, il flotte à droite et est décalé
de 100 pixels par rapport au bord supérieur de son conteneur.
Figure 5.7
L’en-tête a été modifié
et un lien Texture a été
ajouté dans le bas de
page.
88 Chapitre 5
6
Ombrages et arrondis
Le CSS3 apporte de nombreuses améliorations dans la mise en forme des éléments
HTML. En particulier en ce qui concerne l’ombrage et les coins arrondis. Ce chapitre va
vous montrer comment ombrer des éléments textuels et non textuels et comment ajouter
des ombres sur des éléments textuels et non textuels.
Ombrer des objets non textuels

L’ombrage des éléments HTML5 non textuels se fait via la propriété CSS3 box-shadow :
box-shadow: offset-horiz offset-vert rayon-ombrage couleur;
Où :
■■ offset-horiz est le décalage horizontal de l’ombrage en pixels.
■■ offset-vert est le décalage vertical de l’ombrage en pixels.
■■ rayon-ombrage est le rayon de l’ombrage en pixels.
■■ couleur est la couleur de l’ombrage.
Cette propriété présente deux avantages : elle est compatible avec la quasi-totalité des
navigateurs actuels (y compris Internet Explorer) et elle s’applique à tous les éléments
HTML5.
À titre d’exemple, dans le code suivant, nous appliquons la propriété 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>
</head>
<body>
<div class="ombrageCSS3">
Texte à l’intérieur de la balise <div>
</div>
</body>
</html>
Les instructions CSS définissent les dimensions, la couleur d’arrière-plan, la taille des
caractères et les propriétés de l’ombrage. La Figure 6.1 présente le résultat de ce code
dans Internet Explorer 11.
Figure 6.1
L’ombrage a une
épaisseur de 10 pixels et
un rayon de 5 pixels.
Pour que l’ombrage soit plus diffus, il suffit d’augmenter son rayon. La Figure 6.2
représente la même page, mais, ici, le rayon a été fixé à 25 pixels dans la propriété
box-shadow :
box-shadow: 10px 10px 25px grey;
Figure 6.2
Ombrage CSS3 diffus
d’une balise <div>.
90 Chapitre 6
En inversant le signe des deux premiers paramètres de la propriété box-shadow, on
peut changer la position de la bordure. Par exemple, avec la déclaration de style suivante,
la bordure apparaît comme à la Figure 6.3 :
box-shadow: -10px -10px 25px grey;
Figure 6.3
La position de l’ombrage
a été inversée.
La propriété box-shadow peut également être appliquée à une image. Il suffit pour cela
de définir la classe ombreimage et de l’affecter à la balise <img> (voir Figure 6.4).
.ombreimage { box-shadow: 10px 10px 25px grey; }
<img class="ombreimage" src="paysage.jpg" width="400px" />
Figure 6.4
L’ombrage est
appliqué à
une image.
Ombrages et arrondis 91
Ombrer des objets textuels
L’ombrage CSS3 d’éléments textuels se fait via la propriété text-shadow :
text-shadow: offset-horiz offset-vert épaisseur couleur;
Où :
■■ offset-horiz est le décalage horizontal de l’ombrage en pixels.
■■ offset-vert est le décalage vertical de l’ombrage en pixels.
■■ épaisseur est l’épaisseur de l’ombrage en pixels.
■■ couleur est la couleur de l’ombrage.
Voici un exemple d’utilisation de cette propriété. Le résultat de ce code est représenté à
la Figure 6.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>
Figure 6.5
Ombrage de
texte CSS3.
92 Chapitre 6
Arrondir les coins d’un élément
de type block
Pour définir des arrondis sur un élément de type block, vous utiliserez la propriété
CSS3 border-radius. Avec certains navigateurs, il n’est pas nécessaire d’utiliser des
préfixes :
border-radius: r1 r2 r3 r4;
Où r1, r2, r3 et r4 représentent respectivement le rayon des coins supérieur gauche,

supérieur droit, inférieur droit et inférieur gauche de l’élément.
Si un seul rayon est spécifié, il s’applique aux quatre coins de l’élément.
Cet exemple définit une bordure noire épaisse de 1 pixel autour d’une balise <div> et
arrondit ses quatre angles avec un rayon de courbure de 20 pixels (voir Figure 6.6) :
<!DOCTYPE html>
<html>
<head>
<title>Une boîte à coins arrondis en CSS3</title>
<style>
.arrondi {
border-radius: 20px;
}
</style>
</head>
<body>
<div class="arrondi">Boîte à bords arrondis en CSS3</div>
</body>
</html>
Figure 6.6
Un arrondi uniforme de 20 pixels.
Comme vous pouvez le voir à la Figure 6.6, l’arrondi s’étend sur toute la largeur de
la page, car la balise <div> n’a pas été dimensionnée. Il est possible de limiter ses
dimensions avec les propriétés width et height. D’autre part, le texte à l’intérieur de
la balise <div> est un peu trop collé sur le bord gauche. Pour résoudre ce problème,
il suffit de définir un padding. Pour finaliser la mise en forme, vous pouvez également
modifier l’alignement du texte avec la propriété text-align et colorer l’arrière-plan
avec la propriété background. Voici le code CSS3 remanié. Son résultat est représenté
à la Figure 6.7 :
.arrondi {
padding: 10px;
width: 250px;
height: 200px;
background:#ADCF4F;
text-align: center;
}
Figure 6.7
Un arrondi CSS3 amélioré.
L’arrière-plan peut également être une image, répétée si nécessaire pour couvrir toute
la surface de l’élément. Ici, par exemple, nous avons pris l’image fond.gif et nous l’avons
répétée pour couvrir toute la surface de la balise <div>. La taille des caractères a
également été modifiée, ainsi que la hauteur de la balise <div> et l’épaisseur de la
bordure. Le résultat de ce nouveau code CSS est représenté à la Figure 6.8.
.arrondi
{
padding: 10px;
width: 250px;
height: 300px;
font-size: 60px;
background: url("fond.gif") repeat;
text-align: center;
}
94 Chapitre 6
Figure 6.8
Un arrondi avec image d’arrière-
plan.
Dans ce dernier exemple, nous appliquons des arrondis différents sur un élément div
pour lui donner une forme un peu plus évoluée (voir Figure 6.9).
<!DOCTYPE html>
<html>
<head>
<title>Une boîte à 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">
Boîte à bords arrondis en CSS3
</body>
</html>
Figure 6.9
Les coins n’ont pas tous le même
rayon.
96 Chapitre 6
Exercice 5
Vous allez enrichir le code CSS de l’exercice 4. La Figure 6.10 illustre le résultat à obtenir.
Ont été ajoutés :
■■ Sur les éléments #entete, #corps et #basdepage : une ombre grise décalée de
5 pixels à droite et vers le bas, et de rayon 5 pixels.
■■ Sur les éléments #entete, #corps et #basdepage : un arrondi uniforme de rayon
15 pixels.
■■ Sur l’élément #titre : une ombre grise décalée 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 accéder aux différentes pages qui composent un site Web, le plus simple consiste
à utiliser un menu. Ce chapitre va vous montrer comment créer un menu vertical flottant,
un menu horizontal, et comment réagir aux actions de l’utilisateur dans le menu via du
code CSS et jQuery.
Menu vertical flottant en HTML5

La balise <menu> est apparue dans le langage HTML5. Cette balise fait exactement ce
que son nom suggère, c’est-à-dire définir un menu dans une page Web, mais elle n’est
pour l’instant pas implémentée par les navigateurs actuels. Nous nous orienterons donc
vers une solution alternative composée de code HTML et CSS.
Pour créer un menu vertical, nous utiliserons une liste à puces <ul>, légèrement modifiée
par un style CSS.
<!DOCTYPE html>
<html>
<head>
<title>Menu vertical élémentaire</title>
<style>
#vertical {
width: 100px;
float: 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>
<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 effingeret, nec in thesauris quod novo
➥filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi
➥contemplator iste sederet.</p>
</body>
</html>
Le style #vertical définit la largeur du menu à l’aide de la propriété width et le

positionne comme flottant, sur la partie droite de la page, afin que le reste de la page
puisse s’enrouler autour (voir Figure 7.1).
Le deuxième style supprime la puce des balises <li> à l’aide de la propriété
list-style-type.
Enfin, le style #corps définit un alignement justifié sur le texte affiché dans la page.
Le corps du document met en place le menu via la balise <ul>. Il affiche ensuite un texte
issu du site http://fr.lipsum.com/ pour matérialiser le corps de la page.
Figure 7.1
Un menu vertical
élémentaire composé de
cinq liens hypertexte.
Menu horizontal en HTML5

Pour créer un menu horizontal, le plus simple consiste à utiliser une liste ul et à affecter la
valeur inline-block à la propriété display des éléments li de cette liste. Ainsi, ces
derniers ne seront pas affichés verticalement, en tant que blocs, mais horizontalement,
sur une même ligne (voir Figure 7.2).
<!DOCTYPE html>
<html>
<head>
<title>Menu horizontal élémentaire</title>
<style>
100 Chapitre 7
#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 effingeret, nec in thesauris quod novo filio
➥hereditarium largiretur, nec insubselliis totius orbis, ubi universi
</body>
</html>
Les puces de la liste sont supprimées en affectant la valeur none à la propriété

list-style de la liste <ul> :
Le code CSS se poursuit par la définition des caractéristiques des éléments de la liste.
Le simple fait d’initialiser la propriété display à inline-block provoque l’affichage
horizontal des éléments de la liste <ul>. L’espacement entre les entrées du menu est
fixé avec la propriété padding-left.
padding-left: 2em;
Enfin, le texte contenu dans le document est justifié en affectant la valeur justify à la
propriété text-align de la balise d’identifiant #corps :
Le corps du document consiste en une liste <ul>, parent de cinq éléments li qui
constituent les entrées du menu et un peu de texte encapsulé par une balise <p>.
Menus 101
Figure 7.2
Les cinq entrées de
menu sont affichées
horizontalement.
Info
Si vous aviez attribué un comportement inline aux éléments li, le résultat aurait été
identique. Cependant, il est préférable d’opter pour un comportement inline-block,
car ainsi, vous pourrez, le cas échéant, fixer leurs dimensions (width et height) et/ou
leurs marges (margin).
Amélioration du menu avec quelques

propriétés CSS
Qu’il soit vertical ou horizontal, il est possible d’améliorer le comportement d’un menu en
définissant quelques instructions CSS.
Pour mettre en évidence le menu pointé par la souris, vous pouvez changer sa couleur
d’arrière-plan en utilisant la pseudo-classe :hover comme déclencheur. Par exemple,
vous pourriez affecter une couleur d’arrière-plan yellow à l’entrée de menu pointée par
la souris en définissant la règle de style suivante :
li:hover { background: yellow; }
Les liens utilisés dans un menu sont par défaut soulignés. Il est très simple de supprimer
le soulignement en affectant la valeur none à la propriété text-decoration des
balises <a> :
a { text-decoration: none; }
Vous pouvez mettre en évidence chaque entrée de menu en l’entourant d’une bordure.
Par exemple, pour afficher une bordure pointillée noire de 1 pixel, vous utiliserez
li { border: 1px dotted black; }
Enfin, vous pouvez définir des arrondis autour de chaque menu en utilisant la propriété
border-radius :
li { border-radius: 15px; }
102 Chapitre 7
Si vous tenez compte de toutes ces remarques, les styles de la section intitulée „Menu
horizontal en HTML5" pourraient être transformés comme ceci (voir Figure 7.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
suffi pour modifier l’allure
du menu horizontal.
Menu déroulant
Pour créer un menu déroulant, il suffit d’imbriquer deux listes <ul>, la première contenant
les entrées principales du menu et la seconde, les entrées secondaires (voir Figure 7.4).
<!DOCTYPE html>
<html>
<head>
<title>Menu déroulant</title>
<style>
#principal { height: 30px; }
#principal li {
list-style-type: none;
float: left;
width: 150px;
border-style: dashed;
border-width: 1px;
Menus 103
}
#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 {
float: 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>
104 Chapitre 7
</ul>
</li>
</ul>
</body>
</html>
Examinons le code HTML.

Le corps du document héberge deux listes <ul> imbriquées. Le menu principal est mis
en place par la balise <ul id="principal"> et par ses balises <li> enfants. Les
menus secondaires sont définis dans les balises <ul class="secondaire"> et leurs
enfants <li>.
Examinons les styles CSS qui vont transformer ces listes imbriquées en un menu.
■■ Le style #principal définit la hauteur du menu principal : 30 pixels.
■■ Le style #principal li définit l’allure des entrées du menu principal : les puces sont
supprimées (list-style-type), les éléments du menu flottent à gauche (float:
left;) ont une largeur fixe (width) et une bordure qui les délimite visuellement
(border-style et border-width).
■■ Les styles #principal li a:link et #principal li a:visited définissent
les caractéristiques des liens non visités (a:link) et visités (a:visited) affichés
dans les entrées principales du menu : affichage en mode bloc (display: block;),
couleur d’arrière-plan (background), marges (margin et padding), soulignement/
surlignement (text-decoration), couleur du texte (color).
■■ Le style #principal li a:hover définit la couleur des entrées principales de
menu lorsqu’elles sont pointées (background-color).
■■ Le style #principal .secondaire définit les caractéristiques des menus
secondaires : aucun affichage par défaut (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 l’affichage des entrées secondaires
de menu (float: none;) et supprime toute bordure entre les entrées secondaires de
menu (border: 0;).
■■ Les styles #principal .secondaire li a:link et #principal .secondaire
li a:visited définissent les caractéristiques des liens non visités (a:link) et
visités (a:visited) affichés dans les entrées secondaires du menu : affichage en
mode bloc (display: block;) et aucune puce (text-decoration: none;).
■■ Le style #principal .secondaire li a:hover définit la couleur d’arrière-plan
d’un menu secondaire lorsqu’il est pointé (background-color).
■■ Enfin, le style #principal li:hover > .secondaire définit le comportement des
éléments <ul> de classe secondaire, enfants directs d’une entrée de menu principal
(#principal) pointée (li:hover). L’initialisation à la valeur block de la propriété
display provoque l’affichage du menu secondaire correspondant (display vaut
none lorsque la souris ne pointe pas une entrée principale de menu).
Menus 105
Figure 7.4
Un menu horizontal
avec plusieurs
commandes
secondaires.
Info
Pour améliorer le rendu d’un menu déroulant, vous pourriez définir des arrondis et des
ombres en ajoutant quelques instructions CSS au code précédent.
Menu déroulant vertical en jQuery

Pour faciliter les développements en jQuery, de très nombreux auteurs proposent des
"plugins" qui viennent apporter de nouvelles instructions à la bibliothèque déjà bien
évoluée de jQuery. L’un de ces plugins fait des merveilles en ce qui concerne (entre
autres) la définition de menus : jQuery UI.
Pour utiliser ce plugin, il suffit d’y faire référence 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 exécution est représentée à la Figure 7.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>
106 Chapitre 7
<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.
Menus 107
La partie HTML du code est élémentaire. Elle consiste en une liste à puces principale
d’identifiant #menu :
<ul id="menu">
…
</ul>
D’une façon très classique, les entrées principales de cette liste sont des balises <li>.
Certaines d’entre elles peuvent être désactivées en leur affectant la classe ui-state-
disabled. Elles apparaissent alors en gris et ne peuvent pas être sélectionnées par
l’utilisateur :
<li class="ui-state-disabled"><a href="#">VB.Net</a></li>
Certaines balise <li> peuvent contenir une liste <ul>. Dans ce cas, elles donnent accès
à un menu secondaire composé d’une ou de plusieurs entrées (dont certaines peuvent
être désactivées en leur affectant 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 référence à la feuille de styles externes sunny, spécifique à jQuery UI :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/
➥jquery-ui.css" />
Pour modifier l’allure du menu, vous pouvez faire référence à l’une 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/flick/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
108 Chapitre 7
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 bibliothèques utilisées dans cette page :
La première fait référence à la bibliothèque jQuery sur le CDN http://code.jquery.com.

La deuxième fait référence au plugin jQuery UI sur le CDN code.jquery.com. Après
l’exécution de ces deux balises, la transformation des listes à puces imbriquées en un
menu sophistiqué est un vrai jeu d’enfant.
Il suffit d’exécuter la fonction menu() sur la balise <ul> qui représente le menu principal
(ici, la balise <ul> d’identifiant #menu) :
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
Et de définir la largeur du menu en agissant sur la classe ui-menu :

<style>
.ui-menu { width: 150px; }
</style>
Rien d’autre. 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 déroulant horizontal en jQuery

Bien souvent, les menus utilisés sur un site Web sont horizontaux. Partant de ce constat,
nous allons transformer le menu vertical précédent en un menu horizontal. Pour cela,
nous allons ajouter quelques règles CSS (voir Figure 7.6) :
<style>
.ui-menu { min-height: 35px; }
Menus 109
#menu { width: 900px; }
#menu>li {
width: 150px;
float: left;
}
</style>
Figure 7.6
Le menu est
maintenant
horizontal.
Examinons les instructions CSS utilisées.

La hauteur du menu principal est fixée à 35 pixels :
.ui-menu { min-height: 35px; }
Et sa largeur, à 900 pixels :
#menu { width: 900px; }
Cette valeur correspond à la somme des largeurs des entrées de menu principales.
Dans notre exemple, il y a cinq entrées de menu principales de largeur 150 pixels, ce qui
représente un menu de 900 pixels.
Les éléments du menu ont une largeur fixe de 150 pixels et ils sont positionnés en flottant
à gauche, ce qui provoque leur passage à l’horizontale :
#menu>li {
width: 150px;
float: left;
}
110 Chapitre 7
Exercice 6
Modifiez le code HTML, CSS et jQuery de l’exercice 5 pour obtenir le résultat représenté
à la Figure 7.7.
Quelques indices :
■■ Utilisez la liste à puces qui se trouvait dans le corps du document pour créer un menu
jQuery UI horizontal.
■■ Choisissez le thème jQuery UI le plus approprié à la page.
■■ Pensez à définir des marges supérieure et inférieure sur le menu, afin qu’il ne masque
pas l’ombre du bandeau supérieur et qu’il soit séparé du bloc suivant.
Figure 7.7
Le menu
horizontal a pris
place.
Menus 111
8
Formulaires
et stockage local
de données
Certaines pages Web permettent aux visiteurs de saisir des données personnelles. Par
exemple, les pages d’inscription, 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 nécessaires pour implémenter de telles pages, en HTML5, CSS3
et jQuery.
Définir un formulaire
Composés d’un ou de plusieurs champs de saisie, les formulaires sont délimités 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|off">
...
</form>
Où :
■■ name est le nom du formulaire.
■■ enctype détermine le type d’encodage du formulaire. Dans la plupart des formulaires,
cet attribut est omis. Une seule exception : l’envoi de fichier par formulaire. Dans ce cas,
l’attribut enctype doit être initialisé à multipart/form-data. Nous y reviendrons
en détail un peu plus loin dans ce chapitre.
■■ action est le nom du programme auquel les données doivent être transmises
(www.site.com/traitement.php par exemple) ou l’action à accomplir
(mailto:adresse e-mail par exemple).
■■ method est la méthode de transmission des données du formulaire : get poste
les données dans l’adresse URL et post dans le corps de la requête. La seconde
méthode est préférable à la première car elle n’affiche pas en clair les données
saisies dans le formulaire (ce qui pourra être gênant si des données confidentielles
sont transmises). De plus, la taille des données n’est pas limitée, alors qu’elle ne peut
dépasser 256 octets dans la méthode get.
■■ autocomplete indique si le formulaire doit être complété automatiquement (on)
ou non (off) en utilisant les données déjà saisies par l’utilisateur dans des champs
similaires.
Envoi d’un 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 n’est pas étudié en
détail dans le cadre de cet ouvrage. Cependant, nous allons faire une petite exception en
ce qui concerne la transmission des données du formulaire par e-mail.
Certes, vous pouvez définir une action de type mailto dans la balise <form> :
<form name="monFormulaire" method="post" action="mailto:adresse@fai.com">
Cette technique fonctionne parfaitement à condition qu’un client de messagerie soit

installé chez l’utilisateur. Dans le cas contraire, les données ne vous seront pas transmises !
Pour contourner ce problème, vous allez utiliser l’instruction PHP mail() :
$resultat = mail(destin, titre, texte, de);
Où :
■■ destin est l’adresse 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 l’en-tête du message, composé des éléments suivants, séparés entre eux par
un retour charriot (\n) :
– l’adresse mail de l’émetteur 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";
114 Chapitre 8
$from .= "Content-type: text/html\n";
$from .= "charset: UTF-8\n";
if (!mail($destinataire,$titre,$texte,$from))
echo "Un problème s’est produit lors de l’envoi du message. Recommencez
➥SVP.";
?>
Ce code doit être stocké sur le serveur, dans un fichier d’extension .php. Si ce fichier a
pour nom "mail.php", la balise <form> sera initialisée comme ceci (à condition que le
fichier mail.php se trouve dans le même 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". C’est-à-dire qu’il
est identique chaque fois que la fonction PHP mail() est sollicitée. Voyons maintenant
comment insérer dans le mail les hypothétiques champs ch1, ch2 et ch3 d’un formulaire
transmis par la méthode 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 premières lignes récupèrent les données et les stockent dans les variables $ch1,
$ch2 et $ch3. Les données ainsi récupérées sont alors insérées 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>";
Formulaires et stockage local de données 115

Les différents éléments utilisables dans
un formulaire
Outre les incontournables zones de texte et boutons d’envoi, de nombreux autres types
de champs sont utilisables en HTML (certains sont apparus dans la version 5 du langage) :
Balise Signification
<fieldset>contenu</fieldset> Groupe d’options permettant de rassembler
plusieurs champs.
<legend>texte</legend> Légende affichée dans un élément fieldset.
<label>texte</label> Simple légende textuelle.
<input type="text" name="Nom" Zone de texte.
id="identifiant" value="valeur">
<input type="button" name="Nom" Bouton.
id="identifiant" value="Légende du
bouton">
<input type="image" src="image. Bouton contenant une image.
jpg" id="identifiant">
<input type="password" name="Nom" Zone de saisie d’un mot de passe.
id="identifiant" value="valeur par
défaut">
<input type="checkbox" name="Nom" Case à cocher.
id="identifiant" value="Valeur">
<input type="radio" name="Nom" Bouton radio.
id="identifiant" value="Valeur">
<input type="hidden" name="Nom" Champ caché. Bien qu’il n’apparaisse pas
id="identifiant" value="valeur"> dans le formulaire, son contenu est envoyé au
serveur lorsque l’utilisateur clique sur le bouton
Submit.
<input type="submit" name="Nom" Bouton d’envoi, pour envoyer les données du
id="identifiant" value="Texte formulaire au serveur.
affiché sur le bouton">
<input type="reset" name="Nom" Bouton de réinitialisation du formulaire.
id="identifiant" value="Texte
affiché sur le bouton">
<input type="date" name="Nom" Champ spécialisé dans la saisie de dates
id="identifiant" title="Date(jj-mm- (seulement pour les navigateurs Opera et
aaaa)" value="Une date"> Chrome au moment où j’écris ces lignes).
<input type="time" name="Nom" Champ spécialisé dans la saisie d’heures
id="identifiant" title="Heure(hh- (seulement pour les navigateurs Opera et
mm)" value="10:00"> Chrome au moment où j’écris ces lignes).
116 Chapitre 8
<input type="datetime" name="Nom" Champ spécialisé dans la saisie de dates et
id="identifiant"> d’heures (seulement pour les navigateurs
Opera et Chrome au moment où j’écris ces
lignes).
<input type="number" name="Nom" Champ spécialisé dans la saisie des nombres.
id="identifiant" value="55">
<input type="color" name="Nom" Palette de couleurs (aucun navigateur n’est
id="identifiant" value="red"> encore compatible).
<input type="search" name="Nom" Zone de texte permettant d’effectuer des
id="identifiant" list="datalist" recherches.
value="Valeur par défaut">
<input type="range" min="-500" Curseur pour faciliter la saisie de valeurs
max="500" value="0" step="10" numériques (uniquement sur Safari au moment
name="Nom" id="identifiant"> où j’écris ces lignes).
<input type="email" name="Nom" Champ spécialisé dans la saisie d’adresses
id="identifiant"> e-mail.
<input type="url" name="Nom" Champ spécialisé dans la saisie d’adresses
id="identifiant"> URL.
<input type="tel" name="Nom" Champ spécialisé dans la saisie de numéros
id="identifiant"> de téléphone (uniquement sur les versions
mobiles des navigateurs au moment où j’écris
ces lignes).
<input type="file" name="Nom" Champ permettant de sélectionner un fichier
id="identifiant"> dans les mémoires de masse de l’ordinateur.
<datalist id="identifiant"><option Facilite la saisie en implémentant
value="valeur1">...<option l’autocomplete sur plusieurs valeurs
value="valeurN"></datalist> prédéfinies dans des éléments option.
<textarea cols="Nombre Zone de saisie multiligne.
colonnes" rows="Nombre lignes"
id="identifiant">Texte par défaut</
textarea>
<select name="Nom" Liste déroulante.
id="identifiant"><option
value="valeur1">...<option
value="valeurN"></select>
<select name="Nom" size="4" Zone de liste (ici, quatre éléments sont
id="identifiant"><option affichés).
<option name="Nom" size="4" Zone de liste (ici, quatre éléments sont
id="identifiant"><option affichés).
<output name="Nom"> Affichage d’un résultat.

Quelques exemples de formulaires
Cette section passe en revue plusieurs exemples typiques de formulaires. Libre à vous
de les adapter pour répondre à vos besoins.
Formulaire de login
Tous les sites qui disposent d’une zone membre ou sur lesquels l’utilisateur peut laisser
des messages doivent être en mesure d’identifier chaque utilisateur. C’est le rôle du
formulaire de login. Très simple, ce formulaire contient un champ pour la saisie du nom
de l’utilisateur, un champ pour la saisie du mot de passe et un bouton de soumission au
formulaire (voir Figure 8.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; }
fieldset {
width: 400px;
background-color: #E3FAF4;
}
</style>
</head>
118 Chapitre 8
<body>
<form action="traitement.php" method="post">
<fieldset>
<legend>Entrez vos identifiants</legend>
<br><label>Nom d’utilisateur</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>
</fieldset>
</form>
</body>
</html>
Le formulaire est entouré par les balises <form> et </form>. Lorsque l’utilisateur
cliquera sur le bouton de soumission, les données seront transmises au programme
traitement.php en utilisant la méthode POST :
</form>
Une balise <fieldset> est utilisée pour différencier visuellement les données du
formulaire du reste de la page. Dans cet exemple, la page se limite au seul formulaire,
mais je tenais à vous présenter cette technique, qui est tout aussi pratique qu’esthétique.
La balise <legend> définit le texte qui sera affiché dans la partie supérieure gauche du
cadre de la balise <fieldset> :
<fieldset>
<legend> Entrez vos identifiants </legend>
</fieldset>
Le formulaire est composé d’un champ de type text, d’un champ de type password
et d’un champ de type submit. Le premier permet de saisir le nom de l’utilisateur, le
deuxième permet de saisir le mot de passe (en substituant chaque caractère par un
caractère de remplacement) et le troisième permet d’envoyer les éléments 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 redimensionnés. Étant donné
que les balises <label> sont de type inline, elles sont au préalable converties en
inline-bloc pour pouvoir être redimensionnées. Enfin, une marge à gauche de 10 pixels
est définie pour éviter que le texte des labels ne soit collé au cadre de la balise <fieldset> :
label {
width: 280px;
margin-left: 10px;
}
Le bouton est déplacé vers la droite pour s’aligner sur les zones de saisie et sa largeur
est redéfinie :

margin-left: 294px;
width: 150px;
}
Afin d’aérer le formulaire, un espace est ménagé après chaque champ input :
Enfin, la balise <fieldset> est redimensionnée et colorée afin de différencier le

formulaire du reste de la page :
fieldset {
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 Figure 8.2).
Figure 8.2
Un formulaire
de saisie de
commentaires
élémentaire.
Voici le code correspondant. Ici, on suppose que l’utilisateur s’est déjà identifié avec un
formulaire de login.
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" />
<title>Formulaire d’envoi de commentaire</title>
fieldset {
width: 700px;
}
textarea, input[type="submit"] { margin-left: 10px; }
</style>
</head>
120 Chapitre 8
<body>
<fieldset>
<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>
</fieldset>
</form>
</body>
</html>
Le commentaire est saisi à l’aide d’une balise <textarea> et envoyé au programme

traitement.php avec un bouton de type submit. Le code CSS de mise en forme est très
simple. La balise <fieldset> est redimensionnée et colorisée :
fieldset {
width: 700px;
}
Puis une marge à gauche de 10 pixels est définie sur les deux champs du formulaire afin
d’éviter qu’ils ne s’affichent trop à gauche :
textarea, input[type="submit"] { margin-left: 10px; }
Formulaire d’envoi de fichier

Il est parfois nécessaire d’envoyer un fichier au serveur. Pour cela, vous utiliserez un
formulaire un peu particulier dans lequel l’attribut enctype est initialisé à multipart/
form-data (voir Figure 8.3).
Figure 8.3
Ce formulaire permet
d’envoyer un fichier
au serveur.

Voici le code correspondant :
<!DOCTYPE html>
<html>
<head>
<title>Formulaire d’envoi de fichier</title>
label {
width: 180px;
margin-left: 10px;
}
margin-left: 194px;
width: 150px;
}
fieldset {
width: 500px;
}
</style>
</head>
<body>
<form action="traitement.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Envoi d’un fichier local</legend>
<br><label>Choisissez un fichier</label>
<input type="file" name="fichier" id="fichier"><br>
<input type="submit" name="envoyer" id="connect" value="Connexion"><br>
</fieldset>
</form>
</body>
</html>
Pour que le formulaire puisse transmettre au serveur le fichier sélectionné par l’utilisateur,
l’attribut 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 file et un bouton de type submit.

La mise en forme des éléments du formulaire est similaire à celle décrite dans le formulaire
de login. Nous n’y reviendrons pas.
122 Chapitre 8
Sondage
Pour valoriser vos visiteurs et pour mieux les connaître, vous pouvez créer des sondages
en ligne. La plupart du temps, les informations saisies se limitent à des boutons radio et
des cases à cocher, mais rien ne vous empêche d’utiliser d’autres types de champs. Dans
cet exemple, les choix de l’utilisateur se bornent à cocher un ou plusieurs boutons radio
et à sélectionner une option parmi trois (voir Figure 8.4).
Figure 8.4
Un sondage
élémentaire.

<!DOCTYPE html>
<html>
<head>
<title>Sondage</title>
label {
width: 280px;
margin-left: 10px;
}
margin-left: 294px;
width: 150px;
}
fieldset {
width: 650px;
}
</style>
</head>
<body>
<fieldset>
<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="ff" id="ff" value="ff">Firefox

<input type="checkbox" name="ie" id="ie" value="gc">Google Chrome
<br><label>Quel est votre système d’exploitation ?</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>
</fieldset>
</form>
</body>
</html>
Le formulaire est plus imposant que dans les exemples précédents car le nombre de
champs est bien plus conséquent. Pour que l’utilisateur ne puisse sélectionner qu’un seul
bouton radio, nous avons donné le même nom (attribut name) aux trois boutons radio.
Si nous avions choisi trois noms différents, l’utilisateur aurait pu sélectionner les trois
boutons radio.
Le code de mise en forme CSS devrait être limpide, puisqu’il correspond, à quelques
détails près, à celui utilisé dans les exemples précédents. Nous n’y reviendrons pas.
Focus
En HTML5, il est très simple de donner le focus à un champ input de type text. En
effet, il suffit d’insérer l’attribut 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
représenté à la Figure 8.5 contient quatre champs input de type text. Par défaut, 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 identifié.
Figure 8.5
L’utilisateur a donné le
focus au troisième champ
input de type text.

<!DOCTYPE html>
<html>
124 Chapitre 8
<head>
<title>Focus</title>
label {
width: 100px;
margin-left: 10px;
}
margin-left: 114px;
width: 150px;
}
fieldset {
width: 350px;
}
</style>
</head>
<body>
<fieldset>
<legend> Qui a le focus ? </legend>
<br><label>Prénom</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>
</fieldset>
</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 élémentaire.

Lorsqu’un champ de type input a le focus :

La valeur stockée dans son attribut id est mémorisée dans la variable qalf (qui a le
focus) :
qalf = $(this).attr('id');
Un texte est alors affiché dans la balise <span> d’id #info :

$('#info').html('Le champ ' + qalf + ' a le focus.');
Mettre en évidence l’élément qui a le focus

Pour faciliter l’identification du champ de saisie qui a le focus, vous pouvez modifier sa
couleur d’arrière-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>
Lorsqu’un champ input obtient le focus :

Son identifiant est stocké dans la variable qalf, en le faisant précéder du signe # pour
le rendre directement utilisable :
La variable qalf est alors utilisée comme sélecteur pour pointer vers l’unique champ qui
a le focus, puis la propriété CSS background-color de ce champ est modifiée via la
fonction css() pour arriver au résultat souhaité :
$(qalf).css('background-color','#E3FAF4');
Ces instructions ne sont pas suffisantes : il faut également penser à restituer la couleur
blanche à l’arrière-plan de tous les champs qui n’ont pas le focus. Pour isoler ces champs,
on utilise la fonction blur() :
$('input').blur(function(){
L’identifiant de chacun des éléments concernés est tour à tour mémorisé dans la variable
qnplf (qui n’a pas le focus), en le faisant précéder du caractère # pour le rendre
directement utilisable :
qnplf = '#' + $(this).attr('id');
Cet identifiant est utilisé pour s’adresser tour à tour à tous les champs qui n’ont pas le
focus, puis modifier leur couleur d’arrière-plan :
$(qnplf).css('background-color','#FFFFFF');
126 Chapitre 8
La Figure 8.6 présente le résultat obtenu en remplaçant le code jQuery de l’exemple
précédent par celui décrit dans cette section.
Figure 8.6
Le champ qui a le focus est
facilement identifiable par
sa couleur d’arrière-plan.
Validation de données
Lorsqu’un champ de saisie est obligatoire, il suffit de lui affecter l’attribut required. À
titre d’exemple, dans ce formulaire, le champ de saisie Nom est obligatoire. Si l’utilisateur
clique sur le bouton de soumission du formulaire sans avoir renseigné le champ Nom, un
message d’erreur est généré et le formulaire n’est pas envoyé (voir Figure 8.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>

Figure 8.7
Ce champ doit
être renseigné
pour que le
formulaire soit
valide.
Validation d’e-mails et d’adresses URL

Le champ d’action des attributs required est bien plus étendu, puisqu’il permet
également de valider des données complexes (telles que des adresses e-mail ou des
URL). À titre d’exemple, le formulaire ci-après teste la validité des champs email et
url. Lorsqu’on clique sur le bouton de soumission du formulaire, un message d’erreur
s’affiche si un de ces deux champs n’est pas conforme (voir Figure 8.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>
128 Chapitre 8
Figure 8.8
L’adresse e-mail
n’est pas correcte.
Info
Pour faciliter la reconnaissance des champs obligatoires, il est possible d’utiliser quelques
lignes de CSS. Par exemple, cette ligne affecte un arrière-plan de couleur jaune aux
champs <input> dont l’attribut required est spécifié (voir Figure 8.9) :
input:required { background:yellow; }
Figure 8.9
Les champs
obligatoires
sont clairement
identifiés.
Validation par une expression régulière

Pour valider la saisie dans un champ de type texte, vous pouvez utiliser une expression
régulière en respectant les conventions listées dans le tableau suivant :
Expression Signification Exemple

. N’importe quel caractère a, b, z, T, 1, @, etc.
? Répète zéro ou une fois le caractère xy? signifie x ou xy
précédent
* Répète zéro, une ou plusieurs fois le xy* signifie x, xy, xyy, xyyy, etc.
caractère précédent
+ Répète une ou plusieurs fois le xy+ signifie xy, xyy, xyyy, etc.
caractère précédent

\ Le caractère d’échappement \ autorise \. est équivalent au point décimal
l’utilisation de caractères réservés
[xyz] Un caractère unique de l’expression [xyz] signifie x, y ou z
[^xyz] Un caractère unique à l’exclusion des [^xyz] signifie un caractère quelconque
caractères de l’expression sauf x, y et z
[a-z] Un caractère unique compris entre les [a-zA-Z] signifie une lettre minuscule ou
deux bornes majuscule quelconque
exp1|exp2 exp1 ou exp2 PHP4|PHP5 signifie PHP4 ou PHP5
{min, max} Répétition du caractère précédent entre x{2,3} signifie xx ou xxx, x{1,} signifie x,
min et max fois xx, xxx, xxxx, etc. ; x{,3} signifie chaîne
vide, x, xx ou xxx
Par exemple, pour limiter la saisie à un caractère majuscule suivi de quatre chiffres,
vous utiliserez l’expression régulière suivante :
[A-Z][0-9]{4}
Cette expression doit être affectée à l’attribut pattern du champ, et le message à

afficher en cas de non-concordance entre la saisie et le modèle doit être spécifié dans
l’attribut title. Par exemple :
Entrez un code <input type="text" pattern="[A-Z][0-9]{4}" title="une lettre
➥majuscule suivie de quatre chiffres">
Voici un exemple de code complet. La Figure 8.10 présente l’effet produit lorsque
l’utilisateur saisit une information sans respecter le modèle :
<!DOCTYPE html>
<html>
<head>
<title>Validation par expression régulière</title>
</head>
<body>
Entrez un code
<input type="text" pattern="[A-Z][0-9]{4}" title="une lettre majuscule
➥suivie de quatre chiffres">
<input type="submit" value="Valider">
</form>
</body>
</html>
130 Chapitre 8
Figure 8.10
La saisie n’est 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 affiché
lorsque l’utilisateur entre une adresse e-mail invalide, vous utiliserez un champ de type
text auquel vous appliquerez l’expression régulière suivante :
[a-z0-9._-]+@[a-z]{2,}\.[a-z]{2,4}
Examinons cette séquence :

■■ L’adresse e-mail commence par un nombre quelconque de lettres minuscules, de
chiffres, de points décimaux, de caractères de soulignement et de tirets : [a-z0-9._-
]+
■■ Elle est suivie du caractère @
■■ D’une séquence de deux ou plus de deux lettres : [a-z]{2,}
■■ D’un point décimal : \.
■■ Et enfin d’une séquence de 2 à 4 lettres qui termine l’adresse e-mail : [a-z]{2,4}
Voici un exemple de code. La Figure 8.11 montre le message affiché lorsque l’adresse
e-mail saisie n’est pas valide :
<!DOCTYPE html>
<html>
<head>
<title>Validation d’e-mail par expression régulière</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 chiffres suivies du caractère @ suivi de deux ou plus de
➥deux caractères suivi d’un point suivi de deux à quatre caractères">
<input type="submit" value="Valider">
</form>
</body>
</html>

Figure 8.11
Le message
d’erreur peut être
personnalisé en
utilisant un champ
de type text.
Modifier le style d’un champ en

fonction de sa validité
Les pseudo-classes :valid et :invalid permettent de modifier les caractéristiques des
champs qui (respectivement) respectent ou ne respectent pas le modèle spécifié. Par
défaut, lorsqu’un champ de saisie ne respecte pas le modèle :
■■ Firefox affecte la valeur red à la propriété box-shadow du champ ;
■■ Internet Explorer affecte la valeur red à la propriété border-color du champ ;
■■ Chrome et Opera n’ajoutent aucun style, mais placent le focus sur le premier champ
erroné.
En utilisant les pseudo-classes :valid et :invalid, vous allez pouvoir modifier ce
comportement par défaut et l’uniformiser 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>
132 Chapitre 8
<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>Téléphone</label><input type="text" name="phone" pattern="[0-9]{10,10}"
➥title="Mauvais numéro de téléphone"><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 numéro de téléphone. Le nom n’a aucun critère de validation. L’adresse URL
est requise (attribut required). Enfin, un modèle de saisie est défini pour l’adresse
e-mail et le numéro de téléphone.
Outre les règles de mise en page du formulaire, deux règles de mise en forme sont
définies sur les champs input de type text, c’est-à-dire sur les deux champs qui
possèdent un modèle de saisie :
input[type=text]:invalid {background-color: red; }
input[type=text]:valid {background-color: green; }
Si la saisie n’est pas valide, l’arrière-plan du champ devient rouge. Il devient vert lorsque
la saisie est valide. Ce comportement est dynamique. Entendez par là que les règles de
mise en forme sont appliquées pendant la saisie. En voyant un arrière-plan de couleur
verte, l’utilisateur sait que la donnée saisie est valide (voir Figure 8.12).
Figure 8.12
L’adresse e-mail
n’est pas correcte ;
en revanche,
le numéro de
téléphone
respecte la règle
de validation.

Stockage local de données
Avec HTML5, le stockage de données sur le poste client est désormais un jeu d’enfant.
Voyons ce que HTML5 propose. Le code à utiliser est du JavaScript. Il repose sur
l’utilisation des fonctions associées à l’objet localStorage :
Fonction Signification
localStorage.getItem('nom') Retourne la valeur correspondant au nom
spécifié dans l’argument
localStorage.setItem('nom', Stocke la valeur spécifiée sous le nom spécifié
'valeur') dans l’argument
localStorage.key(position) Retourne le nom de l’élément stocké à la
position spécifiée (0 correspond à la première
position de sauvegarde)
localStorage.length Retourne le nombre de données mémorisées
localStorage.clear() Efface toutes les données sauvegardées
localStorage.removeItem('nom') Efface la donnée sauvegardée sous le nom
spécifié dans l’argument
Pour bien comprendre comment utiliser ces fonctions JavaScript, rien de tel qu’un peu
de code. Dans cet exemple, vous pouvez enregistrer des données dans l’espace de
stockage local du navigateur, visualiser les données stockées, effacer une donnée ou
toutes les données (voir Figure 8.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 Affiche() {
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);
134 Chapitre 8
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);
Affiche();
}
function Lit() {
document.forms.editor.data.value = localStorage.getItem(nom);
Affiche();
}
function Efface() {
document.forms.editor.data.value = localStorage.removeItem(nom);
Affiche();
}
function EffaceTout() {
localStorage.clear();
Affiche();
}
</script>
</head>
<body onload="Affiche()">
<h1>Stockage local HTML5</h1>
<form name=editor>
<div id="donnees">
<h2>Définissez la donnée à 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="Effacer" onclick="Efface()">
<input type="button" value="Tout effacer" onclick="EffaceTout()">
</p>
</div>
<br><br>
<div id="valeurs">
<h2>Données stockées</h2>
<table id="NomValeur" border="1"></table>
</div>
</form>
</body>
</html>

Figure 8.13
Ce code permet de lire et
d’enregistrer des données dans
l’espace local du navigateur.
136 Chapitre 8
Exercice 7
Définissez un formulaire d’enregistrement similaire à la Figure 8.14. Ce formulaire sera
affiché lorsque l’utilisateur cliquera sur la commande de menu Zone membre.
Figure 8.14
Le formulaire d’inscription à la zone
membre.
Avant que vous ne plongiez dans le code, voici quelques précisions importantes :
■■ Les trois champs de saisie du formulaire sont de type required.
■■ Le pseudo doit être composé de 3 à 8 caractères alphanumériques (a à z, A à Z, 0 à 9).
■■ Le mot de passe doit être composé de 5 caractères alphanumériques (a à z, A à Z,
0 à 9).
Le code PHP à utiliser est le suivant :
<?php
$mail = $_POST['mail'];
$pseudo = $_POST['pseudo'];
$pass = $_POST['pass'];
$titre = "Formulaire d’inscription 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;

➥SVP.";
else {
echo "Les données 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 vérifier le bon fonctionnement de ce code, affectez votre propre adresse e-mail à la
variable $destinataire. Vous recevrez ainsi les données saisies dans le formulaire :
Exercice 8
Définissez le formulaire de contact représenté à la Figure 8.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 d’envoyer les données saisies à la boîte mail de votre choix :
<?php
$mail = $_POST['mail'];
$message = $_POST['message'];
$titre = "Formulaire de contact mon eFormation";
$texte = "Voici le message de l’utilisateur : ".htmlentities($message, ENT_
➥QUOTES, "UTF-8");
138 Chapitre 8
$delapartde = $mail;
➥SVP.";
else {
echo "Les données 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 vérifier le bon fonctionnement de ce code, affectez votre propre adresse e-mail à la
variable $destinataire. Vous recevrez ainsi les données saisies dans le formulaire :

9
Tableaux
Il est fréquent d’avoir recours à un tableau pour représenter des données tabulaires
en HTML. Dans les chapitres précédents, vous avez vu que cette pratique pouvait être
facilement contournée à l’aide de balises inline transformées en inline-block et
redimensionnées via la propriété width. Il est temps de découvrir les tableaux et ce
qu’ils pourront vous apporter dans l’agencement de sites Web.
Définir un tableau en HTML

Un tableau est défini à l’aide de la balise <table>. Pour matérialiser les bordures autour
des cellules, vous pouvez insérer l’attribut border dans la balise <table>. Un tableau
est composé de plusieurs lignes définies avec la balise <tr>. Chaque ligne contient une
ou plusieurs cellules définies :
■■ avec la balise <th> s’il s’agit d’une cellule de titre ;
■■ avec la balise <td> s’il s’agit d’une cellule contenant une donnée.
La structure générale d’un 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>
Définir un tableau en CSS
Pour définir un tableau en CSS, vous pouvez utiliser, par exemple :
■■ une balise <div> comme parent du tableau ;
■■ des balises <p> pour représenter les cellules ;
■■ des balises <span> pour représenter les cellules.
Info
Pour différencier les cellules de titre des cellules de données, vous affecterez une classe
à la ligne contenant les cellules de titre et vous définirez leurs caractéristiques en CSS.
Voici un exemple de tableau élémentaire (voir Figure 9.1) :

<!DOCTYPE HTML>
<html>
<head>
<title>Un tableau en CSS</title>
.titre { font-weight: bold; }
span {
float: 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>
142 Chapitre 9
Figure 9.1
Ce tableau
a été créé
sans la balise
<table>.
Voici quelques explications sur ce code.

Le tableau est défini à l’aide d’une balise <div>, les lignes à l’aide de balises <p> et les
cellules à l’aide de balises <span>. La classe titre est affectée à ligne de titre, pour la
différencier des autres lignes du tableau.
Examinons le code CSS mis en œuvre.
Les textes contenus dans la ligne de titre sont affichés en gras. Dans le cas présent,
aucun texte n’est affiché dans la ligne de titre. En revanche, ses deux enfants <span>
héritent des propriétés de leur parent et, donc, affichent le texte en gras :
.titre { font-weight: bold; }
Pour que les cellules du tableau (c’est-à-dire les balises <span>) s’affichent les unes à la
suite des autres, on les fait flotter sur le côté gauche avec la propriété float :
span {
float: left;
Pour pouvoir les redimensionner, on leur attribue un comportement inline-block et

on définit leur largeur :
width: 150px;
Un espace de 5 pixels est ménagé autour des balises <span> pour les aérer et éviter
que le texte ne soit trop proche des bordures :
padding: 5px;
Enfin, une bordure continue noire épaisse de 1 pixel est affichée autour de chaque balise
<span> :
Pour que chaque nouvelle ligne commence au-dessous (et non à côté) de la précédente,
la propriété clear des balises <p> est initialisée à left :
p { clear: left; }
Tableaux 143
Bordures autour des cellules
Au début du chapitre, vous avez vu qu’il était possible d’utiliser l’attribut HTML border
pour afficher une bordure autour des cellules d’un tableau. Vous pouvez aller plus loin en
utilisant la propriété CSS border.
Accessible dans les éléments table, th et td, la propriété border permet
(respectivement) de définir la bordure autour du tableau, des cellules de titre et des
cellules de données. Voici sa syntaxe :
border: épaisseur style couleur;
Où :
■■ épaisseur est l’épaisseur de la bordure : thin, medium, thick ou une valeur
numérique exprimée 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 prédéfinie, comme Silver ou
DarkBlue, ou une valeur hexadécimale, comme #341276.
Dans cet exemple, nous traçons une bordure pointillée noire épaisse de 4 pixels autour
du tableau et une bordure continue rouge épaisse de 1 pixel autour des cellules de titre
<th> et des cellules de données <td> (voir Figure 9.2).
<!DOCTYPE html>
<html>
<head>
<title>Bordures autour d’un tableau</title>
<style>
table
{
border: 4px dashed black;
}
th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
</tr>
<tr>
<td>Elément 1 ligne 1</td>
144 Chapitre 9
</tr>
<tr>
</tr>
</table>
</body>
</html>
Figure 9.2
Mise en place
de deux styles
de bordures.
Info
L’épaisseur, le style et la couleur des quatre éléments qui composent une bordure
peuvent être différenciés en utilisant les propriétés 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 séparer des bordures

La propriété CSS border-collapse détermine si les cellules d’un tableau sont
séparées (valeur separate) ou fusionnées (valeur collapse).
Les deux tableaux représentés à la Figure 9.3 sont identiques, à ceci près que le premier
a une propriété border-collapse initialisée à separate et le second à collapse.
Le code utilisé est le même qu’à la section précédente, à l’exception d’une déclaration de
style border-collapse, insérée dans le style table :
table {
border: 4px dashed black;
border-collapse: collapse;
}
Tableaux 145
Figure 9.3
Les bordures
peuvent être
séparées ou
fusionnées.
Espacer les cellules

La propriété border-spacing détermine l’espace qui sépare les bordures des cellules
adjacentes d’un tableau.
Dans cet exemple (voir Figure 9.4), nous définissons un tableau encadré par une
bordure continue noire épaisse de 1 pixel. Les cellules (<td>) sont séparées (border-
collapse: separate;) et espacées de 10 pixels (border-spacing: 10px;). Pour
bien différencier les cellules du tableau, une couleur d’arrière-plan a été affectée aux
balises <td> et une autre à la balise <table> :
<!DOCTYPE html>
<html>
<head>
<title>Espacer les cellules d’un 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>
146 Chapitre 9
<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>
Figure 9.4
Les bordures des
cellules sont espacées
de 10 pixels.
Fusionner des cellules

Les cellules d’un tableau peuvent être fusionnées horizontalement et/ou verticalement
en utilisant respectivement les attributs colspan et rowspan. Par exemple, l’instruction
suivante fusionne horizontalement la cellule courante avec la cellule suivante :
<td colspan="2">contenu</td>
Ou encore l’instruction 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 qu’un peu de
code. La Figure 9.5 représente le tableau que nous voulons afficher.
Figure 9.5
Plusieurs fusions
de cellules sont
nécessaires pour arriver
à ce résultat.
Tableaux 147
Dans ce tableau, certaines cellules n’ont pas de bordures, d’autres sont fusionnées
horizontalement ou verticalement, d’autres encore sont plus traditionnelles et occupent
un seul emplacement dans le tableau. Voici le code à l’origine de ce tableau :
<!DOCTYPE html>
<html>
<head>
<title>Arrière-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">Année</td><td colspan="2">Bilan</td></tr>
<tr><td>Recettes</td><td>Dépenses</td></tr>
<tr><td rowspan="4">Département</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">Mathématiques</td><td>2012</td><td>44</td><td>43</td>
➥</tr>
</table>
</body>
</html>
Pour faciliter la compréhension du code, chaque ligne du tableau est décrite sur une
ligne HTML, entre les balises <tr> et </tr>. Il vous suffit de décrire ce qui doit s’afficher
dans le tableau, ligne par ligne. Examinons la première ligne :
<tr><td rowspan="2" colspan="2"class="sansbord"></td><td rowspan="2">Année</td>
➥<td colspan="2">Bilan</td></tr>
La première cellule occupe deux lignes (rowspan="2") et deux colonnes (colspan="2")

et n’a pas de bordures (class="sansbord"). La deuxième cellule occupe deux lignes
(rowspan="2") et la dernière cellule occupe deux colonnes (colspan="2").
Observez la Figure 9.5. La deuxième ligne du tableau ne comporte que deux cellules :
Recettes et Dépenses. Il n’est donc pas nécessaire de décrire les cellules précédentes
puisqu’elles font déjà partie de la ligne précédente (rowspan="2") :
<tr><td>Recettes</td><td>Dépenses</td></tr>
148 Chapitre 9
Examinons la troisième ligne :
<tr><td rowspan="4">Département</td><td rowspan=2>Informatique</td><td>2012</td>
➥<td>53</td><td>50</td></tr>
La première cellule doit s’étaler sur quatre lignes (rowspan="4") et la deuxième sur
deux lignes (rowspan="2"). Les cellules suivantes n’occupent qu’un emplacement.
La ligne suivante ne décrit que les cellules qui contiennent les valeurs 2013, 56 et 50. En
effet, les autres cellules ont déjà été décrites dans l’instruction précédente puisqu’elles
occupent plusieurs lignes :
Je pense que vous avez compris le principe. La ligne suivante contient la cellule
Mathématiques qui s’étale sur deux lignes, et les cellules 2012, 44 et 43 :
<tr><td rowspan="2">Mathématiques</td><td>2012</td><td>44</td><td>43</td></tr>
Enfin, la dernière cellule contient les cellules 2013, 48 et 42. Les premières cellules
(Département et Mathématiques) ont été décrites dans les instructions précédentes :
Ajouter une légende au tableau

La balise <caption> permet d’ajouter une légende à un tableau. Elle doit être unique
et insérée immédiatement après la balise <table>. Par défaut, la légende est affichée
au-dessus du tableau et centrée horizontalement sur le tableau. Cependant, vous pouvez
utiliser la propriété CSS caption-side pour préciser l’emplacement de la légende.
Cette propriété peut prendre les valeurs suivantes :
■■ top : légende au-dessous du tableau (valeur par défaut).
■■ bottom : légende au-dessus du tableau.
■■ left : légende à gauche du tableau.
■■ right : légende à droite du tableau.
Bien entendu, vous pouvez fixer un ou plusieurs autres arguments dans le style de
l’élément caption, en particulier l’alignement du texte, la taille et les attributs des
caractères.
Dans cet exemple (voir Figure 9.6), nous affichons la légende au-dessous du tableau
(caption-side: bottom;) et nous modifions les attributs du texte de la légende :
caractères en italique (font-style: italic;) et texte aligné à droite de l’élément
table (text-align: right;).
<!DOCTYPE html>
<html>
<head>
<title>Légender un tableau</title>
<style>
table, td {
border-collapse: collapse;
Tableaux 149
}
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>
Figure 9.6
La légende a été mise
en forme et s’affiche
au-dessous et à droite
du tableau.
Arrière-plan des cellules

L’arrière-plan des cellules peut être une couleur uniforme ou une image. Dans le premier
cas, vous utiliserez la propriété background-color et, dans le second, la propriété
background: url.
Dans cet exemple, nous appliquerons trois textures d’arrière-plan, librement téléchargées
sur le site www.webtexture.net. La texture fond1.jpg est appliquée à la première ligne du
tableau, la texture fond2.jpg à la première colonne du tableau (hormis la première ligne)
et la texture fond3.jpg à toutes les autres cellules (voir Figure 9.7).
<!DOCTYPE html>
<html>
<head>
<title>Arrière-plan des cellules</title>
150 Chapitre 9
<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>
Tableaux 151
Figure 9.7
Trois textures
d’arrière-plan
sont appliquées
aux cellules de
ce tableau.
Alignement dans les cellules

Vous utiliserez les propriétés CSS text-align et vertical-align pour définir
(respectivement) l’alignement horizontal et vertical des cellules dans un tableau.
La propriété text-align peut prendre les valeurs left (gauche), right (droite),
center (centré) ou justify ( justifié).
La propriété vertical-align peut prendre les valeurs top (alignement sur la partie
supérieure de la cellule), bottom (alignement sur la partie inférieure de la cellule) ou
middle (centré sur la hauteur de la cellule).
Cet exemple utilise les trois valeurs possibles pour les propriétés text-align et
vertical-align à travers les classes c1, c2 et c3, successivement appliquées aux
cellules des première, deuxième et troisième lignes de la table (voir Figure 9.8). Afin
que vous puissiez bien visualiser l’effet des différents types d’alignements, la taille des
cellules a été modifiée (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>
152 Chapitre 9
<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>
Figure 9.8
Alignements horizontal
et vertical dans les
cellules d’un tableau.
Différencier lignes paires et lignes

impaires
Pour améliorer la lisibilité des tableaux contenant de nombreuses colonnes, il est courant
d’alterner les différentes couleurs des lignes. Le pseudo-sélecteur tr:nth-child()
vous sera d’une grande aide. En effet, en précisant odd ou even entre les parenthèses,
CSS sélectionne les lignes impaires ou les lignes paires. Il suffit alors de leur appliquer la
couleur d’arrière-plan souhaitée.
Dans cet exemple, les lignes impaires (odd) ont un arrière-plan de couleur silver et les
lignes paires (even) un arrière-plan blanc (voir Figure 9.9).
<!DOCTYPE html>
<html>
<head>
<title>Différenciation 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; }
Tableaux 153
</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>
Figure 9.9
L’alternance
des couleurs
améliore la
lisibilité du
tableau.
Mise en forme des cellules vides

Le pseudo-sélecteur :empty permet de s’adresser aux cellules vides d’un tableau. Il est
alors très simple de les mettre en évidence en modifiant leur couleur d’arrière-plan ou
leur bordure.
Dans cet exemple, toutes les cellules ont un arrière-plan de couleur #dfd, à l’exception
des cellules vides, qui ont un arrière-plan de couleur grise (voir Figure 9.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>Elément 1 ligne 1</td><td></td><td>Elément 3 ligne 1</td></tr>
<tr><td></td><td>Elément 2 ligne 2</td><td>Elément 3 ligne 2</td></tr>
</table>
</body>
</html>
154 Chapitre 9
Figure 9.10
Les cellules vides
sont différenciées des
autres en jouant sur
leur couleur d’arrière-
plan.
Arrondis et ombrages
Les propriétés CSS border-radius, border-shadow et text-shadow peuvent être
utilisées dans un tableau pour (respectivement) arrondir les angles du tableau, définir un
ombrage sur le tableau et sur le texte affiché dans le tableau. Dans cet exemple, nous
allons agir sur les caractéristiques suivantes :
■■ angles arrondis ;
■■ ombrage du tableau ;
■■ ombrage du texte dans les balises <th> ;
■■ définition d’une largeur de cellule fixe et centrage des données dans les cellules.
Figure 9.11
Le tableau mis en
forme a une fiè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;
Tableaux 155
font-size: 200%;
box-shadow: gray 5px 5px 6px;
}
th {
color: #fff;
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>
156 Chapitre 9
Exercice 9
Vous allez compléter le code défini dans les exercices précédents. Définissez la page
news.htm pour afficher les news du site, comme dans la Figure 9.12.
Figure 9.12
Le résultat à
atteindre.
Comme vous le voyez, les news sont affichées dans un tableau comportant une ligne de
titre et une ligne pour chaque news. Les lignes sont colorées alternativement en gris et
en blanc, les bordures sont arrondies, et une ombre portée est définie en bas et à droite
du tableau.
Tableaux 157
10
Mise en page
Ce chapitre est très important. Il s’intéresse au nouveau découpage des pages en HTML5
et aux techniques de mise en page en CSS3. Vous y découvrirez entre autres comment
modifier le comportement block ou inline des balises, comment donner un aspect
sémantique à votre code HTML5, ou encore comment définir un affichage qui s’adapte à
la largeur de la fenêtre (adaptative Web design).
inline, block ou les deux ?

Les balises HTML sont utilisées pour afficher des données sur l’écran ou pour encapsuler
d’autres balises HTML. On peut classer ces balises en deux grands groupes : inline
et block. Comme leur nom le suggère, les éléments de type inline s’affichent
horizontalement, les uns derrière les autres, si la largeur de la fenêtre le permet.
Inversement, les éléments de type block s’affichent verticalement, les uns après 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>, <fieldset>, <figcaption>, <figure>, <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
redimensionnées et positionnées de façon absolue sur une page. Il est parfois nécessaire
de redimensionner et/ou de positionner de façon absolue une balise de type inline.
Dans ce cas, on lui affecte un rendu inline-block avec cette instruction CSS :
élément { display: inline-block; }
Où élément est l’élément HTML (la balise sans les signes "<" et ">") dont on désire
changer le type.
Bien qu’elle soit toujours utilisée pour des raisons de rétrocompatibilité, la catégorisation
inline et block des balises n’a plus cours en HTML5. Cette mouture du langage
définit un nouveau schéma de structuration de données : les éléments sont regroupés
de manière logique selon leurs rôles sémantiques. 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-après détaille le contenu des
principaux groupes sémantiques
Groupes sémantiques Éléments

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, figure, figcaption,
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, fieldset, 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 dépend du CSS et n’a rien à voir avec
la spécification HTML5. En tant que développeur HTML5, vous ne devez donc pas
confondre les groupes d’appartenance HTML5 et le rendu CSS.
Nouvelle organisation des documents

Bien souvent, les pages Web sont constituées d’un en-tête et d’un pied de page, d’un
menu, d’une zone réservée au contenu (article, images, vidéos, etc.) et, éventuellement,
d’une zone annexe, n’ayant aucun rapport direct avec le contenu de la page (voir
Figure 10.1). Ce type de page est souvent défini à l’aide de plusieurs balises <div> :
160 Chapitre 10
Figure 10.1
Une page Web
traditionnelle
constituée d’un
assemblage de
balises <div>.
<!DOCTYPE html>
<html>
<head>
<title>Une page avec en-tête, pied de page, menu, zone annexe et zone de
➥contenu</title>
<link rel="stylesheet" href="style0.css">
</head>
<body>
<div id="entete">
<h1>En-tête du document</h1>
Texte de l’en-tête
</div>
<div id="barre-navigation">
<h2>Menu</h2>
<ul>
<br><br>
</ul>
</div>
<div id="barre-droite">
Texte annexe, affiché dans la partie droite de la page<br><br>
</div>
<div class="article">
Zone réservée au contenu de la page
<h2>Premier article</h2>
Texte du premier article
</div>
<div class="article">
<h2>Deuxième article</h2>
Mise en page 161

Texte du deuxième 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 fichier style0.css :

#entete { background-color: red; }
#barre-navigation {
float:left;
width:20%;
background-color:yellow;
}
#barre-droite {
float: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 profit de
balises ayant une plus forte connotation sémantique. Si le résultat final est très proche du
précédent (voir Figure 10.2), le code HTML a un aspect complètement différent :
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-tête, pied de page, menu, zone annexe et
➥zone de contenu</title>
162 Chapitre 10
<link rel="stylesheet" href="style1.css">
<script src="Creation-elements-HTML5.js"></script>
</head>
<body>
<header>
<h1>En-tête du document</h1>
Texte de l’en-tête
</header>
<nav>
<h2>Menu</h2>
<ul>
</ul>
<br><br><br>
</nav>
<aside>
Texte affiché 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>Deuxième article</h2>
<p>Texte du deuxième 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é remplacées par les balises
<header>, <nav>, <aside>, <article> et <footer>.
■■ <article> correspond à une entité autonome du document : par exemple, un article
(ou un ensemble d’articles) extrait d’un blog ou d’un forum.
■■ <aside> définit un contenu qui n’a pas de rapport direct avec la page. Il peut être
utilisé pour définir un menu ou pour donner accès aux archives du site.
■■ <header> et <footer> définissent l’en-tête et le pied de page d’une section ou
d’une page Web.
■■ <nav> est destiné à contenir des liens de navigation dans le site.
L’en-tête 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 {
float:left;
Mise en page 163

width:20%;
background-color:yellow;
}
article { background-color: #66FFFF; width:80%; }
aside {
float:right;
width:20%;
background-color:gray;
}
footer { clear:both; background-color: #99FF66; }
Dans ces instructions, notez que le rendu block (display: block;) a été affecté aux
nouveaux éléments HTML5. Cette pratique assure le support de ces nouveaux éléments
dans les navigateurs peu ou pas compatibles.
Les navigateurs Internet Explorer 8 et inférieur ne sont pas en mesure d’affecter un style
aux nouveaux éléments HTML5. En effet, puisqu’ils ne les connaissent pas, ils doivent
les intégrer au DOM via la méthode createElement. Pour ce faire, quelques lignes de
JavaScript sont nécessaires. C’est la raison d’être du script Creation-elements-HTML5.js,
invoqué dans l’en-tête 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 dépend de JavaScript. S’il n’est pas activé sur un client Internet Explorer,
les nouveaux éléments HTML5 seront de type inline par défaut, et les pages ne seront
pas bien représentées !
Positionner les éléments affichés sur

une page
Lorsque aucune règle CSS de mise en page n’est définie, les éléments s’affichent les uns
après les autres, en partant de la balise <body> jusqu’à la balise </body>. L’affichage
se fait sur une même ligne si les éléments sont de type inline. Il se fait verticalement si
les éléments sont de type block1.
La propriété CSS position permet de modifier l’ordre d’affichage séquentiel des
éléments. Quatre techniques de positionnement peuvent être utilisées : static, fixed,
relative et absolute.
1.. Je devrais plutôt dire "L’affichage se fait sur une même ligne si les balises appartiennent à un groupe
sémantique de rendu inline. Il se fait verticalement si les balises appartiennent à un groupe sémantique de
rendu block." Mais je suis sûr que vous me pardonnerez cet abus de langage.
164 Chapitre 10
Positionnement static
Il s’agit du positionnement par défaut des éléments, c’est-à-dire lorsque aucune règle
de mise en page n’est définie. Les éléments positionnés de façon statique suivent le flux
normal de la page, en fonction de leur rendu (inline ou block) et des éventuels autres
éléments rencontrés sur leur chemin. Les propriétés CSS top, bottom, left et right
n’ont aucun effet sur ces éléments.
Positionnement fixed
Lorsqu’un élément a un positionnement fixed, il reste immobile dans la page. Sa
position est déterminée par ses propriétés CSS top, left, bottom et right. Quelques
conséquences pour les éléments de position fixe :
■■ Ils sont insensibles à la position des barres de défilement du navigateur.
■■ Ils sortent du flux normal de l’affichage : c’est comme s’ils n’existaient pas.
■■ Ils peuvent se superposer aux autres éléments affichés dans la page.
Voici un exemple de positionnement fixed. Ici, le paragraphe de classe fixe est positionné
à 20 pixels du bord supérieur et à 10 pixels du bord gauche de la zone d’affichage du
navigateur. Pour bien différencier ce texte du reste de la page, ses caractéristiques ont
été modifiées. Les caractères apparaissent en rouge et ont une taille trois fois supérieure
à la taille par défaut. La Figure 10.3 montre que le texte positionné en fixed est insensible
à la position de la barre de défilement verticale du navigateur.
<!DOCTYPE html>
<html>
<head>
<title>Positionnement fixe</title>
p.fixe {
font-size: 300%;
color: red;
position: fixed;
top: 20px;
left: 10px;
}
</style>
</head>
<body>
<p class="fixe">Texte en position fixe</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 find fault with a man who chooses to
Mise en page 165

➥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 fixed
se trouve toujours au même
emplacement.
Toutes les balises qui produisent un affichage dans le navigateur peuvent être positionnées
en fixed (<p>, <img>, <table>, <div>, etc.). Supposons que vous vouliez utiliser
une image fixe en arrière-plan d’une page. Vous utiliserez la propriété background-
attachment (et non la propriété position) pour arriver à vos fins (voir Figure 10.4) :
body {
background:url(chat.jpg) top right no-repeat;
background-attachment:fixed;
}
Info
Si l’idée vous est venue d’utiliser la propriété opacity pour modifier l’opacité de
l’image d’arrière-plan, sachez que cette technique n’est pas possible. Elle aurait pour
conséquence de modifier l’opacité du texte affiché dans le corps du document, et donc
de le rendre encore moins lisible. Si vous voulez jouer sur l’opacité de l’image d’arrière-
plan, vous devez utiliser un logiciel graphique quelconque pour agir directement sur
l’image.
166 Chapitre 10
Figure 10.4
L’image d’arrière-plan est fixe dans
la page et reste insensible à la
position des barres de défilement.
Positionnement relative
Lorsqu’un élément est position de façon relative, ses propriétés top, bottom, left et
right permettent de le décaler par rapport à sa position originale.
Dans ce premier exemple, trois titres h2 sont affichés. Le premier n’est pas repositionné.
Le deuxième est décalé de 20 pixels vers la gauche et le troisième de 20 pixels vers la
droite (voir Figure 10.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 décalé de 20px à gauche</h2>
<h2 class="droite20">Un titre h2 décalé de 20px à droite</h2>
</body>
</html>
Mise en page 167

Figure 10.5
Les deuxième et
troisième titres h2
sont décalés par
un positionnement
relatif.
Deux remarques :
1. Lorsqu’un élément est positionné de façon relative, il peut se superposer aux autres
éléments affichés dans la page.
2. L’espace réservé à l’affichage de l’élément repositionné est toujours réservé dans le
flux de la page.
L’exemple de code suivant devrait apporter des réponses à vos questions si vous vous
en posez encore. Ici, trois titres h2 sont affichés. Le premier et le troisième ne sont pas
repositionnés. Le deuxième est décalé de 50 pixels vers le haut et vers la droite. Comme
le montre la Figure 10.6, les premier et deuxième titres h2 se superposent et l’espace
réservé au deuxième titre h2 est conservé dans le flux.
<!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 décalé de 20px à gauche</h2>
<h2>Un autre titre h2 non repositionné</h2>
</body>
</html>
168 Chapitre 10
Figure 10.6
Le deuxième titre
h2 est décalé de 50
pixels vers le haut et
la droite.
Positionnement absolute
Lorsqu’un élément est positionné de façon absolue, on définit ses coordonnées par
rapport au premier élément parent dont le positionnement n’est pas statique. En l’absence
d’un tel élément, le positionnement se fait par rapport à la balise <html>.
Voici un exemple de code. Ici, un paragraphe est positionné de façon absolue à 50 pixels
du bord supérieur et à 50 pixels du bord gauche de la page (voir Figure 10.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 façon absolue à 50 pixels du
➥bord supérieur 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 find 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>
Mise en page 169

Figure 10.7
Positionnement absolu d’un
paragraphe.
Contrairement aux éléments positionnés de façon relative, les éléments positionnés de

façon absolue ne font plus partie du flux de la page. Aucun espace vide n’est donc affiché
à l’emplacement qu’ils auraient occupé s’ils n’avaient pas été repositionnés.
Faire flotter un élément

Vous savez maintenant comment positionner des éléments dans une page en modifiant
leur propriété position. Vous pouvez également jouer sur la propriété float pour
retirer un élément du flux de la page et le positionner le plus possible vers la gauche
(float: left;) ou vers la droite (float: right;) dans son conteneur.
Ce mode de positionnement est essentiellement utilisé pour créer des mises en page qui
s’adaptent à la largeur de la fenêtre et pour aligner des images. À titre d’exemple, nous
allons initialiser à left la propriété float de trois balises <div> pour les faire flotter à
gauche de la page. Chacune de ces balises contient une image et un bouton. Lorsque
l’un des boutons est cliqué, la valeur none est affectée à la propriété display du
<div> correspondant, ce qui provoque sa disparition de la page et le repositionnement
à gauche des <div> restants (voir Figure 10.8).
Figure 10.8
La ou les images
qui suivent le
<div> supprimé
se repositionnent
automatiquement sur la
gauche de la page.
170 Chapitre 10
Voici le code utilisé :
<!DOCTYPE html>
<html>
<head>
<title>Positionnement float</title>
div {
width: 100px;
padding: 5px;
margin-left: 10px;
float: 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> d’identifiants #mini1, #mini2 et
#mini3. Chacune des balises <div> contient une image et un bouton. Ce bouton a
pour identifiant #bouton1 dans le premier <div>, #bouton2 dans le deuxième et
#bouton3 dans le troisième.
Le style div modifie l’allure des trois balises <div>. Une bordure pointillée de couleur
noire épaisse de 1 pixel est affichée autour du <div>. La largeur de l’élément est fixée à
100 pixels, une marge interne de 5 pixels est définie tout autour de l’élément, une marge
à gauche de 10 pixels est définie pour espacer les <div> entre eux et un alignement
Mise en page 171

centré est défini pour centrer l’image et le bouton dans les 100 pixels attribués à chaque
<div>.
Vous vous en doutez, c’est le code jQuery qui provoque la disparition des <div>.
Lorsqu’un bouton est cliqué :
La propriété display de la balise <div> correspondante est initialisée à none via la

fonction css(), ce qui provoque la disparition du <div> et le réalignement à gauche
des <div> restants :
Mise en page sur plusieurs colonnes

Quelques instructions CSS3 suffisent pour définir un multicolonnage. Alors que j’écris ces
lignes, cette technique fonctionne sans préfixe dans les navigateurs Internet Explorer 10
et supérieur, et partiellement avec préfixe dans les navigateurs Gecko et WebKit.
Pour définir un multicolonnage CSS3, il suffit de fixer la largeur des colonnes et l’espace
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 effingeret, nec in thesauris quod novo
➥filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi
</div>
</body>
</html>
172 Chapitre 10
Le corps du document se contente de définir une balise <p> de classe multi-col et
de lui affecter un long texte. La partie intéressante du code se trouve dans le CSS3. La
classe multi-col définit la largeur des colonnes pour les navigateurs Mozilla et WebKit.
.multi-col
{
L’espace entre les colonnes est fixé à 20 pixels :

column-gap: 20px;
Comme vous pouvez le constater (voir Figures 10.9 et 10.10), le nombre de colonnes
dépend de la largeur de la page dans le navigateur.
Figure 10.9
Ici, le texte occupe
quatre colonnes.
Figure 10.10
La largeur de la
page étant plus
importante, le texte
occupe maintenant six
colonnes.
Si le nombre de colonnes doit rester fixe, utilisez les propriétés CSS3 -moz-column-
count, -webkit-column-count et column-count. Par exemple, pour définir trois
colonnes, quelle que soit la largeur de la fenêtre, ajoutez les trois lignes suivantes dans
la classe multi-col :
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
Si nécessaire, vous pouvez également insérer un trait séparateur entre les colonnes
en utilisant les propriétés CSS3 -moz-column-rule, -webkit-column-rule et
column-rule dont voici la syntaxe :
-moz-column-rule: largeur style couleur;
Mise en page 173

-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 l’une des valeurs suivantes : dotted,
dashed, solid, insert, double, groove, ridge ou outset.
■■ couleur est la couleur du trait.
Par exemple, pour définir un trait séparateur continu noir et d’épaisseur 1 pixel, vous
utiliserez les deux propriétés suivantes :
-moz-column-rule: 1px solid black;
-webkit-column-rule: 1px solid black;
column-rule: 1px solid black;
Pour terminer, sachez qu’il est possible de définir la couleur d’arrière-plan du texte avec
la propriété background et l’alignement du texte dans les colonnes avec la propriété
text-align. Par exemple, pour affecter un arrière-plan gris et pour justifier le texte
dans les colonnes, servez-vous des propriétés suivantes :
background:#ccc;
text-align:justify;
La Figure 10.11 représente l’affichage du document précédent dans lequel plusieurs

propriétés CSS3 ont été ajoutées.
.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;
}
Figure 10.11
Le texte est
maintenant affiché
sur trois colonnes,
indépendamment
de la largeur de la
fenêtre.
174 Chapitre 10
Info
La propriété -webkit-column-rule rassemble plusieurs paramètres qui peuvent
être divisés en -webkit-column-rule-color, -webkit-column-rule-style et
-webkit-column-rule-width. Il en va de même de la propriété -moz-column-
rule qui peut être divisée en -moz-column-rule-color, -moz-column-rule-
style et -moz-column-rule-width. Et de la propriété column-rule qui peut être
divisée en column-rule-color, column-rule-style et column-rule-width.
Marges
Toutes les balises visuelles (c’est-à-dire celles qui affichent du contenu sur l’écran)
possèdent des marges internes et externes. Vous pouvez modifier ces marges en agissant
sur les propriétés CSS padding (marges internes) et margin (marges externes). À titre
d’exemple, le code suivant définit une balise <div> et y insère du texte. Quelques règles
mettent en évidence les marges internes et externes (voir Figure 10.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 officia 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>
Mise en page 175

Figure 10.12
Les marges internes
sont fixées à
50 pixels et les
marges externes à
100 pixels.
Examinons le code CSS.

L’arrière-plan du document a une couleur jaune :
body { background-color: yellow; }
Les marges externes de la balise <div> sont fixées à 100 pixels et les marges internes
à 50 pixels :
div {
margin: 100px;
padding: 50px;
La balise <div> est dimensionnée à 300 × 250 pixels, son arrière-plan est de couleur
rouge et le texte qui y est affiché est justifié :
width: 300px;
height: 250px;
text-align: justify;
Info
Si nécessaire, il est possible de différencier les quatre marges internes ou externes en
utilisant les propriétés 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.
176 Chapitre 10
Responsive Web Design
(Media Queries CSS)
Le Web est de plus en plus consulté sur des périphériques de petite taille (téléphones,
tablettes, netbooks). C’est pourquoi il est très important d’adapter l’affichage de vos
pages à ces nouveaux modes de consultation. Jusqu’à récemment, les concepteurs
de sites Web se voyaient contraints de créer deux versions de leurs pages : une pour
les ordinateurs et une pour les périphériques mobiles de petite taille. Aujourd’hui, les
Media Queries du langage CSS3 proposent une solution simple, élégante et très efficace
à ce problème. Ils permettent en effet de définir le style d’une page Web en fonction
de plusieurs facteurs liés à la surface d’affichage : la largeur, la hauteur, l’orientation, la
résolution, etc. Cerise sur le gâteau : 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. Lorsqu’un
Media Query a pour valeur true, les instructions situées entre les accolades qui le
suivent sont exécutées. Elles sont ignorées dans le cas contraire.
Si nécessaire, vous pouvez associer plusieurs expressions à l’aide d’opérateurs logiques :
Opérateur Signification
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 propriété CSS3 @media. Le tableau suivant rassemble
quelques-unes des syntaxes utilisables :
@media (max-width: largeur) { …} Largeur de la fenêtre inférieure à la largeur
spécifiée
@media (max-device-width: Largeur du périphérique inférieure à la largeur
largeur) { …} spécifiée
@media (min-width: largeur1) and Largeur de la fenêtre comprise entre les deux
(max-width: largeur2) { …} largeurs spécifiées
@media (max-device-width: Largeur du périphérique inférieure à la largeur
largeur) and (orientation: spécifiée, et écran tenu horizontalement
landscape) { …}
Mise en page 177

Voici un exemple de code. Ici, quatre <div> sont affichées. En fonction de la résolution
du périphérique (max-device-width) ou de l’écran (min-width et max-width), l’une
des <div> voit son arrière-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 apparaît en rouge si la largeur maximale de
➥l’écran est de 480 pixels</div>
<div class="inf600">Cette div apparaît en rouge si la largeur de la fenêtre
➥est inférieure à 600 pixels</div>
<div class="de600a900">Cette div apparaît en rouge si la largeur de la
➥fenêtre est comprise entre 600 et 900 pixels</div>
<div class="sup900">Cette div apparaît en rouge si la largeur de la fenêtre
➥est supérieure à 900 pixels</div>
</body>
</html>
La Figure 10.13 illustre plusieurs exécutions de ce code, en utilisant différentes largeurs

de fenêtre.
178 Chapitre 10
Figure 10.13
La mise en forme
dépend de la
largeur de la
fenêtre.
Info
Il est également possible d’utiliser un fichier CSS ou un autre en fonction de la résolution
du périphérique/de l’écran. Pour cela, vous insérerez des éléments link du type suivant
dans l’en-tête du document. Ici, le style 600px.css est utilisé si l’écran a une largeur
inférieure à 600 pixels.
<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 d’un site Web

En tant que concepteur de sites Web, il est important de rassembler le code CSS dans
une feuille de styles externe et d’y faire référence dans chacune de vos pages en utilisant
une balise <link> dans l’en-tête, entre les balises <head> et </head> :
<link rel="stylesheet" href="maFeuilleDeStyles.css">
De même, je vous conseille de rassembler vos codes jQuery dans un fichier externe et
d’y faire référence dans chacune de vos pages en utilisant une balise <script>, après
avoir invoqué la bibliothèque jQuery sur un CDN :
<script src="monCodeJquery.js"></script>
Enfin, si vos pages sont construites sur le même modèle, vous pourrez restreindre
l’écriture de code en plaçant les parties constantes du code HTML dans autant de fichiers
que nécessaire et en invoquant ces fichiers à l’aide de l’instruction PHP $include.
Supposons, par exemple, que le début et la fin de vos pages utilisent systématiquement
le même code. Vous pourriez créer les fichiers debut.htm et fin.htm, et insérer ces deux
fichiers dans vos pages comme ceci :
Mise en page 179

<?php
include "debut.htm">
?>

<?php
include "fin.htm">
?>
Info
Pour que ce code puisse fonctionner, vous devez le stocker sur le serveur dans un fichier
d’extension .php. Bien entendu, ces instructions ne donneront aucun résultat en local,
sauf si vous installez un serveur PHP, tel WAMP Server (www.wampserver.com).
180 Chapitre 10
Exercice 10
Remplacez les balises <div> utilisées dans la page index.htm par leurs équivalents
sémantiques HTML5 : <header>, <nav>, <article> et <footer>.
Exercice 11
Définissez une mise en page qui s’adapte à la largeur de la fenêtre pour la page index.
htm. Lorsque la fenêtre a une largeur inférieure ou égale à 900 pixels :
■■ Supprimez le titre "eFormation HTML5 CSS3 jQuery" dans le bandeau d’en-tête.
■■ Transformez le menu <ul> en une liste <select>.
Exercice 12
Appliquez la technique décrite dans la section "Optimiser les pages d’un site Web" pour
insérer les instructions jQuery dans un fichier annexe que vous appellerez jquerysite.js.
Appliquez la technique PHP décrite dans la section "Optimiser les pages d’un site Web"
pour optimiser le découpage du fichier index.htm. Pour cela :
1. Définissez les parties constantes d’index.htm dans deux fichiers nommés debut.htm
et fin.htm.
2. Renommez le fichier index.htm en index.php.
3. Utilisez deux instructions include pour invoquer les fichiers debut.htm et fin.htm dans
le fichier index.php et, ainsi, simplifier le code de la page.
Simplifiez le code des autres pages en utilisant la même technique.
Mise en page 181

11
Gestion
événementielle
Chacun à leur manière, les langages HTML, CSS et jQuery permettent de capturer et de
traiter plusieurs types d’événements, tels que les clics de souris, le chargement d’une
page ou d’une image, le passage du pointeur au-dessus d’un élément, etc. Ce chapitre
passe en revue toutes les techniques utilisables. Après sa lecture, vous saurez gérer les
événements liés à la fenêtre du navigateur, au clavier, à la souris, aux formulaires, aux
médias et à l’orientation.
Gestion événementielle en HTML

Pour capturer un événement en HTML5, il suffit d’insérer l’attribut correspondant dans
l’élément cible et de préciser le nom de la fonction JavaScript à exécuter, en lui passant
zéro, un ou plusieurs arguments. Lorsque l’événement se produit, le code JavaScript
correspondant est exécuté.
Dans le code suivant, par exemple, trois événements sont capturés :
■■ chargement du document ;
■■ clic sur le bouton 1 ;
■■ clic sur le bouton 2.
Ils exécutent respectivement les fonctions JavaScript load(), bouton() avec un
argument égal à 1, et bouton() avec un argument égal à 2.
<!DOCTYPE html>
<html>
<head>
<title>Gestion événementielle</title>
<script>
function load() {
document.getElementById("status").innerHTML = "L’événement 'load' a été
➥généré.";
}
function bouton(b) {
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 affiche un élément span d’id status, qui donne l’état du
document, et deux boutons de commande. Au début du chargement de la page, l’élément
span affiche le texte "En attente". Dès que le document est entièrement chargé dans le
navigateur, l’événement onload() est généré et la fonction load() affiche le message
"L’événement 'load' a été généré." dans l’élément span.
Lorsque l’utilisateur clique sur un des boutons de commande, la fonction bouton()
est exécutée. Elle affiche un message dans l’élément span qui dépend du paramètre
transmis, et donc du bouton cliqué (voir Figure 11.1).
Figure 11.1
Le premier bouton a
été cliqué.
Gestion événementielle en CSS

CSS est assez pauvre en ce qui concerne la gestion événementielle. Vous utiliserez
essentiellement les pseudo-classes :hover et :focus. La classe :hover cible l’élément
qui est survolé par la souris. Lorsqu’un tel événement se produit, vous pouvez modifier
ses caractéristiques en agissant sur une ou plusieurs de ses propriétés. Par exemple,
pour ajouter une bordure rouge épaisse de 5 pixels autour des images contenues dans
un document lorsqu’elles sont survolées 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 (généralement une balise d’un
formulaire). Elle permet de modifier la couleur d’arrière-plan (ou un autre style quelconque)
de la balise qui a le focus. À titre d’exemple, cette instruction affecte un arrière-plan de
couleur rouge à la balise input de type text qui a le focus :
input[type=text]:focus {background: red;}
184 Chapitre 11
Gestion événementielle en jQuery
jQuery est en mesure de réagir aux événements générés par la souris, le clavier et les
éléments du DOM. Pour cela, vous devez définir une méthode de gestion événementielle
en écrivant quelque chose comme ceci :
$(sélecteur).événement(function(){
// Gestion de l’événement
});
Où :
■■ sélecteur permet de sélectionner un ou plusieurs éléments du DOM.
■■ événement est le nom de l’événement à gérer.
Par exemple, pour afficher une boîte de message lorsque l’utilisateur clique sur une
image d’id #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>
Événements liés à la fenêtre

De nombreux événements liés à la fenêtre du navigateur peuvent être détectés. Le
tableau suivant en dresse la liste. En HTML, vous utiliserez les attributs correspondants.
En jQuery, vous appliquerez les événements au sélecteur $(window).
Événement Attribut HTML Exécution du script

afterprint onafterprint Après l’impression
beforeprint onbeforeprint Avant l’impression
beforeonload onbeforeonload Avant le chargement du document
blur onblur Lorsque la fenêtre perd le focus
Gestion événementielle 185

error onerror Lorsqu’une erreur est détectée
focus onfocus Lorsque le focus est donné à la fenêtre
haschange onhaschange Lorsque le contenu du document est modifié
load onload Lorsque le document est chargé
message onmessage Quand le message est généré
offline onoffline Au passage de l’état en ligne à l’état déconnecté
online ononline Au passage de l’état déconnecté à l’état en ligne
pagehide onpagehide Lorsque la fenêtre devient invisible
pageshow onpageshow Lorsque la fenêtre devient visible
popstate onpopstate Lorsque l’historique de la page change
redo onredo Après l’exécution d’un "redo"
resize onresize Au redimensionnement de la fenêtre
storage onstorage Au chargement d’un document
undo onundo À l’exécution d’un "undo"
unload onunload Lorsque l’utilisateur change de document
Pour illustrer l’utilisation de ces événements en HTML5, ce code affiche un message

lorsque la page est entièrement chargée, puis juste avant le passage à une autre page.
<!DOCTYPE html>
<html>
<head>
<title>Evénements liés à la fenêtre</title>
<script>
function unload() {
document.getElementById("status").innerHTML = "L’événement 'unload' a été
➥généré";
}
function load() {
document.getElementById("status").innerHTML = "L’événement 'load' a été
➥généré";
}
</script>
</head>
<body onload="load()" onunload="unload();">
<p>Status: <span id="status">En attente de l’événement 'unload'</span></p>
</body>
</html>
Voyons maintenant comment capturer un événement fenêtre avec jQuery. Ici, une boîte
de message est affichée à chaque redimensionnement de la fenêtre.
<!DOCTYPE html>
<html>
<head>
186 Chapitre 11
</head>
<body>
<H2>Redimensionnez la fenêtre</h2>
<script>
$(function(){
$(window).resize(function(){
alert('Vous avez redimensionné la fenêtre');
});
});
</script>
</body>
</html>
Événements liés au clavier

Le tableau suivant dresse la liste des événements liés au clavier. En HTML, vous utiliserez
les attributs correspondants. En jQuery, vous appliquerez les événements à l’élément
concerné.

keydown onkeydown Lorsqu’une touche est pressée
keypress onkeypress Lorsqu’une touche est pressée puis relâchée
keyup onkeyup Lorsqu’une touche est relâchée
Cet exemple affiche un élément span et une zone de texte <input type="text">.
Un caractère tapé dans la zone de texte est récupéré via la fonction événementielle
faitecho, déclenchée sur l’événement onkeypress. Le code de la touche utilisée est
récupéré (ev.keyCode), converti en une chaîne (String.fromCharCode()) affichée
dans l’élément 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>

Voici l’équivalent 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>
Événements liés à la souris

Le tableau suivant dresse la liste des événements liés à la souris. En HTML, vous utiliserez
les attributs correspondants. En jQuery, vous appliquerez les événements à l’élément
concerné.

click onclick Au clic du bouton gauche
dblclick ondblclick Au double clic du bouton gauche
drag ondrag Lorsqu’un élément est déplacé par la technique du glisser-
déposer
dragend ondragend Lorsqu’un élément a fini d’être déplacé par la technique du
glisser-déposer
dragenter ondragenter Lorsqu’un élément a été déplacé sur une destination valide
dragleave ondragleave Lorsqu’un élément est déplacé depuis un emplacement
valide
dragover ondragover Lorsqu’un élément est en cours de déplacement vers une
destination valide
dragstart ondragstart Au début du glisser-déposer
drop ondrop Au dépôt de l’élément sur la destination
mousedown onmousedown Lorsque le bouton de la souris est enfoncé
188 Chapitre 11
mousemove onmousemove Lorsque le pointeur se déplace
mouseout onmouseout Lorsque le pointeur se déplace en dehors d’un élément
mouseover onmouseover Lorsque le pointeur est déplacé sur un élément
mouseup onmouseup Au relâchement du bouton de la souris
mousewheel onmousewheel Au déplacement de la roulette de la souris
scroll onscroll Lorsque la barre de défilement de l’élément est utilisée
Cet exemple capture les événements souris liés à un élément img et les affiche dans un
élément 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('déplacement');"
ondrop="traitement('relâchement de l''image');"
onmousedown="traitement('bouton souris enfoncé');"
onmousemove="traitement('déplacement de la souris');"
onmousemove="traitement('déplacement du pointeur en dehors de
➥l''image');"
onmouseover="traitement('déplacement du pointeur au-dessus de
➥l''image');"
onmouseup="traitement('relâchement du bouton de la souris');"
onmousewheel="traitement('déplacement 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>

}
</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('déplacement'); })
.drop(function(){ traitement('relâchement de l\'image'); })
.mousedown(function(){ traitement('bouton souris enfoncé'); })
.mousemove(function(){ traitement('déplacement de la souris');
➥})
.mousemove(function(){ traitement('déplacement du pointeur en
➥dehors de l\'image'); })
.mouseover(function(){ traitement('déplacement du pointeur
➥au-dessus de l\'image'); })
.mouseup(function(){ traitement('relâchement du bouton de la
➥souris'); })
.mousewheel(function(){ traitement('déplacement de la roulette
➥de la souris'); });
});
</script>
</body>
</html>
Cette version du code chaîne les fonctions événementielles sur l’image. Nous avons
également conservé la fonction JavaScript traitement. Si vous préférez, une solution
"tout jQuery" est envisageable. Vous pourriez écrire quelque chose comme ceci pour
traiter l’événement click :
$('#img').click(function(){
$('#activite').html('clic souris');
})
Événements liés aux formulaires

Le tableau suivant dresse la liste des événements liés aux actions effectuées dans
un formulaire. En HTML, vous utiliserez les attributs correspondants. En jQuery, vous
appliquerez les événements à l’élément concerné.

blur onblur Lorsqu’un élément perd le focus
change onchange Lorsque la valeur/le contenu d’un élément change
contextmenu oncontextmenu Lorsqu’un menu contextuel est déroulé
190 Chapitre 11
focus onfocus Lorsqu’un élément reçoit le focus
formchange onformchange Lorsque le contenu du formulaire change
forminput onforminput Lorsque l’utilisateur entre des données dans le formulaire
input oninput Lorsqu’un élément reçoit des données entrées par
l’utilisateur
invalid oninvalid Lorsqu’un élément n’est pas valide
select onselect Lorsqu’un élément est sélectionné
submit onsubmit Lorsque le formulaire est soumis (généralement au clic sur
le bouton Submit)
Cet exemple capture les actions effectuées sur une zone de texte et un bouton Submit,
et les affiche dans un élément span.
<!DOCTYPE html>
<html>
<head>
<script>
}
</script>
</head>
<body>
<form name="MonFormulaire" method="post" >
<label>Quel est le meilleur système d’exploitation selon vous ?</label>
<input name="texte"
placeholder="Entrez votre réponse 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>

<form name="MonFormulaire" method="post" >
<label>Quel est le meilleur système d’exploitation selon vous ?</label>
<input name="texte" id="texte" placeholder="Entrez votre réponse 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>
Événements liés aux médias

Le tableau suivant dresse la liste des événements liés aux éléments video, image et
audio. En HTML, vous utiliserez les attributs correspondants. En jQuery, vous définirez
un gestionnaire d’événements avec la fonction on(). Transmettez l’événement en
premier paramètre de la fonction et traitez l’événement dans le deuxième paramètre de
la fonction.

abort onabort Sur l’événement "abort"
canplay Lorsque le média peut commencer à
être lu (il peut être amené à s’arrêter si
le buffer de lecture devient vide)
canplaythrough oncanplaythrough Lorsque le média peut être lu sans
interruption jusqu’à la fin
durationchange ondurationchange Lorsque la longueur du média change
emptied onemptied Lorsque le média n’est plus accessible
à la suite d’un problème de réseau
ou d’une erreur de chargement, par
exemple
ended onended Lorsque le média a été entièrement
joué
error onerror Lorsqu’une erreur survient pendant le
chargement du média
loadeddata onloadeddata Lorsque les données du média ont été
chargées
192 Chapitre 11
loadedmetadata onloadedmetadata Lorsque la durée et les autres
caractéristiques du média ont été lues
loadstart onloadstart Lorsque le navigateur commence à
charger les données du média
pause onpause Lorsque le média est mis en pause
play onplay Lorsque le média est mis en lecture
play onplay Lorsque le média a commencé à être
joué
progress onprogress Lorsque l’élément est en cours de
récupération des données pour le
média
ratechange onratechange Lorsque la vitesse de lecture change
readystatechange onreadystatechange Lorsque l’état (prêt/pas prêt) du média
change
seeked onseeked Lorsque la recherche a pris fin
seeking onseeking Pendant la recherche (attribut
seeking=true)
stalled onstalled Lorsqu’une erreur est rencontrée lors
de la récupération des données
suspend onsuspend Lorsque la récupération des données
est arrêtée avant la fin
timeupdate ontimeupdate Lorsque la position de lecture change
volumechange onvolumechange Lorsque le volume du média est
modifié
waiting onwaiting Lorsque le média n’est plus en mode
de lecture mais que l’utilisateur peut
demander une relecture
Cet exemple affiche une vidéo issue du site Mediaforma (www.mediaforma.com) dans
un élément video. Tous les événements liés à cet élément sont capturés et affichés
dans un élément span, au-dessous de l’élément video (voir Figure 11.2).
<!DOCTYPE html>
<html>
<head>
<script>
function etat(param) {
}
</script>
</head>
<body>
<video id="video" src="http://www.mediaforma.com/uneminuteparjour/video/
➥godmode.mp4"

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>
Figure 11.2
La vidéo est en cours de lecture.
194 Chapitre 11
<!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'); })

.on('volumechange', function(){ $('#activite').
➥text('onvolumechange'); })
.on('waiting', function(){ $('#activite').text('onwaiting');
➥});
});
</script>
</body>
</html>
Info
Remarquez l’utilisation de la fonction on() pour définir les gestionnaires pour chaque
événement. Les événements ne sont en effet pas des fonctions directement utilisables
dans le code. Notez également le chaînage des fonctions on() pour simplifier l’écriture
du code jQuery.
Événements liés à l’orientation

Les ordinateurs récents, les téléphones mobiles et les tablettes sont équipés de capteurs
qui fournissent des informations sur l’orientation, le mouvement et l’accélération de
ces appareils. Certains navigateurs Web donnent accès à ces informations. Dans cette
section, nous allons voir comment détecter l’orientation et l’inclinaison d’un matériel.
Détecter l’orientation d’un appareil

Au moment où j’écris ces lignes, seuls quelques navigateurs (dont Google Chrome, iOS
Safari et Android) supportent ces fonctionnalités. La première chose à faire est donc de
tester si le navigateur utilisé est compatible.
La valeur retournée par window.DeviceOrientationEvent indique si le navigateur
est (true) ou n’est pas (false) en mesure de détecter l’orientation de l’appareil :
if (window.DeviceOrientationEvent)
alert('DeviceOrientation supporté');
else
alert('DeviceOrientation non supporté');
Si l’orientation de l’appareil peut être détectée, définissez un gestionnaire d’événements

pour l’événement orientationchange :
window.addEventListener('orientationchange', function(event){}, false);
À titre d’exemple, les quelques lignes de code suivantes affichent l’orientation du matériel
dans un élément span :
<!DOCTYPE html>
<html>
<head>
<title>device Orientation</title>
<script>
if (window.DeviceOrientationEvent) {
196 Chapitre 11
window.addEventListener('orientationchange', function(event) {
document.getElementById("status").innerHTML='orientation : ' + window.
➥orientation + ' degrés';
}, false);
}
</script>
</head>
<body>
<span id="status">Modifiez l’orientation de votre device</span>
</body>
</html>
Le corps du document contient un élément span d’identifiant status qui invite

l’utilisateur à modifier l’orientation de son matériel :
Examinons l’en-tête du document.

Après avoir détecté la compatibilité du navigateur avec cette fonctionnalité :
if (window.DeviceOrientationEvent)
Une boîte de message est affichée pour signifier la compatibilité :

Et un gestionnaire d’événements est mis en place sur l’événement orientationchange :

window.addEventListener('orientationchange', function(event){...}, false);
L’orientation du matériel est alors affichée dans l’élément span :

document.getElementById("status").innerHTML='orientation : ' + window.orientation
➥+ ' degrés';
Détecter l’inclinaison d’un appareil

Supposons maintenant que vous vouliez afficher l’inclinaison d’un appareil. Commencez
par tester la valeur retournée par window.DeviceMotionEvent : true indique que
le navigateur est compatible avec cette fonctionnalité, false indique qu’il n’est pas
compatible avec cette fonctionnalité :
if (window.DeviceMotionEvent)
alert('DeviceMotion supporté');
else
alert('DeviceMotion non supporté');
Si l’inclinaison de l’appareil peut être détectée, définissez un gestionnaire d’événements

pour l’événement devicemotion :
window.addEventListener('devicemotion', function(event){}, false);
À titre d’exemple, les quelques lignes de code suivantes affichent dans un élément span
l’orientation du matériel selon les axes X, Y, Z :
<!DOCTYPE html>
<html>

<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 élément span d’identifiant status qui invite

l’utilisateur à modifier l’orientation de son matériel :
Examinons l’en-tête du document.

Après avoir détecté la compatibilité du navigateur avec cette fonctionnalité :
if (window.DeviceMotionEvent)
Une boîte de message est affichée pour signifier la compatibilité :

alert('DeviceMotion supporté');
Et un gestionnaire d’événements est mis en place sur l’événement devicemotion :

window.addEventListener('devicemotion', function(event){...}, false);
L’inclinaison du matériel est alors affichée dans l’élément span :

document.getElementById("status").innerHTML = "<ul><li>X : " + x + "</li><li>Y :
➥" + y + "</li><li>Z : " + z + "</li></ul>";
Info
L’API DeviceMotion retourne des accélérations et non des angles. Cependant, ces
grandeurs peuvent être assimilées. Ainsi par exemple, si vous posez votre matériel
sur un support parfaitement horizontal, les valeurs affichées pour X et Y devraient être
égales à 0.
198 Chapitre 11
Exercice 13
Dans cet exercice, vous allez modifier le fichier membre.php.
Capturez les frappes de l’utilisateur dans les deux premières zones de texte et
convertissez-les en caractères minuscules au fur et à mesure de la frappe. Pour cela,
vous mettrez en place un gestionnaire d’événements jQuery lié à la saisie dans chacune
des deux zones de texte.

12
Multimédia
Ce chapitre va vous montrer comment jouer des fichiers audio et vidéo sur un site en
utilisant les balises HTML5 <audio> et <video> et comment piloter les contrôles
audio et vidéo en jQuery.
Insérer un élément audio

Avec l’élément audio, l’insertion d’un objet audio dans une page Web devient un vrai jeu
d’enfant. De plus, il n’est plus nécessaire de se soucier de savoir si l’internaute a installé
les bons codecs : ces derniers sont inclus de façon native dans le langage !
Voici la syntaxe de la balise audio :
<audio src="nom" controls preload="none|metadata|auto" loop muted autoplay>
Où :
■■ nom définit le chemin et le nom du fichier audio. Les différents formats audio utilisables
sont OGG, AAC, MP3, WAV, AIFF et AU.
■■ controls, s’il est présent, demande l’affichage d’une barre de contrôle pour agir sur
le son.
■■ preload indique comment le son doit être téléchargé avant qu’il ne soit joué : none
(aucun téléchargement), metadata (téléchargement des métadonnées associées
uniquement) ou auto (laisse le navigateur décider).
■■ loop, s’il est présent, provoque la lecture sans fin du son.
■■ muted, s’il est présent, met le volume de lecture à 0.
■■ autoplay, s’il est présent, déclenche la lecture du son dès que possible, en accord
avec l’attribut preload.
L’attribut src peut être spécifié en dehors de l’élément audio sous la forme d’un ou de
plusieurs éléments source. Ainsi, en fonction du navigateur utilisé, un format audio ou
un autre sera utilisé. Il est même possible de spécifier un lien pour télécharger le fichier
audio, dans le cas où le navigateur ne reconnaîtrait pas l’élément audio.
Attention
Tous les navigateurs ne sont pas compatibles avec les différents formats audio. Le tableau
ci-après donne un aperçu des formats utilisables dans chaque navigateur.
Navigateur OGG AAC MP3 WAV AIFF

Chrome 23 et supérieur x x x
Firefox 17 et supérieur x x
Internet Explorer 10 et supérieur x
Opera 12 et supérieur x x
Safari 5.1 et supérieur x x x x
Info
Pour savoir si votre navigateur est compatible avec la balise HTM5 <audio>, le plus
simple consiste à afficher 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 d’utilisation de la balise <audio>. Ici, les versions OGG, AAC, MP3, WAV,
AIFF et AU du même son ont été spécifiées dans des balises <source>. Le navigateur
utilisera le premier format avec lequel il est compatible. S’il n’est pas compatible avec
l’élément audio, un lien permettant de télécharger le son (ici, au format MP3) sera affiché.
<!DOCTYPE html>
<html>
<head>
<title>L’élément audio</title>
202 Chapitre 12
</head>
<body>
<audio controls preload="auto" autobuffer>
<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.aiff" type="audio/aiff">
<source src="son.au" type="audio/au">
<a href="son.mp3">Télécharger <cite>le commentaire audio au format mp3
➥</cite></a>
</audio>
</body>
</html>
La Figure 12.2 représente un exemple d’exécution de ce code dans Internet Explorer 11.
Figure 12.2
La balise <audio>
est bien supportée
dans Internet
Explorer 11.
Info
Si vous voulez convertir vos fichiers audio aux formats OGG, AAC, MP3, WAV, AIFF et AU,
il est conseillé de télécharger 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 pilotée avec des instructions jQuery. À titre d’exemple, 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 l’arrêter, augmenter ou diminuer
le volume sonore (voir Figure 12.3).
Figure 12.3
Les cinq boutons
permettent d’interagir
avec la balise
<audio>.
Multimédia 203
Voici le code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8" />
<title>L’élément audio</title>
</head>
<body>
<audio id="music" controls preload="auto" autobuffer>
<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.aiff" type="audio/aiff">
<source src="son.au" type="audio/au">
<a href="son.mp3">Télécharger 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 élémentaire : il se contente d’utiliser les fonctions play() et pause() et

de modifier la valeur des variables currentTime et volume de l’élément audio ciblé.
204 Chapitre 12
Si vous voulez cacher le player audio, remplacez cette balise :
<audio id="music" controls preload="auto" autobuffer>
Par la suivante :
<audio id="music" preload="auto" autobuffer>
Insérer un élément vidéo

Avec la balise <video>, l’insertion d’un objet vidéo dans une page Web n’est plus une
corvée. Voici la syntaxe à utiliser :
<video src="nom" controls preload="none|metadata|auto" loop muted autoplay>
Où :
■■ nom définit le chemin et le nom du fichier vidéo, au format OGG ou MP4.
■■ controls, s’il est présent, demande l’affichage d’une barre de contrôle pour agir sur
la vidéo.
■■ preload indique comment la vidéo doit être téléchargée avant qu’elle ne soit
jouée : none (aucun téléchargement), metadata (téléchargement des métadonnées
associées uniquement) ou auto (laisse le navigateur décider).
■■ loop, s’il est présent, provoque la lecture sans fin de la vidéo.
■■ muted, s’il est présent, met le volume de lecture à 0.
■■ autoplay, s’il est présent, déclenche la lecture de la vidéo dès que possible, en
accord avec l’attribut preload.
L’attribut src peut être spécifié en dehors de l’élément video sous la forme d’un ou
de plusieurs éléments source. Ainsi, en fonction du navigateur, un format vidéo ou
un autre sera utilisé. Il est même possible de spécifier une variante flash et/ou un lien
pour télécharger le fichier audio, dans le cas où le navigateur utilisé ne reconnaîtrait pas
l’élément video.
L’élément video est entièrement supporté dans tous les navigateurs modernes. Attention
cependant, faute d’accord entre les différents navigateurs, vous devrez fournir plusieurs
formats vidéo (Ogg Theora, H.264, MP4 et WebM) pour assurer une compatibilité aussi
grande que possible :
■■ Ogg Theora pour les navigateurs Firefox 3.6 et supérieur, Opera 10.6 et supérieur, et
Google Chrome 6 et supérieur.
■■ MP4 codé en H.264 pour les navigateurs Internet Explorer 9 et supérieur, Safari 5 et
supérieur, et Google Chrome 6 et supérieur.
■■ WebM pour les navigateurs Opera 10.6 et supérieur, Chrome 6 et supérieur, et Firefox
3.6 et supérieur.
Pour générer des fichiers aux formats Ogg, MP4 et WebM, le plus simple consiste
à utiliser le logiciel gratuit Miro Video Converter, téléchargeable à la page
www.mirovideoconverter.com. Une fois que le logiciel est installé sur votre ordinateur,
déposez le fichier à convertir dans la fenêtre de l’application, choisissez le format cible
et cliquez sur Convert (voir Figure 12.4).
Multimédia 205
Figure 12.4
Un fichier WMV est sur le point d’être converti au
format WebM.
Le code ci-après affiche une vidéo issue du site de formation en ligne Mediaforma.
Lorsque le navigateur utilisé supporte l’élément video, il est affiché au format MP4 ou
Ogg (<source>). Dans le cas contraire, une version flash est utilisée (object). Il lui est
même possible de télécharger la vidéo (a).
<!DOCTYPE HTML>
<html>
<head>
<title>L’élément 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-flash"
➥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="flashvars" value="controlbar=over&image=
➥http://www.mediaforma.com/win7/videx/nettoyer-disque.jpg&file=
➥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>.
➥Téléchargez la vidéo en cliquant sur le lien ci-après" />
</object>
206 Chapitre 12
<p><a href="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4">
➥Télécharger la vidéo</a>.</p>
</video>
</body>
</html>
La Figure 12.5 représente l’exécution de ce code dans Internet Explorer.
Figure 12.5
La vidéo est lue dans Internet
Explorer.
Astuce
Pour vous assurer de la prise en compte des formats vidéo dans les navigateurs, pensez
à ajouter les trois lignes suivantes dans le fichier .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 pilotée avec des instructions
jQuery. Quelques modifications 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 contrôles HTML traditionnels, comme des boutons ou des liens hypertexte.
Voici le code utilisé. Ici, les contrôles de la balise <video> ont été désactivés en
supprimant l’attribut controls :
<!DOCTYPE HTML>
<html>
<head>
Multimédia 207
<title>L’élément 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-flash"
➥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="flashvars" value="controlbar=over&image=http:
➥//www.mediaforma.com/win7/videx/nettoyer-disque.jpg&file=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>.
➥Téléchargez la vidéo en cliquant sur le lien ci-après" />
</object>
<p><a href="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4">
➥Télécharger la vidéo</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>
208 Chapitre 12
Exercice 14
Vous allez créer la page apropos.php pour compléter le site défini dans les exercices
précédents.
Je vous propose de concevoir une vidéo (ou de la récupérer sur Internet), de la convertir
aux formats Ogg et MP4 avec Miro Video Converter et de l’afficher dans la page apropos.
php en mode autoplay, pour qu’elle se joue dès l’ouverture de la page.
Multimédia 209
13
Transformations,
transitions et
animations
Il est désormais très simple d’appliquer des transformations (translations, rotations,
changements d’échelle) 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 supportées par la plupart des navigateurs de dernière génération :
WebKit (Safari, Chrome), Gecko (Firefox), Opera ainsi qu’Internet Explorer 9 et ultérieur.
Vous pouvez donc les utiliser sans vous préoccuper de leur compatibilité.
En règle générale, vous pouvez utiliser indifféremment des instructions CSS3 ou jQuery.
C’est une affaire de goût personnel. Le résultat obtenu sera similaire.
Transformations
Dans les pages suivantes, vous allez découvrir comment appliquer une translation, une
rotation, un changement d’échelle ou une inclinaison à un élément HTML quelconque. Si
vous voulez aller plus loin, vous pourrez définir des transformations plus complexes en
passant par une "matrice de transformation".
Translations
Tous les éléments HTML5 peuvent subir une translation par l’intermédiaire de la fonction
translate() appliquée à la propriété transform. Voici la syntaxe à utiliser :
transform: translate(h, v);
Où h définit le déplacement horizontal (positif pour un déplacement vers la droite,

négatif pour un déplacement vers la gauche) et v le déplacement vertical (positif pour un
déplacement vers le bas, négatif pour un déplacement vers le haut).
Le résultat de ce code, affiché dans Internet Explorer 11, est représenté à la Figure 13.1.
<!DOCTYPE html>
<html>
<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>
Boîte sans déplacement
</div>
<div class="droite">
Boîte déplacée à droite de 20px
</div>
<div class="gauche">
Boîte déplacée à gauche de 20px
</div>
<div class="haut">
Boîte déplacée vers le haut de 5px
</div>
<div class="bas">
Boîte déplacée vers le bas de 5px
</div>
<div class="hautdroite">
Boîte déplacée vers le haut et la droite de 15px
</div>
</body>
</html>
Remarquez la présence du préfixe -webkit dans le code CSS3 pour s’adresser aux
navigateurs WebKit. Alors que j’écris ces lignes, seul Google Chrome (navigateur à base
du moteur WebKit, en version 31 dans nos tests) a nécessité une propriété transform
préfixée. Les navigateurs Firefox version 25 et Internet Explorer 11 se sont contentés de la
212 Chapitre 13
version générique de la propriété transform. Pour assurer la compatibilité de ce code
avec des navigateurs plus anciens, vous pouvez vous adresser directement à plusieurs
autres navigateurs en utilisant les préfixes appropriés. Par exemple :
-moz-transform : translate(15px, -15px);
-o-transform : translate(15px, -15px);
-ms-transform : translate(15px, -15px);
Figure 13.1
Translations CSS3 dans Internet
Explorer 11.
Info
Si la translation ne doit être appliquée que sur un des axes, vous pouvez également
utiliser les fonctions translateX(h) ou translateY(v), où h représente la
translation horizontale et v la translation verticale, en adoptant les mêmes conventions de
direction que dans la fonction translate().
Lorsqu’un décalage doit être effectué suite à une action de l’utilisateur (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 décale l’image de 100 pixels vers la
droite.
<!DOCTYPE html>
<html>
<head>
<title>Translation en jQuery</title>
</head>
<body>
<img src="chat250.jpg" id="chat"><br>
Transformations, transitions et animations 213

<button id="decaler">Décaler 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 éléments HTML5 peuvent subir une rotation via la fonction rotate() appliquée
à la propriété transform. Voici la syntaxe à utiliser :
transform: rotate(rdeg);
Où rdeg est l’angle de la rotation en degrés. Une valeur positive provoque une rotation
dans le sens horaire, et une valeur négative provoque une rotation dans le sens
trigonométrique.
Voici un exemple d’utilisation de cette propriété. Le résultat de ce code, affiché dans
Firefox, est représenté à la Figure 13.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">
214 Chapitre 13
La <div> après une rotation à droite de 45°
</div>
<div class="rotgauche90">
La <div> après une rotation à gauche de 90°
</div>
</body>
</html>
Dans le code CSS3, remarquez :

■■ l’affichage en mode inline-block des balises <div> de façon qu’elles apparaissent
sur une même ligne ;
■■ la définition de la propriété margin-top, pour que les balises <div> ne soient pas
tronquées après rotation ;
■■ l’utilisation du préfixe -webkit pour s’adresser 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 préfixes
appropriés. Par exemple :
-moz-transform : rotate(45deg);
-o-transform : rotate(45deg);
-ms-transform : rotate(45deg);
Figure 13.2
Rotation CSS3 dans
Firefox 25.
Lorsqu’une rotation doit être effectuée suite à une action de l’utilisateur (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;

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 d’échelle
Les éléments HTML5 peuvent subir un changement d’échelle quand la fonction scale()
est appliquée à la propriété CSS3 transform. Voici la syntaxe à utiliser :
transform: scale(ex, ey);
Où ex et ey représentent les facteurs d’échelle selon les axes des abscisses et des
ordonnées. Par défaut, si ey n’est pas spécifié, il est supposé égal à ex.
Le code ci-après applique deux changements d’échelle sur une image (voir Figure 13.3) :
<!DOCTYPE html>
<html>
<head>
<title>Changements d’échelle</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">
216 Chapitre 13
</body>
</html>
Figure 13.3
Les images se
chevauchent.
Comme vous pouvez le voir, les trois images se superposent. En fait, elles sont affichées
comme si chacune avait la taille de l’image originale. Pour régler ce problème, vous
définirez une marge entre elles avec la propriété CSS margin :
img { margin: 30px; }
Le résultat et maintenant bien plus acceptable (voir Figure 13.4).
Figure 13.4
La propriété margin a
réglé le problème.

Vous pouvez également utiliser les fonctions scaleX(ex) et scaleY(ey) où ex et
ey représentent les facteurs d’échelle en abscisse et en ordonnée. Ces fonctions sont
respectivement équivalentes à scale(ex,1) et scale(1, ey). Elles produisent donc
une déformation de l’élément. Dans le code suivant, l’image est étirée horizontalement
avec un facteur d’échelle 2 (voir Figure 13.5).
<!DOCTYPE html>
<html>
<head>
<title>Changements d’échelle</title>
<style>
img { margin: 60px; }
.x2 {
-webkit-transform : scaleX(2);
transform : scaleX(2);
}
</style>
</head>
<body>
<img src="cheval250.jpg" class="x2">
</body>
</html>
Figure 13.5
L’image originale a
subi un changement
d’échelle scaleX(2).
Lorsqu’un changement d’échelle doit être effectué suite à une action de l’utilisateur (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>
218 Chapitre 13
<title>Changement d’échelle en jQuery</title>
</head>
<body>
<img src="chien250.jpg" id="chien"></div>
<button id="echelle">Changer l’échelle</button>
<script>
$(function(){
$('#echelle').click(function(){
$('#chien').toggle(function(){ $(this).css('transform','scale(0)'); },
function(){ $(this).css('transform','scale(1)'); });
});
});
</script>
</body>
</html>
Info
Jusqu’ici, nous n’avons pas utilisé la fonction jQuery toggle(). Très pratique, elle
permet d’exécuter alternativement une fonction ou une autre. Ici, le premier clic sur le
bouton provoque le redimensionnement de l’image jusqu’à sa disparition (scale(0)). Le
deuxième l’affiche dans sa taille originale (scale(1)). Le troisième la fait disparaître. Le
quatrième lui rend sa taille originale, etc.
Inclinaisons
Les éléments HTML5 peuvent être inclinés avec la fonction skew() appliquée à la
propriété CSS3 transform. Voici la syntaxe à utiliser :
transform: skew(ax, ay);
Où ax et ay représentent les angles d’inclinaison selon les axes des abscisses et des
ordonnées. Les valeurs positives de ax inclinent l’élément dans le sens trigonométrique.
Quant aux valeurs positives de ay, elles l’inclinent vers l’arrière. Par défaut, si ay n’est
pas spécifié, il est supposé égal à 0. Dans ce cas, il n’y a donc pas d’inclinaison selon
l’axe des ordonnées.
Le code ci-après applique des inclinaisons sur une image (voir Figure 13.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);
}

.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>
Figure 13.6
Inclinaison selon les
axes X et Y.
Si l’inclinaison ne doit être appliquée que sur un des axes, vous pouvez également
utiliser les fonctions skewX(ax) ou skewY(ay), où ax et ay représentent les angles
d’inclinaison selon les axes des abscisses et des ordonnées.
Info
Ce qui a été dit dans les sections précédentes concernant l’utilisation de code jQuery
s’applique également à la fonction skew(). Libre à vous d’utiliser quelques lignes de
jQuery pour incliner un élément suite à une action de l’utilisateur.
Matrices
D’un point de vue mathématique, toutes les transformations CSS3 peuvent être
représentées par une matrice 3 × 3 de la forme suivante :
220 Chapitre 13
Figure 13.7
Matrice de transformation.
La matrice de transformation permet de relier les anciennes et les nouvelles coordonnées

des éléments transformés avec la relation suivante :
Figure 13.8
Lien entre les anciennes et les nouvelles coordonnées.
Les transformations étudiées jusqu’ici sont équivalentes aux matrices représentées à la

Figure 13.9.
Figure 13.9
Matrices de transformation.

Six valeurs seulement sont utilisées dans ces matrices, c’est pourquoi il est possible de
les exprimer en tant que simples vecteurs [ a b c d e f ].
Si vous êtes à l’aise avec la manipulation des matrices, vous pouvez employer la fonction
matrix()appliquée à la propriété CSS3 transform. En voici la syntaxe :
transform: matrix(a, b, c, d, e, f);
Où a, b, c, d, e et f sont les coefficients de la matrice 3 × 3.

Pour effectuer une rotation de 90 degrés dans le sens des aiguilles d’une montre, vous
utiliserez la matrice représentée Figure 13.10.
Figure 13.10
Rotation de
90 degrés dans
le sens inverse
trigonométrique.
Les coefficients sont donc les suivants : 0, 1, –1, 0, 0, 0.

Voici le code HTML5/CSS3 correspondant. La Figure 13.11 représente son exécution 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>
222 Chapitre 13
Figure 13.11
La rotation a été
effectuée via la
fonction matrix().
Il est possible de cumuler plusieurs transformations en multipliant les matrices 3 × 3

correspondantes (voir Figure 13.12).
Figure 13.12
Transformations
multiples.
Une autre solution consiste à spécifier les transformations à la suite de la propriété en

les séparant par un espace. Par exemple, pour effectuer une translation vers la droite
de 50 pixels et une rotation de 90 degrés dans le sens des aiguilles d’une montre, la
déclaration de style suivante est correcte :
transform: translate(50px, 0) rotate(90deg);
Info
Ce qui a été dit dans les sections précédentes concernant l’utilisation de code jQuery
s’applique également à la fonction matrix(). Vous pouvez donc appliquer une matrice à
un élément HTML suite à une action de l’utilisateur.
Transitions
Vous pouvez animer les transformations CSS3 avec des pseudo-classes ou du code
jQuery comme facteurs déclenchants. Ainsi, par exemple, une rotation ou une translation
peut être affichée progressivement lorsque l’utilisateur déplace le pointeur ou clique
sur un élément quelconque. Cette fabuleuse nouveauté réside dans la propriété CSS3
transition dont voici la syntaxe :
transition: propriété durée type délai;

Où :
■■ propriété est une propriété CSS : background, opacity ou width, par exemple.
■■ durée est la durée de l’animation en secondes.
■■ type est le type de l’animation. Ce paramètre peut prendre l’une des valeurs suivantes :
– linear : aucun effet.
– cubic-bezier(x1, y1, x2, y2) : courbe de Bézier 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).
■■ délai est le délai avant le déclenchement de l’animation.
La propriété transition est compatible avec tous les navigateurs actuels. Cependant,
si vous voulez lui assurer un support plus étendu, vous pouvez utiliser les préfixes
habituels : -moz-transition, -webkit-transition, -o-transition, etc.
Modification progressive d’une propriété

Cette section montre comment définir des animations sur la couleur et/ou la transparence
des éléments.
Modifier la couleur d’un élément

Notre premier exemple va consister à animer la couleur d’un élément au survol. Pour ce
faire, vous devez :
■■ définir une classe contenant la propriété transition: color et l’affecter à
l’élément concerné ;
■■ définir la pseudo-classe associée et fixer la couleur à atteindre.
Ici, le code HTML5 affiche un paragraphe de texte de classe anim-couleur. Le
code CSS de la classe anim-couleur définit la taille des caractères et le type de la
transition : color 2s ease-in. Quant à la pseudo-classe anim-couleur:hover, elle
se contente de définir la couleur cible lorsque l’élément 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>
224 Chapitre 13
<body>
<p class="anim-couleur">Placez le pointeur sur ce texte</p>
</body>
</html>
Modifier la transparence d’un élément

La propriété opacity permet de régler la transparence d’un élément. Pour faire
disparaître un élément au survol, il suffit de définir :
■■ une classe dans laquelle la propriété transition: opacité est initialisée et
l’affecter à l’élément concerné ;
■■ la pseudo-classe correspondante dans laquelle l’opacité cible est spécifiée.
Dans ce code, par exemple, l’image disparaît progressivement lorsqu’elle est survolée.
<!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 propriétés CSS3 transform et transition, vous
n’aurez besoin que de quelques lignes de code pour animer une transformation.
Pour déplacer progressivement de 50 pixels une image lorsqu’elle est survolée, voici le
code à utiliser :
<!DOCTYPE html>
<html>
<head>
<title>Animation d’une translation</title>
<style>
.animation { transition: all 2s linear; }
.animation:hover {
transform: translate(50px, 0);
-webkit-transform: translate(50px, 0);
}
</style>
</head>

<body>
<img class="animation" src="cheval250.jpg" />
</body>
</html>
Le code HTML5 se contente d’afficher une image de classe animation.

La classe animation définit la propriété transition :
transition: all 2s linear;
L’animation sera linéaire et elle durera deux secondes. La valeur all étant appliquée
au premier paramètre, toutes les propriétés modifiées pour cet élément seront
automatiquement animées. Ici, seule une translation est appliquée à l’image, mais on
aurait pu également ajouter une disparition progressive, une rotation ou un quelconque
autre effet.
Pour vous en convaincre, modifiez 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 l’image est pointée, elle subit simultanément une translation, une
rotation et une disparition via la propriété opacity.
Déclencher une animation en jQuery

Il peut être intéressant de déclencher une animation en jQuery. Pour cela, il suffit de
définir une fonction de gestion événementielle associée, par exemple, à la propriété
onClick d’un élément HTML button.
Ce code montre comment déclencher une animation sur l’attribut top d’une balise
<div> à la suite d’un clic sur un <button>, puis comment restituer la position initiale de
la balise <div> à la suite d’un clic sur un autre bouton.
<!DOCTYPE html>
<html>
<head>
<title>Animation déclenchée en jQuery</title>
<style>
div {
position: absolute;
left: 100px;
top: 100px;
height: 50px;
width: 100px;
padding: 10px;
background: Yellow;
transition: top 1s ease-in;
226 Chapitre 13
}
</style>
</head>
<body>
<button id="animer">Cliquez ici pour animer la <div></button>
<button id="revenir">Cliquez ici pour réinitialiser 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>
Figure 13.13
Ces deux boutons
agissent sur la propriété
top de la balise <div>.
Examinons le code.
La partie HTML5 définit deux <button> d’identifiants animer et revenir et une <div>
d’identifiant madiv.
La partie CSS3 définit les caractéristiques de la balise <div> : position (top, left), taille
(width, height), marges internes (padding), couleur d’arrière-plan (background),
type de la transition (transition: top).
La partie jQuery définit les gestionnaires événementiels liés aux clics sur les deux
boutons. Tous deux modifient l’attribut top de la balise <div> en utilisant la fonction
css() :
Ce code est certes élémentaire mais, en y insérant des instructions plus évoluées
(notamment en agissant sur la propriété transform), vous pourrez commander des
animations à la demande.

Quelques animations classiques
Cette section passe en revue quelques animations fréquemment utilisées et vous montre
comment les mettre en place à l’aide d’instructions CSS3/jQuery.
Apparition et disparition
Dans les pages précédentes, vous avez appris à faire disparaître progressivement
un élément HTML en utilisant la propriété transition et en jouant sur l’opacité de
l’élément. Pour simplifier encore la tâche, vous pouvez faire appel aux fonctions jQuery
show() et hide(). Ces fonctions peuvent être utilisées avec zéro, un, deux ou trois
arguments :
■■ Sans argument, la disparition ou l’apparition dure 400 millisecondes.
■■ Lorsqu’un argument est spécifié, il peut indiquer une durée (slow, fast ou en
millisecondes) ou un mode de disparition/d’apparition (linear, swing, easeInQuad,
etc.) Reportez-vous à la page http://api.jqueryui.com/easings/ pour savoir quelles
constantes vous pouvez utiliser.
■■ Lorsque deux arguments sont spécifiés, ils indiquent la durée de l’animation et la
fonction à utiliser lorsque l’animation est terminée (fonction de callback).
■■ Lorsque trois arguments sont spécifiés, ils indiquent la durée de l’animation, le mode
de disparition/d’apparition et la fonction à utiliser lorsque l’animation est terminée.
À titre d’exemple, le code suivant fait disparaître progressivement une image lorsqu’elle
est survolée par la souris et la fait réapparaître lorsque le pointeur se trouve en dehors
de la zone d’affichage originale de l’image.
<!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>
228 Chapitre 13
Les fonctions jQuery mouseenter() et mouseleave() sont exécutées lorsque le
pointeur de la souris (respectivement) entre puis sort de la zone d’affichage du sélecteur.
Ici, l’élément concerné est l’image d’identifiant #image :
$('#image').mouseenter(function(){ ... });
$('#image').mouseleave(function(){ ... });
La durée de l’animation est fixée à 1 000 millisecondes. L’image disparaît/apparaît donc

en une seconde :
$(this).hide(1000);
$(this).show(1000);
Enchaîner plusieurs disparitions/apparitions

En utilisant la fonction de callback des fonctions show() et hide(), il est possible
d’enchaîner plusieurs disparitions ou apparitions. À titre d’exemple, le code suivant fait
disparaître l’une après l’autre les quatre balises <div> contenues dans le document
lorsque le pointeur de la souris est placé au-dessus de la première balise <div> (voir
Figure 13.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').first().hide(1000,function suivant1(){
$(this).next().hide(1000, suivant1);
});
});

$('#vert').mouseleave(function(){
$('div').first().show(1000,function suivant2(){
$(this).next().show(1000, suivant2);
});
});
});
</script>
</body>
</html>
Figure 13.14
Les quatre balises
<div> disparaissent
tour à tour.
Les éléments déclencheurs de l’animation sont l’entrée et la sortie de la zone d’affichage

de la première balise <div> :
$('#vert').mouseenter(function(){ ... });
$('#vert').mouseleave(function(){ ... });
Lorsque le pointeur survole la première balise <div>, on la fait disparaître en 1 000

millisecondes :
$('div').first().hide(1000,function suivant1(){
Lorsque la disparition est terminée, la fonction de callback suivant1() est exécutée.

Cette fonction fait disparaître la balise <div> suivante, si elle existe. Cette disparition
terminée, la fonction suivant1() est à nouveau appelée pour faire disparaître la balise
<div> suivante, si elle existe :
$(this).next().hide(1000, suivant1);
Lorsque le pointeur quitte la zone d’affichage de la première balise <div> :

$('#vert').mouseleave(function(){
Cette balise est à nouveau affichée en une seconde avec la fonction show() :
$('div').first().show(1000,function suivant2(){
Une fois la balise affichée, la fonction de callback suivant2() est exécutée. Cette
fonction affiche la balise <div> suivante, si elle existe. Une fois l’affichage terminé, la
fonction suivant2() est exécutée de façon récursive jusqu’à ce que la dernière balise
<div> soit affichée :
$(this).next().show(1000, suivant2);
230 Chapitre 13
Fondu enchaîné
Les fonctions fadeOut() et fadeIn() permettent respectivement de faire disparaître
et de faire apparaître progressivement des éléments HTML quelconques. La syntaxe de
ces fonctions est la même que celle des fonctions show() et hide(). Elles peuvent
donc admettre zéro, un, deux ou trois arguments. Reportez-vous à la section précédente
pour en savoir plus au sujet de ces arguments.
Dans ce code, deux images de même taille sont affichées l’une sur l’autre. Lorsque le
pointeur de la souris est placé au-dessus de l’image visible, elle est progressivement
cachée pour révéler l’autre image. Inversement, lorsque le pointeur est déplacé en
dehors de l’image, la première image apparaît progressivement en cachant celle qui était
visible.
<!DOCTYPE html>
<html>
<head>
<title>Fondu enchaîné 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 placées dans le DOM à l’aide de deux balises <img> :

Pour afficher les deux images l’une sur l’autre, il suffit d’affecter la valeur absolute à leur
propriété position et de définir leur emplacement avec les propriétés top et left :
position: absolute;
top: 100px;
left: 100px;
La propriété z-index est utilisée pour décider quelle image sera au-dessus de l’autre.
Ici, c’est l’image d’identifiant #f1 qui sera visible par défaut, car sa propriété z-index a
la plus grande valeur :
#f1 { z-index: 2; }
#f2 { z-index: 1; }
Les événements qui déclenchent l’animation sont le début et la fin du survol de l’image
#f1 :
$('#f1').mouseenter(function(){ ... });
$('#f1').mouseleave(function(){ ... });
Lorsque le pointeur survole l’image #f1, un fadeOut de deux secondes lui est appliqué,
ce qui provoque sa disparition progressive :
$('#f1').fadeOut(2000);
Lorsque le pointeur ne survole plus l’image #f1, un fadeIn de deux secondes lui est
appliqué, ce qui provoque son apparition progressive :
$('#f1').fadeIn(2000);
Animations personnalisées
La fonction animate() permet d’animer une propriété CSS quelconque. Cette fonction
admet plusieurs syntaxes, mais nous utiliserons uniquement celle-ci :
animate({ propriété1: valeur1, propriété2: valeur2, etc. },
durée, modèle, function(){
// Instructions exécutées après l’animation
});
Où :
■■ propriété1, propriété2, etc., sont les propriétés à animer.
■■ valeur1, valeur2, etc., sont les valeurs à affecter aux propriétés correspondantes.
■■ durée est la durée de l’animation en millisecondes.
■■ modèle est le modèle de progression de l’animation (swing ou linear).
■■ function() est la fonction de callback. Ses instructions seront exécutées lorsque
l’animation sera terminée.
À titre d’exemple, nous allons utiliser la fonction animate() pour déplacer une balise
<div> afin de lui faire décrire un carré de 200 pixels de côté. Voici le code utilisé :
<!DOCTYPE html>
<html>
232 Chapitre 13
<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 l’utilisateur clique sur le bouton :

Quatre animations s’enchaînent en modifiant progressivement les propriétés top et

left de la balise <div> via la fonction animate(). Par exemple, la première animation
déplace la balise <div> de son emplacement par défaut (20 pixels du bord gauche) à
250 pixels du bord gauche :
Différer une animation

La fonction delay() permet de différer l’exécution d’une animation. Il suffit de préciser
le délai d’attente en millisecondes dans les parenthèses. Par exemple, pour marquer une
pause d’une seconde entre chacun des déplacements de l’animation précédente, vous
chaînerez à plusieurs reprises les fonctions animate() et delay() :

.delay(1000)
.animate({top: '250px'})
.delay(1000)
.animate({left: '50px'})
.delay(1000)
.animate({top: '50px'});
});
Mettre en place un timer

Il est parfois nécessaire de répéter un traitement à intervalles réguliers. En utilisant le
langage JavaScript, quelques instructions suffiront. Définissez le code à exécuter dans
une fonction et utilisez la fonction setInterval() pour faire référence à cette fonction
en indiquant la périodicité de l’exécution. Voici le code à utiliser :
function bis(){
//Une ou plusieurs instructions
}
setInterval(bis,période en ms);
Supposons que vous vouliez afficher la date et l’heure système dans une page Web.
Pour cela, la fonction setInterval() est tout indiquée. Il suffira en effet d’écrire les
instructions nécessaires à l’affichage de l’heure toutes les secondes et de lancer cette
fonction toutes les secondes.
Avant de passer au code, vous devez savoir que l’heure système est accessible en
définissant une variable JavaScript de type Date et en lui appliquant les fonctions
getHours(), getMinutes() et getSeconds() pour récupérer les heures, les
minutes et les secondes. Voici le code à utiliser :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Horloge élémentaire</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();
234 Chapitre 13
if (s<10) s = "0" + s;
$('#heure').html(h + ' : ' + m + ' : ' + s);
}
setInterval(horloge,1000);
});
</script>
</body>
</html>
La fonction horloge() commence par créer un objet Date. Elle définit 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
affichées avec deux chiffres, la valeur des variables h, m et s est testée. En fonction
du résultat, un "0" vient éventuellement préfixer la composante h, m et/ou s. L’heure
système est enfin affichée dans la balise d’id heure à l’aide d’une instruction jQuery (voir
Figure 13.15) :
$('#heure').html(h + ' : ' + m + ' : ' + s);
Figure 13.15
L’heure est bien
affichée au
format HH:MM:SS.

Exercice 15
Dans cet exercice, vous allez ajouter un slider à la page apropos.php, à droite de la
vidéo. Pour cela, vous utiliserez cinq images de mêmes dimensions, nommées slider1.jpg
à slider5.jpg et accessibles à ces adresses (voir Figure 13.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 créer une image unique contenant les cinq
images mises bout à bout. Vous appellerez cette image slider.jpg (voir Figure 13.17).
Figure 13.17
Les cinq images ont été placées les unes derrière les autres.
Les images slider1.jpg à slider5.jpg ont une taille égale à 600 × 250 pixels.
L’image slider.jpg doit donc avoir une taille égale à 3 000 × 250 pixels. Pour obtenir l’effet
recherché, vous décalerez l’image vers la gauche de 600, 1 200, 1 800 puis 2 400 pixels.
J’en ai bien assez dit. Je vous suggère donc de vous mettre au codage sans plus attendre.
236 Chapitre 13
14
Mise à jour
avec AJAX
Ce chapitre va s’intéresser à une technique de programmation impressionnante : AJAX.
Avec quelques instructions jQuery, vous allez pouvoir mettre à jour une portion d’une
page Web sans toucher au reste de la page. Les applications de cette technique sont
aussi nombreuses qu’exaltantes ! Vous pourrez, par exemple, réaliser un chat, afficher le
nombre de visiteurs connectés à votre site ou encore les cours de la Bourse…
Charger un fichier
Pour mettre à jour un élément sur une page Web en utilisant des données stockées sur
un serveur, le plus simple consiste à utiliser la méthode jQuery load() :
load('URL de l’élément', function() {
//une ou plusieurs instructions exécutées après le chargement des données
});
La fonction de callback est facultative. Si elle est présente, les instructions qui la
composent seront exécutées lorsque le fichier aura été entièrement rapatrié par la
méthode load().
À titre d’exemple, ce document HTML contient deux boutons et un élément div. Le
premier bouton va être utilisé pour afficher un texte dans l’élément div et le deuxième
pour afficher une image dans ce même élément :
<!DOCTYPE html>
<html>
<head>
<title>Chargement AJAX avec load()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-style: solid;
border-width: 3px;
}
</style>
</head>
<body>
<button id="charge-texte">Charger le texte</button>
<button id="charge-image">Charger l’image</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 n’étant spécifiée dans les paramètres
de la méthode load(), cette dernière se contente de charger les fichiers HTML
correspondants et de les afficher dans l’élément div.
Voici le code du fichier 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 fichier image.htm :

<p><img src="chat.jpg"></p>
La Figure 14.1 présente le résultat obtenu suite au clic sur le premier bouton.
238 Chapitre 14
Figure 14.1
Seul le contenu du
<div> a été mis
à jour lorsque le
bouton a été cliqué.
$.get()
La méthode load() n’est pas la seule à pouvoir récupérer des données via AJAX. Vous
pouvez également utiliser :
■■ la fonction jQuery $.get() pour obtenir des données envoyées par le serveur en
utilisant une requête HTTP GET ;
■■ la fonction jQuery $.post() pour obtenir des données envoyées par le serveur en
utilisant une requête HTTP POST.
Vous utiliserez la fonction $.get() si les données envoyées au serveur sont de petite
taille. Vous utiliserez la fonction $.post() si les données envoyées au serveur sont de
grande taille et/ou contiennent des informations confidentielles (un mot de passe, par
exemple).
Voici la syntaxe de la fonction $.get() :
$.get(URL, function() {
// Une ou plusieurs instructions exécutées lorsque les données ont été
➥rapatriées
});
À titre d’exemple, nous allons exécuter un fichier PHP afin d’extraire les données qui y
sont stockées. Ces données correspondent aux trois lois de la robotique d’Isaac Asimov.
L’URL passée sera du type suivant :
donnees?l=1 // pour obtenir la première loi
donnees?l=2 // pour obtenir la deuxième loi
donnees?l=3 // pour obtenir la troisième loi
Mise à jour avec AJAX 239

Voici le code du fichier PHP :
<?php
$loi = array("Un robot ne peut porter atteinte à un être humain, ni, restant
➥passif, permettre qu’un être humain soit exposé au danger.",
"Un robot doit obéir aux ordres que lui donne un être humain, sauf
➥si de tels ordres entrent en conflit avec la Première loi.",
"Un robot doit protéger son existence tant que cette protection
➥n’entre pas en conflit avec la Première ou la Deuxième loi.");
$l=$_GET["l"];
echo "<u>Loi de la robotique N° ".$l."</u><br><br>";
echo "<b>".$loi[$l-1]."</b>";
?>
Les premières lignes définissent le tableau $loi et y mémorisent les trois lois de la
robotique.
La valeur passée dans l’URL est récupérée et stockée dans la variable $l :
$l=$_GET["l"];
L’instruction suivante affiche un texte souligné :

Et la dernière instruction affiche la loi extraite du tableau $loi :

echo "<b>".$loi[$l-1]."</b>";
Voici le code HTML5/jQuery :

<!DOCTYPE html>
<html>
<head>
<title>Requête 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(){
240 Chapitre 14
$.get('donnees.php?l=1',function(data){
$('#zone').html(data);
});
});
});
});
});
});
});
</script>
</body>
</html>
Le corps du document définit un titre h2, trois boutons et un élément div d’id #zone.
<button id="loi3">Loi N° 3</button><br/>
Lorsque le premier bouton est cliqué, une requête GET est effectuée sur l’URL
http://www.mediaforma.com/eformation/donnees.php?l=1 :
Lorsque les données ont été rapatriées, la fonction callback s’exécute. Les données
récupérées sont affichées dans l’élément div #zone :
Les deux autres boutons ont un comportement similaire, à ceci près qu’ils envoient
(respectivement) les paramètres l=2 et l=3 au programme PHP. Ceci afin d’afficher la
deuxième et la troisième loi de la robotique.
La Figure 14.2 représente le résultat obtenu lorsque l’utilisateur clique sur le premier
bouton.

Figure 14.2
La première loi
est affichée dans
le <div> suite au
clic sur le premier
bouton.
Cet exemple est accessible à partir de l’URL www.mediaforma.com/eformation/get.htm.
$.post()
Dans l’exemple précédent, les paramètres passés apparaissaient dans l’URL. Pour garder
les paramètres secrets ou pour passer des données de taille importante, vous utiliserez
une requête POST.
Voici la syntaxe de la fonction $.post() :
$.post(URL, {donnée1: 'valeur1', donnée2: 'valeur2',…}, function() {
// Une ou plusieurs instructions exécutées lorsque les données ont été
➥rapatriées
});
Ici, les données sont passées dans le deuxième paramètre de la fonction $.post().
Nous allons modifier le code du programme précédent pour accéder aux données via
une requête POST.
L’URL interrogée aura pour nom "donneesPost.php". Une seule donnée nommée "l" sera
communiquée. Elle aura pour valeur 1, 2 ou 3 selon la loi à afficher.
Le programme PHP est légèrement différent :
<?php
$loi = array("Un robot ne peut porter atteinte à un être humain, ni, restant
➥passif, permettre qu’un être humain soit exposé au danger.",
"Un robot doit obéir aux ordres que lui donne un être humain, sauf
➥si de tels ordres entrent en conflit avec la Première loi.",
"Un robot doit protéger son existence tant que cette protection
➥n’entre pas en conflit avec la Première ou la Deuxième loi.");
$l=$_POST["l"];
242 Chapitre 14
echo "<b>".$loi[$l-1]."</b>";
?>
Le code HTML5/jQuery est également légèrement différent :

<!DOCTYPE html>
<html>
<head>
<title>Requête 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 résultat est bien entendu le même que pour la requête $.get() (voir Figure 14.3).

Figure 14.3
Ici, le deuxième
bouton a été cliqué.
$.ajax()
La fonction $.ajax() permet d’émettre des requêtes AJAX. Elle admet de très nombreux
paramètres. 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 l’une des syntaxes de la fonction $.ajax() :
$.ajax(options);
Où options peut contenir les éléments suivants :

■■ type : type de la requête, GET ou POST (GET par défaut).
■■ url : adresse à laquelle la requête doit être envoyée.
■■ data : données à envoyer au serveur.
■■ dataType : type des données qui doivent être retournées par le serveur (xml, html,
script, json, text).
■■ success : fonction à appeler si la requête aboutit.
■■ error : fonction à appeler si la requête n’aboutit pas.
■■ timeout : délai maximal (en millisecondes) pour que la requête soit exécutée. Si ce
délai est dépassé, la fonction spécifiée dans le paramètre error sera exécutée.
À titre d’exemple, nous allons réécrire les programmes get.htm et post.htm pour utiliser la
fonction $.ajax() à la place des fonctions $.get() et $.post().
244 Chapitre 14
Requête GET via la fonction $.ajax()
Voici l’équivalent du code get.htm réécrit en utilisant la fonction $.ajax() :
<!DOCTYPE html>
<html>
<head>
<title>Requête 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 requête AJAX n\'a pas abouti');
}
});
});
$.ajax({
type: 'GET',
timeout: 3000,
},
error: function(){

}
});
});
$.ajax({
type: 'GET',
timeout: 3000,
},
error: function(){
}
});
});
});
</script>
</body>
</html>
Le code est bien plus "verbeux" qu’avec la fonction $.get(), mais il est aussi très simple
à comprendre, facile à maintenir et plus complet. Ici, nous avons introduit un message
d’erreur si la requête n’aboutit pas :
error: function(){
}
Ce code est accessible ici : www.mediaforma.com/eformation/getAjax.htm (voir

Figure 14.4).
Figure 14.4
Le troisième bouton
a été cliqué.
246 Chapitre 14
Requête POST via la fonction $.ajax()
Voici l’équivalent du code post.htm (voir la section intitulée "$.post()") réécrit en
utilisant la fonction $.ajax() :
<!DOCTYPE html>
<html>
<head>
<title>Requête 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,

},
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 requêtes AJAX sur votre site. Un
petit exercice va confirmer vos acquis.
248 Chapitre 14
Exercice 16
En utilisant une requête AJAX, affichez le cours du CAC 40 dans la page principale du
site index.htm. Le but recherché est représenté à la Figure 14.5.
Figure 14.5
Le cours du CAC 40 est affiché dans la balise <article>.
Pour arriver à ce résultat, vous ferez appel au programme litCac40.php dont voici le code :
<?php
$path = "http://download.finance.yahoo.com/d/quotes.csv?s=%5EFCHI&f=l1";
$yahooquote = fopen($path, "r");
$line = fgets($yahooquote); // Récupération du CAC 40
echo "<br /><br />Le CAC 40 vaut ".$line. "points."; // Affichage
fclose($yahooquote);
?>
Ce programme se trouve à l’adresse www.mediaforma.com/eformation/exercice16/

litCac40.php. Il utilise le serveur Yahoo Finance pour récupérer et afficher la valeur du
CAC 40.

15
Mise en ligne
d’un site
Vous êtes maintenant arrivé au terme de votre apprentissage. Quel chemin parcouru !
Vous êtes désormais capable de définir vos propres pages Web en y incluant du code
HTML5, CSS3 et jQuery. Pour l’instant, 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 hébergeur
Pour que votre site soit accessible sur le Web, vous devez choisir un hébergeur
de sites. De très nombreux hébergeurs sont présents, tant en France qu’à
l’étranger. Pour vous aider dans votre choix, vous pouvez consulter des annuaires
d’hébergement, comme www.hebergementweb.org, www.guide-hebergeur.fr ou
www.10meilleurshebergementsweb.fr. Ces annuaires sont à prendre "avec précaution",
mais ils vous aideront à débroussailler le terrain…
Pour commencer, vous devrez choisir le type de l’hébergement : dédié ou mutualisé. Dans
un hébergement dédié, un serveur Web est entièrement alloué à votre site. En revanche,
dans un hébergement mutualisé, votre site partage un serveur avec d’autres sites. Dans
la plupart des cas, un hébergement mutualisé est largement suffisant. Si la réactivité de
ce type d’hébergement peut être inférieure à celle d’un serveur dédié (vous partagez en
effet la bande passante, le processeur, la mémoire et les accès disque avec les autres
sites), le prix de l’hébergement peut être divisé par dix ou plus ! Personnellement, j’utilise
un hébergement mutualisé pour tous mes sites. Certains hébergent des vidéos, d’autres
uniquement du texte et des images. Certains totalisent 100 à 200 visiteurs uniques par
jour, d’autres 1 000 à 1 500. Pour l’instant, aucun utilisateur ne s’est plaint de la lenteur de
mes sites. Je vous conseille donc d’opter pour un hébergement mutualisé. Vous pourrez
toujours faire évoluer votre compte vers un hébergement dédié si le besoin s’en fait
sentir.
Le serveur Web peut fonctionner sous Linux ou sous Windows. Pour choisir le système le
mieux adapté à vos besoins, posez-vous les questions suivantes :
1. Avez-vous l’intention de programmer en PHP ou en Perl et/ou d’associer votre site à
une base de données MySQL ?
2. Allez-vous utiliser des outils de développement Microsoft, tels que Visual Studio, pour
développer des sites ASP ?
Dans le premier cas, Linux est le choix qui s’impose. Dans le second, une seule solution,
vous devez opter pour un serveur ASP. Enfin, si vous n’avez aucune réponse à ces
questions et/ou si vous ne comprenez pas leur signification, décidez-vous pour un serveur
Linux. Il offrira autant de fonctionnalités que son confrère Windows à un coût inférieur.
Créer un nom de domaine

Personnellement, j’utilise l’hébergeur OVH dont je suis satisfait, mais rien ne vous
empêche de choisir un autre hébergeur, 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 n’est pas déjà pris !
Sur OVH, par exemple, il suffit d’entrer un nom de domaine pour connaître sa disponibilité
pendant la frappe (voir Figure 15.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 procédure de
réservation de nom de domaine. Quelques instants après avoir créé votre nom de domaine
et réservé un espace chez un hébergeur, vous recevez un e-mail qui vous informe que
votre espace sera actif dans un délai d’environ 24 à 48 heures (voir Figure 15.2).
252 Chapitre 15
Figure 15.2
Le nom de domaine
sera créé sous peu.
Vous devrez donc vous armer de patience et attendre jusqu’à l’activation de votre espace.
Cet e-mail contient également :
1. Les informations permettant d’accéder à votre espace client : votre nom d’utilisateur
et votre mot de passe.
2. Les informations permettant d’accéder à la messagerie associée à votre nom de
domaine.
3. Les codes nécessaires pour vous connecter à votre espace en FTP : le nom du serveur
FTP, le login et le mot de passe.
Ces informations seront nécessaires pour transférer vos fichiers dans votre espace.
Transférer les fichiers en FTP

Pour transférer vos fichiers dans votre espace, vous devez utiliser un client FTP. Je vous
conseille l’excellent FileZilla, librement téléchargeable à l’adresse http://filezilla-project.org/.
Cliquez sur Download FileZilla Client, puis sur un des liens proposés sous Windows, et
installez FileZilla.
Mise en ligne d’un site 253

Figure 15.3
Le client FileZilla
est sur le point
d’être téléchargé.
Vous allez maintenant uploader vos fichiers 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 boîte de dialogue intitulée Gestionnaire de sites s’affiche.
Cliquez sur Nouveau site. Entrez le nom de votre site et appuyez sur Entrée. Ce nom n’a
aucune importance en soi : il sert simplement à identifier votre espace Web.
Reportez-vous à l’e-mail qui vous a été envoyé par votre hébergeur. Vous y trouverez les
informations permettant d’accéder à votre espace FTP (voir Figure 15.4).
Figure 15.4
Toutes les informations
nécessaires sont
contenues dans l’e-mail de
l’hébergeur.
254 Chapitre 15
Plusieurs informations sont nécessaires pour établir une connexion FTP avec votre
espace Web :
■■ Entrez le nom du serveur FTP dans la zone de texte Hôte.
■■ Choisissez Normale dans la liste déroulante Type d’authentification.
■■ Entrez votre Login FTP dans la zone de texte Identifiant et votre mot de passe FTP
dans la zone de texte Mot de passe (voir Figure 15.5).
Figure 15.5
L’accès au serveur
FTP est maintenant
paramétré.
Ces informations entrées, cliquez sur OK pour fermer la boîte 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 créer dans la zone de liste
Sélectionnez une entrée.
Votre espace Web apparaît dans le volet droit de la fenêtre de FileZilla et les mémoires
de masse de l’ordinateur dans le volet gauche. Sélectionnez un à un les fichiers à placer
sur le serveur FTP dans le volet gauche et déposez-les dans le volet droit en utilisant la
technique du glisser-déposer de Windows (voir Figure 15.6).
Mise en ligne d’un site 255

Figure 15.6
Il suffit de déposer les
fichiers à uploader dans
le volet droit.
Supposons que votre nom de domaine soit www.monsiteamoi.eu. Si vous uploadez le fichier
album-photo.htm à la racine du site, il sera accessible à l’adresse www.monsiteamoi.eu/
album-photo.htm.
Cette fois-ci, cet ouvrage est bel et bien terminé. J’espère que vous y avez appris
beaucoup de choses, et je vous souhaite beaucoup de succès avec vos sites Web.
256 Chapitre 15
Index
Symboles A
: a 27, 54
empty 154 a:visited 54
first-child 31 abort 192
first-letter 32 absolute 164, 169
first-line 32 afterprint 185
focus 32, 184 AJAX 237, 249
invalid 132 charger un fichier 237
lang 32 Album photos 85
link 31 Alias 37
valid 132 alt 75
visited 31 animate() 232
# 32 Animations 211
$() 4, 37 en jQuery 226
$.ajax() 244, 245, 247 personnalisées 232
$.get() 239 Apparition 228
$.post() 242 Arrière-plan d'un conteneur 77
<figcaption> 78 Arrondis 89
<figure> 78 article 163
@font-face 50 ASCII 29
-khtml 5 aside 163
<link> 14 attr() 40
@media 177 Attributs des caractères 49
-moz 5 audio 201
-ms 5 jQuery 203
22 autofocus 124
-o 5
<span> 191 B
-webkit 5
b 24
background:url 150
Index 257
background-color 59, 150 modification progressive 224
background-image 47 Créer un nom de domaine 252
background-position 47 css() 39
background-repeat 47 CSS 2, 29
Balises 3 dans les balises 13
beforeonload 185 feuille de styles externe 14
beforeprint 185 feuille de styles interne 13
Bibliothèque jQuery 7, 16 vs HTML 15
block 43, 159, 160 CSS3 12
blur 185, 190 préfixe 5
body 21 cursive 47
BOM 9
border 75 D
border-collapse 145
datalist 117
border-radius 93
Date 234
border-spacing 146
dblclick 188
box-shadow 89
dd 44
br 22
Déclaration de type de document 4
Byte Order Mark 9
delay() 233
C Détecter l'inclinaison d'un appareil 197
DeviceOrientationEvent 196
CAC 40 249 dfn 44
callback 228 Différer une animation 233
canplay 192 Disparition 228
canplaythrough 192 display 79
Centrer une image dans un conteneur 79 DOCTYPE 4
change 190 Document Object Model 4
Changements d'échelle 216 Documents, organisation 160
Charset 9 DOM 4
checked 34 drag 188
Choisir un hébergeur 251 dragend 188
Chrome 7 dragenter 188
class 30, 75 dragleave 188
Classe 30 dragover 188
Clavier, événements 187 dragstart 188
click 188 drop 188
Code dt 44
multifichier 19 DTD 4
tout en un 19 durationchange 192
Code ASCII 29
color 59 E
color-stop 70
edits 160
colspan 147
Éléments 3
Compatibilité 4
arrondir 93
contains 34
audio 201
contextmenu 190
em 24
Corps du document 21
embedded content 160
Couleur
emptied 192
d'arrière-plan 59
empty 34
des éléments 59
enabled 34
du texte 59
258 Index
enctype 121 font-style 49
ended 192 font-variant 50
error 186, 192 font-weight 49
Événements footer 163
clavier 187 formchange 191
formulaires 190 forminput 191
médias 192 forms 160
orientation 196 Formulaires 113
souris 188 de login 118
Exercices d'envoi de fichier 121
1 42 de saisie de commentaires 120
2 57 éléments 116
3 72 envoi par e-mail 114
4 88 événements 190
5 97 FTP 253
6 111
7 137 G
8 138
9 157
en CSS 184
10 181
en HTML 183
11 181
en jQuery 185
12 181
getHours() 234
13 199
getMinutes() 234
14 209
getSeconds() 234
15 236
Google Chrome 7
16 249
gradient 62, 65, 67
Expression régulière 129
Gradient
F diagonal 65
horizontal 64
fadeIn() 231 linaire multiple 65
fadeOut() 231 linéaire 62
fantasy 47 radial 67
Fenêtre à deux couleurs 67
événements 185 multiple 70
Feuille de styles 4 restreint 69
externe 12, 14 vertical 63
interne 12, 13 grouping content 160
fFormulaire
définir 113 H
fieldset 116
h1 23
FileZilla 253
h6 23
Firefox 6
haschange 186
first-of-type 33
header 163
fixed 164, 165
Hébergeur 251
float 72, 170
height 75
focus 186, 191
hide() 228
Focus 124
Horloge 235
Fondu enchaîné 231
html() 38
font-family 47
HTML 2
font-size 48
commentaires 11
Font Squirrel 52
Index 259
validation 11 L
html5test 4
label 116
I Langue
de traitement 10
i 24 du document 9
id 28, 75 primaire 10
Images 75 last-child 33
alt 75 last-of-type 34
border 75 legend 116
class 75 Légendes 78
empiler 82 li 25
height 75 Liens
id 75 e-mail 29
insérer 75 hypertexte 27, 54
légender 78 vers un fichier 29
liens hypermédia 78 linear-gradient 62, 65
préchargement 83 Link 13
réactives 84 Listes
survol 81 à puces 25
title 75 HTML 44
width 76 numérotées 25
img 75 personnaliser 45
img:hover 81 list-style-image 45
Inclinaison 197, 219 list-style-type 34, 45
inline 43, 159, 160 load 186
inline-block 159, 160 load() 237
input 191 loadeddata 192
input:required 129 loadedmetadata 193
input type= 116, 117 loadstart 193
Insérer une image 75 localStorage 134
interactive elements 160
Internet Explorer 9 5 M
invalid 191
ISO-8859-1 9 Marges 175
margin 175
J mark 25
Matrices 220
jQuery 3, 7, 37 matrix 222
chaînage 41 Media Queries 177
enchaîner plusieurs disparitions/ Médias, événements 192, 196
apparitions 229 menu 99
sélecteur CSS 37 Menus 99
sélecteurs spécifiques 38 déroulant 103
horizontal 109
K vertical 106
keydown 187 horizontal 100
keypress 187 vertical flottant 99
keyup 187 message 186
Konqueror 5 Meta 9, 10
metadata 160
Midori 5
260 Index
Mise en forme 15 ondragstart 188
Mise en ligne d'un site 251 ondrop 188
Mise en page 159 ondurationchange 192
sur plusieurs colonnes 172 onemptied 192
monospace 47 onended 192
mousedown 188 onerror 186, 192
mousemove 189 onfocus 186, 191
mouseout 189 onformchange 191
mouseout() 82 onforminput 191
mouseover 189 onhaschange 186
mouseover() 82 oninput 191
mouseup 189 oninvalid 191
mousewheel 189 onkeydown 187
Mozilla 5 onkeypress 187
MP4 205 onkeyup 187
Multicolonnage 172 online 186
multipart/form-data 121 onload 186
onloadeddata 192
N onloadedmetadata 193
onloadstart 193
nav 163
only-child 34
Nom de domaine 252
only-of-type 34
not 34
onmessage 186
Notepad++ 6, 7
onmousedown 188
nth-child 33
onmousemove 189
nth-last-child 33
onmouseout 189
nth-last-of-type 33
onmouseover 189
nth-of-type 33
onmouseup 189
onmousewheel 189
O
onoffline 186
offline 186 ononline 186
Ogg Theora 205 onpagehide 186
ol 26 onpageshow 186
Ombrages 89 onpause 193
Omni Web 5 onplay 193
onabort 192 onpopstate 186
onafterprint 185 onprogress 193
onbeforeonload 185 onratechange 193
onbeforeprint 185 onreadystatechange 193
onblur 185, 190 onredo 186
oncanplay 192 onresize 186
oncanplaythrough 192 onscroll 189
onchange 190 onseeked 193
onclick 188 onseeking 193
oncontextmenu 190 onselect 191
ondblclick 188 onstalled 193
ondrag 188 onstorage 186
ondragend 188 onsubmit 191
ondragenter 188 onsuspend 193
ondragleave 188 ontimeupdate 193
ondragover 188 onundo 186
Index 261
onunload 186 Rendu 160
onvolumechange 193 required 127
onwaiting 193 resize 186
opacity 225 Responsive Web Design 177
Opera 5 RGB 59
option 117 RGB() 60
output 117 RGBA 59
RGBA() 61
P root 33, 160
Rotations 214
p 23
rowspan 147
padding 94, 175
padding-left 47 S
pagehide 186
pageshow 186 Safari 5
Pages Web, optimiser 179 sans-serif 47
Paragraphes 23 scale 216
pause 193 scaleX 218
play 193 scaleY 218
Polices 47 scripting 160
libres de droits 52 scroll 189
popstate 186 sections 160
position 164 seeked 193
Positionnement seeking 193
absolute 169 select 117, 191
fixed 165 Sélecteurs
relative 167 CSS 30, 32
static 165 de classe 30
Préfixes 5 évolués 33
CSS3 5 hiérarchiques 33
progress 193 selection 34
Propriétés, modification progressive 224 serif 47
Pseudo-classes 31 setInterval() 234
first-child 31 show() 228
focus 32 Site Web 1
hover 32 skew 219
lang 32 small 25
link 31 Sondage 123
visited 31 Souris, événements 188
Pseudo-éléments Squelette standard 7, 10
first-letter 32 stalled 193
first-line 32 static 164, 165
Stockage local de données 113, 134
R storage 186
strong 24
radial-gradient 67
Styles, feuille de styles interne 13
ratechange 193
submit 191
readystatechange 193
suspend 193
Recommandation candidate 5
redo 186 T
Référencement 10
relative 164, 167 table 141
262 Index
Tableaux 141 matrice 220
ajouter une légende 149 transition 223
alignement dans les cellules 152 Transitions 211, 223
arrière-plan des cellules 150 Translations 211
arrondis et ombrages 155 Transparence
bordures 144 et opacité 61
fusionnées 145 modification progressive 225
séparées 145
cellules vides 154 U
définir 141, 142
u 25
espacer les cellules 146
ul 25
fusionner des cellules 147
undo 186
lignes paires et impaires 153
unload 186
tabular data 160
UTF-8 9
Tags 3
Taille des caractères 48
V
target 34
text-align 152 Validation
textarea 117 d'adresses URL 128
text-decoration 49, 55 de données 127
Texte, ombrage 92 d'e-mails 128
text-indent 50 du code 11
text-level semantics 160 par une expression régulière 129
text-shadow 92 validator.nu 11
text-transform 49 vertical-align 79, 152
Timer 234 video 193, 205
timeupdate 193 jQuery 207
title 75 volumechange 193
Title 10
Titre du document 10 W
Titres et sous-titres 23
tr:nth-child() 153 waiting 193
Transférer les fichiers en FTP 253 Webkit 5
transform 211, 216, 219, 222 WebM 205
Transformations 211 width 76
animer 225
échelle 216
Z
inclinaison 219 z-index 82
Index 263

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

Michel Martin

2. Premiers pas en HTML, CSS et jQuery..................................................... 21

3. Éléments textuels ........................................................................................43

4. Couleur des éléments.................................................................................59

Table des matières III

8. Formulaires et stockage local de données .............................................113

IV Table des matières

10. Mise en page ............................................................................................ 159

11. Gestion événementielle........................................................................... 183

Table des matières V

13. Transformations, transitions et animations...........................................211

14. Mise à jour avec AJAX ............................................................................237

15. Mise en ligne d’un site ............................................................................ 251

VI Table des matières

Les sources de l’ouvrage

Mais, au fait, qu’est-ce qu’un site Web ?

Qu’apporte chaque langage ?

Vocabulaire et conventions d’écriture

Les outils de développement

Où chemin représente le chemin complet permettant d’accéder à la bibliothèque jQuery.

Votre première page HTML avec

La balise <!DOCTYPE> indique qu’il s’agit d’une page développée en HTML5.

– Dans le document, par l’intermédiaire d’un élément meta :

Squelette standard HTML5

Des commentaires dans le code

Valider le code HTML

Premier contact avec le langage CSS3

Où écrire le code CSS ?

Feuille de styles interne

Voici la syntaxe permettant d’affecter des propriétés à une balise :

Feuille de styles externe

Un document HTML y fera référence avec les instructions suivantes :

Pourquoi préférer CSS à HTML pour la

Un exemple de code CSS

Voici le code de la feuille de styles moncss.css :

Ici, nous définissons les caractéristiques de la liste à puces :

Premier contact avec jQuery

Où écrire le code jQuery ?

Fort heureusement, cette syntaxe peut être simplifiée :

Un grand pas en avant a été franchi !

Que peut apporter jQuery à un document HTML ?

Un exemple de code jQuery

Et que ce <span> est modifié avec une instruction jQuery :

HTML, CSS et jQuery : deux approches

Le code, en version tout en un

Le code, en version multifichier

Voici le code CSS, stocké dans le fichier css-seul.css :

Voici le code jQuery, stocké dans le fichier jquery-seul.js :

Les bases du HTML

Textes, sauts de ligne et paragraphes

plusieurs lignes et de multiples espaces

Titres et sous-titres sur une page

Premiers pas en HTML, CSS et jQuery 23

Mettre en valeur du texte avec des balises HTML

Listes à puces et listes numérotées

Premiers pas en HTML, CSS et jQuery 25

Premiers pas en HTML, CSS et jQuery 27

Les ancres haut et bas sont définies au début et à la fin du document :

Autres types de liens

Les bases du CSS

Premiers pas en HTML, CSS et jQuery 29

Modification de toutes les occurrences d’une balise

Modification de certaines occurrences d’une balise