Création de l'interface LEÇON 3 utilisateur avec HTML5 ...€¦ · des balises HTML5 pour la...

53

LEÇONCréation de l'interface utilisateur avec HTML5 : Organisation, saisie et validations

T E R M E S C L É S

attribut autofocus

attribut email

attribut global

attribut pattern

attribut required

balisage sémantique

élément article

élément aside

élément datalist

élément footer

élément header

élément menu

élément nav

élément section

entrée de formulaire

formulaire Web

liste non triée

liste triée

tableau

texte de l’espace réservé

validation

validation automatique

validation côté client

validation côté serveur

M AT R I C E D ' O B J E C T I F S D ' E X A M E N

Compétences/Concepts Objectifdel'examenMTA Numérodel'objectif del'examenMTA

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 CERTIFICATIONQu'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 CERTIFICATIONQuelles 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 FOOTERL'é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*


L'ÉLÉMENT SECTIONL'é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 temps</h1> <p>Les professeurs de Hip-hop enseignent souvent des mouvements en huit temps.</p></section>

Le tableau 3-2 énumère les situations dans lesquelles vous devez éviter d'utiliser l'élément section et fournit la meilleure technique.

PRÊT POUR LA CERTIFICATIONQuand dois-je utiliser la balise <section> par rapport à un autre type d'élément ?2.4

Tableau 3-2

Situations dans lesquelles vous ne devez pas utiliser l'élément section

Situation Utilisation

Contenu distinct qui est indépendant du reste du contenu de article la page Web ou d'un document

Prévoit de syndiquer un bloc de contenu article

Crée une barre latérale aside

Enveloppe et positionne plusieurs sections qui ne sont pas div liées entre elles

Ajoute une ombre portée à un élément ou une bordure autour div

Il peut parfois être difficile de savoir quand utiliser la balise <section> plutôt qu'un autre élément. Lorsque vous travaillez sur un document HTML et que vous ne savez pas quel élément utiliser, parcourez la spécification W3C HTML5 ou le Web pour voir comment les autres développeurs ont géré une situation similaire.Lors de la définition d'un en-tête de section, qui peut contenir des titres de h1 à h6, vous pouvez utiliser l'élément hgroup pour regrouper les titres. L'élément hgroup affecte l'organisation, mais pas la présentation. Pensez à utiliser hgroup lorsque vous avez un titre et un sous-titre l'un après l'autre, comme suit.

<section> <hgroup> <h1>Pas de danse Hip-Hop</h1> <h3>La méthode en huit temps</h3> </hgroup> <article> <p>Les professeurs de Hip-hop enseignent souvent des mouvements en huit temps.</p> </article></section>

Ce balisage apparaît dans une page Web, comme illustré dans la figure 3-3.

Les nouvelles balises liées à la structure HTML5 ne remplacent pas complètement les balises <div>, mais les balises HTML5 réduisent considérablement le nombre de balises <div> nécessaires dans un document HTML.

REMARQUE*

58 | Leçon 3

CRÉERUNDOCUMENTHTMLAVECEN-TÊTE,DESSECTIONSETUNPIEDDEPAGE

PRÉPAREZ-VOUS. Pour créer un document HTML à l'aide des éléments HTML5 header, section et footer, procédez comme suit :

1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un navigateur Web, créez un document HTML simple qui incorpore les balises <header>, <section> et <footer>. Intégrez deux sections et n'oubliez pas d'inclure au moins un élément h1 au sein des sections. Vous pouvez inclure des images si vous le souhaitez. Le balisage peut ressembler à ce qui suit :

<!doctype html><html><head> <meta charset="utf-8" /> <title>Ma page</title></head><body><header> <h1>Sélection d'un style de concert</h1></header><section> <h1>Symphonies</h1> <p>Une symphonie est un type de composition musicale généralement jouée par un orchestre complet.</p></section><section> <h1>Raves</h1> <p>Une rave est un rassemblement de personnes qui dansent en écoutant de la musique, surtout de la musique électronique, généralement interprétée par un groupe ou des DJ en direct.</p></section><footer> <p>Auteur :Nathaniel Becker</p></footer></body></html>

N'oubliez pas, vous pouvez utiliser plusieurs outils pour créer des documents HTML. Pour le PC, pensez aux éditeurs de texte Notepad ou Notepad ++, aux éditeurs HTML-Kit ou KompoZer HTML ou aux outils de développement Microsoft Visual Studio, Visual Studio for Web ou Microsoft Expression Web.

REMARQUE*

Figure 3-3

Utilisation de hgroup pour regrouper des titres dans un document HTML


Ce balisage s'affiche dans une page Web, comme illustré dans la figure 3-4.

2. Enregistrez le fichier sous le nom L3-mapage.html. 3. Validez le document en utilisant le service de validation du balisage W3C à l'adresse

http://validator.w3.org. Si vous avez besoin d'aide, reportez-vous à la leçon 2. 4. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez à l'exercice suivant

au cours de cette session.

L'ÉLÉMENT NAVL'élément nav définit un bloc de liens de navigation. L'élément nav est utile pour créer un ensemble de liens de navigation pour la navigation principale de votre document, une table des matières, un fil d'Ariane dans un pied de page ou des liens Précédent-Accueil-Suivant.Le W3C mentionne qu'il ne faut pas utiliser les balises <nav> pour tous les liens de naviga-tion, simplement pour les principaux blocs de liens. Comme les balises <nav> sont inter-prétées par le logiciel de lecteur d'écran pour déficients visuels, ce logiciel peut déterminer s'il doit autoriser ou non les liens de navigation à l'utilisateur selon leur importance.L'exemple suivant montre l'utilisation de la balise <nav> :

<nav> <a href="/hiphop/">Hip-Hop</a> <a href="/modern/">Danse moderne</a> <a href="/swing/">Swing</a> <a href="/tap/">Claquettes</a></nav>

Les liens seraient affichés dans une page Web, comme illustré dans la figure 3-5.

Figure 3-4

Document HTML avec un en-tête, un pied de page et une section

En-tête

Sec�ons

Pied de page

Figure 3-5

Liens simples utilisant l'élément nav

60 | Leçon 3

Voici un exemple de balisage pour les liens Précédent-Accueil-Suivant, avec des barres verticales après chaque élément de navigation pour le séparer des autres visuellement :

<nav> <a href="http://www.example.com/Services">Précédent</a> | <a href="http://www.example.com">Accueil</a> | <a href="http://www.example.com/About">Suivant</a></nav><br />

Les liens s'afficheraient dans une page Web, comme illustré dans la figure 3-6.La navigation est souvent affichée dans une liste verticale. Vous allez apprendre à le faire plus tard dans cette leçon.

AJOUTER L'ÉLÉMENT NAV À UN DOCUMENT HTML

PRÉPAREZ-VOUS. Pour ajouter l'élément nav dans un document HTML, procédez comme suit : 1. Dans votre éditeur HTML ou à l'aide d'un outil de développement d'application,

ouvrez le fichier L3-MyPage.html (s'il n'est pas déjà ouvert) et enregistrez-le sous le nom L3-MyPage-nav.html pour créer un nouveau fichier.

2. Placez les balisesnav suivantes et leur contenu dans la balise <header> :

<header> <h1>Sélection d'un style de concert</h1> <nav> <a href="#symphonies">Symphonies</a> | <a href="#raves">Raves</a> </nav></header>

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

3. Pour que ces liens fonctionnent, modifiez les titres Symphonies et Raves <h1> comme suit :

<h1><a id="symphonies">Symphonies</a></h1><h1><a id="raves">Raves</a></h1>

Figure 3-6

Navigation Précédent-Accueil-Suivant avec des barres verticales qui séparent chaque lien


5. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez à l'exercice suivant au cours de cette session.

L'ÉLÉMENT ARTICLEL'élément article définit une partie d'un document HTML représentant une « composition autonome » indépendante du reste du contenu dans un document. Le contenu déclenché par les balises <article> peut être distribué par flux de syndication. Cela équivaut à un contenu qui se suffit à lui-même. (La syndication Web consiste à rendre le contenu d'un site Web disponible à de nombreux sites Web.).

Figure 3-7

Page avec des liens de navi-gation nouvellement ajoutés

Liens de naviga�on

Parmi les exemples de contenu qui conviennent pour le marquage avec <article> on peut trouver un article de magazine, une entrée de blog ou le contenu d'un flux RSS. Vous pouvez également utiliser l'élément article pour le contenu des sections À propos de et Contact, qui sont indépendantes du reste de la page sur laquelle elles se trouvent mais ne vont pas nécessairement être syndiquées.

L'ÉLÉMENT ASIDEL'élément aside sert à afficher le contenu lié au sujet actuel, mais qui est susceptible d'interrompre le flux du document s'il demeure au sein du texte. L'élément aside est essentiellement utilisé pour les informations qui se trouvent dans les barres latérales et les notes. Ce type de contenu peut donner un aperçu plus détaillé d'un sujet, proposer des liens de lecture connexes ou afficher des définitions de mots clés dans le paragraphe. L'élément aside ne change pas la position du contenu, ni la manière dont il s'affiche. Il indique simplement au navigateur et aux moteurs de recherche qu'il s'agit d'un contenu associé.

W3C encourage l'utilisation de l'élément article plutôt que l'élément section pour tout contenu qui pourrait être syndiquéREMARQUE*

4. Ré-enregistrez le fichier sous le nom L3-MyPage-nav.html, puis ouvrez-le dans un navigateur Web. Les liens de navigation s'afficheraient dans une page Web, comme illustré dans la figure 3-7.

62 | Leçon 3

<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. Parmi les nouvelles fonctionnalités très pratiques de HTML5 on trouve l'utilisation du balisage sémantique.</p> <aside> <h4><b>Le balisage sémantique</b></h4> <p> permet de mieux définir les balises afin de leur donner plus de sens pour les utilisateurs, les programmes et les navigateurs Web</p> </aside> <p>Toutes les balises HTML n'ont pas été remplacées ou mises à jour pour HTML5, mais certaines nouvelles balises introduites dans HTML5 rendent le travail de création de pages Web beaucoup plus facile.</p><footer> <p>Publié le : <time datetime="2012-09- 03">3 septembre 2012</time></p> </footer></article>

Le balisage apparaît dans une page Web, comme illustré dans la figure 3-8.

Comme vous pouvez le voir dans la figure 3-8, le contenu situé sur le côté ne se démarque pas vraiment du reste du contenu. Vous pouvez ajouter la balise de la règle horizontale <hr /> avant et après le contenu de la parenthèse, qui apparaîtrait dans un navigateur Web, comme illustré dans la figure 3-9.

Figure 3-8

Exemple d'un élément aside

De côté


Vous pouvez également utiliser CSS pour ajuster les marges du contenu situé sur le côté, afin qu'elles soient en retrait à gauche et à droite. Dans les prochaines leçons, vous apprendrez les techniques de mise en page CSS pour afficher un contenu similaire dans une zone le long du côté gauche ou droit du corps de texte correspondant.

AJOUTER L'ÉLÉMENT ASIDE À UN DOCUMENT HTML

PRÉPAREZ-VOUS. Pour ajouter l'élément aside à un document HTML, procédez comme suit : 1. Dans votre éditeur HTML ou à l'aide d'un outil de développement d'application,

ouvrez le fichier L3-MyPage-nav.html (s'il n'est pas déjà ouvert) et enregistrez-le sous le nom L3-MyPage-art-aside.html pour créer un nouveau fichier.

2. Placez un élément aside juste avant le pied de page, comme suit :

<aside> <hr /> <p>Remarque : La Drug Enforcement Administration des États-Unis s'intéresse également aux raves. Allez sur http://www.justice.gov/dea/ ongoing/raves.html pour en savoir plus.</p></aside>

3. Ré-enregistrez le fichier sous le nom L3-MyPage-art-aside.html et affichez-le dans un navigateur Web. La page doit ressembler à la figure 3-10.

4. Validez le document en utilisant le service de validation du balisage W3C à l'adresse http://validator.w3.org.

5. Fermez le fichier et laissez ensuite l'outil d'édition et le navigateur Web ouverts si vous passez à l'exercice suivant au cours de cette session.

✚ PLUS D’INFORMATIONS

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.

Figure 3-9

Utilisation de la balise <hr /> pour ajouter des règles horizontales pour afficher le contenu situé sur le côté

64 | Leçon 3

Utilisation de balises pour créer des tableaux et des listes

Les tableaux et les listes permettent de structurer des informations spécifiques dans les documents HTML. Un tableau contient des lignes et des colonnes et affiche les données dans une grille. En HTML, vous pouvez créer des listes triées et non triées. Chaque élément d'une liste triée est marqué par un nombre ou une lettre. Une liste non triée est une liste à puces.

Cette section explique en détail comment créer des tableaux et des listes à l'aide d'éléments HTML. HTML5 introduit quelques nouveaux éléments pour les tableaux et les listes, mais la plupart des balises et des concepts sont les mêmes que les spécifications antérieures. Si vous avez déjà créé un tableau ou une liste HTML, vous devriez être capable de survoler cette section sans problème.

CRÉATION DE TABLEAUXUn tableau HTML contient des lignes et des colonnes et sert à organiser et à afficher les informations sous forme de grille. Certains développeurs utilisent des tableaux à des fins de mise en page, pour positionner ou aligner le contenu avec des images par exemple, mais ce n'est pas la meilleure utilisation des tables.Au sujet du balisage, chaque tableau HTML commence par la balise <table>. Les lignes sont marquées par la balise <tr>, les en-têtes de colonne utilisent la balise <th> et les cellules sont définies par la balise <td>.Le balisage pour un tableau très basique de deux colonnes et cinq lignes est la suivante. La figure 3-11 montre des commentaires qui ont été ajoutés pour indiquer des colonnes et des lignes qui sont à titre d'informations uniquement et qui n'apparaissent pas lorsque le document est affiché dans un navigateur :

