html5-css3-jquery de Michel Martin.pdf

Michel Martin

HTML5, CSS3 & jQuery

Table des matières Introduction ......................................................................................................VII Les sources de l’ouvrage .................................................................................................................VII Site compagnon..................................................................................................................................VII Rubriques spéciales de ce livre.................................................................................................... VIII Joindre l’auteur ................................................................................................................................. VIII

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

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

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

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

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

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

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

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

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

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

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

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

Table des matières  V

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

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

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

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

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

VI  Table des matières

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

Les sources de l’ouvrage Les éditions Pearson mettent à disposition sur le site www.moneformation.fr l’ensemble des codes passés en revue dans cet ouvrage. Ces codes sont rassemblés dans une archive au format ZIP. Pour accéder aux fichiers correspondants, il vous suffit de déziper cette archive en double-cliquant dessus dans l’Explorateur de fichiers et en cliquant sur Extraire tout dans la barre d’outils.

Site compagnon Cet ouvrage est accompagné d’un site Web sur lequel se trouvent tous les corrigés des exercices en vidéo. Pour accéder à ces derniers, rendez-vous à l’adresse www. moneformation.fr, inscrivez-vous pour activer votre compte et accéder aux corrigés des exercices. Vous aurez besoin de consulter le présent ouvrage pour créer votre compte et répondre à la question de sécurité. Chaque fois que vous voudrez réaliser un exercice de l’ouvrage, vous pourrez vous référer à la page correspondante de l’exercice sur le site Web.

Introduction  VII

Rubriques spéciales de ce livre Astuce Elles fournissent des remarques particulières ou des raccourcis inhabituels du langage.

Info Elles donnent des informations complémentaires sur le sujet étudié, sans être indispensables pour la tâche en cours.

Attention Elles attirent votre attention sur des points particulièrement importants ou qui demandent une relecture pour être correctement assimilés.

Joindre l’auteur Une question ? Une remarque ? Une suggestion ? N’hésitez pas à me joindre en vous rendant sur le site www.mediaforma.com et en sélectionnant l’onglet Contact.

VIII Introduction

1 Avant de commencer Cet ouvrage est consacré aux langages de programmation HTML5, CSS3 et jQuery. Vous vous demandez certainement s’il est absolument nécessaire d’apprendre ces trois langages, ou si vous pouvez vous limiter au HTML. Cette question est tout à fait licite, car les pages Web sont écrites en HTML. Ce langage devrait donc suffire ! S’il est vrai que, contrairement au HTML, les langages CSS et jQuery ne sont pas obligatoires, vous verrez qu’ils apportent un confort non négligeable et que, tout bien considéré, ils sont quasiment incontournables pour quiconque désire créer un site Web bien structuré, facilement maintenable et agréable à utiliser…

Mais, au fait, qu’est-ce qu’un site Web ? Un site Web est constitué d’une ou de plusieurs pages Web.

Attention Je dis bien "site Web" et non "site Internet" ! Beaucoup de personnes considèrent qu’Internet se limite au Web et parlent tout naturellement de sites Internet. Mais alors, est-ce que l’échange de messages e-mail, les téléchargements FTP et les dialogues en direct ne font pas partie d’Internet ? Bien sûr que si ! Comme vous lisez cet ouvrage, vous allez acquérir une certaine expérience dans le développement de sites Web et, en tant qu'"expert", il est important que vous utilisiez le bon vocabulaire.

Lorsqu’un site est constitué d’une seule page, il se contente d’afficher un nombre réduit d’informations, ou il utilise une technique qui lui permet d’afficher plusieurs pages dans une seule. Ceci est possible en mettant en place un système d’onglets qui contiennent chacun une partie des informations à afficher. Lorsqu’un site est constitué de plusieurs pages, ces dernières sont reliées entre elles par des liens hypertexte ou hypermédia. Dans la Figure 1.1, par exemple, cet extrait de page contient plusieurs liens hypertexte et hypermédia.

Figure 1.1 Cette figure représente une partie de la page principale du site www.microsoft.com.

Vous l’aurez compris, les liens hypertexte sont des éléments textuels sur lesquels on peut cliquer pour accéder à d’autres pages. Quant aux liens hypermédia, ils sont également cliquables, mais représentés par des éléments non textuels (des images en général). La page principale d’un site est appelée "page d’accueil" ou "homepage". C’est elle qui donne accès aux autres pages du site, en utilisant une structure arborescente dans laquelle les pages de tous les niveaux peuvent faire référence aux pages des autres niveaux.

Figure 1.2 La structure arborescente d’un site composé de six pages.

Qu’apporte chaque langage ? Les langages HTML, CSS et jQuery sont utilisés dans des domaines très différents : ■■ Le HTML permet de définir le contenu des pages. Entendez par là le texte, les images et les autres éléments qui doivent être affichés dans le navigateur. Dans cet ouvrage, nous utiliserons la version 5 du langage. Il s’agit en effet d’un standard unanimement reconnu et universellement utilisé dans tous les navigateurs récents, sur les ordinateurs, les tablettes et les téléphones. ■■ Le CSS permet de mettre en forme les éléments affichés (dimensions, bordures, couleurs, etc.) et de les agencer dans les pages (position, marges, ancrage, etc.). Dans cet ouvrage, nous utiliserons la version 3 du langage. Certaines instructions CSS3 ne sont pas encore finalisées, mais les choses vont en s’améliorant au fil du temps. 2  Chapitre 1

■■ Le jQuery est essentiellement utilisé pour apporter du mouvement et de l’interactivité aux pages Web. Nous l’utiliserons pour animer des zones de l’écran et pour réagir aux actions de l’utilisateur. Comme vous commencez à le pressentir, ces trois langages forment un tout et la réalisation de pages Web en omettant l’un d’entre eux n’est pas une bonne idée. Rassurez-vous, votre apprentissage se fera de façon progressive, pratique et indolore. Très vite, vous serez capable de créer des sites évolués et compatibles avec les standards actuels.

Info jQuery n’est pas un langage, mais une bibliothèque, qui vient compléter et simplifier l’utilisation du langage JavaScript.

Vocabulaire et conventions d’écriture Avant de commencer votre apprentissage, vous devez connaître quelques termes techniques : Le langage HTML est composé de balises (ou tags) délimitées par les signes "". Voici quelques balises utilisables en HTML : et et

Les balises sont généralement ouvertes et fermées. Le signe "/", précisé après le "". Par exemple :

Lorsque les signes "" 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 suivante utilise l’attribut src pour indiquer le chemin et le nom de l’image à afficher :

D’une manière plus générale, toutes les balises HTML sont construites sur le même modèle :

