Notions fondamentales sur le développement d’applications HTML5

MTA Examen 98-375
Notions
fondamentales sur
le développement
d’applications
HTML5
Official Academic Course

| i
Microsoft®
Official Academic Course
Notions fondamentales sur
le développement
d'applications HTML5,
examen 98-375

www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
VP & ÉDITEUR Don Fowley
ÉDITEUR Bryan Gambrel
DIRECTEUR DES VENTES Mitchell Beaton
DIRECTEUR DU MARKETING Chris Ruel
CHEF DE PRODUIT MICROSOFT Rob Linsky de Microsoft Learning
ASSISTANT ÉDITORIAL Jennifer Lartz
RESPONSABLE ADJOINTE DU MARKETING Debbie Martin
DIRECTRICE DE PRODUCTION SENIOR Janis Soo
DIRECTEUR DE PRODUCTION ASSOCIÉ Joel Balbin
DIRECTEUR DE LA CRÉATION Harry Nolan
CONCEPTRICE DE LA COUVERTURE Georgina Smith
TECHNOLOGIE ET MÉDIAS Tom Kulesa/Wendy Ashenberg
Cet ouvrage a été réalisé en Garamond par Aptara, Inc. et imprimé et relié par Bind-Rite Robbinsville.
La couverture a été imprimée par Bind-Rite Robbinsville.
Copyright © 2013 par John Wiley & Sons, Inc. Tous droits réservés.
Aucune partie de cette publication ne peut être reproduite, stockée dans un système de récupération ou transmise sous
quelque forme ou par quelque moyen que ce soit (électronique, mécanique, photocopie, enregistrement, numérisation
ou autre), à l'exception des cas permis par les articles 107 ou 108 de la loi américaine sur les droits d'auteur de 1976
(United States Copyright Act), sans l'autorisation écrite préalable de l'éditeur, ou l'autorisation obtenue moyennant
le paiement des frais par copie appropriés au Copyright Clearance Center, Inc. 222 Rosewood Drive, Danvers, MA
01923, site web www.copyright.com. Les demandes d'autorisation à l'éditeur doivent être adressées par courrier
à Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, (201)748-6011,
télécopie (201)748-6008, Site web http://www.wiley.com/go/permissions.
Microsoft, ActiveX, Excel, InfoPath, Microsoft Press, MSDN, OneNote, Outlook, PivotChart, PivotTable, PowerPoint,
SharePoint, SQL Server, Visio, Visual Basic, Visual C#, Visual Studio, Windows, Windows 7, Windows Mobile,
Windows Server et Windows Vista sont des marques déposées ou des marques commerciales de Microsoft Corporation
aux États-Unis et/ou dans d'autres pays. Les autres noms de produits et de sociétés mentionnés dans ce document sont
des marques de leurs propriétaires respectifs.
Les noms de sociétés, d'organisations, de produits, de domaines, d'adresses de messagerie, de logos, de personnes,
de lieux et d'événements mentionnés dans les exemples sont fictifs. Toute ressemblance avec des noms ou des
événements réels est purement fortuite et involontaire.
Cet ouvrage exprime les points de vue et les opinions de l'auteur. Les informations contenues dans cet ouvrage sont
fournies sans garantie expresse, légale ou implicite. Ni les auteurs, John Wiley & Sons, Inc., Microsoft Corporation, ni
leur revendeurs ou distributeurs ne seront tenus responsables de quelque dommage que ce soit, causé ou présumé avoir
été causé directement ou indirectement par cet ouvrage.
ISBN 978-1-118-35993-8
Imprimé aux États-Unis d'Amérique
10 9 8 7 6 5 4 3 2 1

Le présent document est le Contrat de Licence Utilisateur Final limité de John Wiley and Sons Inc. (« Wiley ») et régit
votre utilisation du livre électronique Microsoft Official Academic Course de Wiley (le « Livre Électronique MOAC ») et du
contenu s’y rapportant (le « Contenu du Formateur »). EN TELECHARGEANT, EN UTILISANT OU EN ACCEDANT
AU LIVRE ÉLECTRONIQUE MOAC OU AU CONTENU DU FORMATEUR, VOUS ACCEPTEZ LES CONDITIONS
GENERALES DU PRESENT CONTRAT. SI VOUS NE LES ACCEPTEZ PAS, VOUS NE DEVEZ PAS TELECHARGER,
UTILISER OU ACCEDER AU LIVRE ÉLECTRONIQUE MOAC OU AU CONTENU DU FORMATEUR.
Licence :
Par les présentes, Wiley concède au membre du Programme Microsoft IT Academy, au formateur ou à l’étudiant
exerçant ses droits en vertu du présent contrat (« vous »), et vous acceptez, une licence non exclusive et non
transférable pour utiliser le Livre Électronique MOAC et le Contenu du Formateur sous réserve du respect des
conditions générales suivantes uniquement :
a. Vous reconnaissez que le Livre Électronique MOAC et le Contenu du Formateur vous sont concédés sous
licence pour une durée limitée et que votre utilisation est soumise aux conditions générales du présent contrat.
a. Vous trouverez ci-dessous deux sections distinctes relatives aux droits d’utilisation. Une seule vous est
applicable.
i. Si vous êtes un membre actif du Programme Microsoft IT Academy :
1. Les Livres Électroniques MOAC sont uniquement destinés à être utilisés par vos formateurs
et étudiants.
2. Vous pouvez télécharger uniquement le nombre de copies du titre du Livre Électronique
MOAC nécessaires pour permettre à vos formateurs et étudiants d’enseigner ou d’assister
au cours portant sur le titre du Livre Électronique MOAC en question.
3. Vous êtes autorisé à distribuer le Livre Électronique MOAC uniquement à vos formateurs et
à vos étudiants qui enseignent ou qui assistent aux cours portant sur le Livre Électronique
en question, et uniquement par :
o e-mail ;
o un dispositif USB sécurisé directement connecté aux dispositifs personnels de vos étudiants ;
o un site Web protégé par un mot de passe, auquel seuls vos formateurs et étudiants ont
accès.
4. Vous êtes autorisé à distribuer le Contenu du Formateur uniquement à vos formateurs afin
de leur permettre de préparer et de dispenser l’un de vos cours portant sur le titre de Livre
Électronique MOAC associé.
5. Avant de permettre l’accès à un Livre Électronique MOAC, vous notifierez à chaque individu
qu’il peut utiliser un Livre Électronique MOAC ou y accéder uniquement à condition
d’accepter de se conformer aux exigences suivantes :
o Il utilisera le Livre Électronique MOAC uniquement pour ses besoins de formation
personnels.
o Il installera le Livre Électronique MOAC uniquement sur un dispositif dont il a la
propriété ou qui est sous son contrôle.
o Il ne saurait copier, modifier, imprimer, transmettre, transférer, publier, poster, afficher,
diffuser, distribuer ou établir un lien vers le Livre Électronique MOAC, en totalité ou en
partie.
o Il utilisera le Livre Électronique MOAC uniquement pendant la période la plus longue
entre la durée du cours portant sur le Livre Électronique MOAC en question et une
période de cent quatre-vingt (180) jours, après quoi il devra supprimer de manière
sécurisée toutes les copies du Livre Électronique MOAC en sa possession ou sous son
contrôle.
o o Son utilisation du Livre Électronique MOAC devra également être conforme
aux termes, conditions ou licences supplémentaires applicables, inclus dans ou
accompagnant le Livre Électronique MOAC en question.
CONTRAT DE LICENCE UTILISATEUR FINAL
WILEY POUR LE LIVRE ÉLECTRONIQUE
MOAC ET LE CONTENU DU FORMATEUR

