HTML5. et CSS3. HTML5 et CSS3. 3 édition. Nouvelle édition. Maîtrisez les standards de la création de sites Web

Transcription

1 Christophe AUBRY Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd hui dirigeant de la société netplume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres et vidéos aux Editions ENI (HTML/ CSS, RWD, WordPress, Drupal, Joomla ), il reste au fait des nouveautés concernant la conception des sites Web en effectuant une veille technologique régulière. Luc VAN LANCKER Dès les débuts d Internet, Luc VAN LANCKER, enthousiasmé par l idée de communication universelle que véhiculait ce concept, s est complètement investi dans ce domaine. C est un formateur passionné, très au fait des nouvelles technologies liées au web et grand pédagogue. Luc Van Lancker est auteur aux Editions ENI de livres sur HTML 4 et 5, jquery, XHTML, AJAX dans diffétéléchargement rentes collections. Les chapitres du livre ISBN : sur : b Les exemples du livre. b Les éléments, images, pour reproduire les exemples à l identique. 29,90 Avant-propos Partie Introduction au HTML5 et aux CSS3 : Le HTML5 et les CSS3 Les bonnes pratiques Partie Le HTML5 : Présentation du HTML5 La structure des documents Les conteneurs sémantiques Les conteneurs de texte La mise en forme sémantique du texte Les liens Les tableaux Les images Les formulaires Le multimédia Partie Les CSS3 : Présentation des feuilles de style La syntaxe des CSS Les propriétés CSS pour les polices de caractères Les propriétés CSS pour le texte Les propriétés CSS pour les listes et les tableaux La mise en forme des boîtes La mise en page des boîtes Les requêtes de média Les propriétés d impression Les modules graphiques CSS3 en depour plus venir Partie Les API JavaScript : Le dessin 2D La géolocalisad informations : tion Le stockage de données en local Les applications en mode déconnecté (offline) Les autres API JavaScript du HTML5 Ce livre sur l HTML5 et les CSS3 s adresse à toute personne appelée à développer, mettre en place, faire vivre des sites web. En effet, pour débuter mais surtout pour progresser dans la conception de sites, il faut inévitablement passer par une bonne compréhension et une parfaite maîtrise du code source. Le livre est conçu comme un réel outil de formation, pédagogique de la première à la dernière page, abondamment illustré d exemples et de captures d écran et constamment à l affût des éléments réellement pratiques pour l intégrateur ou concepteur web. Sont ainsi passés en revue l HTML5, les feuilles de style CSS3 et un aperçu des API JavaScript du HTML5 aux fonctionnalités évoluées et innovantes. Cet ouvrage n est surtout pas une encyclopédie exhaustive de ces différentes techniques mais un parcours structuré de celles-ci. Il fournit aux concepteurs débutants, voire plus confirmés, les règles rigoureuses mais essentielles de la conception professionnelle d un site Web. En effet, les auteurs se sont attachés à encourager l élaboration d un code respectueux des prescriptions du W3C et particulièrement de la séparation du contenu (HTML) et de la présentation (feuilles de style CSS) comme le préconise plus que jamais le HTML5. Pour l HTML5, les nouveaux éléments structurels sémantiques seront bien sûr abordés, ainsi que les différents types de conteneurs (texte, tableau, image, formulaire...). La mise en forme du texte et de ses conteneurs sera étudiée dans un contexte sémantique, dans l optique d une bonne pratique de code. Vous appréhenderez l évolution des CSS3 à travers les modules du W3C dédiés et la progression de leur statut, tout en abordant la problématique de la compatibilité des navigateurs. Vous aborderez les CSS3 de manière thématique, pour chaque type de contenu : le texte, les listes, les tableaux, les images... Vous verrez les grands principes de la mise en page web, avec l utilisation des boîtes (flottement, positionnement, affichage...) et les requêtes de média afin de créer des sites en Responsive Web Design. Les nombreux exemples du livre sont en téléchargement sur le site Pour les lecteurs désirant reproduire les exemples à l identique, les images et autres compléments y sont également à leur disposition. - HTML5 et CSS3 Maîtrisez les standards de la création de sites Web 3 édition e Christophe AUBRY Luc VAN LANCKER Nouvelle édition

