html5-css3-jquery de Michel Martin.pdf

HTML5, CSS3 & jQuery

Michel Martin

Table des matières III

Table des matières

Introduction ......................................................................................................VIILes sources de l’ouvrage .................................................................................................................VIISite compagnon ..................................................................................................................................VIIRubriques spéciales de ce livre .................................................................................................... VIIIJoindre l’auteur ................................................................................................................................. VIII

1. Avant de commencer......................................................................................1Mais, au fait, qu’est-ce qu’un site Web ? ......................................................................................... 1Qu’apporte chaque langage ? .........................................................................................................2Vocabulaire et conventions d’écriture ............................................................................................3Compatibilité HTML5/CSS3 ...............................................................................................................4Les outils de développement ............................................................................................................6Votre première page HTML avec Notepad++ ............................................................................... 7Premier contact avec le langage CSS3 ........................................................................................ 12Pourquoi préférer CSS à HTML pour la mise en forme ? ......................................................... 15Premier contact avec jQuery ........................................................................................................... 16HTML, CSS et jQuery : deux approches ....................................................................................... 18

2. Premiers pas en HTML, CSS et jQuery ..................................................... 21Les bases du HTML ........................................................................................................................... 21Les bases du CSS .............................................................................................................................. 29Les bases de jQuery ..........................................................................................................................37Exercice 1 ............................................................................................................................................. 42

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

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

IV Table des matières

Transparence et opacité des éléments ........................................................................................ 61Gradient linéaire ................................................................................................................................ 62Gradient radial .....................................................................................................................................67Exercice 3 .............................................................................................................................................72

5. Images ..........................................................................................................75Insérer une image dans une page .................................................................................................75Une image en arrière-plan d’une page ........................................................................................76Une image en arrière-plan d’un conteneur .................................................................................77Utiliser une image comme lien hypermédia ................................................................................78Légender une image .........................................................................................................................78Centrer une image dans un conteneur ........................................................................................79Modifier les caractéristiques d’une image lorsqu’elle est survolée ...................................... 81Empiler des images .......................................................................................................................... 82Préchargement d’images ................................................................................................................ 83Images réactives ................................................................................................................................ 84Album photos ..................................................................................................................................... 85Exercice 4 ............................................................................................................................................ 88

6. Ombrages et arrondis .................................................................................89Ombrer des objets non textuels .................................................................................................... 89Ombrer des objets textuels ............................................................................................................ 92Arrondir les coins d’un élément de type block .......................................................................... 93Exercice 5 .............................................................................................................................................97

7. Menus ............................................................................................................99Menu vertical flottant en HTML5 ................................................................................................... 99Menu horizontal en HTML5 ...........................................................................................................100Amélioration du menu avec quelques propriétés CSS ..........................................................102Menu déroulant .................................................................................................................................103Exercice 6 ............................................................................................................................................. 111

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

Table des matières V

9. Tableaux ......................................................................................................141Définir un tableau en HTML ............................................................................................................ 141Définir un tableau en CSS .............................................................................................................. 142Bordures autour des cellules ........................................................................................................ 144Fusionner et séparer des bordures ............................................................................................ 145Espacer les cellules ......................................................................................................................... 146Fusionner des cellules .................................................................................................................... 147Ajouter une légende au tableau ................................................................................................... 149Arrière-plan des cellules .................................................................................................................150Alignement dans les cellules.........................................................................................................152Différencier lignes paires et lignes impaires ............................................................................. 153Mise en forme des cellules vides ................................................................................................. 154Arrondis et ombrages .....................................................................................................................155Exercice 9 ........................................................................................................................................... 157

10. Mise en page ............................................................................................ 159inline, block ou les deux ?.............................................................................................................159Nouvelle organisation des documents .......................................................................................160Positionner les éléments affichés sur une page ...................................................................... 164Faire flotter un élément .................................................................................................................. 170Mise en page sur plusieurs colonnes ......................................................................................... 172Marges ................................................................................................................................................ 175Responsive Web Design (Media Queries CSS) ........................................................................ 177Optimiser les pages d’un site Web .............................................................................................. 179Exercice 10 .......................................................................................................................................... 181Exercice 11............................................................................................................................................ 181Exercice 12 .......................................................................................................................................... 181

11. Gestion événementielle ........................................................................... 183Gestion événementielle en HTML ............................................................................................... 183Gestion événementielle en CSS .................................................................................................. 184Gestion é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 .....................................................................................................196Exercice 13 ..........................................................................................................................................199

VI Table des matières

12. Multimédia ................................................................................................201Insérer un élément audio ...............................................................................................................201Piloter une balise <audio> en jQuery ......................................................................................203Insérer un élément vidéo ..............................................................................................................205Piloter une balise <video> en jQuery ......................................................................................207Exercice 14 .........................................................................................................................................209

13. Transformations, transitions et animations ...........................................211Transformations .................................................................................................................................211Transitions .........................................................................................................................................223Quelques animations classiques .................................................................................................228Animations personnalisées ...........................................................................................................232Différer une animation ...................................................................................................................233Mettre en place un timer ...............................................................................................................234Exercice 15 ........................................................................................................................................236

14. Mise à jour avec AJAX ............................................................................237Charger un fichier ............................................................................................................................ 237$.get() ...........................................................................................................................................239$.post() .........................................................................................................................................242$.ajax() .........................................................................................................................................244Exercice 16 ........................................................................................................................................249

15. Mise en ligne d’un site ............................................................................251Choisir un hébergeur ......................................................................................................................251Créer un nom de domaine ............................................................................................................252Transférer les fichiers en FTP .......................................................................................................253

Index ............................................................................................................... 257

Introduction VII

IntroductionVous 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’ouvrageLes é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 compagnonCet 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.

VIII Introduction

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’auteurUne 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.

1Avant 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.

2 Chapitre 1

Figure 1.1Cette 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.2La 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.

Avant de commencer 3

■ 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’écritureAvant 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

4 Chapitre 1

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/CSS3Alors 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.

Figure 1.3Comparaison 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>

6 Chapitre 1

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éveloppementPour 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.4Téléchargement de Notepad++.

FirefoxFirefox 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.


Google ChromeChrome 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 jQueryjQuery 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".

8 Chapitre 1

Code minimal en HTML5Voici 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.5Le 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).


Figure 1.6Les instructions sont colorées car Notepad++ connaît le langage utilisé.

Langue du documentLa 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.

10 Chapitre 1

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érencementLa 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 documentLe 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 HTML5Compte 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" />

12 Chapitre 1

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 CSS3Vous 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.


Styles CSS dans les balisesPour 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 interneDans 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.

14 Chapitre 1

À 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 externePour é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> <meta charset="UTF-8" /> <title>Une feuille de styles externe</title> <link rel="stylesheet" href="moncss.css" /> </head> <body>

</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 CSSCe 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> <meta charset="UTF-8" /> <title>Liste à puces avec style externe</title> <link rel="stylesheet" href="moncss.css" /> </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;

16 Chapitre 1

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.8Tous les éléments de la liste ont été affectés par la feuille de styles externe.

Premier contact avec jQueryArrivé à 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>


// 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 jQueryDans 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>

18 Chapitre 1

<head> <meta charset="UTF-8" /> <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 :

<span id="texte2"></span>

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

$('#texte2').html('... et celui-ci par 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.9HTML et jQuery cohabitent parfaitement.

HTML, CSS et jQuery : deux approchesDans 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 :

http://code.jquery.com/jquery.min.js



■ 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> <meta charset="UTF-8" /> <title>HTML, CSS et jQuery tout en un</title> <style type="text/css"> p {background-color: lime;} span {background-color: red;} </style> <script src=http://code.jquery.com/jquery.min.js></script> </head> <body> <p>Ce texte est affiché en HTML</p> <span id="texte2"></span> <script> $(function(){ $('#texte2').html('... et celui-ci par jQuery.'); }); </script> </body></html>

Le code, en version multifichierVoici le code HTML :

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>HTML seul</title> <link rel="stylesheet" href="css-seul.css"> <script src=http://code.jquery.com/jquery.min.js></script> </head> <body> <p>Ce texte est affiché en HTML</p> <span id="texte2"></span> <script src="jquery-seul.js"></script>





20 Chapitre 1

</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(){ $('#texte2').html('... et celui-ci par jQuery.');});

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.

2Premiers pas en

HTML, CSS et jQueryArrivé à 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 HTMLVous 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 paragraphesLes é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> <meta charset="UTF-8" /> <title>Espaces et sauts multiples</title> </head> <body>

22 Chapitre 2

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.1Les 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> <meta charset="UTF-8" /> <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.2Le navigateur se comporte bien… lorsqu’on lui parle correctement.

Premiers pas en HTML, CSS et jQuery 23

Pour terminer cette section, sachez que vous pouvez également utiliser la balise <p></p> pour 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.3Contrairement 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 pageLorsque 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> <meta charset="UTF-8" /> <title>Titres h1 à h6</title> </head> <body> <h1>Ceci est un titre h1</h1> <h2>Ceci est un titre h2</h2> <h3>Ceci est un titre h3</h3> <h4>Ceci est un titre h4</h4> <h5>Ceci est un titre h5</h5> <h6>Ceci est un titre h6</h6> </body></html>

24 Chapitre 2

Figure 2.4Les 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 HTMLSelon 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.5Visuellement, aucune différence entre b et strong ni entre i et em.


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.6D’autres formes de différenciation.

Listes à puces et listes numérotéesLes 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>

26 Chapitre 2

Figure 2.7Une 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.8Une 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> <li>Entrée secondaire 2</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> <li>Entrée secondaire 3</li> </ul> <li>Entrée principale 2</li> <li>Entrée principale 3</li></ol>


Figure 2.9Trois listes imbriquées.

Liens hypertexteLa 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.10Un clic suffit pour accéder au site de Microsoft France.

28 Chapitre 2

Lien vers une partie spécifique d’une pageLorsqu’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>


Figure 2.11Les deux liens sont bien fonctionnels, à condition que la fenêtre soit de taille réduite.

Autres types de liensLes 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:[email protected]">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:[email protected]?subject=Sujet%20du%20message&cc= ➥[email protected]&[email protected]">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 CSSLe 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…

30 Chapitre 2

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 baliseSupposons 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 :