iv | Contrat de licence utilisateur final wiley pour le livre électronique moac et le contenu du formateur
6. Avant de permettre l’accès à tout Contenu du Formateur, vous notifierez à chaque formateur
qu’il peut utiliser le Contenu du Formateur ou y accéder uniquement à condition d’accepter de se
conformer aux exigences suivantes :
o Il utilisera le Contenu du Formateur uniquement pour préparer et dispenser votre session de
formation.
o Il installera le Contenu du Formateur uniquement sur un dispositif dont il a la propriété ou qui
est sous son contrôle.
o Il ne saurait copier, modifier, imprimer, transmettre, transférer, publier, poster, afficher, diffuser,
distribuer ou établir un lien vers le Contenu du Formateur, en totalité ou en partie.
o Il utilisera le Contenu du Formateur uniquement pendant la période la plus longue entre la
durée du cours portant sur le Livre Électronique MOAC associé et une période de cent quatre-
vingt (180) jours, après quoi il devra supprimer de manière sécurisée toutes les copies du
Contenu du Formateur en sa possession ou sous son contrôle.
o Son utilisation du Contenu du Formateur devra également être conforme aux termes, conditions
ou licences supplémentaires applicables, inclus dans ou accompagnant le Contenu du Formateur.
i. Si vous êtes un étudiant, vous reconnaissez et acceptez ce qui suit :
1. Vous assistez actuellement à un cours dispensé par un membre du Programme IT Academy portant
sur le Livre Électronique MOAC.
2. Vous utiliserez le Livre Électronique MOAC uniquement pour vos besoins de formation personnels.
3. Vous installerez le Livre Électronique MOAC uniquement sur un dispositif dont vous avez la propriété
ou qui est sous votre contrôle.
4. Vous ne sauriez copier, modifier, imprimer, transmettre, transférer, publier, poster, afficher, diffuser,
distribuer ou établir un lien vers le Livre Électronique MOAC, en totalité ou en partie.
5. Votre utilisation du Livre Électronique MOAC devra également être conforme aux termes, conditions
ou licences supplémentaires applicables, inclus dans ou accompagnant le Livre Électronique MOAC
en question.
a. Sauf autorisation expresse dans le paragraphe b ci-dessus, vous n’êtes pas autorisé à télécharger, copier, modifier,
transmettre, transférer, diffuser, distribuer ou créer des œuvres dérivées de tout Livre Électronique MOAC ou Contenu
du Formateur, en totalité ou en partie, ni à créer par décompilation ou toute autre méthode le code source de tout
Livre Électronique MOAC ou Contenu du Formateur. Vous n’êtes pas autorisé à imprimer des copies de tout Livre
Électronique MOAC ou Contenu du Formateur dans son intégralité, mais vous pouvez imprimer des pages individuelles
ou des passages de chapitres du Livre Électronique MOAC afin de les utiliser en cours. Vous n’êtes pas autorisé à
utiliser tout ou partie du Livre Électronique MOAC ou du Contenu du Formateur à des fins mercantiles au moyen
d’une vente, d’une revente, d’un prêt, d’un transfert, d’une location ou de toute autre forme d’exploitation du Livre
Électronique MOAC ou du Contenu du Formateur. Si vous transférez la possession d’un Livre Électronique MOAC ou
Contenu du Formateur à un tiers, votre licence sera automatiquement résiliée. Une telle résiliation viendra s’ajouter et
se substituer à tout recours équitable, civil ou autre dont pourrait disposer Wiley.
b. Vous pouvez utiliser le Livre Électronique MOAC et le Contenu du Formateur applicables uniquement pendant la
période la plus longue entre la durée du cours portant sur le Livre Électronique MOAC en question et une période
de cent quatre-vingt (180) jours, après quoi vous devrez supprimer de manière sécurisée toutes les copies du Livre
Électronique MOAC et du Contenu du Formateur en votre possession ou sous votre contrôle.
c. LE LIVRE ÉLECTRONIQUE MOAC ET LE CONTENU DU FORMATEUR SONT CONCÉDÉS SOUS LICENCE « EN L’ÉTAT » ET
« TELS QUE DISPONIBLES », SANS GARANTIE D’AUCUNE SORTE.
d. Vous reconnaissez que tous les droits (y compris, de manière non exhaustive, les droits d’auteur, brevets et secrets de
fabrication) sur les Livres Électroniques MOAC et le Contenu du Formateur sont la propriété exclusive de Wiley et de
ses concédants de licence. En acceptant le présent contrat, vous ne devenez pas le propriétaire du Livre Électronique
MOAC ni du Contenu du Formateur, mais vous disposez d’une licence limitée pour utiliser le Livre Électronique MOAC
et le Contenu du Formateur conformément aux dispositions du présent contrat. Vous acceptez de protéger le Livre
Électronique MOAC et le Contenu du Formateur contre tout chargement, utilisation, téléchargement, reproduction
ou distribution non autorisé. Vous convenez également de ne pas traduire, décompiler, désassembler ou autrement
reconstituer la logique de tout Livre Électronique MOAC ou Contenu du Formateur. Wiley se réserve tous les droits qui
ne vous sont pas expressément concédés dans le présent contrat.

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | v
Avant-propos de l'éditeur
Pour la maison d'édition Wiley, la série Microsoft Official Academic Course est destinée à
fournir aux instructeurs et aux étudiants les compétences et les connaissances nécessaires
pour utiliser efficacement les technologies Microsoft dans tous les aspects de leur vie
personnelle et professionnelle. Un enseignement de qualité est nécessaire pour aider les
instructeurs et les étudiants à tirer le meilleur parti des outils logiciels de Microsoft et à
devenir plus productifs. Ainsi, notre mission est de faire de nos programmes de formation
des supports pédagogiques de confiance pour la vie.
Pour accomplir cette mission, Wiley et Microsoft se sont associés pour développer les
programmes éducatifs de la plus haute qualité pour les travailleurs de l'information, les
professionnels de l'informatique et les développeurs. Les documents issus de ce partenariat
portent le nom de marque « Microsoft Official Academic Course », ce qui garantit aux
instructeurs et aux étudiants que le contenu de ces manuels est entièrement approuvé par
Microsoft, et qu'ils fournissent des informations et des instructions de la plus haute qualité
sur les produits Microsoft. Les manuels Microsoft Official Academic Course sont également
« Official » (officiels), car il s'agit des cours agréés officiellement pour les membres de
Microsoft IT Academy.
La série Microsoft Official Academic Course se concentre sur le développement de la main-
d'œuvre. Ces programmes s'adressent aux étudiants qui cherchent à entrer sur le marché
du travail, changer d'emploi ou se lancer dans une nouvelle carrière comme travailleurs de
l'information, professionnels de l'informatique et développeurs. Les programmes Microsoft
Official Academic Course répondent à leurs besoins en mettant l'accent sur des scénarios de
lieu de travail authentiques avec de nombreux projets, exercices, cas et évaluations.
Les cours de la série Microsoft Official Academic Course sont mappés sur les recherches et
analyses de tâches par poste approfondies de Microsoft, les mêmes recherches et analyses
utilisées pour créer les examens Microsoft Technology Associate (MTA) et Microsoft
Certified Solutions Developer (MCSD). Les manuels développent des compétences réelles
pour de vrais emplois. Les projets et les exercices proposés dans les manuels permettent aux
stagiaires de renforcer leur niveau de connaissances et leur capacité à appliquer les dernières
technologies Microsoft dans leurs tâches quotidiennes. Les stagiaires acquièrent également
des certifications qui leur permettront d'étoffer leurs CV, ce qui pourra les aider à trouver un
emploi, à conserver leur poste actuel ou à poursuivre leurs études.
Le concept d'éducation permanente est aujourd'hui une nécessité absolue. Les rôles
professionnels et même des catégories professionnelles entières, évoluent si rapidement
qu'aucun d'entre nous ne peut rester compétitif et productif sans continuellement mettre
à jour ses compétences et capacités. Les offres de la série Microsoft Official Academic
Course, et l'accent qu'ils mettent sur la préparation de l'examen de la certification Microsoft,
permettent aux étudiants d'acquérir et de mettre à jour de façon efficace leurs compétences
et leurs connaissances. Les éditions Wiley soutiennent les étudiants dans cet effort en
développant et en distribuant ces cours en tant qu'éditeur universitaire officiel de Microsoft.
Aujourd'hui, la publication de documents pédagogiques exige de mettre l'accent sur la qualité des
documents imprimés et la fiabilité des contenus électroniques. L'intégration des produits de la
série Microsoft Official Academic Course, de WileyPLUS et des certifications Microsoft, favorise
la fourniture de solutions efficaces d'apprentissage aux étudiants, ainsi qu'aux enseignants.
Joseph Heider
Directeur général et vice-président directeur

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).vi |
Préface
Bienvenue dans le programme Microsoft Official Academic Course (MOAC) sur les
notions fondamentales du développement d'applications HTML5. MOAC est le fruit
de la collaboration entre Microsoft Learning et la maison d'édition John Wiley & Sons,
Inc. Microsoft et Wiley se sont associés pour produire une série de manuels qui offrent
des solutions d'enseignement efficaces et innovantes aux instructeurs et une expérience
d'apprentissage de qualité aux stagiaires. Imprégnés et enrichis des connaissances approfondies
des créateurs de produits Microsoft et conçus par un éditeur reconnu dans le monde entier pour
la qualité pédagogique de ses produits, ces manuels maximisent le transfert de compétences
en un minimum de temps. Les stagiaires sont encouragés à exprimer leur potentiel via leurs
nouvelles compétences techniques en tant que membres hautement productifs du personnel.
Parce que cette base de connaissances provient directement de Microsoft, créateur des examens
Microsoft Certified Solutions Developer (MCSD) et Microsoft TechnologyAssociate (MTA)
(www.microsoft.com/learning/certification), vous êtes sûr de recevoir les informations sur un sujet
les plus pertinentes pour la réussite personnelle et professionnelle des stagiaires. La participation
directe de Microsoft vous assure non seulement que le contenu des manuels MOAC est exact et
à jour, mais elle signifie également que les stagiaires recevront un enseignement optimal qui leur
permettra de réussir aux examens de certification et dans leur carrière professionnelle.
■ Programme Microsoft Official Academic Course
La série Microsoft Official Academic Course est un programme complet dont l'objectif est
de permettre aux instructeurs et aux établissements d'enseignement de préparer et de fournir
des cours de grande qualité sur les technologies logicielles Microsoft. Avec le programme
MOAC, nous reconnaissons qu'en raison de l'évolution rapide des technologies et du
programme développé par Microsoft, il existe un ensemble de besoins qui vont au-delà
des outils d'enseignement en classe pour qu'un instructeur soit prêt à dispenser le cours.
Le programme MOAC s'efforce de fournir des solutions pour tous ces besoins de manière
systématique afin de garantir une expérience fructueuse et enrichissante de cours pour
l'instructeur et le stagiaire, une formation technique et un programme pour la préparation de
l'instructeur aux nouvelles versions logicielles ; le logiciel lui-même, destiné à être utilisé
par le stagiaire à la maison pour acquérir des compétences pratiques, évaluer et valider
l'acquisition des compétences ; et un ensemble d'outils très utiles pour l'enseignement en
classe et en atelier pratique. Tous ces éléments sont importants pour fournir sans problème
un cours intéressant sur les logiciels Microsoft, et tous sont fournis avec le programme
MOAC. Nous considérons le modèle ci-dessous comme le gage que nous vous soutenons
complètement dans votre objectif de dispenser un cours de grande qualité. Lorsque vous
évaluez le matériel pédagogique à votre disposition, vous pouvez utiliser ce modèle pour
réaliser des comparaisons avec les produits disponibles.

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | vii
Tour du livre illustré
■ Fonctionnalités pédagogiques
Le manuel MOAC sur les notions fondamentales sur le développement
d'applications HTML5 est conçu pour couvrir tous les objectifs d'apprentissage pour cet
examen MTA 98-375, désignés sous le nom de « domaine d'objectifs » de l'examen. Les
objectifs de l'examen Microsoft Technology Associate (MTA) sont mis en évidence tout
au long du manuel. De nombreuses fonctionnalités pédagogiques ont été développées
spécifiquement pour les programmes Microsoft Official Academic Course.
La présentation de procédures et de concepts techniques complets tout au long du manuel
représente un défi tant pour les stagiaires que pour les instructeurs. Le tour du livre illustré
qui suit fournit un guide des riches fonctionnalités qui contribuent au plan pédagogique
du programme Microsoft Official Academic Course. Vous trouverez ci-dessous la liste des
principales fonctionnalités de chaque leçon. Elles ont été conçues pour aider les stagiaires
dans leur formation en informatique, dans la préparation des examens de certification ou
dans le cadre de leurs fonctions professionnelles.
• Chaque leçon commence par une Matrice d'objectifs d'examen. Plus qu'une liste
standard des objectifs d'apprentissage, cette matrice d'objectifs d'examen associe
chaque compétence logicielle abordée dans la leçon au domaine d'objectifs de
l'examen spécifique.
• Des instructions pas à pas, concises et fréquentes, présentent de nouvelles fonctionnalités
aux stagiaires et leur donnent la possibilité de mettre en pratique leurs connaissances. Les
étapes numérotées donnent des instructions détaillées, pas à pas, pour aider les stagiaires
à acquérir des compétences logicielles.
• Illustrations : des images d'écran offrent un aperçu visuel aux étudiants tandis qu'ils
réalisent les exercices. Les images illustrent les concepts clés, fournissent des indices
visuels sur les étapes et permettent aux stagiaires de vérifier leurs progrès.
• Termes clés : le vocabulaire technique important est répertorié avec les définitions
correspondantes au début de chaque leçon. Quand ces termes sont utilisés plus tard
dans la leçon, ils apparaissent en italique et en gras, et sont définis. Le glossaire
contient tous les termes clés et leurs définitions.
• Des aides au lecteur intéressantes sur un point d'utilisation, réparties dans les leçons,
indiquent aux étudiants pourquoi un sujet est pertinent (L'essentiel) et leur donnent des
conseils utiles (Remarque). Les aides au lecteur fournissent également des informations
supplémentaires pertinentes ou d'arrière-plan qui ajoutent de la valeur à la leçon.
• Les fonctionnalités Prêt pour la certification, réparties dans le texte, indiquent aux
stagiaires l'endroit où un objectif de certification spécifique est abordé. Elles donnent
aux stagiaires la possibilité de vérifier leur compréhension de cet objectif particulier
de la certification MTA et, si nécessaire, de consulter la section de la leçon où il est
abordé. Un cours MOAC offre une préparation complète pour la certification MTA.
• Questions de fin de leçon : la section Évaluation des connaissances contient différents
types de questions : choix multiples, vrai-faux, correspondances et textes à trous.
• Exercices de fin de leçon : les scénarios des sections Évaluation des connaissances
et Évaluation de la maîtrise sont des projets qui permettent de tester la capacité des
étudiants à appliquer ce qu'ils ont appris dans la leçon.

viii | Tour du livre illustré
■ Fonctionnalités de la leçon
53
LEÇONCréation de l'interface
utilisateur avec HTML5 :
Organisation, saisie et
validations
T E R M E S C L É S
attribut autofocus
attribut email
attribut global
attribut pattern
attribut required
balisage sémantique
élément article
élément aside
élément datalist
élément footer
élément header
élément menu
élément nav
élément section
entrée de formulaire
formulaire Web
liste non triée
liste triée
tableau
texte de l’espace réservé
validation
validation automatique
validation côté client
validation côté serveur
MATRICE D'OBJECTIFS D'EXAMEN
Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif
de l'examen MTA
Sélection et configuration HTML5 pour organiser le 2.4
des “balises HTML5 pour contenu et les formulaires
organiser le contenu et
les formulaires
Sélection et configuration Choisir et configurer les balises 2.5
des balises HTML5 pour la HTML5 pour les entrées et la
saisie et la validation validation
L'une de vos nouvelles tâches en tant que stagiaire chez Media Malted Milk consiste
à créer un formulaire Web qui restreint ce qu'un utilisateur peut entrer dans les champs
d'un formulaire et qui valide les entrées. Pour vous préparer à créer le formulaire Web,
vous devez tout d'abord apprendre la meilleure façon d'organiser ou de structurer le
balisage à l'aide des nouveaux éléments HTML5.
3
Matrice d'objectifs
d'examen
Termes clés
Scénario
d'entreprise
2 | Leçon 1
Vous êtes le nouveau stagiaire chez Malted Milk Media, une agence de création
qui développe des applications Rich Media pour ses clients. La société va bientôt
commencer à utiliser HTML5 dans ses projets. Votre responsable vous a demandé
de faire des recherches sur HTML5 et les technologies connexes et de présenter un
rapport sur les modifications importantes apportées pour passer de HTML 4.01 à
HTML5. Vous devez également inclure des informations sur la façon dont HTML5
permet de créer des applications d'écran tactile, telles que celles des ordinateurs,
tablettes tactiles, tablettes et smartphones.
Hypertext Markup Language (HTML) est le langage que vous utilisez pour décrire des pages
Web. Il s'agit d'un langage de balisage, et non de programmation, ce qui signifie que HTML
utilise des balises de marquage comme <body> et <h1> pour décrire les parties d'une page Web.
Un fichier HTML ne « s'exécute » pas comme un programme. Au lieu de cela, un fichier
HTML est interprété par un navigateur pour afficher une page Web basée sur les balises.
Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
de l'audio, de la vidéo et beaucoup d'interactivité dans les sites Web qu'ils visitent. En outre,
avec la montée en popularité des appareils mobiles comme les tablettes tactiles, tablettes et
smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
Tout cela a rendu nécessaire une nouvelle norme, qui sera HTML5. Le World Wide Web
Consortium (W3C) est l'organisme de normalisation principal qui développe des spécifications
pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
PRÊT POUR LA CERTIFICATION
■ Présentation des principes fondamentaux de la plateforme
HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent
HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant
quelques années, la plupart des navigateurs Web modernes prennent déjà en charge
les éléments HTML5 et le développement d'applications HTML5 pour le Web et les
navigateurs d'appareils mobiles est en bonne voie.
L'ESSENTIEL
Figure 1-1
Le logo HTML5
Un point important à retenir est que HTML5 est une norme et une combinaison ou
famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
Les feuilles de style en cascade (CSS) définissent les styles pour HTML dans un fichier
séparé, de sorte que vous pouvez facilement modifier les polices, les tailles de polices et
autres attributs dans un fichier CSS et les modifications sont répercutées dans l'ensemble
des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
JavaScript est un langage de script (un langage de programmation qui utilise des scripts
et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
avez aussi la possibilité d'employer la combinaison pour développer des applications
Quelles sont les trois
technologies principales
de la famille HTML5 ?
1.1
Même si HTML5
est encore en
développement, la
plupart des navigateurs
Web tels que Microsoft
Internet Explorer,
Google Chrome,
Mozilla Firefox, Opera
et Apple Safari prennent
en charge de nombreux
éléments de HTML5.
REMARQUE
*
W3C®
est une marque
commerciale (déposée
dans de nombreux
pays) du World Wide
Web Consortium ; les
marques du W3C sont
déposées et détenues
par ses institutions
hôtes, le MIT, l'ERCIM
et l'université de Keio.
REMARQUE
*
L'essentiel
Gestion du cycle de vie d’une application | 5
Création d'applications
Les applications HTML5 sont beaucoup plus faciles à développer que les
applications similaires qui utilisent d'autres technologies comme Adobe Flash et
Microsoft Silverlight. HTML5, CSS et JavaScript sont des langages interprétés, ce
qui signifie qu'ils ne nécessitent pas de compilation. Vous pouvez déboguer le code
dans un navigateur, effectuer des modifications rapides, puis actualiser la fenêtre du
navigateur pour voir le résultat des changements.
Même si vous pouvez créer beaucoup de code en utilisant un simple texte ou un éditeur
HTML, si vous souhaitez empaqueter et déployer votre application, vous aurez besoin
d'utiliser un outil de développement d'applications tel que Microsoft Visual Studio.
Dans cette section, vous découvrirez les étapes générales liées à la création d'une
application. La figure 1-3 illustre les étapes, qui sont expliquées ci-dessous :
• Planifier le projet : pensez au type d'application que vous souhaitez créer. Quoi
que vous choisissiez, il est préférable de commencer votre apprentissage du
développement d'applications HTML5 par une application simple. Une fois que vous
avez défini l'action principale de votre application, créez un plan du flux général de
l'application de bout en bout. Déterminez aussi le type d'interactivité utilisateur que
vous souhaitez inclure, comme une interface tactile, si vous avez besoin d'enregistrer
des données en dehors de l'application, et si l'application doit se connecter à d'autres
applications ou services (par exemple, un flux RSS).
• Concevoir une interface utilisateur : lorsque vous concevez l'interface utilisateur,
déterminez comment vous voulez que l'application soit affichée pour les utilisateurs.
Groupez les contenus d'une manière logique. Commencez par créer une liste des
commandes dont vous aurez besoin pour que l'application s'exécute comme prévu et
collectez des images et des clips multimédias si nécessaire. Au minimum, les applications
d'aujourd'hui exigent une icône de lancement, qui représente votre application.
• Mise à jour du manifeste de l'application : chaque application nécessite un fichier
manifeste. Le fichier manifeste décrit les propriétés de l'application et ce dont elle a
besoin pour fonctionner (voir la figure 1-4). Le fichier comprend de nombreux éléments
d'informations différents, tels que le nom d'affichage que les utilisateurs voient, une
description de l'application, son orientation (portrait, paysage, etc.), le chemin d'accès
du fichier à l'icône de l'application, les fonctionnalités de l'application (fonctionnalités
ou périphériques système que votre application peut utiliser), et bien plus encore.
✚ PLUS D’INFORMATIONS
Les adresses Web utilisées dans les exercices précédents sont reprises ici pour plus de commodité. Il
est recommandé de créer des signets pour une utilisation ultérieure. Des informations sur la norme
HTML5 sont disponibles sur le site Web du W3C à l'adresse http://www.w3.org/TR/html5/. Un site
Web qui propose des didacticiels sur HTML5 est disponible à l'adresse http://www.w3schools.com/
html/default.asp. Microsoft fournit des informations utiles aux nouveaux développeurs sur le site
Espace formations pour développeurs débutants (http://www.visualstudio.com/fr-fr/products/visual-
studio-express-vs) et le site de MSDN à l'adresse http://bit.ly/Hd9uzt.
Figure 1-3
Étapes générales de la
création d'une application
Aide au lecteur « Plus
d'informations »

Tour du livre illustré | ix
60 | Leçon 3
Voici un exemple de balisage pour les liens Précédent-Accueil-Suivant, avec des barres
verticales après chaque élément de navigation pour le séparer des autres visuellement :
<nav>
<a href="http://www.example.com/Services">Précédent</a> |
<a href="http://www.example.com">Accueil</a> |
<a href="http://www.example.com/About">Suivant</a>
</nav>
<br />
Les liens s'afficheraient dans une page Web, comme illustré dans la figure 3-6.
La navigation est souvent affichée dans une liste verticale. Vous allez apprendre à le faire
plus tard dans cette leçon.
AJOUTER L'ÉLÉMENT NAV À UN DOCUMENT HTML
PRÉPAREZ-VOUS. Pour ajouter l'élément nav dans un document HTML, procédez comme suit :
1. Dans votre éditeur HTML ou à l'aide d'un outil de développement d'application,
ouvrez le fichier L3-MyPage.html (s'il n'est pas déjà ouvert) et enregistrez-le sous le
nom L3-MyPage-nav.html pour créer un nouveau fichier.
2. Placez les balisesnav suivantes et leur contenu dans la balise <header> :
<header>
<h1>Sélection d'un style de concert</h1>
<nav>
<a href="#symphonies">Symphonies</a> |
<a href="#raves">Raves</a>
</nav>
</header>
Ce bloc de navigation permettra de relier les sections Symphonies et Raves dans le
document HTML.
3. Pour que ces liens fonctionnent, modifiez les titres Symphonies et Raves <h1> comme suit :
<h1><a id="symphonies">Symphonies</a></h1>
<h1><a id="raves">Raves</a></h1>
Figure 3-6
Navigation Précédent-
Accueil-Suivant avec
des barres verticales qui
séparent chaque lien
Exercices étape par étape
Figure 1-5
Une partie de la page Web
Exemples de code pour
développeurs de MSDN
Figure 1-6
Affichage d'une page Web
d'exemple d'application
2. Faites défiler vers le bas et cliquez sur le lien HTML5 dans le volet gauche, actuellement
près du bas de la liste.
3. Parcourez les échantillons jusqu'à trouver une application dont la description est suivie
de « HTML5 », comme l’example Show Ads using the AdControl in HTML5. Cliquez sur
le lien vers l'application.
4. La page qui s'affiche indique le programme requis pour ouvrir et modifier les fichiers
de l'application et les technologies incluses dans l'application. L’example Show Ads
using the AdControl in HTML5 nécessite Visual Studio 12 et inclut JavaScript et HTML5,
comme illustré à la figure 1-6.
5. Cliquez sur le lien Parcourir le code, sur My_Ad_Funded_Windows8_JS_App dans le
volet gauche, sur html, puis sur default.html. Le balisage HTML affiche. Faites défiler le
balisage pour découvrir le type de code que vous rencontrerez souvent dans ce livre.
Images
d'écran
En outre, AppCache permet à un utilisateur de charger des données qui sont généralement
stockées sur un serveur même lorsque l'utilisateur est hors connexion. La gestion de l'état
est le processus de maintenance des informations de la page Web au cours de plusieurs
demandes de la même page Web ou d'une page différente. Lorsque l'utilisateur demande
pour la première fois l'accès à une application, l'état de session est créé. L'état se termine
lorsque l'utilisateur ferme la session.
Une autre solution que l'état de session est l'état de l'application. L'état de l'application est
créé lorsque le navigateur Web envoie la première demande d'une page Web au serveur
Web, et se termine lorsque l'utilisateur referme le navigateur.
Les informations d'état persistantes sont les données dont une application a besoin après
la fin de la session. De nombreuses applications Web doivent stocker des données (et les
rendre persistantes) afin que les utilisateurs puissent reprendre à l'endroit où ils se sont
arrêtés lorsqu'ils retournent sur le site.
Quelle est la différence
entre l'état de session et
l'état de l'application ?
1.2
Quelle est l'importance
des informations d'état
persistantes ?
1.2
Comment HTML5 gère-t-il
les données d'état ?
1.2
Laquelle des deux
méthodes, HTML5/
JavaScript, permet à une
application de stocker les
données persistantes ?
1.2
Stockage des données d'état à l'aide du stockage local et de session
Hypertext Transport Protocol (HTTP) est le protocole qui transfère des données
sur le World Wide Web. Il définit les actions effectuées par les serveurs de Web et
les navigateurs en réponse aux commandes des utilisateurs. Par exemple, lorsque
vous entrez une URL (Uniform Resource Locator) dans le champ d'adresse d'un
navigateur, celui-ci envoie une commande HTTP au serveur Web pour demander la
page Web. HTTP est un protocole sans état, ce qui signifie qu'il ne conserve pas les
données d'une session à l'autre. Lorsque vous fermez un navigateur Web après avoir
visité un site Web, les données ne sont pas enregistrées.
Pour contourner les limitations du protocole HTTP, les développeurs utilisent des cookies,
qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web
visité et sont enregistrés sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
site visité, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
Web à « se souvenir » d'un utilisateur et à personnaliser son expérience sur ce site.
Cependant, les cookies se sont avérés être un risque pour la sécurité. En outre, si de grandes
quantités de données sont impliquées, toutes les données sont envoyées entre le navigateur et
le serveur à chaque requête, ce qui risque d'entraîner une baisse de performances notable pour
l'utilisateur. En HTML5, les développeurs peuvent utiliser le stockage Web au lieu de cela, ce qui
offre plus de flexibilité, de plus grands ensembles de données et de meilleures performances.
La méthode localStorage permet aux utilisateurs de conserver de plus grandes quantités de
données d'une session à l'autre (données persistantes) et leur existence n'est pas limitée
dans le temps. La méthode sessionStorage permet de conserver les données uniquement
pendant une session (jusqu'à ce que la fenêtre du navigateur soit fermée). On parle
également de « stockage par onglet ».
Ces méthodes permettent de transférer des données spécifiques uniquement sur demande.
Il est donc possible de stocker une quantité relativement importante de données sans
ralentir la connexion ou le site.
APPCACHE POUR LES FICHIERS HORS CONNEXION
Une autre façon d'utiliser le stockage Web consiste à stocker les données localement
lorsqu'un utilisateur est en mode hors connexion. Le cache d'application ou AppCache,
stocke des ressources telles que des images, pages HTML, fichiers CSS et JavaScript : les
données qui seraient normalement stockées sur un serveur. Étant donné que les ressources
sont stockées sur le disque dur ou le périphérique du client, elles sont chargées plus
rapidement lorsqu'elles sont demandées.
À l'aide de l'AppCache, un développeur utilise un fichier texte appelé « manifeste de cache »
pour spécifier les fichiers qu'un navigateur Web doit mettre en cache en mode hors connexion.
Même si un utilisateur clique sur le bouton Actualiser en mode hors connexion, l'application se
charge et fonctionne correctement. Un fichier manifeste de cache ressemble à ce qui suit :
index.html
stylesheet.css
images/dot.png
scripts/main.js
XREF
Vous en apprendrez
plus sur l'utilisation
de AppCache avec
JavaScript dans la
leçon 8.
Alerte Prêt
pour la
certification
Aide au lecteur
« Référence croisée »

x | Tour du livre illustré
Gestion de l'interface graphique avec CSS | 163
<body>
<div>Exemple de boîte</div>
</body>
</html>
2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un
navigateur Web, qui doit ressembler à la figure 7-4.
Figure 7-4
Boîte avec des coins arrondis
3. Pour ajouter une ombre portée, ajoutez la ligne suivante à l'élément de style :
box-shadow: 5px 5px 5px #999;
4. Enregistrez le fichier et affichez les résultats dans un navigateur Web. La boîte doit
ressembler à la figure 7-5.
Figure 7-5
Boîte avec des coins arrondis
et une ombre portée
5. Laissez le fichier, l'outil d'édition et le navigateur Web ouverts si vous envisagez
d'effectuer l'exercice suivant au cours de cette session.
APPLICATION DE LA TRANSPARENCE
Un élément opaque ne laisse pas passer la lumière, tandis que vous pouvez voir à travers
un élément transparent. Même si les termes sont opposés, si vous réduisez l'opacité d'un
élément ou si vous augmentez sa transparence, vous finissez par obtenir la même chose.
La figure 7-6 montre l'effet de transparence (ou la réduction d' opacité) sur une image.
L'image originale se trouve sur la gauche. L'image avec une transparence de 50 % appliquée
se trouve sur la droite.
Figure 7-6
Transparence appliquée
à une image
La syntaxe permettant d'appliquer une transparence à une image ou un autre élément est :
opacity: value
La valeur est une valeur à virgule flottante comprise entre 0,0 (100 % transparent) et
1,0 (100 % opaque). Pour appliquer une transparence de 45 %, par exemple, vous devez
utiliser la valeur 0,55 (1,0 – 0,45).
PRÊT POUR LA
CERTIFICATION
Quelle propriété CSS
vous permet d'appliquer
de la transparence à
un élément ou à une
image ?
3.4
Photos
22 | Leçon 2
Les développeurs très occupés de Malted Milk Media vous ont demandé d'effectuer
des recherches sur les nouvelles balises disponibles dans HTML5. Ils sont
particulièrement intéressés par les balises se rapportant aux graphiques et au contenu
multimédia. Votre tâche consiste à obtenir le maximum d'informations sur les
nouvelles balises HTML5 et à préparer de courtes présentations de chacune des
balises, en fournissant des exemples.
Le langage HTML (Hypertext Markup Language) est appelé langage de balisage, car il permet
de décrire (baliser) les divers éléments du contenu affiché sur une page Web. Une page Web
comportant un balisage inclut des balises, qui sont des mots clés permettant de structurer une
page HTML. (Vous en apprendrez davantage sur les balises un peu plus loin.) Pour utiliser le
langage HTML de manière optimale, il convient de savoir comment et quand utiliser les
balises appropriées. La combinaison de contenu, de balises et parfois de graphiques, de
contenu multimédia ou d'autres contenus constitue la clé de voûte d'une page Web.
Un document HTML est facilement identifiable, car il est doté d'une extension de fichier
.htm ou .html. Lorsqu'un navigateur Web ou un périphérique mobile tel qu'un smartphone
ouvre un fichier HTML, il rend (interprète et reproduit) le contenu de la page.
■ Comprendre les principes fondamentaux du langage HTML
Le langage HTML (Hypertext Markup Language) utilise des balises pour décrire le
contenu qui s'affiche sur une page Web. Un élément est composé à la fois de balises
et du contenu figurant entre celles-ci. L'utilisation de caractères spéciaux dans une
page Web nécessite l'encodage de ces derniers. Enfin, chaque page Web requiert la
déclaration doctype en haut de la page.
L'ESSENTIEL
Chaque page HTML comporte des balises. Une balise est un mot clé entouré de
crochets. La plupart des balises sont utilisées par paire ; une balise est appelée balise
d'ouverture ou de début, tandis que l'autre est la balise de fermeture ou de fin. Une
paire de balises respecte la casse ; une balise de fin doit utiliser la même casse que
la balise de début. La balise de fin est identique à la balise de début, hormis le fait
que la balise de fin comporte une barre oblique avant le mot clé.
Balisage et structure de page de base
Les balises entourent le contenu et lui affectent une définition. Par exemple, les balises
suivantes créent un titre de premier niveau :
<h1>Soins des animaux domestiques 101</h1>
Le langage HTML utilise également quelques balises uniques, comme <br /> pour un saut
de ligne et <hr /> pour une ligne horizontale. Dans HTML 4, ces balises sont appelées
balises vides parce qu'elles ne requièrent pas de balise de fin. HTML5 est moins restrictif
que HTML 4. Ainsi, il n'est pas nécessaire d'inclure des balises de fin pour tous les
éléments (même si certains éléments exigent toujours des balises de début et de fin),
et vous pouvez entrer les balises en majuscules ou en minuscules. Toutefois, le balisage
utilisé dans ce guide comporte exclusivement des balises de début et de fin, entièrement
en minuscules, par souci de cohérence.
De nombreuses balises sont disponibles pour les pages HTML. Quelques-unes des balises
les plus couramment utilisées sont répertoriées dans le Tableau 2-1. Les quatre premières,
<html>, <head>, <title> et <body>, sont requises sur chaque page Web.
Aide au lecteur
« Remarque »
Création de l’interface utilisateur avec HTML5 : Organisation, saisie et validations | 55
Notez que le balisage sémantique de HTML5 donne un sens plus spécifique aux parties
d'un document HTML, en rendant la structure plus facile à comprendre.
Quelles sont les balises
HTML5 utilisées pour
structurer et organiser un
document ?
2.4
Tableau 3-1
Nouvelles balises HTML5
pour l'organisation du
contenu et la création de
structure
Balise Description
<address> Définit une zone pour obtenir les coordonnées d'une page ou d'une
section
<article> Définit un article, comme un article de magazine ou de journal, un
billet de blog ou un contenu similaire
<aside> Définit le contenu qui est distinct mais quand même associé au contenu
de la page. Semblable à une barre latérale dans les chapitres de livres et
les articles de magazine
<details> Contient des détails supplémentaires relatifs au texte autour. Crée un
widget interactif qu'un utilisateur peut afficher ou masquer
<footer> Définit un pied de page d'un document ou d'une section. Peut inclure
l'auteur du document, les coordonnées, les informations de copyright
et les liens renvoyant aux modalités d’utilisation
<header> Définit un en-tête de document ou de section. Peut contenir des liens
de navigation ou des informations préliminaires
<hgroup> Regroupe les titres et les sous-titres (à l'aide des balises <h1> à <h6>)
pour des titres sur plusieurs niveaux
<nav> Définit un bloc de liens de navigation
<section> Définit une section d'un document, comme des chapitres, des parties
d'une thèse ou d'une page Web dont le contenu est distinct
<summary> Définit un titre visible pour un élément details. L'utilisateur peut
cliquer pour afficher ou masquer les informations
<wbr> Définit un saut de ligne éventuel. Lorsqu'un mot est très long ou
que vous craignez que le navigateur ne coupe une ligne au mauvais
endroit, vous pouvez utiliser l'élément <wbr> pour couper le mot ou
la ligne correctement
Figure 3-1
Comparaison des parties de
document balisées en HTML
4.01 et HTML5
Parmi les nouveaux éléments de HTML5 en termes de structuration et d'organisation du
contenu dans un document HTML, on trouve header, footer, section, nav, article et aside.
Utilisation des balises pour structurer un document HTML
Maintenant que vous comprenez le balisage sémantique, nous allons étudier plusieurs des
nouveaux éléments HTML5 pour l'organisation des documents. Le tableau 3-1 liste et
décrit les nouvelles balises liées à la structure HTML5.
Tableaux faciles à lire

Tour du livre illustré | xi
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133
RÉSUMÉ DES COMPÉTENCES
Dans cette leçon, vous avez appris ce qui suit :
• Les interfaces utilisateur peuvent être simples et directes ou être plus complexes
avec plusieurs sections, boutons et contrôles.
• La conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de
code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS
ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur
avant les noms de propriétés CSS pour tout faire fonctionner.
• Les boîtes flexibles sont conçues pour les barres d’outils, les menus, les formulaires
et d’autres éléments semblables dans des pages Web et applications. Les grilles sont
mieux adaptées aux conceptions élaborées.
• Une boîte flexible et son contenu peuvent être configurés pour modifier la taille,
horizontalement et verticalement, lorsque la taille de l'écran sur lequel ils sont
affichés change. Vous pouvez également inverser le sens et l'ordre des boîtes
flexibles avec une ligne de code.
• Une boîte flexible peut contenir des boîtes enfants flexibles en hauteur et en
largeur. Vous devez utiliser la propriété flex avec les boîtes enfants. La propriété
flex-flow définit les propriétés flex-direction et flex-wrap d'une boîte flexible (la boîte
parent) en même temps.
• Les dispositions en grille sont semblables aux feuilles de calcul. En effet, elles contiennent
des cellules, des lignes et des colonnes, mais vous pouvez créer différents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout à une feuille de calcul.
• Vous devez utiliser les propriétés CSS display:grid (ou display:inline-grid), grid-columns
et grid-rows pour créer des structures de grille. La taille des colonnes et des lignes
peut être fixe ou flexible.
• Les boîtes flexibles et les grilles sont conçues pour mettre à l'échelle proportionnellement.
• La propriété flex-order vous permet de modifier l'ordre des éléments enfants dans
une boîte flexible, de les réorganiser dans un ordre quelconque sans avoir à les
modifier dans le balisage HTML.
• Un modèle de grille utilise des caractères alphabétiques pour représenter la
position des éléments dans une grille. Vous devez utiliser les caractères alpha avec
les propriétés grid-template, grid-rows et grid-columns pour créer une grille dans
laquelle les données peuvent être organisées.
Bien que cet exemple utilise le mot clé auto, vous pouvez utiliser les valeurs grid-rows et
grid-colums comme indiqué dans le tableau 5-2.
Les spécifications pour les dispositions de modèle de grille sont semblables à des ébauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rédaction de ce
document. Cependant, vous pourriez rencontrer des modèles de grille pour l'examen MTA
98-375. Vous devriez donc vérifier la dernière spécification du module des modèles de
disposition en grille CSS du groupe W3C lors de la préparation de l'examen.
Compléter l’espace vide
Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces
prévus à cet effet.
1. L' est la partie d’un site Web ou d’une application avec laquelle
l'utilisateur peut interagir.
2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace
entre la bordure et le contenu de la boîte.
■ Évaluation des connaissances
Évaluation des
connaissances
Questions
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133
RÉSUMÉ DES COMPÉTENCES
Dans cette leçon, vous avez appris ce qui suit :
• Les interfaces utilisateur peuvent être simples et directes ou être plus complexes
avec plusieurs sections, boutons et contrôles.
• La conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de
code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS
ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur
avant les noms de propriétés CSS pour tout faire fonctionner.
• Les boîtes flexibles sont conçues pour les barres d’outils, les menus, les formulaires
et d’autres éléments semblables dans des pages Web et applications. Les grilles sont
mieux adaptées aux conceptions élaborées.
• Une boîte flexible et son contenu peuvent être configurés pour modifier la taille,
horizontalement et verticalement, lorsque la taille de l'écran sur lequel ils sont
affichés change. Vous pouvez également inverser le sens et l'ordre des boîtes
flexibles avec une ligne de code.
• Une boîte flexible peut contenir des boîtes enfants flexibles en hauteur et en
largeur. Vous devez utiliser la propriété flex avec les boîtes enfants. La propriété
flex-flow définit les propriétés flex-direction et flex-wrap d'une boîte flexible (la boîte
parent) en même temps.
• Les dispositions en grille sont semblables aux feuilles de calcul. En effet, elles contiennent
des cellules, des lignes et des colonnes, mais vous pouvez créer différents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout à une feuille de calcul.
• Vous devez utiliser les propriétés CSS display:grid (ou display:inline-grid), grid-columns
et grid-rows pour créer des structures de grille. La taille des colonnes et des lignes
peut être fixe ou flexible.
• Les boîtes flexibles et les grilles sont conçues pour mettre à l'échelle proportionnellement.
• La propriété flex-order vous permet de modifier l'ordre des éléments enfants dans
une boîte flexible, de les réorganiser dans un ordre quelconque sans avoir à les
modifier dans le balisage HTML.
• Un modèle de grille utilise des caractères alphabétiques pour représenter la
position des éléments dans une grille. Vous devez utiliser les caractères alpha avec
les propriétés grid-template, grid-rows et grid-columns pour créer une grille dans
laquelle les données peuvent être organisées.
Bien que cet exemple utilise le mot clé auto, vous pouvez utiliser les valeurs grid-rows et
grid-colums comme indiqué dans le tableau 5-2.
Les spécifications pour les dispositions de modèle de grille sont semblables à des ébauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rédaction de ce
document. Cependant, vous pourriez rencontrer des modèles de grille pour l'examen MTA
98-375. Vous devriez donc vérifier la dernière spécification du module des modèles de
disposition en grille CSS du groupe W3C lors de la préparation de l'examen.
Compléter l’espace vide
Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces
prévus à cet effet.
1. L' est la partie d’un site Web ou d’une application avec laquelle
l'utilisateur peut interagir.
2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace
entre la bordure et le contenu de la boîte.
■ Évaluation des connaissances
Matrice Résumé des
compétences
86 | Leçon 3
10. Quel est le format de la balise HTML5 qui valide une adresse e-mail ?
a. <input label="email" name="URL">
b. <form id="email">
c. <label for="email">Email</label>
d. <input type = "email" name = "email">
Vrai/Faux
Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1. Dans un tableau, l’élément tfoot doit s’afficher avant l’élément tbody.
V F 2. Vous pouvez utiliser des chiffres et des lettres pour chaque entrée
d’une liste triée.
V F 3. Vous pouvez spécifier la hauteur d’un élément d’entrée à l’aide de
l’attribut size.
V F 4. L'élément label affiche la légende, ou le titre d'un tableau.
V F 5. L'élément nav définit un bloc de liens de navigation.
■ Évaluation des compétences
Scénario 3-1 : Balisage d’un article de journal
Sally Rowe, contrôleur de documents chez Malted Milk Media, souhaite publier une
série d’articles sur l’intranet de la société portant sur la sécurité et la gestion des versions
de documents. Elle doit créer les grandes lignes du balisage HTML5 pour un article à
paraître dans le bulletin mensuel en ligne créé par l’un des développeurs Web. Chaque
article comportera un titre et un sous-titre, plusieurs paragraphes de texte, son nom et la
date de l’article dans le pied de page. À quoi ressemblera le balisage de son article ?
Scénario 3-2 : Affichage de longs tableaux en HTML
Vince génère des rapports financiers pour le Vice-président des opérations financières
chez Momentum Strategies, un cabinet de relations publiques spécialisé dans les
campagnes politiques. Vince imprime régulièrement des tableaux de 2 ou 3 pages et
distribue des exemplaires aux membres de la direction. Il souhaite publier ces rapports
dans une zone sécurisée sur l’intranet de la société, et avec des lignes de données séparées
des titres de colonne avec la ligne des totaux à la fin. Il voudrait savoir comment présenter
les tableaux correctement dans HTML5. Que pouvez-vous lui dire ?
■ Évaluation de la maîtrise des concepts
Scénario 3-3 : Création d’un glossaire
Waylon est un stagiaire qui travaille sur une dissertation. Son formateur demande
à chaque étudiant d’appliquer à la dissertation une mise en forme compatible avec un
affichage sur le Web. Waylon souhaite inclure un glossaire à la fin de la dissertation,
mais il a du mal à produire un résultat satisfaisant avec une liste non triée. Quel balisage
serait mieux adapté au glossaire de Waylon ?
Scénario 3-4 : Utilisation des types d’entrée appropriés dans un formulaire Web
Margie est en train de créer et de tester un formulaire Web qui comporte entre autres un
champ pour l’adresse e-mail, un champ pour l’adresse Web et un champ pour le code
postal. Lorsque certains de ses collègues testent le formulaire, elle remarque que très
souvent ils entrent par erreur l’adresse e-mail dans le champ réservé à l’adresse Web,
et parfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ
réservé au code postal. Elle ne veut pas utiliser de syntaxe avec la propriété pattern
parce qu’à ses yeux c’est trop compliqué. Quel autre type d’entrée peut-elle utiliser ?
Évaluation des
compétences
Évaluation de
la maîtrise des
concepts

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xii |
Conventions et fonctionnalités
utilisées dans cet ouvrage
Cet ouvrage utilise des polices, des symboles et des conventions d'en-tête particuliers
pour mettre en évidence des informations importantes ou attirer l'attention sur des étapes
spéciales. Pour plus d'informations sur les fonctionnalités de chaque leçon, reportez-vous
à la section Tour du livre illustré.
Convention Signification
Cette fonctionnalité fournit un bref résumé des sujets qui
seront traités dans la section qui suit.
FERMER Les mots en majuscules font référence à des instructions
destinées à ouvrir, enregistrer ou fermer des fichiers ou des
programmes. Ils indiquent également des éléments à vérifier
ou des actions à entreprendre.
PRÊT POUR LA CERTIFICATION Cette fonctionnalité signale le point dans le texte où un
objectif de certification spécifique est couvert. Elle vous
donne une occasion de vérifier votre compréhension de cet
objectif particulier de la certification MTA et, si nécessaire, de
consulter la section de la leçon où il est abordé.
REMARQUE*
*
Des aides au lecteur figurent dans le texte, dans des cases
grisées. Remarque fournit des conseils utiles liés à des tâches
ou sujets particuliers.