<table border="1"> <tr>  <th>Trimestre</th>  <th>Ventes totales</th>  </tr>

PRÊT POUR LA CERTIFICATIONComment créer un tableau ?2.4

Figure 3-10

Document HTML qui inclut des éléments article et aside

De côté

Si vous créez un tableau simple, vous pouvez utiliser la balise <caption> pour ajouter une légende au-dessus ou au-dessous de ce tableau. Pour appliquer des styles intralignes avec HTML, plutôt que CSS, les développeurs utilisent la balise <col> pour appliquer les styles à une colonne entière. (Vous découvrirez bientôt la mise en forme en ligne.) La balise <colgroup> regroupe les colonnes dans un tableau pour vous permettre d'appliquer une mise en forme au groupe, plutôt qu'à une colonne seulement.Lorsque vous créez un long tableau qui nécessite un défilement dans un navigateur, utilisez les balises <thead>, <tfoot> et <tbody>. Le contenu à l’intérieur de l'en-tête et le pied de page reste sur la page tandis que le contenu balisé avec <tbody> défilera entre les deux. La balise <thead> crée des en-têtes de colonnes (en caractères gras par défaut) et la balise <tfoot> est utilisée pour afficher la dernière ligne, par exemple une ligne des totaux. La balise <tbody> définit tout le contenu entre l'en-tête et le pied de page.Voici un exemple de balise pour un tableau avec trois colonnes et cinq lignes, la première ligne étant l'en-tête de colonne et la dernière ligne, le pied du tableau. Le balisage inclut également une légende au-dessus du tableau. Le rendu du balisage est illustré par un navigateur dans la figure 3-12 :

<table> <caption>Ventes pour l'ID d'employé 2387</caption>

<colgroup span="2" style="background-color:#EEE8AA;"> </colgroup>

Vous devez inclure les éléments thead et tfoot avant l'élément tbody afin que le navigateur puisse afficher l'en-tête et le pied du tableau avant de recevoir toutes les lignes de données.

REMARQUE*

Figure 3-11

Une tableau simple

<tr>  <td>T1</td> <td>4 349 $</td> </tr> <tr>  <td>T2</td> <td>2 984 $</td> </tr> <tr>  <td>T3</td> <td>3 570 $</td> </tr> <tr>  <td>T4</td> <td>7 215 $</td> </tr></table>

66 | Leçon 3

<colgroup style="background-color:#00FA9A;"> </colgroup> <thead> <tr> <th scope="col">Trimestre</th> <th scope="col">Ventes totales</th> <th scope="col">Objectif atteint ?</th> </tr> </thead><tfoot> <tr> <th scope="col">Total</th> <th scope="col">18 118 $</th> </tr></tfoot> <tbody> <tr> <td>T1</td> <td>4 349 $</td> <td>Oui</td> </tr> <tr> <td>T2</td> <td>2 984 $</td> <td>Non</td> </tr> <tr> <td>T3</td> <td>3 570 $</td> <td>Oui</td>

Figure 3-12

Version plus avancée d'un tableau simple


</tr> <tr> <td>T4</td> <td>7 215 $</td> <td>Oui</td> </tr> </tbody>

Notez l'utilisation de la couleur d'arrière-plan pour les colonnes groupées dans l'exemple précédent. Il s'agit d'un exemple de mise en forme en ligne. L'attribut style utilise une ou plusieurs des propriétés et des valeurs CSS, séparées par des points-virgules. Pour la cou-leur HTML, vous pouvez utiliser le nom de la couleur ou le code hexadécimal. Le code hexadécimal #EEE8AA correspond à un jaune doré clair. Le code hexadécimal #00FA9A produit la couleur vert printanier. Un nuancier de couleurs standard HTML est disponible sur http://www.w3schools.com/html/html_colornames.asp.Vous pouvez aussi centrer le contenu dans une cellule, une colonne ou un groupe de colonnes à l'aide de style="text-align:center". Pour enchaîner plusieurs propriétés et valeurs dans le même attribut de style, utilisez une syntaxe similaire à style="color:blue;text-align:center". Les leçons 4 à 6 de cet ouvrage présentent CSS et ses nombreuses propriétés.Le tableau 3-3 résume les éléments communs utilisés pour générer des tableaux en HTML5.

Tableau 3-3

Éléments courants utilisés pour construire des tableaux

élément Description

col Définit une colonne de tableau

colgroup Définit un groupe de colonnes dans un tableau

caption Marque le texte comme une légende de tableau

table Définit un tableau

tbody Définit un groupe de lignes dans un tableau à des fins de mise en forme et de défilement

td Définit une cellule de tableau

tfoot Définit un groupe de lignes de pied de page dans un tableau à des fins de mise en forme et de défilement

th Définit une cellule d'en-tête de tableau

thead Définit un groupe de lignes d'en-tête dans un tableau à des fins de mise en forme et de défilement

tr Définit une ligne de tableau

Si vous avez créé des tableaux à l'aide de HTML 4 ou d'une version précédente, vous devez connaître les éléments cellpadding, cellspacing, frame, rules, summary et/ou width. Ils sont déconseillés et non pris en charge dans HTML5.

REMARQUE*

68 | Leçon 3

CRÉER UN TABLEAU

PRÉPAREZ-VOUS. Pour créer un tableau, effectuez les opérations suivantes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un

navigateur Web, créez un fichier nommé L3-PracTable.html avec le balisage suivant :

<!doctype html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>Films en haut du box-office</title></head><body><table border="1"> <tr> <th>Film</th> <th>Produit total brut</th> </tr> <tr> <td>Avatar</td> <td>2,7 milliards de dollars</td> </tr> <tr> <td>Titanic</td> <td>2,1 milliards de dollars</td> </tr> <tr> <td>The Dark Knight</td> <td>1 milliard de dollars</td> </tr></table></body></html>

2. Mettez en italique le titre de chaque film à l'aide des balises <i>.

3. Modifiez le tableau et ajoutez une légende au-dessus disant « Films en haut du box-office » et un pied de page contenant les mots « Total » et « 5,8 milliards de dollars ».

4. Remplacez l'arrière-plan du tableau, des en-têtes de colonne au pied de page, par du kaki, en utilisant le code hexadécimal #F0E68C. Pour ce faire, ajoutez le balisage suivant colgroup entre <table border="1"> et <thead>, comme suit :

<table border="1"> <colgroup span="2" style="background-color:#F0E68C;"> </colgroup><thead>

5. Enregistrez le fichier et affichez-le dans un navigateur Web. Une fois terminé, le tableau doit ressembler à celui de la figure 3-13. Révisez votre balisage si nécessaire et réenregistrez le fichier.



CRÉATION DE LISTESLa création de listes en HTML5 est simple, surtout si vous en avez créées dans des spécifications HTML précédentes. Les règles sont presque identiques, bien que dans HTML5, l'utilisation d'un élément de liste a été modifiée et quelques nouveaux attributs ont été introduits.Il existe deux principaux types de listes HTML :

• Liste triée : une liste classe par défaut les entrées de la liste à l'aide de nombres. La balise <ol> est utilisée. Vous pouvez utiliser les attributs suivants avec une liste triée :

a. reversed : utilise la valeur « reversed » qui inverse l'ordre de la liste, dans l'ordre décroissant. Cet attribut n'est pas pris en charge dans la plupart des navigateurs à ce jour

b. start number : spécifie la valeur de début de la liste triée c. type : spécifie le type de marqueur à utiliser au début de chaque élément de la

liste. La valeur « 1 » est la valeur par défaut et affiche les nombres décimaux, la valeur « A » utilise des majuscules, la valeur « a » utilise des minuscules, la valeur « I » utilise des chiffres romains majuscules et la valeur « i » utilise des chiffres romains en minuscules

• Liste non triée : une liste affiche les entrées sous forme de liste à puces. Utilise une balise <ul>. Les éléments d'une liste sont marqués par <li>, ce qui indique un élément de liste

ordinaire. Voyons quelques exemples. Voici une liste triée, indiquée dans un navigateur dans la figure 3-14 :

<p>Gâteaux préférés :</p><ol> <li>Crème italienne</li> <li>Délice aux fraises</li> <li>Gâteau au chocolat</li></ol>

Voici une liste non triée et affichée dans un navigateur Web dans la figure 3-15 :<p>Types de gâteaux :</p><ul> <li>Délice aux fraises</li> <li>Gâteau au chocolat</li> <li>Crème italienne</li></ul>

PRÊT POUR LA CERTIFICATIONComment créer une liste triée et une liste à puces ?2.4

Figure 3-13

Tableau final des films en haut du box-office

70 | Leçon 3

Vous pouvez changer les symboles de balle ronde dans une liste non triée en ajoutant simplement un attribut pour modifier la nature des balles. Pour les symboles carrés, ajoutez type="square" à la balise <ul> et pour les cercles vides ajoutez type="circle". Vous pouvez également ajouter des attributs à des éléments de liste individuels (marqués par <li>) pour affecter des points individuels. Par exemple, pour afficher tous les symboles de balle comme des carrés remplis :

<p>Types de gâteaux :</p><ul type="square"> <li>Délice aux fraises</li> <li>Gâteau au chocolat</li> <li>Crème italienne</li></ul>

La balise apparaît comme illustré dans la figure 3-16.

Figure 3-14

Exemple de liste triée

Figure 3-15

Exemple de liste non triée


Un autre type de liste est la liste de définitions. Elle affiche les entrées avec leurs défini-tions sous les entrées de la liste comme prévu. La balise <dl> définit la liste, la balise <dt> marque chaque terme de la liste et la balise <dd> définit chaque description. Voici un exemple de balisage, la liste est ensuite affichée dans la figure 3-17.

<dl> <dt>Délice aux fraises</dt> <dd>Meringue aux fraises avec de petites fraises des bois</dd> <dt>Gâteau au chocolat</dt> <dd>Mini pépites de chocolat mélangées avec un brownie au chocolat recouvert d'un glaçage à la crème</dd> <dt>Crème italienne</dt> <dd>Gâteau italien garni de crème et de noix de coco grillées</dd></dl>

Figure 3-16

Éléments de la liste à puces avec des carrés remplis comme symboles

Figure 3-17

Exemple d'une liste de définitions

72 | Leçon 3

HTML5 utilise également l'élément menu, qui présente une liste (ou menu) de commandes, habituellement avec des boutons. L'organisme de normalisation W3C recommande l'utilisation de l'élément menu uniquement pour les menus contextuels, les listes de contrôles et de commandes des formulaires, les barres d'outils et autres contrôles semblables. L'élément menu HTML5 n'est pas largement pris en charge par les navigateurs à ce jour.

CRÉER UNE LISTE TRIÉE

PRÉPAREZ-VOUS. Pour créer une liste triée, effectuez les opérations suivantes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un

navigateur Web, entrez la commande suivante :

<!doctype html><html><body>

<ol> <li>Ordinateurs de bureau</li> <li>Ordinateurs portables</li> <li>Tablettes</li> <li>Smartphones</li> </ol>

</body></html>

2. Enregistrez le fichier sous le nom L3-OrderedList.html, puis affichez-le dans un navigateur Web.

3. Pour remplacer les marqueurs initiaux par des lettres capitales, insérez type="A" dans la balise <ol>, comme ceci : <ol type="A">

4. Enregistrez le fichier et affichez-le dans un navigateur Web. Est-ce que les éléments de la liste commencent maintenant par A, B, C et D ?

5. Pour commencer la numérotation de la liste à 5, insérez start="5" dans la balise <ol>. Remplacez la balise actuelle <ol> par : <ol start="5">

6. Enregistrez le fichier et affichez-le dans un navigateur Web. Est-ce que les éléments de la liste commencent maintenant par 5 et se terminent par 8 ?


L'élément menu était obsolète en HTML 4.01, mais il a été redéfini en HTML5.

REMARQUE*

■ Sélection et configuration des balises HTML5 pour la saisie et la validation

Les développeurs utilisent des formulaires Web comme interface pour collecter des informations à partir du site Web et des utilisateurs de l'application client. Les éléments d'entrée HTML servent à créer l'interface d'un formulaire et à s'assurer que les renseignements sont recueillis auprès des utilisateurs de manière cohérente. La validation vérifie que les informations saisies sont dans le format correct et utilisables avant d'envoyer les données au serveur.

L'ESSENTIEL

En HTML, les entrées et la validation s'appliquent aux formulaires. Un formulaire Web est une page Web qui contient des champs d'entrée à renseigner par l'utilisateur et qui est transmise à un serveur pour traitement. Ensuite, ces informations sont stockées dans une base de données ou transférées à un destinataire.Les formulaires Web sont utilisés comme interface pour de nombreuses tâches différentes :• SeconnecteràunsiteWeb,unserveurouunréseau• Recueillir des coordonnées, telles que le nom, l'adresse, le numéro de téléphone et

l'adresse postale• S'inscrire aux courriels ou aux lettres d'information d'une organisation


• Recueillir les commentaires des utilisateurs après la publication d’un article sur un site Web• Sélectionner des préférences sur une page Web• Saisir des informations de réservation

De nombreuses applications clientes utilisent une sorte de formulaire Web pour interagir avec l'utilisateur.Vous pouvez utiliser les éléments d'entrée HTML pour créer l'interface d'un formulaire et vous assurer que les renseignements sont recueillis auprès des utilisateurs de manière cohérente. La validation vérifie que les informations saisies sont dans le format correct et utilisables avant d'envoyer les données au serveur. Par exemple, si vous entrez « 637 Park Street » dans un champ d'adresse Web, alors que ce champ attend quelque chose comme « http://www.example.com », la validation échouera et l'utilisateur sera invité à corriger l'entrée. La validation réduit également la quantité de spam et de contenu malveillant susceptibles d'arriver sur le serveur ou le destinataire des données du formulaire.