Où élément est le nom d’un élément HTML (a, img, link ou body par exemple), les attr sont des attributs HTML et les val sont les valeurs affectées à ces attributs. Les

Avant de commencer  3

couples attribut-valeur permettent de paramétrer l’élément auquel ils s’appliquent. Par exemple, vous pouvez définir l’adresse de la page à atteindre dans un lien hypertexte , l’image à afficher dans une balise , ou encore le nom d’un formulaire dans une balise . 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 :

Par convention, seule la balise DOCTYPE est écrite en majuscules dans un document HTML5. Toutes les autres balises seront donc systématiquement écrites en caractères minuscules. Les instructions CSS sont généralement regroupées dans l’en-tête du document HTML ou dans un fichier spécifique appelé "feuille de styles". Elles consistent en un ensemble de couples "propriété: valeur;". Voici quelques instructions CSS : background: yellow; float: left; height: 20px;

jQuery est essentiellement utilisé pour interagir avec le DOM (Document Object Model). Cet acronyme fait référence à une structure de données qui représente un document HTML comme une arborescence. Avec jQuery, vous pouvez interroger le DOM pour connaître les caractéristiques des balises (attributs et valeurs HTML, mais aussi propriétés et valeurs CSS) et les modifier. La fonction jQuery(), souvent remplacée par son alias $() pour raccourcir l’écriture, est le point d’entrée de la bibliothèque jQuery. Elle permet d’accéder à toutes les méthodes de la bibliothèque. Lorsqu’une méthode jQuery est invoquée, elle retourne un objet jQuery, qui consiste en zéro, un ou plusieurs éléments piochés dans le DOM. Voici un exemple d’instruction jQuery : $('#affiche').html('La condition est respectée');

Ici, le texte "La condition est respectée" est affecté à l’élément d’identifiant affiche du DOM.

Compatibilité HTML5/CSS3 Alors que nous écrivons ces lignes, quelques nouveaux éléments propres au langage HTML5 ne sont pas encore entièrement implémentés sur les navigateurs. Pour connaître le taux de compatibilité de votre navigateur, rendez-vous sur la page http://html5test.com/. Un compte rendu clair et succinct y sera présenté et une note lui sera attribuée. Comme le montre la Figure 1.3, Google Chrome est aujourd’hui le navigateur le plus compatible avec le standard HTML5.

4  Chapitre 1

Figure 1.3 Comparaison des navigateurs Google Chrome 30, Firefox 25 et Internet Explorer 11 sous Windows 8.1.

Les éléments inconnus du navigateur sont généralement ignorés. Mais il est possible de leur affecter un style en utilisant une feuille de styles CSS. Notez cependant qu’un traitement particulier doit être réservé à Internet Explorer 8 et inférieur. En effet, celui-ci doit intégrer les éléments inconnus à son DOM via la méthode createElement. Sans quoi, il ne sera pas en mesure de leur affecter un style. D’autre part, il est nécessaire d’attribuer un rendu block à ces éléments en initialisant leur propriété CSS display. Nous y reviendrons en détail par la suite. Concernant le langage CSS, les principaux navigateurs utilisent un préfixe pour (pré) implémenter les nouvelles propriétés CSS3 : ■■ -moz pour les navigateurs Mozilla (Firefox) ; ■■ -webkit pour les navigateurs Webkit (Safari, OmniWeb, Midori, etc.) ; ■■ -khtml pour les navigateurs Konqueror ; ■■ -o pour les navigateurs Opera ; ■■ -ms pour le navigateur Internet Explorer 9 et supérieur. Tant que la spécification du langage n’a pas atteint au moins le statut de recommandation candidate, vous devrez utiliser plusieurs préfixes dans les propriétés CSS3 pour assurer la plus grande compatibilité possible. À terme, ces préfixes ne devraient plus avoir cours et une seule instruction devrait être interprétée à l’identique dans tous les navigateurs. Wait and see… Si vous utilisez encore des fonctions CSS spécifiques d’Internet Explorer (DropShadow(), filter() ou gradient(), par exemple), mieux vaut les inclure dans une feuille de styles particulière, appelée dans un commentaire conditionnel, dans l’en-tête du document :

Avant de commencer  5

Si, par la suite, vous décidez de remplacer ces fonctions par du code CSS3, il vous suffira de supprimer l’élément link correspondant.

Les outils de développement Pour pouvoir développer en HTML5/CSS3/jQuery, vous devez télécharger puis installer quelques briques logicielles : l’éditeur Notepad++, les navigateurs Firefox et Chrome et la bibliothèque jQuery.

Notepad++ Notepad++ est un éditeur de code multilangage à coloration syntaxique. Distribué sous licence GPL, vous pouvez librement l’installer et l’utiliser sur votre ordinateur. Rendezvous sur la page http://notepad-plus-plus.org/fr/, cliquez sur Téléchargement dans la partie gauche de la page, puis sur DOWNLOAD pour télécharger la dernière version en date de Notepad++. Le fichier téléchargé est une archive auto-extractible. Il suffit donc de double-cliquer dessus pour l’installer.

Figure 1.4 Téléchargement de Notepad++.

Firefox Firefox est un excellent navigateur Web. Il doit faire partie de la panoplie du développeur Web, afin de tester la compatibilité du code. Pour télécharger Firefox, rendez-vous sur la page www.mozilla.org/fr/firefox/new/ et cliquez sur le bouton Firefox, Téléchargement gratuit. Un fichier exécutable d’installation sera alors téléchargé. Cliquez sur Exécuter pour procéder à l’installation de Firefox sur votre ordinateur.

6  Chapitre 1

Google Chrome Chrome est actuellement le navigateur le plus compatible avec les langages HTML5 et CSS3. Vous vous devez donc de l’installer sur votre ordinateur, ne serait-ce que pour avoir un avant-goût des possibilités offertes par les instructions les plus évoluées de ces langages. Sans aucun doute possible, les autres navigateurs seront en mesure d’interpréter ces instructions dans un avenir proche. Pour télécharger Google Chrome, rendez-vous sur la page www.google.fr/intl/fr/ chrome/browser/ et cliquez sur Télécharger Google Chrome.

La bibliothèque jQuery jQuery est une bibliothèque JavaScript. En d’autres termes, il s’agit d’un fichier d’extension .js. Pour développer du code jQuery, il suffit de faire référence à la bibliothèque jQuery avec une instruction du type suivant :

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 :

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

Avant de commencer  7

Code minimal en HTML5 Voici le code minimal à utiliser pour une page HTML5 :