XREF
Ces remarques fournissent des pointeurs vers des informations
fournies ailleurs dans le manuel ou décrivent des fonctionnalités
intéressantes du langage HTML5 qui ne sont pas directement
abordées dans la rubrique ou le sujet en cours.
Alt + Alt
Un signe plus (+) entre deux noms de touches signifie que
vous devez appuyer sur les deux touches en même temps.
Les touches sur lesquelles vous êtes invité à appuyer dans un
exercice s'affichent dans la police indiquée ici.
Exemple Les termes clés apparaissent en italique et en gras.
L'ESSENTIEL

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xiii
Programme de soutien de
l'instructeur
Les programmes Microsoft Official Academic Course s'accompagnent d'un riche éventail
de ressources, dont notamment de nombreuses illustrations, pour former un ensemble
cohérent d'un point de vue pédagogique. Ces ressources offrent tous les documents
dont les instructeurs ont besoin pour organiser et dispenser leurs cours. Les ressources
téléchargeables en ligne sont les suivantes :
• DreamSpark Premium est conçu pour fournir les outils de développement, produits
et technologies disponibles les plus conviviaux et les moins coûteux aux professeurs
et aux stagiaires dans les laboratoires, salles de classe et sur les PC des stagiaires. Un
abonnement gratuit de 3 ans est offert aux utilisateurs qualifiés de MOAC.
Remarque : Microsoft Visual Studio et Microsoft Expression peuvent être téléchargés
à partir de DreamSpark Premium pour utilisation par les stagiaires dans ce cours.
• Le Guide de l'instructeur contient les solutions à tous les exercices du manuel et des
plans de cours de longueurs différentes. Le Guide de l'instructeur contient également
les résumés des chapitres et des notes de lecture. Le Guide de l'instructeur est
disponible sur le site compagnon du livre (http://www.wiley.com/college/microsoft).
• La banque de tests contient des centaines de questions à choix multiple, vrai-faux,
réponses courtes et formats d'essais et est disponible au téléchargement sur le site
compagnon du livre de l'instructeur (www.wiley.com/college/microsoft). Un corrigé
complet est fourni.
• Un ensemble complet de présentations PowerPoint et d'images est disponible sur
le site compagnon du livre de l'instructeur (http://www.wiley.com/college/microsoft)
pour compléter les présentations en classe. Environ 50 diapositives PowerPoint
sont fournies pour chaque leçon. Ces présentations sont adaptées au sujet traité
dans le texte et à la matrice de compétences, et elles sont conçues pour transmettre
les principaux concepts abordés dans le texte. Toutes les images du texte sont
disponibles sur le site compagnon du livre de l'instructeur (http://www.wiley.com/
college/microsoft). Vous pouvez les intégrer à vos présentations PowerPoint ou les
utiliser pour créer vos propres transparents et polycopiés. En utilisant ces illustrations
dans les discussions en classe, vous pouvez aider les stagiaires à se concentrer sur les
éléments clés des technologies abordées et leur permettre de comprendre comment
utiliser ces technologies efficacement dans leurs fonctions professionnelles.
• Quand il s'agit d'améliorer l'expérience en classe, il n'y a pas de meilleure source
d'idées et d'inspiration que vos collègues. Le réseau Wiley Faculty Network relie
les enseignants avec la technologie, facilite l'échange des meilleures pratiques
et contribue à renforcer l'efficacité pédagogique. Les activités du réseau Faculty
Network incluent des formations aux technologies et des didacticiels, des
séminaires virtuels, des échanges entre pairs d'expériences et d'idées, des conseils
personnels et le partage de ressources. Pour plus d'informations, visitez le site www.
WhereFacultyConnect.com.