L'entrée de formulaire correspond aux informations qu'un utilisateur saisit dans les champs d'un formulaire Web ou d'une application cliente. (Pour faire simple, nous utilisons le terme « formulaire Web » la plupart du temps, mais ce terme s'applique également à l'application cliente.) HTML5 introduit plusieurs attributs d'éléments d'entrée et de formulaire, tels que url pour entrer une adresse Web unique, email pour une adresse email unique ou une liste d'adresses e-mail et search pour inviter les utilisateurs à entrer le texte à rechercher. Les nouveaux attributs rendent le développement de formulaire beaucoup plus facile que par le passé. Ce qui nécessitait auparavant beaucoup de scripts peut désormais être accompli par les balises HTML5.En revanche, beaucoup des nouveaux attributs ne sont pas encore pris en charge par tous les principaux navigateurs. Toutefois, si vous utilisez un nouvel élément ou un attribut qui n'est pas encore pris en charge, le navigateur « revient » à un autre affichage ou à une autre forme d'entrée en fonction de ce que vous avez.HTML5 introduit deux nouveaux attributs pour l'élément de formulaire : autocomplete et novalidate. Tous les attributs de l'élément de formulaire sont répertoriés dans le tableau 3-4 (les nouveaux attributs sont marqués d'un double astérisque).

Vérifiez la fonctionnalité de n'importe quel formulaire que vous créez dans de nombreux navigateurs différents au cours du développement. Cela garantit que les éléments et les attributs que vous sélectionnez fonctionnent comme prévu ou que la méthode fall-back reçoit des entrées acceptables.

REMARQUE*

Tableau 3-4

Attributs d'élément de formulaire utilisés en HTML5

(suite)

Attribut Valeur Description

accept-charset character_set Spécifie un ensemble de codages de caractères acceptés par le serveur

action URL Spécifie l'adresse de Web à laquelle les données de formulaire sont envoyées

autocomplete**

on off

Spécifie si la saisie semi-automatique est activée ou désactivée dans un formulaire ou un champ de saisie. Peut être « on » pour des champs de saisie spécifiques et « off » pour le formulaire, ou vice versa

enctype application/x-www-form-urlencoded multipart/ form-data text/plain

Spécifie le type d'encodage des données de formulaire lorsque vous soumettez des données à un serveur. Utilisé uniquement pour method=”post”

La plupart des formulaires Web, ou au moins beaucoup de champs dans la plupart des formulaires, requièrent des entrées spécifiquement mises en forme. Les nouveaux attributs d'entrée et de formulaire HTML5 sont intuitifs, faciles à utiliser et remplacent un grand nombre de scripts qui étaient obligatoires en HTML 4.01 et dans les versions antérieures.

Présentation des entrées et des formulaires

74 | Leçon 3

Tableau 3-4

suite

PRÊT POUR LA CERTIFICATIONQuels attributs HTML5 devez-vous utiliser pour limiter les entrée de formulaire ?2.5

HTML5 introduit de nombreux attributs d'élément d'entrée. Les attributs d'élément d'entrée sont répertoriés dans le tableau 3-5 (les nouveaux attributs HTML5 sont indiqués par un double astérisque).

Tableau 3-5

Attributs d'élément d'entrée utilisés en HTML5

(suite)


accept