La balise indique qu’il s’agit d’une page développée en HTML5. Les balises et délimitent le document HTML. Les balises et 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 et délimitent le document. C’est ici que vous insérerez le contenu (texte, images, etc.) qui doit être affiché dans la page. Tapez ce code dans Notepad++. Lancez la commande Enregistrer dans le menu Fichier et sauvegardez le code sous le nom squelette.html, en sélectionnant Hyper Text Markup Language dans la liste déroulante Type (voir Figure 1.5).

Figure 1.5 Le code est sauvegardé dans un fichier HTML.

Dès que le fichier est sauvegardé, les instructions changent de couleur. En effet, Notepad++ sait maintenant que les instructions sont écrites en HTML et il peut leur appliquer une coloration syntaxique (voir Figure 1.6).

8  Chapitre 1

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

Langue du document La langue française utilise des caractères spécifiques tels que é, è, â, ç, etc. Pour que ces derniers soient affichés correctement dans tous les navigateurs du monde, vous devez utiliser un jeu de caractères (ou charset). Les charsets ( jeux de caractères) sont associés à la notion de claviers nationaux. Pour indiquer aux navigateurs dans quel jeu de caractères vous travaillez, vous pouvez insérer une balise 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 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. Avant de commencer  9

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 :

■■ 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 , toutes les autres balises hériteront de cette langue :

Référencement La balise 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. )

Info La balise ne fait plus partie de l’algorithme d’indexation de Google. Autant dire qu’elle est devenue quasiment… obsolète !

Titre du document Le titre du document est spécifié entre les balises et , dans l’en-tête du document. Le texte entré entre ces deux balises est affiché dans la barre de titre du navigateur. Il joue également un rôle très important dans le référencement de la page. Il est donc important de choisir un titre approprié pour chaque page.

Squelette standard HTML5 Compte tenu des remarques précédentes, le squelette standard devient donc le suivant :

10  Chapitre 1

Titre de la page

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

Valider le code HTML Avant de tester un code HTML5 dans votre navigateur, je vous conseille de vous assurer de sa conformité. Pour cela, rendez-vous à la page http://html5.validator.nu. Selon la valeur sélectionnée dans la liste déroulante Validator Input, le fichier HTML5 testé peut se trouver sur un serveur Web (Address), sur un disque local (File Upload) ou être entré directement sur la page Web du validateur (Text Field). La Figure 1.7 illustre un exemple de validation de code depuis un serveur Web.

Figure 1.7 Le code HTML5 est valide.

Avant de commencer  11

Info Si vous préférez utiliser le validateur du W3C, tapez l’adresse suivante dans la barre d’adresse de votre navigateur : http://validator.w3.org/.

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

Où écrire le code CSS ? Le code CSS peut être écrit : ■■ dans les balises concernées ; ■■ dans l’en-tête du document (on parle de feuille de styles interne) ; ■■ dans un fichier séparé (on parle de feuille de styles externe). Ces trois techniques n’ont pas la même "précédence". Entendez par là que si vous affectez trois valeurs différentes à une même propriété CSS (une dans une balise HTML, une dans l’en-tête du document et une dans une feuille de styles externe), deux des valeurs affectées seront écrasées par la troisième. Mais alors, qui est le vainqueur dans cette foire d’empoigne, et quelle est l’utilité d’un tel fonctionnement ? Eh bien, le code CSS écrit dans une balise écrase celui qui est défini dans l’en-tête du document, et ce dernier écrase celui qui est défini dans une feuille de styles externe. Imaginez le scénario suivant : vous définissez toutes les propriétés de mise en forme et de mise en page de votre site dans une feuille de styles externe. Cette feuille de styles est utilisée par toutes les pages de votre site afin de leur conférer un même look and feel. Imaginez maintenant qu’il soit possible de modifier quelques propriétés CSS dans chaque page afin de leur donner une mise en forme/en page qui reprend les lignes générales du site, mais qui, par certains côtés, leur confère un aspect unique. Pour arriver à ce résultat, il vous suffira de redéfinir ces propriétés dans l’en-tête de chaque page. Enfin, supposons que certaines balises ne doivent pas se conformer aux règles définies dans la feuille de styles externe et/ou interne. Pour cela, vous définirez leurs caractéristiques directement dans les balises.

12  Chapitre 1

Styles CSS dans les balises Pour définir des propriétés CSS dans une balise, vous utiliserez l’attribut style :

où : ■■ balise est un nom de balise : ou , 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 : Ce texte a un arrière-plan jaune

Pour utiliser la police Verdana corps 18 dans un titre h2, vous utiliserez le code suivant : Ce titre est en Verdana corps 18

Attention À moins que vous ne désiriez écraser les propriétés définies par défaut dans une feuille de styles externe, cette technique n’est pas optimale, car elle est limitée au seul élément qui l’utilise. Dans la mesure du possible, privilégiez l’utilisation d’une feuille de styles externe (fichier d’extension .css) reliée au document à l’aide d’un élément link. Cette même feuille de styles pourra être utilisée dans tous les documents apparentés pour uniformiser leur apparence.

Feuille de styles interne Dans la section précédente, vous avez vu qu’il était possible de définir des attributs de mise en forme directement dans les balises HTML. Pour étendre la portée de ces définitions, vous pouvez les regrouper dans l’en-tête du document HTML, entre les balises et  :

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.

Avant de commencer  13

À 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 : Une feuille de styles interne p {background-color:yellow;} h2 {font-family:Verdana; font-size: 18px;} …

Attention Cette technique n’est pas optimale, car elle est limitée au seul document qui l’utilise. Dans la mesure du possible, privilégiez l’utilisation d’une feuille de styles externe (fichier d’extension .css) reliée au document à l’aide d’un élément link. Elle pourra être utilisée dans toutes les pages d’un même site pour uniformiser leur apparence.

Feuille de styles externe Pour étendre encore le champ d’action des styles définis dans l’en-tête d’un document, vous pouvez les stocker dans une feuille de styles externe (fichier .css). Dans ce cas, plusieurs pages HTML pourront utiliser cette feuille de styles afin d’obtenir une même mise en forme/mise en page. Pour relier une feuille de styles externe à un document HTML, vous utiliserez la balise (ici, la feuille de styles a pour nom 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 : Une feuille de styles externe

14  Chapitre 1



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 . 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èreplan, la hauteur de la bannière, la police des titres h2, ou n’importe quelle autre propriété), vous n’aurez qu’un seul fichier à modifier : la feuille de styles externe. Les modifications seront automatiquement reportées sur toutes les pages du site, qu’il s’agisse de quelques pages seulement ou de plusieurs centaines !

Un exemple de code CSS Ce document HTML affiche une liste à puces comportant quatre points. La mise en forme du document est assurée par la feuille de styles externe moncss.css : Liste à puces avec style externe Une liste à puces : Premier Deuxième Troisième Quatrième

