53 LEÇON Création de l'interface utilisateur avec HTML5 : Organisation, saisie
53 LEÇON Création de l'interface utilisateur avec HTML5 : Organisation, saisie et validations T E R M E S C L É S attribut autofocus attribut email attribut global attribut pattern attribut required balisage sémantique élément article élément aside élément datalist élément footer élément header élément menu élément nav élément section entrée de formulaire formulaire Web liste non triée liste triée tableau texte de l’espace réservé validation validation automatique validation côté client validation côté serveur MATRICE D'OBJECTIFS D'EXAMEN Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif de l'examen MTA Sélection et configuration HTML5 pour organiser le 2.4 des “balises HTML5 pour contenu et les formulaires organiser le contenu et les formulaires Sélection et configuration Choisir et configurer les balises 2.5 des balises HTML5 pour la HTML5 pour les entrées et la saisie et la validation validation L'une de vos nouvelles tâches en tant que stagiaire chez Media Malted Milk consiste à créer un formulaire Web qui restreint ce qu'un utilisateur peut entrer dans les champs d'un formulaire et qui valide les entrées. Pour vous préparer à créer le formulaire Web, vous devez tout d'abord apprendre la meilleure façon d'organiser ou de structurer le balisage à l'aide des nouveaux éléments HTML5. 3 54 | Leçon 3 PRÊT POUR LA CERTIFICATION Qu'est-ce que le balisage sémantique ? 2.4 ■ Sélection et configuration des balises HTML5 pour organiser le contenu et les formulaires Le balisage HTML5 introduit plusieurs nouvelles balises pour organiser la structure des documents HTML, ce qui facilite la création et la modification des documents. Les nouvelles balises ont des noms plus intuitifs que des constructions similaires dans les spécifications HTML précédentes. Les balises sont nommées de manière plus appropriée à la partie de la page à laquelle elles s'appliquent, comme <header>, <section> et <footer>. HTML5 a également rationalisé la création de tableaux, en déplaçant de nombreux attributs qui ont une influence sur la largeur de marge intérieure et l'alignement vertical et horizontal dans le fichier CSS. Le balisage sémantique utilise des noms de balises intuitifs, ce qui facilite la génération et la modification des documents HTML et l'interprétation par les navigateurs Web et les autres programmes. Une des nouveautés très pratiques du HTML5 est l'utilisation du balisage sémantique, qui donne une meilleure signification ou définition à plusieurs balises afin qu'elles aient plus de sens pour les utilisateurs, les programmes et les navigateurs Web. Comme indiqué dans la leçon 2, toutes les balises HTML n'ont pas été remplacées ou mises à jour pour HTML5, mais parmi les nouvelles qui ont été introduites, certaines rendent le travail de création de pages Web beaucoup plus facile. Dans HTML 4.01 et les versions précédentes, un développeur qui crée la structure d'un document HTML utilise fréquemment la balise <div> partout. La balise <div> comprend souvent une classe ou un attribut d'ID, qui peut également inclure des styles CSS tels quebackground-color, height et width. Voici un exemple simple d'une balise <div> : <div id="header" > Il s'agit d'un en-tête </div> HTML5 introduit plusieurs nouveaux éléments pour organiser le contenu et les formes. Ils représentent le nouveau balisage sémantique qui est une partie importante du HTML5. L'ESSENTIEL Les attributs class et id sont des attributs globaux, ce qui signifie qu'ils peuvent être utilisés avec n'importe quel élément HTML. Vous pouvez voir la liste complète des attributs HTML globaux sur http://dev.w3.org/html5/markup/global-attributes.html. REMARQUE* L'élément div seul n'a pas beaucoup de sens sans l'attribut id ou class. Il est aussi possible d'attribuer la valeur de votre choix à l'ID, comme "header", "header_inner", "slogan", "content", "style", etc. Voici un exemple d'un document HTML 4.01 : <div id="header"> <div id="header_inner"> <img src="images/doghappy.jpg" alt="Attaboy Pet Services" /> <div id="slogan">Un chien heureux est un bon chien</div> </div> </div> HTML5 utilise des balises simples pour remplacer un grand nombre de balises div, dont certaines sont indiquées dans la figure 3-1. Présentation de la sémantique HTML Création de l’interface utilisateur avec HTML5 : Organisation, saisie et validations | 55 Notez que le balisage sémantique de HTML5 donne un sens plus spécifique aux parties d'un document HTML, en rendant la structure plus facile à comprendre. PRÊT POUR LA CERTIFICATION Quelles sont les balises HTML5 utilisées pour structurer et organiser un document ? 2.4 Tableau 3-1 Nouvelles balises HTML5 pour l'organisation du contenu et la création de structure Balise Description <address> Définit une zone pour obtenir les coordonnées d'une page ou d'une section <article> Définit un article, comme un article de magazine ou de journal, un billet de blog ou un contenu similaire <aside> Définit le contenu qui est distinct mais quand même associé au contenu de la page. Semblable à une barre latérale dans les chapitres de livres et les articles de magazine <details> Contient des détails supplémentaires relatifs au texte autour. Crée un widget interactif qu'un utilisateur peut afficher ou masquer <footer> Définit un pied de page d'un document ou d'une section. Peut inclure l'auteur du document, les coordonnées, les informations de copyright et les liens renvoyant aux modalités d’utilisation <header> Définit un en-tête de document ou de section. Peut contenir des liens de navigation ou des informations préliminaires <hgroup> Regroupe les titres et les sous-titres (à l'aide des balises <h1> à <h6>) pour des titres sur plusieurs niveaux <nav> Définit un bloc de liens de navigation <section> Définit une section d'un document, comme des chapitres, des parties d'une thèse ou d'une page Web dont le contenu est distinct <summary> Définit un titre visible pour un élément details. L'utilisateur peut cliquer pour afficher ou masquer les informations <wbr> Définit un saut de ligne éventuel. Lorsqu'un mot est très long ou que vous craignez que le navigateur ne coupe une ligne au mauvais endroit, vous pouvez utiliser l'élément <wbr> pour couper le mot ou la ligne correctement Figure 3-1 Comparaison des parties de document balisées en HTML 4.01 et HTML5 Parmi les nouveaux éléments de HTML5 en termes de structuration et d'organisation du contenu dans un document HTML, on trouve header, footer, section, nav, article et aside. Utilisation des balises pour structurer un document HTML Maintenant que vous comprenez le balisage sémantique, nous allons étudier plusieurs des nouveaux éléments HTML5 pour l'organisation des documents. Le tableau 3-1 liste et décrit les nouvelles balises liées à la structure HTML5. 56 | Leçon 3 Nous allons examiner plus attentivement les balises HTML5 de la figure 3-1. Il s'agit des balises les plus courantes liées à la structure HTML5. ÉLÉMENTS HEADER ET FOOTER L'élément header définit l'en-tête d'un document, d'une section ou d'un article. Dans HTML 4.01, vous devez utiliser l'en-tête div, tel que mentionné dans la section précédente (<div id="header">). L'élément footer définit un pied de page dans un document ou une section, et contient généralement des informations sur le document ou la section, par exemple le nom de l'auteur, les données de Copyright, des liens renvoyant à des documents connexes, etc. L'élément footer ne s'affiche pas automatiquement en bas du document ; vous devez utiliser CSS pour indiquer au navigateur l'emplacement où doit s'afficher le pied de page. Les pieds de page qui apparaissent au bas de chaque page Web ou document sont connus sous le nom de « sticky footers ». Voici un exemple d'un article avec une balise header tag et une balise footer : <article> <header> <h1>Apprentissage d'HTML5</h1> <h2>Les nouveaux éléments</h2> </header> <p>Les nouvelles balises HTML5 rendent le développement de page Web et d'application plus facile que jamais.</p> <footer> <p>Publié le : <time datetime="2012-09- 03"3 septembre 2012</time></p> </footer> </article> Comme avec l'élément div, vous pouvez utiliser les éléments header et footer à plusieurs reprises dans un document HTML document, comme illustré dans la figure 3-2. Figure 3-2 Plusieurs instances de l'élément header Comme vous avez l'appris dans la leçon 1, la norme HTML5 ne sera pas finalisée avant plusieurs années, ce qui signifie que des modifications seront toujours apportées aux spécifications. Les principaux navigateurs Web, comme Microsoft Internet Explorer et Mozilla Firefox, prennent en charge de nombreux éléments HTML5, mais pas tous. Le site Web « Can I use » http://caniuse.com/ est une excellente source pour déterminer quels navigateurs prennent en charge des fonctionnalités HTML5 spécifiques. Ce site Web est mis à jour régulièrement, il devrait donc faire une partie de vos ressources HTML5 essentielles. En outre, vous pouvez tester la prise en charge du HTML5 par n'importe quel navigateur en accédant au site Web de test HTML5 sur http://html5test.com. REMARQUE* Création de l’interface utilisateur avec HTML5 : Organisation, saisie et validations | 57 L'ÉLÉMENT SECTION L'élément section définit une section d'un document, tel qu'un chapitre, des parties d'une thèse ou d'une page Web dont le contenu est distinct. WC3 spécifie l'utilisation de l'élément section pour le différencier des autres éléments de structure. Il doit notamment contenir au moins un titre et définir quelque chose qui doit normalement apparaître dans le plan du document. Par exemple, vous devez utiliser l'élément section pour répartir les différentes parties d'un site Web d'une page ou pour créer un portefeuille d'images. Voici un exemple d'une section simple : <section> <h1>Huit uploads/s1/ initiation-html5-css3partie2.pdf
Documents similaires
-
19
-
0
-
0
Licence et utilisation
Gratuit pour un usage personnel Attribution requise- Détails
- Publié le Nov 30, 2022
- Catégorie Administration
- Langue French
- Taille du fichier 2.7331MB