audio/* video/* image/* MIME_type

Spécifie les types de fichiers acceptés par le serveur. Utilisé uniquement pour type=”file”

alt text Spécifie le texte de remplacement pour les images. Utilisé uniquement pour type=”image”. Couramment utilisé lorsque vous créez un bouton d'envoi personnali-sé à partir de votre propre fichier image

autocomplete**

on off

Spécifie si la saisie semi-automatique est activée ou désactivée dans un formulaire ou un champ de saisie. Peut être « on » pour des champs de saisie spécifiques et « off » pour le formulaire, ou vice versa


method

get post

Spécifie la méthode HTTP (transmission) utilisée lors de l'envoi des données de formulaire. Utilisez « get » pour extraire des données et « post » pour stocker ou mettre à jour les données ou envoyer du courrier électronique

name text Spécifie le nom d'un formulaire, qui est utilisé pour référencer les données de formulaire une fois qu'un formulaire est envoyé

novalidate**

novalidate

Attribut booléen qui spécifie que les données du formulaire (entrée utilisateur) ne doivent pas être validées une fois envoyées. HTML5 permet également aux attributs booléens d'être définis en mentionnant l'attribut sans signe égal ou de valeur assignée

target _blank _self _parent _top

Spécifie l'endroit où afficher la réponse reçue après soumission du formulaireLa valeur _blank charge la réponse dans une nouvelle fenêtre du navigateur sans nom._self charge la réponse dans la fenêtre courante. C'est la valeur par défaut, donc son utilisation n'est pas nécessaire _parent charge la réponse dans la fenêtre parent (la fenêtre du navigateur qui ouvre la fenêtre de formulaire) _top charge la réponse dans la fenêtre de navigateur complet

**Nouveautés de HTML5


Tableau 3-5

suite

(suite)


autofocus** autofocus Attribut booléen qui indique qu’un contrôle doit être activé ou sélectionné dès que la page s’affiche

checked checked Spécifie qu'un élément d'entrée doit être présélectionné lors du chargement de la page. Utilisé uniquement pour type=”checkbox” ou type=”radio”

disabled disabled Désactive l'élément d'entrée

form** form_id Spécifie le ou les formulaires auxquels appartient un élément d'entrée

formaction** URL Spécifie l'adresse Web du fichier qui traitera le contrôle d'entrée lorsque le formulaire sera envoyé

formenctype** application/x- www-form- urlencoded multipart/ form-data text/plain

Spécifie le type d'encodage des données de formulaire lorsque vous soumettez des données à un serveur. Utilisé uniquement pour method=”post”

formmethod** get post Spécifie la méthode HTTP (transmission) utilisée pour l'envoi des données de formulaire à une adresse Web

formnovalidate** formnovalidate Attribut booléen qui empêche la validation lors de la soumission d'entrée

formtarget** _blank _self _parent _top

Spécifie un mot clé qui indique où afficher la réponse reçue après avoir soumis le formulaire framename

height pixels Spécifie la hauteur d'un élément d'entrée. Utilisé uniquement avec l'entrée type=”image”

list** datalist_id Fait référence à un élément datalist ayant un contenu prédéfini pour la saisie semi-automatique, comme la sélection d'un élément à partir d'une liste déroulante

max** number date Spécifie la valeur maximale pour un élément d'entrée

min** number date Spécifie la valeur minimale pour un élément d'entrée

multiple** multiple Attribut booléen qui spécifie que l'utilisateur peut entrer plusieurs valeurs

pattern** regexp Fournit un format (une expression régulière) pour le champ de saisie. La valeur de l'élément d'entrée est comparée à l'expression

76 | Leçon 3

Tableau 3-5

(suite) Attribut Valeur Description

placeholder** text Affiche un mot clé ou une phrase courte qui décrit la valeur attendue dans un champ de saisie, tels que E-mail pour un champ de saisie de courrier électronique. L'espace réservé disparaît lorsque l'utilisateur entre des données

readonly readonly Limite un champ de saisie en lecture seule

required** required Attribut booléen qui nécessite qu'un champ soit renseigné avant d'envoyer le formulaire

size number Spécifie la largeur d'un élément d'entrée, en nombre de caractères

src URL Spécifie l'adresse Web de l'image utilisée comme bouton d'envoi. Utilisé uniquement pour type=”image”

step** number Spécifie le nombre d'intervalles accepté pour un élément d'entrée. Peut être utilisé avec les attributs max et le min pour créer une plage de valeurs

Par exemple, si vous créez une barre de défilement pour l'entrée. Si vous définissez step=”3”, chaque fois que l'utilisateur déplace le curseur, la valeur d'entrée augmente ou diminue de 3

type button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

Spécifie le type d'élément d'entrée à afficher

value text Spécifie la valeur d'un élément d'entrée

width pixels Spécifie la largeur d'un élément d'entrée. Utilisé uniquement avec l'entrée type=”image”

**Nouveauté de HTML5

DÉCOUVERTE DE LA CRÉATION DE FORMULAIRE, DES ATTRIBUTS INPUT ET DES VALEURSPour créer un formulaire, utilisez les balises de début et de fin <form>. L'intégralité du contenu et des champs du formulaire sont placés entre les deux balises <form>. La plupart des formulaires incluent également l'attribut id dans la balise de début, comme suit :

<form id="keyword"> <contenu et champs></form>

L'élément fieldset est utilisé avec de nombreux formulaires pour regrouper les éléments connexes. La balise <fieldset> dessine une zone autour des éléments individuels et/ou autour de l'ensemble du formulaire, comme illustré dans la figure 3-18.

Si le formulaire est inclus dans un document HTML avec d'autres éléments, vous pouvez utiliser la balise <div> au début et à la fin du formulaire pour le séparer des autres contenus. La balise <div> vous permet également d'inclure la mise en forme en ligne, si le formulaire utilise des balises pour aligner les champs verticalement courts et simples, et que vous ne voulez pas créer de feuille de style CSS intraligne. La balise <div> utilise l'attribut id et apparaît avant la première balise <form>. L'élément label affiche l'étiquette pour chaque champ. Voici un exemple de balise pour un formulaire très simple :

<div id="contact-form" style="font-family:'Arial Narrow','Nimbus Sans L',sans-serif;"> <form id="contact" method="post" action=""> <fieldset> <label for="name">Nom</label> <input type="text" name="name" /> </fieldset> <fieldset> <label for="email">Email</label> <input type="email" name="email" /> </fieldset> </form></div> 

Le formulaire est illustré dans la figure 3-19.

Figure 3-18

L'élément fieldset regroupe des éléments associés dans un formulaire et ajoute une bordure

78 | Leçon 3

Observons à présent certains des nouveaux attributs et certaines des nouvelles valeurs de HTML5. Bien que cette section ne traite pas de tout ce qui répertorié dans les tableaux 3-4 et 3-5, elle décrit et montre des exemples de certains des attributs et des valeurs les plus couramment utilisés.L'attribut required oblige à renseigner un champ pour soumettre le formulaire. L'attribut email (illustré dans l'exemple précédent) oblige l'utilisateur à entrer une adresse e-mail. Le navigateur alertera l'utilisateur avec un message d'erreur afin de résoudre ces problèmes.Voici un exemple d'élément d'entrée avec les attributs required et email :

<input type="email" required />

Pour rendre un formulaire plus convivial, ajoutez du texte d'espace réservé. Le texte de l'espace réservé correspond au texte qui s'affiche à l'intérieur d'un champ d'entrée lorsque le champ est vide. Il permet aux utilisateurs de comprendre le type d'informations à entrer ou à sélectionner. Lorsque vous cliquez sur un champ d'entrée ou que vous y accédez à l'aide la touche de tabulation et que vous commencez à taper, le texte entré remplace le texte de l'emplacement réservé. Voici un exemple d'attribut placeholder :

<input name="fName" placeholder="Prénom" />

L'attribut pattern offre un format (expression régulière) pour un champ d'entrée qui est utilisé pour valider le contenu du champ. Supposons par exemple que vous ayez un champ d'entrée obligatoire pour ID d'employé. Chaque ID d'employé commence par deux lettres majuscules suivies de quatre chiffres. Vous devez utiliser un champ de saisie de texte avec les attributs required et pattern pour vous assurer que (1) le champ est renseigné lorsque l'utilisateur clique sur le bouton d'envoi et (2) qu'il contient une valeur qui correspond au format correct pour un ID d'employé. Si l'utilisateur survole le champ, le message de l'attribut title (que vous avez ajouté séparément) s'affiche. Voici un exemple d'attribut pattern :

<input type="text" id="empID" name="EmployeeID" required pattern="[A-Z]{2}[0-9]{4}" title="ID d'employé commençant par deux lettres majuscules suivies de quatre chiffres">

Vous pouvez utiliser l'attribut pattern avec ces types <input> : text, search, url, telephone, email, et password.

Figure 3-19

Formulaire très simple


L'élément datalist vous permet de présenter à l'utilisateur une liste déroulante contenant des options à sélectionner. Seules les options de la liste peuvent être sélectionnées. Alternativement, vous pouvez insérer type="text" dans l'élément input pour créer une zone de texte dans laquelle l'utilisateur entre du texte. L'exemple suivant permet à l'utilisateur de choisir parmi l'un des trois pays :

<input id="country" name="country" size="30" list="countries" /> <datalist id="countries"> <option value="États-Unis"> <option value="Canada"> <option value="Royaume-Uni"> </datalist>

La valeur search de l'attribut type vous permet de créer une fonction de recherche pour une page Web. Voici un exemple de la balise :

<form> <input name="search" required> <input type="submit" value="Search"></form>

Enfin, l'attribut autofocus déplace le focus vers un champ d'entrée particulier lorsque la page Web est chargée. Comme exemple autofocus, donnez celui d'une page Web d'un moteur de recherche lorsque le point d'insertion se positionne automatiquement dans le champ d'entrée pour vous permettre d'entrer des termes de recherche sans devoir cliquer d'abord dans le champ. Voici un exemple de balise pour placer le focus sur un champ nommé fname quand une page se charge :

<input type="text" name="fname" autofocus="autofocus" />

autofocus a historiquement été gérée par JavaScript, et si un utilisateur désactive JavaScript dans un navigateur Web, la fonction autofocus ne fonctionne pas. Pour contourner ce problème, l'attribut autofocus HTML5 est pris en charge par tous les principaux navigateurs et se comporte de façon constante sur tous les sites Web.

CRÉER UN FORMULAIRE WEB SIMPLE

PRÉPAREZ-VOUS. Pour créer un formulaire Web simple, effectuez les opérations suiv-antes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application et d'un

navigateur Web, créez un simple formulaire Web avec la balise suivante :

<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>Contactez-nous</title></head><body> <div id="contact-form">

<form id="contact" method="post" action=""> <fieldset>

<label for="custname">Nom</label> <input type="text" id="custname" />

80 | Leçon 3

<label for="email">Email</label> <input type="email" id="email" />

<label for="phone">Numéro de téléphone</label> <input type="text" id="phone" />

<label for="message">Questions ou commentaires</label> <textarea name="message"></textarea>

<input type="submit" name="submit" id="submit" value="Soumettre" />

</fieldset></form>

</div>

</body></html>

2. Enregistrez le fichier sous le nom L3-WebForm-orig.html. La version rendue est indi-quée dans la figure 3-20.

Figure 3-20

Début d'un formulaire Web

3. Le formulaire Web n'est pas structuré. Idéalement, vous devez utiliser CSS pour appli-quer l'alignement, mais comme vous ne connaissez pas encore CSS, vous pouvez appliquer une solution de contournement pour aligner les champs verticalement. Une méthode consiste à ajouter des balises de début et de fin <fieldset> autour de chaque paire étiquette/entrée. Cela permet d'aligner les champs verticalement et d'ajouter des zones autour. Si vous utilisez les balises <p> d'ouverture et de fermeture au lieu des balises <fieldset> cela permet d'obtenir la même chose mais sans ajouter de zones. Pour cet exercice, utilisez les balises <p>. La figure 3-21 montre le même formulaire Web avec des balises <p> autour des paires étiquette/entrée, y compris le champ de commentaires.


4. Ajoutez du texte d'espace réservé à tous les champs. Le résultat doit ressembler à la figure 3-22 s'il s'affiche dans le navigateur Web Mozilla Firefox.

Figure 3-21

Formulaire Web utilisant des balises <p> pour aligner verticalement les champs

Figure 3-22

Formulaire Web avec des espaces réservés ajoutés pour chaque champ

5. Enregistrez le fichier sous le nom L3-WebForm-placeholders.html.

6. Laissez l'outil d'édition et le fichier ouverts si vous passez à l'exercice suivant au cours de cette session.


Pour en savoir plus sur les attributs d'élément d'entrée de HTML5, visitez le site W3C.org Web sur http://bit.ly/I1PW3P.

Présentation de la validation

HTML5 fournit de nouveaux attributs qui valident les champs de formulaire Web lorsque les utilisateurs entrent des données ou lorsqu'ils cliquent sur le bouton d'envoi. Parmi les attributs on trouve, entre autres, include required, email et pattern.

82 | Leçon 3

La validation désigne le processus qui permet de s'assurer que les informations saisies dans un formulaire Web sont dans un format correct et sont utilisables avant de trans-mettre les données au serveur. Parmi les éléments vérifiés lors de la validation on trouve :

• Leschampsobligatoiressontvides• Les adresses e-mail sont valides• Les dates sont valides• Le texte n'apparaît pas dans un champ numérique ou vice versa

Avec HTML 4.01 et les spécifications précédentes, vous aviez souvent besoin de beaucoup de JavaScript ou de script dans un autre langage pour créer des règles personnalisées de validité et des messages de réponse, ou pour déterminer si un élément n'est pas valide.En HTML5, plusieurs des types d'élément d'entrée présentés dans la dernière section offrent une validation automatique des entrées, ce qui signifie que le navigateur vérifie les données saisies par l'utilisateur. C'est ce que l'on appelle la validation côté client, car les données d'entrée sont validées avant d'être soumises au serveur. (Dans le cas où le serveur valide les données reçues d'un formulaire de saisie, on parle de validation côté serveur.) Si l’utilisateur entre un type de données incorrect dans un champ, par exemple une adresse e-mail dans un champ réservé à l’attribut url, le navigateur invite l’utilisateur à entrer une URL valide. Regardons des exemples des messages d'erreur par défaut qui sont générés lors de la validation automatique.L'attribut required évite le problème de champs vides alors qu'ils devraient être renseignés. Lorsqu'un utilisateur ignore un champ obligatoire et clique sur le bouton d'envoi, un message d'erreur s'affiche comme illustré dans la figure 3-23. Cet exemple utilise le navigateur Web Mozilla Firefox.

PRÊT POUR LA CERTIFICATIONComment HTML5 valide les données entrées dans un formulaire par un utilisateur ?2.5

Figure 3-23

Message d'erreur dans le navigateur Firefox pour un champ obligatoire

HTML5 propose également la validation des adresses Web entrées dans des champs avec la construction <input type="url"> et des numéros entrés dans des champs avec la construction <input type="number">. Si vous utilisez les attributs min et max avec type = "number", vous recevrez un message d'erreur à partir du navigateur si vous entrez un nombre qui est trop petit ou trop grand.Enfin, l'attribut pattern empêche l'utilisateur d'entrer des données qui ne respectent pas l'expression pattern. Dans cet exemple, l'attribut pattern valide un code postal à cinq chiffres :

<input type= "text" name= "zipcode" pattern= "[0-9] {5}" title= "Code postal à cinq chiffres" />

Si les données du champ Code postal sont erronées dans les résultats de navigateur Firefox, un message d'erreur s'affiche comme indiqué dans la figure 3-24.


Comme indiqué précédemment, aucune balise n'est requise pour activer la validation des formulaires HTML5 : elle est activée par défaut. Pour la désactiver, utilisez l'attribut novalidate pour les champs de saisie spécifiques.

AJOUTER DES CHAMPS DE VALIDATION À UN FORMULAIRE WEB

PRÉPAREZ-VOUS. Pour ajouter des champs de validation à un formulaire Web, effectuez les opérations suivantes : 1. À l'aide d'un éditeur HTML ou d'un outil de développement d'application, ouvrez

L3-WebForm-placeholders.html. 2. Enregistrez le fichier sous le nom L3-WebForm-valid.html. 3. Ajoutez l'attribut required pour le champ email, comme suit :

<p> <label for="email">Email</label> < input type="email" name="email" required

placeholder="Adresse e-mail"> </p>

4. Ajoutez l'attribut pattern au champ Téléphone. L'expression doit restreindre l'entrée à l'indicatif régional et au numéro de téléphone, sous la forme XXX-XXX-XXXX, comme suit :

<p> <label for="phone">Numéro de téléphone</label> < input type="text" name="phone" pattern="[0-9]{3}-

[0-9]{3}-[0-9]{4}" placeholder="Numéro de téléphone"> </p>

5. Enregistrez le fichier et affichez-le dans un navigateur Web. Tapez le texte dans chaque champ d'entrée sauf le champ e-mail et cliquez sur le bouton Envoyer. Avez-vous reçu un message d'erreur qui vous invite à entrer une adresse e-mail ?

6. Tapez le texte dans chaque champ à nouveau, y compris le champ e-mail, mais cette fois entrez un numéro de téléphone sans l'indicatif régional, puis cliquez sur Envoyer. Avez-vous reçu une erreur concernant le champ numéro de téléphone ?

7. Fermez le fichier, l'outil d'édition ou l'outil de développement d'application et le navigateur Web.

Figure 3-24

Message d'erreur dans le navigateur de Firefox lorsque vous entrez un modèle incorrect

Vous devez également valider les formulaires Web comme vous le faites dans un document HTML ordinaire en utilisant le service W3C Markup Validation http://validator.w3.org.

REMARQUE*

R É S U M É D E S C O M P É T E N C E S

Danscetteleçon,vousavezappriscequisuit:

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

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

• 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. Ces éléments réduisent le nombre de balises div requises dans un document.

(suite)

84 | Leçon 3

• Les tableaux et les listes permettent de structurer des informations spécifiques dans les documents HTML. Un tableau contient des lignes et des colonnes et affiche les données dans une grille. En HTML, vous pouvez créer des listes triées et non triées. Chaque élément d'une liste triée est marqué par un nombre ou une lettre. Une liste non triée est une liste à puces.

• Les développeurs utilisent des formulaires Web comme interface pour collecter des informations sur le site Web et sur les utilisateurs de l'application cliente. Les éléments d'entrée HTML servent à créer l'interface d'un formulaire et à s'assurer que les renseignements sont recueillis auprès des utilisateurs de manière cohérente.

• La plupart des formulaires Web, ou au moins beaucoup de champs dans la plupart des formulaires, requièrent des entrées spécifiquement mises en forme. Les nouveaux attributs d'entrée et de formulaire HTML5 sont intuitifs, faciles à utiliser et remplacent un grand nombre de scripts qui étaient obligatoires en HTML 4.01 et dans les versions antérieures.

• La validation vérifie que les informations entrées dans un champ de saisie d'un formulaire Web sont dans un format correct et utilisables avant d'envoyer les données au serveur.

• HTML5 fournit de nouveaux attributs qui valident les champs de formulaire Web lorsque les utilisateurs entrent des données ou lorsqu'ils cliquent sur le bouton d'envoi. Parmi les attributs on trouve, entre autres, required, email et pattern.

Compléter l’espace vide

Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. Une HTML contient des lignes et des colonnes et sert à organiser et

afficher les informations sous forme de grille. 2. Class et ID sont des attributs , ce qui signifie qu'ils peuvent être

utilisés avec n'importe quel élément HTML. 3. Une liste classe par défaut les entrées de la liste à l'aide de nombres. 4. Une liste affiche les entrées sous forme de liste à puces. 5. L'élément HTML5 présente une liste (ou menu) de commandes,

généralement des boutons. 6. L' de formulaire correspond aux informations qu'un utilisateur saisit

dans les champs d'un formulaire Web ou d'une application client. 7. L'attribut rend obligatoire la saisie d’informations dans un champ

avant de soumettre le formulaire. 8. L' au texte s'affiche à l'intérieur d'un champ d'entrée lorsque le

champ est vide. Il permet aux utilisateurs de comprendre le type d'informations à entrer ou à sélectionner.

9. La désigne le processus qui permet de s'assurer que les informations saisies dans un formulaire Web sont dans un format correct et sont utilisables avant de transmettre les données au serveur.

10. L'attribut déplace le focus vers un champ d'entrée particulier lorsque la page Web est chargée.

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Quel élément HTML5 définit les sous-sections d’un document, tels que les chapitres,

les parties d’une thèse ou parties d’une page Web dont le contenu est distinct ?a. asideb. sectionc. headerd. article

■ Évaluation des connaissances


2. Quel élément HTML5 définit une partie d'un document HTML représentant une « composition autonome » indépendante du reste du contenu dans le document et qui peut être syndiqué ?a. asideb. sectionc. headerd. article

3. Quel élément HTML5 sert à afficher le contenu lié au sujet actuel, mais qui est susceptible d'interrompre le flux du document s'il demeure au sein du texte ?a. asideb. sectionc. headerd. article

4. Quel attribut HTML5 offre un format (expression régulière) pour un champ d'entrée qui est utilisé pour valider le contenu du champ ?a. patternb. autofocusc. requiredd. placeholder

5. Parmi les propositions suivantes, laquelle n’est pas prise en compte par la validation et ne génère pas de message d’erreur, par défaut, en cas d’erreur ?a. Les champs obligatoires sont vides.b. Les adresses e-mail sont valides.c. Le destinataire de l’adresse e-mail est incorrect.d. Un champ numérique contient du texte ou vice-versa.

6. Parmi les propositions suivantes, laquelle est une utilisation pratique d’un formulaire Web ?a. Recueillir les coordonnées d’un utilisateurb. Recueillir les commentaires des utilisateurs après la publication d’un article sur un

site Webc. a et bd. Ni a ni b

7. Parmi les attributs form suivants, lesquels sont nouveaux dans HTML5 ? (Choisissez toutes les réponses applicables.)a. autocompleteb. targetc. methodd. novalidate

8. Quelle syntaxe avec l’attribut pattern devez-vous utiliser pour entrer un code produit composé de trois chiffres, séparés par un tiret et suivis d’une seule lettre en minuscule ?a. [a-z]{1}-[0-9]{3}b. [0-9]{3}-[a-z]{1}c. [A-Z]{3}-[0-9]{1}d. [0-9]{1}-[a-z]{3}

9. Parmi les propositions suivantes, laquelle désigne l’affichage d’un mot clé ou d’un groupe de mots qui décrit la valeur attendue d’un champ d’entrée, et qui disparaît lorsque l’utilisateur renseigne le champ ?a. labelb. placeholderc. titled. email

86 | Leçon 3

10. Quel est le format de la balise HTML5 qui valide une adresse e-mail ?a. <input label="email" name="URL">b. <form id="email">c. <label for="email">Email</label>d. <input type = "email" name = "email">

Vrai/Faux

Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.

V F 1. Dans un tableau, l’élément tfootdoits’afficheravantl’élémenttbody.V F 2. Vous pouvez utiliser des chiffres et des lettres pour chaque entrée

d’une liste triée.V F 3. Vouspouvezspécifierlahauteurd’unélémentd’entréeàl’aidede

l’attribut size. V F 4. L'élémentlabelaffichelalégende,ouletitred'untableau.V F 5. L'élément navdéfinitunblocdeliensdenavigation.

■ Évaluation des compétences

Scénario 3-1 : Balisage d’un article de journalSally Rowe, contrôleur de documents chez Malted Milk Media, souhaite publier une série d’articles sur l’intranet de la société portant sur la sécurité et la gestion des versions de documents. Elle doit créer les grandes lignes du balisage HTML5 pour un article à paraître dans le bulletin mensuel en ligne créé par l’un des développeurs Web. Chaque article comportera un titre et un sous-titre, plusieurs paragraphes de texte, son nom et la date de l’article dans le pied de page. À quoi ressemblera le balisage de son article ?

Scénario 3-2 : Affichage de longs tableaux en HTMLVince génère des rapports financiers pour le Vice-président des opérations financières chez Momentum Strategies, un cabinet de relations publiques spécialisé dans les campagnes politiques. Vince imprime régulièrement des tableaux de 2 ou 3 pages et distribue des exemplaires aux membres de la direction. Il souhaite publier ces rapports dans une zone sécurisée sur l’intranet de la société, et avec des lignes de données séparées des titres de colonne avec la ligne des totaux à la fin. Il voudrait savoir comment présenter les tableaux correctement dans HTML5. Que pouvez-vous lui dire ?

■ Évaluation de la maîtrise des concepts

Scénario 3-3 : Création d’un glossaireWaylon est un stagiaire qui travaille sur une dissertation. Son formateur demande à chaque étudiant d’appliquer à la dissertation une mise en forme compatible avec un affichage sur le Web. Waylon souhaite inclure un glossaire à la fin de la dissertation, mais il a du mal à produire un résultat satisfaisant avec une liste non triée. Quel balisage serait mieux adapté au glossaire de Waylon ?

Scénario 3-4 : Utilisation des types d’entrée appropriés dans un formulaire WebMargie est en train de créer et de tester un formulaire Web qui comporte entre autres un champ pour l’adresse e-mail, un champ pour l’adresse Web et un champ pour le code postal. Lorsque certains de ses collègues testent le formulaire, elle remarque que très souvent ils entrent par erreur l’adresse e-mail dans le champ réservé à l’adresse Web, et parfois ils entrent trop de chiffres ou un nombre de chiffres insuffisant dans le champ réservé au code postal. Elle ne veut pas utiliser de syntaxe avec la propriété pattern parce qu’à ses yeux c’est trop compliqué. Quel autre type d’entrée peut-elle utiliser ?

87

Présentation des notions essentielles sur les feuilles de style en cascade CSS : Flux de contenu, positionnement et style

L E Ç O N 4

T E R M E S C L É S

à espacement fixe

cadre englobant

classe

CSS3

débordement de défilement

débordement masqué

débordement visible

déclaration

feuilles de style en cascade (CSS)

flux de bloc

flux inclus

police

positionnement absolu

positionnement flottant

propriété de la famille de polices

règles

sans serif

sélecteur

M AT R I C E D ' O B J E C T I F S D ' E X A M E N

Compétences/Concepts MTAObjectifdel'examen MTANumérodel'objectif del'examen

Présentation des notions Comprendre les principes de 3.1 essentielles sur les feuilles base des feuilles de style CSS de style en cascade CSS

Un concepteur de votre société, Malted Milk Media, a réalisé une simulation de la conception d'une application en ligne pour un nouveau client, Trusty Lawn Care, Inc. Vous avez été invité à travailler sur le projet et vous avez besoin de comprendre ce que CSS peut faire pour vous et comment en tirer le meilleur parti.

■ Présentation des notions essentielles sur les feuilles de style en cascade CSS

CSS est un outil essentiel pour la réalisation d'une grande partie de l'apparence et même du comportement des applications mobiles modernes ainsi que des sites Web. Pour créer la partie « frontale » d'une application ou d'un site Web et surtout conserver son aspect correct et « frais » au fur et à mesure que des modifications fonctionnelles sont apportées à l'application ou au site Web pendant sa durée de vie, vous devez bien comprendre CSS et comment il fonctionne conjointement avec d'autres outils dont HTML et JavaScript. Vous serez également beaucoup plus à l’aise pour estimer l’effort requis pour certains projets lorsque vous aurez assimilé les concepts de « style » de l'interface utilisateur comme CSS les utilise.

L'ESSENTIEL

88 | Leçon 4

Prenons l'exemple du site Web de Trusty Lawn Care. Les mots « Trusty Lawn Care » se trouvent dans la partie supérieure : il s’agit d'un titre ou d'un en-tête. L'aspect détaillé de cet en-tête peut faire apparaître différentes lettres en italique, en gras ou même en couleur ; les lettres auront une taille particulière et seront choisies à partir d'une police spécifique. Les développeurs Web expérimentés disposent également de nombreux effets spéciaux plus subtils. Tous ces éléments de présentation, par opposition au contenu, font partie du style du site Web. Les feuilles de style en cascade (CSS) sont un langage qui définit le style des éléments HTML.Que signifie « en cascade » ici ? Un des principes originaux de HTML est que l'apparence d'un élément est contrôlée non seulement par CSS, mais aussi par la façon dont l'utilisateur configure son navigateur ou ordinateur de bureau. Par exemple, un utilisateur final malvoyant peut demander que le contenu soit affiché dans une taille de police particulièrement grande. Dans la théorie HTML, la définition de l'apparence se répartit entre ces différentes feuilles de styles.

PRÊT POUR LA CERTIFICATIONQuel est l'objectif de CSS ?3.1

Vous pouvez créer des fichiers CSS entièrement à partir d'un simple éditeur de texte tel que le Bloc-notes. Cependant, de nombreux éditeurs HTML et outils de développement d'applications fournissent une fonctionnalité de débogage qui vous permet de détecter rapidement des erreurs dans le code et le balisage. Ces outils comprennent généralement aussi un bouton pour ouvrir un navigateur Web, plutôt que d'avoir à le faire manuellement.

Utilisation des outils appropriés

Il est courant pour les concepteurs Web d'appeler feuille de style ou « CSS » le fichier qui contient des règles CSS. Certains codeurs de style et de nombreux programmeurs disent « source CSS » ou « fichier CSS » pour désigner la même chose.

REMARQUE*

Comme vous l'avez appris dans les leçons précédentes, HTML structure le contenu et CSS le formate. CSS3 est la version de CSS qui correspond à HTML5 et les navigateurs Web les plus modernes prennent en charge CSS3. La base très intéressante de ce manuel est que les outils modernes s'appuient sur les mêmes normes pour construire des applications mobiles : HTML, CSS et JavaScript vous permettent également de créer des applications.Le bon point à propos de CSS3 est qu'il est rétro-compatible avec les versions précédentes de CSS, donc vous pouvez commencer à utiliser CSS3 avec vos pages Web existantes sans avoir à changer quoi que ce soit. CSS3 ajoute généralement des caractéristiques et des fonctionnalités au lieu de modifier la façon dont CSS a toujours été utilisé.Certains des ajouts importants à CSS3 sont les sélecteurs, le modèle de boîte, les transformations 2D et 3D, les animations et la disposition sur plusieurs colonnes. CSS3 vous permet également de créer des bordures arrondies, d'ajouter des ombres aux boîtes et au texte, d'utiliser plusieurs images dans un arrière-plan et d'employer la police de votre choix, qu'elle se trouve sur l'ordinateur de l'utilisateur ou non.Ces sujets sont abordés dans cette leçon ou les leçons 5 et 6 de ce manuel. Tout comme HTML5, CSS3 est encore en cours d'élaboration au moment de la rédaction de ce document. Cependant, parce que la plupart des navigateurs prennent déjà en charge de CSS3, de nombreux développeurs intègrent déjà CSS3 dans leurs sites Web et applications.

Lorsque vous commencez à utiliser CSS, décidez de quels outils d'édition vous avez besoin : vous pouvez utiliser le balisage et le code source à l'aide de n'importe quel programme, du Bloc-notes intégré à Windows à un environnement de développement intégré (IDE) spécifique à un environnement mobile particulier. Tout comme lorsque vous utilisez HTML, vous aurez au moins deux applications ouvertes en même temps :• Unéditeur(ouvertavecunesourceCSSetundocumentHTML),quipourraitêtrele

Bloc-notes Microsoft Visual Studio, Microsoft Expression Blend, Expression Studio, Bloc-notes ++ pour Windows ou textwrangler pour Mac OS, Microsoft Web Matrix ou un certain nombre d'autres outils.

• UnnavigateurWeb,commeInternetExplorer9,Firefox, etc.

Présentation des notions essentielles sur les feuilles de style en cascade CSS : Flux de contenu, positionnement et style | 89

Vous pouvez utiliser tous les outils avec lesquels vous êtes à l'aise, mais le Bloc-notes a ses limites et n'a pas été conçu comme un éditeur complet. De nombreux éditeurs HTML et les outils de développement d'applications incluent des fonctionnalités qui font gagner du temps comme le débogage, les numéros de ligne et un bouton pour ouvrir un navigateur Web.

XREF

Dans la leçon 2, vous avez appris les bases de la modification de code source HTML et l'affichage du résultat. Utilisez les mêmes compétences pour travailler avec CSS.

L'élément <link> lie un fichier HTML à un fichier CSS. Cette section explique brièvement les concepts fondamentaux de l'application de style avec CSS et comment les fichiers HTML et CSS sont liés.

Exploration du lien entre HTML et CSS

Lorsque vous créez une page HTML et que vous souhaitez extraire des styles à partir d'un fichier CSS, vous devez inclure un élément <link> dans le fichier CSS dans la page HTML. (Vous pouvez référencer plusieurs fichiers CSS dans une page HTML.) Voici un exemple de syntaxe correcte pour un <link> :

<link href = "nomdefichier.css" rel = "stylesheet" type = "text/css">

Un fichier HTML peut avoir un nom comme monprojet.html ou fichier1.htm ; un nom de fichier CSS typique est monprojet.css. L'aspect de leur contenu est aussi très différent : la source HTML est organisée autour de balises, tandis que, comme vous le verrez ci-dessous, le CSS est une séquence de règles.Les organisations commerciales utilisent souvent des systèmes de fichiers spécifiques. Par exemple, vous pourriez développer une source CSS qui répond à des exigences spécifiques. Au cours du développement, vous faites référence à votre travail en tant que ... href = "mytheme.css" ... Toutefois, l'équipe plus large peut ne pas indiquer clairement qu'elle part du principe qu'elle attend une référence comme ... href = "styles/mytheme.css" ...

Il est important de reconnaître que si vous orthographiez mal le nom du fichier CSS, ou “stylesheet" ou “text/css” dans le balisage HTML de la page, la page Web résultante n'applique aucun style du fichier CSS. La page HTML traite le lien à CSS comme étant simplement manquant. Le comportement par défaut de tous les principaux navigateurs Web consiste à ne pas signaler ou avertir des fautes d'orthographe.

UNE UTILISATION SIMPLE DE CSS AVEC HTML

PRÉPAREZ-VOUS. Il existe plusieurs façons d'appliquer un style à une page HTML avec les styles CSS. Voici une méthode de base pour commencer : 1. Utilisez un éditeur de texte ou un outil de développement d'applications pour créer un

fichier dans votre répertoire appelé e1.html avec le contenu suivant :

<!doctype html><html> <head> <title>Trusty Lawn Care, Inc.</title> <link href = "e1.css" rel = "stylesheet" type = "text/css"> </head><body> <h1>Trusty Lawn Care, Inc.</h1> <p id = "slogan">Nous vous permettons de rester vert.</p> <p>Trusty Lawn Care peut permettre à votre pelouse de conserver un aspect luxuriant et

vigoureux toute l'année. Nous utilisons uniquement des engrais, paillis et terreaux naturels pour améliorer la santé de votre pelouse.</p>

</body></html>

PRÊT POUR LA CERTIFICATIONComment créer du contenu à l'aide de HTML et lui appliquer un style avec CSS ?3.1

90 | Leçon 4

2. Créez un second fichier dans le même dossier que la source .html ; nommez-le e1.css et utilisez le contenu suivant :

#slogan { font-size: 20px; color: green; font-style: italic;}

3. Ouvrez le fichier e1.html dans un navigateur Web. La page doit se présenter comme dans la figure 4-1.

Dans cet exemple, le fichier HTML (e1.html) définit le contenu et la structure : il contient contient les mots « Trusty Lawn Care, Inc. », il identifie cinq mots comme faisant partie d'un slogan et ainsi de suite. Le fichier CSS (e1.css) fournit le style de ce contenu. Pour que certains caractères s'affichent en vert, le fichier CSS n'utilise pas de peinture verte ou de lumière verte, mais plutôt le mot « green » pour indiquer au navigateur quelle couleur utiliser pour le slogan. Les fichiers sont liés à l'aide de l'élément <link> du fichier HTML.

Figure 4-1

Page d'accueil la plus simple possible pour Trusty Lawn Care

Nous allons essayer de créer une page Web et un fichier CSS, puis de modifier le fichier CSS pour voir comment les modifications affectent la page Web. Vous serez en mesure de comprendre par vous-même comment HTML et CSS travaillent ensemble pour produire des écrans dans votre navigateur Web ou une application mobile.

CRÉATION D'UNE PAGE WEB ET D'UN FICHIER CSS DE BASE

PRÉPAREZ-VOUS. Pour explorer le style CSS de base, procédez comme suit : 1. Créez une page Web nommée e1.html et un fichier CSS nommé e1.css à l'aide de la

balise indiquée précédemment. 2. Pointez votre navigateur Web sur e1.html pour afficher la page rendue. 3. Modifiez e1.css pour que le slogan s'affiche dans une police plus grande, telle que

25px. Modifiez la couleur en remplaçant « green » par #00CC00. Modifiez le style en remplaçant italic par bold. Après avoir apporté chaque modification, confirmez que l'affichage correspondant est mis à jour comme vous le souhaitez. Votre page Web finale doit ressembler à la figure 4-2.

Vous pouvez spécifier la couleur à l'aide d'un nom ou d'une valeur hexadécimale. Par exemple, pour utiliser la couleur bleue standard, le nom de la couleur est « blue » et la valeurhexadécimaleest#0000FF.Vouspouvezconsulterunelistedesnomsdecouleuret de leurs valeurs à l'adresse http://www.w3schools.com/cssref/css_colornames.asp.

REMARQUE*

PRÊT POUR LA CERTIFICATIONQuels sont les principes essentiels de l'application de style CSS ?3.1


4. Fermez les fichiers HTML et CSS. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section suivante.

Il est essentiel que vous soyez à l'aise avec les notions de base de CSS. Si vous avez du mal à comprendre les principes de base lorsque vous parcourez les leçons et les exercices, nous vous conseillons de consulter quelques didacticiels CSS en ligne, tels que ceux proposés sur le site Web W3Schools.com.

Dans des documents HTML, il est courant de conserver les fichiers HTML qui incluent le contenu et de faire simplement référence à un fichier CSS distinct qui contient le code pour affecter un style au contenu dans les fichiers HTML. Cela vous permet de modifier les styles dans un seul fichier (le fichier CSS) et de voir ces modifications de style apportées dans tous les fichiers HTML automatiquement. Lorsque vous travaillez sur un petit fichier HTML autonome dans lequel les styles ne vont probablement pas changer, il est acceptable d'ajouter le code de style CSS dans le fichier HTML lui-même.

Séparation du contenu et du style

Figure 4-2

La page Web de Trusty Lawn Care modifiée

Vous pouvez créer des pages HTML « pures », c'est-à-dire avec un seul fichier source HTML et aucun fichier CSS. HTML a la possibilité de spécifier la mise en italique, la couleur, etc. Parfois, les sites Web simples n'emploient pas CSS ou ils l'utilisent dans une syntaxe inline.

Même quelque chose d'aussi simple qu'un bloc de texte de couleur verte peut s'obtenir de plusieurs manières différentes. Les manuels et références basculent souvent entre ces différents styles avec peu d'explications. Vous pouvez voir “<div style = ‘color:green’ …” en HTML, ou “div {color:green …” en CSS, ou “<style …> div {color:green …</style>” en HTML, ou même des combinaisons plus inhabituelles. Le premier s'appelle souvent « inclus », pour souligner que la spécification CSS apparaît dans les mêmes expressions HTML qui définissent la structure et le contenu.

REMARQUE*

Cependant, la séparation des contenus HTML et CSS dans des fichiers différents est elle-même un concept fondamental, que vous devez comprendre. La « séparation du contenu et du style » est une phrase souvent répétée par ceux qui travaillent sur les sites Web et applications mobiles. Le contenu est géré en tant que HTML et le style en tant que CSS. Cette division du travail reflète souvent l'organisation des équipes de projet : des personnes différentes sont responsables du contenu et du style. La séparation du HTML et CSS permet à deux personnes de travailler simultanément sans interférer l'une avec l'autre.

En outre, la séparation du contenu et de la présentation vous aide à mieux respecter HTML5, qui devient la nouvelle norme pour les pages et les applications Web.

PRÊT POUR LA CERTIFICATIONComment les sites Web gèrent-ils le « contenu » et le « style » ?3.1

92 | Leçon 4

Cette leçon présente les correspondances entre CSS et une page Web. N'oubliez pas que la page Web dépend d'une configuration plus grande, qui inclut en général au moins un fichier HTML et un navigateur. Ne pensez pas que vous pouvez apprendre CSS dans un isolement complet par rapport aux autres parties. Une seconde correspondance concerne CSS et l'affichage d'une application mobile particulière développée avec ce CSS. Même si votre but lorsque vous découvrez et utilisez CSS peut être de développer des applications, toutes les instructions de ce chapitre parlent de pages Web. Les outils pour applications mobiles évoluent rapidement et ne sont pas aussi normalisés que le navigateur Web Internet Explorer (IE). Par conséquent, tous les exemples serontaffichésaveclaversion9d'IE.ToutcequevousapprenezsurCSSs'appliqueégalement à la programmation des applications.

REMARQUE*

Une fois que vous êtes à l'aise avec ces bases, vous êtes en mesure d'étudier les fichiers source CSS de façon plus approfondie. En général, un fichier CSS contient une séquence de spécifications de style ou règles et peut inclure une règle @import initiale. L'ordre des règles sera important dans les leçons ultérieures.

Présentation des sélecteurs et des déclarations

Chaque règle individuelle comprend deux parties principales : un sélecteur et une ou plusieurs déclarations. Le sélecteur est habituellement l'élément HTML auquel vous voulez appliquer un style. La déclaration est le style d’un sélecteur spécifique. Une déclaration possède une propriété, c'est-à-dire un attribut de style et une valeur. La syntaxe générale d'une déclaration se compose d'un mot-clé de propriété suivi d'un signe deux-points et un espace, puis une valeur suivie d'un point-virgule terminateur. Une déclaration est entre des accolades. Ces concepts sont illustrés à la figure 4-3.

Figure 4-3

Description d'un sélecteur et d'une déclaration

Prenons l'exemple suivant :

/* Voici le contenu du fichier e1.css. */p {color: brown;}#slogan { font-size:20px; color: green; font-style: italic;}