<style type="text/css"> p { propriété1: valeur1; propriété2: valeur2; 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 baliseSupposons 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 :

<style type="text/css"> selecteur { propriété1: valeur1; propriété2: valeur2; 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>


Vous vous doutez que ce code ne suffit pas pour changer la couleur du texte : vous devez également écrire quelques lignes de CSS :

<style type="text/css"> .bleu {color: blue;} .rouge {color: red;}</style>

Figure 2.12Utilisation 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-classesLe 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}

32 Chapitre 2

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émentairesLe 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].


Sélecteurs hiérarchiquesTous 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ésVous 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

34 Chapitre 2

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’utilisationPour 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.


■ 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.

36 Chapitre 2

Figure 2.13Une liste numérotée et une liste à puces sans mise en forme.

Figure 2.14Les 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; }


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> <style type="text/css"> // Les règles de style sont définies ici </style></head>

Les bases de jQueryLa 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 jQueryLa 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');

38 Chapitre 2

Sélecteurs spécifiques jQueryTous 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 l’instruction suivante :

$('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émentLa 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).


Figure 2.15Toutes 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.16La 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).

40 Chapitre 2

Figure 2.17Le 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émentIl 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.18La fonction attr() permet de lire et de modifier la valeur d’un attribut.


À 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 jQueryLes 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.

42 Chapitre 242 Chapitre 2

Exercice 1

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frVous 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.19Le 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.

3Éléments textuels

Les balises permettant d’afficher du textePour 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>

44 Chapitre 3

Figure 3.1Les 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 HTMLDans 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.2Les mots du glossaire et les descriptions sont automatiquement mis en forme grâce aux balises <dfn>, <dt> et <dd>.

Éléments textuels 45

Personnaliser une listeDans 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> <meta charset="UTF-8" /> <title>Liste à puces</title> <style type="text/css"> 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>

46 Chapitre 3

Figure 3.3La 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> <meta charset="UTF-8" /> <title>Liste à puces</title> <style type="text/css"> 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>


</body></html>

Figure 3.4Les 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 textePour 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.

48 Chapitre 3

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èresLa 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).


Figure 3.5Termes techniques relatifs à la taille des polices.

Attributs des caractèresLa 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.

50 Chapitre 3

■ 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 conventionnellesDans 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)];}


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> <meta charset="UTF-8" /> <title>Police serveur</title> <style type="text/css"> @font-face { font-family: "Little Bird"; src: url("LittleBird.ttf"); } h1 {font-family: 'Little Bird';} </style> </head>

52 Chapitre 3

<body> <h1>Un titre en Little Bird</h1> </body></html>

Figure 3.6Le 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).


Figure 3.7La 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.8Le 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.9Les 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 */

54 Chapitre 3

@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.10Démonstration de l’utilisation de la police. Ici, dans Internet Explorer 11.

Mise en forme des liens hypertexteDans 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.


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> <meta charset="UTF-8" /> <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> <a href="http://www.page2.fr" class="type2">Lien vers la page 2</a> <a href="http://www.page3.fr" class="type3">Lien vers la page 3</a> <a href="http://www.page4.fr" class="type4">Lien vers la page 4</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).

56 Chapitre 3

■ 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');

Éléments textuels 57Éléments textuels 57

Exercice 2

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frDé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.11Le 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.

4Couleur des éléments

Couleur du texteLa 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émentLa 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").

60 Chapitre 4


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 RGBLa 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> <meta charset="UTF-8" /> <title>Fonction RGB()</title> <script src=http://code.jquery.com/jquery.min.js></script> <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>

Couleur des éléments 61

$(function(){ $('#jq1').css('color', 'rgb(255, 0, 0)'); $('#jq2').css('background-color', 'rgb(255, 255, 0)'); }); </script> </body></html>

Transparence et opacité des élémentsLa 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> <meta charset="UTF-8" /> <title>Fonction RGB()</title> <script src=http://code.jquery.com/jquery.min.js></script> <style style="text/css"> div { height: 200px; width: 200px; font-size: 40px; color: red; }

#div1 { background-color:rgba(0, 0, 200, 1); } #div2 { background-color:rgba(0, 0, 200, 0.5); } #div3 { background-color:rgb(0, 0, 200); } </style> </head> <body> <div id="div1">Texte dans la balise <div></div> <div id="div2">Texte dans la balise <div> </div> <div id="div3" style="opacity: 0.5;">Texte dans la balise <div></div>


62 Chapitre 4

</body></html>

Figure 4.1La 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éaireIl 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.


■ 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 verticalPar 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> <meta charset="UTF-8" /> <title>Gradient linéaire</title> <style style="text/css"> 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.2Un gradient vertical compatible Internet Explorer, Chrome et Firefox.

64 Chapitre 4

Gradient horizontalPour 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> <meta charset="UTF-8" /> <title>Gradient linéaire horizontal</title> <style style="text/css"> 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.3Un gradient horizontal compatible Internet Explorer, Chrome et Firefox.


Gradient diagonalPour 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.4Un gradient diagonal du coin supérieur gauche au coin inférieur droit.

Gradient linaire multipleDans 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.

66 Chapitre 4

■ 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> <meta charset="UTF-8" /> <title>Gradient linéaire horizontal</title> <style style="text/css"> 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.5Plusieurs 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).


Figure 4.6Un générateur de gradients en ligne.

Gradient radialVous 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 couleursVoici 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);

68 Chapitre 4

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> <meta charset="UTF-8" /> <title>Gradient radial</title> <style style="text/css"> div { height: 200px; width: 200px; 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); } </style> </head> <body> <div></div> </body></html>


Figure 4.7Un gradient radial du rouge au jaune.

Gradient radial restreintSi 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 :

background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(red), ➥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> <meta charset="UTF-8" /> <title>Gradient radial restreint </title> <style style="text/css"> div { height: 200px; width: 200px; background: -moz-radial-gradient(50% 50%, circle farthest-side, red 0%, ➥yellow 30%); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(red), ➥to(yellow));

70 Chapitre 4

background: -ms-radial-gradient(50% 50%, circle farthest-side, red 0%, ➥yellow 30%); } </style> </head> <body> <div></div> </body></html>

Figure 4.8Le gradient n’occupe pas toute la surface du conteneur.

Gradient radial multipleTout 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 :

background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(red), ➥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> <meta charset="UTF-8" />


