2477 Chap01

1
Les bases du HTML5/CSS3

Ce premier chapitre rappelle tout ce quil est bon de connatre lorsquon se lance dans le dveloppement HTML5/CSS3, depuis la dclaration de type de document jusquau regroupement de proprits et de slecteurs en passant par les diffrents types de feuilles de styles. lire imprativement pour commencer sur de bonnes bases !
Attention Bien que dfinis en HTML5, les lments prsents tout au long de louvrage apparaissent en lettres minuscules. Cela vient dune vieille habitude de codage en XHTML. Si vous le prfrez, vous pouvez utiliser des capitales dans les balises. HTML5 ne vous en tiendra pas rigueur !
2011 Pearson France HTML5 et CSS 3 Michel Martin
10
CHAPITRE 1 Les bases du HTML5/CSS3
Dclaration de type de document (DTD)

<!DOCTYPE>
Les documents HTML5 peuvent tre crits en HTML ou en XHTML (cest--dire en HTML compatible XML). Pour faire simple, disons que XHTML5 est HTML5 ce que XHTML 1.x est HTML 4.0x. Les deux standards sont similaires ; seule la syntaxe change. Dans le premier cas, le code est compatible XML, dans le second, il ne lest pas. Cet ouvrage sintresse uniquement la version HTML de HTML5. La balise <!DOCTYPE> (contraction de Document Type Declaration) doit apparatre en tte des documents HTML. Elle indique au navigateur les rgles dcriture utilises dans le langage. Sans elle, vos documents risquent de ne pas tre interprts correctement. La balise <!DOCTYPE> des documents crits en HTML5 est rduite sa plus simple expression :
<!DOCTYPE html>
Ici, il nest plus question de prciser la version (stricte, transitionnelle ou frameset) du code HTML ni ladresse de la DTD : seul le terme html est spcifi comme paramtre de la balise <!DOCTYPE>. Dans les versions prcdentes du langage HTML, la balise <!DOCTYPE> tait plus longue car le langage HTML tait bas sur le SGML. Par consquent, il exigeait une rfrence une DTD. Les trois variantes gnralement utilises taient les suivantes : HTML 4.01 strict :
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http:// www.w3.org/TR/html4/strict.dtd>
Syntaxes HTML et XHTML
11
HTML 4.01 transitionnel :

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>
HTML 4.01 frameset :

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd>
Dans HTML5, la balise <!DOCTYPE> nest utilise que pour activer le mode standard (Strict Mode). Lorsque le navigateur la rencontre, il sait que le code qui la suit est du HTML5 et il linterprte en mode standard. Si elle est omise, le navigateur fonctionne en mode de compatibilit (Quircks Mode).
Info La balise <!DOCTYPE> est facultative en XHTML5 : les documents de type MIME XML sont toujours traits en mode standard.

.htaccess application/xhtml+xml charset
Un document HTML5 peut tre interprt en tant que HTML ou XHTML, selon le navigateur et le type MIME utiliss. Il sera interprt en XHTML si les conditions suivantes sont runies : La syntaxe du code est de type XHTML et bien forme (en particulier caractres minuscules, balises toujours termines).
12
Le
type MIME est application/xhtml+xml. Il peut tre spcifi sur le serveur dans len-tte HTTP Content-Type. Par exemple, sur un serveur APACHE, insrez linstruction suivante dans le fichier .htaccess :
Content-Type: text/html; charset=utf-8
Il est galement possible dutiliser une instruction PHP :

header (Content-type: application/xhtml+xml);
Ou encore un lment meta dans le code HTML5 :

