Initiation html5 Css3partie1 PDF

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

®
Microsoft Official Academic Course
Notions fondamentales sur

le développement
d'applications HTML5,
examen 98-375
| i
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
www.wiley.com/college/microsoft ou
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
CONTRAT DE LICENCE UTILISATEUR FINAL
WILEY POUR LE LIVRE ÉLECTRONIQUE
MOAC ET LE CONTENU DU FORMATEUR
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.
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.
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). | v
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 Technology Associate (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.
vi | appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
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.
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | vii
viii | Tour du livre illustré
■ Fonctionnalités de la leçon
Création de l'interface LEÇON 3

utilisateur avec HTML5 :
Organisation, saisie et
validations
M AT R I C E D ' O B J E C T I F S D ' E X A M E N Matrice d'objectifs
Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif
de l'examen MTA d'examen
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
saisie et la validation
HTML5 pour les entrées et la
validation Aide au lecteur « Plus
d'informations »
TERMES CLÉS Termes clés
attribut autofocus élément nav
attribut email élément section
Gestion du cycle de vie d’une application | 5
attribut global entrée de formulaire
attribut pattern formulaire Web
✚ PLUS D’INFORMATIONS
attribut required liste non triée Les adresses Web utilisées dans les exercices précédents sont reprises ici pour plus de commodité. Il
balisage sémantique liste triée 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
élément article tableau Web qui propose des didacticiels sur HTML5 est disponible à l'adresse http://www.w3schools.com/
élément aside texte de l’espace réservé 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-
élément datalist validation studio-express-vs) et le site de MSDN à l'adresse http://bit.ly/Hd9uzt.
élément footer validation automatique
élément header validation côté client
Création d'applications
élément menu validation côté serveur 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
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, Scénario dans un navigateur, effectuer des modifications rapides, puis actualiser la fenêtre du
navigateur pour voir le résultat des changements.
vous devez tout d'abord apprendre la meilleure façon d'organiser ou de structurer le
balisage à l'aide des nouveaux éléments HTML5. d'entreprise 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.
Figure 1-3
53 Étapes générales de la
création d'une application
2 | Leçon 1
Vous êtes le nouveau stagiaire chez Malted Milk Media, une agence de création Dans cette section, vous découvrirez les étapes générales liées à la création d'une
qui développe des applications Rich Media pour ses clients. La société va bientôt application. La figure 1-3 illustre les étapes, qui sont expliquées ci-dessous :
commencer à utiliser HTML5 dans ses projets. Votre responsable vous a demandé • Planifier le projet : pensez au type d'application que vous souhaitez créer. Quoi
de faire des recherches sur HTML5 et les technologies connexes et de présenter un que vous choisissiez, il est préférable de commencer votre apprentissage du
rapport sur les modifications importantes apportées pour passer de HTML 4.01 à développement d'applications HTML5 par une application simple. Une fois que vous
HTML5. Vous devez également inclure des informations sur la façon dont HTML5 avez défini l'action principale de votre application, créez un plan du flux général de
permet de créer des applications d'écran tactile, telles que celles des ordinateurs, l'application de bout en bout. Déterminez aussi le type d'interactivité utilisateur que
tablettes tactiles, tablettes et smartphones. 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,
■ Présentation des principes fondamentaux de la plateforme 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
HTML5 est la dernière norme HTML et une famille de technologies qui rassemblent commandes dont vous aurez besoin pour que l'application s'exécute comme prévu et
HTML, CSS et JavaScript. Même si la norme HTML5 ne sera pas finalisée avant collectez des images et des clips multimédias si nécessaire. Au minimum, les applications
quelques années, la plupart des navigateurs Web modernes prennent déjà en charge d'aujourd'hui exigent une icône de lancement, qui représente votre application.
L'ESSENTIEL
les éléments HTML5 et le développement d'applications HTML5 pour le Web et les • Mise à jour du manifeste de l'application : chaque application nécessite un fichier
navigateurs d'appareils mobiles est en bonne voie. manifeste. Le fichier manifeste décrit les propriétés de l'application et ce dont elle a
Hypertext Markup Language (HTML) est le langage que vous utilisez pour décrire des pages
L'essentiel 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
Web. Il s'agit d'un langage de balisage, et non de programmation, ce qui signifie que HTML du fichier à l'icône de l'application, les fonctionnalités de l'application (fonctionnalités
utilise des balises de marquage comme <body> et <h1> pour décrire les parties d'une page Web. ou périphériques système que votre application peut utiliser), et bien plus encore.
REMARQUE
* 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.
W3C® est une marque
commerciale (déposée Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
dans de nombreux changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
pays) du World Wide 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
Web Consortium ; les smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
marques du W3C sont interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
déposées et détenues
par ses institutions 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
hôtes, le MIT, l'ERCIM pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
et l'université de Keio. PRÊT POUR LA CERTIFICATION
Figure 1-1
Le logo HTML5
REMARQUE
*
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 Un point important à retenir est que HTML5 est une norme et une combinaison ou
en charge de nombreux famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
éléments de HTML5. 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
PRÊT POUR LA CERTIFICATION des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
Quelles sont les trois JavaScript est un langage de script (un langage de programmation qui utilise des scripts
technologies principales et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
de la famille HTML5 ? Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
1.1 avez aussi la possibilité d'employer la combinaison pour développer des applications
Tour du livre illustré | ix
Figure 1-5
Une partie de la page Web
Exemples de code pour
développeurs de MSDN
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.
Figure 1-6
Affichage d'une page Web
d'exemple d'application

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 PRÊT POUR LA CERTIFICATION
Quelle est la différence
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
d'écran demandes de la même page Web ou d'une page différente. Lorsque l'utilisateur demande
entre l'état de session et
l'état de l'application ? pour la première fois l'accès à une application, l'état de session est créé. L'état se termine
1.2 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
PRÊT POUR LA CERTIFICATION Web, et se termine lorsque l'utilisateur referme le navigateur.
Quelle est l'importance Les informations d'état persistantes sont les données dont une application a besoin après
des informations d'état la fin de la session. De nombreuses applications Web doivent stocker des données (et les
persistantes ? rendre persistantes) afin que les utilisateurs puissent reprendre à l'endroit où ils se sont
1.2 arrêtés lorsqu'ils retournent sur le site.
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
60 | Leçon 3 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
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 :
Alerte Prêt 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
<nav>
<a href="http://www.example.com/Services">Précédent</a> |
pour la 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,
certification
PRÊT POUR LA CERTIFICATION
<a href="http://www.example.com">Accueil</a> | qui sont de petits fichiers qui contiennent des informations sur l'utilisateur et le site Web
Comment HTML5 gère-t-il visité et sont enregistrés sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
<a href="http://www.example.com/About">Suivant</a> les données d'état ? site visité, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
</nav> 1.2 Web à « se souvenir » d'un utilisateur et à personnaliser son expérience sur ce site.
<br />
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
Les liens s'afficheraient dans une page Web, comme illustré dans la figure 3-6. 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
La navigation est souvent affichée dans une liste verticale. Vous allez apprendre à le faire offre plus de flexibilité, de plus grands ensembles de données et de meilleures performances.
plus tard dans cette leçon.
La méthode localStorage permet aux utilisateurs de conserver de plus grandes quantités de
PRÊT POUR LA CERTIFICATION données d'une session à l'autre (données persistantes) et leur existence n'est pas limitée
Laquelle des deux dans le temps. La méthode sessionStorage permet de conserver les données uniquement
méthodes, HTML5/ pendant une session (jusqu'à ce que la fenêtre du navigateur soit fermée). On parle
Figure 3-6 JavaScript, permet à une également de « stockage par onglet ».
application de stocker les
Navigation Précédent- Ces méthodes permettent de transférer des données spécifiques uniquement sur demande.
données persistantes ? Il est donc possible de stocker une quantité relativement importante de données sans
Accueil-Suivant avec 1.2 ralentir la connexion ou le site.
des barres verticales qui
séparent chaque lien 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
X REF
charge et fonctionne correctement. Un fichier manifeste de cache ressemble à ce qui suit :
Vous en apprendrez index.html
A JOUTER L'ÉLÉMENT NAV À UN DOCUMENT HTML plus sur l'utilisation
stylesheet.css
PRÉPAREZ-VOUS. Pour ajouter l'élément nav dans un document HTML, procédez comme suit : de AppCache avec
images/dot.png
JavaScript dans la
1. Dans votre éditeur HTML ou à l'aide d'un outil de développement d'application, leçon 8. scripts/main.js
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> Aide au lecteur
<a href="#symphonies">Symphonies</a> |
<a href="#raves">Raves</a>
</nav>
« Référence croisée »
</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>
Exercices étape par étape
x | Tour du livre illustré
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.
■ 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
L'ESSENTIEL 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.
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.
Balisage et structure de page de base
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 Aide au lecteur
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é.
« Remarque »
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 Création de l’interface utilisateur avec HTML5 : Organisation, saisie et validations | 55
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), Figure 3-1
et vous pouvez entrer les balises en majuscules ou en minuscules. Toutefois, le balisage Comparaison des parties de
utilisé dans ce guide comporte exclusivement des balises de début et de fin, entièrement document balisées en HTML
en minuscules, par souci de cohérence. 4.01 et HTML5
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.
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.
Utilisation des balises pour structurer un document HTML
Parmi les nouveaux éléments de HTML5 en termes de structuration et d'organisation du

PRÊT POUR LA CERTIFICATION contenu dans un document HTML, on trouve header, footer, section, nav, article et aside.
Quelles sont les balises
HTML5 utilisées pour
structurer et organiser un Maintenant que vous comprenez le balisage sémantique, nous allons étudier plusieurs des
document ? nouveaux éléments HTML5 pour l'organisation des documents. Le tableau 3-1 liste et
2.4 décrit les nouvelles balises liées à la structure HTML5.
Tableau 3-1
Nouvelles balises HTML5 Balise Description
pour l'organisation du
contenu et la création de
<address> Définit une zone pour obtenir les coordonnées d'une page ou d'une
Gestion de l'interface graphique avec CSS | 163 structure
section
<article> Définit un article, comme un article de magazine ou de journal, un
<body> billet de blog ou un contenu similaire
<div>Exemple de boîte</div> <aside> Définit le contenu qui est distinct mais quand même associé au contenu
</body> de la page. Semblable à une barre latérale dans les chapitres de livres et
</html> les articles de magazine
2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un <details> Contient des détails supplémentaires relatifs au texte autour. Crée un
navigateur Web, qui doit ressembler à la figure 7-4. 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
Figure 7-4 l'auteur du document, les coordonnées, les informations de copyright
Boîte avec des coins arrondis 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
3. Pour ajouter une ombre portée, ajoutez la ligne suivante à l'élément de style : <hgroup> Regroupe les titres et les sous-titres (à l'aide des balises <h1> à <h6>)
pour des titres sur plusieurs niveaux
box-shadow: 5px 5px 5px #999;
<nav> Définit un bloc de liens de navigation
4. Enregistrez le fichier et affichez les résultats dans un navigateur Web. La boîte doit <section> Définit une section d'un document, comme des chapitres, des parties
ressembler à la figure 7-5. 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
Figure 7-5 cliquer pour afficher ou masquer les informations
Boîte avec des coins arrondis
<wbr> Définit un saut de ligne éventuel. Lorsqu'un mot est très long ou
et une ombre portée
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
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
Tableaux faciles à lire
se trouve sur la droite.
Figure 7-6
Transparence appliquée
à une image
Photos
PRÊT POUR LA
CERTIFICATION La syntaxe permettant d'appliquer une transparence à une image ou un autre élément est :
Quelle propriété CSS
vous permet d'appliquer opacity: value
de la transparence à
un élément ou à une La valeur est une valeur à virgule flottante comprise entre 0,0 (100 % transparent) et
image ?
1,0 (100 % opaque). Pour appliquer une transparence de 45 %, par exemple, vous devez
3.4 utiliser la valeur 0,55 (1,0 – 0,45).
Tour du livre illustré | xi
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133
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.
RÉSUMÉ DES COMPÉTENCES Matrice Résumé des

Dans cette leçon, vous avez appris ce qui suit : compétences
• L es interfaces utilisateur peuvent être simples et directes ou être plus complexes
avec plusieurs sections, boutons et contrôles.
• L a 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.
86 | Leçon 3
■ Évaluation des connaissances

10. Quel est le format de la balise HTML5 qui valide une adresse e-mail ?
Compléter l’espace vide a. <input label="email" name="URL">
b. <form id="email">
Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces
c. <label for="email">Email</label>
prévus à cet effet.
d. <input type = "email" name = "email">
1. L' est la partie d’un site Web ou d’une application avec laquelle
l'utilisateur peut interagir. Vrai/Faux
2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
entre la bordure et le contenu de la boîte.
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

Évaluation des
Scénario 3-1 : Balisage d’un article de journal compétences
Évaluation des 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
connaissances 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 ?
Questions 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
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 133 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
Bien que cet exemple utilise le mot clé auto, vous pouvez utiliser les valeurs grid-rows et les tableaux correctement dans HTML5. Que pouvez-vous lui dire ?
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
■ Évaluation de la maîtrise des concepts Évaluation de
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.
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
la maîtrise des
RÉSUMÉ DES COMPÉTENCES
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 ?
concepts
Dans cette leçon, vous avez appris ce qui suit :
Scénario 3-4 : Utilisation des types d’entrée appropriés dans un formulaire Web
• L es interfaces utilisateur peuvent être simples et directes ou être plus complexes
avec plusieurs sections, boutons et contrôles. Margie est en train de créer et de tester un formulaire Web qui comporte entre autres un
• L a conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits champ pour l’adresse e-mail, un champ pour l’adresse Web et un champ pour le code
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le postal. Lorsque certains de ses collègues testent le formulaire, elle remarque que très
modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de souvent ils entrent par erreur l’adresse e-mail dans le champ réservé à l’adresse Web,
code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS et parfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ
ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur
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 ?
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.
• L es 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.

Compléter l’espace vide
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.
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
L'ESSENTIEL 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.
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é.
Des aides au lecteur figurent dans le texte, dans des cases
REMARQUE*
* grisées. Remarque fournit des conseils utiles liés à des tâches
ou sujets particuliers.
Ces remarques fournissent des pointeurs vers des informations
X REF
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.
xii | appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
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.
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xiii
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.
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.
appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement). | xv
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
*
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.
Numéro gratuit de MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).

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 Douglas Tabbutt, Blackhawk Technical College
Palaniappan Vairavan, Bellevue College David Koppy, Baker College
Harold « Buz » Lamson, ITT Technical Institute Sharon Moran, Hillsborough Community College
Colin Archibald, Valencia Community College Keith Hoell, Briarcliffe College et Queens College,
Catherine Bradfield, DeVry University en ligne CUNY
Robert Nelson, Blinn College Mark Hufnagel, Lee County School District
Kalpana Viswanathan, Bellevue College Rachelle Hall, Glendale Community College
Bob Becker, Vatterott College Scott Elliott, Christie Digital Systems, Inc.
Carol Torkko, Bellevue College Gralan Gilliam, Kaplan
Bharat Kandel, Missouri Tech Steve Strom, Butler Community College
Linda Cohen, Forsyth Technical Community College John Crowley, Bucks County Community College
Candice Lambert, Metro Technology Centers Margaret Leary, Northern Virginia Community College
Susan Mahon, Collin College Sue Miner, Lehigh Carbon Community College
Mark Aruda, Hillsborough Community College Gary Rollinson, Cabrillo College
Claude Russo, Brevard Community College Al Kelly, University of Advancing Technology
Heith Hennel, Valencia College Katherine James, Seneca College
Adrian Genesir, Western Governors University David Kidd, Western Governors University
Zeshan Sattar, Zenos
xviii | appelez le numéro gratuit du programme MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).
Brève table des matières
Leçon 1 : Gestion du cycle de vie d'une application 1

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