Le contenu entre / * et * / dans un fichier CSS s'appelle un commentaire. C'est une note insérée par le développeur à titre informatif seulement et elle n'affecte pas le CSS ou la page Web. Les commentaires peuvent figurer n'importe où dans une feuille de style.

REMARQUE*

Cet exemple contient deux règles, une pour « p » et une pour #slogan. La première règle qui s'applique à tout le contenu au sein de toutes les balises de paragraphe (ou type) <p> sur la page Web. La seconde règle s'applique uniquement à l'élément HTML unique avec l'ID « slogan ». La partie sélecteur d'une règle peut être assez compliquée ; pour l'instant, considérez les sélecteurs comme l'un des trois éléments suivants :• BalisesHTML,comme<p> ci-dessus. Les règles CSS sélectionnent également

souvent des balises telles que <h...>, <table>, <a>, etc.• Sélecteursd'ID,telsque#slogan ci-dessus. Pour ces derniers, le symbole # est un

préfixe qui détermine que la sélection se fait par ID.• Sélecteursdeclasse,comme l'exemple qui suit.


Notez que l'ID doit être unique dans une instance particulière de HTML. Toutefois, plusieurs éléments peuvent partager une classe. Une classe est un attribut utilisé par un auteur de sites Web pour structurer un document au-delà du cadre HTML avec des éléments, tels que le paragraphe, l’en-tête, etc. Nous pourrions choisir d'affecter l'étiquette « opinion » à certains contenus d'une page et « fait » à d'autres. Ces sortes de catégories sont idéalement mises en œuvre en tant que classes, parce que CSS peut gérer le contenu en termes de ses définitions de classes. Le balisage suivant illustre l'utilisation d'une classe.Voici le contenu d'un fichier HTML, nommé e2.html :