2 Table des matières 1 Les exemples à télécharger sont disponibles à l'adresse suivante : Saisissez la référence ENI de l'ouvrage RI35HTM dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement. Avant-propos Partie 1 : Introduction au HTML5 et aux CSS3 Chapitre 1 Le HTML5 et les CSS 3 1. L'évolution de HTML L'évolution des CSS La notion de module L'évolution des statuts Les préfixes vendeurs Utiliser les préfixes vendeurs La compatibilité des navigateurs La validation du code HTML Les navigateurs Chapitre 2 Les bonnes pratiques 1. Séparer le contenu de la mise en forme La structure sémantique Optimiser le code et organiser vos fichiers Exemples de pages HTML/CSS bien formées

3 2 Partie 2 : Le HTML5 Chapitre 3 Présentation du HTML5 1. Un bref historique du HTML Les lignes de force du HTML Les nouveautés du HTML Le HTML5 est un langage à balises Les balises Les attributs de la balise Le bon usage des balises Les éléments HTML 4 obsolètes Au niveau des balises Au niveau des attributs Chapitre 4 La structure des documents 1. La déclaration doctype L élément <html> L'élément <head> L élément <title> L'encodage des caractères L élément <body> Les commentaires Chapitre 5 Les conteneurs sémantiques 1. Les objectifs L'élément <div> L'élément <span>

4 Table des matières 3 4. L'élément <header> L'élément <footer> L'élément <aside> L'élément <nav> L'élément <main> L'élément <section> L'élément <article> Deux exemples de structure sémantique de page Un exemple de structure sémantique d'un article Chapitre 6 Les conteneurs de texte 1. Les objectifs Les titres Les paragraphes Les citations Les listes Les listes ordonnées Les listes non ordonnées Les listes imbriquées Les listes de définitions Le texte préformaté Les lignes horizontales Deux exemples de mise en forme des conteneurs avec les CSS Chapitre 7 La mise en forme sémantique du texte 1. Les objectifs Les caractères spéciaux La mise en gras

5 4 4. La mise en italique La mise en indice et en exposant Le souligné Le barré Réduire la taille de caractère Les titres et les citations courtes Les insertions et suppressions La direction du texte D'autres mises en forme sémantiques Chapitre 8 Les liens 1. L'insertion d'un lien Le lien vers une autre page Lien vers une page située dans le même dossier Lien vers une page située dans un autre dossier Lien à partir de index.htm vers page1.htm Lien à partir de page1.htm vers page2.htm Lien à partir de page2.htm vers index.htm Le lien à l'intérieur d'une page Le lien vers un autre site Le lien vers une adresse Le lien pour télécharger un fichier Le lien vers une fenêtre spécifique La couleur et le soulignement des liens Une infobulle sur un lien Les nouvelles possibilités de liens

6 Table des matières 5 Chapitre 9 Les tableaux 1. Préambule La création d'un tableau La largeur du tableau Les bordures du tableau L'alignement du tableau L'alignement des cellules du tableau Les cellules de tableaux La largeur des cellules L'alignement horizontal L'alignement vertical La marge intérieure des cellules L'arrière-plan de couleur La fusion des cellules La fusion de colonnes La fusion de lignes Les cellules d'en-tête La légende d'un tableau Le groupement de colonnes La structuration d'un tableau Chapitre 10 Les images 1. Les formats d'image L élément <img> Les éléments <figure> et <figcaption> L'insertion d'un lien sur une image L'insertion d'une image d'arrière-plan

7 6 Chapitre 11 Les formulaires 1. Présentation La déclaration de formulaire La ligne de texte La zone de texte La liste déroulante Les boutons de choix unique (radio) Les boutons de choix multiples (checkbox) Le bouton d'envoi Le bouton d'annulation Le bouton de commande Les formulaires cachés Les formulaires de transfert de fichiers Les formulaires de mot de passe L'organisation des champs de formulaires L'étiquetage des champs de formulaires La ligne de texte avec liste de suggestions La ligne de texte d adresse La ligne de texte d url La ligne de texte de format numérique La ligne de texte de format de date La ligne de texte de recherche La ligne de texte de couleur Les curseurs Une application complète