<meta http-equiv=Content-Type content=application/ xhtml+xml;>
Llment html dfinit lespace de nom XHTML. Un ou plusieurs espaces de nom secondaires (SVG,
MathML, Xlink, etc.) sont spcifis si ncessaire. La balise <!DOCTYPE html> est optionnelle et peut tre omise. Dans certains navigateurs, elle vitera cependant lexcution en Quircks Mode. Voici le squelette dun document HTML5 crit pour tre interprt en HTML :
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
13
Et voici le squelette dun document HTML5 crit pour tre interprt en XML :
<?xml version=1.0 encoding=UTF-8?> <html xmlns=http://www.w3.org/1999/xhtml> <head> </head> <body> </body> </html>
La dclaration <?xml version=1.0 encoding=UTF-8?> nest pas obligatoire si le codage par dfaut est UTF-8. On peut alors configurer lencodage dans len-tte HTTP Content-Type ct serveur. Par exemple, sur un serveur APACHE, il faut agir sur le fichier .htaccess. La syntaxe est la suivante :
Si la balise <?xml> est omise, il est galement possible de spcifier lencodage des caractres dans le document avec une balise <meta charset> :
<meta charset=UTF-8 />.
Dans cet ouvrage, quelques rares exceptions prs, nous avons choisi de dvelopper en HTML5 et non en XHTML5. Les documents prsents seront donc conformes au premier squelette.
Attention Internet Explorer 8 nimplmente pas le type MIME application/xhtml+xml. Dautre part, la balise <?xml version=1.0 encoding=UTF-8?> provoque le passage dInternet Explorer 6 en Quircks Mode.
14
Jeux de caractres
<meta charset= >
Les charsets (jeux de caractres) sont associs la notion de claviers nationaux. Pour indiquer aux navigateurs dans quel jeu de caractres vous travaillez, vous pouvez insrer une balise <meta charset=> dans len-tte de votre document. Vous utiliserez le jeu de caractres : ISO-8859-1 pour accder directement la majorit des caractres des langues occidentales (franais, anglais, allemand, espagnol, etc.).
<head> <meta charset=ISO-8859-1 /> </head>
UTF-8 pour afficher sur une mme page des caractres
issus de plusieurs langues (franais et japonais par exemple). Consultez la page www.columbia.edu/ kermit/utf8.html pour vous rendre compte des immenses possibilits du jeu de caractres UTF-8.
<head> <meta charset=UTF-8 /> </head> Info Si votre code manipule des donnes travers une base de donnes, celle-ci peut imposer le jeu de caractres.
Pour indiquer le jeu de caractres au navigateur, on peut aussi agir sur len-tte HTTP Content-Type ct serveur.
Dfinir la langue dans un document HTML5
15
Par exemple, sur un serveur APACHE, insrez la ligne suivante dans le fichier .htaccess du dossier concern :
Dfinir la langue dans un document HTML5

<meta content=fr >
Il est important de spcifier la langue utilise dans un document HTML. En effet, cette information est primordiale pour le rfrencement (moteurs de recherche) et laccessibilit (lecteurs dcran) de la page. La langue dun document HTML prsente deux types dinformations : La langue primaire. Elle peut tre spcifie : Dans le champ den-tte HTTP, au niveau du serveur. Par exemple, sur un serveur APACHE, la ligne suivante peut tre insre dans le fichier .htaccess du dossier concern :
Content-Language :fr
Dans le document, par lintermdiaire dun lment meta :

<meta http-equiv=Content-Language content=fr />
La langue de traitement. Elle doit tre spcifie dans

lattribut lang. Llment html tant la racine du document, tous les autres lments hriteront la langue spcifie sur celui-ci :
<HTML lang=fr>
16
Si une portion du document utilise une autre langue, il suffit de renseigner lattribut lang de son conteneur, par exemple :
<html lang=fr > <!DOCTYPE html> <html> <head> </head> <body> <p> Le texte du document est en franais par dfaut. <br>Mais la ligne suivante est en anglais. <br><span lang=en>This line is written in english </ span>. <br>Le document se poursuit en franais. </p> </body> </html>
Pour en savoir plus sur les langues utilisables dans un document HTML, consultez la page http://fr.wikibooks.org/ wiki/Le_langage_HTML/Internationalisation.
Structure dun document HTML5