Création de tableaux 64 Utilisation de la boîte flexible pour des dispositions
Création de listes 69 simples et utilisation de la grille pour les dispositions
Sélection et configuration des balises HTML5 pour la complexes 112
saisie et la validation 72 Utilisation de la boîte flexible (Flexbox) pour
Présentation des entrées et des formulaires 73 appliquer au contenu un alignement, une direction
Découverte de la création de formulaire, des attributs Input et une orientation 114
et des valeurs 77 Utiliser les éléments Flexboxes et Flexbox 116
Présentation de la validation 81 Mise à l'échelle proportionnelle dans une boîte flexible 116
Résumé des compétences 83 Modification de l'orientation des éléments enfants dans une
boîte flexible 122
Évaluation des connaissances 84
Tri et réorganisation du contenu 126
Évaluation des compétences 86
Utilisation des dispositions en grille pour appliquer
Évaluation de la maîtrise des concepts 86 au contenu un alignement, une direction et une
orientation 128
Leçon 4 : P
résentation des notions Création d'une grille à l'aide de propriétés CSS pour les
lignes et colonnes 130
essentielles sur les feuilles de style Présentation des modèles de grille 132
en cascade CSS : Flux de contenu, Résumé des compétences 133
positionnement et style 87 Évaluation des connaissances 133
Évaluation des compétences 135
Matrice d'objectifs d'examen 87
Termes clés 87
Présentation des notions essentielles sur les feuilles
de style en cascade CSS 87 Leçon 6 : Gestion de l'enchaînement du
Utilisation des outils appropriés 88 texte avec CSS 137
Exploration du lien entre HTML et CSS 89
Séparation du contenu et du style 91 Matrice d'objectifs d'examen 137
Présentation des sélecteurs et des déclarations 92
Présentation des polices et des familles de polices 94 Termes clés 137
Gestion du flux de contenu 96 Gestion de l’enchaînement du texte avec CSS 137
Positionnement des éléments individuels 99 Présentation et utilisation des régions pour contrôler
Application du positionnement flottant 99 l'enchaînement du texte entre plusieurs sections 139
Application du positionnement absolu 100 Enchaînement dynamique du contenu à travers les
Gestion du débordement de contenu 102 conteneurs 140
Présentation du débordement de défilement 102 Débordement du texte 142
Présentation du débordement visible et du débordement Implémentation Microsoft des régions CSS 142
masqué 104 Utilisation des colonnes et de la césure pour optimiser la
Résumé des compétences 105 lisibilité du texte 145
Évaluation des connaissances 106 Création de colonnes 146
Utilisation de la césure 150
Évaluation des compétences 108 Utilisation d'exclusions CSS pour créer un enchaînement
Évaluation de la maîtrise des concepts 109 autour d'un objet flottant 152
Résumé des compétences 155
Leçon 5 : P
résentation des notions Évaluation des connaissances 155
essentielles sur les feuilles Évaluation des compétences 157
de style en cascade CSS : Évaluation de la maîtrise des concepts 158
Dispositions 110
Leçon 7 : Gestion de l'interface graphique
Matrice d'objectifs d'examen 110 avec CSS 159
Termes clés 110
Organisation du contenu d’une interface utilisateur Matrice d'objectifs d'examen 159
Termes clés 159
xxii | Contents
Gestion de l'interface graphique avec CSS 159 Codage des animations avec JavaScript 216
Création d'effets graphiques 160 Création d'animations 216
Création d'angles arrondis 160 Utilisation d'images, de formes et d'autres
Création d'ombres 161 graphiques 219
Application de la transparence 163 Manipulation de l'élément canvas avec JavaScript 220
Application de dégradés à l'arrière-plan 164
Présentation de la typographie et du format WOFF (Web Envoi et réception de données 224
Transmission d'objets complexes et analyse 227
Open Font Format) 166
Application des transformations 2D et 3D 167 Chargement et enregistrement de fichiers 229
Traduction 2D 168 Utilisation du cache de l'application (AppCache) 231
Mise à l'échelle 2D 169 Présentation et utilisation des types de données 233
Rotation 2D et 3D 171 Utilisation de JavaScript pour valider les entrées
Inclinaison 2D et 3D 172 d'utilisateur dans les formulaires 233
Présentation de la perspective 3D, des transitions et des Présentation et utilisation des cookies 235
animations 173
Application d'effets de filtre SVG 179 Présentation et utilisation de la fonction de stockage
Utilisation de la zone de dessin pour améliorer l'interface local 237
graphique 182 Résumé des compétences 239
Résumé des compétences 185 Évaluation des connaissances 240
Évaluation des connaissances 186 Évaluation des compétences 242
Évaluation des compétences 188 Évaluation de la maîtrise des concepts 242
Leçon 10 : Codage JavaScript pour
Leçon 8 : Présentation des principes l'interface tactile, les ressources
de base de JavaScript et du des périphériques et du système
codage 189 d'exploitation, etc. 243
Matrice d'objectifs d'examen 189 Matrice d'objectifs d'examen 243
Termes clés 189 Termes clés 243
Gestion et maintenance du langage JavaScript 189 Réponse à l'interface tactile 244
Création et utilisation des fonctions 193 Capture et réponse aux mouvements 246
Utilisation de jQuery et d'autres bibliothèques Codage des API HTML5 supplémentaires 249
tierces 197 Codage pour capturer la géolocalisation 249
Mise à jour de l'interface utilisateur avec JavaScript 199 Présentation des traitements Web 252
Localisation et accès aux éléments 201 Présentation des WebSockets 255
Écoute et réponse aux événements 203 Utilisation de l'API de fichier pour les téléchargements
Affichage et masquage des éléments 206 de fichiers 258
Mise à jour du contenu des éléments 208 Accès aux ressources des périphériques et du système
Ajout d'éléments 209 d'exploitation 260
Résumé des compétences 211 Accès aux ressources en mémoire 260
Évaluation des connaissances 212 Accès aux capacités matérielles 262
Présentation du GPS (Global Positioning System) 263
Évaluation des compétences 214 Présentation de l'accéléromètre 263
Évaluation de la maîtrise des concepts 214 Accès à une caméra 263
Résumé des compétences 264
Leçon 9 : C
réation d'animations, Évaluation des connaissances 265
utilisation de graphiques et Évaluation des compétences 267
accès aux données 215 Évaluation de la maîtrise des concepts 267
Matrice d'objectifs d'examen 215 Annexe 268

Termes clés 215 Index 269
Gestion du cycle LEÇON 1
de vie d'une
application
M AT R I C E D ' O B J E C T I F S D ' E X A M E N

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
TERMES CLÉS
AppCache interface de programmation d’application (API)
autorisations d’identité interface utilisateur Windows
conteneur d’applications JavaScript
cookies jeux d’autorisations
débogage langage de balisage
espace de noms langage de script
état de l’application localStorage
état de session mouvement
événement tactile package d’application
feuilles de style en cascade (CSS) requêtes multimédias
HTML5 sessionStorage
Hypertext Markup Language (HTML) simulateur ou émulateur d’écran tactile
Hypertext Transport Protocol (HTTP) validateur
icône de lancement Windows Runtime (WinRT)
indépendant de la plateforme Windows Store
informations d’état persistantes World Wide Web Consortium (W3C)
1
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.
■ 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
L'ESSENTIEL
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.
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.
REMARQUE
* 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.
W3C® est une marque
commerciale (déposée Depuis 1999, HTML 4.01 est la norme pour les pages Web, mais le monde a un peu
dans de nombreux changé depuis. Les utilisateurs Web veulent des applications Web plus riches qui intègrent
pays) du World Wide 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
Web Consortium ; les smartphones, les utilisateurs veulent faire l'expérience de la même richesse et de la même
marques du W3C sont interactivité avec les applications mobiles, quel que soit l'appareil qu'ils choisissent.
déposées et détenues
par ses institutions 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
hôtes, le MIT, l'ERCIM pour HTML5, ce qui devrait être achevé en 2014. Le logo HTML5 est illustré à la figure 1-1.
et l'université de Keio. PRÊT POUR LA CERTIFICATION
Figure 1-1
Le logo HTML5
REMARQUE
*
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 Un point important à retenir est que HTML5 est une norme et une combinaison ou
en charge de nombreux famille de nouvelles balises HTML, CSS, JavaScript et autres technologies connexes.
éléments de HTML5. 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
PRÊT POUR LA CERTIFICATION des fichiers HTML qui référencent le fichier CSS. La dernière version de CSS est CSS3.
Quelles sont les trois JavaScript est un langage de script (un langage de programmation qui utilise des scripts
technologies principales et ne nécessite pas de compilateur) qui ajoute l'interactivité aux pages Web.
de la famille HTML5 ? Vous pouvez utiliser HTML5, CSS3 et JavaScript pour créer des pages Web. Vous
1.1 avez aussi la possibilité d'employer la combinaison pour développer des applications
clientes (applications) qui s'exécutent sur des appareils tactiles tels que des ordinateurs,
REMARQUE
* tablettes tactiles, tablettes et smartphones. Globalement, les technologies utilisées par
Vous en apprendrez les développeurs pour créer des pages Web commencent à être employées pour créer des
plus sur CSS3 et applications qui s'exécutent sur différents appareils.
JavaScript dans les
HTML5 est également indépendant de la plateforme. Cela signifie que la famille de
leçons ultérieures. 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
*
REMARQUE
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.
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.
4 | Leçon 1
Voici une courte liste de ces nouvelles fonctionnalités et de brèves descriptions :

• Balises audio et vidéo : intègrent du contenu multimédia audio et vidéo à l'aide des
balises de marquage HTML5 <audio> et <video>.
• Zone de dessin : élément HTML5 qui crée un conteneur pour graphiques et utilise
JavaScript pour dessiner les graphiques en fonction des besoins.
• Requêtes multimédias : fonction CSS3 qui détecte le type d'écran de l'utilisateur et
adapte la taille d'affichage en conséquence.
• Nouvelles interfaces de programmation d'application (API) : fournissent aux
applications un accès à de nombreuses ressources, comme les fichiers, les webcams et
les animations accélérées au niveau matériel.
• Géolocalisation : utilise JavaScript pour détecter l'emplacement (positionnement
géographique) d'un périphérique client, qu'il s'agisse d'un appareil Windows Phone,
d'un téléphone Android ou d'un PC.
• Modernizr : bibliothèque JavaScript qui permet de fournir les nouvelles fonctions
HTML5 et CSS3 dans des navigateurs plus anciens.
Il s'agit d'un petit échantillon des fonctionnalités et technologies disponibles. Vous apprendrez
comment utiliser plusieurs d'entre elles dans les leçons qui composent ce cours.
EXPLOREZ LA NORME HTML5

PRÉPAREZ-VOUS. Pour en savoir plus sur la norme HTML5, procédez comme suit :
1. Accédez au site Web du W3C à l'adresse http://www.w3.org/TR/html5/.
2. Lisez le contenu des premières pages, jusqu'à la table des matières, puis répondez aux
questions suivantes :
• Quelle est la dernière version publiée de la norme ?
• Quel groupe de travail est responsable de la spécification ?
• Quel est le nom de la page Web qui permet le suivi des bogues, et quels sont les
trois bogues qui n'ont pas encore été traités ?
• Quel est le nom de la page Web qui permet le suivi des problèmes en suspens, et
quels sont les trois problèmes qui n'ont pas encore été traités ?
3. Passez environ 15 minutes à naviguer sur le reste de la page Web HTML5 principale
afin de vous familiariser avec les sujets.
EXPLOREZ LES RESSOURCES DE DÉVELOPPEMENT D'APPLICATIONS

PRÉPAREZ-VOUS. Pour en savoir plus sur les ressources de développement d'applications
fournies par Microsoft, procédez comme suit :
1. Accédez au site Web Visual Studio 2012 à l’adresse http://msdn.microsoft.com/fr-fr/
library/vstudio/dd831853(v=vs.110).aspx.
2. Dans la page qui s'affiche, consultez les informations. Quels sont les outils de
développement ou technologies qui vous permettent de créer des applications
Windows Store ?
3. Accédez à la page Web HTML/CSS pour les applications Windows Store à l'adresse
http://msdn.microsoft.com/fr-fr/library/windows/apps/br229576.
4. Cliquez sur le lien Informations de référence HTML et DOM, puis répondez
à la question suivante :
• Qu'est-ce que le DOM (Document Object Model) et quelle est son importance
pour les applications Windows Store ?
5. Retournez à la page HTML/CSS pour les applications Windows Store à l'adresse
http://msdn.microsoft.com/fr-fr/library/windows/apps/br229576. Cliquez sur le lien
Référence des feuilles de style en cascade, puis effectuez l'action suivante :
• Nommez trois éléments de pages Web qui sont contrôlés à l'aide de CSS.
6. Allez sur le site MSDN à l'adresse http://bit.ly/Hd9uzt. Parcourez les informations afin
de vous familiariser avec le site.
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.
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.
Figure 1-3
Étapes générales de la
création d'une application
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.
6 | Leçon 1
Figure 1-4
Un exemple d'un fichier
manifeste
• Écrire le code : au cours de cette phase, vous composez le code de votre application,
qui peut inclure une combinaison de HTML, CSS et JavaScript.
• Développer l'application : à l'aide d'un outil de développement d'applications tel que
Visual Studio, convertissez le code et les autres ressources en une application réelle.
• Déboguer et tester : vous devez tester votre application soigneusement et résoudre les
éventuels problèmes qui apparaissent. Si l'application utilise une interface tactile, il est
très important de la tester sur un appareil tactile ou d'utiliser un émulateur tactile.
• Créer le package : l'empaquetage d'une application crée un conteneur qui contient
tous les différents fichiers requis par l'application, tels que JavaScript, des images et
ainsi de suite.
• Valider : valider votre application implique d'exécuter un programme de validation
sur cette application pour s'assurer que rien ne manque.
• Déployer : télécharger une application sur une place de marché comme le Windows Store.
Les applications que vous prévoyez de déployer pour de nombreux utilisateurs,
notamment via un marché comme un magasin d'applications, doivent être fiables
et sûres. De nombreuses applications sont également conçues pour fonctionner sur
plusieurs systèmes d'exploitation. Assurez-vous que vous avez testé soigneusement votre
application et que vous l'avez validée avec les outils appropriés. Vous devez également
envisager de fournir un support technique pour des applications plus complexes.
PRÉPARATION POUR LE DÉVELOPPEMENT D'APPLICATIONS

PRÉPAREZ-VOUS. Pour vous préparer à utiliser HTML5 et à développer des applications,
procédez comme suit :
1. Cherchez des sources d'images gratuites, non protégées par copyright sur le Web.
Même si vous êtes capable de créer beaucoup de vos graphiques, disposer de
ressources dans lesquelles puiser vous sera utile.
2. Pour utiliser des fichiers HTML5, CSS et JavaScript, téléchargez et installez un éditeur
de texte ou HTML, tel que Bloc-notes++. (Il suffit de chercher Bloc-notes++ à l'aide d'un
navigateur Web.) Un outil plus complet est Visual Studio Express pour le Web, disponible
sur le site Web de Visual Studio à l'adresse http://bit.ly/eBUygk. Visual Studio Express
pour le Web vous permet d'ouvrir vos fichiers dans un navigateur Web avec un seul clic
et fournit beaucoup de modèles destinés à vous aider à créer rapidement des fichiers.
3. Assurez-vous que la dernière version du navigateur est installée.

4. Pour créer des applications pour le Windows Store, téléchargez Microsoft Visual Studio
2012 Express pour Windows 8 à partir de l'adresse http://dev.windows.com/fr-fr/
develop/downloads et installez-le. Le programme requiert que Windows 8 soit installé.
Exploration de l'empaquetage et de l'environnement d'exécution
L'environnement d'exécution de Windows sert de base au système d'exploitation

Windows 8 et fournit des fonctionnalités pour les applications Windows Store.
Lorsqu'une application est lancée, on considère qu'elle se trouve dans un environnement