8 Table des matières 7 Chapitre 12 Le multimédia 1. L'insertion d'un fichier audio La balise <audio> Les formats de fichier audio La balise <source> Des convertisseurs audio Compatibilité avec les anciens navigateurs L'insertion d'un fichier vidéo La balise <video> Les formats de fichier vidéo La balise <source> Des convertisseurs vidéo Compatibilité avec les anciens navigateurs Partie 3 : Les CSS3 Chapitre 13 Présentation des feuilles de style 1. Le concept des feuilles de style L utilité des feuilles de style Un bref historique Les modules CSS L'évolution des statuts L'utilité des préfixes vendeurs La compatibilité avec les navigateurs Des outils pour les feuilles de style

9 8 Chapitre 14 La syntaxe des CSS 1. Intégrer les styles CSS Les CSS intégrées à un élément HTML Les CSS internes au document HTML Les CSS externes au document HTML Les CSS importées La déclaration de style CSS Les sélecteurs Les sélecteurs de type Les sélecteurs de classe Les sélecteurs d'identification Les sélecteurs hiérarchiques Les pseudo-classes Les pseudo-classes de lien a:link a:visited a:hover a:active Les pseudo-classes de paragraphe :first-letter :first-line Les pseudo-classes d insertion :before :after Les pseudo-classes de sélection Les sélecteurs d'attributs La notion de cascade La notion d'héritage Les commentaires Les unités de mesure La notation des couleurs

10 Table des matières 9 Chapitre 15 Les propriétés CSS pour les polices de caractères 1. Les CSS pour les polices de caractères Appliquer une police de caractères Embarquer une police de caractères Appliquer l italique Passer en petites majuscules Modifier la graisse des caractères Gérer la taille des caractères Regrouper les propriétés de caractères Les polices système Chapitre 16 Les propriétés CSS pour le texte 1. Appliquer une couleur Les décorations sur le texte Changer la casse Le retrait de première ligne L espace entre les lettres L espace entre les mots Gérer l interligne des paragraphes Contrôler les espaces vides Les alignements de texte Le positionnement vertical du texte Gérer le sens de lecture du texte Appliquer une ombre portée sur le texte Gérer le texte en excès Utiliser les règles de césure Ajuster la hauteur des caractères Le texte en colonnes

11 10 Chapitre 17 Les propriétés CSS pour les listes et les tableaux 1. Les CSS pour les listes Les symboles des listes Les symboles en image Le retrait du symbole La syntaxe courte pour les listes Les CSS pour les tableaux L espace entre les cellules des tableaux Les bordures des tableaux Les cellules vides de tableaux La position de la légende des tableaux Chapitre 18 La mise en forme des boîtes 1. Le concept du modèle de boîte Les boîtes en bloc ou en ligne La largeur et la hauteur des boîtes Les marges externes Le remplissage interne Appliquer une couleur d'arrière-plan Les dégradés de couleurs Les dégradés linéaires Les dégradés circulaires L'opacité des boîtes Les bordures des boîtes Les styles des bordures L épaisseur des bordures Les couleurs des bordures La syntaxe courte Les bordures imagées

12 Table des matières Les coins arrondis des boîtes Les images d arrière-plan Appliquer une image d'arrière-plan La répétition de l'image La position de l'image Le défilement de l'image La syntaxe courte Les arrière-plans multiples Les ombres portées des boîtes Redimensionner les boîtes Chapitre 19 La mise en page des boîtes 1. La mise en page Web Le positionnement des boîtes Positionnement statique Positionnement relatif Positionnement absolu Positionnement fixe Le flottement des boîtes Interdire le flottement La superposition des boîtes Le débordement du contenu Découper une boîte L'affichage des boîtes Les propriétés CSS L'affichage en bloc et en ligne L'affichage en tableau Afficher et masquer les boîtes La mise en page flexible