<!DOCTYPE> <html> <meta> <title> <base> <link> <style> <body>
Structure dun document HTML5
17
Cet ouvrage sintresse aux documents HTML5 destins tre interprts en tant que contenus HTML (et non XHTML). 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. <!DOCTYPE html>, balise obligatoire, dfinit le DOCTYPE HTML5. <html></html> dlimite le document. <head></head> dfinit len-tte du document. Elle rassemble zro, une ou plusieurs balises enfants : Les lments meta, sils sont prsents, permettent, entre autres, dassocier un jeu de caractres, une description et un nom dauteur au document. Par exemple :
<meta charset=UTF-8 /> <meta name=description content=Description de la page en quelques phrases. /> <meta name=author content=Michel Martin />
18
Info La balise <meta charset= /> doit tre place au dbut du <head> afin que les navigateurs sachent aussi vite que possible quel jeu de caractres est utilis dans le document. Les attributs http-equiv et content ne sont plus ncessaires. Llment meta, permettant de dfinir des mots-cls (<meta name=keywords content= />), est obsolte et ne fait plus partie de lalgorithme dindexation de Google.
<title></title> dfinit le titre du document. Ce dernier doit tre plac entre la balise douverture et la balise de fermeture. Par exemple :
<title>Mon premier document HTML5</title>
<base href= target= /> dfinit un chemin et une destination par dfaut pour tous les liens hypertextes/hypermdias insrs dans le document. Par exemple, elle affecte le prfixe http://www.monsite. com tous les liens du document et entrane leur affichage dans une fentre complmentaire1 :
<base href=http://www.monsite.com target=_blank /> Info Llment base est facultatif, et lutilisation de lattribut target peut nuire laccessibilit des pages. Cest la raison pour laquelle, par la suite, je ne lutiliserai pas. Jai juste voulu signaler son existence.
1. Les valeurs possibles pour lattribut target sont _blank (fentre annexe), _self (mme frame), _parent (frame parent) ou _top (mme fentre).

2477 Chap01

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

2477 Chap01

Transféré par

Droits d'auteur :

Formats disponibles

1

Les bases du HTML5/CSS3

2011 Pearson France HTML5 et CSS 3 Michel Martin

CHAPITRE 1 Les bases du HTML5/CSS3

Dclaration de type de document (DTD)

2011 Pearson France HTML5 et CSS 3 Michel Martin

Syntaxes HTML et XHTML

HTML 4.01 transitionnel :

HTML 4.01 frameset :

Syntaxes HTML et XHTML

2011 Pearson France HTML5 et CSS 3 Michel Martin

CHAPITRE 1 Les bases du HTML5/CSS3

Content-Type: text/html; charset=utf-8

Il est galement possible dutiliser une instruction PHP :

Ou encore un lment meta dans le code HTML5 :

2011 Pearson France HTML5 et CSS 3 Michel Martin

Syntaxes HTML et XHTML

2011 Pearson France HTML5 et CSS 3 Michel Martin

CHAPITRE 1 Les bases du HTML5/CSS3

UTF-8 pour afficher sur une mme page des caractres

2011 Pearson France HTML5 et CSS 3 Michel Martin

Dfinir la langue dans un document HTML5

Dfinir la langue dans un document HTML5

Dans le document, par lintermdiaire dun lment meta :

La langue de traitement. Elle doit tre spcifie dans

2011 Pearson France HTML5 et CSS 3 Michel Martin

CHAPITRE 1 Les bases du HTML5/CSS3

Structure dun document HTML5

2011 Pearson France HTML5 et CSS 3 Michel Martin

Structure dun document HTML5

2011 Pearson France HTML5 et CSS 3 Michel Martin

CHAPITRE 1 Les bases du HTML5/CSS3

Vous aimerez peut-être aussi