<title>Gradient radial multiple </title> <style style="text/css"> div { height: 200px; width: 200px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(red), ➥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.9Un gradient radial multiple.


Exercice 3

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frModifiez 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.10Le 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() {


// 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.

5Images

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 pageVous 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 l’image n’est pas accessible

un texte quelconque <img src="images/im1.jpg" alt="texte de remplacement">

border bordure autour de l’image

0 (pas de bordure) ou 1 (bordure)

<img src="images/im1.jpg" border="1">

class nom de la classe associée à l’image

un nom quelconque <img src="images/im1.jpg" class="type1">

height hauteur de l’image en pixels

une valeur numérique quelconque

<img src="images/im1.jpg" height="300">

id nom de l’image un identifiant quelconque

<img src="images/im1.jpg" 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">

76 Chapitre 5

width hauteur de l’image en pixels

une valeur numérique quelconque

<img src="images/im1.jpg" width="200">

Une image en arrière-plan d’une pagePour 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;}

Images 77

Une image en arrière-plan d’un conteneurVous 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> <meta charset="UTF-8" /> <title>Une image en arrière-plan d’un conteneur</title> <style type="text/css"> .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>

78 Chapitre 5

Figure 5.1De nombreux éléments HTML peuvent utiliser une image d’arrière-plan.

Utiliser une image comme lien hypermédiaPour 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 imageDans 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> <meta charset="UTF-8" /> <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">

Images 79

<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.2L’image et sa légende sont automatiquement indentées par rapport au texte avoisinant.

Centrer une image dans un conteneurPour 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.

80 Chapitre 5

Voici un exemple de code et son effet, représenté à la Figure 5.3.

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Aligner une image dans un conteneur</title> <style type="text/css"> #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.3L’image est bien centrée dans le conteneur <div>.

Images 81

Modifier les caractéristiques d’une image lorsqu’elle est survoléeIl 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> <meta charset="UTF-8" /> <title>Agrandissement d’une image au survol</title> <style type="text/css"> #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> <script src=http://code.jquery.com/jquery.min.js></script> <style type="text/css"> #paysage { position: absolute; top: 20px; left: 120px; } </style> </head> <body>

82 Chapitre 5

<img src="petitpaysage.jpg" id="paysage"> <script> $(function(){ $('#paysage').mouseover(function(){ $('#paysage').css('top', '100px'); }); $('#paysage').mouseout(function(){ $('#paysage').css('top', '20px'); }); }); </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 :

$('#paysage').css('top', '100px');

Dans le deuxième cas, elle est initialisée à 20px :

$('#paysage').css('top', '20px');

Empiler des imagesLa 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> <meta charset="UTF-8" /> <title>Empilement d’images avec z-index</title> <style type="text/css"> img { position: absolute; } #chien { top: 20px; left: 20px; z-index: 1; } #chat { top: 50px; left: 50px; z-index: 2; } #cheval { top: 80px; left: 80px; z-index: 3; } #girafe { top: 110px; left: 110px; z-index: 4; } #chien:hover {z-index: 100; } #chat:hover {z-index: 100; } #cheval:hover {z-index: 100; } #girafe:hover {z-index: 100; } </style> </head>

Images 83

<body> <img src="chien250.jpg" id="chien"> <img src="chat250.jpg" id="chat"> <img src="cheval250.jpg" id="cheval"> <img src="girafe250.jpg" id="girafe"> </body></html>

Figure 5.4L’image pointée passe en avant-plan.

Préchargement d’imagesSi 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.

84 Chapitre 5

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éactivesLes 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> <meta charset="UTF-8" /> <title>Empilement d’images avec z-index</title> <style type="text/css"> #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,

Images 85

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.5La troisième zone réactive est pointée, ce qui provoque l’affichage de l’attribut titre de la balise <a> correspondante.

Album photosLa 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> <style type="text/css"> a { padding-right: 20px; } </style> <script src=http://code.jquery.com/jquery.min.js></script> </head>

86 Chapitre 5

<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;" /> <img src="i3.jpg" style="display: none;" /> <img src="i4.jpg" style="display: none;" /> <img src="i5.jpg" style="display: none;" /> <script> $(function(){ $('#i1').click(function(){ $('#image').attr('src','i1.jpg'); }); $('#i2').click(function(){ $('#image').attr('src','i2.jpg'); }); $('#i3').click(function(){ $('#image').attr('src','i3.jpg'); }); $('#i4').click(function(){ $('#image').attr('src','i4.jpg'); }); $('#i5').click(function(){ $('#image').attr('src','i5.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; }

Images 87

Figure 5.6Un 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 :

$('#i1').click(function(){ $('#image').attr('src','i1.jpg');});

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.


Exercice 4

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frVous 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.7L’en-tête a été modifié et un lien Texture a été ajouté dans le bas de page.

6Ombrages et arrondisLe 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 textuelsL’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> <meta charset="UTF-8" /> <title>Ombrage CSS3</title> <style> .ombrageCSS3 { width: 300px; height: 300px; background: yellow; font-size: 400%; box-shadow: 10px 10px 5px grey; } </style>

90 Chapitre 6

</head> <body> <div class="ombrageCSS3"> Texte à 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.1L’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.2Ombrage CSS3 diffus d’une balise <div>.

Ombrages et arrondis 91

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.3La 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.4L’ombrage est appliqué à une image.

92 Chapitre 6

Ombrer des objets textuelsL’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> <meta charset="UTF-8" /> <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.5Ombrage de texte CSS3.


Arrondir les coins d’un élément de type blockPour 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> <meta charset="UTF-8" /> <title>Une boîte à coins arrondis en CSS3</title> <style> .arrondi { border-radius: 20px; border: 1px solid black; } </style> </head> <body> <div class="arrondi">Boîte à bords arrondis en CSS3</div> </body> </html>

Figure 6.6Un 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

94 Chapitre 6

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 { border-radius: 15px; border: 1px solid black; padding: 10px; width: 250px; height: 200px; background:#ADCF4F; text-align: center;}

Figure 6.7Un 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 { border-radius: 15px; border: 5px solid black; padding: 10px; width: 250px; height: 300px; font-size: 60px; background: url("fond.gif") repeat; text-align: center;}


Figure 6.8Un 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> <meta charset="UTF-8" /> <title>Une boîte à coins arrondis en CSS3</title> <style> .arrondi { border-radius: 50px 50px 200px 50px; border: 1px solid black; width: 350px; height: 150px; padding-top: 50px; padding-left: 20px; } </style> </head> <body> <div class="arrondi"> Boîte à bords arrondis en CSS3 </body> </html>

96 Chapitre 6

Figure 6.9Les coins n’ont pas tous le même rayon.

Ombrages et arrondis 97Ombrages et arrondis 97

Exercice 5

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frVous 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.10La page a une tout autre allure avec les arrondis et les ombres.

7Menus

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 HTML5La 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> <meta charset="UTF-8" /> <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> <li><a href="page2.htm">Page 2</a></li> <li><a href="page3.htm">Page 3</a></li> <li><a href="page4.htm">Page 4</a></li> <li><a href="page5.htm">Page 5</a></li> </ul>

100 Chapitre 7

<p id="corps">Iam summus Pater architectus Deus hanc quam videmus mundanam ➥domum, divinitatis templum augustissimum, archanae legibus sapientiae ➥fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos ➥aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes ➥omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex ➥esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, ➥magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 ➥testantur) absolutis, de producendo homine postremo cogitavit. Verum nec ➥erat in archetypis unde novam sobolem 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.1Un menu vertical élémentaire composé de cinq liens hypertexte.

Menu horizontal en HTML5Pour 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> <meta charset="UTF-8" /> <title>Menu horizontal élémentaire</title> <style>

Menus 101

#horizontal { list-style: none; } #horizontal li { display: inline-block; padding-left: 2em; } #corps { text-align: justify; } </style> </head> <body> <ul id="horizontal"> <li><a href="page1.htm">Page 1</a></li> <li><a href="page2.htm">Page 2</a></li> <li><a href="page3.htm">Page 3</a></li> <li><a href="page4.htm">Page 4</a></li> <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 ➥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 necerat ➥in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio ➥hereditarium largiretur, nec insubselliis totius orbis, ubi universi ➥contemplator iste sederet.</p> </body></html>

Les puces de la liste sont supprimées en affectant la valeur none à la propriété list-style de la liste <ul> :

#horizontal { list-style: none; }

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.

display: inline-block;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 :

#corps { text-align: justify; }

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>.

102 Chapitre 7

Figure 7.2Les 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 CSSQu’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 l’instruction suivante :

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; }

Menus 103

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> #horizontal { list-style: none; } li { display: inline-block; padding-left: 1em; padding-right: 1em; border: 1px dotted black; border-radius: 15px; } a { text-decoration: none; } #corps { text-align: justify; } li:hover { background: yellow; }</style>

Figure 7.3Quelques instructions ont suffi pour modifier l’allure du menu horizontal.

Menu déroulantPour 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> <meta charset="UTF-8" /> <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;

104 Chapitre 7

} #principal li a:link, #principal li a:visited { display: block; background: #E0FCC8; margin: 0; padding: 5px 6px; text-decoration: none; color: black; } #principal li a:hover { background-color: #A5F95B; } #principal .secondaire { display: none; list-style-type: none; margin: 0; padding: 0; border: 0; } #principal .secondaire li { 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> <li><a href="page1-2.htm">Page 1 - Sous-page 2</a></li> <li><a href="page1-3.htm">Page 1 - Sous-page 3</a></li> </ul> </li> <li><a href="#">Page 2</a> <ul class="secondaire"> <li><a href="page2-1.htm">Page 2 - Sous-page 1</a></li> <li><a href="page2-2.htm">Page 2 - Sous-page 2</a></li> <li><a href= "page2-3.htm">Page 2 - Sous-page 3</a></li> </ul> </li> <li><a href="#">Page 3</a> <ul class="secondaire"> <li><a href="page3-1.htm">Page 3 - Sous-page 1</a></li> <li><a href="page3-2.htm">Page 3 - Sous-page 2</a></li> <li><a href="page3-3.htm">Page 3 - Sous-page 3</a></li>

Menus 105

</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).

106 Chapitre 7

Figure 7.4Un 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 jQueryPour 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 src=http://code.jquery.com/ui/1.10.3/jquery-ui.js></script> <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body>

Menus 107

<ul id="menu"> <li class="ui-state-disabled"><a href="#">VB.Net</a></li> <li class="ui-state-disabled"><a href="#">Delphi</a></li> <li> <a href="#">HTML5/CSS3</a> <ul> <li class="ui-state-disabled"><a href="#">Rennes</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Metz</a></li> <li><a href="#">Toulouse</a></li> </ul> </li> <li> <a href="#">JavaScript</a> <ul> <li><a href="#">Paris</a></li> <li><a href= "#">Rennes</a></li> <li><a href="#">Lyon</a></li> </ul> </li> <li> <a href="#">jQuery</a> <ul> <li><a href="#">Paris</a></li> <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.5Un menu vertical à deux niveaux en jQuery.

108 Chapitre 7

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="#">Paris</a></li> <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

Menus 109

http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"

http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/swanky-purse/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/trontastic/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css

http://code.jquery.com/ui/1.10.3/themes/vader/jquery-ui.css

Examinons les bibliothèques utilisées dans cette page :

<script src=http://code.jquery.com/jquery.min.js></script><script src=http://code.jquery.com/ui/1.10.3/jquery-ui.js></script>

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 jQueryBien 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; }

110 Chapitre 7

#menu { width: 900px; } #menu>li { width: 150px; float: left; }</style>

Figure 7.6Le 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;}

Menus 111Menus 111

Exercice 6

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frModifiez 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.7Le menu horizontal a pris place.

8Formulaires

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 formulaireComposé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).

114 Chapitre 8

■ 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 mailLa 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:[email protected]">

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 = "[email protected]"; $delapartde = "[email protected]"; $from = "From:".$delapartde."\n"; $from .= "MIME-version: 1.0\n";

Formulaires et stockage local de données 115

$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 = "[email protected]"; $delapartde = "[email protected]"; $from = "From:".$delapartde."\n"; $from .= "MIME-version: 1.0\n"; $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.";?>

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>";

116 Chapitre 8

Les différents éléments utilisables dans un formulaireOutre 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" id="identifiant" value="valeur">

Zone de texte.

<input type="button" name="Nom" id="identifiant" value="Légende du bouton">

Bouton.

<input type="image" src="image.jpg" id="identifiant">

Bouton contenant une image.

<input type="password" name="Nom" id="identifiant" value="valeur par défaut">

Zone de saisie d’un mot de passe.

<input type="checkbox" name="Nom" id="identifiant" value="Valeur">

Case à cocher.

<input type="radio" name="Nom" id="identifiant" value="Valeur">

Bouton radio.

<input type="hidden" name="Nom" id="identifiant" value="valeur">

Champ caché. Bien qu’il n’apparaisse pas dans le formulaire, son contenu est envoyé au serveur lorsque l’utilisateur clique sur le bouton Submit.

<input type="submit" name="Nom" id="identifiant" value="Texte affiché sur le bouton">

Bouton d’envoi, pour envoyer les données du formulaire au serveur.

<input type="reset" name="Nom" id="identifiant" value="Texte affiché sur le bouton">

Bouton de réinitialisation du formulaire.

<input type="date" name="Nom" id="identifiant" title="Date(jj-mm-aaaa)" value="Une date">

Champ spécialisé dans la saisie de dates (seulement pour les navigateurs Opera et Chrome au moment où j’écris ces lignes).

<input type="time" name="Nom" id="identifiant" title="Heure(hh-mm)" value="10:00">

Champ spécialisé dans la saisie d’heures (seulement pour les navigateurs Opera et Chrome au moment où j’écris ces lignes).


<input type="datetime" name="Nom" id="identifiant">

Champ spécialisé dans la saisie de dates et d’heures (seulement pour les navigateurs Opera et Chrome au moment où j’écris ces lignes).

<input type="number" name="Nom" id="identifiant" value="55">

Champ spécialisé dans la saisie des nombres.

<input type="color" name="Nom" id="identifiant" value="red">

Palette de couleurs (aucun navigateur n’est encore compatible).

<input type="search" name="Nom" id="identifiant" list="datalist" value="Valeur par défaut">

Zone de texte permettant d’effectuer des recherches.

