Académique Documents
Professionnel Documents
Culture Documents
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
15
Figure 1: Le premier site web[1]
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
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
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]
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
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
Exemple HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Titre du document </title>
</head>
<body>
contenu du document......
</body>
</html>
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; }
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]
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]
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]
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]
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
HTML5 Canvas
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
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]
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>.
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>.
15
Les chiffres du tableau indiquent la première version de navigateur qui
soutient pleinement Géolocalisation.
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