<!doctype html><html> <head> <title>Un exemple de classe</title> <link href = "e2.css" rel = "stylesheet" type = "text/css"> </head><body> <h1>À propos des États</h1> <p class = "fact">L'Alaska est le plus grand État des États-Unis

dans la région.</p> <p class = "opinion">Le New Jersey mérite son

surnom « État-jardin ».</p> <p class = "fact">Un seul membre du Congrès représente le

Wyoming à la Chambre nationale des représentants.</p>

</body></html>

Voici le contenu du fichier CSS associé, nommé e2.css :p {color: black;}/* Le préfixe pour un sélecteur de classe est un point : '.' */.opinion {color: gray;}

Avec ces deux fichiers en place, l'ouverture d'e2.html produit un affichage qui ressemble à la figure 4-4.

Figure 4-4

Utilisation d'un sélecteur de classe pour spécifier la couleur d'un paragraphe

Comment se souvenir de la syntaxe de différents sélecteurs ? Voici un moyen mnémotechnique qui fonctionne pour certains : le préfixe pour une classe est un point parce qu'à l'école on donne des bons points en classe. Le préfixe d'un ID est un « # », parfois appelé le « signe dièse ». Un ID courant est votre numéro de sécurité sociale, numéro, ID.s

REMARQUE*

94 | Leçon 4

Soyez prudent avec les ID. Vous comprenez sans doute qu'ils doivent être uniques dans votre code HTML. Ils peuvent également apparaître dans JavaScript et CSS. De nombreuses équipes constatent qu'elles doivent veiller à conserver des ID uniques dans l'ensemble de toutes ces différentes formes de source. S'il y a une erreur, si quelqu'un introduit un ID qui est un doublon d'un autre déjà en cours d'utilisation par une seule page, il peut être difficile de déboguer les erreurs suivantes.

REMARQUE*

La typographie concerne l'apparence des lettres, chiffres et autres caractères. La typographie est un sujet vaste et complexe, bien au-delà de la portée de cette leçon. Toutefois, il est important de connaître certains termes de ce domaine.

Présentation des polices et des familles de polices

Une police est un ensemble de caractères d’une taille et d’un style particuliers. Les graphistes ont souvent de fortes convictions sur la lisibilité et l'attrait visuel des différentes polices de caractères, et vous pouvez être invité à organiser un affichage ou des parties d'un affichage dans des polices spécifiques ou qui ont des caractéristiques particulières. Les polices à espacement fixe sont souvent utilisées pour la documentation technique, comme les formules, les nombres, les codes, etc. Les empattements sont les détails situés à l’extrémité de certaines lettres. Examinez de près les lettres « d », « p » et « t » dans cette phrase qui illustre les caractères serif. Les polices Sans serif sont simplement des styles de type dessinés sans empattement, comme la police Arial. Voir les exemples dans la figure 4-5.

Figure 4-5

Exemples d'une police serif et d'une police sans serif

Le principal moyen pour spécifier les polices dans un fichier CSS est d'utiliser la propriété font-family. La propriété font-family peut déclarer une police spécifique, telle que Garamond ou Arial ou une famille plus large qui inclut de nombreuses polices différentes, telles que « serif ». En particulier, lors du développement pour des combinés téléphoniques mobiles, il est plus sûr de spécifier une famille élargie, telle que à espacement fixe ou sans serif, parce qu'il est difficile de prédire quelles polices particulières seront disponibles sur un combiné particulier. Par exemple, quand vous incluez font-family: monospace dans un fichier CSS, vous indiquez au navigateur de choisir des caractères dans lesquels chaque lettre occupe la même largeur sur une ligne, que la lettre elle-même soit aussi large que « m » ou aussi étroite que « i ». Vous ne spécifiez pas une police à espacement fixe spécifique ; vous spécifiez seulement la famille de polices à espacement fixe.

EXPÉRIENCES AVEC LES FAMILLES DE POLICES

PRÉPAREZ-VOUS. Pour comprendre les bases du contrôle des polices, procédez comme suit : 1. Ouvrez les fichiers e1.html et e1.css à partir de l'exercice précédent dans votre outil

d'édition. Enregistrez-les sous e3.html ete3.css, respectivement. 2. Remplacez e1.css par e3.cssdans l'élément de lien du fichier e3.html, puis enregistrez

le fichier. 3. Dans e3.css, ajoutez une nouvelle règle pour #slogan qui indique font-family: monospace.

p {color: brown;}#slogan { font-family: monospace; font-size:20px; color: green; font-style: italic;}

4. Enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web. Les résultats sont présentés dans la figure 4-6.


5. Dans le fichier CSS, remplacez la règle par font-family: sans-serif;.

6. Enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web. Les résultats sont présentés dans la figure 4-7.

Figure 4-6

Application de la famille de polices à espacement fixe

Figure 4-7

Application de la famille de polices sans serif

7. Remplacez la règle par font-family: Garamond; enregistrez le fichier CSS, puis affichez le fichier HTML dans votre navigateur Web. Les résultats sont présentés dans la figure 4-8.

Figure 4-8

Application d'une police spécifique à l'élément de slogan

8. Fermez les fichiers e3.html et e3.css. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section suivante.

96 | Leçon 4

Avant CSS3, les développeurs devaient utiliser des polices Web-safe et/ou les polices dont le développeur savait qu'elles avaient été installées sur le système du visiteur d'une page Web. La liste des polices Web-safe est relativement courte et n'offre pas beaucoup de variété. Utiliser autre chose que les polices Web-safe revient généralement à créer des images pour les titres et en-têtes et à utiliser d'autres solutions de contournement.CSS3 fournit la règle @font-face, qui permet aux développeurs d'utiliser n'importe quelle police de leur choix. Pour ce faire, vous créez tout d'abord une règle font-face en affectant un nom à la police. La police doit se trouver sur votre serveur Web, ou vous pouvez inclure une URL vers son emplacement, s'il se trouve sur un autre serveur Web. Voici un exemple d'une règle pour une police nommée Euphemia qui se trouve sur votre propre serveur Web :

@font-face{font-family: TrustyHomePage;src: url('Euphemia.ttf'),}

Tout comme avec des images, vous (ou un client pour lequel vous travaillez) devez posséder une copie légale de la police à utiliser dans les pages Web créées.


Pour en savoir plus sur les notions essentielles du style CSS, visitez la page Web Microsoft sur les feuilles de style en cascade à l'adresse http://bit.ly/IKmcZd. Vous pouvez aussi consulter les didacticiels gratuits sur CSS sur le site Web W3schools.com à l'adresse http://www.w3schools.com/css/default.asp.

Vous pouvez gérer le flux de contenu dans un document HTML à l'aide des propriétés de flux inclus et de flux de bloc de CSS.

Gestion du flux de contenu

Le « flux » ou style d'affichage est un concept fondamental de HTML. Cela concerne le remplissage des lignes horizontales de gauche à droite à travers l'affichage et la séparation des lignes de haut en bas au fur et à mesure que l'on fait défiler l'affichage vers le bas.

Ces deux solutions permettent l'affichage d'un élément visuel :

• Fluxinclus:remplitseulementlalargeurnécessaire• Fluxdebloc:remplittoutelalargeurdisponible

Le contrôle de la géométrie de votre interface utilisateur et en particulier de l'étendue horizontale de l'écran, est important. Il est tout aussi important de comprendre le flux. Quelques exemples seront utiles.