xiv | Programme de soutien de l'instructeur
DREAMSPARK PREMIUM – ABONNEMENT DE 3 ANS
OFFERT AUX UTILISATEURS QUALIFIÉS !
DreamSpark Premium est conçu pour fournir le moyen le plus simple et le plus
économique pour les universités de rendre les derniers outils de développement,
produits et technologies de Microsoft disponibles dans les laboratoires, salles
de classe et sur les PC des étudiants. DreamSpark Premium est un programme
d'abonnement annuel destiné aux départements d'enseignement des cours de sciences,
technologie, ingénierie et mathématiques (STEM). L'abonnement offre une solution
complète destinée à permettre aux laboratoires universitaires, professeurs et étudiants
de rester à la pointe de la technologie.
Les logiciels disponibles dans le programme DreamSpark Premium sont offerts
aux départements qui s'abonnent dans le cadre du partenariat d'édition entre
Wiley et Microsoft.
Des outils qui aident les professeurs à motiver et impliquer les élèves dans les
technologies d'aujourd'hui.
Contactez votre représentant Wiley pour plus de détails.
Pour plus d'informations sur le programme DreamSpark Premium, visitez le site Web :
https://www.dreamspark.com/
Remarque : Microsoft Visual Studio et Microsoft Expression peuvent être téléchargés
à partir de DreamSpark Premium pour utilisation par les stagiaires dans ce cours.
■ Adresses Web et numéros de téléphone importants
Pour localiser le représentant de l'enseignement supérieur Wiley dans votre région,
rendez-vous sur http://www.wiley.com/college et cliquez sur le lien « Who’s My Rep? »
(Qui est mon représentant ?) situé en haut de la page, ou appelez le numéro gratuit du
programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Pour savoir comment obtenir la certification et connaître la disponibilité de l'examen,
visitez le site www.microsoft.com/learning/mcp/mcp.

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xv
Programme de soutien
au stagiaire
■ Ressources complémentaires
Site web compagnon de ce livre (www.wiley.com/college/microsoft)
Le site compagnon du manuel du stagiaire pour la série MOAC comprend tous les fichiers
d'exercices, les liens web et les ressources qui seront utilisés conjointement à ce cours.
Wiley Desktop Editions
Les éditions Wiley MOAC Desktop Editions sont des versions électroniques novatrices
des manuels imprimés. Les stagiaires acquièrent la version de bureau jusqu'à 40 % moins
cher que le prix américain du texte imprimé, et peuvent bénéficier de la valeur ajoutée
de la permanence et de la portabilité. Les éditions Wiley Desktop Editions fournissent
également aux étudiants de nombreux avantages supplémentaires qui ne sont pas
disponibles avec d'autres solutions de texte électronique.
Les éditions Wiley Desktop Editions NE sont PAS des abonnements. Les stagiaires
téléchargent l'édition Wiley Desktop Edition sur le bureau de leurs ordinateurs. Les
stagiaires sont propriétaires du contenu qu'ils achètent et peuvent le conserver aussi
longtemps qu'ils le souhaitent. Une fois une édition Wiley Desktop Edition téléchargée sur
le bureau de l'ordinateur, les stagiaires ont un accès instantané à tout le contenu sans être en
ligne. Les stagiaires peuvent également imprimer les sections qu'ils préfèrent lire sur support
papier. Les stagiaires ont aussi accès à des ressources entièrement intégrées au sein de leur
édition Wiley Desktop Edition. De la mise en surbrillance du texte électronique à la prise
et au partage de notes, les stagiaires peuvent facilement personnaliser leur édition Wiley
Desktop Edition au fur et à mesure de leurs lectures ou en classe.
■ À propos de la certification Microsoft Technology
Associate (MTA)
Préparer la main-d'œuvre technologique de demain
La technologie joue un rôle dans pratiquement toutes les entreprises du monde entier.
Posséder des connaissances fondamentales du fonctionnement d'une technologie et
comprendre son impact sur l'environnement académique et professionnel d'aujourd'hui
est de plus en plus important, en particulier pour les stagiaires qui souhaitent explorer
des professions qui impliquent des technologies. C'est pourquoi Microsoft a créé la
certification Microsoft Technology Associate (MTA), un nouveau programme de crédit de
niveau débutant qui valide les connaissances technologiques fondamentales des stagiaires
qui cherchent à faire carrière dans les technologies.
La certification Microsoft Technology Associate (MTA) est le moyen idéal et privilégié
d'accéder à des programmes de certification technologiques de renommée mondiale de
Microsoft, tels que Microsoft Certified Solutions Developer (MCSD). MTA est en passe
de devenir le premier programme de certification destiné aux personnes qui cherchent
à explorer et à poursuivre une carrière dans les technologies, ou à renforcer leurs
connaissances dans des activités connexes telles que l'entreprise ou tout autre domaine où
la technologie est omniprésente.

