Vous êtes sur la page 1sur 18

HTML 5

PROJET 
HyperText Mark-Up
Language

Année Universitaire :
2014/2015
Sommaire
I. Introduction...................................................................................................... 2
1. Une Brève histoire du web............................................................................ 2
2. Le consortium W3C et le groupe WhatWG....................................................3
3. Le principe du Web....................................................................................... 4
II. Qu’est ce que HTML 5 ?................................................................................... 5
1. Définition...................................................................................................... 5
2. Standard HTML............................................................................................. 5
3. Versions du langage HTML............................................................................ 5
III. Les grandes nouveautés de l’HTML 5............................................................6
1....................................................................... La déclaration de DOCTYPE
6
2. Les navigateurs et le support de l’HTML 5....................................................6
3. Éléments supprimés en HTML5.....................................................................8
4. Les nouveaux éléments HTML5....................................................................8
5. Etudes de quelques exemples....................................................................10
IV. Conclusion.................................................................................................. 15

Tableaux
Tableau 1: Éléments HTML4 supprimés en HTML5[6].............................................8
Tableau 2 : Nouveaux éléments sémantiques[6]....................................................8
Tableau 3: Nouveaux éléments de formulaire[6]....................................................9
Tableau 4: Nouveaux Types d'entrées[6]................................................................9
Tableau 5: HTML5 - Nouvel Syntaxe d’attribut[6].................................................10
Tableau 6: Nouveaux éléments graphiques[6].....................................................10
Tableau 7: Nouveaux éléments multimédias [6]...................................................10
Tableau 8: La première version de navigateur qui supporte <canvas>[6]...........11
Tableau 9: La première version de navigateur qui supporte <svg>[6]................12
Tableau 10: La première version de navigateur qui supporte <video>[6]...........13
Tableau 11: HTML Vidéo - Support du navigateur[6]............................................13
Tableau 12: La première version de navigateur qui supporte <audio>[6]...........13
Tableau 13:HTML Audio-Support du navigateur[6]...............................................14
Tableau 14: La première version de navigateur qui supporte la Geolocation[6]...14

Figures
Figure 1: Le premier site web[1]............................................................................. 2
Figure 2 : Forme d'une page HTML[6].....................................................................9
Figure 3: Graphique réaliser par canvas...............................................................11
Figure 4: Dessin réaliser par SVG[6].....................................................................12

I. Introduction

15
1. Une Brève histoire du web

Tim Berners-Lee, un physicien britannique, a inventé le web au CERN"


centre européen de recherche nucléaire " en 1989. À l’origine, le projet,
baptisé « World Wide Web », a été conçu et développé pour que des
scientifiques travaillant dans les universités et les instituts du monde
entier puissent s'échanger des informations instantanément.

Le premier site web créé au CERN – et dans le monde – était destiné au


projet World Wide Web lui-même. Il était hébergé sur l’ordinateur NeXT de
Tim Berners-Lee. Le site décrivait les principales caractéristiques du web
et expliquait comment accéder aux documents d’autres personnes et
comment configurer son propre serveur. L’ordinateur NeXT – le serveur
web d’origine – est encore au CERN. En 2013, le CERN a entrepris de
remettre en service le premier site web
"http://info.cern.ch/hypertext/WWW/TheProject.html", et a même rétabli le
site web à son adresse d’origine.

Le 30 avril 1993, le CERN a mis le logiciel du World Wide Web dans le


domaine public. Puis il a émis la version suivante de l’application sous
licence libre afin d’accélérer sa diffusion. En donnant libre accès au logiciel
nécessaire pour faire fonctionner un serveur w

eb, ainsi qu’au navigateur et à la bibliothèque de codes associés, il a


permis à la Toile de se tisser.[1]

15
Figure 1: Le premier site web[1]

2. Le consortium W3C et le groupe WhatWG

 W3C
Le W3C, World Wide Web Consortium, est un organisme international qui
développe des standards pour le Web afin que les gens puissent
communiquer efficacement à travers Internet.
Le consortium existe depuis 1994 et est dirigé par l'inventeur du Web, Tim
Berners-Lee.
Il est composé d'une équipe fixe (environ 70 personnes) et
des membres (plus de 450 organisations).
Les membres délèguent des ingénieurs au sein de W3C et participent ainsi
à l'élaboration des spécifications techniques pour les technologies du Web.
Les spécifications déjà élaborées, il y en a une cinquantaine
(HTML, XML, CSS, SVG...), sont accessibles au public sur le site de W3C. Il
en est de même pour les compte-rendus des développements en cours.[2]
 Le WHATWG