13 12 Chapitre 20 Les requêtes de média 1. Le Responsive Web Design et les requêtes de média Les requêtes de média Les critères La syntaxe Les valeurs minimales et maximales Les opérateurs logiques La taille des écrans Un design responsive Le site sur écran large Le site responsive Chapitre 21 Les propriétés d'impression 1. Utilité des feuilles de style pour l'impression Feuilles de style selon le média de sortie Présentation Incorporation Optimiser une page d'impression Saut de page avant Saut de page arrière Éviter les sauts de page Le 407 Chapitre 22 Les modules graphiques CSS3 en devenir 1. Des modules pour les graphistes Les transformations Les transitions Les animations

14 Table des matières Les filtres graphiques Les masques L'habillage du texte Partie 4 : Les API JavaScript Chapitre 23 Le dessin 2D 1. Introduction La balise <canvas> Appel de l'api de dessin Dessiner un rectangle Ajouter de la couleur Tracer une ligne droite Dessiner des formes géométriques Importer des images Ajouter du texte Ajouter de l'ombre Transformations Chapitre 24 La géolocalisation 1. Concept et utilité Le fonctionnement Les navigateurs Protection de la vie privée Longitude et latitude Localisation sur une carte Suivre les déplacements

15 14 Chapitre 25 Le stockage de données en local 1. Présentation Le stockage persistant Le stockage temporaire Chapitre 26 Les applications en mode déconnecté (offline) 1. Présentation et enjeux Le fichier de mise en cache (manifest) Exemple complet Chapitre 27 Les autres API JavaScript du HTML5 1. Les lignes de force Les API opérationnelles Les API en développement Index

16 207 Partie 3 : Les CSS3 Chapitre 13 Présentation des feuilles de style 1. Le concept des feuilles de style Présentation des feuilles de style Les feuilles de style sont des ajouts de code au langage HTML qui vont prendre en charge la présentation du document ou de l'application Web. Le concept de feuilles de style repose sur le principe de la séparation du contenu et de la présentation dans l'élaboration d'applications HTML. Ainsi, un même contenu pourrait être utilisé, selon la feuille de style adoptée, pour un affichage sur des médias aussi divers qu'un écran traditionnel, l'écran d'un ordinateur de poche ou d'un mobile, des feuilles de papier imprimées, une barrette braille, etc. C'est ainsi tout le domaine de la présentation qui est pris en charge par les feuilles de style, le rôle du HTML se limitant alors à la structure et à l'encodage de l'information brute.

17 L utilité des feuilles de style Les feuilles de style représentent un outil puissant dont les implications dans la conception des applications Web sont multiples. Un passage obligé en HTML5 Le HTML5 va au bout du concept de la séparation du contenu et de la présentation. Presque tous les éléments de présentation des balises ou des attributs présents dans le HTML 4.0 ont ainsi disparu. Un document HTML5 sans feuille de styles pour en assurer la présentation n'est alors plus qu'une morne structure du contenu textuel. Citons, par exemple, l'absence en HTML5 de l'attribut border qui assurait la présence d'une bordure à la balise de tableau <table>, rendant ainsi la représentation des tableaux problématiques en pur HTML. Les feuilles de style vont beaucoup plus loin dans le domaine de la présentation que les anciennes balises du HTML. De par leur richesse et leur variété, elles ont profondément modifié l'aspect visuel des applications en décuplant la créativité des webgraphistes. Une simplification du code Il semble déjà bien lointain, le temps où le code source des pages Web était un imbroglio incompréhensible de tableaux imbriqués et d'astuces en tout genre pour assurer une présentation agréable. Les feuilles de style ont permis d'alléger considérablement le code source en le rendant plus lisible et plus accessible. Une maintenance de site facilitée De par l'utilisation croissante du Web comme source d'information, la dimension des sites Web a considérablement augmenté en termes de nombre de pages par site. Il n'est plus rare de rencontrer des sites de plusieurs centaines de pages. Une mise à jour graphique peut ainsi constituer un travail gigantesque. Plutôt que de devoir reprendre et retravailler, une par une, chacune des pages du site, les feuilles de style permettent, par la seule modification d'un unique fichier, de modifier la présentation graphique de l'ensemble d'un site, tout en lui assurant une cohérence graphique. Une voie vers l'accessibilité Depuis quelques années, l'accent a été mis sur l'accessibilité des sites Web pour les personnes présentant des déficiences visuelles. Beaucoup de concepteurs de sites ont pris conscience de l'importance du Web comme media d'informations irremplaçable pour ces personnes comportant un handicap de la vue. Editions ENI - All rights reserved