xvi | Programme de soutien au stagiaire
Profil des candidats à la certification MTA
Le programme de certification MTA est conçu spécifiquement pour les étudiants de
niveau secondaire et post-secondaire qui souhaitent explorer des options académiques
et professionnelles dans un domaine technologique. Il offre aux stagiaires une
certification en informatique de base et en développement. En tant que nouveau point
d'entrée recommandé pour les certifications technologiques Microsoft, MTA est destiné
tout spécialement aux stagiaires qui découvrent l'informatique et le développement
de logiciels. Il est disponible exclusivement dans les contextes éducatifs et s'intègre
facilement dans les programmes des cours d'informatique existants.
La certification MTA donne des moyens aux éducateurs et motive les stagiaires
MTA offre une nouvelle norme pour mesurer et valider les connaissances technologiques
fondamentales dans la salle de classe sans porter atteinte à votre budget ni à vos ressources
pédagogiques. La certification MTA aide les établissements d'enseignement à se démarquer en
tant que fournisseurs innovants de programmes de certification professionnelle très demandés.
Elle est facilement déployée à l'aide d'une suite simple, pratique et abordable d'examens de
certification technologique de niveau débutant. La certification MTA permet aux stagiaires
d'explorer des filières technologiques professionnelles sans effectuer un investissement
important en temps ni ressources, tout en leur fournissant une base pour leur carrière et la
confiance nécessaire pour réussir des études supérieures, puis poursuivre leur vocation.
En plus de donner aux stagiaires une certification Microsoft de niveau débutant, la certification
MTA est conçue pour être un tremplin vers d'autres certifications technologiques Microsoft
plus avancées, telles que la certification Microsoft Certified Solutions Developer (MCSD).
Fourniture des examens MTA : la licence Campus MTA
Avec la licence Campus MTA, mettre en œuvre un nouveau programme de certification
dans votre salle de classe n'a jamais été aussi facile. L'achat d'une licence Campus MTA
annuelle rend inutile les demandes de budget ad hoc et les achats récurrents de bons
d'examens. Désormais, vous pouvez prévoir un budget à petit prix sur l'année entière et
donner accès aux examens MTA à vos stagiaires et autres professeurs dans l'ensemble de
votre campus où et quand vous le voulez.
La licence Campus MTA fournit une suite pratique et abordable de certifications
technologiques de niveau débutant, conçue pour donner des moyens aux éducateurs et
motiver les stagiaires au fur et à mesure qu'ils construisent les fondations de leur carrière.
La licence Campus MTA est administrée par Certiport, fournisseur exclusif d'examen
MTA de Microsoft.
Pour en savoir plus sur la façon d'obtenir la certification Microsoft Technology Associate,
ainsi que sur la disponibilité de l'examen, visitez le site www.microsoft.com/learning/mta.
Certains liens présents dans ce cours renvoient à des pages en anglais.REMARQUE
*