d'exécution (RTE). Il s'agit de l'environnement dans lequel les développeurs testent
leurs applications et où les utilisateurs exécutent celles-ci. Windows a son propre
environnement d'exécution, appelé Windows Runtime (WinRT).
WinRT est la base du système d'exploitation Windows 8 et se compose de couches qui
fournissent les fonctionnalités aux applications Windows Store et à Windows Shell. WinRT
prend en charge les applications écrites dans des langages différents qui utilisent l'interface
utilisateur Windows.
La couche système de Windows est à la base. Cette couche inclut le noyau, les services et
le mode utilisateur Windows. Un niveau plus haut, le noyau Windows Runtime inclut des
services supplémentaires comme la gestion de la mémoire et la globalisation. Au-dessus
du noyau Windows Runtime se trouvent les couches liées aux périphériques, aux supports,
à la mise en réseau, au stockage local et distant et plus encore. La couche d'interface
utilisateur prend en charge notamment les applications HTML5.
WinRT utilise C#, C++, Visual Basic et JavaScript. Vous pouvez développer des
applications Windows Store avec la bibliothèque WinRT et Windows pour les API
JavaScript. Une interface de programmation d’application (API) est tout simplement
une liste d'instructions qui permettent à un programme de communiquer avec un autre
programme. Dans une application Web, une API permet à un navigateur Web ou un
serveur Web de communiquer avec d'autres programmes. Des centaines d'API sont
disponibles pour de nombreux usages différents.
Le Document Object Model (DOM) est une API importante à garder à l'esprit. Le
DOM est conçu pour HTML et XML (Extensible Markup Language) et permet aux
REMARQUE
* programmes et scripts de mettre à jour le contenu, la structure et les styles à la volée.
En gros, l'intégralité du contenu d'un fichier HTML ou XML peut être modifiée. Le
DOM n'est ni en HTML ni en JavaScript, mais il les lie.
PRÊT POUR LA CERTIFICATION La bibliothèque Windows pour JavaScript comprend des fichiers JavaScript et CSS que les
Quel environnement développeurs peuvent utiliser pour créer des applications Windows Runtime plus facilement et
donne aux développeurs rapidement. La bibliothèque, HTML, CSS et WinRT vous permettent de créer des applications.
l'accès à un appareil de L'environnement d'exécution est responsable de l'accès aux appareils, supports, à la mise
l'utilisateur ? en réseau, au stockage local et distant, ainsi qu'à d'autres éléments. Un développeur peut
1.1 utiliser des API et l'environnement d'exécution pour demander l'accès aux périphériques
utilisateur dans une application. Dans une application Windows 8, par exemple, l'appareil
peut être un clavier, une souris, un pavé tactile, une imprimante, une webcam ou un micro.
Pour plus d'informations sur Windows Runtime, visitez la page Web « Fonctionnalités et différences HTML,
CSS et JavaScript (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465380.aspx.
PRÉSENTATION DU PROCESSUS HÔTE

Qu'une application soit une application Web ou qu'elle ait été créée pour Windows, elle
requiert un hôte du runtime pour démarrer. Par exemple, lorsque vous démarrez Internet
Explorer, un processus hôte dans le système d'exploitation contrôle l'exécution globale du
8 | Leçon 1
navigateur. (Un « processus » est simplement un programme qui est exécuté.) Dans ce cas,
chaque onglet de navigateur a son propre processus, donc si trois onglets sont ouverts, le
système a trois processus qui s'exécutent pour chacun de ces onglets.
Lorsque vous exécutez une application Windows Store qui a été créée avec JavaScript,
Internet Explorer affiche le contenu HTML un peu comme lorsque vous naviguez vers une
page Web, mais le navigateur est hébergé par un processus différent, appelé WWAHost.
exe. Ce processus exécute l'application à l'intérieur d'un conteneur d'applications. (Vous
découvrirez les conteneurs d'applications dans la section suivante.) WWAHost fait passer le
HTML, CSS et JavaScript dans la page default.html qui est le début de votre application.
Pour que tout fonctionne bien, le code qui s'exécute dans un conteneur d'applications Windows
Store est restreint à certaines actions, par défaut. Si vous voulez que votre application accède
Quel est le rôle du à un périphérique, une autre application, Internet ou quoi que ce soit en dehors d'elle-même,
processus hôte dans la vous devez déclarer (spécifier) l'interaction dans le manifeste de l'application. Ces déclarations
gestion des applications ? sont trouvent dans la section Fonctionnalités du manifeste. Lorsque l'utilisateur final installe
1.1 l'application, il doit accorder l'autorisation pour l'accès demandé.
Les applications Windows Store utilisent des contrats, qui sont pour l'essentiel des
accords, et des éléments appelés extensions lors de la création d'interactions entre les
applications. Les API WinRT gèrent la communication entre les applications.
PRÉSENTATION DU PACKAGE D'APPLICATION ET DU CONTENEUR D'APPLICATIONS

L'objectif d'un package d'application est de faciliter la distribution et le déploiement.
L'empaquetage d'application regroupe les fichiers et dossiers d'une application dans un
package distribuable. Un conteneur d'applications garantit que l'application s'exécute dans
sa propre zone mémoire et n'endommage pas le système d'exploitation.
L'empaquetage d'applications désigne le processus d'assemblage d'une application et de
ses différents fichiers dans un fichier distribuable, ce qui facilite son déploiement. Le
package de l'application est le résultat du processus d'empaquetage. L'empaquetage est
similaire à l'archivage d'un dossier qui contient des fichiers et des sous-dossiers. Il serait
difficile d'envoyer tous les fichiers et les sous-dossiers à quelqu'un en l'état, mais le
travail est beaucoup plus facile si on compresse le tout dans un fichier d'archives unique.
Les packages de développement d'applications tels que Visual Studio fournissent les
PRÊT POUR LA CERTIFICATION fonctionnalités pour créer des packages d'applications. Un utilisateur acquiert un package
Quel est le but de d'application, généralement à partir d'un magasin d'application en ligne et l'installe sur
l'empaquetage d'une un PC ou un périphérique. L'application est exécutée dans un conteneur d'applications
application ? d'exécution, qui correspond à une zone mémoire séparée. Il empêche l'endommagement
1.1
du système d'exploitation si l'application échoue pour une raison quelconque et permet
à l'utilisateur de désinstaller proprement l'application.
Voici quelques éléments que vous devez savoir sur les packages :
• Un package peut contenir des pages Web, du code, des tables de base de données et des
procédures. Quand un package est doté d'une interface utilisateur, on parle d'application.
• Un package peut contenir d'autres packages.
• Vous pouvez déplacer un ou plusieurs éléments dans un package ou les en retirer.
Parce qu'un package se trouve dans son propre conteneur, si vous déplacez un
package, tout son contenu se déplace comme une unité.
• Un utilisateur peut installer, mettre à jour ou supprimer un package.
Un seul package peut offrir de nombreuses fonctionnalités. Afin de s'assurer que tous les composants
sont séparés pour éviter les conflits, un package définit un espace de noms. Envisagez un espace
de noms comme un espace de travail pour les objets associés (pages, code, etc.).
EXPLORATION D’EXEMPLES D'APPLICATIONS

PRÉPAREZ-VOUS. Pour explorer les types d'exemples d'applications qui sont disponibles
en téléchargement, procédez comme suit :
1. Accédez à la page Web Exemples de code pour développeurs de MSDN (voir la
figure 1-5) à l'adresse http://bit.ly/H57ZVh. Microsoft fournit un large éventail
d'exemples d'applications et de code, que vous pouvez télécharger et ouvrir dans un
outil de développement d'applications tel que Visual Studio. Vous pouvez également
afficher le code pour les nombreux exemples d'applications en ligne.
Figure 1-5
Une partie de la page Web
Exemples de code pour
développeurs de MSDN
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.
Figure 1-6
Affichage d'une page Web
d'exemple d'application
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.
10 | Leçon 1
6. Cliquez sur css dans le volet gauche, puis sur default.css. Le code CSS s'affiche.
7. Cliquez sur js dans le volet gauche, puis sur default.js. Le code JavaScript s'affiche.
8. Si vous disposez d'un outil de développement d'applications (tel que Visual Studio)
déjà installé, n'hésitez pas à télécharger et ouvrir l'exemple d'application pour
parcourir tous les fichiers du package.
9. Vous pouvez aussi accéder au site Web HTML5Rocks.com, cliquer sur le menu
Publications et didacticiels situé en haut de l'écran, cocher la case Exemples, puis
découvrir comment chaque exemple fonctionne et son code.
10. Fermez toutes les fenêtres ouvertes.
Pour plus d'informations sur le package d'application, visitez la page Web « Packages et déploiement
d’applications » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh464929.aspx.
Présentation des jeux d'informations d'identification et d'autorisations
Le .NET Framework fournit un environnement sûr dans lequel les applications

HTML5/JavaScript peuvent s'exécuter. L'infrastructure utilise la transparence de la
sécurité pour séparer les différents types de code en cours d'exécution et des jeux
d'autorisations et des autorisations d'identité pour contrôler l'environnement.
La sécurité du code est une priorité pour les développeurs d'applications. La perte
pécuniaire causée par les virus, chevaux de Troie, attaques de scripts entre sites et autres
logiciels malveillants distribués sur Internet augmente chaque année. Aujourd'hui, la
création d'un environnement sûr et sécurisé pour les applications à exécuter est d'une
importance vitale pour la plupart des individus et des organisations.
PRÊT POUR LA CERTIFICATION La bonne nouvelle est que le .NET Framework 4.0 prend en charge la création et l'exécution
Comment les jeux des applications Windows Store, entre autres technologies. Le .NET Framework est un
d'informations composant de Windows qui s'exécute en arrière-plan, fournissant l'environnement d'exécution
d'identification et
de code pour code scripté ou interprété (comme JavaScript), afin de les aider à s'exécuter avec
d'autorisations protègent-ils
relativement peu de problèmes. Il fournit également un environnement de programmation
orienté objet pour le code objet.
les applications ?
1.1 Le .NET Framework s'appuie maintenant plus fortement sur la « transparence » de sécurité que
dans les versions précédentes. La transparence empêche l'exécution du code d'application dans
le code d'infrastructure. Le .NET Framework utilise des jeux d'autorisations et l'autorisation
d'identité. Les jeux d'autorisations sont des groupes d'autorisations. Le code transparent
exécute les commandes qui ne dépassent pas les limites d'un jeu d'autorisations et le code
transparent est encore plus limité quand il s'agit de code critique.
Le .NET Framework définit plusieurs niveaux de jeux d'autorisations, qui vont de Aucun
(aucune autorisation n'existe et le code ne peut pas s'exécuter) à Confiance totale (le code
peut accéder pleinement à toutes les ressources).
Les autorisations d'identité protègent les assemblies (bibliothèques de code compilé)
sur la base de la preuve, c'est-à-dire des informations sur l'assembly. Chaque autorisation
d'identité représente un type particulier de preuve ou d'informations d'identification qu'un
assembly doit avoir pour s'exécuter.
■ Présentation et gestion des états de l'application

Un état de session est créé la première fois qu'un utilisateur demande l'accès à une
application et il se termine lors de la fermeture de la session, par exemple quand
un utilisateur se déconnecte. Un état de l'application existe à partir du moment où
L'ESSENTIEL
un navigateur demande une page Web jusqu'à ce que le navigateur se ferme. Les
informations d'état persistantes sont des données qui existent après la fin d'une session.
En HTML5, les développeurs peuvent utiliser les méthodes JavaScript localStorage et
sessionStorage pour traiter efficacement les données d'état.
En outre, AppCache permet à un utilisateur de charger des données qui sont généralement
PRÊT POUR LA CERTIFICATION stockées sur un serveur même lorsque l'utilisateur est hors connexion.  La gestion de l'état
Quelle est la différence est le processus de maintenance des informations de la page Web au cours de plusieurs
entre l'état de session et demandes de la même page Web ou d'une page différente. Lorsque l'utilisateur demande
l'état de l'application ? pour la première fois l'accès à une application, l'état de session est créé. L'état se termine
1.2 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
PRÊT POUR LA CERTIFICATION Web, et se termine lorsque l'utilisateur referme le navigateur.
Quelle est l'importance Les informations d'état persistantes sont les données dont une application a besoin après
des informations d'état la fin de la session. De nombreuses applications Web doivent stocker des données (et les
persistantes ? rendre persistantes) afin que les utilisateurs puissent reprendre à l'endroit où ils se sont
1.2 arrêtés lorsqu'ils retournent sur le site.
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
Comment HTML5 gère-t-il visité et sont enregistrés sur l'ordinateur de l'utilisateur. Lorsqu'un utilisateur revient sur un
les données d'état ? site visité, le navigateur renvoie les cookies au serveur Web. Les cookies aident un serveur
1.2 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
PRÊT POUR LA CERTIFICATION données d'une session à l'autre (données persistantes) et leur existence n'est pas limitée
Laquelle des deux dans le temps. La méthode sessionStorage permet de conserver les données uniquement
méthodes, HTML5/ pendant une session (jusqu'à ce que la fenêtre du navigateur soit fermée). On parle
JavaScript, permet à une également de « stockage par onglet ».
application de stocker les
Ces méthodes permettent de transférer des données spécifiques uniquement sur demande.
données persistantes ? Il est donc possible de stocker une quantité relativement importante de données sans
1.2 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
X REF
charge et fonctionne correctement. Un fichier manifeste de cache ressemble à ce qui suit :
Vous en apprendrez index.html
plus sur l'utilisation
stylesheet.css
de AppCache avec
images/dot.png
JavaScript dans la
leçon 8. scripts/main.js
12 | Leçon 1
Pour plus d'informations sur la gestion d'état et le stockage local et de session, consultez la page Web
« Stockage et récupération efficaces des états (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/
library/windows/apps/Hh781225.asp.
■ Présentation des interfaces tactiles et des mouvements

Sur un périphérique à écran tactile, un balayage du doigt s'appelle un mouvement et la
réponse de l'application à ce mouvement s'appelle un événement. Le développement
d'applications à interactions tactiles nécessite une connaissance approfondie de
L'ESSENTIEL l'interaction des doigts avec l'écran et de la prise en compte des différentes tailles des
doigts. Vous pouvez utiliser JavaScript pour créer des applications à interactions tactiles,
principalement en ayant recours aux événements touchstart, touchend et touchmove.
PRÊT POUR LA CERTIFICATION Les appareils mobiles d'aujourd'hui et un grand nombre d'écrans PC intègrent la technologie
Qu'est-ce qu'un d'écran tactile, qui permet à de nombreux utilisateurs d'interagir plus facilement avec les
mouvement et quelle est périphériques et leurs programmes. Un simple toucher du doigt sélectionne un objet ou
son importance avec les appuie sur un bouton, un balayage du doigt fait défiler une liste de photos sur l'écran, et un
appareils tactiles ? pincement effectue un zoom arrière sur une image.
1.3 Un balayage du doigt s'appelle un mouvement, ce qui peut impliquer un seul doigt (un
toucher, comme un appui, un appui prolongé, glisser pour effectuer un mouvement
panoramique, etc.) ou un doigt et le pouce (deux touchers, par exemple pincer et étirer
ou tourner pour appliquer un mouvement en arc de cercle). L'action de l'application en
réponse à un mouvement s'appelle un événement tactile. Vous pouvez utiliser JavaScript
pour créer des événements tactiles dans les applications tactiles. En JavaScript, les trois
événements tactiles principaux sont touchend, touchstart et touchmove.
Lorsque vous créez des applications pour un environnement à interactions tactiles, la
X REF
réactivité aux mouvements est un élément clé. La lenteur des réactions peut frustrer la
Vous apprendrez plupart des utilisateurs. Intégrez des effets physiques, comme l'accélération et l'inertie afin
à créer du code d'améliorer la fluidité de l'interaction entre l'utilisateur et l'écran.
JavaScript pour les Un retour visuel pour des interactions performantes et d'autres notifications sont très
interfaces tactiles dans importants. Cela permet à l'utilisateur de savoir s'il utilise correctement le mode paysage
la leçon 9. tactile. Les points d'ancrage permettent aux utilisateurs de s'arrêter à un emplacement
prévu de l'interface, même si un mouvement se situe légèrement en dehors de la cible.
N'oubliez pas également que les utilisateurs ont des doigts de tailles différentes, et il est
recommandé de créer des applications pour des doigts plus larges, plutôt que plus fins. Et
bien sûr, comme les utilisateurs sont droitiers ou gauchers, une application bien conçue
utilise une navigation verticalement symétrique et offre une rotation de l'écran à 90 degrés
pour passer du mode portrait au mode paysage, ou vice-versa.
Une interaction tactile multipoint se produit lorsqu'un utilisateur appuie sur plusieurs
Quelles meilleures
boutons ou endroits à la fois. Cela se produit fréquemment avec les jeux sur un appareil
pratiques en matière
à écran tactile, où l'utilisateur utilise souvent plusieurs doigts et les pouces simultanément
ou en succession très rapide. Dans cette situation, les balayages et mouvements ne
d'applications tactiles
fonctionnent pas bien, ce qui entraîne un zoom et un défilement involontaires à la place.
devriez-vous tester ?
La solution consiste à désactiver le zoom et le défilement en JavaScript.
1.3
Un autre élément à tester dans une application multipoint est la réaction aux événements
tactiles. Beaucoup d'événements se produiront en même temps, ce qui exige un bon suivi
des doigts et un rendu en boucle pour obtenir des performances optimales.
Lorsque vous déployez une application à interactions tactiles, assurez-vous de tester les
points suivants :
• Réactivité et fluidité générales
• Appuis, pincements, rotations et autres mouvements courants
• Défilement contrôlé
• Panoramique contrôlé
• Possibilité de désactiver le défilement et le mouvement panoramique

• Précision des points d'ancrage
• Zoom ou défilement inattendu, notamment dans un environnement tactile multipoint
• Réaction appropriée à un événement tactile, notamment dans un environnement tactile
multipoint
Concevoir et développer des applications tactiles bien formées nécessite de la pratique
et de nombreux tests. Si vous ne disposez pas d'un appareil à écran tactile, vous pouvez
utiliser les événements MouseTouch et un émulateur ou simulateur d'écran tactile. Essayez
le Kit de développement logiciel (SDK) Microsoft Surface et Runtime pour Windows 7 ou
l'outil simulateur Windows dans Visual Studio 11. Un simulateur ou émulateur d'écran
tactile imite un système qui possède uniquement des fonctionnalités tactiles. Plusieurs
émulateurs gratuits sont disponibles en ligne.
EN SAVOIR PLUS SUR LES MOUVEMENTS ET LES APPLICATIONS TACTILES

PRÉPAREZ-VOUS. Pour en savoir plus sur les différents types de mouvements, procédez
comme suit :
1. Accédez à la page Web Interactions tactiles pour Windows à l'adresse http://msdn.micro-
soft.com/fr-fr/library/windows/apps/hh465415.
2. Lisez le contenu de la page Web.
3. Créez un signet de la page pour un usage ultérieur ou localisez et cliquez sur le lien qui
permet de télécharger une version PDF de la page Web sur votre ordinateur.
4. Fermez la fenêtre du navigateur.
Les spécifications tactiles du WC3 sont disponibles à l'adresse http://bit.ly/gBZUjo. Pour plus d'informations
sur les interactions tactiles et les mouvements, visitez la page Web « Réponse à l’interaction utilisateur
(HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh700412.aspx.
Utilisation des compétences et du contenu HTML5 existants pour les

applications de tablettes tactiles/tablettes
Un avantage pour les développeurs chevronnés qui veulent créer des applications
Windows Store est que leurs connaissances de HTML5 et le code existant se prêtent
bien au développement d'applications Windows Store.
Le développement d'applications tactiles Windows Store est très flexible, car il ne

nécessite pas une grande courbe d'apprentissage pour les développeurs qui utilisent déjà
Est-ce qu'un développeur
HTML5 et d'autres méthodes de développement d'applications. Ils peuvent appliquer
Web doit acquérir de leurs compétences et le code existant à la création d'applications Windows Store presque
nouvelles compétences immédiatement. L'expérience d'un développeur Web avec HTML, CSS, JavaScript et
pour pouvoir créer des les bibliothèques JavaScript est un avantage lors de la transition vers le développement
applications Windows d'applications tactiles Windows Store.
Store pour appareils
tactiles ? En outre, les développeurs Microsoft.NET Framework et Silverlight peuvent appliquer
1.1 leur expérience de XAML, C# et Visual Basic aux projets interface utilisateur Windows.
Les programmeurs de jeux qui connaissent bien Microsoft DirectX 11 peuvent également
appliquer leurs compétences à la création d'applications Windows Store.
■ Débogage et test des applications HTML5

Toutes les applications doivent être soigneusement testées et déboguées pour s'assurer
L'ESSENTIEL qu'elles s'exécutent de façon fiable et avec le moins d'erreurs possible avant leur
distribution et leur déploiement.
Le débogage d'une application implique la détection, la recherche et la correction des

erreurs logiques ou syntaxiques. Une erreur de syntaxe est une faute de frappe dans le
code ou une erreur similaire qui se matérialise au moment de l'exécution d'applications
interprétées. Une erreur logique modifie le comportement attendu de l'application.
14 | Leçon 1

Les tests et le débogage de code sont un composant standard du développement d'applications
Que peut faire un
et la plupart des outils tels que Visual Studio sont dotés de fonctionnalités intégrées de débogage
développeur pour
dans le logiciel. Certaines erreurs sont faciles à détecter et à corriger, tandis que la résolution de
s'assurer qu'une nouvelle
certaines autres peut prendre des heures voire des jours, selon la complexité de l'application.
application est fiable et Quoi qu'il en soit, la phase de test et de débogage est très importante pour plusieurs raisons :
aussi exempte d'erreur • Votre but est de fournir une application fiable, sûre et utile aux clients. Le débogage
que possible ? et les tests garantissent que ces trois objectifs sont atteints.
1.3
• Des applications de haute qualité obtiennent des notes élevées, qui peuvent stimuler
vos profits et les ventes des applications futures.
• Si vous prévoyez de publier votre application via le Windows Store ou un marché
d'applications en ligne de bonne réputation, le magasin exigera la validation ou la
certification que votre application a été testée.
Validation du code HTML5
Une des premières étapes dans la phase de débogage et de test consiste à valider le
code HTML5. La validation implique de vérifier la validité du code. Un validateur
recherche les éléments susceptibles d'entraîner une interprétation erronée du code,
comme des balises manquantes ou non fermées, une déclaration DOCTYPE
incorrecte, une barre oblique de fin, du code obsolète, etc. (Ne vous préoccupez pas
de ces détails pour l'instant. Vous les découvrirez dans la leçon 2.)
Le W3C fournit un service de validation du code pour toutes les versions actives de
HTML sur sa page Web Service de validation du balisage à l'adresse http://validator.
w3.org/. Tout le monde peut utiliser ce service gratuitement. Il vous suffit de cliquer sur
un lien pour télécharger votre fichier sur le service, ou de copier et coller le contenu de
votre fichier dans une zone de texte sur le site Web. Après cela, cliquez sur le bouton
Check. Le service de validation vérifie le code et signale les erreurs ou problèmes que
vous devez corriger.
Un validateur n'est pas identique à un émulateur ou un simulateur. En fait, un validateur
teste le code et signale les inexactitudes, ce qui vous donne l'occasion d'apporter des
modifications. Les émulateurs et simulateurs fournissent simplement un environnement
dans lequel exécuter le code.
Le W3C fournit également un outil de vérification des liens à l'adresse http://validator.

w3.org/checklink. Ce service vérifie que tous les liens de votre fichier HTML sont valides.
REMARQUE
* Le service de validation du CSS disponible à l'adresse http://jigsaw.w3.org/css-validator/
vérifie vos fichiers CSS.
Validation d'un package
Microsoft fournit un outil gratuit appelé Kit de certification des applications Windows pour
tester les applications locales. Ce kit est un type de validateur qui teste votre application sur
votre ordinateur avant de l'empaqueter et de la publier dans le Windows Store.
Le Kit de certification des applications Windows est inclus dans le Kit de développement
logiciel (SDK) Windows pour les applications Windows Store, disponible sur le site Web
de Microsoft. Pour utiliser le kit, vous devez d'abord empaqueter et installer l'application
localement à l'aide d'un outil de développement d'applications. Ensuite, ouvrez le
kit, sélectionnez l'application que vous souhaitez valider et exécutez le validateur. Le
rapport qui s'affiche indique tout problème de l'application. Le Kit de certification des
applications Windows peut être aussi disponible en tant qu'option de menu dans votre
outil de développement d'applications.
Corrigez les problèmes dans un outil de développement d'applications et testez à nouveau
l'application. Répétez ce processus jusqu'à la validation de votre application.
UTILISATION DU SERVICE DE VALIDATION DU BALISAGE DU W3C

PRÉPAREZ-VOUS. Pour vous familiariser avec le service de validation du balisage du
W3C, procédez comme suit :
1. Accédez à la page Web du service de validation du balisage du W3C à l'adresse
http://validator.w3.org/.
2. Cliquez sur l'onglet Validate by File Upload.
3. Cliquez sur Parcourir.
4. Accédez à un fichier HTML dans un de vos exemples d'applications et sélectionnez-le.
Cliquez sur Ouvrir, puis sur Check.
5. Faites défiler la page vers le bas et consultez les erreurs et les avertissements, le cas
échéant. La figure 1-7 montre un exemple.
Figure 1-7
Erreurs et avertissements
découlant d'une tentative de
validation d'une page Web
HTML
6. Si le validateur fournit des liens vers plus d'informations sur les erreurs ou les aver-
tissements, cliquez sur au moins deux d'entre eux et lisez les informations.
7. Lorsque vous avez terminé, laissez le navigateur Web ouvert.
UTILISATION DU SERVICE DE VALIDATION DU CSS DU W3C

PRÉPAREZ-VOUS. Pour vous familiariser avec le service de validation du CSS du W3C,
1. Accédez à la page Web Service de validation du CSS du W3C à l'adresse http://jigsaw.
w3.org/css-validator/ (voir figure 1-8).
2. Cliquez sur l'onglet par chargement de Fichier.
3. Cliquez sur Parcourir.
4. Accédez à un fichier CSS dans un de vos exemples d'applications et sélectionnez-le.
Cliquez sur Ouvrir, puis sur Vérifier.
16 | Leçon 1
Figure 1-8
La page Web Service de
validation du CSS du W3C
5. Faites défiler la page vers le bas et consultez les erreurs et les avertissements, le cas
échéant.
6. Si le validateur fournit des liens vers plus d'informations sur les erreurs ou les
avertissements, cliquez sur au moins deux d'entre eux et lisez les informations.
7. Lorsque vous avez terminé, laissez le navigateur Web ouvert.
■ Publication d'une application dans un magasin en ligne

Une fois que votre application a été testée, déboguée et le code validé ou certifié,
L'ESSENTIEL
vous devez effectuer quelques étapes de plus pour préparer son chargement sur une
place de marché telle que le Windows Store. Vous pouvez utiliser Visual Studio 12 ou
Visual Studio 12 Express pour réaliser le projet.
La publication d'une application sur une place de marché publique comme le Windows
Store marque l'apogée de la planification, de la conception, du codage et des tests. Le
Windows Store est une place de marché globale en ligne pour les applications Windows
Store. La distribution de votre application via le magasin en ligne peut transformer une
bonne idée en une opération lucrative.
Un autre bonus lié à la vente via le Windows Store est que vous avez accès à plusieurs outils
pratiques, tels que Microsoft Visual Studio Express et Microsoft Expression Blend. Vous
pouvez également télécharger les données de télémétrie d'applications personnalisées, qui
peuvent grandement accélérer la création et le déploiement d'applications.
Avant de publier votre application dans le Windows Store, vous devez procéder comme suit :
• Inscrivez-vous et payez pour un compte de développeur Windows Store et réservez un
PRÊT POUR LA CERTIFICATION nom pour votre application. Vous devrez également modifier le fichier manifeste de
Comment publier une votre application.
application dans le
• Passez en revue la liste de vérification relative à la soumission d’une application à
Windows Store ?
l'adresse http://bit.ly/HAPmbk. La liste de comprend une série de tâches, notamment
1.4 l'attribution d'un nom à votre application, le choix de détails commerciaux, comme
la sélection d'un prix approprié et d'une date de publication, l'attribution d'une
classification par âge, la description de l'application, etc.
• Utilisez le Kit de certification des applications Windows pour tester votre application,
si vous ne l'avez pas déjà fait.
• Effectuez quelques captures d'écran des fonctions principales ou uniques de
l'application pour la présenter dans le magasin en ligne. Vous pouvez utiliser l'outil
Capture d'écran, qui est intégré à Windows 7 et Windows 8, pour réaliser des captures
d'écran, ou employer un autre outil de votre choix.
• Demandez à d'autres testeurs ou développeurs de tester l'application sur autant de
plateformes et périphériques différents que possible, notamment si vous avez testé
l'application uniquement dans un simulateur ou un émulateur.
• Incluez une déclaration de confidentialité si votre application collecte des informations
REMARQUE
* à caractère personnel ou est exécutée via un logiciel protégé par copyright.
Vous devez vous Lorsque vous êtes prêt, utilisez votre outil de développement d'applications (tels que
inscrire et payer Visual Studio 12 ou Visual Studio 12 Express pour Windows 8) pour créer un package
pour un compte de d'application finale, puis téléchargez-le sur le Windows Store.
développeur Windows Il est de coutume d'attendre l'approbation du magasin. Si elle est approuvée, votre application est
Store pour ajouter votre certifiée et répertoriée. Cependant, même après tout votre travail préparatoire, votre application
application dans le peut être rejetée, ce qui signifie que vous devez corriger tout problème signalé par le personnel
menu du magasin. de magasin d'applications si vous voulez tester de nouveau l'application et la republier.
SE FAMILIARISER AVEC LA PLACE DE MARCHÉ WINDOWS STORE

PRÉPAREZ-VOUS. Pour en savoir plus sur les conditions requises par le Windows Store,
1. Ouvrez Internet Explorer, puis utilisez l'adresse www.bing.com.
2. Faites une recherche sur « Place de marché Windows Store » et accédez au site.
3. Parcourez les catégories d'applications. Prenez note des trois applications les mieux
notées et de trois applications qui vous intéressent.
4. Lisez la description de chaque application et prenez des notes qui pourraient vous
aider à écrire une description attrayante pour votre application.
5. Notez le nombre et la qualité des captures d'écran fournies pour ces applications.
6. Notez la qualité de l'icône de lancement et tout autre détail graphique.
7. Notez la cote de prix et la classification par âge de chaque application.
8. Notez tous les autres détails qui pourraient vous aider à vendre votre application
quand elle sera prête.
9. Lorsque vous avez terminé, fermez toutes les fenêtres ouvertes.

• 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.
• 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.
• Les principales étapes de la création d'une application sont les suivantes : planifier le projet,
créer une interface utilisateur, mettre à jour le manifeste d'application, écrire le code, développer
l'application, déboguer et tester l'application, créer le package de l'application et la déployer.
• L'environnement d'exécution de Windows (WinRT) sert de base au système d'exploitation
Windows 8 et fournit des fonctionnalités pour les applications Windows Store.
• Les applications Windows Store créées avec JavaScript et ouvertes dans Internet Explorer sont
exécutées par le processus WWAHost.exe. Il s'agit d'un processus différent du processus hôte qui
s'exécute habituellement sur Internet Explorer.
• L'objectif d'un package d'application est de faciliter la distribution et le déploiement. L'empaquetage
d'application consiste à regrouper les fichiers et dossiers d'une application dans un package.
18 | Leçon 1
• Le .NET Framework fournit un environnement sûr dans lequel les applications HTML5/
JavaScript peuvent s'exécuter. L'infrastructure utilise la transparence de la sécurité pour
séparer les différents types de code en cours d'exécution et des jeux d'autorisations et des
autorisations d'identité pour contrôler l'environnement.
• Un état de session est créé la première fois qu'un utilisateur demande à accéder à une
application, et il se termine lors de la fermeture de la session.
• Un état de l'application existe à partir du moment où un navigateur demande une page Web
jusqu'à ce que le navigateur se ferme.
• Les informations d'état persistantes sont des données qui existent après la fin d'une session.
• En HTML5, les développeurs peuvent utiliser les méthodes JavaScript localStorage et
sessionStorage pour traiter efficacement les données d'état.
• AppCache est un type de stockage Web qui permet à l'utilisateur de charger des données qui sont
normalement stockées sur un serveur, même lorsque l'utilisateur est en mode hors connexion.
• Sur un périphérique à écran tactile, un balayage du doigt s'appelle un mouvement et la
réponse de l'application à ce mouvement s'appelle un événement.
• Le développement d'applications à interactions tactiles nécessite une connaissance approfondie
de l'interaction des doigts avec l'écran et de la prise en compte des différentes tailles des doigts.
• Vous pouvez utiliser JavaScript pour créer des applications à interactions tactiles,
principalement en ayant recours aux événements touchstart, touchend et touchmove.
• Un avantage pour les développeurs chevronnés qui veulent créer des applications
Windows Store est que leurs connaissances de HTML5 et le code existant se prêtent bien
au développement d'applications Windows Store.
• Toutes les applications doivent être soigneusement testées et déboguées pour s'assurer
qu'elles s'exécutent de façon fiable et avec le moins d'erreurs possible avant leur distribution
et leur déploiement.
• Une fois que votre application a été testée, déboguée et le code validé ou certifié, vous devez
effectuer quelques étapes de plus pour préparer son chargement sur une place de marché
telle que le Windows Store. Vous pouvez utiliser Visual Studio 11 ou Visual Studio 11 Express
pour réaliser le projet.

1. HTML est un langage de __________, pas un langage de programmation, ce qui sig-
nifie que HTML utilise des balises telles que <body> and <h1> pour décrire les parties
d'une page Web.
2. Les ___ 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 d'autres attributs.
3. Windows 8 utilise l'interface utilisateur de __________.
4. __________ est la base du système d'exploitation Windows 8 et se compose
de couches qui fournissent les fonctionnalités aux applications Windows Store
et à Windows Shell.
5. La _____________ désigne le processus d'assemblage d'une application et de ses différents
fichiers dans un conteneur d'application, ce qui en facilite sa distribution et son déploiement.
Le package d'application est le résultat de ce processus.
6. L'état ____________ 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.
7. La méthode ___________ 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 ».
8. Un balayage du doigt s'appelle un ________, ce qui peut impliquer un seul doigt
(un toucher) ou un doigt et le pouce (deux touchers).
9. Un ________ recherche les éléments susceptibles d'entraîner une interprétation

erronée du code, comme des balises manquantes ou non fermées, une déclaration
DOCTYPE incorrecte, une barre oblique de fin, du code obsolète, etc.
10. Le ___ est un marché mondial en ligne pour les applications Windows Store.
Questions à choix multiples

Entourez la lettre correspondant à la meilleure réponse.
1. Quels sont les trois composants principaux de la famille HTML5 ?
a. XML
b. HTML
c. CSS
d. JavaScript
2. JavaScript est un type de :
a. Compilateur de programme
b. Langage de balisage
c. Langage de script
d. Validateur
3. Toutes les affirmations suivantes sur HTML5 sont vraies, sauf :
a. Il nécessite Windows 8.
b. Il peut être utilisé pour créer des applications Web et des applications de bureau
ou de périphériques.
c. Il est indépendant de la plateforme.
d. Il est conçu à partir d'une norme ouverte.
4. Quel environnement de système d'exploitation permet à un développeur d'accéder
à un appareil-photo ou une webcam ?
a. localStorage
b. WinRT
c. L'état de la session
d. Microsoft design
5. Vous développez une application Windows Store et vous souhaitez qu'elle accède
à une autre application. Où déclarez-vous l'interaction ?
a. Manifeste de l'application
b. CSS
c. Au début du fichier HTML
d. Nulle part. Il n'est pas utile de déclarer l'interaction.
6. Parmi les composants suivants, lequel permet de créer un package d'application ?
a. JavaScript
b. CSS
c. DOM
d. Un outil de développement d'applications
7. Quelle API permet aux programmes et aux scripts de mettre à jour dynamiquement
le contenu, la structure et les styles ?
a. JavaScript
b. WinRT
c. DOM
d. RTE
8. AppCache, localStorage et sessionStorage désignent :
a. Stockage Web
b. Commandes HTML
c. Normes
d. Espaces de noms
20 | Leçon 1
9. Parmi les fonctions suivantes, lesquelles ne fonctionnent généralement pas

bien avec les environnements tactiles multipoint et doivent être désactivées ?
(Choisissez 2 réponses).
a. Suivi
b. Zoom
c. Défilement
d. Mouvement
10. Quel outil est un type de validateur qui teste votre application sur votre ordinateur
avant de l'empaqueter et de la publier dans le Windows Store ?
a. WinRT
b. Windows 8
c. Service de validation du balisage du W3C (World Wide Web Consortium)
d. Kit de certification des applications Windows
Vrai/Faux
Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1.
Une interface de programmation d’application (API) est une liste d'instructions
qui permet à un programme de communiquer avec un autre programme.
V F 2.
Il est recommandé de publier votre application sans la valider pour la tester
directement en production.
V F 3.
Un émulateur passe en revue les documents HTML et CSS à la recherche
d'erreurs.
V F 4.
Il est conseillé de créer des applications tactiles pour des doigts plus larges,
plutôt que fins.
V F 5.
Une application indépendante de la plateforme peut s'exécuter sur différents
systèmes d'exploitation de périphériques mobiles et de bureau.

Scénario 1-1 : Présentation des nouvelles fonctionnalités dans la famille HTML5
Votre responsable Marylyne souhaite en savoir plus sur la famille HTML5 pour décider
si la société doit commencer à l'utiliser pour de nouveaux projets. Elle vous demande de
lui dresser une liste de cinq ou six nouvelles fonctionnalités. Quelles fonctions choisissez-
vous d'inclure dans la liste ?
Scénario 1-2 : Création d'une application
Marylyne s'adresse de nouveau à vous, et cette fois elle veut savoir ce qu'implique
la création d'une application HTML5. Elle vous demande de lui soumettre un plan.
Quelles étapes choisissez-vous d'inclure dans le plan ?
■ Évaluation de la maîtrise des concepts

Scénario 1-3 : Partage de conseils sur le développement d'applications
à interactions tactiles
Antoine travaille sur une application à interactions tactiles et vous demande des conseils
de développement. Il souhaite connaître les composants à tester impérativement sur sa
tablette. Que pouvez-vous lui dire ?
Scénario 1-4 : Publication d'une application dans le Windows Store
Sammy vient de créer sa première application et souhaite la publier dans le Windows
Store. Quelles sont les trois étapes préliminaires qu'il doit suivre ?
Création de l'interface LEÇON 2
utilisateur avec HTML5 :
Texte, graphiques et
multimédia
M AT R I C E D ' O B J E C T I F S D ' E X A M E N

de l'examen MTA
Comprendre les principes
fondamentaux du langage HTML
Sélection et configuration de Choisir et configurer les balises 2.1
balises HTML5 pour HTML5 pour l'affichage du texte
l'affichage du texte
balises HTML5 pour l'affichage HTML5 pour afficher
des graphiques les graphiques
balises HTML5 pour la lecture HTML5 pour lire les
de contenu multimédia fichiers multimédias
TERMES CLÉS
attribut élément figure
attribut global élément vidéo
balise vide entité
balises image raster
codec image vectorielle
compression imbrication
doctype obsolescence
élément rendu
élément audio Scalable Vector Graphics (SVG)
élément canvas valide
élément figcaption video compression
21
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.
■ 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
L'ESSENTIEL 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.
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.
Balisage et structure de page de base
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é.
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.
Création de l'interface utilisateur avec HTML5 : Texte, graphiques et multimédia | 23
Tableau 2-1
Balises HTML courantes Balise Description
<html> Identifie la page en tant que document HTML. La balise <html>
englobe tout ce qui se trouve sur la page, à l'exception de la
déclaration doctype au sommet de la page.
<head> Contient le balisage et le code utilisé par le navigateur, par
exemple les scripts ajoutant de l'interactivité et les mots clés
permettant aux moteurs de recherche de localiser la page.
Le contenu de la balise <head> peut également inclure les styles
de mise en forme pour la page.
<title> Affiche le titre de la page Web qui apparaît en haut du navigateur
Web, généralement sur l'onglet de la page dans un navigateur
à onglets.
<body> Entoure le contenu visible sur la page Web affichée dans un
navigateur Web.
<a href=URL> Balise généralement utilisée pour ancrer une URL à du texte ou
une image ; elle peut également créer un ancrage nommé dans
un document pour permettre la liaison aux sections du document.
<b> Applique des caractères gras au texte.
Crée un en-tête pouvant aller du premier niveau (h1) au sixième
<hx>
niveau (h6).
Insère une image depuis un fichier ou un autre site Web.
<img>
Définit le texte en tant que paragraphe.
<p>
Une paire de balises ou une balise vide est également appelée élément. Un élément peut
décrire le contenu, insérer des graphiques et créer des liens hypertexte.
UTILISATION D'ATTRIBUTS
Toutes les balises n'incluent pas une description des données, ou cette description
n'est pas toujours suffisamment détaillée pour le rendu. Dans ce cas, certains éléments
doivent comporter des attributs qui sont des modificateurs d'éléments HTML permettant
de fournir des informations supplémentaires.
Les attributs sont faciles à utiliser et sont simplement des extensions d'éléments.
Vous ajoutez des attributs aux éléments à l'aide de la syntaxe de base suivante :
<tag attribute="value">
Notez que l'attribut et sa valeur se trouvent tous les deux à l'intérieur d'une balise.
Vous devez inclure un attribut dans une balise afin que le navigateur Web soit en mesure
de le gérer. Voici un exemple d'attribut utilisé lors de la création d'un lien hypertexte :
<a href="http://www.example.com">Ceci est un lien.</a>
Le navigateur Web utilise la combinaison de l'élément d'ancrage et de l'attribut href pour

afficher un lien hypertexte. La figure 2-1 illustre comment un navigateur Web interprète
ce balisage.
Un bon éditeur de page Web ou outil de développement d'applications doit vous

indiquer les attributs pouvant être utilisés avec un élément, ce qui vous permet de
REMARQUE
* gagner du temps. Il doit également faciliter le débogage du balisage en cas d'utilisation
incorrecte d'un attribut.
24 | Leçon 2
Figure 2-1
Un lien hypertexte est
obtenu lorsque l'élément
d'ancrage est doté de
l'attribut href
La création de liens hypertexte et l'insertion de graphiques simples sont les deux cas
d'utilisation d'attributs les plus courants. Vous apprendrez comment manipuler les
graphiques plus loin dans cette leçon. HTML5 inclut plusieurs attributs globaux qui
peuvent être utilisés avec n'importe quel élément HTML5. Parmi les attributs globaux
disponibles figurent par exemple id, lang et class.
ÉLÉMENTS IMBRIQUÉS
L'affichage de votre code HTML dans un navigateur Web varie en fonction de la façon
dont vous combinez les éléments, leurs attributs (le cas échéant) et le contenu de la page.
Lorsque deux ou plusieurs éléments s'appliquent au même bloc de texte, vous devez
imbriquer correctement les paires de balises afin qu'elles fonctionnent comme escompté.
L'imbrication est l'insertion d'un élément dans un autre. Voici un exemple d'imbrication
qui fonctionne correctement :
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</b></i> par
temps chaud.</p>
Dans cet exemple, nous voulons que les mots « eau fraîche » soient mis en évidence dans le
texte. Pour ce faire, ils sont mis en italique et en gras à l'aide des balises <i> et <b>. Si vous
placez la balise de fin </b> après la balise de fin </p> (comme illustré ci-dessous), les mots
« eau fraîche par temps chaud » s'affichent en gras, mais seuls les mots « eau fraîche » sont
en italique. Cet affichage semble incorrect, comme le montre la figure 2-2.
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</i> par temps
chaud.</p></b>
Figure 2-2
Balises incorrectement
imbriquées
La règle applicable à l'imbrication requiert que les balises imbriquées soient fermées avant
leurs balises parentes. En reprenant l'exemple correct, vous remarquez que l'élément
paragraphe s'ouvre en premier, suivi par l'élément italique, puis l'élément police. Ensuite,
l'élément gras (bold) se ferme, suivi par l'élément italique et enfin l'élément paragraphe.
Les éléments italique et gras sont entièrement imbriqués dans l'élément paragraphe.
COMPRENDRE LES ENTITÉS

Une entité est un caractère spécial, comme le symbole dollar, le symbole de marque déposée
(R majuscule dans un cercle) et les caractères accentués. Le processus d'incorporation d'entités
dans une page Web est appelé encodage de caractères. Les éditeurs et les navigateurs Web actuels
gèrent plutôt bien les caractères spéciaux de votre clavier, tels que ceux qui se trouvent au-dessus
des touches numériques. Dans la majorité des cas, ces caractères sont correctement rendus.
Toutefois, dans certains navigateurs, le caractère attendu ne s'affiche pas et est remplacé par
un caractère ou un symbole incompréhensible. Ces anomalies sont faciles à résoudre. Chaque
caractère spécial pouvant être reproduit dans une page Web est doté d'un nom d'entité et d'un code
numérique. Vous pouvez utiliser l'un ou l'autre de ces éléments dans une page Web. Toutefois, il est
généralement plus sûr de représenter les symboles tels que la marque commerciale à l'aide de l'entité
numérique correspondante pour garantir un rendu adéquat dans un grand nombre de navigateurs.
Une entité commence par une esperluette (&) et se termine par un point-virgule (;). Par
exemple, l'entité ® représente le symbole de marque déposée et son code numérique est
®. Lorsqu'un navigateur rencontre une esperluette, il essaie de faire correspondre les
caractères qui suivent à une entité. S'il trouve une correspondance, il affiche le caractère spécial
à la place de l'entité. Le Tableau 2-2 répertorie quelques-unes des entités les plus utilisées.
Tableau 2-2
Exemples d'entités HTML5 Symbole Description Nom de l'entité Code
© Copyright © ©
° Degré ° °
$ Dollar &dollar; $
% Pourcentage &percnt; %
® Marque déposée ® ®
Il est également important de savoir que, dans l'encodage de caractères HTML5, il est
recommandé d'utiliser l'encodage UTF-8 chaque fois que cela est possible, car la plupart
des navigateurs utilisent ce type d'encodage. Cela signifie que vous devez ajouter la
déclaration suivante à l'élément head :
<meta charset="UTF-8">
La spécification HTML5 requiert que la totalité de l'élément meta se trouve dans les
premiers 1 024 octets du document ; vous devez donc l'inclure tout en haut de la page,
dans l'élément head.
Pour obtenir la liste des entités prises en charge par HTML5, accédez à http://dev.w3.org/html5/html-
author/charref.
COMPRENDRE LE DOCTYPE
Le doctype est une déclaration placée au tout début de la grande majorité des documents
HTML. Lorsqu'un navigateur Web lit une déclaration doctype, il suppose que tout le
contenu de la page Web utilise le langage ou les règles spécifiés dans la déclaration.
Dans HTML 4, toutes les déclarations <!DOCTYPE> exigent une référence à une définition
du type de document (DTD). La DTD est simplement un ensemble de règles permettant
à un navigateur Web de convertir les balises et le contenu afin d'obtenir les pages que vous
consultez sur le Web. Une page Web HTML 4 peut utiliser différentes DTD. En raison de
la façon dont le langage HTML5 a été conçu, il ne nécessite pas de référence à une DTD.
Dans HTML 4, la déclaration doctype spécifie le langage et la DTD de la page HTML
et semble assez complexe. Voici un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.example.com/TR/xhtml11/DTD/
xhtml11.dtd">
26 | Leçon 2
À l'inverse, le nouveau doctype HTML5 est très simple :

<!doctype html>
Le doctype HTML5 ne respecte pas la casse et le mot clé « doctype » peut donc être
en majuscules ou en minuscules. Ce doctype simplifié est en partie la raison pour laquelle
les pages HTML5 s'affichent facilement dans un navigateur Web, sur un ordinateur ou un
périphérique mobile. HTML5 est conçu pour être compatible avec la grande majorité
des nouveaux et anciens navigateurs Web, ainsi qu'avec l'environnement des
périphériques mobiles.
EXPLORATION DU BALISAGE D'UNE PAGE WEB SIMPLE

À titre d'exemple, le balisage et le contenu d'une page Web HTML5 simple peuvent se
présenter comme suit :
<!doctype html>
<html>
<head>
<title>78704 Tout pour vos animaux de compagnie</title>
</head>
<body>
<p>Votre chien est un ami pour la vie. Pourquoi
ne pas lui offrir les meilleurs soins ?</p>
</body>
</html>
Les lignes vierges entre les différentes parties de la page, par exemple entre la déclaration doctype
et la balise <html>, ne s'affichent pas dans une page Web. Il en est de même pour les retraits,
comme ceux des paragraphes. (Notez que les éléments paragraphe sont légèrement décalés par
rapport aux balises <body>. Les lignes vierges et les retraits aident simplement à rendre le balisage
plus lisible dans un outil d'édition.
La figure 2-3 illustre le rendu de la page Web pour le balisage HTML précédent.
Figure 2-3
Page Web simple rendue par
un navigateur
Comme indiqué dans la leçon 1, vous pouvez utiliser le service de validation du W3C (World
Wide Web Consortium) à l'adresse http://validator.w3.org pour vérifier et valider le code
HTML. Si une page Web respecte les spécifications à la lettre, elle est considérée valide.
CRÉER UNE PAGE WEB SIMPLE

PRÉPAREZ-VOUS. Pour créer une page Web simple et voir les effets de balises,
d'imbrication ou d'entités manquantes, procédez comme suit :
1. Sur votre ordinateur ou un lecteur flash, créez un sous-dossier dans le dossier Mes
documents. Ce dossier contiendra les fichiers sur lesquels vous allez travailler tout au
long des leçons de ce guide. Il s'agit de votre dossier de travail. Vous pouvez le
nommer HTML5 ou lui donner un nom similaire.
2. Ouvrez un éditeur de page Web, un outil de développement d'applications ou même

un simple éditeur de texte tel que le Bloc-notes, puis entrez la commande suivante :
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Soins et alimentation</h1>
<p>Votre chien est un ami pour la vie. Pourquoi ne pas lui offrir les
meilleurs soins possibles ?</p>
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</b></i>
par temps chaud. Lorsque vous faites de longues promenades avec votre chien,
pensez à prendre un bol pliable et une bouteille d'eau.
Vous trouverez différents modèles de bol dans de nombreux magasins animaliers
à moins de 10 dollar.</p>
</body>
</html>
Vous disposez d'un vaste choix en matière d'éditeurs et d'outils de développement.

Le Bloc-notes est l'éditeur de texte intégré à Windows, mais vous pouvez télécharger
gratuitement Notepad++ depuis le Web. Notepad+++ comporte des fonctionnalités
facilitant la création et la modification de documents HTML. TextWrangler, conçu pour
REMARQUE
* les systèmes Macintosh, inclut un ensemble de fonctionnalités similaires. Des éditeurs
HTML gratuits tels que HTML-Kit et KompoZer sont également disponibles. Parmi les
outils de développement figurent notamment Microsoft Visual Studio, Visual Studio for
Web, Microsoft Web Matrix et Microsoft Expression Web. Toutes ces applications vous
permettent de créer et modifier des fichiers HTML.
3. Enregistrez le fichier sous L2-animal-orig.html dans le dossier de travail que vous avez
créé dans Mes documents.
4. Accédez à votre dossier de travail et ouvrez la page HTML dans un navigateur Web.
Elle doit ressembler à la figure 2-4.
Figure 2-4
Page Web « Soins et
alimentation » du site 78704
Tout pour vos animaux de
compagnie
5. Pour voir l'effet d'une balise manquante dans une paire de balises, supprimez la balise
de fin </b> après « fraîche ». Créez un nouveau fichier pour tester les modifications en
l'enregistrant sous le nom L2-animal-test.html, puis ouvrez-le dans le navigateur. Tout
le contenu, depuis les mots « eau fraîche » jusqu'à la fin du document, est désormais
en caractères gras.
Dans Internet Explorer 9, vous pouvez appuyer sur F12 pour ouvrir le mode navigateur.
Ce mode permet de modifier les pages sans quitter le navigateur. Il est également
REMARQUE
* possible de cliquer sur Mode document dans la barre de menus, puis de sélectionner
une ancienne version du navigateur pour vérifier comment la page s'affiche.
28 | Leçon 2
6. Pour voir l'effet d'une imbrication incorrecte, déplacez la balise de fin </i> après la
dernière balise </p>. Réenregistrez le fichier L2-animal-test.html et affichez-le dans un
navigateur. Tout le contenu, depuis les mots « eau fraîche » jusqu'à la fin du document,
est désormais en caractères gras et en italique, comme illustré à la figure 2-5.
Figure 2-5
Effets d'une imbrication
erronée des balises
7. Fermez le fichier L2-animal-test.html dans l'éditeur et ouvrez L2-animal-orig.html.

8. Ajoutez une mention de copyright au bas de la page en appuyant plusieurs fois sur la
touche Entrée après la balise de fermeture </p> et en entrant <p>© 2012</p>.
Remplacez « 2012 » par l'année en cours, le cas échéant. Appuyez sur Entrée pour
ajouter une ligne vierge. Assurez-vous que la mention de copyright se trouve
au-dessus des balises de fin </body> et </html>.
9. Créez un nouveau fichier en enregistrant le fichier L2-animal-test.html sous L2-animal-
copyright.html, puis affichez-le dans le navigateur. Le symbole du copyright (C entouré
d'un cercle) est-il visible, comme illustré à la figure 2-6 ? Si ce n'est pas le cas,
remplacez &copy ; par ©, enregistrez le fichier, puis réaffichez-le.
Figure 2-6
Un symbole de copyright
apparaît dans le coin
inférieur gauche
Lors de l'affichage des pages Web que vous êtes en train de modifier, il est préférable
d'utiliser plusieurs navigateurs Web pour vérifier que votre balisage s'affiche comme
prévu pour le plus grand nombre d'utilisateurs possible. Certains outils d'édition
REMARQUE
* comportent une liste vous permettant de sélectionner un navigateur pour la
prévisualisation des pages Web. Si votre outil n'inclut pas cette option, vous devrez
installer trois ou quatre navigateurs différents et ouvrir vos pages Web dans chacun d'eux.

http://validator.w3.org/. Téléchargez le fichier L2-animal-copyright.html et cliquez
sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par le
vérificateur en cas de balises manquantes ou de fautes de frappe, le cas échéant.
11. Vous avez probablement reçu un message d'erreur se rapportant à l'encodage des
caractères. Pour résoudre ce problème, ouvrez le fichier L2-animal-copyright.html
dans votre outil d'édition, insérez <meta charset="UTF-8"> dans l'élément head, dans
sa propre ligne, juste avant le titre.
<head>
</head>
12. Enregistrez le fichier, téléchargez-le une nouvelle fois dans l'outil de validation afin
de le vérifier. Le vérificateur devrait confirmer que votre fichier est valide.
13. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement
à la section suivante.
Si vous trouvez les rubriques de cette section difficiles à assimiler, il peut être utile de réaliser
quelques didacticiels tels que ceux disponibles sur le site Web W3Schools.com.
■ Sélection et configuration de balises HTML5 pour l'affichage du texte
HTML5 utilise la plupart des éléments et attributs déjà spécifiés dans HTML 4, avec
quelques nouvelles balises. En outre, l'utilisation par défaut d'autres balises a été
L'ESSENTIEL modifiée et certains éléments ne sont plus pris en charge. Parmi les nouveaux éléments
textuels figurent notamment command, mark, time, meter et progress. Les éléments
basefont, center, font et strike sont désormais obsolètes.
Tous les éléments abordés dans la première section de cette leçon fonctionnent
correctement dans HTML5, bien qu'ils soient utilisés depuis déjà plusieurs années dans
les versions antérieures du langage HTML. Dans l'ensemble, HTML5 modifie très peu
la syntaxe HTML. Cela signifie que les développeurs peuvent continuer à utiliser la plupart
des éléments comme ils le faisaient jusqu'ici. Certains éléments conservent la même balise
mais leur fonctionnalité a été légèrement modifiée, comme expliqué un peu plus loin.
HTML5 inclut également un grand nombre de nouveaux éléments qui permettent
X REF d'optimiser les fonctionnalités des pages Web ou de simplifier le balisage. Il s'agit d'éléments
Le balisage de mise liés au contenu multimédia (par exemple, audio et video) et d'autres éléments qui rendent la
en page, de création structure d'une page Web plus intuitive. Les balises liées à la structure incluent des éléments
de sections et de pour les sections de page, les en-têtes, les pieds de page, la navigation et même les barres
formulaires HTML5 est latérales. Lors de la création de formulaires Web, les nouvelles fonctionnalités de formulaire
couvert dans la leçon 3. facilitent considérablement la création et la validation. Toutefois, cette section porte
essentiellement sur le balisage HTML5 associé au texte.
Éléments de texte HTML 4 avec une nouvelle signification ou fonction
Certains éléments textuels HTML 4 ont à présent une signification ou une fonction
légèrement différente dans HTML5. Parmi ces éléments figurent <b>, <i>, <strong>,
<em> et <small>. L'élément <b> doit maintenant être utilisé pour mettre en évidence
le texte, sans indication d'importance, par exemple les mots clés ou les noms de
produits. L'élément <i> définit désormais le contenu dans un ton ou une humeur
différente, comme un texte oral. L'élément <strong> souligne l'importance, tandis que
l'élément <em> indique un accent d'insistance. L'élément <small> doit être utilisé pour
le texte en petits caractères, comme la mention de copyright.
30 | Leçon 2
Examinons de plus près certains des éléments de texte HTML 4 dont la signification ou la
fonction a légèrement changé dans HTML5 :
• <b> : cet élément d'utilisation courante a toujours représenté les caractères gras ; il
était souvent utilisé pour mettre en évidence le texte ou en souligner l'importance.
Le W3C suggère qu'il soit désormais utilisé pour indiquer un texte « stylistiquement
décalé », sans indication d'importance. Utilisez <b> pour les mots clés, les noms de
produits et les éléments interactifs (tels que les éléments sur lesquels vous cliquez ou
appuyez dans une liste de procédures). Par exemple :
<p>Cliquez sur le bouton <b>Vérifier</b>, puis sur
<b>OK.</b> </p>
• <i> : l'élément italique est maintenant utilisé pour du texte dans un « ton ou une
humeur différente ». Il peut s'agir d'un texte oral, de pensées ou d'un contenu
similaire, sans indication d'importance ni d'insistance. Il peut également s'agir de
termes techniques et de mots étrangers traduits. Par exemple :
<p><i>Il a vraiment bon cœur,</i> pensait-elle.
• <strong> : l'élément strong indique un contenu d'extrême importance, plus important
que les mots voisins. Par exemple :
<p>Chantal portait la <strong>même</strong> robe depuis trois jours.</p>
• <em> : l'élément em (emphasis) indique un degré d'insistance. Par exemple :
<p>Vous devez <em>toujours</em> valider votre balisage HTML
avant de le partager avec d'autres utilisateurs.</p>
• <small> : l'élément small doit être utilisé pour les petits caractères ou des remarques.
Il est utile pour les mentions de copyright ou pour ajouter la source d'une image. Par
exemple :
<p><small>Copyright 2012 XYZ
Corporation</small></p>
La fonction recherchée de certains de ces éléments dans HTML5 peut prêter à confusion,
par exemple le cas d'emploi de l'élément italique. La meilleure méthode consiste à garantir
la cohérence sur une page ou un site Web, et à observer comment les autres développeurs
utilisent les mêmes éléments.
MODIFIER LES BALISES DE TEXTE D'UNE PAGE WEB

PRÉPAREZ-VOUS. Pour modifier les balises d'une page Web, procédez comme suit :
1. Dans votre outil d'édition, ouvrez le fichier L2-animal-copyright.html s'il n'est pas déjà
ouvert.
2. Dans le paragraphe suivant, remplacez les balises italique et gras par l'élément strong.
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau
fraîche</b></i> par temps chaud.</p>
Le nouveau balisage produit le résultat suivant :
<p>Assurez-vous que votre animal dispose de suffisamment d'<strong>eau
fraîche</strong> par temps chaud.</p>
Vous remarquez que l'effet de l'élément strong est semblable à celui de l'élément
gras. Le W3C recommande l'utilisation de <strong> à la place de <b>, même si les deux
balises semblent produire des résultats quasiment identiques.
3. Ajoutez des balises de début et de fin <small> à la mention de copyright, de manière
à les imbriquer correctement dans les balises du paragraphe.
4. Enregistrez le fichier sous L2-animal-modification.html, puis affichez-le dans un
navigateur Web. Voir la figure 2-7.
Figure 2-7
Utilisation des balises
<strong> et <small>

Nouveaux éléments de texte dans HTML5
Parmi les nouveaux éléments HTML5 associés au texte figurent <command>, <mark>
et <time>. L'élément <command> crée un bouton de commande. Lorsque l'utilisateur
clique sur un bouton de commande, une commande s'exécute. L'élément <mark> met
en évidence du texte sur une page, à l'instar de la fonctionnalité de mise en
surbrillance de Microsoft Word. L'élément <time> affiche une heure et une date
lisibles par une machine, par exemple 10 : 10 AM., CST, 19 juillet 2012. Il est
particulièrement utile pour les blogs et les calendriers et il peut également aider les
moteurs de recherche à générer de meilleurs résultats lorsque l'heure et la date font
partie des critères de recherche.
Examinons quelques-uns des nouveaux éléments de texte HTML5, en nous aidant de

PRÊT POUR LA
CERTIFICATION quelques exemples :
Quels sont les nouveaux • <command> : l'élément command est utilisé pour définir un bouton de commande sur
éléments textuels HTML lequel les utilisateurs cliquent pour exécuter une commande. Cet élément est doté de
de HTML5 ? nombreux attributs tels que type, label, title, icon, disabled, checked et radiogroup.
2.1 Par exemple :
<menu label="Genre de musique">
<command type="radio" radiogroup="musicgenre" label="Art">
<command type="radio" radiogroup="musicgenre" label="Populaire">
<command type="radio" radiogroup="musicgenre" label="Traditionnel">
</menu>
• <mark> : l'élément mark est très pratique pour mettre en évidence du texte sur une
page. Par exemple, vous pouvez l'utiliser sur une page de résultats de recherche ou
pour mettre en évidence un bloc de texte sur lequel vous souhaitez attirer l'attention
du lecteur. Par exemple :
<p>Depuis que j'ai commencé à faire du jogging l'automne dernier, j'ai <mark
style="background-color:yellow;">perdu 15 kilos</mark>.</p>
• <time> : l'élément time indique du contenu qui est une heure ou une date. Pour le
rendre lisible par une machine, il convient de lui ajouter l'attribut datetime. L'élément
time définit l'heure et la date à l'aide du format 24 heures et du calendrier grégorien,
respectivement. L'utilisation de dates et d'heures lisibles par une machine sur votre
32 | Leçon 2
page Web permet d'optimiser les résultats générés par les moteurs de recherche.
Par exemple :
<time datetime="2013"> correspond à l'année 2013
<time datetime="2013-04"> correspond à avril 2013
<time datetime="04-15"> correspond au 15 avril (de n'importe quelle année)
Parmi les nouveaux éléments, il également possible de citer meter et progress. L'élément
meter indique le contenu sous forme de fraction d'une plage connue, comme l'utilisation
du disque. L'élément progress indique l'état d'avancement d'une tâche par rapport à
l'achèvement de celle-ci.
UTILISER L'ÉLÉMENT MARK

PRÉPAREZ-VOUS. Pour utiliser l'élément mark pour mettre en évidence du texte,
1. Dans votre outil d'édition, ouvrez le fichier L2-animal-modification.html s'il n'est pas
déjà ouvert.
2. Modifiez le paragraphe suivant en insérant l'élément mark autour du texte « ami pour
la vie ».
<p>Votre chien est un <mark style="background-color:orange;">
ami pour la vie</mark>.
3. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-mark.html, puis
affichez-le dans un navigateur Web. La figure 2-8 affiche le texte en surbrillance.
Figure 2-8
L'élément mark met en
surbrillance un texte
spécifique

Éléments de texte inutilisés dans HTML5
Si de nouveaux éléments sont disponibles, le W3C a présélectionné d'autres éléments

en vue d'une suppression éventuelle, car leur fonctionnalité est désormais inutile. Le
motif de suppression d'éléments de la liste d'éléments HTML disponibles est appelée
obsolescence. (La même chose s'applique aux attributs.)
X REF
L'obsolescence peut résulter du remplacement de la fonctionnalité d'un ancien élément
La leçon 4 explore les par un nouvel élément, ou l'utilisation d'une nouvelle méthode de mise en forme en
notions essentielles des remplacement d'un élément plus ancien. La mise en forme à l'aide de feuilles de style en
feuilles de style CSS cascade (CSS) correspond à ce second cas de figure. L'utilisation de CSS pour modifier
et la séparation de la l'apparence du texte, des images et de tout autre contenu Web permet de séparer le style
présentation (style) du du contenu. Depuis déjà un certain temps, le W3C encourage les développeurs à préférer
contenu. CSS à la mise en forme locale pour mieux contrôler la mise en forme des pages Web et il
s'agit clairement de la méthode à utiliser dans HTML5.
Ceci est logique, car il est très facile de modifier les styles de CSS s'appliquant
à l'ensemble d'une page Web ou même à un site Web. Lors de l'insertion de styles
individuels, même dans une seule page Web, les modifications s'avèrent fastidieuses
lorsqu'un changement est nécessaire.
Les éléments HTML suivants sont considérés comme obsolètes et ne sont pas pris
en charge dans les pages HTML5 :
• <acronym> : définit des acronymes qui, dans HTML 4, peuvent être cités comme s'il
s'agissait d'un mot, par exemple GUI pour l'interface utilisateur graphique. Utilisez la
balise <abbr> à la place.
• <applet> : définit une applet incorporée. Utilisez la balise <object> à la place.
• <basefont> : définit une couleur, une taille ou une famille de police par défaut pour
l'ensemble du texte d'un document. Utilisez CSS pour l'application de toutes les polices.
• <big> : agrandit le texte par rapport à la taille de police actuelle. Utilisez CSS à la place.
• <center> : centre le texte et le contenu. Utilisez CSS à la place.
• <dir> : définit une liste de répertoires. Utilisez la balise <ul> à la place.
• <font> : spécifie le type, la taille et la couleur de police du texte. Utilisez CSS à la place.
• <frame> : définit un cadre spécifique (une fenêtre) dans un jeu de cadres (voir élément suivant).
• <frameset> : définit un jeu de cadres pour le positionnement de plusieurs cadres (fenêtre).
• <noframes> : affiche le texte pour les navigateurs ne prenant pas en charge les cadres.
• <strike> : définit le texte barré. Utilisez la balise <del> à la place pour les petits blocs de
texte, ou utilisez CSS pour des blocs de texte plus importants.
• <tt> : définit le texte télétype ou à espacement fixe. Utilisez la balise <code> ou CSS à la place.
Même si un élément n'est pas pris en charge, cela ne signifie pas qu'il ne fonctionnera pas
dans certains navigateurs. Beaucoup d'utilisateurs disposent encore d'anciennes versions
de navigateurs et de nombreux éléments obsolètes s'affichent correctement dans ces
navigateurs. Toutefois, lors de la création de pages Web, il est recommandé de partir
du principe que les visiteurs qui les consultent utilisent un navigateur relativement récent,
ce qui sous-entend l'utilisation des derniers éléments HTML. S'il est établi que toutes les
personnes consultant votre page Web utilisent l'ancienne version d'un navigateur, il est
possible d'utiliser des éléments obsolètes. Malgré cela, si une page Web requiert une mise
en forme importante, il est préférable d'utiliser CSS pour plus d'efficacité.
Les attributs suivants ne sont pas utilisés dans HTML5, bien qu'ils ne fassent pas
réellement partie d'une spécification HTML :
• bgcolor : applique une couleur d'arrière-plan spécifiée au contenu décrit par l'élément
associé, généralement un tableau ou une page. Utilisez la propriété CSS background-
color à la place.
• bordercolor : applique une couleur spécifiée à la cellule d'un tableau. Utilisez la
propriété CSS border-color à la place.
• bordercolorlight : applique une couleur spécifiée aux coins supérieurs et gauche d'une
cellule de tableau. Utilisez la propriété CSS border-color à la place.
• bordercolordark : applique une couleur spécifiée aux coins inférieurs et droit d'une
cellule de tableau. Utilisez la propriété CSS border-color à la place.
À l'instar des éléments obsolètes, vous pouvez utiliser ces attributs si vous savez que les
personnes qui consultent votre page Web utilisent d'anciens navigateurs. Sachez que vous
obtiendrez des erreurs lorsque vous tentez de valider votre page Web ; vous pouvez les ignorer
si vous êtes certain que les navigateurs de vos visiteurs prennent ces attributs en charge.
Pour connaître les nouveautés de HTML5, reportez-vous à la page Web « Learn HTML5 in 5 Minutes! »
(Apprenez HTML5 en 5 minutes) à l'adresse http://msdn.microsoft.com/en-us/hh549253 et la page
Web « HTML elements » (Éléments HTML) de W3C à l'adresse http://dev.w3.org/html5/markup/
elements.html#elements.
34 | Leçon 2
AFFICHER LES EFFETS DES ÉLÉMENTS OBSOLÈTES

PRÉPAREZ-VOUS. Pour afficher les effets des éléments obsolètes dans une page Web
HTML5, procédez comme suit :
1. Dans votre outil d'édition, ouvrez le fichier L2-animal-mark.html s'il n'est pas déjà ouvert.
2. Modifiez le titre h1 de manière à incorporer l'élément center, comme illustré :
<h1><center>Soins et alimentation</center></h1>
3. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-temp.html, puis affichez-
le dans un navigateur Web. L'élément center a t-il centré le titre dans votre navigateur ?
4. Ajoutez l'élément big au contenu suivant, comme illustré :
<p>Votre chien est un <mark style="background-color:orange;">
<big>ami pour la vie</big></mark>.
5. Enregistrez le fichier et affichez-le dans un navigateur Web. L'effet de l'élément big
est-il visible ? Pour consulter un exemple, reportez-vous à la figure 2-9.
Figure 2-9
Effets des éléments center
et big
6. Accédez à la page Web du service de validation du balisage du W3C à l'adresse http://

validator.w3.org/. Téléchargez le fichier L2-animal-temp.html et cliquez sur Check afin
que le service vérifie le fichier.
7. Notez que le service de validation affiche les erreurs se rapportant à l'utilisation
d'éléments obsolètes. Quelles conclusions pouvez-vous tirer sur l'utilisation d'éléments
obsolètes dans HTML5 ? (Les éléments obsolètes ne sont pas validés mais un grand
nombre d'entre eux s'affichent toujours correctement dans un navigateur Web.)
8. Fermez L2-animal-temp.html et laissez l'outil d'édition et le navigateur Web ouverts si
vous passez immédiatement à la section suivante.
■ Sélection et configuration de balises HTML5 pour l'affichage des graphiques
Utilisez l'élément img pour afficher les images liées dans une page Web. Les images
peuvent se trouver dans les fichiers HTML des pages Web, généralement dans un
sous-dossier d'images, ou sur un autre serveur ou site Web. Les éléments figure et
figure caption sont nouveaux dans HTML5. Ils vous donnent plus de contrôle sur le
L'ESSENTIEL type d'images affichées et permettent d'inclure des légendes, respectivement. L'élément
canvas est utilisé pour des opérations dynamiques de dessin, de rendu et de manipulation
d'images et de graphiques dans HTML5. L'élément SVG (Scalable Vector Graphics) vous
permet de créer des objets évolutifs et redimensionnables qui s'adaptent parfaitement
à l'écran sur lequel ils s'affichent, qu'il s'agisse d'un moniteur ou d'un smartphone.
Il est possible d'afficher différents types d'images sur une page Web et la majorité
appartiennent à deux catégories principales : tramée (ou bitmap) et vectorielle. Une image
tramée est composée de pixels, tandis qu'une image vectorielle est formée de lignes
et de courbes basées sur des expressions mathématiques. Une photographie est une image
tramée, généralement au format JPG. D'autres formats de fichiers tramés fonctionnent
bien sur les pages Web, notamment PNG, GIF et BMP. Une image vectorielle est une
illustration, telle un dessin au trait. Souvent, les développeurs convertissent des fichiers
vectoriels provenant de programmes tels qu'Adobe Illustrator ou CorelDRAW, non pris
en charge par les navigateurs Web, au format PNG ou GIF pour un affichage Web. Il
PRÊT POUR LA existe une différence majeure entre les deux types de fichiers, à savoir les images tramées
CERTIFICATION perdent en qualité (elles se pixellisent) à mesure que vous les agrandissez, tandis que
Quel balisage la qualité des images vectorielles reste constante, même lorsqu'elles sont agrandies.
utilisez-vous pour La principale méthode pour ajouter des images à un document HTML est l'utilisation de
afficher une image l'élément img. À l'instar de la balise d'ancrage, la balise img n'a aucun effet à elle seule ; elle
externe sur une page doit être dotée d'attributs et de valeurs spécifiant l'image que le navigateur Web doit afficher.
Web ?
2.2
Par exemple, pour insérer une image nommée redball.jpg qui se trouve dans un
sous-dossier appelé images, entrez l'élément suivant :
<img src="images/redball.jpg" alt="graphique de boule rouge" />
Si le sous-dossier images est accessible, l'image s'affiche. Les attributs src et alt sont tous
deux nécessaires pour que le code soit pleinement valide. La valeur de l'attribut alt
(abréviation de « alternate text » ou texte de remplacement) s'affiche lorsque l'utilisateur
positionne le pointeur de la souris sur l'image ; dans ce cas précis, le texte « Red ball
graphic » s'affiche. Le W3C exige l'attribut alt pour faciliter l'accessibilité des personnes
présentant un handicap. Les personnes ayant une acuité visuelle réduite utilisent un lecteur
d'écran qui lit à voix haute le texte de remplacement de chaque image. Les moteurs de
recherche utilisent également l'attribut alt pour identifier le type des images et leur
contenu, dans la mesure où ils ne « voient » pas à proprement parler les pixels des images.
En guise d'autre exemple, pour insérer une image nommée logobleu.png, accessible
depuis un autre site Web, entrez l'élément suivant :
<img src="http://www.exemple.com/mrkt/images/logobleu.png"
alt="Logo bleu Société XYZ" />
L'élément img utilise plusieurs attributs, décrits dans le Tableau 2-3.
Tableau 2-3
Attributs de l'élément img Attribut Valeur Description
src URL Spécifie l'emplacement de l'image, par ex. un chemin
d'accès ou une URL
alt Text Spécifie le texte de remplacement qui s'affiche lorsque
l'utilisateur place le pointeur de la souris ou un autre
dispositif de pointage sur l'image
height pixels Spécifie la hauteur d'une image
width pixels Spécifie la largeur d'une image
ismap ismap Spécifie une image en tant qu'image interactive sur le serveur
usemap #mapname Spécifie une image en tant qu'image interactive sur le
client (il s'agit d'une image avec des zones définies qui
sont des liens interactifs)
Utilisation des éléments figure et figcaption
Deux nouveaux éléments liés aux graphiques ont été ajoutés dans HTML5. Il s'agit
de figure et figcaption. L'élément figure spécifie le type de figure que vous souhaitez
utiliser dans un document HTML, par exemple une illustration ou une photographie.
L'élément figcaption fournit une légende pour la figure.
36 | Leçon 2
L'élément figure spécifie le type de figure à ajouter, par exemple une image, un dia-
gramme, une photographie, etc. Cet élément offre un atout majeur : la possibilité d'ajouter
facilement plusieurs images côte à côte. Avec HTML 4, cela exigeait un balisage assez
important. L'élément figcaption est facultatif. Il ajoute une légende à une image sur une
page Web ; cette légende peut s'afficher avant ou après l'image.
Le balisage suivant utilise l'élément figure, spécifie la largeur et la hauteur de l'image et
ajoute une légende. Le résultat est illustré à la figure 2-10 :
<figure>
<img src="doghappy.jpg" alt="Chien heureux"
width="100" height="125" />
<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>
Figure 2-10
Utilisation des éléments
Illustration: © MightyIsland/iStockphoto
figure et figcaption pour
afficher une image avec une
légende
Le balisage suivant est destiné à une figure avec plusieurs images partageant la même
légende. Le résultat obtenu est illustré à la figure 2-11 :
<figure>
<img src="dogpaws.jpg" alt="Pattes de chien"
<img src="dogwalk.jpg" alt="Promener son chien"
</figure>
Figure 2-11
Utilisation des éléments
figure et figcaption pour

afficher plusieurs images
côte à côte avec une légende
unique
Pour en savoir plus sur l'affichage des images sur les pages Web, consultez la page http://bit.ly/
Kgg1ab. Vous trouverez également d'autres informations sur les images interactives à l'adresse
http://bit.ly/hincW5.
AFFICHER UNE IMAGE SUR UNE PAGE WEB

PRÉPAREZ-VOUS. Pour afficher une image sur une page Web, procédez comme suit :
1. Recherchez un fichier JPG, PNG, GIF ou BMP sur votre ordinateur afin de l'utiliser dans
cet exercice. Il peut s'agir de n'importe quelle image, mais un contenu en rapport avec
les animaux de compagnie est tout à fait approprié.
2. Dans votre outil d'édition, ouvrez L2-animal-mark.html.
3. Supprimez les balises <mark> du premier paragraphe.
4. Insérez le balisage suivant après l'élément h1, en laissant une ligne vierge avant et
après celui-ci et en remplaçant dogwalk.jpg par votre propre fichier image :
<figure>
</figure>
5. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-image.html, puis
affichez-le dans un navigateur Web. La page doit ressembler à la figure 2-12.
Figure 2-12
Page Web avec une image

à l'exercice suivant.
UTILISER LES ÉLÉMENTS FIGURE ET FIGCAPTION
PRÉPAREZ-VOUS. Pour afficher une image sur une page Web, procédez comme suit :
1. Recherchez deux autres fichiers JPG, PNG, GIF ou BMP afin de les utiliser dans cet
exercice. Il peut s'agir de n'importe quelle image, mais un contenu en rapport avec les
animaux de compagnie est tout à fait approprié. Trois images sont nécessaires pour
exécuter les étapes suivantes.
2. Dans votre outil d'édition, ouvrez le fichier L2-animal-image.html s'il n'est pas déjà ouvert.
38 | Leçon 2
3. Remplacez le balisage de la figure qui suit l'élément h1 par ce qui suit, en remplaçant
les noms des fichiers image (doghappy.jpg, dogpaws.jpg et dogwalk.jpg) par les noms
de vos propres fichiers image :
<figure>

<img src="dogpaws.jpg" alt="Pattes de chien"


</figure>
4. Enregistrez le fichier sous L2-animal-imagesmultiples, puis affichez-le dans un naviga-

teur Web. La page doit ressembler à la figure 2-13.
Figure 2-13
Page Web avec plusieurs
images et une légende
5. Fermez le fichier L2-animal-imagesmultiples. Laissez l'outil d'édition et le navigateur
Web ouverts si vous passez immédiatement à l'exercice suivant.
Création de graphiques à l'aide de canvas
L'élément canvas est nouveau dans HTML5. Il crée un conteneur pour les graphiques
et utilise JavaScript pour dessiner de manière dynamique les graphiques.
Avec l'élément canvas, la page Web devient un bloc de dessin, tandis que les commandes
JavaScript vous permettent de tracer des formes composées de pixels dans la zone de
dessin, avec notamment des couleurs, des dégradés et des motifs de remplissage. Canvas
permet également de rendre le texte avec différents effets et d'animer les objets en les
faisant se déplacer, en modifiant l'échelle, etc.
Les développeurs utilisent l'élément canvas pour créer des jeux en ligne, des galeries
de photos dynamiques, des codes de titre et bien plus encore. Les fonctions de l'élément
REMARQUE
* canvas destinées aux graphiques et aux animations visent à offrir une qualité similaire
à celle des animations Flash.
NOTIONS DE BASE DE L'ÉLÉMENT CANVAS

Pour utiliser l'élément canvas, vous commencez par définir une zone de dessin au format
HTML. La syntaxe de base de l'élément canvas est la suivante :
<canvas id="smlRectangle" height="100"
PRÊT POUR LA width="200"></canvas>
CERTIFICATION
Quelle est la syntaxe Cet élément crée votre bloc de dessin. L'élément canvas requiert l'attribut id pour référencer
de base de l'élément la zone de dessin dans JavaScript et l'ajouter au modèle DOM (Document Object Model).
canvas dans un Vous devez également spécifier les dimensions de la zone de dessin (hauteur et largeur)
document HTML ? en pixels. JavaScript fonctionne de concert avec l'interface de programmation d'applications
2.2 (API) 2D pour tracer réellement les éléments dans la zone de dessin.
UTILISER L'ÉLÉMENT CANVAS POUR CRÉER UNE FORME

PRÉPAREZ-VOUS. Pour créer une forme à l'aide de l'élément canvas, procédez comme suit :
1. Dans votre outil d'édition, entrez le balisage suivant :
<!doctype html>
<html>
<head>
<title>Test canvas</title>
<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,255)";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<canvas id="smlRectangle" height="100" width="200 ">
</canvas>
</body>
</html>
Vous pouvez inclure des JavaScripts dans l'élément head de votre document HTML,
REMARQUE
* ou dans un fichier externe.
L'attribut onload lance l'exécution de la fonction JavaScript incluse dans le script.

Ce script commence par rechercher l'élément doté de l'id smlRectangle :
var canvas = document.getElementById("smlRectangle");
40 | Leçon 2
La méthode context.fillStyle remplit un rectangle de bleu en utilisant les valeurs RVB 0, 0,

X REF
255. La méthode context.fillRect crée un rectangle d'une largeur de 200 pixels et d'une
Vous apprendrez hauteur de 100 pixels, positionné à 10 pixels vers le bas et à 20 pixels à partir de l'angle
comment utiliser supérieur gauche de la zone de dessin et le remplit de la couleur spécifiée par fillStyle.
JavaScript dans les 2. Enregistrez le fichier sous L2-canvas.html, puis affichez-le dans un navigateur. La forme
leçons, 8, 9 et 10. doit ressembler à celle de la figure 2-14.
Figure 2-14
Page Web avec l'apparence
d'une zone de dessin
3. Si aucun rectangle bleu n'est visible, accédez à la page Web du service de validation
du W3C à l'adresse http://validator.w3.org. Téléchargez le fichier L2-canvas.html et
cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par
le vérificateur, si nécessaire. Réenregistrez le fichier et affichez-le dans un navigateur.
4. Gardez le fichier, l'outil d'édition et le navigateur Web ouverts si vous passez
immédiatement à l'exercice suivant.
CRÉATION D'UN CONTOUR DE FORME

Pour créer le contour d'un rectangle sans couleur de remplissage, utilisez la méthode
context.strokeRect. Elle utilise les mêmes valeurs que context.fillRect. Pour modifier la couleur
du contour (la couleur du trait), utilisez context.strokeStyle Par exemple, pour créer un
contour rectangulaire rouge de 200 x 100 pixels, utilisez les méthodes suivantes dans
votre JavaScript :
context.strokeStyle = "red";
context.strokeRect(10,20,200,100);
UTILISER CANVAS POUR CRÉER LE CONTOUR D'UNE FORME

PRÉPAREZ-VOUS. Pour créer le contour d'une forme à l'aide de l'élément canvas,
1. Dans votre outil d'édition, enregistrez L2-canvas.html sous le nom L2-canvas-stroke.html.
2. Remplacez les lignes de code fillStyle et fillRect par le code suivant :
context.strokeStyle = "red";
context.strokeRect(10,20,200,100);
3. Supprimez les attributs width et height de l'élément canvas dans le corps (après id
="smlRectangle").
4. Enregistrez le fichier et affichez-le dans un navigateur Web. La forme doit ressembler
à celle de la figure 2-15.
Figure 2-15
Page Web avec le contour
d'une zone de dessin
5. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous
passez immédiatement à l'exercice suivant.
SPÉCIFICATION D'UNE IMAGE OU D'UN TEXTE DE REMPLACEMENT POUR LES

ANCIENS NAVIGATEURS
Certains navigateurs plus anciens ne peuvent pas rendre les dessins ou les animations
créés à l'aide de l'élément canvas. Par conséquent, vous devez ajouter une image, un
texte ou un autre contenu HTML dans l'élément canvas afin que celui-ci s'affiche si
le navigateur ne peut pas afficher le dessin. Le contenu de secours, appelé également
solution de rechange, ne s'affichera pas si l'élément canvas est pris en charge. L'exemple
suivant affiche une image (smlRectangle.jpg) semblable au rectangle rempli qui serait créé
à l'aide de l'élément canvas :
<canvas id="smlRectangle" height="100" width="200">
<img
src="http://www.exemple.com/images/smlRectangle.jpg"
alt="Rectangle bleu" />
</canvas>
Pour afficher du texte plutôt qu'une image, vous devez insérer le texte à la place de la
balise <img>.
A JOUTER UN TEXTE DE SECOURS À VOTRE DOCUMENT HTML

PRÉPAREZ-VOUS. Pour ajouter un texte de secours à votre document HTML, procédez
comme suit :
1. Dans votre outil d'édition, ouvrez L2-canvas.html et enregistrez-le sous L2-canvas-
secours.html.
2. Remplacez l'élément canvas par la mention suivante :
<canvas id="smlRectangle" height="100" width="200">
Votre navigateur ne prend pas en charge la balise canvas.
</canvas>
3. Enregistrez le fichier et affichez-le dans le navigateur Web Internet Explorer 9.
Le dessin créé à l'aide de l'élément canvas devrait s'afficher.
4. Appuyez sur F12 pour passer en mode navigateur, cliquez sur Mode document dans
la barre de menus, puis sélectionnez Normes d'Internet Explorer 7.
42 | Leçon 2
5. Appuyez de nouveau sur F12. Un message d'erreur s'affiche, indiquant que le navigateur
ne reconnaît pas une propriété ou une méthode. Fermez le message d'erreur. La fenêtre
du navigateur affiche le texte de secours, comme illustré à la figure 2-16.
Figure 2-16
Le texte s'affiche si le
navigateur ne prend pas en
charge canvas
6. Gardez le fichier, l'outil d'édition et le navigateur Web ouverts si vous passez

immédiatement à l'exercice suivant.
Pour plus d'informations sur l'élément canvas, consultez la page Web Microsoft HTML5 Graphics
(Graphiques HTML5 Microsoft) à l'adresse http://msdn.microsoft.com/fr-fr/library/gg589511(v=VS.85).
aspx. Le site Web HTMLCenter à l'adresse http://www.htmlcenter.com/blog/rgb-color-chart/
répertorie les codes de couleur RVB.
Création de graphiques à l'aide de SVG
SVG (Scalable Vector Graphics) est un langage permettant de décrire les graphiques 2D
en langage XML (Extensible Markup Language). XML s'apparente au format HTML et
il a joué un rôle important dans les pages Web HTML 4.01. La technologie SVG n'est
pas nouvelle, mais HTML5 permet désormais aux objets SVG d'être incorporés dans les
pages Web sans l'utilisation des balises <object> ou <embed>. (Tous les types de
graphiques SVG sont appelés objets et SVG est chargé dans le DOM.)
Comme son nom l'indique, SVG (Scalable Vector Graphics) sert essentiellement à créer des
PRÊT POUR LA formes graphiques vectorielles évolutives, mais vous pouvez également créer des images et
CERTIFICATION
du texte. À l'image de l'élément canvas, vous pouvez appliquer des couleurs unies, des
Quels types d'objets
pouvez-vous créer avec dégradés et des motifs de remplissage aux objets SVG, ou encore copier et cloner des
SVG ? objets. Vous pouvez également utiliser SVG lors de l'insertion d'un fichier PNG, JPG ou
2.2 GIF. SVG vous permet de fournir des instructions de dessin plutôt qu'un fichier image.
L'un des principaux atouts de SVG est sa flexibilité. La taille du graphique vectoriel change
de manière à s'adapter à l'écran sur lequel il est affiché, qu'il s'agisse d'un écran d'ordinateur
de 32 pouces ou d'un périphérique mobile comme un smartphone. Seul le code XML décrivant
le graphique est transmis et par conséquent, même les images de grande taille ne nécessitent
pas beaucoup de bande passante. Pour cette raison, vous pouvez utiliser SVG en arrière-plan
d'une page Web, sans avoir à utiliser la propriété repeat. (La plupart des arrières-plans de page
Web unis sont en fait une ligne fine répétée à l'aide d'un style CSS.) En outre, SVG peut être
indexé par les moteurs de recherche car il est créé à l'aide du langage XML.
Vous pouvez inclure des attributs tels que color, rotation, stroke color et size, et ainsi de
suite à chaque objet SVG. Le balisage suivant peut être inclus dans un fichier HTML pour
créer un ballon violet :
<svg id="svgpurpball" height="200"
xmlns="http://www.w3.org/2000/svg">
<circle id="purpball" cx="40" cy="40"
r="40" fill="purple" />
</svg>
Les attributs cs, cy et r permettent de définir le cercle en spécifiant les points x et y et
le rayon par rapport au centre. SVG est doté d'une pléthore d'attributs qui permettent de
créer différents types de formes. Les attributs sont disponibles sur le site Web de W3C
à l'adresse http://www.w3.org/TR/SVG/attindex.html.
Pour plus d'informations sur SVG, consultez la page Web Microsoft SVG à l'adresse http://msdn.
microsoft.com/fr-fr/library/gg589525(v=vs.85).aspx.
CRÉER UN GRAPHIQUE VECTORIEL SVG

PRÉPAREZ-VOUS. Pour créer un graphique vectoriel SVG simple, procédez comme suit :
1. Dans votre outil d'édition, entrez le balisage suivant :
<!doctype html>
<html>
<head>
<title>Étoile SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:aqua;stroke:orange;stroke-width:5;
fill-rule:evenodd;"/>
</svg>
</body>
</html>
L'attribut points définit les coordonnées x et y pour chaque coin, ou « point » du
polygone. L'attribut fill-rule détermine le style de remplissage de l'intérieur du polygone.
2. Enregistrez le fichier sous L2-SVG.html, puis affichez-le dans un navigateur Web. La page
doit ressembler à la figure 2-17. Si la page ne s'affiche pas, vérifiez-la à l'aide du Service de
validation du W3C à l'adresse http://validator.w3.org et corrigez les erreurs, si nécessaire.
Figure 2-17
Page Web avec une forme
SVG
44 | Leçon 2
3. Modifiez les valeurs de paramètres de quelques points de polygone. Enregistrez le

fichier sous L2-SVG-test.html, puis affichez-le dans un navigateur Web. Par exemple,
en changeant la valeur du premier paramètre de 100 à 50, vous obtenez le polygone
illustré à la figure 2-18.
Figure 2-18
La modification d'une seule
valeur de paramètre modifie
la forme de l'objet
4. Supprimez fill-rule:evenodd ;, enregistrez le fichier, puis affichez-le dans un navigateur

Web. Comparez le polygone à la figure 2-17.
5. Fermez tous les fichiers de données ouverts. Laissez l'outil d'édition et le navigateur
Web ouverts si vous passez immédiatement à l'exercice suivant.
Quand utiliser canvas au lieu de SVG
PRÊT POUR LA Il n'y a aucune règle préétablie pour la sélection de canvas ou de SVG. Votre choix
CERTIFICATION
dépend principalement de la nature de votre projet et de votre niveau de compétence
Quand faut-il utiliser
l'élément canvas plutôt dans l'utilisation de l'un ou l'autre de ces éléments.
que SVG ?
2.2 Voici quelques considérations qui vous aideront à prendre la bonne décision :
• Si le dessin est relativement petit, utilisez canvas.
• Si le dessin contient un nombre important d'objets, utilisez canvas. SVG commence
à se dégrader, au fur et à mesure que des objets sont ajoutés au modèle DOM.
• En règle générale, utilisez canvas pour les petits écrans, tels que ceux des périphériques
mobiles. À mesure que la taille de l'écran augmente et que davantage de pixels sont
nécessaires, la zone de dessin se pixellise et il est donc préférable d'utiliser SVG.
• Si vous devez créer des documents vectoriels particulièrement détaillés dont la mise
à l'échelle est importante, optez pour SVG.
• Si vous affichez des données en sortie en temps réel, par exemple des cartes, des cartes
superposables, des données météorologiques et ainsi de suite, utilisez l'élément canvas.
Astuce de Microsoft : représentez-vous l'élément canvas comme étant similaire
à Microsoft Paint. Vous pouvez dessiner des images à l'aide de formes et d'autres outils
et le résultat est basé sur des pixels. Imaginez SVG comme étant semblable à une
diapositive PowerPoint Office, avec des objets redimensionnables.
Pour plus d'informations sur la façon de choisir la meilleure méthode de dessin, à savoir canvas ou
SVG, reportez-vous à la page http://msdn.microsoft.com/fr-fr/library/ie/gg193983(v=vs.85).aspx.
■ Sélection et configuration de balises HTML5 pour la lecture de contenu multimédia
HTML5 introduit les éléments audio et video qui rendent désormais superflue
L'ESSENTIEL l'utilisation de plug-ins ou de lecteurs multimédias pour écouter de la musique ou
regarder des vidéos via un navigateur Web.
Les éléments audio et video sont deux des principales nouveautés de HTML5. Ils vous
permettent de proposer du contenu multimédia dans un navigateur Web sans avoir besoin
PRÊT POUR LA de plug-ins comme le lecteur multimédia Microsoft Windows, Microsoft Silverlight,
CERTIFICATION
Adobe Flash ou Apple QuickTime. Cela signifie que les utilisateurs peuvent simplement
Quelles balises HTML5
ouvrir un navigateur prenant en charge HTML5 pour écouter de la musique ou des livres
permettent d'incorporer
du contenu multimédia
audio, profiter d'effets sonores enrichis et regarder des clips vidéo ou des films.
dans une page Web ? La spécification HTML5 inclut les balises <video> et <audio> afin d'incorporer le
2.3 multimédia. Les sections suivantes décrivent chacune de ces balises en détail.
Comprendre et utiliser les balises de contenu vidéo
Vous utilisez l'élément video avec l'attribut src pour désigner un fichier vidéo devant
être lu dans un document HTML. Par ailleurs, l'ajout des attributs height et width vous
permettent de contrôler la taille de la fenêtre dans laquelle s'affiche la vidéo.
L'élément video vous permet d'incorporer des vidéos dans des documents HTML en
PRÊT POUR LA utilisant un minimum de code. La structure utilisée pour l'incorporation d'une vidéo est
CERTIFICATION simple. Voici un exemple de balisage pour l'ajout d'un fichier MP4 à une page Web :
Quel est le balisage
utilisé pour l'élément <video src="intro.mp4" width="400" height="300">
video HTML5 ? </video>
2.3
L'attribut src pointe vers le nom du fichier vidéo à lire (dans ce cas, video.mp4). Les
attributs height et width spécifient la taille de la fenêtre dans laquelle s'affiche la vidéo.
Vous pouvez ajouter d'autres attributs permettant de contrôler la vidéo :
• poster : affiche un fichier image statique avant le chargement de la vidéo
• autoplay : démarre automatiquement la lecture de la vidéo après le chargement de la
page
• controls : affiche un ensemble de contrôles utilisés pour lire, mettre en pause ou arrêter
la vidéo et régler le volume
• loop : répète la vidéo
Lorsque tous les contrôles ci-dessus sont utilisés, le balisage doit se présenter comme suit :
<video src="/videos/intro.mp4"
width="400" height="300
poster="78704-splash.jpg"
autoplay="autoplay"
controls="controls"
loop="loop">
</video>
Notez que ce balisage fait référence à un fichier vidéo MP4. Parmi les autres formats
vidéo souvent utilisés sur le Web figurent également H.264, OGG et WebM, bien que
WebM soit utilisé moins de 10 % du temps. Outre le format vidéo, vous devez également
spécifier le codec, une technologie utilisée pour compresser les données. La compression
46 | Leçon 2
réduit la quantité d'espace nécessaire pour stocker un fichier ainsi que la bande passante
nécessaire pour la transmission du fichier. La compression vidéo réduit la taille des
images vidéo en conservant la qualité vidéo la plus élevée avec une vitesse de
transmission minimum. Tout ceci a pour effet d'améliorer les performances.
En résumé, les principaux formats vidéo et codecs (pour les deux derniers) sont :
• MP4 ou H.264
• OGG + Theora avec audio Vorbis
• WebM + VP8
Il est recommandé d'utiliser l'attribut type pour spécifier le format vidéo. Il convient
également d'utiliser l'attribut codecs pour spécifier le(s) codec(s), le cas échéant.
Voici un exemple de balisage :
<video
width="400" height="300"
poster="78704-splash.jpg"
autoplay="autoplay"
controls="controls"
loop="loop">
<source src="intro.mp4" type="video/mp4" />
</video>
La balise <source> est utilisée comme contenu de l'élément video afin que l'attribut type
puisse être défini et que l'option de formats multiples soit disponible.
Tous les navigateurs ne prennent pas en charge la totalité des formats vidéo ; le format
MP4/H.264 est le plus largement utilisé par les navigateurs Web et les périphériques
mobiles. (La page Web HTML5 Video, à l'adresse http://www.w3schools.com/html/
html5_video.asp, comporte un tableau répertoriant les formats vidéo pris en charge par les
différents navigateurs. Ce tableau est mis à jour régulièrement.) Pour que votre vidéo
puisse s'afficher dans la plupart des navigateurs et périphériques, vous pouvez utiliser
l'attribut source afin d'inclure plusieurs formats dans votre balisage. L'exemple suivant
montre la même vidéo disponible en deux formats, et le format OGG spécifie les codecs :
<video
width="400" height="300" poster="image.png"
autoplay="autoplay"
controls="controls"
loop="loop">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type=’video/ogg;

codecs="theora, vorbis"’>
</video>
UTILISER L'ÉLÉMENT VIDEO

PRÉPAREZ-VOUS. Pour utiliser l'élément video HTML5, procédez comme suit :
1. Recherchez un clip vidéo et un fichier image à utiliser en tant qu'affiche. Si vous ne disposez
pas de clip vidéo, recherchez un fichier MP4 disponible dans le domaine public sur le Web
et téléchargez-le. Enregistrez la vidéo et le fichier image dans votre dossier HTML5.
2. Dans votre outil d'édition, créez un fichier HTML avec le balisage suivant. Remplacez
les noms des fichiers par ceux de votre fichier image et clip vidéo. Modifiez l'attribut
type, si nécessaire et remplacez sample.mp4 par le nom de votre fichier vidéo.
<!doctype html>
<html>
<head>
<title>Test vidéo</title>
</head>
<body>
<video
width="400" height="300"
poster="sample.jpg"
autoplay="autoplay"
controls="controls">
<source src="sample.mp4" type="video/mp4" />
</video>
</body>
</html>
3. Enregistrez votre fichier sous L2-video.html.
http://validator.w3.org/. Téléchargez le fichier L2-video.html et cliquez sur Check
afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur
en cas de balises manquantes ou de fautes de frappe, le cas échéant.
5. Ouvrez le fichier HTML dans un navigateur Web. La vidéo démarre t-elle
automatiquement ? Les contrôles sont-ils affichés ? Ouvrez le fichier L2-video.html
dans plusieurs navigateurs Web afin de le tester.
6. Dans votre outil d'édition, supprimez la ligne autoplay et remplacez controls="controls"
par controls simplement.
7. Réenregistrez le fichier et validez-le. La validation ne doit générer aucune erreur. Ceci
signifie que HTML5 permet d'utiliser une méthode plus courte pour spécifier l'attribut
controls. Le même principe s'applique aux attributs autoplay et loop.
à l'exercice suivant.
Comprendre et utiliser les balises audio
L'élément audio HTML5 fonctionne de la même façon que l'élément video, mais il
s'applique uniquement au son. Pour utiliser l'élément audio, incluez la balise <audio> et le
chemin d'accès au fichier sur votre disque dur, ou une URL pointant vers le fichier audio.
L'élément audio vous permet d'incorporer un son audio, tel que de la musique ou d'autres
PRÊT POUR LA sons, dans les documents HTML. Vous pouvez inclure les mêmes attributs se rapportant
CERTIFICATION aux contrôles que pour l'élément video, à savoir : autoplay, controls et loop. L'exemple
Quel est le balisage suivant inclut uniquement l'attribut controls :
utilisé pour l'élément
audio HTML5 ? <audio src="sample.mp3" controls="controls">
2,3 </audio>
Si vous utilisez l'attribut autoplay pour que la lecture audio commence automatiquement
lors du chargement de la page Web, utilisez un clip de courte durée comme un effet
REMARQUE
* sonore. Un grand nombre d'internautes n'aiment pas entendre un son automatique et
préfèrent avoir davantage de contrôle.
48 | Leçon 2
Les trois principaux types de fichiers audio pris en charge par les navigateurs sont OGG,
MP3 et WAV. Toutefois, tous les navigateurs ne prennent pas en charge tous les formats
de fichier audio, du moins pas pour le moment. Dans la plupart des cas, MP3 représente
le meilleur choix en raison de sa compatibilité avec de nombreux navigateurs.
Pour vous assurer que votre fichier audio fonctionne avec la plupart des navigateurs et des
périphériques, utilisez l'attribut source afin d'inclure plusieurs formats dans votre balisage.
L'exemple suivant illustre le même fichier audio disponible dans deux formats :
<audio controls="controls">
<source src="sample.ogg" type="audio/ogg" />
<source src="sample.mp3" type="audio/mp3" />
</audio>
Un grand nombre de fichiers audio gratuits, libres de redevances et de droits d'auteur, sont
disponibles sur le site http://flashkit.com. Ce site est une bonne ressource pour les
apprenants et les développeurs qui recherchent un effet sonore pour un projet. D'autres
ressources sont également disponibles sur le site Public Sherpa Domain à l'adresse http://
www.publicdomainsherpa.com/public-domain-recordings.html. Vous pouvez aussi créer vos
propres enregistrements à l'aide de votre ordinateur et d'un logiciel d'enregistrement. Ainsi,
l'Enregistreur Windows 7 vous permet d'enregistrer des fichiers audio au format WAV.
UTILISER L'ÉLÉMENT AUDIO

PRÉPAREZ-VOUS. Pour utiliser l'élément audio HTML5, procédez comme suit :
1. Recherchez un clip audio.
2. Dans votre outil d'édition, créez un fichier HTML avec le balisage suivant. Remplacez le
nom de fichier par celui de votre clip audio.
<!doctype html>
<html>
<head>
<title>Test audio</title>
</head>
<body>
<audio src="sample.mp3" controls="controls">
</audio>
</body>
</html>
3. Enregistrez votre fichier sous L2-audio.html, puis affichez-le dans un navigateur. Vous
devez obtenir quelque chose similaire à la figure 2-19. Dans la mesure où l'attribut
autoplay n'a pas été inclus dans cet exemple, vous devez cliquer sur le bouton Lecture
pour lancer le clip audio.
Figure 2-19
Contrôles audio HTML5 par
défaut dans un navigateur
Web
4. Si les contrôles audio ne s'affichent pas, accédez à la page Web du service de validation
du W3C à l'adresse http://validator.w3.org. Téléchargez le fichier L2-audio.html et
cliquez sur Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par
le vérificateur en cas de balises manquantes ou de fautes de frappe, le cas échéant.
5. Réenregistrez le fichier et ouvrez-le dans un navigateur Web. Lisez le clip audio.
6. Fermez tous les fichiers ouverts, ainsi que l'outil d'édition et le navigateur Web.
Pour plus d'informations sur l'incorporation de contenu multimédia dans les pages Web HTML5, et
plus particulièrement les éléments audio et video, reportez-vous à la page http://msdn.microsoft.com/
fr-fr/library/ie/hh771805.

• Le langage HTML (Hypertext Markup Language) utilise des balises pour décrire le
contenu qui s'affiche sur une page Web.
• Un élément se compose à 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.
• Chaque page Web requiert l'insertion de la déclaration doctype en haut de la page.
• HTML5 utilise la plupart des éléments et attributs déjà spécifiés dans HTML 4, mais
il inclut quelques nouvelles balises. En outre, l'utilisation par défaut d'autres balises
a été modifiée et certains éléments ne sont plus pris en charge. Parmi les nouveaux
éléments textuels figurent notamment command, mark, time, meter et progress.
Les éléments basefont, center, font et strike sont désormais obsolètes.
• L'élément img permet d'afficher les images liées dans une page Web. Les images
peuvent se trouver dans les fichiers HTML des pages Web, généralement dans un
sous-dossier d'images, ou sur un autre serveur ou site Web.
• Les éléments figure et figure caption sont nouveaux dans HTML5. Ils vous donnent plus
de contrôle sur le type d'images affichées et permettent d'inclure des légendes,
respectivement.
• L'élément canvas est utilisé pour des opérations dynamiques de dessin, de rendu
et de manipulation d'images et de graphiques dans HTML5.
• SVG (Scalable Vector Graphics) permet de créer des objets évolutifs et
redimensionnables qui s'adaptent parfaitement à l'écran sur lequel ils s'affichent,
qu'il s'agisse d'un moniteur ou d'un smartphone.
• HTML5 introduit les éléments audio et video qui rendent désormais superflue
l'utilisation de plug-ins ou de lecteurs multimédias pour écouter de la musique
ou regarder des vidéos via un navigateur Web.

1. Une balise HTML qui ne nécessite pas de balise de fin est appelée une balise
.
2. Un est utilisé conjointement avec un élément pour décrire les
données dans le détail pour effectuer le rendu.
3. est une déclaration placée au tout début de chaque page Web.
4. Un élément ou un attribut a été supprimé de la liste d'éléments
HTML disponibles selon l'organisme W3C.
50 | Leçon 2
5. Une image est composée de pixels, tandis qu'une image

est formée de lignes et de courbes basées sur des expressions
mathématiques.
6. Nouveau dans HTML5, l'élément spécifie le type de figure à ajouter
tel qu'une image, un diagramme, une photographie, etc.
7. L'élément permet d'ajouter une légende à une image sur une page
Web, avec la possibilité de placer la légende avant ou après l'image.
8. Avec l'élément , la page Web devient un bloc de dessin, tandis que
les commandes JavaScript permettent de tracer des formes composées de pixels dans la
zone de dessin, avec notamment des couleurs, des dégradés et des motifs de remplissage.
9. est un langage permettant de décrire des graphiques 2D en XML
(eXtensible Markup Language).
10. Les éléments HTML5 et permettent de proposer
du contenu multimédia dans un navigateur Web sans qu'aucun plug-in ne soit nécessaire.
Questions à choix multiples

Entourez la lettre correspondant à la meilleure réponse.
1. Parmi les balises suivantes, lesquelles sont obligatoires sur chaque page Web ?
(Choisissez toutes les réponses applicables.)
a. <html>
b. <head>
c. <title>
d. <body>
2. Parmi les syntaxes suivantes, laquelle permet de créer un lien hypertexte en HTML ?
a. <link href="http://www.example.com">link</a>
b. <a href="http://www.example.com"> link text</a>
c. <link>http://www.exemple.com</link >
d. <http://www.example.com>
3. Quel élément HTML5 définit un bouton de commande sur lequel les utilisateurs
peuvent cliquer pour appeler une commande ?
a. <objectbut>
b. <combutton>
c. <command>
d. <cbutton>
4. Quel élément HTML5 permet de surligner des blocs de texte dans un
document HTML ?
a. <mark>
b. <highlight>
c. <emphasis>
d. <yellow>
5. Parmi les balises suivantes, lesquelles sont obsolètes dans HTML5 ? (Choisissez
toutes les réponses applicables.)
a. <big>
b. <center>
c. <font>
d. <time>
6. Quelle balise est utilisée avec la balise <figure> pour afficher une image ?
a. <img>
b. <src>
c. <fig>
d. <a>
7. Parmi les propositions suivantes, laquelle est nécessaire pour canvas et SVG ?
a. Microsoft Silverlight
b. Un programme de dessin externe, tel que Microsoft Paint
c. Un important espace de stockage ou bande passante
d. JavaScript
8. Pour savoir si vous devez utiliser l'élément canvas ou SVG, parmi les affirmations
suivantes, laquelle est vraie ?
a. Si le dessin est assez petit, utilisez SVG.
b. En règle générale, utilisez canvas pour les petits écrans et SVG pour les écrans
plus grands.
c. Si le dessin contient un nombre important d'objets, utilisez SVG.
d. Si vous devez créer des documents vectoriels très détaillés dont la mise à l'échelle
est importante, optez pour canvas.
9. Parmi les formats suivants, lequel est le format général de l'élément video ?
a. <movie src="file.mp4" width="X" height="Y">
b. <movie href="file.mp4" width="X" height="Y">
c. <video src="file.mp4" width="X" height="Y">
d. <video href="file.mp4" width="X" height="Y">
10. Parmi les formats suivants, lequel est le format général de l'élément audio ?
a. <audio src="sample.mp3" controls="controls">
b. <audio href="sample.mp3" controls>
c. <sound src="sample.mp3" controls>
d. <sound href="sample.mp3" controls="controls">
Vrai/Faux
Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1.
L'élément canvas nécessite JavaScript pour créer des formes.
V F 2. La création d'un objet SVG dans HTML5 ne nécessite pas JavaScript.
V F 3. L'élément audio peut fournir des contrôles de lecture avec un seul attribut.
V F 4. Les éléments obsolètes ne peuvent pas être restitués dans un navigateur prenant
en charge la norme HTML5.
V F 5. Le format de fichier audio le plus répandu est MP4.

Scénario 2-1 : Correction d'erreurs de balisage simples
Géraldine, l'assistante de direction, apprend le langage HTML. Son balisage, illustré
ci-dessous, ne produit pas le rendu attendu. Le caractère gras ne s'arrête pas après
« jeudi ». Le logo de la société ne s'affiche pas, même si le fichier est enregistré dans le
sous-dossier d'images avec toutes les autres images. Le texte de remplacement ne s'affiche
pas non plus lorsqu'elle passe le pointeur de la souris au-dessus de l'emplacement réservé
à l'image. Que pouvez-vous lui dire ?
<!doctype html>
<html>
<head>
<title>Interne</title>
</head>
52 | Leçon 2
<body>
<h1>Réunion du personnel</h1>
<img src="cologo.jpg" olt="Logo d'entreprise" />
<p>Se réunir dans la <strong>Salle de conférence bleue</strong> a <strong>10 h</strong> ce
<strong>jeudi<strong> pour une réunion urgente du personnel.</p>
</body>
</html>
Scénario 2-2 : Utilisation de symboles

Petra met en forme certains documents comptables qui seront hébergés sur le site intranet
de la société. Elle explique que le signe dollar et le symbole du pourcentage s'affichent
correctement dans un navigateur, mais que des caractères incompréhensibles s'affichent
lorsqu'elle utilise un autre navigateur. Que doit-elle faire ?
■ Évaluation de la maîtrise des concepts

Scénario 2-3 : Canvas ou SVG ?
M.A. est une artiste graphique chez ClickTick Watches, un fabricant de montres-bracelets
de luxe. On lui demande de revisiter le logo de la société et d'en créer un à l'aide d'un
outil qui permet d'utiliser une taille adaptée selon que le support est un ordinateur portable
ou un smartphone. Elle doit également créer des graphiques interactifs pour les
commerciaux qui les utiliseront sur leurs tablettes. Elle souhaite mettre à jour ses
compétences en approfondissant ses connaissances sur les technologies HTML5, mais ne
sait pas si elle doit se concentrer sur l'élément canvas ou SVG pour ses projets. Que lui
suggérez-vous ?
Scénario 2-4 : Sélection de formats vidéo et de codecs appropriés pour le Web

Sammy est chargé d'organiser des réunions pour les employés de la société Clear Blue
Resorts. Il souhaite poster une vidéo du président-directeur général, qui se trouve
actuellement en déplacement à l'étranger pour évaluer des sites potentiels pour accueillir
de nouveaux centres de villégiature, sur le site intranet à l'occasion de la fête à venir en
l'honneur des employés. Il sait que Clear Blue utilise Internet Explorer 9, et il a entendu
dire qu'il pourra facilement afficher la vidéo dans HTML5, mais il ne sait pas par où
commencer. Que conseillez-vous à Sammy ?

Initiation html5 Css3partie1 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Initiation html5 Css3partie1 PDF

Загружено:

Авторское право:

Доступные форматы

Notions

Official Academic Course

MTA Examen 98-375

Notions fondamentales sur

Imprimé aux États-Unis d'Amérique

■ Programme Microsoft Official Academic Course

Création de l'interface LEÇON 3

Gestion du cycle de vie d’une application | 9

Gestion du cycle de vie d’une application | 11

Stockage des données d'état à l'aide du stockage local et de session

Ce bloc de navigation permettra de relier les sections Symphonies et Raves dans le

Exercices étape par étape

■ Comprendre les principes fondamentaux du langage HTML

Balisage et structure de page de base

Utilisation des balises pour structurer un document HTML

Parmi les nouveaux éléments de HTML5 en termes de structuration et d'organisation du

RÉSUMÉ DES COMPÉTENCES Matrice Résumé des

■ Évaluation des connaissances

■ Évaluation des compétences

■ Évaluation des connaissances

DREAMSPARK PREMIUM – ABONNEMENT DE 3 ANS

■ Adresses Web et numéros de téléphone importants

Wiley Desktop Editions

■À propos de la certification Microsoft Technology

Profil des candidats à la certification MTA

Fourniture des examens MTA : la licence Campus MTA

Avec la licence Campus MTA, mettre en œuvre un nouveau programme de certification

Certains liens présents dans ce cours renvoient à des pages en anglais.

■Activez votre test pratique GRATUIT pour la

Numéro gratuit de MOAC : 1 + (888) 764-7001 (États-Unis et Canada uniquement).

■ MOAC MTA - Réviseurs des notions technologiques fondamentales

Leçon 1 : Gestion du cycle de vie d'une application 1

listes 64 avec CSS 111

Matrice d'objectifs d'examen 215 Annexe 268

Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif

■ Présentation des principes fondamentaux de la plateforme

Quelles sont les nouveautés de HTML5 ?

La famille de HTML5 comprend de nombreuses nouvelles balises de marquage

Voici une courte liste de ces nouvelles fonctionnalités et de brèves descriptions :

EXPLOREZ LA NORME HTML5

EXPLOREZ LES RESSOURCES DE DÉVELOPPEMENT D'APPLICATIONS

PRÉPARATION POUR LE DÉVELOPPEMENT D'APPLICATIONS

3. Assurez-vous que la dernière version du navigateur est installée.

Exploration de l'empaquetage et de l'environnement d'exécution

L'environnement d'exécution de Windows sert de base au système d'exploitation

Lorsqu'une application est lancée, on considère qu'elle se trouve dans un environnement

PRÉSENTATION DU PROCESSUS HÔTE

PRÉSENTATION DU PACKAGE D'APPLICATION ET DU CONTENEUR D'APPLICATIONS

EXPLORATION D’EXEMPLES D'APPLICATIONS

5. Cliquez sur le lien Parcourir le code, sur My_Ad_Funded_Windows8_JS_App dans le

Présentation des jeux d'informations d'identification et d'autorisations

Le .NET Framework fournit un environnement sûr dans lequel les applications

■ Présentation et gestion des états de l'application

Stockage des données d'état à l'aide du stockage local et de session

APPCACHE POUR LES FICHIERS HORS CONNEXION

■ Présentation des interfaces tactiles et des mouvements

• Possibilité de désactiver le défilement et le mouvement panoramique

EN SAVOIR PLUS SUR LES MOUVEMENTS ET LES APPLICATIONS TACTILES

Utilisation des compétences et du contenu HTML5 existants pour les

Le développement d'applications tactiles Windows Store est très flexible, car il ne

■ Débogage et test des applications HTML5

Le débogage d'une application implique la détection, la recherche et la correction des

PRÊT POUR LA CERTIFICATION

Leçon 1 : Gestion du cycle de vie d'une application 1