Voici le code de la feuille de styles moncss.css : li { color: blue;

Avant de commencer  15

}

background: #FF4040; margin: 14px 14px 14px 14px; list-style: square;

Ici, nous définissons les caractéristiques de la liste à puces : ■■ Couleur des caractères : blue. ■■ Arrière-plan : #FF4040. ■■ Marges : 14px. ■■ Style des puces : square. Le résultat de ce code est représenté dans la Figure 1.8.

Figure 1.8 Tous les éléments de la liste ont été affectés par la feuille de styles externe.

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

Où écrire le code jQuery ? Pour être en mesure d’utiliser du code jQuery, vous allez dans un premier temps faire référence à la bibliothèque jQuery avec l’instruction suivante :

Vous pourrez ensuite insérer des instructions jQuery dans le code HTML, entre les balises et  :

16  Chapitre 1

// Une ou plusieurs instructions jQuery

Comme nous l’avons dit précédemment, jQuery est utilisé pour interroger et pour modifier le DOM, c’est-à-dire les éléments affichés dans une page Web. Imaginez que vous commenciez à interroger/modifier des éléments qui ne sont pas encore affichés. Cela produirait une belle pagaille, et peut-être même un "plantage" du navigateur. La première précaution à prendre lorsque l’on écrit du code jQuery est donc de s’assurer de la disponibilité du DOM. Voici comment cela s’écrit en jQuery : jQuery(document).ready(function(){ // Ici, le DOM est entièrement disponible });

Fort heureusement, cette syntaxe peut être simplifiée : $(function(){ // Ici, le DOM est entièrement disponible });

Un grand pas en avant a été franchi ! Vous savez maintenant faire référence à la bibliothèque jQuery et attendre la disponibilité du DOM. Il ne reste plus qu’à écrire quelques instructions entre les accolades pour manipuler le DOM !

Que peut apporter jQuery à un document HTML ? Vous vous demandez certainement pourquoi ajouter du code jQuery à un document HTML mis en forme/en page par des règles de style CSS. Eh bien, jQuery apporte plusieurs avantages : ■■ Les éléments affichés sur l’écran peuvent réagir aux actions de l’utilisateur. Par exemple, il est possible d’effectuer des calculs et d’afficher un résultat lorsque l’utilisateur clique sur un bouton. Ou encore de modifier les caractéristiques d’un élément suite à certains événements (frappe au clavier, clic souris, heure système, etc.). ■■ Les éléments affichés dans une page peuvent être facilement animés (apparition, disparition, translation) de façon automatique ou suite à une action de l’utilisateur. ■■ En utilisant la technologie AJAX, jQuery peut mettre à jour une partie de la page Web courante. Par exemple, pour afficher le nom des personnes connectées à un site Web, ou encore pour mettre à jour le cours d’une action cotée en Bourse. Vous voyez, les avantages de jQuery ne manquent pas. Et tout ce que nous venons de citer n’est pas réalisable en HTML5/CSS3. J’espère vous avoir convaincu. Si ce n’est pas encore tout à fait le cas, les pages suivantes devraient plaider en faveur de jQuery !

Un exemple de code jQuery Dans ce code, un texte est affiché en HTML, directement dans le corps du document, et un autre est affiché dans une balise par une instruction jQuery :

Avant de commencer  17

HTML et jQuery Ce texte est affiché en HTML $(function(){ $('#texte2').html('... et celui-ci par jQuery.'); });

Pour l’instant, il n’est pas utile que vous compreniez le fonctionnement de ce programme. Remarquez juste qu’un d’identifiant texte2 est défini dans le corps du document :

Et que ce 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 (voir Figure 1.9).

Figure 1.9 HTML et jQuery cohabitent parfaitement.

HTML, CSS et jQuery : deux approches Dans la section précédente, vous avez vu que le code jQuery pouvait se trouver dans le fichier HTML de la page. De la même façon, vous pouvez insérer le code CSS dans la feuille de styles interne de la page pour former un code "tout en un" : HTML + CSS + jQuery. Inversement, vous pouvez créer plusieurs fichiers : 18  Chapitre 1

■■ Un pour le code HTML, limité au squelette standard et aux données qui doivent être affichées dans la page. ■■ Un pour le code CSS (feuille de styles externe) contenant les règles de mise en forme et de mise en page. ■■ Un ou plusieurs pour le code jQuery. Ces éléments sont alors appelés en utilisant autant de balises 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 HTML, CSS et jQuery tout en un p {background-color: lime;} span {background-color: red;} Ce texte est affiché en HTML $(function(){ $('#texte2').html('... et celui-ci par jQuery.'); });

Le code, en version multifichier Voici le code HTML : HTML seul Ce texte est affiché en HTML

Avant de commencer  19



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.

20  Chapitre 1

2 Premiers pas en HTML, CSS et jQuery Arrivé à ce point dans la lecture de l’ouvrage, vous êtes en mesure de créer un squelette HTML5 standard, de définir des règles de mise en forme CSS (directement dans les balises, dans une feuille de styles interne ou externe) et d’invoquer la bibliothèque jQuery. Bien que nécessaires, ces connaissances ne sont pas encore suffisantes pour créer des pages Web dignes de ce nom. Ce deuxième chapitre va enrichir votre connaissance des trois langages et vous permettre de faire vos premiers pas en solo. Tournez vite les pages.

Les bases du HTML Vous vous en doutiez, votre apprentissage va commencer par le langage HTML. Ceci est tout à fait logique puisque c’est ce langage qui permettra de construire les fondations de vos pages Web.

Textes, sauts de ligne et paragraphes Les éléments textuels insérés dans le corps du document, c’est-à-dire entre les balises et , 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 : Espaces et sauts multiples

Ce texte est volontairement écrit sur

plusieurs lignes et sont insérées

de multiples espaces entre les mots

D’après vous, comment sera affiché ce texte dans le navigateur  ? Jetez un œil à la Figure 2.1 pour constater à quel point votre navigateur peut manquer de discernement ! Figure 2.1 Les espaces multiples et les sauts de ligne sont ignorés.

Pour indiquer au navigateur que vous voulez passer à la ligne, vous utiliserez la balise (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 : Espaces et sauts multiples Ce texte est volontairement écrit sur plusieurs lignes et          ➥  de multiples espaces sont insérées           ➥entre les mots

Comme le montre la Figure 2.2, cette fois-ci, les espaces et les sauts de ligne sont bien interprétés.

Figure 2.2 Le navigateur se comporte bien… lorsqu’on lui parle correctement.

22  Chapitre 2

Pour terminer cette section, sachez que vous pouvez également utiliser la balise pour créer des paragraphes. À titre d’exemple, si vous insérez ces trois lignes de code entre les balises et d’un squelette standard, vous obtenez le résultat représenté à la Figure 2.3 : Ceci est un premier paragraphe. Ceci est un deuxième paragraphe. Et ceci est un troisième paragraphe.

Figure 2.3 Contrairement aux sauts de ligne , un espace supplémentaire est inséré entre chaque paragraphe.

Info En utilisant des règles CSS simples, il est possible de définir la taille des espaces affichés avant et après un paragraphe.

Titres et sous-titres sur une page Lorsque vous saisissez le contenu d’une page Web, il est bon de le structurer en utilisant des balises de titre. Six niveaux de titre sont possibles : à . La Figure 2.4 montre comment est interprété ce code dans un navigateur : Titres h1 à h6 Ceci est un titre h1 Ceci est un titre h2 Ceci est un titre h3 Ceci est un titre h4 Ceci est un titre h5 Ceci est un titre h6

Premiers pas en HTML, CSS et jQuery  23

Figure 2.4 Les six niveaux de titre du HTML.

Le texte inséré dans une balise de titre est important pour les personnes qui lisent la page Web, mais également pour les moteurs de recherche qui référencent la page. Il est donc important de choisir des titres en accord avec le contenu de chaque section.

Mettre en valeur du texte avec des balises HTML Selon le W3C : "La balise 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 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  met en avant de façon modérée une portion de texte. Vous utiliserez la balise pour mettre en avant un texte plus important. Quant à la balise , 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 . Tapez ce code entre les balises et et exécutez-le. Vous devriez obtenir le résultat représenté Figure 2.5 : Ce texte est affiché en gras mais n’est pas mis Ce texte est affiché en gras et est mis en Ce texte est affiché en italique mais n’est pas Ce texte est affiché en italique et est mis en

en avant avant mis en avant avant

Figure 2.5 Visuellement, aucune différence entre b et strong ni entre i et em.

24  Chapitre 2

Comme vous pouvez le voir, les balises et produisent le même effet dans le navigateur. Il en va de même pour les balises et . 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 et si vous voulez mettre en avant un mot ou un bloc de texte tout en modifiant son allure. En revanche, vous utiliserez les balises et 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 et  ; ■■ le surligner en l’entourant des balises et  ; ■■ l’afficher en caractères de petite taille, en l’entourant des balises et . Tapez ce code entre les balises et et exécutez-le. Vous devriez obtenir le résultat représenté Figure 2.6 : Ce texte est marqué Ce texte est souligné Ce texte est affiché en caractères de petite taille

Figure 2.6 D’autres formes de différenciation.

Listes à puces et listes numérotées Les listes à puces et les listes numérotées sont monnaie courante sur le Web. Elles permettent de créer des énumérations non chronologiques ou chronologiques. Dans le premier cas, les entrées de la liste sont précédées d’un tiret, d’une puce ou d’un autre caractère. Dans le second cas, les entrées de la liste sont précédées d’un nombre croissant, ce qui leur confère un aspect temporel. Une liste à puces est délimitée par les balises et (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 et (voir Figure 2.7) : Premier Deuxième Troisième Quatrième

Premiers pas en HTML, CSS et jQuery  25

Figure 2.7 Une liste à puces.

Une liste numérotée est délimitée par les balises et (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 et (voir Figure 2.8) : Premier Deuxième Troisième Quatrième

Figure 2.8 Une liste numérotée.

Il est possible d’imbriquer plusieurs liste. Pour cela, il suffit d’insérer une balise ou avant que la balise de la liste précédente ( ou ) n’ait été fermée. À titre d’exemple, le code suivant imbrique une liste numérotée dans une liste à puces, ellemême imbriquée dans une liste numérotée (voir Figure 2.9) : Entrée principale 1 Entrée secondaire 1 Entrée secondaire 2 Première entrée de niveau 3 Deuxième entrée de niveau 3 Troisième entrée de niveau Entrée secondaire 3 Entrée principale 2 Entrée principale 3 26  Chapitre 2

Figure 2.9 Trois listes imbriquées.

Liens hypertexte La magie du Web tient en grande partie aux liens hypertexte : en définissant des liens sur vos pages, il est possible de renvoyer l’utilisateur vers une page de votre site ou vers une page hébergée à plusieurs milliers de kilomètres… Les liens hypertexte sont définis avec la balise  : texte

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) : Cliquez ici pour accéder au ➥ site de Microsoft

Figure 2.10 Un clic suffit pour accéder au site de Microsoft France.

Premiers pas en HTML, CSS et jQuery  27

Lien vers une partie spécifique d’une page Lorsqu’une page contient un grand nombre d’informations, il peut être utile de marquer certains emplacements bien précis (des titres, par exemple) pour faciliter sa lecture. Vous pouvez alors vous déplacer rapidement vers les éléments marqués via un lien hypertexte. Pour marquer une balise quelconque, il suffit d’y insérer un attribut id. Par exemple : Un titre

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 : Haut de la page Accéder au bas de la page 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. Bas de la page Accéder au début de la page

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

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 : Accéder au bas de la page

À 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 : Accéder au début de la page

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 : Cliquez ici pour afficher la partie 2 de ➥l’introduction

28  Chapitre 2

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

Autres types de liens Les liens hypertexte ne pointent pas forcément vers des pages Web. Vous pouvez également définir un lien qui pointe vers un fichier. Ici, par exemple, le lien permet à l’utilisateur de télécharger le fichier document.pdf. Cliquez ici pour ➥télécharger document.pdf

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 : Cliquez ici pour m’envoyer un message

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) : Cliquez ici

Info Les espaces et les apostrophes ne sont pas permises dans le sujet du mail. Si ces caractères sont présents dans le sujet, vous les remplacerez par leur code ASCII : %20 et %27 respectivement.

Les bases du CSS Le CSS est un langage simple mais très étendu. Entendez par là qu’il est simple de le mettre en œuvre, mais difficile de connaître toutes les propriétés qu’il peut manipuler. Pour avoir un aperçu assez complet des propriétés CSS, prenez une grande respiration et allez faire un tour sur la page www.w3schools.com/cssref/. Vous comprendrez mieux ce que je veux dire… Premiers pas en HTML, CSS et jQuery  29

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

Modification de toutes les occurrences d’une balise Supposons que vous vouliez modifier les caractéristiques de tous les paragraphes (balises ) d’une page. Commencez par définir une feuille de styles interne entre les balises et 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 et , ajoutez des accolades et définissez les couples propriété-valeur correspondant aux caractéristiques que vous voulez modifier : p { propriété1: valeur1; propriété2: valeur2; etc. }

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 (, , , , etc.) dans une page, indiquez le nom de l’élément concerné et définissez autant de couples propriété-valeur que nécessaire.

Modification de certaines occurrences d’une balise Supposons maintenant qu’une page HTML contienne plusieurs paragraphes 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 . Pour arriver au but recherché, il faut donc non pas s’adresser à un élément dans la feuille de styles, mais à un sélecteur, c’est-à-dire à une entité capable de différencier les balises d’un même type : selecteur { propriété1: valeur1; propriété2: valeur2; etc. }

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 en bleu et celui de certaines autres en rouge, vous définirez les classes bleu et rouge comme ceci : Texte en bleu Texte en rouge

30  Chapitre 2

Vous vous doutez que ce code ne suffit pas pour changer la couleur du texte  : vous devez également écrire quelques lignes de CSS : .bleu {color: blue;} .rouge {color: red;}

Figure 2.12 Utilisation de classes CSS dans des paragraphes.

Le point décimal utilisé devant les mots bleu et rouge dans le code CSS indique qu’il s’agit d’un sélecteur de classe et non d’un élément HTML. Les classes peuvent concerner plusieurs balises, éventuellement de types différents. Par exemple, si vous affectez la classe rouge à une balise et à une balise , 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 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 de classe rouge et aux balises de classe r, vous utiliserez le sélecteur suivant : span.rouge, p.r {color: red;}

Pseudo-classes Le sélecteur de pseudo-classe est représenté par le caractère deux-points (:). Vous ferez appel aux pseudo-classes pour cibler des balises en fonction de caractéristiques inaccessibles aux sélecteurs traditionnels : premier enfant ou focus, par exemple. La pseudo-classe  :first-child permet de cibler le premier enfant d’une balise. Par exemple, pour mettre en gras la première balise enfant de la balise , vous utiliserez le sélecteur suivant : div p:first-child {font-weight: bold;}

Les pseudo-classes :link et :visited ciblent les balises 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}

Premiers pas en HTML, CSS et jQuery  31

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: '«

Info Pour que ce code puisse fonctionner, vous devez le stocker sur le serveur dans un fichier d’extension .php. Bien entendu, ces instructions ne donneront aucun résultat en local, sauf si vous installez un serveur PHP, tel WAMP Server (www.wampserver.com).

180  Chapitre 10

Exercice 10 Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.fr Remplacez les balises utilisées dans la page index.htm par leurs équivalents sémantiques HTML5 : , , et .

Exercice 11 Définissez une mise en page qui s’adapte à la largeur de la fenêtre pour la page index. htm. Lorsque la fenêtre a une largeur inférieure ou égale à 900 pixels : ■■ Supprimez le titre "eFormation HTML5 CSS3 jQuery" dans le bandeau d’en-tête. ■■ Transformez le menu en une liste .

Exercice 12 Appliquez la technique décrite dans la section "Optimiser les pages d’un site Web" pour insérer les instructions jQuery dans un fichier annexe que vous appellerez jquerysite.js. Appliquez la technique PHP décrite dans la section "Optimiser les pages d’un site Web" pour optimiser le découpage du fichier index.htm. Pour cela : 1. Définissez les parties constantes d’index.htm dans deux fichiers nommés debut.htm et fin.htm. 2. Renommez le fichier index.htm en index.php. 3. Utilisez deux instructions include pour invoquer les fichiers debut.htm et fin.htm dans le fichier index.php et, ainsi, simplifier le code de la page. Simplifiez le code des autres pages en utilisant la même technique.

Mise en page  181

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

Gestion événementielle en HTML Pour capturer un événement en HTML5, il suffit d’insérer l’attribut correspondant dans l’élément cible et de préciser le nom de la fonction JavaScript à exécuter, en lui passant zéro, un ou plusieurs arguments. Lorsque l’événement se produit, le code JavaScript correspondant est exécuté. Dans le code suivant, par exemple, trois événements sont capturés : ■■ chargement du document ; ■■ clic sur le bouton 1 ; ■■ clic sur le bouton 2. Ils exécutent respectivement les fonctions JavaScript load(), bouton() avec un argument égal à 1, et bouton() avec un argument égal à 2. Gestion événementielle function load() { document.getElementById("status").innerHTML = "L’événement 'load' a été ➥généré."; } function bouton(b) {

document.getElementById("status").innerHTML = "Le bouton " +b + " a été ➥cliqué."; } Status: En attente.' Bouton 1 Bouton 2

Le corps du document affiche un élément span d’id status, qui donne l’état du document, et deux boutons de commande. Au début du chargement de la page, l’élément span affiche le texte "En attente". Dès que le document est entièrement chargé dans le navigateur, l’événement onload() est généré et la fonction load() affiche le message "L’événement 'load' a été généré." dans l’élément span. Lorsque l’utilisateur clique sur un des boutons de commande, la fonction bouton() est exécutée. Elle affiche un message dans l’élément span qui dépend du paramètre transmis, et donc du bouton cliqué (voir Figure 11.1).

Figure 11.1 Le premier bouton a été cliqué.

Gestion événementielle en CSS CSS est assez pauvre en ce qui concerne la gestion événementielle. Vous utiliserez essentiellement les pseudo-classes :hover et :focus. La classe :hover cible l’élément qui est survolé par la souris. Lorsqu’un tel événement se produit, vous pouvez modifier ses caractéristiques en agissant sur une ou plusieurs de ses propriétés. Par exemple, pour ajouter une bordure rouge épaisse de 5 pixels autour des images contenues dans un document lorsqu’elles sont survolées par la souris, vous utiliserez le code CSS suivant : img:hover { border: 5px solid red;}

La pseudo-classe  :focus cible la balise qui a le focus (généralement une balise d’un formulaire). Elle permet de modifier la couleur d’arrière-plan (ou un autre style quelconque) de la balise qui a le focus. À titre d’exemple, cette instruction affecte un arrière-plan de couleur rouge à la balise input de type text qui a le focus : input[type=text]:focus {background: red;}

184  Chapitre 11

Gestion événementielle en jQuery jQuery est en mesure de réagir aux événements générés par la souris, le clavier et les éléments du DOM. Pour cela, vous devez définir une méthode de gestion événementielle en écrivant quelque chose comme ceci : $(sélecteur).événement(function(){ // Gestion de l’événement });

Où : ■■ sélecteur permet de sélectionner un ou plusieurs éléments du DOM. ■■ événement est le nom de l’événement à gérer. Par exemple, pour afficher une boîte de message lorsque l’utilisateur clique sur une image d’id #img, vous utiliserez le code suivant : Gestion événementielle $(function(){ $('#img').click(function(){ alert('Vous avez cliqué sur l\'image'); }); });

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

Attribut HTML

Exécution du script

afterprint

onafterprint

Après l’impression

beforeprint

onbeforeprint

Avant l’impression

beforeonload

onbeforeonload

Avant le chargement du document

blur

onblur

Lorsque la fenêtre perd le focus

Gestion événementielle  185

error

onerror

Lorsqu’une erreur est détectée

focus

onfocus

Lorsque le focus est donné à la fenêtre

haschange

onhaschange

Lorsque le contenu du document est modifié

load

onload

Lorsque le document est chargé

message

onmessage

Quand le message est généré

offline

onoffline

Au passage de l’état en ligne à l’état déconnecté

online

ononline

Au passage de l’état déconnecté à l’état en ligne

pagehide

onpagehide

Lorsque la fenêtre devient invisible

pageshow

onpageshow

Lorsque la fenêtre devient visible

popstate

onpopstate

Lorsque l’historique de la page change

redo

onredo

Après l’exécution d’un "redo"

resize

onresize

Au redimensionnement de la fenêtre

storage

onstorage

Au chargement d’un document

undo

onundo

À l’exécution d’un "undo"

unload

onunload

Lorsque l’utilisateur change de document

Pour illustrer l’utilisation de ces événements en HTML5, ce code affiche un message lorsque la page est entièrement chargée, puis juste avant le passage à une autre page. Evénements liés à la fenêtre 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é"; } Status: En attente de l’événement 'unload'

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.

186  Chapitre 11

Gestion événementielle Redimensionnez la fenêtre $(function(){ $(window).resize(function(){ alert('Vous avez redimensionné la fenêtre'); }); });

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

Attribut HTML

keydown

onkeydown

Exécution du script 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 . 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). Gestion événementielle function faitecho(ev) { document.getElementById("echo").innerHTML = ➥document.getElementById("echo").innerHTML + String.fromCharCode(ev.keyCode); } echo: Gestion événementielle  187

Voici l’équivalent de ce code en jQuery : Gestion événementielle echo: $(function(){ $('#saisie').keypress(function(ev){ temp = $('#echo').text(); temp += String.fromCharCode(ev.keyCode); $('#echo').text(temp); }); });

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

Attribut HTML

Exécution du script

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 glisserdéposer

dragend

ondragend

Lorsqu’un élément a fini d’être déplacé par la technique du glisser-déposer

dragenter

ondragenter

Lorsqu’un élément a été déplacé sur une destination valide

dragleave

ondragleave

Lorsqu’un élément est déplacé depuis un emplacement valide

dragover

ondragover

Lorsqu’un élément est en cours de déplacement vers une destination valide

dragstart

ondragstart

Au début du glisser-déposer

drop

ondrop

Au dépôt de l’élément sur la destination

mousedown

onmousedown

Lorsque le bouton de la souris est enfoncé

188  Chapitre 11

mousemove

onmousemove

Lorsque le pointeur se déplace

mouseout

onmouseout

Lorsque le pointeur se déplace en dehors d’un élément

mouseover

onmouseover

Lorsque le pointeur est déplacé sur un élément

mouseup

onmouseup

Au relâchement du bouton de la souris

mousewheel

onmousewheel

Au déplacement de la roulette de la souris

scroll

onscroll

Lorsque la barre de défilement de l’élément est utilisée

Cet exemple capture les événements souris liés à un élément img et les affiche dans un élément span. Gestion événementielle function traitement(param) { document.getElementById("activite").innerHTML = param; } Activité :

Voici le code équivalent en jQuery : Gestion événementielle function traitement(param) { Gestion événementielle  189

document.getElementById("activite").innerHTML = param; } Activité : $(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'); }); });

Cette version du code chaîne les fonctions événementielles sur l’image. Nous avons également conservé la fonction JavaScript traitement. Si vous préférez, une solution "tout jQuery" est envisageable. Vous pourriez écrire quelque chose comme ceci pour traiter l’événement click : $('#img').click(function(){ $('#activite').html('clic souris'); })

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

Attribut HTML

Exécution du script

blur

onblur

Lorsqu’un élément perd le focus

change

onchange

Lorsque la valeur/le contenu d’un élément change

contextmenu

oncontextmenu

Lorsqu’un menu contextuel est déroulé

190  Chapitre 11

focus

onfocus

Lorsqu’un élément reçoit le focus

formchange

onformchange

Lorsque le contenu du formulaire change

forminput

onforminput

Lorsque l’utilisateur entre des données dans le formulaire

input

oninput

Lorsqu’un élément reçoit des données entrées par l’utilisateur

invalid

oninvalid

Lorsqu’un élément n’est pas valide

select

onselect

Lorsqu’un élément est sélectionné

submit

onsubmit

Lorsque le formulaire est soumis (généralement au clic sur le bouton Submit)

Cet exemple capture les actions effectuées sur une zone de texte et un bouton Submit, et les affiche dans un élément span. Gestion événementielle function traitement(param) { document.getElementById("activite").innerHTML = param; } Quel est le meilleur système d’exploitation selon vous ? Activité :

Voici le code équivalent en jQuery : Gestion événementielle

Gestion événementielle  191

Quel est le meilleur système d’exploitation selon vous ? Activité : $(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é'); }); });

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

Attribut HTML

Exécution du script

abort

onabort

Sur l’événement "abort"

canplay

Lorsque le média peut commencer à être lu (il peut être amené à s’arrêter si le buffer de lecture devient vide)

canplaythrough

oncanplaythrough

Lorsque le média peut être lu sans interruption jusqu’à la fin

durationchange

ondurationchange

Lorsque la longueur du média change

emptied

onemptied

Lorsque le média n’est plus accessible à la suite d’un problème de réseau ou d’une erreur de chargement, par exemple

ended

onended

Lorsque le média a été entièrement joué

error

onerror

Lorsqu’une erreur survient pendant le chargement du média

loadeddata

onloadeddata

Lorsque les données du média ont été chargées

192  Chapitre 11

loadedmetadata

onloadedmetadata

Lorsque la durée et les autres caractéristiques du média ont été lues

loadstart

onloadstart

Lorsque le navigateur commence à charger les données du média

pause

onpause

Lorsque le média est mis en pause

play

onplay

Lorsque le média est mis en lecture

play

onplay

Lorsque le média a commencé à être joué

progress

onprogress

Lorsque l’élément est en cours de récupération des données pour le média

ratechange

onratechange

Lorsque la vitesse de lecture change

readystatechange

onreadystatechange

Lorsque l’état (prêt/pas prêt) du média change

seeked

onseeked

Lorsque la recherche a pris fin

seeking

onseeking

Pendant la recherche (attribut seeking=true)

stalled

onstalled

Lorsqu’une erreur est rencontrée lors de la récupération des données

suspend

onsuspend

Lorsque la récupération des données est arrêtée avant la fin

timeupdate

ontimeupdate

Lorsque la position de lecture change

volumechange

onvolumechange

Lorsque le volume du média est modifié

waiting

onwaiting

Lorsque le média n’est plus en mode de lecture mais que l’utilisateur peut demander une relecture

Cet exemple affiche une vidéo issue du site Mediaforma (www.mediaforma.com) dans un élément video. Tous les événements liés à cet élément sont capturés et affichés dans un élément span, au-dessous de l’élément video (voir Figure 11.2). Gestion événementielle function etat(param) { document.getElementById("activite").innerHTML = param; } Activité :

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

194  Chapitre 11

Voici le code équivalent en jQuery : Gestion événementielle Activité : $(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'); })

Gestion événementielle  195

.on('volumechange', function(){ $('#activite'). ➥text('onvolumechange'); }) .on('waiting', function(){ $('#activite').text('onwaiting'); ➥}); });

Info Remarquez l’utilisation de la fonction on() pour définir les gestionnaires pour chaque événement. Les événements ne sont en effet pas des fonctions directement utilisables dans le code. Notez également le chaînage des fonctions on() pour simplifier l’écriture du code jQuery.

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

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

Si l’orientation de l’appareil peut être détectée, définissez un gestionnaire d’événements pour l’événement orientationchange : window.addEventListener('orientationchange', function(event){}, false);

À titre d’exemple, les quelques lignes de code suivantes affichent l’orientation du matériel dans un élément span : device Orientation if (window.DeviceOrientationEvent) {

196  Chapitre 11

alert('DeviceOrientation supporté'); window.addEventListener('orientationchange', function(event) { document.getElementById("status").innerHTML='orientation : ' + window. ➥orientation + ' degrés'; }, false); } Modifiez l’orientation de votre device

Le corps du document contient un élément span d’identifiant status qui invite l’utilisateur à modifier l’orientation de son matériel : Modifiez l’orientation de votre device

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 appareil Supposons maintenant que vous vouliez afficher l’inclinaison d’un appareil. Commencez par tester la valeur retournée par window.DeviceMotionEvent : true indique que le navigateur est compatible avec cette fonctionnalité, false indique qu’il n’est pas compatible avec cette fonctionnalité : if (window.DeviceMotionEvent) alert('DeviceMotion supporté'); else alert('DeviceMotion non supporté');

Si l’inclinaison de l’appareil peut être détectée, définissez un gestionnaire d’événements pour l’événement devicemotion : window.addEventListener('devicemotion', function(event){}, false);

À titre d’exemple, les quelques lignes de code suivantes affichent dans un élément span l’orientation du matériel selon les axes X, Y, Z :

Gestion événementielle  197

device Motion 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 = "X : " + x + " ➥Y : " + y + "Z : " + z + ""; }, false); } Modifiez l’orientation de votre device

Le corps du document contient un élément span d’identifiant status qui invite l’utilisateur à modifier l’orientation de son matériel : Modifiez l’orientation de votre device

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 = "X : " + x + "Y : ➥" + y + "Z : " + z + "";

Info L’API DeviceMotion retourne des accélérations et non des angles. Cependant, ces grandeurs peuvent être assimilées. Ainsi par exemple, si vous posez votre matériel sur un support parfaitement horizontal, les valeurs affichées pour X et Y devraient être égales à 0.

198  Chapitre 11

Exercice 13 Retrouvez les fichiers d'exercices et leurs corrigés sur le site compagnon http://moneformation.pearson.fr Dans cet exercice, vous allez modifier le fichier membre.php. Capturez les frappes de l’utilisateur dans les deux premières zones de texte et convertissez-les en caractères minuscules au fur et à mesure de la frappe. Pour cela, vous mettrez en place un gestionnaire d’événements jQuery lié à la saisie dans chacune des deux zones de texte.

Gestion événementielle  199

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

Insérer un élément audio Avec l’élément audio, l’insertion d’un objet audio dans une page Web devient un vrai jeu d’enfant. De plus, il n’est plus nécessaire de se soucier de savoir si l’internaute a installé les bons codecs : ces derniers sont inclus de façon native dans le langage ! Voici la syntaxe de la balise audio :

Où : ■■ nom définit le chemin et le nom du fichier audio. Les différents formats audio utilisables sont OGG, AAC, MP3, WAV, AIFF et AU. ■■ controls, s’il est présent, demande l’affichage d’une barre de contrôle pour agir sur le son. ■■ preload indique comment le son doit être téléchargé avant qu’il ne soit joué : none (aucun téléchargement), metadata (téléchargement des métadonnées associées uniquement) ou auto (laisse le navigateur décider). ■■ loop, s’il est présent, provoque la lecture sans fin du son. ■■ muted, s’il est présent, met le volume de lecture à 0. ■■ autoplay, s’il est présent, déclenche la lecture du son dès que possible, en accord avec l’attribut preload. L’attribut src peut être spécifié en dehors de l’élément audio sous la forme d’un ou de plusieurs éléments source. Ainsi, en fonction du navigateur utilisé, un format audio ou un autre sera utilisé. Il est même possible de spécifier un lien pour télécharger le fichier audio, dans le cas où le navigateur ne reconnaîtrait pas l’élément audio.

Attention Tous les navigateurs ne sont pas compatibles avec les différents formats audio. Le tableau ci-après donne un aperçu des formats utilisables dans chaque navigateur. Navigateur

OGG

Chrome 23 et supérieur

x

Firefox 17 et supérieur

x

AAC

x

Safari 5.1 et supérieur

WAV

AIFF

x x

Internet Explorer 10 et supérieur Opera 12 et supérieur

MP3

x x

x x

x

x

x

Info Pour savoir si votre navigateur est compatible avec la balise HTM5 , le plus simple consiste à afficher la page http://html5test.com (voir Figure 12.1).

Figure 12.1 Google Chrome 31 est bien compatible avec la balise .

Voici un exemple d’utilisation de la balise . Ici, les versions OGG, AAC, MP3, WAV, AIFF et AU du même son ont été spécifiées dans des balises . 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é. L’élément audio

202  Chapitre 12

Télécharger le commentaire audio au format mp3 ➥

La Figure 12.2 représente un exemple d’exécution de ce code dans Internet Explorer 11.

Figure 12.2 La balise 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 en jQuery La balise peut être pilotée avec des instructions jQuery. À titre d’exemple, le code suivant utilise cinq boutons pour interagir avec une balise . Vous pouvez jouer le son lié à la balise , faire une pause ou l’arrêter, augmenter ou diminuer le volume sonore (voir Figure 12.3).

Figure 12.3 Les cinq boutons permettent d’interagir avec la balise .

Multimédia  203

Voici le code :