<input type="range" min="-500" max="500" value="0" step="10" name="Nom" id="identifiant">

Curseur pour faciliter la saisie de valeurs numériques (uniquement sur Safari au moment où j’écris ces lignes).

<input type="email" name="Nom" id="identifiant">

Champ spécialisé dans la saisie d’adresses e-mail.

<input type="url" name="Nom" id="identifiant">

Champ spécialisé dans la saisie d’adresses URL.

<input type="tel" name="Nom" id="identifiant">

Champ spécialisé dans la saisie de numéros de téléphone (uniquement sur les versions mobiles des navigateurs au moment où j’écris ces lignes).

<input type="file" name="Nom" id="identifiant">

Champ permettant de sélectionner un fichier dans les mémoires de masse de l’ordinateur.

<datalist id="identifiant"><option value="valeur1">...<option value="valeurN"></datalist>

Facilite la saisie en implémentant l’autocomplete sur plusieurs valeurs prédéfinies dans des éléments option.

<textarea cols="Nombre colonnes" rows="Nombre lignes" id="identifiant">Texte par défaut</textarea>

Zone de saisie multiligne.

<select name="Nom" id="identifiant"><option value="valeur1">...<option value="valeurN"></select>

Liste déroulante.

<select name="Nom" size="4" id="identifiant"><option value="valeur1">...<option value="valeurN"></select>

Zone de liste (ici, quatre éléments sont affichés).

<option name="Nom" size="4" id="identifiant"><option value="valeur1">...<option value="valeurN"></select>

Zone de liste (ici, quatre éléments sont affichés).

<output name="Nom"> Affichage d’un résultat.

118 Chapitre 8

Quelques exemples de formulairesCette section passe en revue plusieurs exemples typiques de formulaires. Libre à vous de les adapter pour répondre à vos besoins.

Formulaire de loginTous 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.1Un traditionnel formulaire de login.

