Prsentationhtml 5

03/ 02/ 2015
Lavenir du
WEB
Initiation au web et au
HTML 5
Plan de la prsentation
Introduction
Une brve histoire du WEB

Le consortium W3C et le groupe WhatWG
Le fonctionnement du WEB
Plan
Quest ce que HTML 5 ?
HTML 5 : un ensemble de technologies (HTML 5, CSS 3, JavaScript)

Son support dans les navigateurs
Une introduction au langage HTML
Premier document HTML 5

Le doctype, la validation W3C et le CSS
Un document html avec le CSS et le JavaScript
Les grandes nouveauts HTML 5
Les balises smantiques

Les nouveauts CSS 3
Les balises multimdias (audio et vido)
Le dessin avec le Canvas (dessin 2D et aperus de la 3D)
Conclusion
Perspectives
A lorigine du WEB : Tim berners-Lee

Linitiateur du premier site internet et

du premier navigateur (WWW) en 1990
est Tim berners-Lee
Il est lorigine des 3
technologies principales
du WEB : Les adresses
web, le protocole HTTP et
le HTML
Il est le fondateur et le prsident du
W3C depuis 1994.
Crations de nouvelles technologies

1993 : Le navigateur Mosaic dvelopp pour

Sun intgre la balise img pour lintgration des
images
Une partie de lquipe dveloppe lanne
suivante Netscape Navigator
Il devient par la suite ncessaire de
standardiser les langages du WEB -> Cration
du W3C par Tim
A partir de 1995, tout sacclre : cration de
Javascript, de lHTML 2.0, et de la 1re version
dinternet explorer.
Le W3C
Consortium W3C et le
WhatWG
Le W3C est un organisme indpendant qui

met des standards pour le WEB et notamment
le HTML
Ce dernier est administr par
trois entits :
Le MIT (tats-Unis)
Luniversit Keio (Japon)
LErcim (Europe)
Le W3C standardise galement de nombreuses

autres technologies comme MathML, RDF,
Soap, SVG, Smil, PNG et autres variations
autour de XML
Le WhatWG
Consortium W3C et le
WhatWG
Le W3C tente de persvrer vers la voie du

XML (cration du XHTML)
Le WhatWG souhaite amliorer HTML
et dbute son travail en 2004 avec
Ian Hickson qui sera lditeur officiel du HTML 5
Le HTML5 est soutenu devant le W3C en
2007.
Il sera retenu et son premier brouillon sera publi
lanne suivante.
Le fonctionnement du WEB
Le fonctionnement du
WEB
HTML 5 : HTML 5, CSS 3 et JavaScript

Le HTML 5 est fondamentalement le langage

HTML dans sa 5me version
Mais il regroupe, par un abus de langage
justifi, le
HTML 5, le CSS 3 et le JavaScript. Le HTML 5
est donc
la pierre angulaire de cet ldifice.
On va donc avoir :
HTML -> fond du document
CSS -> forme du document
JavaScript -> dynamisme
du document
Les navigateurs et le support de lHTML 5

Distinguons les navigateurs et les moteurs de

rendu.
Chaque navigateur intgre un moteur de
rendu qui peut tre commun plusieurs
autres navigateurs.
Mote
ur
Navigateurs
Dveloppement
Tride
nt
Internet Explorer
Microsoft
Webk
it
Google chrome, apple safari,

android, epiphany
Apple, Google, KDE,

Nokia, RIM, Palm et
autres
Geck
o
Mozilla firefox, Camino, K-Meleon,

Galeon, Flock
Fondation Mozilla
Prest
o
Opera, opera mobile, opera Wii
Opera Software
KHTM
Konqueror
KDE
Un petit tableau des correspondances :
Les navigateurs et le support de lHTML 5
Quest ce que HTML

5?
La frquence des mises jours des navigateurs

est telle quil devient difficile de lister toutes
les fonctionnalits HTML 5 prises en charges.
Cependant, un site tel que
http://caniuse.com ou encore
http://fmbip.com mise jour rgulirement
permet davoir des informations assez prcises
sur la prise en charge du HTML 5 de votre site
Navigateur
poin
ou de votre
navigateur. Versi
on
ts
Google Chrome
16.0
373
Mozilla Firefox
10.0
332
Opera
11.60
329
Apple Safari
5.1
302
Microsoft Internet
141
source
Explorer : http://html5test.com
Introduction au langage HTML

Premier document HTML
HTML (Hypertext Markup Language) est le

format de donnes structurant une page web.
HTML est initialement driv du SGML
(Standard Generalized Markup Language) dont
la premire publication date de 1986.
Cest un langage de balisage :
<balise>Contenu</balise>
<html>
<head>
Les en-ttes du document
</head>
<body>
Le corps du document
</body>
</html>
Exemple de
document HTML
avec les premires
balises html, head
et body
Le Doctype avant tout