Le WHATWG, pour « Web Hypertext Application Technology Working Group


» est un groupe communautaire en ligne, créé en 2004 par des membres
d'Apple, Mozilla et Opera après un workshop du W3C, lors duquel ils ont
relevé leur inquiétude face au désintérêt du W3C pour HTML par rapport à

15
XHTML. Le but du WHATWG est de définir et faire évoluer les spécifications
HTML, et certaines APIs intrinsèques (Web Storage, Web Workers, Web
Sockets, ...). Administrativement, le WHATWG n'a pas d'existence, c'est
simplement une communauté sur le web. Le WHATWG est dirigé par un
petit comité, le nombre de membres est illimité et la participation est
gratuite.[3]
 le W3C et le WHATWG se séparent à cause de divergences
insolubles

Le WHATWG est une entité séparée du W3C. Elle a été créée en réaction
aux lenteurs du Consortium dont le processus de standardisation est
parfois jugé comme manquant de nervosité. Le W3C réunit un grand
nombre d’acteurs et doit accorder l’ensemble des participants.
Le HTML5, tel qu’il est travaillé par le W3C, est à la base un regroupement
de propositions du WHATWG. Cependant, la gestion du W3C a
progressivement provoqué des tensions, le Consortium ayant choisi de
séparer le « pack » HTML5 en sous-spécifications, notamment pour l’API
canvas 2D, les évènements côté serveurs et ainsi de suite. De son côté, le
WHATWG est revenu à une spécification unique qu’elle nomme « HTML
Living Standard » : un ensemble insécable de technologies liées.
Le WHATWG a du coup décidé de faire cavalier seul. Dans un mail
explicatif, Ian Hickson, membre du WHATWG, explique que les objectifs
des deux entités s’écartaient trop l’un de l’autre. Le fonctionnement du
W3C repose sur un modèle de versions préliminaires. De son côté, le
WHATWG travaille sur la définition même du HTML et des technologies
attenantes, et corrige les bugs au fur et à mesure qu’ils sont détectés.
Il existe en fait surtout une conception très différente de comment une
standardisation doit être menée. Le WHATWG se concentre
essentiellement sur la technique tandis que le W3C considère d’autres
aspects. En octobre 2010, Daniel Glazman, travaillant sur le CSS au
W3C, expliquait à ZDnet : « Le W3C suit un processus assez (trop ?)
rigoureux, mais l'expérience des 16 ans d'existence du W3C a montré
pourquoi c'est nécessaire ; de son côté, le WHATWG fonce en ne se
préoccupant quasiment de rien si ce n'est de la technique ».[4]
 La bonne marche du HTML5 pourrait être perturbée

Devant un tel « fork », doit-on craindre que le HTML5 évolue réellement


dans des directions différentes ? Rien n’est sûr.
Le WHATWG, dont fait également partie Google, va clairement avancer
plus vite que le W3C. Les éditeurs de navigateur vont se référer au travail
fait par le groupe, mais il ne s’agit pas pour autant de se détourner du
W3C. Les deux travaux auront un certain degré de complémentarité. Il est
simplement dommage que le manque d’accord sur les questions

15
d’organisation mène à la création de deux versions différentes d’un même
standard.
La séparation est d’autant plus regrettable que le HTML5 avait déjà ses
propres difficultés. En effet, il ne faut pas oublier que la norme n’en est
pas encore officiellement une : il s’agit d’un brouillon. Bien que l’on en soit
à plusieurs versions, tous les aspects n’ont pas encore été finalisés. Le
support réalisé par les navigateurs est donc forcément temporaire, les
points finalisés étant mis à jour progressivement.
En outre, le HTML5 a fort à faire dans le domaine mobile. Le moteur de
rendu Webkit y règne pratiquement en maître. Présent dans iOS et Android
(Safari, Chrome, etc.), il concentre l’attention des développeurs qui
deviennent parfois plus sensibles à ses évolutions qu’à celles des
organismes de standardisation. La mission du HTML5 est donc bien loin
d’être terminée et la séparation du W3C et du WHATWG pourrait, au moins
pendant un temps, créer des perturbations supplémentaires.[4]

3. Le principe du Web