Voici le code utilisé :

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Formulaire de login</title> <style type="text/css"> label { display: inline-block; width: 130px; margin-left: 10px;} input { display: inline-block; width: 200px; } input[type="submit"] { margin-left: 144px; width: 150px; } input { margin-bottom: 10px; } fieldset { width: 400px; background-color: #E3FAF4; } </style> </head>


<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 action="traitement.php" method="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 { display: inline-block; 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 :

input[type="submit"] {

120 Chapitre 8

margin-left: 294px; width: 150px;}

Afin d’aérer le formulaire, un espace est ménagé après chaque champ input :

input { margin-bottom: 10px; }

Enfin, la balise <fieldset> est redimensionnée et colorée afin de différencier le formulaire du reste de la page :

fieldset { width: 650px; background-color: #E3FAF4; }

Formulaire de saisie de commentairesSi 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.2Un 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> <style type="text/css"> fieldset { width: 700px; background-color: #E3FAF4; } textarea, input[type="submit"] { margin-left: 10px; } </style> </head>


<body> <form action="traitement.php" method="post"> <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; background-color: #E3FAF4; }

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 fichierIl 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.3Ce formulaire permet d’envoyer un fichier au serveur.

122 Chapitre 8

Voici le code correspondant :

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Formulaire d’envoi de fichier</title> <style type="text/css"> label { display: inline-block; width: 180px; margin-left: 10px; } input[type="submit"] { margin-left: 194px; width: 150px; } input { margin-bottom: 10px; } fieldset { width: 500px; background-color: #E3FAF4; } </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.


SondagePour 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.4Un sondage élémentaire.


<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Sondage</title> <style type="text/css"> label { display: inline-block; width: 280px; margin-left: 10px; } input[type="submit"] { margin-left: 294px; width: 150px; } input { margin-bottom: 10px; } fieldset { width: 650px; background-color: #E3FAF4; } </style> </head> <body> <form action="traitement.php" method="post"> <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

124 Chapitre 8

<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.

FocusEn 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.5L’utilisateur a donné le focus au troisième champ input de type text.




<head> <meta charset="UTF-8" /> <title>Focus</title> <script src=http://code.jquery.com/jquery.min.js></script> <style type="text/css"> label { display: inline-block; width: 100px; margin-left: 10px; } input[type="submit"] { margin-left: 114px; width: 150px; } input { margin-bottom: 10px; } fieldset { width: 350px; background-color: #E3FAF4; } </style> </head> <body> <form action="traitement.php" method="post"> <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 :

$('input').focus(function(){

126 Chapitre 8

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 focusPour 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(){ $('input').focus(function(){ qalf = '#' + $(this).attr('id'); $(qalf).css('background-color','#E3FAF4'); }); }); $('input').blur(function(){ qalf = '#' + $(this).attr('id'); $(qalf).css('background-color','#FFFFFF'); });</script>

Lorsqu’un champ input obtient le focus :

$('input').focus(function(){

Son identifiant est stocké dans la variable qalf, en le faisant précéder du signe # pour le rendre directement utilisable :

qalf = '#' + $(this).attr('id');

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');


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.6Le champ qui a le focus est facilement identifiable par sa couleur d’arrière-plan.

Validation de donnéesLorsqu’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> <meta charset="UTF-8" /> <title>Champ de saisie obligatoire</title> <style type="text/css"> label, input { display: inline-block; width: 200px; margin-left: 10px; } </style> </head> <body> <form id="validation"> <label>Nom</label> <input name="Nom" required> <input type=submit value="Valider"> </form> </body></html>

128 Chapitre 8

Figure 8.7Ce champ doit être renseigné pour que le formulaire soit valide.

Validation d’e-mails et d’adresses URLLe 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> <meta charset="UTF-8" /> <title>Validation e-mail et url</title> <style type="text/css"> label, input, textarea { margin-left: 10px; margin-bottom: 15px; } label { display: inline-block; width: 100px; } </style> </head> <body> <form id="validation"> <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>


Figure 8.8L’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.9Les champs obligatoires sont clairement identifiés.

Validation par une expression régulièrePour 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 précédent

xy? signifie x ou xy

* Répète zéro, une ou plusieurs fois le caractère précédent

xy* signifie x, xy, xyy, xyyy, etc.

+ Répète une ou plusieurs fois le caractère précédent

xy+ signifie xy, xyy, xyyy, etc.

130 Chapitre 8

\ Le caractère d’échappement \ autorise l’utilisation de caractères réservés

\. est équivalent au point décimal

[xyz] Un caractère unique de l’expression [xyz] signifie x, y ou z

[^xyz] Un caractère unique à l’exclusion des caractères de l’expression

[^xyz] signifie un caractère quelconque sauf x, y et z

[a-z] Un caractère unique compris entre les deux bornes

[a-zA-Z] signifie une lettre minuscule ou 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 min et max fois

x{2,3} signifie xx ou xxx, x{1,} signifie x, 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> <meta charset="UTF-8" /> <title>Validation par expression régulière</title> </head> <body> <form action="traitement.php" method="post"> 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>


Figure 8.10La 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> <meta charset="UTF-8" /> <title>Validation d’e-mail par expression régulière</title> </head> <body> <form action="traitement.php" method="post"> 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>

132 Chapitre 8

Figure 8.11Le 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> <meta charset="UTF-8" /> <title>Mise en évidence des champs invalides</title> <style type="text/css"> label, input, textarea { margin-left: 10px; margin-bottom: 15px; } label { display: inline-block; width: 100px; } input[type=text]:invalid {background-color: red; } input[type=text]:valid {background-color: green; } </style> </head> <body> <form id="validation">


<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.12L’adresse e-mail n’est pas correcte ; en revanche, le numéro de téléphone respecte la règle de validation.

134 Chapitre 8

Stockage local de donnéesAvec 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', 'valeur')

Stocke la valeur spécifiée sous le nom spécifié 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> <meta charset="UTF-8" /> <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);


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() { var nom = document.forms.editor.name.value; document.forms.editor.data.value = localStorage.getItem(nom); Affiche(); } function Efface() { var nom = document.forms.editor.name.value; 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>

136 Chapitre 8

Figure 8.13Ce code permet de lire et d’enregistrer des données dans l’espace local du navigateur.

Formulaires et stockage local de données 137Formulaires et stockage local de données 137

Exercice 7

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frDé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.14Le 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="[email protected]"; $delapartde = $mail; $from = "From:".$delapartde."\n"; $from .= "MIME-version: 1.0\n"; $from .= "Content-type: text/html\n"; $from .= "charset: UTF-8\n"; if (!mail($destinataire,$titre,$texte,$from))

138 Chapitre 8

echo "Un problème s’est produit lors de l’envoi du message. Recommencez ➥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 :

$destinataire="[email protected]";

Exercice 8Définissez le formulaire de contact représenté à la Figure 8.15.

Figure 8.15Le 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"); $destinataire="[email protected]";


$delapartde = $mail; $from = "From:".$delapartde."\n"; $from .= "MIME-version: 1.0\n"; $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."; 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 :

$destinataire="[email protected]";

9Tableaux

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 HTMLUn 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> <th>Titre colonne 2</th> </tr> <tr> <td>Cellule 1 ligne 1</td> <td>Cellule 2 ligne 1</td> </tr> <tr> <td>Cellule 1 ligne 2</td> <td>Cellule 2 ligne 2</td> </tr></table>

142 Chapitre 9

Définir un tableau en CSSPour 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> <meta charset="UTF-8" /> <title>Un tableau en CSS</title> <style type="text/css"> .titre { font-weight: bold; } span { display: inline-block; float: left; width: 150px; padding: 5px; border: 1px solid black; } 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> <span>Cellule 2 ligne 1</span> </p> <p> <span>Cellule 1 ligne 2</span> <span>Cellule 2 ligne 2</span> </p> </div> </body> </html>

Tableaux 143

Figure 9.1Ce 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 :

display: inline-block;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> :

border: 1px solid black;

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; }

144 Chapitre 9

Bordures autour des cellulesAu 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> <meta charset="UTF-8" /> <title>Bordures autour d’un tableau</title> <style> table { border: 4px dashed black; } th, td { border: 1px solid red; } </style> </head> <body> <table> <tr> <th>Titre colonne 1</th> <th>Titre colonne 2</th> <th>Titre colonne 3</th> </tr> <tr> <td>Elément 1 ligne 1</td> <td>Elément 2 ligne 1</td>

Tableaux 145

<td>Elément 3 ligne 1</td> </tr> <tr> <td>Elément 1 ligne 1</td> <td>Elément 2 ligne 1</td> <td>Elément 3 ligne 1</td> </tr> </table> </body></html>

Figure 9.2Mise 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;}

146 Chapitre 9

Figure 9.3Les bordures peuvent être séparées ou fusionnées.

Espacer les cellulesLa 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> <meta charset="UTF-8" /> <title>Espacer les cellules d’un tableau</title> <style> table { border: 1px solid black; text-align: center; border-collapse: separate; border-spacing: 10px; background-color: #CFF4EF; } td { width: 120px; border: 1px solid red; background-color: #F4CFD7; } </style> </head> <body> <table> <tr> <td>Date</td> <td>Articles</td> <td>Prix</td> </tr> <tr>

Tableaux 147

<td>12/08</td> <td>21</td> <td>5412</td> </tr> <tr> <td>17/08</td> <td>14</td> <td>1519</td> </tr> </table> </body></html>

Figure 9.4Les bordures des cellules sont espacées de 10 pixels.

Fusionner des cellulesLes 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.5Plusieurs fusions de cellules sont nécessaires pour arriver à ce résultat.

148 Chapitre 9

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> <meta charset="UTF-8" /> <title>Arrière-plan des cellules</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; 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> <tr><td>2013</td><td>48</td><td>42</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>

Tableaux 149

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 :

<tr><td>2013</td><td>56</td><td>50</td></tr>

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 :

<tr><td>2013</td><td>48</td><td>42</td></tr>

Ajouter une légende au tableauLa 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> <meta charset="UTF-8" /> <title>Légender un tableau</title> <style> table, td { border: 2px solid red; border-collapse: collapse;

150 Chapitre 9

} table > caption { caption-side: bottom; font-style: italic; text-align: right; } </style> </head> <body> <table border> <caption>Titre du tableau</caption> <tr> <td>Elément 1 ligne 1</td> <td>Elément 2 ligne 1</td> <td>Elément 3 ligne 1</td> </tr> <tr> <td>Elément 1 ligne 2</td> <td>Elément 2 ligne 2</td> <td>Elément 3 ligne 2</td> </tr> </table> </body></html>

Figure 9.6La légende a été mise en forme et s’affiche au-dessous et à droite du tableau.

Arrière-plan des cellulesL’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> <meta charset="UTF-8" /> <title>Arrière-plan des cellules</title>

Tableaux 151

<style> table { border: 1px solid black; text-align: center; color: blue; font-weight: bold; font-size: 200%; } td {width: 200px;} td.fond1 { background:url(fond1.jpg); } td.fond2 { background:url(fond2.jpg); } td.fond3 { background:url(fond3.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> <td class="fond3">5412</td> </tr> <tr> <td class="fond2">14/08</td> <td class="fond3">10</td> <td class="fond3">2215</td> </tr> <tr> <td class="fond2">16/08</td> <td class="fond3">15</td> <td class="fond3">3219</td> </tr> <tr> <td class="fond2">19/08</td> <td class="fond3">17</td> <td class="fond3">2719</td> </tr> </table> </body></html>

152 Chapitre 9

Figure 9.7Trois textures d’arrière-plan sont appliquées aux cellules de ce tableau.

Alignement dans les cellulesVous 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> <meta charset="UTF-8" /> <title>Alignement des cellules</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; } td { width: 200px; height: 40px; } td.c1 { text-align: center; vertical-align: middle; } td.c2 { text-align: left; vertical-align: top; } td.c3 { text-align: right; vertical-align: bottom; } </style> </head> <body> <table> <tr> <tr> <td class="c1">Date</td> <td class="c1">Articles</td>

Tableaux 153

<td class="c1">Prix</td> </tr> <tr> <td class="c2">12/08</td> <td class="c2">21</td> <td class="c2">5412</td> </tr> <tr> <td class="c3">17/08</td> <td class="c3">14</td> <td class="c3">1519</td> </tr> </table> </body></html>

Figure 9.8Alignements horizontal et vertical dans les cellules d’un tableau.

Différencier lignes paires et lignes impairesPour 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> <meta charset="UTF-8" /> <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; }

154 Chapitre 9

</style> </head> </body> <table> <tr><td>Date</td><td>Articles</td><td>Prix</td></tr> <tr><td>12/08</td><td>21</td><td>5412</td></tr> <tr><td>14/08</td><td>10</td><td>2215</td></tr> <tr><td>16/08</td><td>15</td><td>3219</td></tr> <tr><td>19/08</td><td>17</td><td>2719</td></tr> </table> </body></html>

Figure 9.9L’alternance des couleurs améliore la lisibilité du tableau.

Mise en forme des cellules videsLe 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> <meta charset="UTF-8" /> <title>Bordure des cellules vides</title> <style> table { border-collapse: collapse; } 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>

Tableaux 155

Figure 9.10Les cellules vides sont différenciées des autres en jouant sur leur couleur d’arrière-plan.

Arrondis et ombragesLes 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.11Le tableau mis en forme a une fière allure !

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Arrondis et ombrages</title> <style> table { border: 4px double black; border-spacing: 0; text-align: center; color: blue; font-weight: bold;

156 Chapitre 9

font-size: 200%; border-radius: 15px; 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> <tr><td>12/08</td><td>21</td><td>5412</td></tr> <tr><td>14/08</td><td>10</td><td>2215</td></tr> <tr><td>16/08</td><td>15</td><td>3219</td></tr> <tr><td>19/08</td><td>17</td><td>2719</td></tr> </table> </body></html>

Tableaux 157Tableaux 157

Exercice 9

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frVous 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.12Le 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.

10Mise 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

160 Chapitre 10

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 documentsBien 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> :

Mise en page 161

Figure 10.1Une page Web traditionnelle constituée d’un assemblage de balises <div>.

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <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> <li><a href="page1.htm">Page 1</a></li> <li><a href="page2.htm">Page 2</a></li> <li><a href="page3.htm">Page 3</a></li> <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>

162 Chapitre 10

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.2Le rendu est quasiment identique mais, ici, les balises <div> ont disparu du code.

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Un document HTML5 avec en-tête, pied de page, menu, zone annexe et ➥zone de contenu</title>

Mise en page 163

<link rel="stylesheet" href="style1.css"> <script src="Creation-elements-HTML5.js"></script> </head> <body> <header> <h1>En-tête du document</h1> Texte de l’en-tête </header> <nav> <h2>Menu</h2> <ul> <li><a href="page1.htm">Page 1</a></li> <li><a href="page2.htm">Page 2</a></li> <li><a href="page3.htm">Page 3</a></li> </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;

164 Chapitre 10

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 pageLorsque 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.

Mise en page 165

Positionnement staticIl 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 fixedLorsqu’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> <meta charset="UTF-8" /> <title>Positionnement fixe</title> <style type="text/css"> 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

166 Chapitre 10

➥enjoy a pleasure that has no annoying consequences, or one who avoids a pain ➥that produces resultant pleasure </body></html>

Figure 10.3Le 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.

Mise en page 167

Figure 10.4L’image d’arrière-plan est fixe dans la page et reste insensible à la position des barres de défilement.

Positionnement relativeLorsqu’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> <meta charset="UTF-8" /> <title>Positionnement relative</title> <style type="text/css"> 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>

168 Chapitre 10

Figure 10.5Les 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> <meta charset="UTF-8" /> <title>Positionnement relative</title> <style type="text/css"> 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>

Mise en page 169

Figure 10.6Le deuxième titre h2 est décalé de 50 pixels vers le haut et la droite.

Positionnement absoluteLorsqu’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> <meta charset="UTF-8" /> <title>Positionnement absolute</title> <style type="text/css"> .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>

170 Chapitre 10

Figure 10.7Positionnement 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émentVous 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.8La ou les images qui suivent le <div> supprimé se repositionnent automatiquement sur la gauche de la page.

Mise en page 171

Voici le code utilisé :

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Positionnement float</title> <script src=http://code.jquery.com/jquery.min.js></script> <style type="text/css"> div { border: 1px dotted black; 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> <div id="mini2"><img src="mini2.jpg"><br><button id="bouton2">Supprimer</ ➥button></div> <div id="mini3"><img src="mini3.jpg"><br><button id="bouton3">Supprimer</ ➥button></div> <script> $(function(){ $('#bouton1').click(function(){ $('#mini1').css('display','none'); }); $('#bouton2').click(function(){ $('#mini2').css('display','none'); }); $('#bouton3').click(function(){ $('#mini3').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

172 Chapitre 10

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é :

$('#bouton1').click(function(){

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 :

$('#mini1').css('display','none');

Mise en page sur plusieurs colonnesQuelques 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> <meta charset="UTF-8" /> <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 ➥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> </div> </body></html>

Mise en page 173

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{ -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px;

L’espace entre les colonnes est fixé à 20 pixels :

-moz-column-gap: 20px;-webkit-column-gap: 20px;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.9Ici, le texte occupe quatre colonnes.

Figure 10.10La 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;

174 Chapitre 10

-webkit-column-rule: largeur style couleur;column-rule: largeur style couleur;

Où :

■ largeur est la largeur du trait en pixels.

■ style est le style du trait. Il peut prendre 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-width: 150px; -moz-column-gap: 20px; -moz-column-count: 3; -moz-column-rule: 1px solid black; -webkit-column-width: 150px; -webkit-column-gap: 20px; -webkit-column-count: 3; -webkit-column-rule: 1px solid black; column-width: 150px; column-gap: 20px; column-count: 3; column-rule: 1px solid black; background:#ccc; text-align:justify;}

Figure 10.11Le texte est maintenant affiché sur trois colonnes, indépendamment de la largeur de la fenêtre.

Mise en page 175

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.

MargesToutes 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> <meta charset="UTF-8" /> <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>

176 Chapitre 10

Figure 10.12Les 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;background-color: red;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.

Mise en page 177

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) { …}

Largeur du périphérique inférieure à la largeur spécifiée

@media (min-width: largeur1) and (max-width: largeur2) { …}

Largeur de la fenêtre comprise entre les deux largeurs spécifiées

@media (max-device-width: largeur) and (orientation: landscape) { …}

Largeur du périphérique inférieure à la largeur spécifiée, et écran tenu horizontalement

178 Chapitre 10

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> <meta charset="UTF-8" /> <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.

Mise en page 179

Figure 10.13La 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 WebEn 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=http://code.jquery.com/jquery.min.js></script><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 :

180 Chapitre 10

<?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).

Mise en page 181Mise en page 181

Exercice 10

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frRemplacez les balises <div> utilisées dans la page index.htm par leurs équivalents sémantiques HTML5 : <header>, <nav>, <article> et <footer>.

Exercice 11Dé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 12Appliquez 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.

11Gestion

événementielleChacun à 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 HTMLPour 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> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script> function load() { document.getElementById("status").innerHTML = "L’événement 'load' a été ➥généré."; } function bouton(b) {

184 Chapitre 11

document.getElementById("status").innerHTML = "Le bouton " +b + " a été ➥cliqué."; } </script> </head> <body onload="load()" onunload="unload();"> <p>Status: <span id="status">En attente.'</span></p> <button onClick="bouton(1)">Bouton 1</button> <button onClick="bouton(2)">Bouton 2</button> </body></html>

Le corps du document 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.1Le premier bouton a été cliqué.

Gestion événementielle en CSSCSS 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;}

Gestion événementielle 185

Gestion événementielle en jQueryjQuery 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> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script src=http://code.jquery.com/jquery.min.js></script> </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êtreDe 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

186 Chapitre 11

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> <meta charset="UTF-8" />


<title>Gestion événementielle</title> <script src=http://code.jquery.com/jquery.min.js></script> </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 clavierLe 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> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script> function faitecho(ev) { document.getElementById("echo").innerHTML = ➥document.getElementById("echo").innerHTML + String.fromCharCode(ev.keyCode); } </script> </head> <body> <p>echo: <span id="echo"></span></p> <input type="text" id="saisie" onkeypress="return faitecho(event);"> </body></html>

188 Chapitre 11

Voici l’équivalent de ce code en jQuery :

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script src=http://code.jquery.com/jquery.min.js></script> </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 sourisLe 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é


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> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <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> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script src=http://code.jquery.com/jquery.min.js></script> <script> function traitement(param) {

190 Chapitre 11

document.getElementById("activite").innerHTML = param; } </script> </head> <body> <img id="img" src="chien250.jpg"> <p>Activité : <span id="activite"></span></p> <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 formulairesLe 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é


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> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script> function traitement(param) { document.getElementById("activite").innerHTML = param; } </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> <p>Activité : <span id="activite"></span></p> </body></html>


<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script src=http://code.jquery.com/jquery.min.js></script> </head> <body>

192 Chapitre 11

<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> <p>Activité : <span id="activite"></span></p> <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édiasLe 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


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> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script> function etat(param) { document.getElementById("activite").innerHTML = param; } </script> </head> <body> <video id="video" src="http://www.mediaforma.com/uneminuteparjour/video/ ➥godmode.mp4"

194 Chapitre 11

controls="controls" poster="http://www.mediaforma.com/uneminuteparjour/thumbs/godmode.jpg" onabort="etat('onabort');" oncanplay="etat('oncanplay');" oncanplaythrough="etat('oncanplaythrough');" ondurationchange="etat('ondurationchange');" onemptied="etat('onemptied');" onended="etat('onended');" onerror="etat('onerror');" onloadeddata="etat('onloadeddata');" onloadedmetadata="etat('onloadedmetadata');" onloadstart="etat('onloadstart');" onpause="etat('onpause');" onplay="etat('onplay');" onplaying="etat('onplaying');" onprogress="etat('onprogress');" onratechange="etat('onratechange');" onreadystatechange="etat('onreadystatechange');" onseeked="etat('onseeked');" onseeking="etat('onseeking');" onstalled="etat('onstalled');" onsuspend="etat('onsuspend');" ontimeupdate="etat('ontimeupdate');" onvolumechange="etat('onvolumechange');" onwaiting="etat('onwaiting');" > </video> <p>Activité : <span id="activite"></span></p> </body></html>

Figure 11.2La vidéo est en cours de lecture.



<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Gestion événementielle</title> <script src=http://code.jquery.com/jquery.min.js></script> </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> <p>Activité : <span id="activite"></span></p> <script> $(function(){ $('#video').on('abort', function(){ $('#activite').text('onabort'); }) .on('canplay', function(){ $('#activite').text('oncanplay'); ➥}) .on('canplaythrough', function(){ $('#activite'). ➥text('oncanplaythrough'); }) .on('durationchange', function(){ $('#activite'). ➥text('ondurationchange'); }) .on('emptied', function(){ $('#activite').text('onemptied'); ➥}) .on('ended', function(){ $('#activite').text('onended'); }) .on('error', function(){ $('#activite').text('onerror'); }) .on('loadeddata', function(){ $('#activite'). ➥text('onloadeddata'); }) .on('loadedmetadata', function(){ $('#activite'). ➥text('onloadedmetadata'); }) .on('loadstart', function(){ $('#activite'). ➥text('onloadstart'); }) .on('pause', function(){ $('#activite').text('onpause'); }) .on('play', function(){ $('#activite').text('onplay'); }) .on('playing', function(){ $('#activite').text('onplaying'); ➥}) .on('progress', function(){ $('#activite').text('onprogress'); ➥}) .on('ratechange', function(){ $('#activite'). ➥text('onratechange'); }) .on('readystatechange', function(){ $('#activite'). ➥text('onreadystatechange'); }) .on('seeked', function(){ $('#activite').text('onseeked'); }) .on('seeking', function(){ $('#activite').text('onseeking'); ➥}) .on('stalled', function(){ $('#activite').text('onstalled'); ➥}) .on('suspend', function(){ $('#activite').text('onsuspend'); ➥}) .on('timeupdate', function(){ $('#activite'). ➥text('ontimeupdate'); })

196 Chapitre 11

.on('volumechange', function(){ $('#activite'). ➥text('onvolumechange'); }) .on('waiting', function(){ $('#activite').text('onwaiting'); ➥}); }); </script> </body></html>

Info

Remarquez 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’orientationLes 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 appareilAu 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) {


alert('DeviceOrientation supporté'); 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 :

<span id="status">Modifiez l’orientation de votre device</span>

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é :

alert('DeviceOrientation supporté');

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 appareilSupposons 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 :


198 Chapitre 11

<head> <title>device Motion</title> <script> if (window.DeviceMotionEvent) { alert('DeviceOrientation supporté'); 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> <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 :

<span id="status">Modifiez l’orientation de votre device</span>

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.

Gestion événementielle 199Gestion événementielle 199

Exercice 13

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frDans 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.

12Multimé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 audioAvec 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.

202 Chapitre 12

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.1Google 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> <meta charset="UTF-8" /> <title>L’élément audio</title>

Multimédia 203

</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.2La 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 jQueryLa 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.3Les cinq boutons permettent d’interagir avec la balise <audio>.

204 Chapitre 12

Voici le code :

<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8" /> <title>L’élément audio</title> <script src=http://code.jquery.com/jquery.min.js></script> </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é.

Multimédia 205

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éoAvec 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).

206 Chapitre 12

Figure 12.4Un 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> <meta charset="UTF-8" /> <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>

Multimédia 207

<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.5La 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 .ogvAddType audio/ogg .ogaAddType video/mp4 .m4v .mp4

Piloter une balise <video> en jQueryTout 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> <meta charset="UTF-8" />

208 Chapitre 12

<title>L’élément video</title> <script src=http://code.jquery.com/jquery.min.js></script> </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>

Multimédia 209Multimédia 209

Exercice 14

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frVous 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.

13Transformations,

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.

TransformationsDans 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".

TranslationsTous 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.


212 Chapitre 13

<head> <meta charset="UTF-8" /> <title>Translations</title> <style> div { width: 200px; height: 60px; background-color: SkyBlue; margin: 20px; border-color: black; border-width: 5px; border-style: dashed; } .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

Transformations, transitions et animations 213

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.1Translations 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> <meta charset="UTF-8" /> <title>Translation en jQuery</title> <script src=http://code.jquery.com/jquery.min.js></script> </head> <body> <img src="chat250.jpg" id="chat"><br>

214 Chapitre 13

<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>

RotationsTous 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> <meta charset="UTF-8" /> <title>Rotations</title> <style> div { width: 200px; height: 60px; background-color: SkyBlue; margin-top: 120px; border-color: black; border-width: 5px; border-style: dashed; display: inline-block; } .rotdroite45 { transform : rotate(45deg); -webkit-transform : ➥rotate(45deg); } .rotgauche90 { transform : rotate(-90deg); -webkit-transform : rotate ➥(-90deg); } </style> </head> <body> <div style="border-width: 5px;"> La <div> originale </div> <div class="rotdroite45">


La <div> 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.2Rotation 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> <meta charset="UTF-8" /> <title>Translation en jQuery</title> <style type="text/css"> div { background-color: red; width: 200px; height: 200px;

216 Chapitre 13

border: dashed 5px black; margin: 50px; } </style> <script src= http://code.jquery.com/jquery.min.js></script> </head> <body> <div id="leDiv"></div> <button id="tourner">45° vers la droite</button> <script> $(function(){ $('#tourner').click(function(){ $('#leDiv').css('transform','rotate(45deg)').css('-webkit- ➥transform','rotate(45deg)'); }); }); </script> </body> </html>

Changements d’échelleLes é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> <meta charset="UTF-8" /> <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">


</body> </html>

Figure 13.3Les 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.4La propriété margin a réglé le problème.

218 Chapitre 13

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> <meta charset="UTF-8" /> <title>Changements d’échelle</title> <style> img { margin: 60px; } .x2 { -webkit-transform : scaleX(2); transform : scaleX(2); } </style> </head> <body> <img src="cheval250.jpg"> <img src="cheval250.jpg" class="x2"> </body> </html>

Figure 13.5L’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>

220 Chapitre 13

.xy-25 { -webkit-transform : skew(-25deg, -25deg); transform : skew(-25deg, -25deg); }

</style> </head> <body> <img src="chien250.jpg"> <img src="chien250.jpg" class="xy15"> <img src="chien250.jpg" class="xy-25"> </body> </html>

Figure 13.6Inclinaison 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.

MatricesD’un point de vue mathématique, toutes les transformations CSS3 peuvent être représentées par une matrice 3 × 3 de la forme suivante :


Figure 13.7Matrice 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.8Lien 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.9Matrices de transformation.

222 Chapitre 13

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.10Rotation 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> <meta charset="UTF-8" /> <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"> <img src="cheval250.jpg" class="mat90"> </body> </html>


Figure 13.11La 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.12Transformations 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.

TransitionsVous 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;

224 Chapitre 13

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émentNotre 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> <meta charset="UTF-8" /> <title>Animation de la couleur</title> <style> .anim-couleur { font-size: 40px; transition: color 2s ease-in; } .anim-couleur:hover { color: red; } </style> </head>


<body> <p class="anim-couleur">Placez le pointeur sur ce texte</p> </body> </html>

Modifier la transparence d’un élémentLa 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> <meta charset="UTF-8" /> <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 transformationEn 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> <meta charset="UTF-8" /> <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>

226 Chapitre 13

<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 jQueryIl 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> <meta charset="UTF-8" /> <title>Animation déclenchée en jQuery</title> <script src=http://code.jquery.com/jquery.min.js></script> <style> div { position: absolute; left: 100px; top: 100px; height: 50px; width: 100px; padding: 10px; background: Yellow; transition: top 1s ease-in;


} </style> </head> <body> <button id="animer">Cliquez ici pour animer la <div></button> <button id="revenir">Cliquez ici pour 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(){ $('#madiv').css('top', '100px'); }); }); </script> </body> </html>

Figure 13.13Ces 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() :

$('#madiv').css('top', '150px');

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.

228 Chapitre 13

Quelques animations classiquesCette 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 disparitionDans 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> <meta charset="UTF-8" /> <title>Apparition et disparition progressive en jQuery</title> <script src=http://code.jquery.com/jquery.min.js></script> </head> <body> <img src="cheval250.jpg" id="image"> <script> $(function(){ $('#image').mouseenter(function(){ $(this).hide(1000); }); $('#image').mouseleave(function(){ $(this).show(1000); }); }); </script> </body> </html>


Les fonctions jQuery mouseenter() et mouseleave() sont 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/apparitionsEn 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> <meta charset="UTF-8" /> <title>Apparition et disparition progressive en jQuery</title> <style type="text/css"> div { display: inline-block; width: 150px; height: 150px; } #vert { background-color: green; } #rouge { background-color: red; } #jaune { background-color: yellow; } #bleu { background-color: blue; } </style> <script src=http://code.jquery.com/jquery.min.js></script> </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); }); });


230 Chapitre 13

$('#vert').mouseleave(function(){ $('div').first().show(1000,function suivant2(){ $(this).next().show(1000, suivant2); }); }); }); </script> </body> </html>