Le Doctype
Le doctype est le prambule dune page

HTML, il spcifie le type de document.
Doctype HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Doctype XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Doctype HTML 5
<!DOCTYPE html>
Codes HTML valides W3C

La validation W3C
Code HTML 5 valide W3C ( tester sur

http://validator.w3.org)
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="UTF-8">
</head>
<body>
Vive HTML 5 ! :D
</body>
</html>
Code XHTML 1.1 valide W3C ( tester sur

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
http://validator.w3.org)
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p><span>Vive pas xHTML5 ! :D</span></p>
</body>
</html>
Le CSS
Le document HTML
Comme vu prcdemment, le code CSS va

mettre en forme notre document HTML
Syntaxe
slecteur {
gnrale : proprit : valeur;
}
Exemple
:
p {
font-size : 10px;
color : blue
}
Dans notre exemple, le contenu texte de

toutes nos balises <p> auront une taille de 10
px et une couleur grise.
<p>Le CSS !!!
Le
</p>
CSS !!!
Code HTML avec du CSS et du JavaScript

Le document HTML
Association des 3 langages piliers du WEB :

Note HTML 5
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="javascript.js"></script>
</head>
<body>
HTML5!!!
</body>
</html>
Inclusion de
notre
fichier CSS
Inclusion de
notre
fichier
Tableau priodique des lments

Le document HTML
http://Joshduck.com/periodic-table.html
Les grandes nouveauts de lHTML 5
Les nouveauts
HTML 5
Les nouvelles balises smantiques

(<header>, <footer> )
Les principales nouveauts CSS 3
Les balises multimdias (<audio> et
<vido>)
La balise <canvas> pour un affichage
dynamique
Le stockage hors ligne
La golocalisation

Les nouvelles balises

smantiques :
<header>
<nav>
<article>
<section>
<aside>
<footer>

AVANT
APRS

AVANT
<body>
<div id="header"></div>
<div id="nav"></div>
<div class="article">
<div class="section"></div>
<div class="section"></div>
</div>
<div id="aside"></div>
<div id="footer"></div>
</body>
APRS
<body>
<header></header>
<nav></nav>
<article>
<section></section>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>
Le CSS 3 : les nouveauts

Les nouveauts du CSS 3
Le CSS 3,
ses nouveauts
Le CSS 3 : quelques nouveauts

Les nouveauts du CSS 3
Border Radiusborder-radius:
30px;
Box Shadow box-shadow:
10px 10px 10px 1px ;
Text Shadowtext-shadow:
2px 2px 5px #444 ;
Multiple Columnscolumn-count:
2;
column-gap: 10px;
Gradients http://www.colorzilla.com/gradient-editor/
background: linear-gradient(left,
rgba(208,228,247,1) 0%,rgba(115,177,231,1)
24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1)
79%,rgba(135,188,234,1) 100%);
La lecture
audio et vido
avec
<audio> et
<video>
Les nouvelles balises <audio> et <video>
Les balises audio et video
Les nouvelles balises <audio> et <video>

Une des grandes nouveauts de lHTML 5 est la

prise en charge sans plugins, de la lecture des
flux audio et vido
Fondamentalement, les nouvelles balises
<audio> et <video> se comporte de la mme
manire et sutilisent quasiment de la mme
faon
que linclusion
dune
simple
syntaxe
minimale pour
la lecture
dunimage
fichier !
vido src="video.webm"></video>
:
<video
syntaxe minimale pour la lecture dun fichier
audio:src="audio.mp3" controls></audio>
<audio
syntaxe minimale pour linclusion dune

image
:
<img
src="image.png"
alt="Une image !">
La nouvelle balise <video>

La simple syntaxe
<video src="video.webm"></video>
nous offre donc la possibilit de lire une vido
directement dans notre navigateur :
Aperus dans Google

Chrome
Cependant,
labsence de
lattribut controls
implique que la
lecture, la pause et
le stop doivent
seffectuer avec le
clique droit ce qui
nest pas trs
pratique.

Code source dun lment <video> plus

complet avec le contrle, la taille, limage
dintro, les diffrentes sources et le texte
<video
width="360" height="640" poster="image.jpg" controls>
alternatif.
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
l'alternativelavido:unliendetlchargement,unmessage,etc.
</video>
Exactement la mme
vido que
prcdemment mais
avec limage dintro
et le contrleur
par le possde
client.
Lavisible
balise <video>
Aperus dans Mozilla Firefox
galement lattribut autoplay,

preload et loop

La prise en charge par les navigateurs des

diffrents formats vidos est la suivante :
Navigateu
r
H.264/MP4/A
AC
Ogg/Theora/Vor
bis
WebM
3.5+
3.5+
4.0+
10.5
10.5+
10.6+
9.0+
9.0+
3.0+
4.1+
4.0+
3.1+
9+ avec installation dun

plugin
3.0+
6.0+
9+ avec installation dun
plugin
Pour une prise en charge simplifi par les

navigateurs, il existe de nombreux scripts
JavaScript comme : Popcorn.js, videoJS,
html5media, SublimeVideo ect
Outil de conversion vido simple (Micro Video
La nouvelle balise <audio>

La syntaxe<audio src="audio.mp3" controls></audio>

nous offre la possibilit de lire un fichier audio
directement dans notre navigateur tout comme
pour la vido.
Aperus dans les principaux navigateurs :

De mme que pour llment <video> , nous

pouvons avec llment <audio> grer
plusieurs sources pour rpondre
lincompatibilit des navigateurs.
<audio controls>
<source src="audio.oga" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.acc" type="audio/mp4" />
l'alternativelaudio:unliendetlchargement,un
message,etc.
</audio>
La balise <audio> possde galement lattribut autoplay,

preload et loop

La prise en charge par les navigateurs des

diffrents formats audio est la suivante :
Navigat
eur
MP3
Ogg Vorbis
ACC
WAV
3.5+
10.5
9.0+
3.0+
4.0+
De mme que pour la balise vido, vous

pouvez utiliser les scripts JavaScript vus
prcdemment pour une manipulation
simplifie de ces balises.
Activit sur les balises <audio> et <video>
En utilisant les codes sources de cette

prsentation, essayez de faire marcher la
lecture dun fichier audio et vido sur la
mme page ds son chargement avec
lintgration des contrles.
On souhaite obtenir ce rsultat :
Le dessin avec Canvas
Le dessin avec
Canvas
Le dessin
avec
<canvas>
Canvas rider
Le dessin avec
Canvas
HTML 5 offre aujourdhui la possibilit de

dessiner, de traiter des images en allant jusqu
la possibilit de crer un jeu complet grce au
nouvel lment <canvas>
Ainsi, cette fonctionnalit devient une
alternative puissante face au flash ou encore au
Java dans la ralisation des ces diffrentes
tches
La
syntaxe HTML pour la cration dun lment
<canvas id="dessin" width="640" height="480">
Votre est
navigateur
ne support
canvas
trs simple
: pas canvas !
</canvas>
Dessiner un rectangle rouge
Le dessin avec
Canvas
Pour crer un dessin dans cet lment, on va

recourir lAPI de dessin 2D avec le langage
JavaScript
Exemple
de cration
simple rectangle
<canvas id="dessin"
width="640"dun
height="480">
Votrenavigateurnesupportpascanvas!
rouge
:
</canvas>
<script>
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
forme.fillStyle = "red";
forme.fillRect(20, 30, 100, 50);
</script>
Aperus du rsultat :
Formes gomtriques
Le dessin avec
Canvas
Les formes primitives en Canvas ne

comprennent que des fonctions de la famille
des
rectangles : Rle
Fonction
fillRect(x, y, w, h)
Rectangle plein
strokeRect(x, y, w, h)
Rectangle surlign
clearRect(x, y, w, h)
Rectangle vide (efface)

forme.lineWidth = 2; // Largeur du trait
forme.strokeStyle ="#ccc";// Couleur du trait
forme.fillStyle = "red";// Rectangle plein rouge
forme.fillRect(10, 10, 200, 100);// coor. + taille rectangle
forme.clearRect(100, 20, 20, 80);// rectangle qui efface
forme.clearRect(70, 50, 80, 20);// 2me rectangle qui efface
forme.strokeRect(1, 1, 220, 120);// cadre gris
Rsultat
:
Tracer un chemin
Le dessin avec
Canvas
A dfaut davoir simplement le rectangle

comme trac de primitive, Canvas possde
lavantage dune grande libert avec le trac de
chemins
Trac
<script> dun triangle avec les chemins :
Rsultat
forme.fillStyle = "#FFFF00"; // triangle jaune
forme.strokeStyle = "#EABB00"; // contour jaune fonc
: (100, 50)
forme.lineWidth = 5; // Largeur du contour
forme.beginPath(); // Commence le chemin
forme.moveTo(100, 50); // Se positionner
forme.lineTo(160, 150); // Se rendre ...
forme.lineTo(40, 150); // Se rendre ...
forme.closePath(); // Termine le chemin
forme.fill(); // color le fond
forme.stroke(); // trace le contour
</script>
(40, 150)
(160, 150)
Activit : tracer la triforce de Zelda
Le dessin avec
Canvas
En utilisant le code source suivant comme

base de lexercice, essayez de tracer la
triforce de Zelda.
<script>
forme.fillStyle = "#FFFF00";
forme.strokeStyle = "#EABB00";
forme.lineWidth = 5;
var x = 200;
var y = 200;
forme.beginPath();
forme.moveTo(x, y);
forme.lineTo(x+60, y+100);
forme.lineTo(x-60, y+100);
forme.closePath();
forme.fill();
forme.stroke();
</script>
Les autres possibilits de Canvas
Le dessin avec
Canvas
Il existe de nombreuses possibilits Canvas

que vous pouvez retrouver notamment sur la
documentation de Mozilla :
https://developer.mozilla.org/fr/HTML/Canvas
Ces possibilits nous permettent de grer la
transparence, les dgrads, de faire des
transformations (chelle, rotation, translation
), de traiter des images, de modifier des
pixels, de grer les sprites, dcrire du texte
ect
Applications marquantes utilisant les canvas :
Sketchpad http://mugtug.com/sketchpad/
The Wilderness Downtown :
http://www.thewildernessdowntown.com/
La 3D avec Canvas
Le dessin avec
Canvas
Le socle canvas a permis le saut vers WebGL,

une API JavaScript spcialement conus pour la
cration 3D.
Cette technologie est en cours
dexprimentation et est principalement
compatible avec Google Chrome et Mozilla
Firefox pour le moment.
Quelques exprimentations :
Google : http://www.chromeexperiments.com/webgl
Hakim El Hattab : http://hakim.se/experiments/
Mr doob : http://mrdoob.com/
Jeu de rally : http://triggerrally.com/
La balise canvas et les navigateurs

La prise en charge par les navigateurs de la

balise canvas est la suivante :
Navigat
eur
Version
3+
9+
9+
1+
3.1+
Il existe une solution alternative pour internet

explorer < 9 avec une librairie JavaScript :
http://code.google.com/p/explorercanvas
Prsentation termine !
The end !
Cette prsentation sur le

HTML 5 est dsormais
termine !
Avez-vous des questions

?
Rfrence
utilise

Prsentationhtml 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Prsentationhtml 5

Uploaded by

Copyright:

Available Formats

03/ 02/ 2015

Une brve histoire du WEB

Quest ce que HTML 5 ?

HTML 5 : un ensemble de technologies (HTML 5, CSS 3, JavaScript)

Une introduction au langage HTML

Premier document HTML 5

Les grandes nouveauts HTML 5

Les balises smantiques

A lorigine du WEB : Tim berners-Lee

Linitiateur du premier site internet et

Crations de nouvelles technologies

1993 : Le navigateur Mosaic dvelopp pour

Le W3C est un organisme indpendant qui

Le W3C standardise galement de nombreuses

Le W3C tente de persvrer vers la voie du

HTML 5 : HTML 5, CSS 3 et JavaScript

Le HTML 5 est fondamentalement le langage

Les navigateurs et le support de lHTML 5

Distinguons les navigateurs et les moteurs de

Google chrome, apple safari,

Apple, Google, KDE,

Mozilla firefox, Camino, K-Meleon,

Opera, opera mobile, opera Wii

Un petit tableau des correspondances :

Les navigateurs et le support de lHTML 5

Quest ce que HTML

La frquence des mises jours des navigateurs

Introduction au langage HTML

HTML (Hypertext Markup Language) est le

Le Doctype avant tout

Le doctype est le prambule dune page

Doctype HTML 4.01

Doctype XHTML 1.1

Codes HTML valides W3C

Code HTML 5 valide W3C ( tester sur

Code XHTML 1.1 valide W3C ( tester sur

Comme vu prcdemment, le code CSS va

Dans notre exemple, le contenu texte de

Code HTML avec du CSS et du JavaScript

Association des 3 langages piliers du WEB :

Tableau priodique des lments

Les grandes nouveauts de lHTML 5

Les nouvelles balises smantiques

Les nouvelles balises smantiques

Les nouvelles balises

Les nouvelles balises smantiques

Les nouvelles balises smantiques

Le CSS 3 : les nouveauts

Le CSS 3 : quelques nouveauts

Box Shadow box-shadow:

10px 10px 10px 1px ;

2px 2px 5px #444 ;

Les nouvelles balises <audio> et <video>

Les balises audio et video

Les nouvelles balises <audio> et <video>

Une des grandes nouveauts de lHTML 5 est la

syntaxe minimale pour linclusion dune

La nouvelle balise <video>

Aperus dans Google

La nouvelle balise <video>

Code source dun lment <video> plus

galement lattribut autoplay,

La nouvelle balise <video>