Le web est composé de pages web stockées sur des serveurs web, c'est-à-
dire des machines connectées à Internet en permanence et chargées de
fournir les pages web demandées. Chacune des pages web, et plus
généralement toute ressource en ligne (image, vidéo, musique, animation,
etc.), est repérée par une adresse unique appelée URL.
L'élément clé pour la navigation au sein des pages web est le navigateur
(en anglais browser, parfois également appelé fureteur, fouineur,
feuilleteur ou butineur au Québec), c'est-à-dire le logiciel client capable
d'interroger les serveurs web, d'exploiter leurs résultats et de mettre en
page les informations grâce aux instructions contenues dans la page
HTML.
Parmi les principaux navigateurs utilisés sur Internet, citons notamment
les suivants :
Mozilla Firefox, Microsoft Internet Explorer, Chrome, Safari.[5]

II. Qu’est ce que HTML 5 ?


1. Définition

Le HTML (« HyperText Mark-Up Language ») est un langage dit de «


marquage » (de « structuration » ou de « balisage ») dont le rôle est de
formaliser l'écriture d'un document avec des balises de formatage. Les
balises permettent d'indiquer la façon dont doit être présenté le document
et les liens qu'il établit avec d'autres documents.
Le langage HTML permet notamment la lecture de documents sur Internet
à partir de machines différentes, grâce au protocole HTTP, permettant

15
d'accéder via le réseau à des documents repérés par une adresse unique,
appelée URL.
On appelle World Wide Web (noté WWW) ou tout simplement Web (mot
anglais signifiant toile) la "toile virtuelle" formée par les différents
documents (appelés « pages web ») liés entre-eux par des hyperliens.
Les pages web sont généralement organisées autour d'une page d'accueil,
jouant un point central dans la navigation à l'aide des liens hypertextes.
Cet ensemble cohérent de pages web liées par des liens hypertextes et
articulées autour d'une page d'accueil commune est appelée site web.
Le Web est ainsi une énorme archive vivante composée d'une myriade de
sites web proposant des pages web pouvant contenir du texte mis en
forme, des images, des sons, des vidéo, etc.[5]

2. Standard HTML

Il est important de comprendre que le langage HTML est un standard,


c'est-à-dire qu'il s'agit de recommandations publiées par un consortium
international : le World Wide Web Consortium (W3C).
Les spécifications officielles du HTML décrivent donc les "instructions"
HTML mais en aucun cas leur implémentation, c'est-à-dire leur traduction
en programmes d'ordinateur, afin de permettre la consultation de pages
web indépendamment du système d'exploitation ou de l'architecture de
l'ordinateur.
Toutefois, aussi étoffées les spécifications soient-elles, il existe toujours
une marge d'interprétation de la part des navigateurs, ce qui explique
qu'une même page web puisse s'afficher différemment d'un navigateur
Internet à l'autre.
De plus, il arrive parfois que certains éditeurs de logiciels ajoutent des
instructions HTML propriétaires, c'est-à-dire ne faisant pas partie des
spécifications du W3C. Ainsi des pages web contenant ce type
d'instruction pourront être parfaitement affichées sur un navigateur et
seront totalement ou en partie illisibles sur les autres, d'où la nécessité de
créer des pages web respectant les recommandations du W3C afin de
permettre leur consultation par le plus grand nombre.[5]

3. Versions du langage HTML

Le langage HTML a été mis au point par Tim Berners-Lee, alors chercheur
au CERN, à partir de 1989. Celui-ci annonça officiellement la création du
web sur Usenet en août 1991. Ce n'est cependant qu'à partir de 1993 que
l'on considère l'état du HTML suffisamment avancé pour parler de langage
(HTML est alors baptisée symboliquement HTML 1.0). Le navigateur
internet utilisé à l'époque était nommé NCSA Mosaïc.
Le RFC 1866, daté de novembre 1995 représente la première version
officielle de HTML, c'est-à-dire le HTML 2.0.
HTML 3
Après la brêve apparition d'un HTML 3.0, qui ne vit jamais officiellement le
jour, le HTML 3.2 devint le standard officiel le 14 janvier 1997. Les apports
les plus marquants du HTML 3.2 étaient la standardisation des tableaux
ainsi que d'un grand nombre d'éléments de présentation.

