You are on page 1of 17

1

Les bases du HTML5/CSS3
Ce premier chapitre rappelle tout ce qu’il est bon de connaître lorsqu’on se lance dans le développement HTML5/CSS3, depuis la déclaration de type de document jusqu’au regroupement de propriétés et de sélecteurs en passant par les différents types de feuilles de styles. À lire impérativement pour commencer sur de bonnes bases !
Attention Bien que définis en HTML5, les éléments présentés tout au long de l’ouvrage apparaissent en lettres minuscules. Cela vient d’une vieille habitude de codage en XHTML. Si vous le préférez, vous pouvez utiliser des capitales dans les balises. HTML5 ne vous en tiendra pas rigueur !

© 2011 Pearson France – HTML5 et CSS 3 – Michel Martin

dans le second. le code est compatible XML. Pour faire simple. Elle indique au navigateur les règles d’écriture utilisées dans le langage.01//EN” “http:// www.dtd”> © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin .org/TR/html4/strict. La balise <!DOCTYPE> (contraction de Document Type Declaration) doit apparaître en tête des documents HTML. Dans le premier cas.10 CHAPITRE 1 Les bases du HTML5/CSS3 Déclaration de type de document (DTD) <!DOCTYPE> Les documents HTML5 peuvent être écrits en HTML ou en XHTML (c’est-à-dire en HTML compatible XML). La balise <!DOCTYPE> des documents écrits en HTML5 est réduite à sa plus simple expression : <!DOCTYPE html> Ici. Les trois variantes généralement utilisées étaient les suivantes : • HTML 4. Dans les versions précédentes du langage HTML. il exigeait une référence à une DTD.0x. Sans elle.w3.x est à HTML 4. il ne l’est pas. Cet ouvrage s’intéresse uniquement à la version HTML de HTML5. Les deux standards sont similaires . transitionnelle ou frameset) du code HTML ni l’adresse de la DTD : seul le terme html est spécifié comme paramètre de la balise <!DOCTYPE>. vos documents risquent de ne pas être interprétés correctement. Par conséquent. la balise <!DOCTYPE> était plus longue car le langage HTML était basé sur le SGML.01 strict : <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4. seule la syntaxe change. il n’est plus question de préciser la version (stricte. disons que XHTML5 est à HTML5 ce que XHTML 1.