Numéro gratuit de MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Programme de soutien au stagiaire | xvii
■ Activez votre test pratique GRATUIT pour la
certification MTA !
L'acquisition de ce livre vous donne droit à un test pratique gratuit pour la certification
MTA de GMetrix (d'une valeur de 30 $). Rendez-vous sur www.gmetrix.com/mtatests
et utilisez le code de validation suivant pour activer votre test gratuit : MTA98-375-
3324376A6A85.
Le système de gestion des compétences GMetrix fournit tout ce dont vous avez besoin
pour vous entraîner pour la certification Microsoft Technology Associate (MTA).
Présentation des fonctionnalités de test :
• Carte des tests pratiques en fonction des objectifs de l'examen Microsoft Technology
Associate (MTA)
• Les tests pratiques de la certification MTA de GMetrix simulent l'environnement de
test MTA réel
• Plus de 50 questions par test, qui couvrent tous les objectifs
• Progressez à votre propre rythme, enregistrez le test pour le reprendre plus tard et
revenez aux questions laissées en suspens
• Rapports détaillés et imprimables sur les notes, qui soulignent les domaines qui
requièrent une étude plus approfondie
Pour tirer le meilleur parti de votre préparation MTA, profitez dès aujourd'hui de votre test
pratique gratuit pour la certification MTA GMetrix.
Pour des questions de support technique sur l'installation ou l'activation du code, envoyez
un message électronique à support@gmetrix.com.

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xviii |
Remerciements
■ MOAC MTA - Réviseurs des notions technologiques fondamentales
Nous aimerions remercier les nombreux réviseurs qui ont relu le manuscrit et fourni de précieux commentaires
destinés à améliorer la qualité du matériel pédagogique :
Yuke Wang, Université du Texas à Dallas
Palaniappan Vairavan, Bellevue College
Harold « Buz » Lamson, ITT Technical Institute
Colin Archibald, Valencia Community College
Catherine Bradfield, DeVry University en ligne
Robert Nelson, Blinn College
Kalpana Viswanathan, Bellevue College
Bob Becker, Vatterott College
Carol Torkko, Bellevue College
Bharat Kandel, Missouri Tech
Linda Cohen, Forsyth Technical Community College
Candice Lambert, Metro Technology Centers
Susan Mahon, Collin College
Mark Aruda, Hillsborough Community College
Claude Russo, Brevard Community College
Heith Hennel, Valencia College
Adrian Genesir, Western Governors University
Zeshan Sattar, Zenos
Douglas Tabbutt, Blackhawk Technical College
David Koppy, Baker College
Sharon Moran, Hillsborough Community College
Keith Hoell, Briarcliffe College et Queens College,
CUNY
Mark Hufnagel, Lee County School District
Rachelle Hall, Glendale Community College
Scott Elliott, Christie Digital Systems, Inc.
Gralan Gilliam, Kaplan
Steve Strom, Butler Community College
John Crowley, Bucks County Community College
Margaret Leary, Northern Virginia Community College
Sue Miner, Lehigh Carbon Community College
Gary Rollinson, Cabrillo College
Al Kelly, University of Advancing Technology
Katherine James, Seneca College
David Kidd, Western Governors University

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xix
Brève table des matières
Leçon 1 : Gestion du cycle de vie d'une application 1
Leçon 2 : Création de l'interface utilisateur avec HTML5 : Texte,
graphiques et multimédia 21
Leçon 3 : Création de l'interface utilisateur avec HTML5 :
Organisation, saisie et validations 53
Leçon 4 : Présentation des notions essentielles sur les feuilles de style
en cascade CSS : Flux de contenu, positionnement et style 87
Leçon 5 : Présentation des notions essentielles sur les feuilles de style
en cascade CSS : Dispositions 110
Leçon 6 : Gestion de l'enchaînement du texte avec CSS 137
Leçon 7 : Gestion de l'interface graphique avec CSS 159
Leçon 8 : Présentation des principes de base de JavaScript et du
codage 189
Leçon 9 : Création d'animations, utilisation de graphiques et accès
aux données 215
Leçon 10 : Codage JavaScript pour l'interface tactile, les ressources des
périphériques et du système d'exploitation, etc. 243
Annexe 268
Index 269

appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).xx |
Contenu
Leçon 1 : Gestion du cycle de vie d'une
application 1
Matrice d'objectifs d'examen 1
Termes clés 1
Présentation des principes fondamentaux de la
plateforme 2
Quelles sont les nouveautés de HTML5 ? 3
Création d'applications 5
Exploration de l'empaquetage et de l'environnement
d'exécution 7
Présentation du processus hôte 7
Présentation du package d'application et du conteneur
d'applications 8
Présentation des jeux d'informations d'identification et
d'autorisations 10
Présentation et gestion des états de l'application 10
Stockage des données d'état à l'aide du stockage local et
de session 11
AppCache pour les fichiers hors connexion 11
Présentation des interfaces tactiles et des
mouvements 12
Utilisation des compétences et du contenu HTML5
existants pour les applications de tablettes tactiles/
tablettes 13
Débogage et test des applications HTML5 13
Validation du code HTML5 14
Validation d'un package 14
Publication d'une application dans un magasin en
ligne 16
Résumé des compétences 17
Évaluation des connaissances 18
Évaluation des compétences 20
Évaluation de la maîtrise des concepts 20
Leçon 2 : Création de l'interface
utilisateur avec HTML5 : Texte,
graphiques et multimédia 21
Termes clés 21
Comprendre les principes fondamentaux du langage
HTML 22
Balisage et structure de page de base 22
Utilisation d'attributs 23
Imbrication d'éléments 24
Comprendre les entités 24
Comprendre le doctype 25
Exploration du balisage d'une page Web simple 26
Sélection et configuration de balises HTML5 pour
l'affichage du texte 29
Éléments de texte HTML 4 avec une nouvelle
signification ou fonction 29
Nouveaux éléments de texte dans HTML5 31
Éléments de texte inutilisés dans HTML5 32
Sélection et configuration de balises HTML5 pour
l'affichage des graphiques 34
Utilisation des éléments figure et figcaption 35
Création de graphiques à l'aide de canvas 38
Notions de base de l'élément canvas 39
Création d'un contour de forme 40
Spécification d'une image ou d'un texte de remplacement
pour les anciens navigateurs 41
Création de graphiques à l'aide de SVG 42
Quand utiliser canvas au lieu de SVG 44
Sélection et configuration de balises HTML5 pour la
lecture de contenu multimédia 45
Comprendre et utiliser les balises de contenu vidéo 45
Comprendre et utiliser les balises audio 47
Leçon 3 : Création de l'interface
utilisateur avec HTML5 :
Organisation, saisie et
validations 53
Termes clés 53
Sélection et configuration des balises HTML5 pour
organiser le contenu et les formulaires 54
Présentation de la sémantique HTML 54
Utilisation des balises pour structurer un
document HTML 55
Éléments header et footer 56
L'élément section 57
L'élément nav 59
L'élément article 61
L'élément aside 61
Utilisation de balises pour créer des tableaux et des