15
HTML 4
Le 18 décembre 1997, le HTML 4.0 a été publié. La version 4.0 du langage
HTML standardise notamment les feuilles de style et les cadres (frames).
La version HTML 4.01, apparue le 24 décembre 1999 apporte quelques
modifications mineures au HTML 4.0.
HTML 5
Le HTML 5.0 est en cours de spécification en 2012. La version 5.0 du
langage HTML définit deux syntaxes de DOM : HTML5 et XHTML5. Cette
version apporte de nouvelles possibilités en terme de création d' «
applications Web riches » bénéficiant de l'intégration d'éléments
multimédias et d'interactivité, à l'image de ce que permettent Adobe Flash
ou Microsoft Silverlight.[5]
III. Les grandes nouveautés de l’HTML 5
1. La déclaration de DOCTYPE

La déclaration DOCTYPE pour HTML5 est très simple:

o <!DOCTYPE html> au lieu de <!DOCTYPE HTML PUBLIC


"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> en HTML 4.

o La déclaration de codage de caractères (charset) est également très


simple:

<meta charset="UTF-8"> au lieu de <meta http-equiv="Content


Type" content="text /html;charset=ISO-8859-1"> en HTML 4, le
codage de caractères par défaut en HTML5 est UTF-8.

Exemple HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Titre du document </title>
</head>
<body>
contenu du document......
</body>
</html>

2. Les navigateurs et le support de l’HTML 5

HTML5 est prise en charge dans tous les navigateurs modernes. En outre,
tous les navigateurs, anciens et nouveaux, gèrent automatiquement les

15
éléments non reconnus comme les éléments en ligne. Pour cette raison,
on peut «enseigner» les vieux navigateurs pour gérer les éléments HTML
"inconnus".
HTML5 définit 8 nouveaux éléments HTML sémantiques. Tous ces éléments
sont de niveau bloc. Pour assurer un comportement correct dans les
anciens navigateurs, on peut définir la propriété CSS display pour block:
Exemple
header, section, footer, aside, nav, main, article, figure {
display: block; }

On peut aussi ajouter un nouvel élément au format HTML avec un tour du


navigateur. Cet exemple ajoute un nouvel élément appelé <myHero> en
HTML, et définit un style d'affichage pour elle:
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px; }
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>
La déclaration JavaScript document.createElement ("myHero") est
ajouté, que pour satisfaire IE. On peut utiliser la solution décrite ci-dessus,
pour tous les nouveaux éléments HTML5, mais Internet Explorer 8 et plus
tôt, ne permettent pas de styliser d'éléments inconnus. Heureusement,
Sjoerd Visscher a créé le "JavaScript HTML5 habilitation", "le Shiv":
<!--[if lt IE 9]>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"><
/script>
<![endif]-->
Le code ci-dessus est un commentaire, mais les versions précédentes
d'IE9 va le lire (et comprendre). Le lien vers le code shiv doit être placé
dans l'élément <head>, car Internet Explorer a besoin de connaître tous

15
les nouveaux éléments avant de les lire. Cependant, un site tel que
http://caniuse.com ou encore http://fmbip.com mise à jour régulièrement
permet d’avoir des informations assez précises sur la prise en charge du
HTML 5 de votre site ou de votre navigateur.
3. Éléments supprimés en HTML5
Les éléments suivants HTML4 ont été retirés de HTML5:
Element Use
instead
<acronym <abbr>
>
<applet> <object>
<basefont CSS
>
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset
>
<noframes
>
<strike> CSS
<tt> CSS
Tableau 1: Éléments HTML4 supprimés en HTML5[6]

4. Les nouveaux éléments HTML5


Les nouveaux éléments les plus intéressants sont:
Nouveaux éléments sémantiques / structurel
HTML5 offre de nouveaux éléments pour une meilleure structure du
document:
Tag Description
<article> Defines an article in the document
<aside> Defines content aside the page content
<bdi> Defines a part of text that might be formatted in a different direction
from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcapti Defines a caption for a <figure> element
on>
<footer> Defines a footer for the document or a section
<header Defines a header for the document or a section
>
<main> Defines the main content of the document
<mark> Defines marked or highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)