Figure 13.14Les 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);


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> <meta charset="UTF-8" /> <title>Fondu enchaîné en jQuery</title> <style type="text/css"> img { position: absolute; top: 100px; left: 100px; } #f1 { z-index: 2; } #f2 { z-index: 1; } </style> <script src=http://code.jquery.com/jquery.min.js></script> </head> <body> <img src="fondu1.jpg" id="f1"> <img src="fondu2.jpg" id="f2"> <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> :

<img src="fondu1.jpg" id="f1"><img src="fondu2.jpg" id="f2">


232 Chapitre 13

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éesLa 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é :



<head> <meta charset="UTF-8" /> <title>Animate() jQuery</title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; top: 50px; left: 50px; background-color: green; border: 2px dotted black; } </style> <script src=http://code.jquery.com/jquery.min.js></script> </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 :

$('#animation').click(function(){

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 :

$('div').animate({left: '250px'})

Différer une animationLa 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() :

$('#animation').click(function(){



234 Chapitre 13

$('div').animate({left: '250px'}) .delay(1000) .animate({top: '250px'}) .delay(1000) .animate({left: '50px'}) .delay(1000) .animate({top: '50px'});});

Mettre en place un timerIl 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> <script src=http://code.jquery.com/jquery.min.js></script> <div id="heure"></div> <script> $(function() { function horloge(){ var hms = new Date(); var h, m, s; h = hms.getHours(); if (h<10) h = "0" + h; m = hms.getMinutes(); if (m<10) m = "0" + m; s = hms.getSeconds();




if (s<10) s = "0" + s; $('#heure').html(h + ' : ' + m + ' : ' + s); } setInterval(horloge,1000); }); </script> </body></html>