Contents | xxi
avec CSS 111
Utilisation de la boîte flexible pour des dispositions
simples et utilisation de la grille pour les dispositions
complexes 112
Utilisation de la boîte flexible (Flexbox) pour
appliquer au contenu un alignement, une direction
et une orientation 114
Utiliser les éléments Flexboxes et Flexbox 116
Mise à l'échelle proportionnelle dans une boîte flexible 116
Modification de l'orientation des éléments enfants dans une
boîte flexible 122
Tri et réorganisation du contenu 126
Utilisation des dispositions en grille pour appliquer
au contenu un alignement, une direction et une
orientation 128
Création d'une grille à l'aide de propriétés CSS pour les
lignes et colonnes 130
Présentation des modèles de grille 132
Leçon 6 : Gestion de l'enchaînement du
texte avec CSS 137
Termes clés 137
Gestion de l’enchaînement du texte avec CSS 137
Présentation et utilisation des régions pour contrôler
l'enchaînement du texte entre plusieurs sections 139
Enchaînement dynamique du contenu à travers les
conteneurs 140
Débordement du texte 142
Implémentation Microsoft des régions CSS 142
Utilisation des colonnes et de la césure pour optimiser la
lisibilité du texte 145
Création de colonnes 146
Utilisation de la césure 150
Utilisation d'exclusions CSS pour créer un enchaînement
autour d'un objet flottant 152
Leçon 7 : Gestion de l'interface graphique
avec CSS 159
Termes clés 159
listes 64
Création de tableaux 64
Création de listes 69
Sélection et configuration des balises HTML5 pour la
saisie et la validation 72
Présentation des entrées et des formulaires 73
Découverte de la création de formulaire, des attributs Input
et des valeurs 77
Présentation de la validation 81
Leçon 4 : Présentation des notions
essentielles sur les feuilles de style
en cascade CSS : Flux de contenu,
positionnement et style 87
Termes clés 87
Présentation des notions essentielles sur les feuilles
de style en cascade CSS 87
Utilisation des outils appropriés 88
Exploration du lien entre HTML et CSS 89
Séparation du contenu et du style 91
Présentation des sélecteurs et des déclarations 92
Présentation des polices et des familles de polices 94
Gestion du flux de contenu 96
Positionnement des éléments individuels 99
Application du positionnement flottant 99
Application du positionnement absolu 100
Gestion du débordement de contenu 102
Présentation du débordement de défilement 102
Présentation du débordement visible et du débordement
masqué 104
Leçon 5 : Présentation des notions
essentielles sur les feuilles
de style en cascade CSS :
Dispositions 110
Termes clés 110
Organisation du contenu d’une interface utilisateur

