Cours HTML5 et CSS3
HTML5 et CSS3 Chap 01
Avant-propos
L’écriture de ce livre sur le Html5 et le CSS3 a été une entreprise très motivante. Le Html n’avait pas connu d’évolution majeure depuis 1998 avec le Html 4.0. Une éternité à l’échelle du développement du Web et d’Internet ! Il est important d’évaluer les évolutions et apports de cette nouvelle version du langage qui est à la base de cet outil devenu quotidien qu’est le Web. De leur côté, les feuilles de style CSS3 constituent une réelle avancée au niveau du graphisme des pages avec, par exemple, les bords arrondis, la transparence des images, les ombres ou la typographie.
Cet ouvrage sur le Html5 et les CSS3 se veut avant tout un ouvrage structuré et formatif plutôt qu’une exploration exhaustive des nouveautés apportées par ces deux technologies. Il vise deux publics bien distincts :
Les débutants pourront appréhender les bases du langage source des pages de la toile au fil des chapitres grâce à de nombreux exemples complets, illustrés à chaque fois par des captures d’écran et la possibilité de les visionner sur leur écran, via l’espace de téléchargement consacré à cet ouvrage. Ils pourront ainsi entamer leur apprentissage de la conception de pages Web par la dernière évolution du Html qui est d’ores et déjà opérationnelle dans de nombreux navigateurs de la dernière génération et qui sera le standard des années futures.
Ce livre s’adresse aussi aux concepteurs familiarisés au Html et qui souhaitent découvrir les apports et nouveautés du Html5 et des CSS3. Les différences par rapport au Html 4.0, parfois subtiles mais déterminantes, sont mises en évidence tout au long de l’ouvrage. Ils pourront aussi découvrir les réelles nouveautés du Html5 avec les chapitres dédiés aux nouveaux champs de formulaires, au dessin 2D, aux nouvelles balises audio et vidéo et à l’entrée du JavaScript avec, par exemple, la géolocalisation de l’utilisateur. L’important chapitre sur les CSS3 les convaincra de la révolution qu’elles vont apporter dans le design de la page, les débarrassant du passage obligé par des programmes graphiques.
Cet ouvrage marque également un tournant dans l’apprentissage du code source des pages de la toile. En effet, le Html5 fait table rase de tout aspect de présentation pour se consacrer exclusivement à la structure du document. Il n’est donc plus possible en Html5 d’aligner du texte ou autres éléments ou de dessiner des bordures de tableaux. Terminé aussi l’ajout de couleur au texte ou en arrière-plan. Le Html5 se décline désormais de façon austère, en noir et blanc ! Tous les éléments de présentation doivent obligatoirement être repris par les feuilles de style. Il n’est plus possible de concevoir un apprentissage de manière traditionnelle avec une partie exclusivement consacrée au Html et une seconde partie distincte pour les feuilles de style. Ces deux éléments sont maintenant intimement liés. Ainsi, il nous a semblé utile, voire indispensable, d’introduire dès l’apprentissage du Html des éléments basiques relatifs aux feuilles de style. Cela permettra à l’apprenant de concevoir ses premières applications d’une manière plus réaliste et plus attrayante.
Entrons plus profondément dans le détail des chapitres. La partie Html débute par les éléments basiques et traditionnels de l’apprentissage du code source. Le Html5 est en premier lieu une évolution du Html 4.0. Il reste donc un langage de balises. Les premiers éléments de l’apprentissage progressif concernent le texte, la structuration du document avec les titres et les listes, les tableaux, les images et leur insertion, sans oublier ce qui fait l’essence du langage Html c’est-à-dire les liens. Une série de chapitres aborde ensuite les nouveautés introduites par le Html5.
Les nouvelles balises sémantiques qui permettent d’organiser le code source des applications afin d’en assurer une meilleure lisibilité.
Il faut bien avouer que les formulaires traditionnels comme la ligne ou la zone de texte, les boutons radio, à choix multiples ou autres boutons de commandes entraînent une lassitude certaine dans l’aspect visuel de la page. Les apports du Html5 vont révolutionner les formulaires avec des lignes de texte avec suggestions, des calendriers, des compteurs numériques, des curseurs, une validation sans passer par le JavaScript et bien d’autres surprises à découvrir dans le chapitre qui leur est consacré.
Les nouvelles balises audio et vidéo permettent désormais de lire de façon native les fichiers multimédia sans devoir passer par des plugins divers, souvent sources de complications.
Le dessin 2D ouvre de nouvelles perspectives car il est désormais possible, par exemple, d’ajouter des graphiques directement
par le code, sans passer par des captures d’écran de programmes comme Excel.
Pour terminer, il fallait souligner que le Html5 marque aussi l’introduction du JavaScript comme un acteur privilégié dans la conception des applications Web. Ce dernier point est illustré par la géolocalisation de l’internaute.
Poursuivons avec la partie dédiée aux feuilles de style CSS. Dans un apprentissage progressif et structuré, il n’est pas possible d’ignorer les désormais élémentaires CSS1 et CSS2. Plusieurs chapitres sont ainsi consacrés aux feuilles de style relatives à la police de caractères, au texte, aux listes et tableaux, à la couleur, aux marges intérieures et extérieures, aux pseudoclasses et aux feuilles de style relatives à l’affichage ou à l’impression. Cette partie se termine par les spécifications CSS3 qui vont profondément modifier l’aspect visuel de la navigation sur la toile. Ce chapitre ne manquera pas d’intéresser ceux qui, de près ou de loin, prennent en charge l’aspect graphique des sites. Parmi les apports de ces feuilles de style CSS3, citons :
Les bords arrondis qui permettent de sortir de la présentation rectangulaire et angulaire des divisions.
Les ombres que l’on peut apporter au texte ou aux images sans passer par une application graphique.
Les polices que le concepteur pourra enfin choisir librement, marquant ainsi l’introduction tant attendue de la typographie dans la conception des pages web.
La présentation d’un contenu textuel en colonnes.
Les bordures imagées.
Les arrière-plans multiples.
Les dégradés de couleurs.
La possibilité de jouer sur l’opacité ou la transparence d’éléments comme les images.
À n’en pas douter, cet ouvrage est dense mais présenté dans un langage que nous avons voulu clair, formatif et pédagogique.
En tant qu’auteur, je dois avouer que j’ai pris un énorme plaisir à écrire ce livre sur le Html5 et les CSS3. Je fais le souhait que ce plaisir soit partagé avec les lecteurs.
Bref historique du Html5
Nous débutons cet historique en 1998 avec la finalisation de la spécification Html 4.0. Mis à part une légère révision en 1999 avec le Html 4.01, plus rien de neuf à l’horizon de ce langage premier du Web. Le W3C (World Wide Web Consortium), l’organisme qui gère les standards d’écriture sur la toile, n’a-t-il pas annoncé à l’époque que le Html dans sa version 4.0 ne connaîtrait à l’avenir plus de développement, en bref que le Html était mort ?
Le W3C avait aussi édité en 1998 le XML (eXtensible Markup Language ou, en français, le langage extensible de balises) pour gérer de façon structurée des données de type texte, l’aspect extensible permettant à l’utilisateur de définir son propre langage avec ses éléments distincts. Le W3C recommandait à l’époque fortement le XML pour exprimer des langages de balisages spécifiques.
Une des premières applications concrètes du XML fut la reformulation du Html 4.0 selon la syntaxe stricte et formaliste du XML. Le Xhtml 1.0 apparût ainsi en 2000. Si les développeurs ont unanimement salué la rigueur que le Xhtml apportait à l’écriture du code, il faut bien constater que la migration vers le Xhtml n’a pas remporté le succès souhaité et que bon nombre de concepteurs sont restés fidèles au Html 4.0 transitional, plus souple.
Très rapidement, le W3C mit en chantier l’ambitieux projet du Xhtml 2.0 qui devait faire table rase du passé en matière de publication sur la toile. Cette position induisait que le Xhtml 2.0 ne serait pas rétrocompatible avec ce qui existait à l’époque et donc avec le Html.
Cette absence de rétrocompatibilité a engendré un mécontentement certain auprès des firmes qui développaient les navigateurs.
Ce qui eut pour conséquence la création d’un groupe dissident, le WHATWG (Web Hypertext Application Technology Working Group). Ce groupe de travail se présente notamment comme une réponse à la lenteur du développement des standards par le W3C et au caractère trop fermé de son processus interne d’élaboration de spécifications. Il se compose à l’origine de représentants de firmes comme Mozilla, Opera et Apple dont les navigateurs Firefox, Opera et Safari sont bien connus. Ils furent rejoints ensuite par Google. Leur position était diamétralement opposée à celle du Xhtml 2.0 en travaillant de façon pragmatique sur base des implémentations actuelles et donc du Html 4.0. Leurs premières réalisations portaient sur les Web Forms 2.0 pour renouveler les formulaires et le nouveau concept de publication sur le web, Web Apps 1.0 soit des applications Web.
Parallèlement le Hhtml 2.0, même si un brouillon (working draft) paraît en juillet 2006, connaît un développement particulièrement laborieux et la rumeur rapporte de nombreuses dissensions au sein de ce groupe de travail. En outre, les différents navigateurs précités boudaient délibérément le Html 2.0.
Il apparaissait clairement que le Xhtml 2.0 connaissait de gros problèmes. Sir Tim Berners-Lee, inventeur du Web et président du W3C, décida fin 2006, de rouvrir un groupe de travail sur le Html qui, de façon pragmatique, devait reprendre la suite des travaux du WHATWG. Ainsi, il y eut pendant tout un temps, le groupe de travail sur le Xhtml 2.0 et celui sur le Html5. Ce dernier publia le 22 janvier 2008, un premier brouillon de travail qui a connu de nombreuses évolutions depuis.
Mais les jours du Xhtml 2.0 étaient comptés. Fin 2009, le même Sir Tim Berners-Lee annonce la dissolution du groupe de travail sur le Xhtml 2.0 et l’abandon définitif de ce dernier.
On annonce pour 2012, la candidate recommandation du Html5 pour
2012 et, étant donné l’ampleur des nouveautés annoncées, la recommandation finale pour… 2022.
L’annonce du Html5 a fait grand bruit (un buzz dans le vocabulaire moderne). Cet intérêt s’est rapidement concrétisé à différents niveaux. Google a incorporé très rapidement, soit à partir de la version 5 de Chrome des éléments du Html5. Ses autres comparses du WHATWG également avec les versions récentes de Firefox, Safari et Opera. Même Microsoft, pourtant souvent à la traîne en matière d’adoption de nouveautés et de standards incorpore le Html5 dans la version 9 d’Internet Explorer. De leur côté, les smartphones adoptent également le standard Html5, que ce soit Apple avec son iPhone, RIM avec son BlackBerry, Google avec son Google Phone, etc. Est-ce encore une évolution ? N’est-ce pas une révolution ?
Parallèlement, une reformulation du Html5 selon les règles et la syntaxe du XML est en cours d’élaboration. Celle-ci porte le nom de Xhtml5.
De cette gestation mouvementée du Html5, on retiendra :
Que l’on ne parle plus de pages Web mais du concept plus large d’applications Web.
Que le Html5 est une évolution (importante certes) du Html 4.0.
Que le Html5 a été conçu directement par les navigateurs les plus innovants du marché comme Firefox, Safari Opéra et Google. Ce qui est la garantie d’une adoption rapide des standards du Html5.
Que l’on peut s’attendre avec le Html5 à de grands changements concernant les formulaires (voir les Web Forms 2.0).
Qu’après plus d’une décennie sans réelles nouveautés, le Html5 correspond à un réel besoin des concepteurs pour renouveler l’interface des applications Web.
Lignes de force du Html5
Avant de parcourir les nouveautés du Html5, dégageons quelques lignes de force de cette nouvelle version du langage Html.
Le Html5 est une évolution du Html. Il en reprend les grands principes, quitte à en améliorer certains aspects. Il est conçu pour assurer une rétrocompatibilité avec ce qui a été fait jusqu’à présent, en termes de publication sur le Web.
Même si le codage est moins formaliste que le Xhtml5, l’exigence d’un code propre, respectueux des règles fondamentales du balisage continue d’être d’actualité.
Le principe de la séparation du contenu et de la présentation reste de mise et se voit même renforcé. L’abandon de toute une série de balises et d’attributs de présentation (point F du présent chapitre) en est la meilleure preuve. Les feuilles de style CSS sont des partenaires indissociables du Html5. Celuici espère qu’avec la montée en puissance des nouvelles feuilles de style CSS3, l’interface de l’utilisateur soit complètement transformée dans les années à venir.
La simplification du code et le désir d’éviter toutes complications souvent inutiles sont deux principes suivis dans l’élaboration du Html5. On retrouve cette simplification et ce pragmatisme par exemple, dans un nouveau doctype simplifié et un code Html dépouillé de tout aspect de présentation.
Une chasse aux plugins qui viennent encombrer le code et compliquer la tâche des concepteurs, par leur prise en charge directe dans le navigateur. Les nouvelles balises audio et vidéo en sont une belle illustration.
La reconnaissance du JavaScript comme partenaire de la publication sur la toile. On pense ainsi aux scripts classiques pour vérifier l’encodage obligatoire ou la validité d’une adresse de courrier électronique dans les formulaires. Le Html5 évitera ces encodages redondants par la prise en charge de façon native par les navigateurs de ces fonctions. Autre exemple, le codage du dessin 2D et bientôt 3D (balise ) est beaucoup plus proche du JavaScript que d’un langage de balise.
Le Html5 devient également une plate-forme d’interfaces d’applications (APIs) intégrant des fonctionnalités complexes comme la géolocalisation, l’édition en ligne ou le glisser-déposer (drag/drop).
Les nouveautés du Html5
Les nouveautés du Html5 et surtout du trinôme du concept "Html5 + CSS3 + applications JavaScript" sont nombreuses.
Html5
Un nouveau doctype simplifié et unifié.
La suppression des balises et attributs de présentation.
De nouvelles balises sémantiques ou d’organisation.
De nouvelles balises audio et vidéo qui ne nécessitent plus l’appel à des plugins dédiés.
Le dessin 2D et bientôt 3D par la nouvelle balise .
Une profusion de formulaires novateurs comme les curseurs ou les calendriers et la prise en charge de façon native par les navigateurs de la validation des données.
Etc.
L’objectif premier de cet ouvrage est bien entendu l’étude détaillée de l’héritage du Html 4.0 et des nouveautés du Html5. Il faut noter que ce dernier est déjà bien implanté dans les navigateurs de la dernière génération. L’implantation actuelle du Html5 permet déjà de le découvrir et de l’utiliser. Il faut cependant noter que l’intégration du Html5 n’est pas encore complète. De nouveaux apports sont encore attendus, particulièrement en ce qui concerne les formulaires.
CSS3
De nouveaux sélecteurs.
Les bords arrondis.
Les bordures imagées.
Les polices personnalisées permettant à la typographie de trouver enfin sa place dans les interfaces Web.
La présentation en plusieurs colonnes d’un texte.
Les ombres sur le texte comme sur les éléments.
Les dégradés de couleur.
Les arrière-plans multiples.
L’opacité ou la transparence.
Les transformations.
Les transitions (sans JavaScript).
Ces nouvelles spécifications CSS3 sont déjà disponibles dans les versions récentes des navigateurs et en particulier dans les navigateurs de notre étude (voir la section "Les navigateurs de notre étude" dans le présent chapitre). Il ne fait aucun doute que les CSS3 vont révolutionner la façon de concevoir et d’exploiter les interfaces Web dans les prochains mois ou les prochaines années.
Les applications JsAPI
La géolocalisation qui permet de localiser (avec sa permission) l’utilisateur par ses coordonnées de longitude et latitude.
Des super cookies avec Web Storage qui permettra un stockage plus important de données dans le navigateur.
L’utilisation des applications Web hors connexion après la mise en cache des ressources nécessaires.
Les Workers qui peuvent exécuter des tâches de fond en parallèle du programme JavaScript principal dans un environnement totalement séparé de la page.
Les Websockets qui permettent d’établir une communication bidirectionnelle asynchrone entre le navigateur et le serveur.
Le glisser-déposer (drag/drop) en natif dans le navigateur.
L’attribut ContentEditable qui permet l’édition en ligne du contenu d’un élément. Il fait apparaître un éditeur WYSIWYG basique qui permet donc d’éditer directement le contenu dans la page. Toutes les modifications apportées par l’utilisateur pourront être traitées à la fin de l’édition.
Etc.
Ces applications dépassent largement le cadre de cet ouvrage dédié à l’apprentissage du Html5. Certaines sont déjà implémentées dans les navigateurs récents, d’autres non. Nous aborderons cependant brièvement la géolocalisation dans un chapitre pour son côté spectaculaire et intrigant.
Un certain nombre de ces fonctions sont déjà reprises dans les cadriciels (framework) JavaScript comme Dojo et jQuery.
Le Html5 est un langage de balises
Digne successeur des versions précédentes du Html et du Html 4.0 en particulier, le Html5 est toujours un langage de balises.
1. Les balises
Les balises, aussi appelées éléments, sont des commandes à l’intention du navigateur et saisies entre des signes inférieur à (). Ainsi une balise s’écrit .
En règle générale, à toute balise d’ouverture correspond une balise de fermeture qui marque la fin de la commande annoncée par la balise d’ouverture. La balise de fermeture reprend le même énoncé que la balise d’ouverture mais ce dernier est précédé d’une barre oblique (/). Ainsi à la balise d’ouverture correspondrait la balise de fermeture . La syntaxe d’une balise est alors :
…
Pour comprendre le mode de fonctionnement des balises, je vous propose le texte suivant :
Il est important d’apprendre le langage
Html5 !
Ceci peut se comprendre de cette façon : écrire "Il est" de façon normale puisque rien n’est spécifié,
ensuite écrire le mot (et uniquement ce mot) "important" et le mettre en gras, rependre l’écriture normale pour "d’apprendre le langage", écrire cette fois-ci en italique le mot "Html5" et terminer par "!" en écriture normale.
Ce qui donne le résultat suivant :
Il est important d’apprendre le langage Html5 !
Le langage Html n’est ni plus ni moins que cela. Chaque fois que l’on donne une instruction au navigateur, par exemple mettre un titre, commencer un tableau ou faire un lien vers une autre page, une balise de début est appliquée. La balise de fermeture signale au navigateur que la commande est terminée.
Une exception cependant, Html5 a hérité du Html des balises uniques, aussi appelées balises vides qui n’ont pas de balises de fermeture.
Par exemple, la balise image .
Afin d’assurer une rétrocompatibilité avec le Xhtml, ces balises peuvent également s’écrire en Html5 avec un signe de fermeture.
Ainsi, la balise image peut également s’écrire en Xhtml
/>.
L’espace avant la barre oblique de fermeture est important pour des raisons de compatibilité avec les (très) anciens navigateurs.
Ce qui nous handicape un peu, nous les francophones, c’est le fait que ces balises font appel à des termes ou des abréviations de termes anglo-saxons qui les rendent (au premier abord) abstraites et donc complexes.
Exemples
| b pour bold ce qui signifie gras | |||||
| i pour italic ce qui signifie italique | |||||
| p pour paragraph ce qui signifie paragraphe | |||||
| div pour division ce qui signifie … division | |||||
2. Les attributs de la baliseIl est parfois nécessaire de compléter une commande par des spécifications plus précises dans l’un ou l’autre domaine. Pour ce faire, le langage Html5 dispose des attributs de la balise. L’attribut s’insère dans la balise, entre le mot de commande et le signe > final. La syntaxe complète d’une balise avec un attribut est : attribut="valeur"> … L’attribut comporte toujours une valeur, celle-ci s’indique en complément de l’attribut par un signe égal (=) suivi de la valeur mise entre des guillemets. Il est impératif de mettre cette valeur entre guillemets. Le strict respect de la syntaxe veut qu’il n’y ait pas d’espace avant et après le signe égal. Il est possible d’utiliser plusieurs attributs, séparés par un espace, dans une même balise : ... . Le bon usage des balisesVoici quelques règles simples qu’il faudra respecter lors de l’écriture des balises Html5. En Html5, les balises ne sont pas sensibles à la casse. Ainsi, on peut écrire indifféremment , ou . Certains voyaient même en l’utilisation des majuscules, un moyen efficace pour distinguer le code Html du contenu dans un document. Cependant, l’usage s’est généralisé d’écrire les balises en minuscules (comme en Xhtml). La règle générale veut que toute balise ouverte doit être fermée . Les libertés prises dans l’écriture du Html 3.2 à cause du fonctionnent plus ou moins permissif des navigateurs ne sont plus d’actualité. La rigueur apportée par le Html 4.0 strict et le Xhtml 1.0 doit continuer à guider votre écriture. Les balises doivent être correctement imbriquées. Lorsqu’on affecte plusieurs balises à un élément, l’ordre de fermeture de celles-ci est essentiel. La première balise de fermeture doit correspondre à la dernière balise d’ouverture non fermée. Un exemple et tout sera beaucoup plus clair : Est correct : contenu. Est incorrect : contenu. Les valeurs des attributs doivent toujours figurer entre des guillemets. Ici aussi, la rigueur dans le code reste de mise. Les balises et attributs Html 4.0 disparusLes différences, tant au niveau des balises que des attributs, sont nombreuses et importantes par rapport au Html 4.0. 1. Au niveau des balisesNotons tout d’abord la disparition complète des cadres. Les balises , et ont définitivement disparu des outils à la disposition des auteurs. Ceci ne constitue pas réellement une surprise car ils étaient décriés depuis de nombreuses années. Les concepteurs professionnels les évitaient comme la peste depuis que Google avait annoncé à l’attention des webmestres qu’il ne pouvait garantir la bonne indexation des sites comportant des cadres. La balise quant à elle subsiste en Html5.Ensuite, la disparition de certaines balises de présentation comme , , , , et . Ici aussi, pas de grande surprise car le principe de la séparation de contenu et de la présentation est à présent bien établi. Ces balises de présentation doivent maintenant être prises en charge par des feuilles de style CSS. 2. Au niveau des attributsLe Html5 va au bout du principe de la séparation du contenu et de la présentation. Ce qui étonne, c’est l’ampleur des attributs concernés. En résumé, ce sont tous les attributs relatifs à l’alignement, la largeur, les arrière-plans (de couleur ou avec image), les bordures et la numérotation des listes qui sont passés à la trappe. Tous ces attributs doivent être pris en charge par les feuilles de style qui deviennent ainsi indissociables du code Html5. De façon plus détaillée : align dans les balises , , , , , , |