Le flux inclus « tient ». Il ne crée pas de ligne avant ou après l'élément inline, mais place simplement l'élément entre le contenu avant et après l'élément inline.

Observez ce paragraphe :

Il s'agit d'un paragraphe dans lequel un mot apparaît en gras et un autre en italique.

Dans un codage HTML classique, les mots « en gras » et « en italique » apparaissent respectivement comme des éléments <b> et <i>. Ces éléments sont inclus : ils occupent seulement autant d'espace que nécessaire dans les lignes de texte et ils ne sont pas déplacés de force vers de nouvelles lignes.

Avec le flux de bloc, contrairement au flux inclus, un élément est séparé des autres éléments par de nouvelles lignes au-dessus et au-dessous, et remplit de gauche à droite l’étendue horizontale où il apparaît.

PRÊT POUR LA CERTIFICATIONComment les sites Web gèrent-ils le flux de contenu ?3.1

PRÊT POUR LA CERTIFICATIONQuelle est la différence entre flux inclus et flux de bloc ?3 .1

Le paragraphe que vous lisez maintenant est lui-même un élément de flux de bloc : au-dessus et en dessous se trouvent de nouvelles lignes et le paragraphe remplit son étendue de gauche à droite.

Vous contrôlez le flux d'affichage. Par exemple, par défaut les éléments de liste sont dans un flux de bloc. Avec CSS, cependant, vous pouvez les « inclure » pour obtenir une apparence différente et distinctive. Alors qu'ils restent des éléments de liste, avec les autres attributs habituels et le comportement de l'élément de liste, un changement dans le style d'affichage leur permet de s'afficher l'un après l'autre dans une séquence horizontale, de gauche à droite.

Démarrez votre éditeur. Il est temps d'essayer quelques petits segments de CSS pour vous-même.

Le début de cette leçon expliquait en détails comment les fichiers HTML et CSS fonctionnent ensemble pour obtenir des effets de conception. Pour le prochain exemple et les exemples suivants, cependant, le style CSS est réduit dans le fichier source HTML. HTML reconnaît l'élément <style>, ce qui rend cela possible. Lorsque l'on découvre les attributs CSS, il est généralement beaucoup, beaucoup plus commode de travailler dans un fichier source unique, donc toutes les sections de la leçon sauf les plus simples sont mises en œuvre dans une seule source HTML. N'oubliez pas que la plupart des travaux commerciaux seront structurés en termes de sources HTML et CSS distinctes.

REMARQUE*

EXPLORATION DU FLUX INCLUS ET DU FLUX DE BLOC

PRÉPAREZ-VOUS. Pour explorer le flux inclus et le flux de bloc, procédez comme suit :

1. Créez le fichier e4.html avec le contenu suivant :

<!doctype html><html> <head> <title>Flux de bloc et inclus</title> <link href = "e4.css" rel = "stylesheet" type = "text/css"><style type = 'text/css'> .toolbar li { }</style> </head><body><h1>Flux de bloc et inclus</h1>

<p>Voici les éléments que vous pouvez choisir :</p><ul class = "toolbar"> <li>Automobile</li> <li>Vélo</li> <li>Scooter</li> <li>Taxi</li> <li>À pied</li></ul></body></html>

98 | Leçon 4

3. Mettez à jour la source de e4.html pour que le segment <style> ressemble à