xxii | Contents
Gestion de l'interface graphique avec CSS 159
Création d'effets graphiques 160
Création d'angles arrondis 160
Création d'ombres 161
Application de la transparence 163
Application de dégradés à l'arrière-plan 164
Présentation de la typographie et du format WOFF (Web
Open Font Format) 166
Application des transformations 2D et 3D 167
Traduction 2D 168
Mise à l'échelle 2D 169
Rotation 2D et 3D 171
Inclinaison 2D et 3D 172
Présentation de la perspective 3D, des transitions et des
animations 173
Application d'effets de filtre SVG 179
Utilisation de la zone de dessin pour améliorer l'interface
graphique 182
Leçon 8 : Présentation des principes
de base de JavaScript et du
codage 189
Termes clés 189
Gestion et maintenance du langage JavaScript 189
Création et utilisation des fonctions 193
Utilisation de jQuery et d'autres bibliothèques
tierces 197
Mise à jour de l'interface utilisateur avec JavaScript 199
Localisation et accès aux éléments 201
Écoute et réponse aux événements 203
Affichage et masquage des éléments 206
Mise à jour du contenu des éléments 208
Ajout d'éléments 209
Leçon 9 : Création d'animations,
utilisation de graphiques et
accès aux données 215
Termes clés 215
Codage des animations avec JavaScript 216
Création d'animations 216
Utilisation d'images, de formes et d'autres
graphiques 219
Manipulation de l'élément canvas avec JavaScript 220
Envoi et réception de données 224
Transmission d'objets complexes et analyse 227
Chargement et enregistrement de fichiers 229
Utilisation du cache de l'application (AppCache) 231
Présentation et utilisation des types de données 233
Utilisation de JavaScript pour valider les entrées
d'utilisateur dans les formulaires 233
Présentation et utilisation des cookies 235
Présentation et utilisation de la fonction de stockage
local 237
Leçon 10 : Codage JavaScript pour
l'interface tactile, les ressources
des périphériques et du système
d'exploitation, etc. 243
Termes clés 243
Réponse à l'interface tactile 244
Capture et réponse aux mouvements 246
Codage des API HTML5 supplémentaires 249
Codage pour capturer la géolocalisation 249
Présentation des traitements Web 252
Présentation des WebSockets 255
Utilisation de l'API de fichier pour les téléchargements
de fichiers 258
Accès aux ressources des périphériques et du système
d'exploitation 260
Accès aux ressources en mémoire 260
Accès aux capacités matérielles 262
Présentation du GPS (Global Positioning System) 263
Présentation de l'accéléromètre 263
Accès à une caméra 263
Annexe 268
Index 269

Gestion du cycle
de vie d'une
application
LEÇON 1
1
T E R M E S C L É S
AppCache
autorisations d’identité
conteneur d’applications
cookies
débogage
espace de noms
état de l’application
état de session
événement tactile
feuilles de style en cascade (CSS)
HTML5
Hypertext Markup Language (HTML)
Hypertext Transport Protocol (HTTP)
icône de lancement
indépendant de la plateforme
informations d’état persistantes
interface de programmation d’application (API)
interface utilisateur Windows
JavaScript
jeux d’autorisations
langage de balisage
langage de script
localStorage
mouvement
package d’application
requêtes multimédias
sessionStorage
simulateur ou émulateur d’écran tactile
validateur
Windows Runtime (WinRT)
Windows Store
World Wide Web Consortium (W3C)
MATRICE D'OBJECTIFS D'EXAMEN
Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif
de l'examen MTA
Présentation des principes Connaissance des principes 1.1
fondamentaux de la plateforme fondamentaux de la plateforme
Présentation et gestion des Gestion de l’état d’une 1.2
états de l'application application
Présentation des interfaces Connaissance des principes 1.1
tactiles et des mouvements fondamentaux de la plateforme
Débogage et test d'une 1.3
application HTML5 à
interactions tactiles
Débogage et test des Débogage et test d’une 1.3
applications HTML5 application HTML5 à
interactions tactiles
Publication d'une application Publication d’une application 1.4
dans un magasin en ligne dans un magasin en ligne

2 | Leçon 1
Vous êtes le nouveau stagiaire chez Malted Milk Media, une agence de création
qui développe des applications Rich Media pour ses clients. La société va bientôt
commencer à utiliser HTML5 dans ses projets. Votre responsable vous a demandé
de faire des recherches sur HTML5 et les technologies connexes et de présenter un
rapport sur les modifications importantes apportées pour passer de HTML 4.01 à
HTML5. Vous devez également inclure des informations sur la façon dont HTML5
permet de créer des applications d'écran tactile, telles que celles des ordinateurs,
tablettes tactiles, tablettes et smartphones.
Hypertext Markup Language (HTML) est le langage que vous utilisez pour décrire des pages
Web. Il s'agit d'un langage de balisage, et non de programmation, ce qui signifie que HTML
utilise des balises de marquage comme body et h1 pour décrire les parties d'une page Web.
Un fichier HTML ne « s'exécute » pas comme un programme. Au lieu de cela, un fichier
HTML est interprété par un navigateur pour afficher une page Web basée sur les balises.
Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
de l'audio, de la vidéo et beaucoup d'interactivité dans les sites Web qu'ils visitent. En outre,
avec la montée en popularité des appareils mobiles comme les tablettes tactiles, tablettes et
smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
Tout cela a rendu nécessaire une nouvelle norme, qui sera HTML5. Le World Wide Web
Consortium (W3C) est l'organisme de normalisation principal qui développe des spécifications
pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
■ Présentation des principes fondamentaux de la plateforme
HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent
HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant
quelques années, la plupart des navigateurs Web modernes prennent déjà en charge
les éléments HTML5 et le développement d'applications HTML5 pour le Web et les
navigateurs d'appareils mobiles est en bonne voie.
L'ESSENTIEL
Figure 1-1
Le logo HTML5
Un point important à retenir est que HTML5 est une norme et une combinaison ou
famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
Les feuilles de style en cascade (CSS) définissent les styles pour HTML dans un fichier
séparé, de sorte que vous pouvez facilement modifier les polices, les tailles de polices et
autres attributs dans un fichier CSS et les modifications sont répercutées dans l'ensemble
des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
JavaScript est un langage de script (un langage de programmation qui utilise des scripts
et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
avez aussi la possibilité d'employer la combinaison pour développer des applications
Quelles sont les trois
technologies principales
de la famille HTML5 ?
1.1
Même si HTML5
est encore en
développement, la
plupart des navigateurs
Web tels que Microsoft
Internet Explorer,
Google Chrome,
Mozilla Firefox, Opera
et Apple Safari prennent
en charge de nombreux
éléments de HTML5.
REMARQUE
*
W3C®
est une marque
commerciale (déposée
dans de nombreux
pays) du World Wide
Web Consortium ; les
marques du W3C sont
déposées et détenues
par ses institutions
hôtes, le MIT, l'ERCIM
et l'université de Keio.
REMARQUE
*

clientes (applications) qui s'exécutent sur des appareils tactiles tels que des ordinateurs,
tablettes tactiles, tablettes et smartphones. Globalement, les technologies utilisées par
les développeurs pour créer des pages Web commencent à être employées pour créer des
applications qui s'exécutent sur différents appareils.
HTML5 est également indépendant de la plateforme. Cela signifie que la famille de
technologies HTML5 vous permet de créer des applications qui s'exécutent sur différents
systèmes d'exploitation de périphériques mobiles et de bureau, tels que Microsoft
Windows, Internet Explorer et Windows Phone. Vous pouvez également les exécuter
sous Mac OS X, Android, iOS et Blackberry OS. Parce que HTML5 est construit sur un
standard ouvert, les utilisateurs d'applications HTML5 n'ont pas à télécharger un plug-in
ou utiliser des dispositifs dotés de la prise en charge des plug-in. Au lieu de cela, vous
pouvez utiliser n'importe quel navigateur Web, que ce soit sur votre PC ou votre appareil
mobile et obtenir une expérience Web aussi riche.
Enfin, un élément important du développement d'applications dans l'environnement Windows
est l'interface utilisateur Windows, qui est l'interface utilisateur de la dernière version de
Microsoft Windows : Windows 8. L'interface utilisateur Windows inclut des fonctionnalités telles
qu'un aspect propre et sans encombrement, le mode plein écran, des concentrateurs de grande
taille (boutons graphiques) et l'accent sur le défilement latéral, pour n'en citer que quelques-unes.
Pour consulter un exemple, reportez-vous à la figure 1-2.
Figure 1-2
L'écran d'accueil de
Windows 8 est une interface
utilisateur Windows
Parce que ce manuel vous aide à vous préparer pour l'examen de certification Microsoft
Technology Associate (MTA) 98-375, Notions fondamentales sur le développement
d'applications HTML5, les exemples des leçons utilisent autant que possible les outils Microsoft.
Toutefois, l'examen ne se concentre pas sur un ensemble spécifique d'outils. Vous pouvez utiliser
la famille HTML5 avec de nombreux outils de beaucoup d'entreprises différentes. Même un
simple éditeur de texte tel que Bloc-notes ou Bloc-notes++ convient lorsque vous utilisez le
balisage HTML, CSS et JavaScript. Vous avez besoin d'outils plus complets, comme Visual
Studio, pour déboguer beaucoup de code, empaqueter des applications à distribuer et exécuter
d'autres tâches du même type. Des outils de développement gratuits pour créer des applications
Windows Store sont disponibles à l'adresse http://bit.ly/K8nkk1.
REMARQUE
*
Quelles sont les nouveautés de HTML5 ?
La famille de HTML5 comprend de nombreuses nouvelles balises de marquage
et technologies telles que les requêtes multimédias, la géolocalisation, Modernizr
et bien plus encore. Ces technologies ajoutent de nombreuses fonctionnalités aux
applications basées sur HTML et contribuent à rendre le produit fini plus élégant.
Vous en apprendrez
plus sur CSS3 et
JavaScript dans les
leçons ultérieures.
REMARQUE
*

Notions fondamentales sur le développement d’applications HTML5

Notions fondamentales sur le développement d’applications HTML5

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Dernier

Dernier (19)

Notions fondamentales sur le développement d’applications HTML5