dtd”> • HTML 4. Il sera interprété en XHTML si les conditions suivantes sont réunies : • La syntaxe du code est de type XHTML et bien formée (en particulier caractères minuscules. il sait que le code qui la suit est du HTML5 et il l’interprète en mode standard. la balise <!DOCTYPE> n’est utilisée que pour activer le mode standard (Strict Mode).01 transitionnel : <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4. selon le navigateur et le type MIME utilisés.01 frameset : <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.org/TR/html4/loose.org/TR/html4/frameset.Syntaxes HTML et XHTML 11 • HTML 4.htaccess application/xhtml+xml charset Un document HTML5 peut être interprété en tant que HTML ou XHTML. Info La balise <!DOCTYPE> est facultative en XHTML5 : les documents de type MIME XML sont toujours traités en mode standard. Syntaxes HTML et XHTML . Si elle est omise.w3. © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin . Lorsque le navigateur la rencontre.dtd”> Dans HTML5.01 Frameset//EN” “http://www.w3. balises toujours terminées). le navigateur fonctionne en mode de compatibilité (Quircks Mode).

> • L’élément html définit l’espace de nom XHTML. Il peut être spécifié sur le serveur dans l’en-tête HTTP Content-Type. charset=utf-8 • Il est également possible d’utiliser une instruction PHP : header (“Content-type: application/xhtml+xml”). Par exemple. • Un ou plusieurs espaces de nom secondaires (SVG. etc. sur un serveur APACHE. Voici le squelette d’un document HTML5 écrit pour être interprété en HTML : <!DOCTYPE html> <html> <head> </head> <body> </body> </html> © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin . Xlink. insérez l’instruction suivante dans le fichier . MathML. • La balise <!DOCTYPE html> est optionnelle et peut être omise.) sont spécifiés si nécessaire. elle évitera cependant l’exécution en Quircks Mode. Dans certains navigateurs.htaccess : Content-Type: text/html. • Ou encore un élément meta dans le code HTML5 : <meta http-equiv=”Content-Type” content=”application/ ➥ xhtml+xml.12 CHAPITRE 1 Les bases du HTML5/CSS3 • Le type MIME est application/xhtml+xml.

il faut agir sur le fichier .Syntaxes HTML et XHTML 13 Et voici le squelette d’un document HTML5 écrit pour être interprété en XML : <?xml version=”1.0” encoding=”UTF-8”?> n’est pas obligatoire si le codage par défaut est UTF-8.w3.htaccess. Par exemple. la balise <?xml version=”1. nous avons choisi de développer en HTML5 et non en XHTML5. Les documents présentés seront donc conformes au premier squelette. sur un serveur APACHE. On peut alors configurer l’encodage dans l’en-tête HTTP Content-Type côté serveur. Attention Internet Explorer 8 n’implémente pas le type MIME application/xhtml+xml. à quelques rares exceptions près.0” encoding=”UTF-8”?> <html xmlns=”http://www. © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin . Dans cet ouvrage. D’autre part.org/1999/xhtml”> <head> </head> <body> </body> </html> La déclaration <?xml version=”1. charset=utf-8 Si la balise <?xml> est omise. La syntaxe est la suivante : Content-Type: text/html.0” encoding=”UTF-8”?> provoque le passage d’Internet Explorer 6 en Quircks Mode. il est également possible de spécifier l’encodage des caractères dans le document avec une balise <meta charset> : <meta charset=”UTF-8” />.

<head> <meta charset=UTF-8” /> … </head> Info Si votre code manipule des données à travers une base de données.columbia. celle-ci peut imposer le jeu de caractères. vous pouvez insérer une balise <meta charset=> dans l’en-tête de votre document. Consultez la page www.). etc.edu/ kermit/utf8. <head> <meta charset=ISO-8859-1” /> … </head> • UTF-8 pour afficher sur une même page des caractères issus de plusieurs langues (français et japonais par exemple). on peut aussi agir sur l’en-tête HTTP Content-Type côté serveur. Pour indiquer aux navigateurs dans quel jeu de caractères vous travaillez. anglais.html pour vous rendre compte des immenses possibilités du jeu de caractères UTF-8. Vous utiliserez le jeu de caractères : • ISO-8859-1 pour accéder directement à la majorité des caractères des langues occidentales (français. allemand. Pour indiquer le jeu de caractères au navigateur. espagnol.14 CHAPITRE 1 Les bases du HTML5/CSS3 Jeux de caractères <meta charset= > Les charsets (jeux de caractères) sont associés à la notion de claviers nationaux. © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin .

charset=utf-8 Définir la langue dans un document HTML5 <meta content=”fr” > Il est important de spécifier la langue utilisée dans un document HTML. Elle doit être spécifiée dans l’attribut lang. La langue d’un document HTML présente deux types d’informa­tions  : • La langue “primaire”.Définir la langue dans un document HTML5 15 Par exemple. la ligne suivante peut être insérée dans le fichier . insérez la ligne suivante dans le fichier . sur un serveur APACHE. tous les autres éléments hériteront la langue spécifiée sur celui-ci : <HTML lang=”fr”> © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin . En effet. par l’intermédiaire d’un élément meta : <meta http-equiv=”Content-Language” content=”fr” /> • La langue “de traitement”. cette information est primordiale pour le référencement (moteurs de recherche) et l’accessibilité (lecteurs d’écran) de la page.htaccess du dossier concerné : Content-Language :fr – Dans le document. sur un serveur APACHE. Elle peut être spécifiée : – Dans le champ d’en-tête HTTP.htaccess du dossier concerné : Content-Type: text/html. Par exemple. au niveau du serveur. L’élément html étant la racine du document.

par exemple : <html lang=”fr” > <!DOCTYPE html> <html> <head> … </head> <body> <p> Le texte du document est en français par défaut. consultez la page http://fr. <br>Le document se poursuit en français. <br>Mais la ligne suivante est en anglais. Structure d’un document HTML5 <!DOCTYPE> <html> <meta> <title> <base> <link> <style> <body> © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin .org/ wiki/Le_langage_HTML/Internationalisation. il suffit de renseigner l’attribut lang de son conteneur.16 CHAPITRE 1 Les bases du HTML5/CSS3 Si une portion du document utilise une autre langue. </p> </body> </html> Pour en savoir plus sur les langues utilisables dans un document HTML.wikibooks. <br><span lang=”en”>This line is written in english </ span>.

s’ils sont présents. • <head>…</head> définit l’en-tête du document. d’associer un jeu de caractères. Par exemple : <meta charset=”UTF-8” /> <meta name=”description” content=”Description de la page en quelques phrases. une description et un nom d’auteur au document. une ou plusieurs balises enfants : – Les éléments meta. Elle rassemble zéro. Leur squelette est le suivant : <!DOCTYPE html> <html> <head> <meta …> … <meta …> <title>…</title> <base /> <link …> <style>…</style> </head> <body> </body> </html> Examinons les balises de ce document.Structure d’un document HTML5 17 Cet ouvrage s’intéresse aux documents HTML5 destinés à être interprétés en tant que contenus HTML (et non XHTML). • <!DOCTYPE html>. définit le DOCTYPE HTML5. balise obligatoire. permettent. entre autres. • <html>…</html> délimite le document.” /> <meta name=”author” content=”Michel Martin” /> © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin .

C’est la raison pour laquelle. je ne l’utiliserai pas.monsite. Les attributs http-equiv et content ne sont plus nécessaires. _self (même frame). J’ai juste voulu signaler son existence. Ce dernier doit être placé entre la balise d’ouverture et la balise de fermeture. Par exemple. elle affecte le préfixe http://www.18 CHAPITRE 1 Les bases du HTML5/CSS3 Info La balise <meta charset=”…” /> doit être placée au début du <head> afin que les navigateurs sachent aussi vite que possible quel jeu de caractères est utilisé dans le document. L’élément meta. Les valeurs possibles pour l’attribut target sont _blank (fenêtre annexe).com” target=”_blank” /> Info L’élément base est facultatif. _parent (frame parent) ou _top (même fenêtre). 1. par la suite. et l’utilisation de l’attribut target peut nuire à l’accessibilité des pages. – <title></title> définit le titre du document.monsite. © 2011 Pearson France – HTML5 et CSS 3 – Michel Martin . permettant de définir des mots-clés (<meta name=”keywords” content=”…” />). Par exemple : <title>Mon premier document HTML5</title> – <base href=”” target=”” /> définit un chemin et une destination par défaut pour tous les liens hypertextes/hypermédias insérés dans le document. est obsolète et ne fait plus partie de l’algorithme d’indexation de Google. com à tous les liens du document et entraîne leur affichage dans une fenêtre complémentaire1 : <base href=”http://www.

– Christian Wenz . Sa propriété userAgent. © 2013 Pearson France – JavaScript.appName). 2 Expressions communes Certaines tâches JavaScript récurrentes doivent être réalisées quasiment chaque jour. de nos jours. L’objet JavaScript navigator propose des informations sur le navigateur. Même si les implémentations de navigateurs par JavaScript sont.alert(navigator. Détection du type de navigateur window. est très utile mais parfois difficile à analyser. Elle est aussi envoyée dans l’en-tête User-Agent HTTP de chaque requête. Nous présentons donc au cours de ce chapitre une suite de problèmes fréquents. la détection du type de navigateur constitue une partie essentielle de la boîte à outils du développeur JavaScript. assez compatibles les unes avec les autres (en particulier si on se souvient de l’époque de la guerre des navigateurs. avec leurs solutions. qui contient la chaîne d’identification complète du navigateur. Elles sont à la base de nombreuses applications JavaScript mais n’entrent dans aucune catégorie particulière. 2e éd. à la fin des années 1990).

vous pouvez rechercher navigator. il convient de le vérifier en premier. </script> Détermination du type de navigateur (navigateur. Et puisque le navigateur Opera risque d’être mal identifié (bien qu’il stocke “Opera” dans navigator.indexOf(“Gecko”) > -1) { browserType = “Mozilla”. Le Tableau 2. les navigateurs Safari et Chrome renvoient un nom incorrect.indexOf(“MSIE”) > -1) { browserType = “Internet Explorer”. var browserType = “unknown”.indexOf(“Opera”) > -1) { browserType = “Opera”. } else if (uA. Tableau 2. if (uA. comme le montre le code précédent. <script language=”JavaScript” type=”text/JavaScript”> var uA = navigator. 2e éd.userAgent pour certains types de navigateurs. } else if (uA. } window. – Christian Wenz .indexOf(“Safari”) > -1) { browserType = “Safari”. il suffit d’employer la propriété appName.20 CHAPITRE  2 Expressions communes Pour déterminer simplement le type d’un navigateur.userAgent).1 contient les valeurs appName des navigateurs les plus importants.html) © 2013 Pearson France – JavaScript.1 : valeurs appName pour divers navigateurs Navigateur Internet Explorer Navigateurs Mozilla Konqueror (KDE) Apple Safari Navigateur Opera Google Chrome appName Microsoft Internet Explorer Netscape Konqueror Netscape Opera Netscape Vous le voyez.indexOf(“Konqueror”) > -1) { browserType = “Konqueror”. } else if (uA.alert(browserType).userAgent. Pour contrebalancer cet effet. } else if (uA.

6 Opera/9. Détection du numéro de version du navigateur Pour déterminer le numéro de version du navigateur.3) Gecko/20060426 Firefox 1. Intel Mac OS X.4. Windows NT 5.0.1. Windows NT 5. en) Mozilla/4. 2e éd. U. • http://www.0.webreference. like Gecko) Safari/417. en.4322.3 Mozilla/5. en-US.userAgent.1. en) AppleWebKit/312. U.NET CLR 2.1. SV1. – Christian Wenz .1.00 Vous le voyez.00 (Windows NT 5. like Gecko) Safari/312.4. etc. le numéro de version est enfoui ailleurs dans la valeur de navigator. selon le type du navigateur. Vous trouverez de la documentation et des codes sur ces sites Web : • http://www.0 (compatible.3705. il existe plusieurs manières. ce qui peut ressembler à ceci : Mozilla/5.dk/browserspy/basic. Camino.0 (compatible. U. U. vous devez rechercher navigator.html .0. MSIE 6.Détection du type de navigateur 21 Avec quelques efforts de plus.1. U. en) Opera 9. Windows NT 5.4) Gecko/20030619 Netscape/7.8.1 (ax) Mozilla/4.3 Mozilla/5.html.0. Epiphany.userAgent.gemal. Il existe toutefois quelques ressources Web pour implémenter une détection des navigateurs et qui sont assez bien faites. Konqueror/3.0 (compatible.0. Windows NT 5. MSIE 6.0 (Macintosh.). La plupart du temps. © 2013 Pearson France – JavaScript. SeaMonkey.0 (Windows.9. en) AppleWebKit/418 (KHTML. FreeBSD) KHTML/3.5.com/tools/browser/ Java­Script-020214. rv:1. .2 (like Gecko) Mozilla/5.0 (Windows.8 (KHTML. Vous aurez alors la tâche fastidieuse de traiter tous les navigateurs et de vous tenir au courant des nouvelles méthodes. Galeon.50727) Mozilla/5.NET CLR 1.1. PPC Mac OS X.0 (Macintosh.0. . .NET CLR 1. ce script peut être prolongé pour distinguer les dérivés de Mozilla (Firefox. rv:1.