18 Présentation des feuilles de style Chapitre Pour rendre un site accessible, soit procurer aux malvoyants un accès immédiat à la même information et au même volume d'information, l'usage des feuilles de style s'avère être un outil essentiel. Sans entrer dans les détails, les feuilles de style offrent, par exemple, la possibilité d'afficher une page de texte avec des caractères plus grands et donc plus lisibles. 3. Un bref historique Lorsque, début 1991, Tim Berneers-Lee inventa le Web, le langage HTML était principalement conçu pour faciliter l'échange d'informations entre scientifiques. Les premières pages Web étaient pour le moins austères avec leur fond de page gris, un texte de couleur noire et structuré uniquement avec des titres et des listes. Il fallut même attendre quelques années pour voir apparaître les premières images en 256 couleurs! On était loin de nos applications Web actuelles. Assez rapidement cependant, dès 1994, devant les relatives faiblesses du HTML en matière de présentation, l'idée d'adjoindre au HTML des styles, comme dans les logiciels de traitement de texte, fit son apparition. Lorsqu en 1995 le W3C (pour World Wide Web Consortium) commença à fonctionner, une de ses premières réalisations concrètes fut la publication en novembre 1995 d'une première ébauche de travail (working draft) sur les feuilles de style. Ce document devint une recommandation officielle le 17 décembre 1996 sous le nom de "Feuilles de style en cascade niveau 1" (Cascading Style Sheets, level 1) ou de manière abrégée CSS1. Dans la foulée, un groupe de travail spécifique fut créé avec comme mission d'étendre le concept des feuilles de style. Une nouvelle recommandation fut publiée le 12 mai 1998 sous le vocable CSS2. Quelques corrections et des extensions mineures sont proposées courant 2006 sous la dénomination CSS2.1. Depuis 2009, il est beaucoup question des CSS3. Mais on ne peut plus parler de recommandation CSS3 car le groupe de travail a scindé la spécification en une multitude de modules qui suivent chacun leur évolution dans le temps. Citons le module CSS3 des couleurs (CSS Color Module Level 3), le module CSS3 de texte (CSS Text Level 3), le module qui s'occupe des arrière-plans et des bordures (CSS Backgrounds and Borders Level 3), etc. Les différentes marques de navigateurs portent un intérêt évident pour ces nouvelles CSS3 et les intègrent rapidement. Parfois, celles-ci sont même implantées de façon provisoire en attendant la spécification définitive.

19 Les modules CSS3 Comme nous l'avons évoqué dans le premier chapitre, les CSS3 se présentent sous la forme de modules thématiques. Chacun de ces modules évolue à sa vitesse et indépendamment des autres. Cela permet une évolution non monolithique, comme l'étaient les CSS 2.1. Chaque navigateur peut ainsi implémenter les nouvelles propriétés au fur et à mesure de leur sortie. Pour connaître les modules des CSS3, voici l'url du W3C indispensable à connaître et à consulter régulièrement : Il s agit de la page du W3C dédiée à l'avancée des travaux sur les CSS3 : Editions ENI - All rights reserved

20 Présentation des feuilles de style Chapitre Les modules sont classés par avancée. Voici l'état des lieux en mai 2016, au moment de l'écriture de ce livre : Completed : les modules qui sont terminés et validés. Stable : les modules stables qui sont pratiquement achevés et prêts pour la finalisation.

21 212 Testing : les modules qui sont encore en phase de test. Refining : les modules qui sont en phase d'élaboration, donc encore nettement améliorables et qui vont fortement évoluer. Vous pouvez les tester en local, mais pas forcément en production, à moins de prendre les précautions nécessaires. Revising : les modules qui sont révisés, afin d'y apporter de nombreuses améliorations. Editions ENI - All rights reserved