Les Bases Du PDF

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 dnis 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 detype dedocument (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 XHTML1.x est HTML4.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 spci 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 spci sur le serveur dans len-tte HTTP Content-Type. Par exemple, sur un serveur APACHE, insrez linstruction suivante dans le chier .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 dnit lespace de nom XHTML. Un ou plusieurs espaces de nom secondaires (SVG,
MathML, Xlink, etc.) sont spcis 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 congurer lencodage dans len-tte HTTP Content-Type ct serveur. Par exemple, sur un serveur APACHE, il faut agir sur le chier .htaccess. La syntaxe est la suivante:
Si la balise <?xml> est omise, il est galement possible de spcier 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 Explorer8 nimplmente pas le type MIME application/xhtml+xml. Dautre part, la balise <?xml version=1.0 encoding=UTF-8?> provoque le passage dInternet Explorer6 en Quircks Mode.
14
Jeux decaractres
<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 afcher 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.
Dnir la langue dansundocument HTML5
15
Par exemple, sur un serveur APACHE, insrez la ligne suivante dans le chier .htaccess du dossier concern:
Dnir la langue dansundocument HTML5

<meta content=fr >
Il est important de spcier 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 spcie: Dans le champ den-tte HTTP, au niveau du serveur. Par exemple, sur un serveur APACHE, la ligne suivante peut tre insre dans le chier .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 spcie dans

lattribut lang. Llment html tant la racine du document, tous les autres lments hriteront la langue spcie sur celui-ci:
<HTML lang=fr>
16
Si une portion du document utilise une autre langue, il suft 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 dundocument HTML5

<!DOCTYPE> <html> <meta> <title> <base> <link> <style> <body>
Structure dundocument 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, dnit le DOCTYPE HTML5. <html></html> dlimite le document. <head></head> dnit 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> an 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 dnir des mots-cls (<meta name=keywords content= />), est obsolte et ne fait plus partie de lalgorithme dindexation de Google.
<title></title> dnit 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= /> dnit un chemin et une destination par dfaut pour tous les liens hypertextes/hypermdias insrs dans le document. Par exemple, elle affecte le prxe http://www.monsite. com tous les liens du document et entrane leur afchage 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).
2
Expressions communes
Certaines tches JavaScript rcurrentes doivent tre ralises quasiment chaque jour. Elles sont la base de nombreuses applications JavaScript mais nentrent dans aucune catgorie particulire. Nous prsentons donc au cours de ce chapitre une suite de problmes frquents, avec leurs solutions.
Dtection du type de navigateur

window.alert(navigator.appName);
Mme si les implmentations de navigateurs par JavaScript sont, de nos jours, assez compatibles les unes avec les autres (en particulier si on se souvient de lpoque de la guerre des navigateurs, la n des annes1990), la dtection du type de navigateur constitue une partie essentielle de la bote outils du dveloppeur JavaScript. Lobjet JavaScript navigator propose des informations sur le navigateur. Sa proprit userAgent, qui contient la chane didentication complte du navigateur, est trs utile mais parfois difcile analyser. Elle est aussi envoye dans len-tte User-Agent HTTP de chaque requte.
2013 Pearson France JavaScript, 2e d. Christian Wenz
20
CHAPITRE 2 Expressions communes
Pour dterminer simplement le type dun navigateur, il suft demployer la proprit appName, comme le montre le code prcdent. Le Tableau2.1 contient les valeurs appName des navigateurs les plus importants.
Tableau2.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, les navigateurs Safari et Chrome renvoient un nom incorrect. Pour contrebalancer cet effet, vous pouvez rechercher navigator.userAgent pour certains types de navigateurs. Et puisque le navigateur Opera risque dtre mal identi (bien quil stocke Opera dans navigator.userAgent), il convient de le vrier en premier.
<script language=JavaScript type=text/JavaScript> var uA = navigator.userAgent; var browserType = unknown; if (uA.indexOf(Opera) > -1) { browserType = Opera; } else if (uA.indexOf(Safari) > -1) { browserType = Safari; } else if (uA.indexOf(Konqueror) > -1) { browserType = Konqueror; } else if (uA.indexOf(Gecko) > -1) { browserType = Mozilla; } else if (uA.indexOf(MSIE) > -1) { browserType = Internet Explorer; } window.alert(browserType); </script>
Dtermination du type de navigateur (navigateur.html)
Dtection du type de navigateur
21
Avec quelques efforts de plus, ce script peut tre prolong pour distinguer les drivs de Mozilla (Firefox, Epiphany, Galeon, Camino, SeaMonkey,etc.).
Dtection du numro de version du navigateur

Pour dterminer le numro de version du navigateur, il existe plusieurs manires. La plupart du temps, vous devez rechercher navigator.userAgent, ce qui peut ressembler ceci: Mozilla/5.0 (Windows; U; WindowsNT 5.1; en; rv:1.8.0.3) Gecko/20060426 Firefox 1.5.0.3 Mozilla/5.0 (Windows; U; WindowsNT 5.1; en-US; rv:1.4) Gecko/20030619 Netscape/7.1 (ax) Mozilla/4.0 (compatible; MSIE 6.0; WindowsNT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727) Mozilla/5.0 (compatible; Konqueror/3.4; FreeBSD) KHTML/3.4.2 (like Gecko) Mozilla/5.0 (Macintosh; U; Intel MacOS X; en) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3 Mozilla/5.0 (Macintosh; U; PPC MacOS X; en) AppleWebKit/312.8 (KHTML, like Gecko) Safari/312.6 Opera/9.00 (WindowsNT 5.1; U; en) Mozilla/4.0 (compatible; MSIE 6.0; WindowsNT 5.1; en) Opera 9.00 Vous le voyez, selon le type du navigateur, le numro de version est enfoui ailleurs dans la valeur de navigator.userAgent. Vous aurez alors la tche fastidieuse de traiter tous les navigateurs et de vous tenir au courant des nouvelles mthodes. Il existe toutefois quelques ressources Web pour implmenter une dtection des navigateurs et qui sont assez bien faites. Vous trouverez de la documentation et des codes sur ces sites Web: http://www.webreference.com/tools/browser/ JavaScript-020214.html; http://www.gemal.dk/browserspy/basic.html.
22
Vrication des capacits dunavigateur

if (document.getElementById) { // ...
Vous le voyez dans lexemple prcdent, se er aux numros de version des navigateurs nest pas seulement difcile, cest galement gager les possibilits dvolution. Il vaut mieux vrier spciquement la prise en charge des objets spciaux. Par exemple, pour utiliser DOM (voir Chapitre5,DOM), vous pourrez tenter dutiliser le code prcdent. Si la mthode getElementById() est implmente, document. getElementById (sans parenthses) renvoie une rfrence la fonction. Si elle est utilise dans une condition, elle renvoie true. Le code associ est alors excut. Autre exemple: Internet Explorer accepte les objets ActiveX pour certaines applications, par exemple la prise en charge du XML. Toutefois, seules les versions Windows de IE connaissent ActiveX. La vrication systmatique pour Internet Explorer gnre donc des problmes pour les utilisateurs de Mac. Ds lors, si vous vriez spciquement la prise en charge dActiveX, vous viterez ces problmes:
if (window.ActiveXObject) { // ... }
Empcher la mise en cache

document.write(<img src=\image.png? + Math.random() + \ />);
Grce aux en-ttes ct serveur, il est possible dviter la mise en cache dimages de type contenu dynamique ainsi que de pages HTML. Mais, la mthode nest pas infaillible,
Redirection du navigateur
23
puisque certains navigateurs ou serveurs proxy peuvent ignorer ces paramtres. Pour y remdier, ajoutez un paramtre de chane de requte insigniant lURL, comme dans lextrait suivant: Math.random() renvoie un nombre alatoire compris entre0et1, par exemple 0,1296601696732852. Lannexer une image ne modie gnralement pas les donnes envoyes du serveur, mais la requte est totalement nouvelle pour le navigateur. Limage (ou les autres donnes) nest donc pas mise en cache.
Redirection du navigateur
location.href = nouvellePage.html;
La proprit location.href permet un accs en lecture et en criture lURL de la page en cours. Consquence, rgler location.href sur une autre valeur redirige le navigateur, qui charge alors la nouvelle page, comme le montre le code prcdent.
Astuce Cela peut galement tre ralis avec du HTML: <meta http-equiv=Refresh content=X; URL=Y /> Lemplacement X dsigne le nombre de secondes patienter avant que la nouvelle page ne soit charge; Y indique la nouvelle URL.
La page prcdente arrive ensuite dans lhistorique du navigateur. Si vous souhaitez remplacer lancienne page dans lhistorique (pour que le bouton Prcdent ne fonctionne pas comme lon sy attendrait ici), utilisez la mthode location.replace():
location.replace(nouvellePage.html);
32
Demande de conrmation lutilisateur

<a href=unePage.html onclick=return window.conrm(En tes-vous sr ?);> Cliquez ici</a>
JavaScript propose une prise en charge limite des fentres modales. La mthode window.alert() est assez commune mais il existe dautres options. Avec window.conrm(), lutilisateur se voit prsenter une fentre de type OK/Annuler. Sil clique sur OK, window.conrm() renvoie true, et false dans le cas contraire. Le code qui prcde (chier conrmation.html) lutilise comme valeur de retour pour un lien. Ainsi, si lutilisateur clique sur Annuler, le navigateur ne suit pas le lien.
Attention Sachez que cette bote de dialogue est traduite par les navigateurs, vous devez donc viter dinscrire un texte du style Cliquez sur Annuler pour... car les personnes disposant dun systme tranger risquent de ne pas voir safcher de bouton Annuler.
Demande de donnes utilisateur

var nom = window.prompt(Saisissez votre nom, <Votre nom>);
La mthode window.prompt() permet aux utilisateurs de saisir du texte dans un champ de texte dune seule ligne (voir Figure2.2). Ces informations correspondent la valeur de retour de lappel de mthode et peuvent ensuite tre utilises dans le script.
Demande de donnes utilisateur
33
<script language=JavaScript type=text/JavaScript> var nom = window.prompt(Saisissez votre nom, <Votre nom>); if (nom != null) { window.alert(Bonjour, + nom + !); } </script>
Demande de donnes utilisateur (prompt.html)
Figure2.2: la bote de saisie gnre par window.prompt(). Info Sachez que si lutilisateur clique sur le bouton Annuler ou appuie sur la touche dchappement, window.prompt() renvoie null. Le code qui prcde vrie que, si lutilisateur clique sur le bouton OK, les donnes saisies sont afches.

Les Bases Du PDF

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

Les Bases Du PDF

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 detype dedocument (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 afcher sur une mme page des caractres

Dnir la langue dansundocument HTML5

Dnir la langue dansundocument HTML5

Dans le document, par lintermdiaire dun lment meta:

La langue de traitement. Elle doit tre spcie dans

2011 Pearson France HTML5 et CSS 3 Michel Martin

CHAPITRE 1 Les bases du HTML5/CSS3

Structure dundocument HTML5

2011 Pearson France HTML5 et CSS 3 Michel Martin

Structure dundocument HTML5

2011 Pearson France HTML5 et CSS 3 Michel Martin

CHAPITRE 1 Les bases du HTML5/CSS3

Dtection du type de navigateur

CHAPITRE 2 Expressions communes

Dtection du type de navigateur

Dtection du numro de version du navigateur

2013 Pearson France JavaScript, 2e d. Christian Wenz

CHAPITRE 2 Expressions communes

Vrication des capacits dunavigateur

Empcher la mise en cache

2013 Pearson France JavaScript, 2e d. Christian Wenz

CHAPITRE 2 Expressions communes

Demande de conrmation lutilisateur

Demande de donnes utilisateur

2013 Pearson France JavaScript, 2e d. Christian Wenz

Demande de donnes utilisateur

2013 Pearson France JavaScript, 2e d. Christian Wenz

Vous aimerez peut-être aussi