<style type = "text/css"> .toolbar li { display:inline; background-color: #EEE; border: 1px solid; border-color: #F3F3F3 #BBB #BBB #F3F3F3; margin: 2px; padding: .5em;}</style>

4. Enregistrez le fichier et actualisez votre navigateur. La liste affiche les mises à jour, tel qu'illustré dans la figure 4-10. Remarquez comment cet exemple montre que le contrôle de flux est utile pour les effets visuels.

Figure 4-10

Apparence des éléments de liste auxquels un nouveau style a été appliqué à l'aide du flux inclus


Pour en savoir plus sur la propriété CSS display et la gestion du flux de contenu, visitez la page Web sur la propriété CSS display de W3schools.com, à l'adresse http://www.w3schools.com/cssref/pr_class_display.asp.

Figure 4-9

Apparence par défaut des éléments de liste

5. Fermez le fichier e4.html. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section suivante.

2. Lorsque vous affichez cette source dans votre navigateur, l'affichage ressemble à l'illustration de la figure 4-9.

HTML et CSS prennent un charge un certain nombre de façons de spécifier où les différents éléments HTML apparaissent dans un affichage. Les deux plus importantes pour notre but sont le positionnement flottant et le positionnement absolu.

Positionnement des éléments individuels

La méthode de positionnement par défaut pour tous les éléments est « statique », c'est-à-dire immédiatement après l'élément précédent du document. Pour placer un élément dans une autre position, utilisez CSS pour remplacer la valeur par défaut par float ou absolute.

APPLICATION DU POSITIONNEMENT FLOTTANTLe positionnement flottant est souvent utile pour une disposition en colonnes, au moins en partie. Appliquer à un élément un positionnement flottant revient à le laisser se déplacer aussi loin que possible vers la droite ou vers la gauche ; le texte « enveloppe » alors l’élément.

Les colonnes simples sont construites en faisant flotter plusieurs éléments différents tour à tour. Supposons que vous avez besoin de produire quatre colonnes de contenu textuel. Affectez un style à chacun des éléments de contenu devant apparaître dans les colonnes successives comme élément flottant positionné. Chaque élément « flotte » vers le côté mais est séparé de celui qui le précède ou le suit. Notez que dans ce type de colonne, le texte qui déborde du bas d'une colonne ne s'étend pas jusqu'en haut de la suivante.

UTILISATION DU POSITIONNEMENT FLOTTANT AVEC PLUSIEURS COLONNES

PRÉPAREZ-VOUS. Pour appliquer un positionnement flottant à plusieurs colonnes, procédez comme suit : 1. Créez le fichier e5.html avec le contenu suivant :

<!doctype html><html><head><title>Positionnement flottant</title><style type = 'text/css'>#col1 { float: left; width: 150px; background-color: lightskyblue;}#col2 { float: left; width: 120px; background-color: yellow;}

</style></head><body><h1>Positionnement flottant</h1><p id = "col1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultricesviverra velit.

<p id = "col2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

PRÊT POUR LA CERTIFICATIONComment les éléments individuels sont-ils placés sur une page HTML en utilisant CSS ?3 .1

PRÊT POUR LA CERTIFICATIONComment utilise-t-on le positionnement flottant ?3 .1

XREF

La gestion du flux de contenu et l'utilisation des colonnes pour une meilleure lisibilité sont abordées en détail dans la leçon 6.

100 | Leçon 4

2. Affichez e5.html, comme illustré dans la figure 4-11. Notez comment le contenu s'affiche dans les colonnes, indiqué par les couleurs de l'arrière-plan qui apparaissent derrière le texte.

3. Dans le navigateur, col1 et col2 s’affichent sous forme de deux colonnes de largeur fixe et col3 remplit tout l'espace restant. Si vous modifiez les deux attributs CSS float de gauche à droite, quelle est l'apparence de l'affichage ?

4. Apportez la modification. 5. Est-ce correct ? L'affichage de la source HTML mise à jour a-t-il l'aspect attendu ? 6. Fermez le fichier e5.html. Laissez l'outil d'édition et le navigateur Web ouverts si vous

passez immédiatement à la section suivante.

APPLICATION DU POSITIONNEMENT ABSOLUAvec le positionnement absolu, un élément est supprimé de sa position dans le corps d'un document et placé dans une position géométrique dans l'afficheur. Ici, « position géométrique » signifie un emplacement à une distance définie des deux côtés de l'écran, le haut et les côtés droits, par exemple.

Figure 4-11

Plusieurs colonnes avec l'attribut float appliqué

Cette section et la suivante ne présentent pas toujours l'intégralité du balisage HTML et CSS, mais seulement les lignes essentielles. Ce genre d'abréviation est commun dans les documents de référence et la communication quotidienne entre développeurs. Vous devrez incorporer une telle ligne dans le fichier source plus grand dans la position cor-recte. Cette leçon équivaut à une leçon de nettoyage des bougies d'une automobile, qui suppose que vous savez déjà comment démarrer le moteur, ouvrir le capot, tenir une clé, et ainsi de suite.

REMARQUE*

Le texte « Lorem ipsum » est appelé remplissage ou texte factice, couramment utilisé dans le milieu de la conception. Même s'il ressemble à du latin, il n'a en fait aucun sens. Il s'agit juste de texte standard qui ressemble à du contenu dans sa séquence et la fréquence des caractères. Il est facile de générer du texte factice dans Word, par exemple, en tapant =lorem() dans un document vierge et en appuyant sur la touche Entrée.

REMARQUE*

<p id = "col3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

</body></html>

UTILISATION DU POSITIONNEMENT ABSOLU AVEC PLUSIEURS COLONNES

PRÉPAREZ-VOUS. Pour appliquer un positionnement absolu à plusieurs colonnes, procédez comme suit : 1. Créez un fichier e6.html en ouvrant e5.html et en enregistrant une copie sous e6.html. 2. Remplacez le commentaire du début par :



Remplacez le contenu dans les balises <head> par ce qui suit :

<title>Positionnement absolu</title><style type = 'text/css'>#col1 { position: absolute; bottom: 100px; right: 100px; background-color: lightskyblue;}#col2 { background-color: yellow;}

</style>

3. Dans l'élément body, remplacez l'en-tête <h1> par :

<h1>Positionnement absolu</h1>

4. Affichez e6.html, comme illustré dans la figure 4-12. Dans cet exemple, les paragraphes col2 (arrière-plan jaune) et col3 (sans arrière-plan en couleur) s'affichent de façon « normale » près du haut de l'affichage. Toutefois, Col1, se termine à une position verrouillée en bas à gauche de la fenêtre affichée.

5. Redimensionnez la fenêtre et observez comment les trois différents paragraphes s'ajustent.

6. Fermez le fichier e6.html. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section suivante.

En général, le positionnement absolu n'a pas été utilisé autant que le positionnement flottant dans travail Web. Toutefois, les applications mobiles ont souvent une fenêtre d'affichage de taille connue, définie et relativement petite. Pour les applications mobiles, contrairement à la majorité des applications Web, il est relativement courant d'utiliser le positionnement absolu.

Figure 4-12

Plusieurs colonnes avec l'attribut absolute appliqué

102 | Leçon 4

Un autre concept essentiel dans la conception HTML est le cadre englobant. Cette section explique le débordement par rapport aux cadres englobants.

Gestion du débordement de contenu

Lorsque vous affichez des lettres et des caractères sur une page, considérez-les comme des marques plutôt que des lettres. Chaque élément HTML occupe un rectangle. Le mot « rectangle », par exemple, n'est pas particulièrement rectangulaire : le « t » et le « l » dépassent au-dessus et le « g » pend au-dessous. Cependant, pour les besoins de la disposition HTML, le mot « rectangle » tient dans un petit rectangle (ou cadre englobant) qui comprend toutes les lettres du mot ainsi que leur arrière-plan, comme illustré à la figure 4-13. Le style CSS est exprimé dans les termes de ce cadre.

PRÊT POUR LA CERTIFICATIONQuelle propriété CSS contrôle le débordement de contenu ?3 .1

PRÊT POUR LA CERTIFICATIONQuelle valeur de propriété CSS overflow empêche le débordement de défilement ?3 .1

Figure 4-13

Exemple de cadre englobant

En particulier, CSS permet de limiter la largeur d'un élément. Que se passe-t-il si l'élément ne tient pas dans l'espace que CSS définit pour lui ? La règle overflow de CSS contrôle cela.

PRÉSENTATION DU DÉBORDEMENT DE DÉFILEMENTLorsqu'un élément déborde de son cadre et que sa propriété overflow est définie avec l'attribut scroll, tout le contenu de l'élément reste à l'intérieur de la boîte. Rien n'en dépasse. On parle de débordement de défilement.

Le contenu doit rester à l'intérieur de la boîte, mais il ne tient pas. Comment résoudre un tel conflit ? Prétendez que la boîte se dirige vers le bas dans une zone plus vaste, et que l'observateur peut se déplacer dans cette zone plus vaste en déplaçant les barres de défilement. Cela permet à l'observateur d'atteindre tout le contenu. Vous pouvez le faire en utilisant la valeur scroll avec la propriété overflow.

Découvrez cela par vous-même avec l'expérience suivante. Utilisez votre éditeur pour découvrir le puissant mécanisme de défilement.

UTILISATION DU DÉBORDEMENT DE DÉFILEMENT

PRÉPAREZ-VOUS. Pour vous entraîner à utiliser le débordement de défilement, procédez comme suit : 1. Créez un fichier e7.html avec le contenu suivant :

<!doctype html><html><head><title>Débordement de défilement</title><style type = "text/css">#col1 {width: 200px;height: 200px;background-color: lightskyblue;overflow: scroll;}

✚ PLUS D’INFORMATIONSPour en savoir plus sur le positionnement flottant CSS, allez à l'adresse http://www.w3schools.com/css/css_float.asp. Vous pouvez obtenir plus d'informations sur la propriété CSS position aux adresses http://www.w3schools.com/css/css_positioning.asp et http://www.w3schools.com/cssref/pr_class_position.asp.


#col3 {background-color: yellow;}

</style></head><body><h1>Débordement de défilement</h1>

<p id = 'col1'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

</p><p id = 'col2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit

amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p><p id = 'col3'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit

amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p></body></html>

2. Cette source est rendue sous forme d'un affichage semblable à la figure 4-14.

3. Faites des expériences avec la source pour voir comment HTML est rendu dans différentes circonstances. Par exemple, que se passe-t-il avec une largeur de 400 px ?

Figure 4-14

Affichage des barres de défilement créées en tant que contrôles de débordement.

104 | Leçon 4

4. Quel est l'aspect de l'affichage lorsque vous supprimez la moitié du texte de col1 de e7.html ?

5. N'enregistrez pas les modifications que vous avez apportées à e7.html. Ne fermez pas le navigateur Web et laissez le fichier e7.html ouvert dans l'outil d'édition si vous passez immédiatement à la section suivante.

PRÉSENTATION DU DÉBORDEMENT VISIBLE ET DU DÉBORDEMENT MASQUÉLe débordement visible recouvre le contenu qui le suit. Le débordement masqué rend le débordement invisible.

Pensez à nouveau au cas que la section précédente présentait : votre affichage affecte une zone fixe à un élément de contenu particulier, mais le contenu est si long qu'il ne tient pas dans l'espace qui lui est affecté. La dernière section démontrait comment les barres de défilement permettent à l'utilisateur de voir tout le contenu sans occuper d'espace d'affichage supplémentaire. Deux autres tactiques adaptées à cette situation consistent à utiliser la propriété overflow avec les valeurs visible et hidden, respectivement. Vous comprendrez mieux ces deux solutions lorsque vous ferez vous-même l'expérience de ces méthodes et des écrans qu'elles produisent.

UTILISATION DU DÉBORDEMENT VISIBLE ET DU DÉBORDEMENT MASQUÉ

PRÉPAREZ-VOUS. Pour vous entraîner à utiliser le débordement visible et le débordement masqué, procédez comme suit : 1. Ouvrez le fichier e7.html de l'exercice précédent (s'il n'est pas déjà ouvert).

2. Modifiez le débordement de e7.html en remplaçant scroll par visible.

3. Enregistrez le fichier et affichez-le dans votre navigateur Web, comme illustré à la figure 4-15.

PRÊT POUR LA CERTIFICATIONQuelles valeurs de propriété CSS overflow montrent le débordement visible et masquent le débordement visible ?3 .1

4. Étudiez les détails de cet affichage. visible est la valeur par défaut de overflow. Avec la valeur visible définie, les éléments de l'affichage HTML sont disposés en ordre, un débordement recouvre donc simplement les autres éléments.

5. Notez que background-color ne s'applique pas au débordement de contenu : col1 a un arrière-plan bleu ciel, mais le texte de débordement revient à un arrière-plan par défaut.

6. Maintenant modifiez le débordement de e7.html en remplaçant scroll par hidden.

Figure 4-15

Le débordement visible recouvre le contenu qui le suit


8. Fermez l'outil d'édition et le navigateur Web.

Le débordement masqué permet de contrôler une conception : il garantit garantit que débordement ne « pollue » pas une conception agréable avec des éléments inappropriés. En revanche, le débordement masqué peut entraîner des surprises. Par exemple, si un utilisateur final malvoyant spécifie une police plus grande que prévu, l'utilisation du débordement masqué risque de rendre des éléments cruciaux de votre conception complètement invisibles et inaccessibles. Dans le pire des cas, l'utilisateur final pourrait être face à un écran sans contrôle visible ou moyen de revenir à la page d'accueil.

✚ PLUS D’INFORMATIONSPour plus d'informations sur CSS overflow, visitez la page Web sur la propriété CSS overflow de W3schools.com, à l'adresse http://www.w3schools.com/cssref/pr_pos_overflow.asp. Vous pouvez également effectuer une recherche sur flux de contenu css de msdn, positionnement css de msdn et débordement css de msdn à l'aide de votre moteur de recherche favori.

Figure 4-16

Le débordement masqué est simplement invisible

R É S U M É D E S C O M P É T E N C E S

Danscetteleçon,vousavezappriscequisuit:

• CSS est un outil essentiel pour la réalisation d'une grande partie de l'apparence et même du comportement des applications mobiles modernes ainsi que des sites Web. Pour créer la partie « frontale » d'une application ou d'un site Web et surtout conserver son aspect correct et frais au fur et à mesure que des modifications fonctionnelles sont apportées à l'application ou au site Web pendant sa durée de vie, vous devez bien comprendre CSS et comment il fonctionne conjointement avec d'autres outils dont HTML et JavaScript. Vous serez également beaucoup plus à l’aise pour estimer l'effort requis pour certains projets lorsque vous aurez assimilé les concepts de « style » de l'interface utilisateur comme CSS les utilise.

(suite)

7. Enregistrez le fichier et affichez-le dans votre navigateur Web, comme illustré à la figure 4-16. Avec le débordement masqué, le débordement devient tout simplement invisible.

106 | Leçon 4

• Vous pouvez créer des fichiers CSS entièrement à partir d'un simple éditeur de texte tel que le Bloc-notes. Cependant, de nombreux éditeurs HTML et outils de développement d'applications fournissent une fonctionnalité de débogage qui vous permet de détecter rapidement des erreurs dans le code et le balisage. Ces outils comprennent généralement aussi un bouton pour ouvrir un navigateur Web, plutôt que d'avoir à le faire manuellement.

• L'élément <link> lie un fichier HTML à un fichier CSS. • Dans des documents HTML, il est courant de conserver les fichiers HTML qui

incluent le contenu et de faire simplement référence à un fichier CSS distinct qui contient le code pour affecter un style au contenu dans les fichiers HTML. Cela vous permet de modifier les styles dans un seul fichier (le fichier CSS) et de voir ces modifications de style apportées dans tous les fichiers HTML automatiquement.

• Lorsque vous travaillez sur un petit fichier HTML autonome dans lequel les styles ne vont probablement pas changer, il est acceptable d'ajouter le code de style CSS dans le fichier HTML lui-même.

• En général, un fichier CSS contient une séquence de spécifications de style ou règles et peut inclure une règle @import initiale.

• La typographie concerne l'apparence des lettres, chiffres et autres caractères.• Vous pouvez gérer le flux de contenu dans un document HTML à l'aide des

propriétés de flux inclus et de flux de bloc de CSS.• HTML et CSS prennent un charge un certain nombre de façons de spécifier où les

différents éléments HTML apparaissent dans un affichage. Les deux plus importantes pour notre but sont le positionnement flottant et le positionnement absolu.

• Le cadre englobant HTML est un rectangle qui inclut toutes les lettres d'un bloc de texte et son arrière-plan. Le style CSS est exprimé dans les termes de ce cadre. Par défaut, le cadre englobant n'est pas visible sur les pages Web.

Compléter l’espace vide

Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. HTML est responsable du contenu, CSS du _____________. 2. Un fichier source HTML fait référence à un fichier source CSS externe grâce

à l’élément _________. 3. Un fichier source CSS contient zéro, une ou plusieurs _________ individuelles. 4. Chaque règle individuelle comprend deux parties principales : un _________ et une

ou plusieurs déclarations. 5. Une déclaration individuelle dans une règle CSS comporte une _________, suivie

de deux-points, puis d’une valeur et pour terminer d’un point-virgule. 6. Les sélecteurs CSS les plus courants sont : élément ou type, ID et _________. 7. Les deux flux de contenu HTML visibles sont _________et de bloc. 8. Pour afficher des éléments HTML en colonnes, il est courant d’appliquer un

positionnement _________. 9. Supposez qu’un élément fasse l’objet d’un débordement : il peut peut s’étendre

au-delà de la taille qui lui est affectée à l’écran. Pour afficher des barres de défilement qui permettent à l’utilisateur de voir l’objet entier, déclarez la propriété overflow avec la valeur _________.

10. Les valeurs les plus courantes pour la propriété float sont _________ et _________.

■ Évaluation des connaissances

Questionsàchoixmultiples

Entourez la lettre correspondant à la meilleure réponse. 1. Parmi les affirmations suivantes, laquelle résume le mieux un modèle utile pour le

développement commercial ?a. Les pages Web sont créées en langage HTML.b. Les concepteurs de sites Web doivent apprendre Java ou Ruby pour réaliser la

mise en page de l’affichage.c. CSS traite principalement le style visuel.d. CSS définit la structure et HTML affecte les couleurs et les polices.

2. Parmi les syntaxes suivantes, laquelle permet de coder un commentaire dans CSS ?a. b. /* … */c. # …d.d. // ...

3. Combien de règles différentes dans un seul fichier source CSS valide peuvent déclarer le style d’un élément de paragraphe <p> ?a. 0b. 1c. 1 ou 2, selon qu’HTML5 est utilisé ou nond. 0 ou plus

4. Parfois, les couleurs sont exprimées avec des mots et parfois avec des nombres symboliques. Parmi les codes suivants, lequel correspond à « bleu » ?a. 009b. #0000FFc. !008000d. (128, 128, 128)

5. Un paragraphe apparaît sur un affichage important codé comme « <p id = 'introduction'>Trusty Lawn Care prend. . .”. On vous a demandé d’appliquer à ce paragraphe la police Tahoma. Parmi les syntaxes suivantes, laquelle est la mieux adaptée pour définir une règle correspondante ? a. p {font: Tahoma;}b. #introduction {font-family: Tahoma;}c. .introduction {font: Tahoma;}d. .p {font-family: Tahoma;}

6. Une personne a créé une page Web en HTML qui est liée à trois fichiers source CSS différents. Le nom d’un des fichiers est mal orthographié dans le code HTML. Parmi les affirmations suivantes décrivant l’affichage correspondant dans un navigateur Web, laquelle semble la plus plausible ?a. La page s’affiche même si le lien renvoyant au fichier CSS avec un nom mal

orthographié est manquant.b. La page affiche le nom mal orthographié du fichier source CSS avec un message

d’erreur.c. La page s’affiche en grande partie, en utilisant le dernier fichier CSS lié

correctement à la place du fichier CSS avec le nom mal orthographié.d. Un message d’avertissement s’affiche indiquant que le fichier CSS est introuvable

et vous invite à continuer. 7. La balise d’ancrage <a > est l’élément HTML défini pour la configuration des liens

hypertexte, entre autres. Quel est le flux de contenu par défaut d’un ancrage ?a. Inclusb. Blocc. Masquéd. Visible

108 | Leçon 4

8. Votre équipe développe une application dans laquelle est inséré un long accord de licence que l’utilisateur doit pouvoir lire et approuver. Vous souhaitez limiter à l’écran l’espace dans lequel l’accord de licence doit s’afficher, mais vous voulez donner en même temps la possibilité à l’utilisateur qui le souhaite de lire l’accord dans son intégralité. Quelle est la syntaxe la mieux adaptée à la situation ?a. {position: scrolling;}b. {fixed: scrolling;}c. {overflow: scrolling;}d. {overflow: scroll;}

9. La dernière norme CSS en cours de développement, mais déjà très répandue, est :a. CSS8b. CSS5c. CSS3d. CSS2

10. Lorsque la page HTML est liée à un fichier CSS que vous avez créé, quelle partie du lien est la plus utile ?a. type = ‘text/css’b. CSS = “UN_NOM.css”c. type = "style/CSS"d. Web = "style/css"

Vrai/Faux

Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Un fichier source CSS comporte deux règles différentes pour la police d’un

élément h1. Le navigateur Web applique la règle numéro 1 vers le début du fichier source et ignore celle qui se situe vers le bas.

V F 2. Le débordement d’un élément particulier est défini via CSS pour activer le défilement. Aucun débordement n’est constaté parce que le contenu de l’élément est assez court pour l’instant. Même dans ce cas, la barre de défilement est visible.

V F 3. On vous a demandé de concevoir une mise en page avec des colonnes. Le positionnement flottant sera plus utile que le positionnement absolu dans votre situation.

V F 4. Si vous utilisez la dernière norme CSS dans votre codage, les utilisateurs qui ont recours à des navigateurs Web non à jour recevront un message d’avertissement les informant que vos pages présentent des risques pour la sécurité.

V F 5. Avant de tester le style CSS que vous créez, vous devez vous assurer que le compilateur Python est installé sur votre ordinateur.

■ Évaluation des compétences

Scénario 4-1 : Flux de travail de base

Votre équipe développe une application. Vous êtes chargé du style de la mise en page. Quels fichiers êtes-vous susceptible de mettre à jour ?

Scénario 4-2 : Consultation clientUn client a défini une mise en page plutôt rigide dans laquelle, une section des nouveautés occupe un emplacement fixe à l’affichage. Le contenu de la section des nouveautés risque de déborder de la zone qui lui est affectée. Créez rapidement un exemple d’affichage qui montre au client comment fonctionne la mise en page avec des barres de défilement pour la section des nouveautés, ou avec le texte des nouveautés simplement tronqué en cas de dépassement de la zone qui lui est affectée.


■ Évaluation de la maîtrise des concepts

Scénario4-3:Dialogued’unepiècedethéâtre

Une application en cours d’utilisation affiche le dialogue de différents acteurs. L’écran d’un acteur particulier présente son texte dans une police normale, tandis que le texte des autres acteurs est en italique. À l’origine, la mise en œuvre consistait à placer le texte de chaque acteur dans son propre paragraphe, avec des paragraphes successifs nommés « paragraphe1 », « paragraphe2 », etc. Ensuite, le style CSS a été appliqué aux paragraphes en fonction de l’acteur. Montrez à votre équipe une méthode CSS plus efficace et plus facile à gérer pour parvenir au même résultat.

Scénario 4-4 : Coopération internationale

Vous êtes membre d’une équipe de développement dispersée géographiquement. Une entreprise de relations publiques en Virginie est chargée de la version qui doit s’afficher sur un site Web. Parallèlement, un consultant belge fournit la typographie très tendance, tandis que les développeurs en Égypte s’occupent de l’aspect de la mise en page et du modèle de couleurs. Comment pourriez-vous décrire la structure des fichiers de ce projet ?

Création de l'interface LEÇON 3 utilisateur avec HTML5 ...€¦ · des balises HTML5 pour la...

Documents

Transcript of Création de l'interface LEÇON 3 utilisateur avec HTML5 ...€¦ · des balises HTML5 pour la...