se fier aux numéros de version des navigateurs n’est pas seulement difficile. Vous le voyez dans l’exemple précédent. pour utiliser DOM (voir Chapitre 5. © 2013 Pearson France – JavaScript. c’est également gager les possibilités d’évolution. vous pourrez tenter d’utiliser le code précédent.write(“<img src=\”image. Grâce aux en-têtes côté serveur. Dès lors. – Christian Wenz . vous éviterez ces problèmes : if (window. Si la méthode getElementById() est implémentée. getElementById (sans parenthèses) renvoie une référence à la fonction. Le code associé est alors exécuté.“DOM”).png?” + Math. si vous vérifiez spécifiquement la prise en charge d’ActiveX. 2e éd. par exemple la prise en charge du XML. Mais.22 CHAPITRE  2 Expressions communes Vérification des capacités du navigateur if (document. Si elle est utilisée dans une condition. document. seules les versions Windows de IE connaissent ActiveX..random() + “\” />”). Il vaut mieux vérifier spécifiquement la prise en charge des objets spéciaux. Par exemple. elle renvoie true. Autre exemple : Internet Explorer accepte les objets ActiveX pour certaines applications..ActiveXObject) { // . } Empêcher la mise en cache document.getElementById) { // .. La vérification systématique pour Internet Explorer génère donc des problèmes pour les utilisateurs de Mac.. il est possible d’éviter la mise en cache d’images de type “contenu dynamique” ainsi que de pages HTML. Toutefois. la méthode n’est pas infaillible.

régler location.1296601696732852.replace(“nouvellePage.random() renvoie un nombre aléatoire compris entre 0 et 1. URL=Y” /> L’emplacement X désigne le nombre de secondes à patienter avant que la nouvelle page ne soit chargée .html”). © 2013 Pearson France – JavaScript. La propriété location. La page précédente arrive ensuite dans l’historique du navigateur.replace() : location. ajoutez un paramètre de chaîne de requête insignifiant à l’URL. Y indique la nouvelle URL. L’image (ou les autres données) n’est donc pas mise en cache. mais la requête est totalement nouvelle pour le navigateur. – Christian Wenz . Pour y remédier. par exemple 0. Redirection du navigateur location. qui charge alors la nouvelle page. Conséquence. utilisez la méthode location. L’annexer à une image ne modifie généralement pas les données envoyées du serveur.href permet un accès en lecture et en écriture à l’URL de la page en cours.href = “nouvellePage. Si vous souhaitez remplacer l’ancienne page dans l’historique (pour que le bouton Précédent ne fonctionne pas comme l’on s’y attendrait ici). Astuce Cela peut également être réalisé avec du HTML : <meta http-equiv=”Refresh” content=”X.html”. comme le montre le code précédent.href sur une autre valeur redirige le navigateur. 2e éd. comme dans l’extrait suivant : Math.Redirection du navigateur 23 puisque certains navigateurs ou serveurs proxy peuvent ignorer ces paramètres.

html) l’utilise comme valeur de retour pour un lien.” car les personnes disposant d’un système étranger risquent de ne pas voir s’afficher de bouton Annuler.prompt(“Saisissez votre nom”. “<Votre nom>”). Attention Sachez que cette boîte de dialogue est traduite par les navigateurs.prompt() permet aux utilisateurs de saisir du texte dans un champ de texte d’une seule ligne (voir Figure 2.confirm() renvoie true. window. Ainsi. Avec window. © 2013 Pearson France – JavaScript.alert() est assez commune mais il existe d’autres options. 2e éd.2).”> Cliquez ici</a> JavaScript propose une prise en charge limitée des fenêtres modales. La méthode window. S’il clique sur OK.. Le code qui précède (fichier confirmation. vous devez donc éviter d’inscrire un texte du style “Cliquez sur Annuler pour..32 CHAPITRE  2 Expressions communes Demande de confirmation à l’utilisateur <a href=”unePage.confirm(‘En êtes-vous sûr ?’). – Christian Wenz . Ces informations correspondent à la valeur de retour de l’appel de méthode et peuvent ensuite être utilisées dans le script. et false dans le cas contraire.html” onclick=”return window. La méthode window. Demande de données utilisateur var nom = window. le navigateur ne suit pas le lien. l’utilisateur se voit présenter une fenêtre de type OK/Annuler.confirm(). si l’utilisateur clique sur Annuler.

alert(“Bonjour. window.prompt(). les données saisies sont affichées. Info Sachez que si l’utilisateur clique sur le bouton Annuler ou appuie sur la touche d’échappement. – Christian Wenz .html) Figure 2.prompt() renvoie null. si l’utilisateur clique sur le bouton OK. Le code qui précède vérifie que. } </script> Demande de données utilisateur (prompt.Demande de données utilisateur 33 <script language=”JavaScript” type=”text/JavaScript”> var nom = window. © 2013 Pearson France – JavaScript. “<Votre nom>”).2 : la boîte de saisie générée par window. if (nom != null) { window. 2e éd.prompt(“Saisissez votre nom”. “ + nom + “ !”).