15
<nav> Defines navigation links in the document
<progress Defines the progress of a task
>
<rt> Defines an explanation/pronunciation of characters (for East Asian
Typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section Defines a section in the document
>
<summar Defines a visible heading for a <details> element
y>
<time> Defines a date/time
<wdr> Defines a possible line-break
Tableau 2 : Nouveaux éléments sémantiques[6]

Figure 2 : Forme d'une page HTML[6]

Nouveaux éléments de formulaire

Tag Description
<datalist> Defines pre-defined options for input
controls
<keygen> Defines a key-pair generator field (for
forms)
<output> Defines the result of a calculation
Tableau 3: Nouveaux éléments de formulaire[6]

Nouveaux Types d'entrées

New Input Types New Input


Attributes
 color  autocomplete
 date  autofocus
 datetime  form
 datetime-local  formaction
 email  formenctype
 month  formmethod

15
 number  formnovalidate
 range  formtarget
 search  height and
 tel width
 time  list
 url  min and max
 week  multiple
 pattern
(regexp)
 place holder
 required
 step
Tableau 4: Nouveaux Types d'entrées[6]

HTML5 - Nouvel Syntaxe d’attribut


HTML5 permet quatre syntaxes différentes pour les attributs. Cet exemple
démontre les différentes syntaxes utilisées dans une balise <input>:
Type Example
Empty <input type="text" value="John"
disabled>
Unquoted <input type="text" value=John>
Double- <input type="text" value="John
quoted Doe">
Single-quoted <input type="text" value='John
Doe'>
Tableau 5: HTML5 - Nouvel Syntaxe d’attribut[6]

Nouveaux éléments graphiques


Tag Description
<canva Defines graphic drawing using
s> JavaScript
<svg> Defines graphic drawing using SVG
Tableau 6: Nouveaux éléments graphiques[6]

Nouveaux éléments multimédias


Tag Description
<audio> Defines sound or music content
<embed Defines containers for external applications
> (like plug-ins)
<source Defines sources for <video> and <audio>
>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
Tableau 7: Nouveaux éléments multimédias [6]

15
La Nouvelle API HTML5 (Application Programming Interface)
Les plus intéressantes nouvelles API sont:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

5. Etudes de quelques exemples

HTML5 Canvas

Le code HTML de l’élément <canvas> est utilisé pour dessiner des


graphiques sur une page web.
Le graphique au dessous est créé avec <canvas>. Elle montre quatre
éléments: un rectangle rouge, un rectangle de gradient, un rectangle
multicolore, et un texte multicolore. [6]

Figure 3: Graphique réaliser par canvas

Qu'est-ce que HTML Canvas?


Le code HTML de l’élément <canvas> est utilisé pour dessiner des
graphiques, à la volée, par l'intermédiaire de scripts (habituellement
JavaScript). L'élément <canvas> est seulement un conteneur pour les
graphiques. On doit utiliser un script pour tirer effectivement les
graphiques. Toile dispose de plusieurs méthodes pour dessiner des
chemins, des boîtes, des cercles, du texte, et l'ajout d'images.
Support du navigateur
Les chiffres du tableau indiquent la première version de navigateur qui
soutient pleinement l'élément <canvas>.

Tableau 8: La première version de navigateur qui supporte <canvas>[6]

Exemple
<!DOCTYPE html>

15
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

HTML5 SVG

SVG signifie Scalable Vector Graphics, est une recommandation du W3C


utilisé pour définir le graphique pour le Web SVG. L'élément HTML <svg>
(introduit en HTML5) est un conteneur pour les graphiques SVG.
SVG dispose de plusieurs méthodes pour les chemins de dessin, des
boîtes, des cercles, du texte et des images graphiques.
Support du navigateur
Les chiffres du tableau indiquent la première version de navigateur qui
soutient pleinement l'élément <svg>.

Tableau 9: La première version de navigateur qui supporte <svg>[6]

Exemple
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

15
Figure 4: Dessin réaliser par SVG[6]

Différences entre SVG et Canvas


SVG est un langage de description de graphiques 2D en XML. Canvas
dessine des graphiques 2D, à la volée (avec JavaScript). SVG est basé sur
XML, ce qui signifie que chaque élément est disponible dans le DOM de
SVG. Vous pouvez joindre des gestionnaires d'événements JavaScript pour
un élément.
En SVG, chaque forme dessinée est connu comme un objet. Si les attributs
d'un objet de SVG sont modifiés, le navigateur peut automatiquement
interpréter de nouveau la forme.
Canvas est rendue pixel par pixel. Avec canvas, une fois que le graphique
est tiré, il est oublié par le navigateur. Si sa position doit être changée,
toute la scène doit être redessinée, y compris les objets qui auraient pu
être couverts par le graphique.

HTML5 Video

Avant l'HTML5, il n'y avait pas de norme pour montrer des vidéos sur une
page Web, les vidéos ne peuvent être lus avec un plug-in (comme le
flash). Le HTML5 <video> spécifie un moyen standard pour intégrer une
vidéo dans une page Web.
Support du navigateur
Les chiffres du tableau indiquent la première version de navigateur qui
soutient pleinement l'élément <video>.

