Introduction

Transcription

1 Ce livre est un concentré de code HTML5 et CSS3 prêt à l emploi 1. Il se divise en seize chapitres thématiques. Vous êtes un développeur de niveau intermédiaire ou avancé? Vous y trouverez de nombreux codes à copiercoller dans les pages web que vous développez. Pour accéder au code dont vous avez besoin, vous pouvez : parcourir le sommaire, choisir un chapitre et une section ; rechercher un nom d élément, de balise ou d attribut HTML ou un nom de propriété CSS dans l index, à la fin de l ouvrage. Lorsque vous aurez trouvé la section convoitée, rendezvous à la page correspondante. Les premières lignes de la section indiquent les balises et/ou les propriétés principales ou les caractéristiques utilisées. Le code apparaît en grisé. Il vous suffit en général de le copier dans votre propre code pour qu il soit immédiatement opérationnel. Vous avez une question ou une remarque sur cet ouvrage? Vous voulez accéder aux codes sources? Connectez-vous au site cliquez sur Formations puis sur HTML5/CSS3. 1. Par facilité d écriture, nous emploierons le terme CSS dans tout cet ouvrage pour faire référence au langage et aux instructions CSS3.

2 2 HTML5 et CSS3 Ce lieu d échange privilégié permet d accéder aux codes sources de l ouvrage, de visionner des vidéos complémentaires pour progresser encore plus vite dans l apprentissage des langages HTML5 et CSS3 et de dialoguer avec l auteur. Vous pouvez librement tester ces codes en cliquant sur les liens Tester le code correspondants. N hésitez pas à copier-coller ce qui vous intéresse pour en faire la base du développement de vos propres pages Info Les codes sources de cet ouvrage sont également disponibles sur le site de l éditeur, Pearson ( à la page consacrée à cet ouvrage.

3 3 Pourquoi HTML5 et CSS3? Le World Wide Web Consortium (W3C) est un organisme de standardisation chargé de promouvoir la compatibilité des technologies du Web, telles que HTML, XHTML, CSS, PNG, SVG, SOAP, etc. La dernière spécification du langage HTML 4.01 date de 1999 ( REC-html40/). Onze ans plus tard, bien que le langage HTML 4.01 soit toujours utilisé sur de nombreux sites Web, il faut bien avouer que beaucoup de choses ont changé. Il était temps qu une nouvelle version du langage voie le jour. Le groupe de travail HTML5 du W3C (HTML5 Working Group) est chargé de la standardisation du HTML5. Vous en saurez plus sur les spécifications de ce tout nouveau langage en accédant aux pages html5/ et HTML est en mesure d afficher des éléments textuels, graphiques et vidéos dans un navigateur web et d assurer leur mise en page. Cette seconde fonction est cependant assez limitée. C est la raison d être du langage CSS, qui se charge de la mise en forme et de la mise en page des éléments HTML. La version 3 du langage apporte son lot de nouveautés, toutes plus impressionnantes les unes que les autres. La standardisation de ce langage est assurée par la section CSS3 Working Group du W3C. Pour suivre l état d avancement des différents modules qui la composent, rendez-vous à Vous vous demandez peut-être si le couple HTML5/ CSS3 est nécessaire, ou si vous pouvez utiliser du code CSS 2 dans HTML5, ou encore du code CSS3 dans HTML 4.0x/XHTML 1.x. HTML5 et CSS3 procurent, chacun dans leur domaine, de réelles avancées dans la programmation sur le Web. Il serait vraiment dommage

4 4 HTML5 et CSS3 de passer à côté des possibilités offertes par l utilisation conjointe de ces deux langages. Je suggère donc de vous mettre au goût du jour en les apprenant. Votre investissement sera largement récompensé par la qualité, l universalité et la propreté du code produit À travers ce livre, vous verrez à quel point HTML5 et CSS3 vont simplifier la vie du développeur web et lui offrir de nouvelles possibilités très intéressantes pour concevoir des pages et applications fondées sur des fonctionnalités implémentées de façon native dans les navigateurs. Et ce, indépendamment de la plateforme (PC, Mac, Linux, tablette, smartphone, etc.). Les perspectives offertes sont vraiment très alléchantes. Alors, tournez vite les pages! Compatibilité avec les navigateurs Alors que nous écrivons ces lignes, les nouveaux éléments propres au langage HTML5 ne sont pas encore entièrement implémentés sur les principaux navigateurs. Pour connaître le taux de compatibilité de votre navigateur, rendez-vous à la page Un compte rendu clair et succinct y sera présenté et une note lui sera attribuée (voir Figure 0.1). Les éléments inconnus du navigateur sont généralement ignorés. Mais il est possible de leur affecter un style en utilisant une feuille de styles CSS. Notez cependant qu un traitement particulier doit être réservé à Internet Explo rer 8 et inférieur. En effet, celui-ci doit intégrer les éléments inconnus à son DOM via la méthode createelement, sans quoi, il ne sera pas en mesure de leur affecter un style. D autre part, il est nécessaire d attribuer un rendu block à ces éléments en initialisant leur propriété CSS display. Nous y reviendrons en détail par la suite.

5 5 Figure 0.1 : Google Chrome 6 est le navigateur le plus compatible avec HTML5. Les principaux navigateurs utilisent un préfixe pour (pré) implémenter les nouvelles propriétés CSS3 : -moz pour les navigateurs Mozilla (Firefox) ; -webkit pour les navigateurs Webkit (Safari, OmniWeb, Midori, etc.) ; -khtml pour les navigateurs Konqueror ; -o pour les navigateurs Opera ; -ms pour le navigateur Internet Explorer 9. Tant que la spécification du langage n a pas atteint au moins le statut de recommandation candidate, vous devrez utiliser plusieurs préfixes dans les propriétés CSS3 pour assurer la plus grande compatibilité possible. À terme, ces préfixes ne devraient plus avoir cours et une seule instruction devrait être interprétée à l identique dans tous les navigateurs. Wait and see

6 6 HTML5 et CSS3 Si vous utilisez encore des fonctions CSS spécifiques d Inter net Explorer (DropShadow(), filter() ou gradient() par exemple), mieux vaut les inclure dans une feuille de styles particulière, appelée dans un commentaire conditionnel, dans l en-tête du document : <head> <!--[if IE]> <link rel= stylesheet href= style-pour-ie.css > <![endif]--> </head> Si, par la suite, vous décidez de remplacer ces fonctions par du code CSS3, il vous suffira de supprimer l élément link correspondant. Principales différences entre HTML5 et ses prédécesseurs Avant tout, je tiens à rassurer tous les développeurs web qui se sentiraient frileux devant l apprentissage d un nouveau langage : HTML5 est rétrocompatible avec ses prédécesseurs HTML 4.x et XHTML 1.x. Les codes fonctionnels dans un de ces langages le seront donc également en HTML5. La déclaration de type de document (DTD) est simplifiée à son extrême. En fait, elle ne sert qu à éviter l ouverture du document en mode de compatibilité (Quircks Mode). Le jeu de balises propre à HTML5 introduit une nouvelle logique de formulation, plus sémantique et plus intuitive. Nous y reviendrons en détail au cours de plusieurs sections de cet ouvrage. Ici encore, vous pouvez continuer à utiliser les éléments auxquels vous étiez habitué jusque-là. Jetez cependant un coup d œil aux sections Structure d un document HTML5 du Chapitre 1 et Nouvelle organisation des documents du Chapitre 2. Vous serez certainement convaincu du bien-fondé de cette nouvelle syntaxe.

7 7 Les formats XML, tels que MathML, SVG (en HTML5, il est possible d utiliser les formats MathML et SVG en text/ html : ce n est plus un domaine réservé de application/ xml+xhtml), SMIL, RDF, WML, etc., peuvent être utilisés dans le code HTML5 codé en XML (XHTML5), ce qui offre de nouvelles perspectives fort intéressantes. Vous aurez tout loisir d en juger à travers plusieurs exemples plus loin dans ce livre. Enfin, les développeurs web peuvent désormais utiliser des API JavaScript gérées nativement par les navigateurs. Le but est d obtenir des niveaux de performances comparables à ceux des applications Desktop, mais aussi de tirer parti des possibilités offertes par les périphériques mobiles, qui vont prendre une part de plus en plus importante dans le paysage Internet. Bonne lecture et bon encodage À propos de l auteur Après avoir passé cinq ans dans de grandes sociétés françaises (Aérospatiale, EDF, Dassault), Michel Martin se consacre à l écriture de livres techniques et à la réalisation de CD-ROM d autoformation vidéo. Il compte aujourd hui plus de 300 livres et CD-ROM à son actif et est reconnu MVP (Most Valuable Professional) depuis six ans par Microsoft pour l ensemble de ses travaux sur les technologies Microsoft. Parallèlement, Michel Martin développe le site de formation vidéo Mediaforma ( Orienté sur divers produits et technologies informatiques tels que Windows 7, Office 2010 et HTML5/CSS3, il vulgarise leur utilisation au travers de vidéos courtes et directement utilisables.