La fonction horloge() commence par 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.15L’heure est bien affichée au format HH:MM:SS.


Exercice 15

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frDans 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.16Les 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.17Les 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.

14Mise à 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 fichierPour 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> <meta charset="UTF-8"> <title>Chargement AJAX avec load()</title> <style> #zone { width: 300px; height: 315px; border-style: solid; border-width: 3px;

238 Chapitre 14

border-color: black; } </style> </head> <body> <script src=http://code.jquery.com/jquery.min.js></script> <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.


Mise à jour avec AJAX 239

Figure 14.1Seul 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 loidonnees?l=2 // pour obtenir la deuxième loidonnees?l=3 // pour obtenir la troisième loi

240 Chapitre 14

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é :

echo "<u>Loi de la robotique N° ".$l."</u><br><br>";

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> <meta charset="UTF-8"> <title>Requête AJAX $.get()</title> <style> #zone { width: 300px; height: 315px; border-style: solid; border-width: 3px; border-color: black; } </style> </head> <body> <script src=http://code.jquery.com/jquery.min.js></script> <h2>Les lois de la robotique, selon Isaac Asimov</h2> <button id="loi1">Loi N° 1</button> <button id="loi2">Loi N° 2</button> <button id="loi3">Loi N° 3</button><br/> <div id="zone"></div> <script> $(function() { $('#loi1').on('click', function(){



$.get('donnees.php?l=1',function(data){ $('#zone').html(data); }); }); $('#loi2').on('click', function(){ $.get('donnees.php?l=2',function(data){ $('#zone').html(data); }); }); $('#loi3').on('click', function(){ $.get('donnees.php?l=3',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.

<h2>Les lois de la robotique, selon Isaac Asimov</h2><button id="loi1">Loi N° 1</button><button id="loi2">Loi N° 2</button><button id="loi3">Loi N° 3</button><br/><div id="zone"></div>

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 :

$('#loi1').on('click', function(){ $.get('donnees.php?l=1',function(data){

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 :

$('#zone').html(data);

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.

242 Chapitre 14

Figure 14.2La 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"]; echo "<u>Loi de la robotique N° ".$l."</u><br><br>";


echo "<b>".$loi[$l-1]."</b>";?>

Le code HTML5/jQuery est également légèrement différent :

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Requête AJAX $.post()</title> <style> #zone { width: 300px; height: 315px; border-style: solid; border-width: 3px; border-color: black; } </style> </head> <body> <script src=http://code.jquery.com/jquery.min.js></script> <h2>Les lois de la robotique, selon Isaac Asimov</h2> <button id="loi1">Loi N° 1</button> <button id="loi2">Loi N° 2</button> <button id="loi3">Loi N° 3</button><br><br> <div id="zone"></div> <script> $(function() { $('#loi1').on('click', function(){ $.post('donneesPost.php',{l:'1'},function(data){ $('#zone').html(data); }); }); $('#loi2').on('click', function(){ $.post('donneesPost.php',{l:'2'},function(data){ $('#zone').html(data); }); }); $('#loi3').on('click', function(){ $.post('donneesPost.php',{l:'3'},function(data){ $('#zone').html(data); }); }); }); </script> </body></html>

Le résultat est bien entendu le même que pour la requête $.get() (voir Figure 14.3).


244 Chapitre 14

Figure 14.3Ici, 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().


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> <meta charset="UTF-8"> <title>Requête get $.ajax()</title> <style> #zone { width: 300px; height: 315px; border-style: solid; border-width: 3px; border-color: black; } </style> </head> <body> <script src=http://code.jquery.com/jquery.min.js></script> <h2>Les lois de la robotique, selon Isaac Asimov</h2> <button id="loi1">Loi N° 1</button> <button id="loi2">Loi N° 2</button> <button id="loi3">Loi N° 3</button><br><br> <div id="zone"></div> <script> $(function() { $('#loi1').on('click', function(){ $.ajax({ type: 'GET', url: 'donnees.php?l=1', timeout: 3000, success: function(data){ $('#zone').html(data); }, error: function(){ $('#zone').html('Cette requête AJAX n\'a pas abouti'); } }); }); $('#loi2').on('click', function(){ $.ajax({ type: 'GET', url: 'donnees.php?l=2', timeout: 3000, success: function(data){ $('#zone').html(data); }, error: function(){ $('#zone').html('Cette requête AJAX n\'a pas abouti');


246 Chapitre 14

} }); }); $('#loi3').on('click', function(){ $.ajax({ type: 'GET', url: 'donnees.php?l=3', timeout: 3000, success: function(data){ $('#zone').html(data); }, error: function(){ $('#zone').html('Cette requête AJAX n\'a pas abouti'); } }); }); }); </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(){ $('#zone').html('Cette requête AJAX n\'a pas abouti');}

Ce code est accessible ici : www.mediaforma.com/eformation/getAjax.htm (voir Figure 14.4).

Figure 14.4Le troisième bouton a été cliqué.


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> <meta charset="UTF-8"> <title>Requête post $.ajax()</title> <style> #zone { width: 300px; height: 315px; border-style: solid; border-width: 3px; border-color: black; } </style> </head> <body> <script src=http://code.jquery.com/jquery.min.js></script> <h2>Les lois de la robotique, selon Isaac Asimov</h2> <button id="loi1">Loi N° 1</button> <button id="loi2">Loi N° 2</button> <button id="loi3">Loi N° 3</button><br><br> <div id="zone"></div> <script> $(function() { $('#loi1').on('click', function(){ $.ajax({ type: 'POST', url: 'donneesPost.php', data: {l:'1'}, timeout: 3000, success: function(data){ $('#zone').html(data); }, error: function(){ $('#zone').html('Cette requête AJAX n\'a pas abouti'); } }); }); $('#loi2').on('click', function(){ $.ajax({ type: 'POST', url: 'donneesPost.php', data: {l:'2'}, timeout: 3000, success: function(data){ $('#zone').html(data);


248 Chapitre 14

}, error: function(){ $('#zone').html('Cette requête AJAX n\'a pas abouti'); } }); }); $('#loi3').on('click', function(){ $.ajax({ type: 'POST', url: 'donneesPost.php', data: {l:'3'}, timeout: 3000, success: function(data){ $('#zone').html(data); }, error: function(){ $('#zone').html('Cette requête AJAX n\'a pas abouti'); } }); }); }); </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.