Tableau 10: La première version de navigateur qui supporte <video>[6]

HTML Vidéo - Support du navigateur


Il ya actuellement 3 formats vidéo pris en charge pour l’ élément <video>:
MP4, WebM et Ogg:

Browser MP4 Web Og

15
M g
Internet YES NO NO
Explorer
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES(from Opera YES YES
25)
Tableau 11: HTML Vidéo - Support du navigateur[6]

HTML5 audio

Avant l'HTML5, il n'y avait pas de norme pour la lecture de fichiers audio
sur une page web, les fichiers audio ne peuvent être lus qu’avec un plug-in
(comme le flash). Le HTML5 <audio> spécifie un moyen standard pour
intégrer du son dans une page Web.
Support du navigateur
Les chiffres du tableau indiquent la première version de navigateur qui
soutient pleinement l'élément <audio>.

Tableau 12: La première version de navigateur qui supporte <audio>[6]

HTML Audio-Support du navigateur


Actuellement, il existe 3 formats de fichiers pris en charge pour l'élément
<audio>: MP3, WAV, et Ogg:
Browser MP4 Wav Og
g
Internet YES NO NO
Explorer
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
Tableau 13:HTML Audio-Support du navigateur[6]
HTML5 Géolocalisation

La Géolocalisation en HTML est utilisé pour localiser la position d'un


utilisateur. Et pour repérer la position de l'utilisateur l'API HTML
Géolocalisation est utilisée pour obtenir la position géographique d'un
utilisateur. Puisque cela peut compromettre la vie privée de l'utilisateur, la
position n’est pas disponible, sauf si l'utilisateur l'approuve.
Support du navigateur

15
Les chiffres du tableau indiquent la première version de navigateur qui
soutient pleinement Géolocalisation.

Tableau 14: La première version de navigateur qui supporte la Geolocation[6]

Utilisation de la Géo localisation en HTML


Utilisez la méthode getCurrentPosition () pour obtenir la position de
l'utilisateur. L'exemple ci-dessous est un exemple simple de Géo
localisation retourner la latitude et la longitude de la position de
l'utilisateur:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude; }
</script>
</body>
</html>
Explication de l'exemple:

Vérifiez si Géolocalisation est soutenu, si elle est supportée, exécuter la


méthode getCurrentPosition (), si non, afficher un message à l'utilisateur.
Si la méthode getCurrentPosition () est réussie, elle retourne un objet
coordonnées à la fonction spécifiée dans le paramètre (showPosition). La
fonction showPosition () obtient les écrans de le Latitude et Longitude.
IV. Conclusion

Les nouvelles sections et éléments introduits en HTML5 apportent la


capacité de décrire la structure et le plan d'un document web d'une

15
manière standard. Ils apportent un grand avantage pour les utilisateurs de
navigateurs HTML5 et qui ont besoin de la structure pour les aider à
comprendre la page. Ces nouveaux éléments sont simples à utiliser et,
avec très peu d'efforts, ils peuvent également être mis en œuvre dans les
navigateurs ne prenant pas en charge HTML5.
Et pour réaliser un site web il est essentiel de savoir utiliser le HTML et
CSS pour le style et JavaScript, et pour un site dynamique il faut utiliser le
PHP et MySQL.
V. Référence
[1]: http://home.web.cern.ch/fr/topics/la-naissance-du-web "Le CERN,
l’Organisation européenne pour la recherche nucléaire"

[2]: http://communication-expert-comptable.over-
blog.com/pages/Quest_ce_que_le_
W3C_A_quoi_sert_il_pour_la_creation_de_site_internet-1950567.html "
Christophe Jablonski"

[3]: http://www.hteumeuleu.fr/le-w3c-le-whatwg-et-html5/

[4]: http://www.nextinpact.com/archive/72625-html5-w3c-et-whatwg-se-
separent-a-cause-divergences-insolubles.htm "Ian Hickson"

[5]: http://www.commentcamarche.net/contents/498-html-langage
"Réalisé sous la direction de Jean-François Pillou, fondateur de
commentcamarche.net"

[6]: http://www.w3schools.com/htmL/

[7]: http://fr.slideshare.net/Kenium/prsentation-html5-11912586

15

Vous aimerez peut-être aussi