Mise à jour avec AJAX 249Mise à jour avec AJAX 249

Exercice 16

Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.frEn 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.5Le 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.

15Mise en ligne

d’un siteVous ê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ébergeurPour 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 ?

252 Chapitre 15

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 domainePersonnellement, 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.1Les 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).

Mise en ligne d’un site 253

Figure 15.2Le 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 FTPPour 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.

254 Chapitre 15

Figure 15.3Le 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.4Toutes les informations nécessaires sont contenues dans l’e-mail de l’hébergeur.

Mise en ligne d’un site 255

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.5L’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).

256 Chapitre 15

Figure 15.6Il 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.

Index 257

Symboles

:empty 154first-child 31first-letter 32first-line 32focus 32, 184invalid 132lang 32link 31valid 132visited 31

# 32$() 4, 37$.ajax() 244, 245, 247$.get() 239$.post() 242<figcaption> 78<figure> 78@font-face 50-khtml 5<link> 14@media 177-moz 5-ms 5 22-o 5<span> 191-webkit 5

A

a 27, 54a:visited 54abort 192absolute 164, 169afterprint 185AJAX 237, 249

charger un fichier 237Album photos 85Alias 37alt 75animate() 232Animations 211

en jQuery 226personnalisées 232

Apparition 228Arrière-plan d'un conteneur 77Arrondis 89article 163ASCII 29aside 163attr() 40Attributs des caractères 49audio 201

jQuery 203autofocus 124

B

b 24background:url 150

Index

258 Index

background-color 59, 150background-image 47background-position 47background-repeat 47Balises 3beforeonload 185beforeprint 185Bibliothèque jQuery 7, 16block 43, 159, 160blur 185, 190body 21BOM 9border 75border-collapse 145border-radius 93border-spacing 146box-shadow 89br 22Byte Order Mark 9

C

CAC 40 249callback 228canplay 192canplaythrough 192Centrer une image dans un conteneur 79change 190Changements d'échelle 216Charset 9checked 34Choisir un hébergeur 251Chrome 7class 30, 75Classe 30Clavier, événements 187click 188Code

multifichier 19tout en un 19

Code ASCII 29color 59color-stop 70colspan 147Compatibilité 4contains 34contextmenu 190Corps du document 21Couleur

d'arrière-plan 59des éléments 59du texte 59

modification progressive 224Créer un nom de domaine 252css() 39CSS 2, 29

dans les balises 13feuille de styles externe 14feuille de styles interne 13vs HTML 15

CSS3 12préfixe 5

cursive 47

D

datalist 117Date 234dblclick 188dd 44Déclaration de type de document 4delay() 233Détecter l'inclinaison d'un appareil 197DeviceOrientationEvent 196dfn 44Différer une animation 233Disparition 228display 79DOCTYPE 4Document Object Model 4Documents, organisation 160DOM 4drag 188dragend 188dragenter 188dragleave 188dragover 188dragstart 188drop 188dt 44DTD 4durationchange 192

E

edits 160Éléments 3

arrondir 93audio 201

em 24embedded content 160emptied 192empty 34enabled 34

Index 259

enctype 121ended 192error 186, 192Événements

clavier 187formulaires 190médias 192orientation 196souris 188

Exercices1 422 573 724 885 976 1117 1378 1389 15710 18111 18112 18113 19914 20915 23616 249

Expression régulière 129

F

fadeIn() 231fadeOut() 231fantasy 47Fenêtre

événements 185Feuille de styles 4

externe 12, 14interne 12, 13

fFormulairedéfinir 113

fieldset 116FileZilla 253Firefox 6first-of-type 33fixed 164, 165float 72, 170focus 186, 191Focus 124Fondu enchaîné 231font-family 47font-size 48Font Squirrel 52

font-style 49font-variant 50font-weight 49footer 163formchange 191forminput 191forms 160Formulaires 113

de login 118d'envoi de fichier 121de saisie de commentaires 120éléments 116envoi par e-mail 114événements 190

FTP 253

G

Gestion événementielle 183en CSS 184en HTML 183en jQuery 185

getHours() 234getMinutes() 234getSeconds() 234Google Chrome 7gradient 62, 65, 67Gradient

diagonal 65horizontal 64linaire multiple 65linéaire 62radial 67

à deux couleurs 67multiple 70restreint 69

vertical 63grouping content 160

H

h1 23h6 23haschange 186header 163Hébergeur 251height 75hide() 228Horloge 235html() 38HTML 2

commentaires 11

260 Index

validation 11html5test 4

I

i 24id 28, 75Images 75

alt 75border 75class 75empiler 82height 75id 75insérer 75légender 78liens hypermédia 78préchargement 83réactives 84survol 81title 75width 76

img 75img:hover 81Inclinaison 197, 219inline 43, 159, 160inline-block 159, 160input 191input:required 129input type= 116, 117Insérer une image 75interactive elements 160Internet Explorer 9 5invalid 191ISO-8859-1 9

J

jQuery 3, 7, 37chaînage 41enchaîner plusieurs disparitions/

apparitions 229sélecteur CSS 37sélecteurs spécifiques 38

K

keydown 187keypress 187keyup 187Konqueror 5

L

label 116Langue

de traitement 10du document 9primaire 10

last-child 33last-of-type 34legend 116Légendes 78li 25Liens

e-mail 29hypertexte 27, 54vers un fichier 29

linear-gradient 62, 65Link 13Listes

à puces 25HTML 44numérotées 25personnaliser 45

list-style-image 45list-style-type 34, 45load 186load() 237loadeddata 192loadedmetadata 193loadstart 193localStorage 134

M

Marges 175margin 175mark 25Matrices 220matrix 222Media Queries 177Médias, événements 192, 196menu 99Menus 99

déroulant 103horizontal 109vertical 106

horizontal 100vertical flottant 99

message 186Meta 9, 10metadata 160Midori 5

Index 261

Mise en forme 15Mise en ligne d'un site 251Mise en page 159

sur plusieurs colonnes 172monospace 47mousedown 188mousemove 189mouseout 189mouseout() 82mouseover 189mouseover() 82mouseup 189mousewheel 189Mozilla 5MP4 205Multicolonnage 172multipart/form-data 121

N

nav 163Nom de domaine 252not 34Notepad++ 6, 7nth-child 33nth-last-child 33nth-last-of-type 33nth-of-type 33

O

offline 186Ogg Theora 205ol 26Ombrages 89Omni Web 5onabort 192onafterprint 185onbeforeonload 185onbeforeprint 185onblur 185, 190oncanplay 192oncanplaythrough 192onchange 190onclick 188oncontextmenu 190ondblclick 188ondrag 188ondragend 188ondragenter 188ondragleave 188ondragover 188

ondragstart 188ondrop 188ondurationchange 192onemptied 192onended 192onerror 186, 192onfocus 186, 191onformchange 191onforminput 191onhaschange 186oninput 191oninvalid 191onkeydown 187onkeypress 187onkeyup 187online 186onload 186onloadeddata 192onloadedmetadata 193onloadstart 193only-child 34only-of-type 34onmessage 186onmousedown 188onmousemove 189onmouseout 189onmouseover 189onmouseup 189onmousewheel 189onoffline 186ononline 186onpagehide 186onpageshow 186onpause 193onplay 193onpopstate 186onprogress 193onratechange 193onreadystatechange 193onredo 186onresize 186onscroll 189onseeked 193onseeking 193onselect 191onstalled 193onstorage 186onsubmit 191onsuspend 193ontimeupdate 193onundo 186

262 Index

onunload 186onvolumechange 193onwaiting 193opacity 225Opera 5option 117output 117

P

p 23padding 94, 175padding-left 47pagehide 186pageshow 186Pages Web, optimiser 179Paragraphes 23pause 193play 193Polices 47

libres de droits 52popstate 186position 164Positionnement

absolute 169fixed 165relative 167static 165

Préfixes 5CSS3 5

progress 193Propriétés, modification progressive 224Pseudo-classes 31

first-child 31focus 32hover 32lang 32link 31visited 31

Pseudo-élémentsfirst-letter 32first-line 32

R

radial-gradient 67ratechange 193readystatechange 193Recommandation candidate 5redo 186Référencement 10relative 164, 167

Rendu 160required 127resize 186Responsive Web Design 177RGB 59RGB() 60RGBA 59RGBA() 61root 33, 160Rotations 214rowspan 147

S

Safari 5sans-serif 47scale 216scaleX 218scaleY 218scripting 160scroll 189sections 160seeked 193seeking 193select 117, 191Sélecteurs

CSS 30, 32de classe 30évolués 33hiérarchiques 33

selection 34serif 47setInterval() 234show() 228Site Web 1skew 219small 25Sondage 123Souris, événements 188Squelette standard 7, 10stalled 193static 164, 165Stockage local de données 113, 134storage 186strong 24Styles, feuille de styles interne 13submit 191suspend 193

T

table 141

Index 263

Tableaux 141ajouter une légende 149alignement dans les cellules 152arrière-plan des cellules 150arrondis et ombrages 155bordures 144

fusionnées 145séparées 145

cellules vides 154définir 141, 142espacer les cellules 146fusionner des cellules 147lignes paires et impaires 153

tabular data 160Tags 3Taille des caractères 48target 34text-align 152textarea 117text-decoration 49, 55Texte, ombrage 92text-indent 50text-level semantics 160text-shadow 92text-transform 49Timer 234timeupdate 193title 75Title 10Titre du document 10Titres et sous-titres 23tr:nth-child() 153Transférer les fichiers en FTP 253transform 211, 216, 219, 222Transformations 211

animer 225échelle 216inclinaison 219

matrice 220transition 223Transitions 211, 223Translations 211Transparence

et opacité 61modification progressive 225

U

u 25ul 25undo 186unload 186UTF-8 9

V

Validationd'adresses URL 128de données 127d'e-mails 128du code 11par une expression régulière 129

validator.nu 11vertical-align 79, 152video 193, 205

jQuery 207volumechange 193

W

waiting 193Webkit 5WebM 205width 76

Z

z-index 82

html5-css3-jquery de Michel Martin.pdf

Documents

Transcript of html5-css3-jquery de Michel Martin.pdf