Cours Introduction A HTML 5

HTML 5
HyperText Markup Language 5
Module : Technologies web 1

Année universitaire
2012-2013
Enseignant : Haythem 1
REHOUMA
Objectifs
Apprendre à créer des pages en langage HTML 5
Savoir les principaux apports de HTML5 par rapport à ses prédécesseurs
REHOUMA
PLAN
Structure d’un document HTML5
Une nouvelle sémantique
Les nouveaux éléments de formulaire
Les nouveaux éléments pour les médias
Web Storage
Géolocalisation
Plus d’APS
REHOUMA
REHOUMA
Le DOCTYPE
HTML 4.01 Strict
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
REHOUMA
Nouvelle Structure
<div<header>
id="header">
<div class="article">
<article>
<div <div
<nav> <div <section>
id="content"> <aside>
id="nav"> id="right">
<div<footer>
id="footer">
REHOUMA
<header>l’en-tête
<footer> le pied-de-page
<nav> les principaux liens de navigation

Menus du site
<section> les parties thématiques de la page
<aside> les informations complémentaires
<article> Un article provenant d'une autre page

REHOUMA
REHOUMA
REHOUMA
 La plupart des sites web possèdent en général une en-tête.
 On y trouve le plus souvent

• un logo
• une bannière
• le slogan de votre site…
REHOUMA
REHOUMA
REHOUMA
 À l'inverse de l'en-tête, le pied de page se trouve en général

tout en bas du document.
 On y trouve des informations comme
• des liens de contact,
• le nom de l'auteur
• les mentions légales, etc...
REHOUMA
REHOUMA
REHOUMA
 Regrouper tous les principaux liens de navigation du site.

 Par exemple le menu principal de votre site
REHOUMA
REHOUMA
REHOUMA
 La balise <section> sert à regrouper des contenus en fonction

de leur thématique.
 Elle englobe généralement une portion du contenu au centre
de la page.
REHOUMA
REHOUMA
REHOUMA
 La balise <aside> est conçue pour contenir des informations

complémentaires au document que l'on visualise.
 Ces informations sont généralement placées sur le côté
REHOUMA
REHOUMA
REHOUMA
 Englober une portion généralement autonome de la page.
 C'est une partie de la page qui pourrait ainsi être reprise sur
un autre site.
 Les actualités
 articles de journaux ou de blogs
REHOUMA
REHOUMA
Nouvelle sémantique en HTML5
REHOUMA
Nouvelle sémantique
 Le HTML5 offre de nouvelles balises pour améliorer la hiérarchisation
et la structuration de votre document.
<canvas>
<datagrid>
<meter>
<details>
<progress>
<svg>
Rating:<dialog>
<time>
Et encore ...…
<embed>
<figure>
<command>
<menu>
REHOUMA
Balise Description
Meter Définit une unité de mesure
Progress Définit une progression
 Élément graphique permettant d'afficher des données récupérées sur

Datagrid une Base de Données.
Utilisation très simple et rendu final agréable.
Time
Définit une unité de temps

Svg Définit une image vectorielle
29
Enseignant : Haythem
Balise Description
Menu Définit un menu en liste
Command Définit un bouton de commande
Embed Définit un contenu extérieur (audio, vidéo …)
Figure
Définit un groupe d’élément multimédia

Details Définit les détails d’un élément
30
Balise Description
 Signale une conversation.
Dialog  Contient des éléments dt que l'on utilise pour identifier un locuteur, et
des éléments dd qui contiennent les paroles du locuteur.
Mark Employée pour mettre en avant une partie d'un contenu en appliquant
un style surligné jaune sur le texte qu'elle décrit.
wbr Définit un saut de ligne possible.
31
Une Nouvelle sémantique
Exemple dialog
<dialog>
<dt>Haythem </dt>
<dd>Bienvenu à Esprit !</dd>
<dt>Mohamed</dt>
<dd>
Merci, vous êtes notre enseignant?
</dd>
<dt>Haythem</dt>
<dd>Oui, je le suis! </dd>
<dt>Mohamed</dt>
<dd>
Quesque vous allez nous enseigner?
</dd>
<dt>Haythem</dt>
<dd>le HTML 5<dd>
</dialog> Enseignant : Haythem 32
REHOUMA
Les nouveaux élément de formulaire
REHOUMA
<input type="datetime">
<input type="text" list="list">

<datalist id="list">
<option value="Mr">
...
<input <input
<input type="number">
type="range">
type="url">
<input
</datalist> type="email">
Et encore…
REHOUMA
Minimum
MaxLength
Regular
Required and Maximum Values
Expressions
for
Fields textarea
Et encore…
<input
<input type="text"
<input
type="email"
<textarea pattern="[A-Za-z0-9_\-]+">
type="range"
required="required">
min="20" max="80">
maxlength="2000"></textarea>
REHOUMA
Balise Description
datalist Spécifie une liste de pré-définis pour les options des contrôles d’entrée
 Définit un champ générateur de clés ( pour les formulaires).

 Générer au sein d'un formulaire une paire de clés de sécurité pour permettre
keygen le cryptage et le décryptage de données échangées.
 La clé privée est conservée en local.
 La clé publique est retournée au serveur.
output Définit le résultat d’une opération
36
Les nouveaux éléments de média
REHOUMA
Les nouveaux éléments pour les médias
Balise Description
<audio> Définit un contenu audio
<video> Définit une vidéo ou un film
Définit de multiples ressources pour les médias <video> et

<source>
<audio>
Définit un conteneur pour une application externe ou un contenu

<embed>
interactif (un plug-in)
 Définit des pistes de texte pour les médias <video> et <audio>

<track>  Insére un sous-titre (au format Web Video Text Tracks
(WebVTT) WebVTT) à une vidéo affichée avec la balise video
REHOUMA
Les nouveaux éléments de média
Exemple Balise Video
REHOUMA
La balise Canvas en HTML5
REHOUMA
La balise <canvas>
Balise Description
 Utilisé pour dessiner des graphiques, des dessins, à la volée, via des
scripts (habituellement en JavaScript)
<canvas>
 Ça fournit une API en JavaScript qui permet de faire du dessin
vectoriel, ça fournit une surface sur laquelle on peut dessiner au niveau
binaire un peu à la manière des bitmaps.
REHOUMA
La balise <canvas>
.
Le canvas est une zone rectangulaire dans une page HTML
REHOUMA
La balise <canvas>
REHOUMA
La balise <canvas>
REHOUMA
La balise <canvas>
REHOUMA
La balise SVG
 SVG est une recommendation W3C
 SVG est l’abréviation de Scalable Vector Graphics.
 SVG est utilisé pour définir des graphics basés sur des vecteurs sur
le Web
REHOUMA
La balise SVG
 Image vectorielle (ou image en mode trait).
 Image numérique composée d'objets géométriques individuels (segments de
droite, polygones, arcs de cercle, etc.)
 Objets définis chacun par divers attributs de forme, de position, de couleur, etc.
 Se différencie des images matricielles (ou « bitmap »), dans lesquelles on
travaille sur des pixels.
REHOUMA
La balise SVG
 Les graphiques SVG conservent l’image telle qu’elle est même
quand elle est agrandie ou réduite de taille.
 Chaque élement peut être animé.
 Les images SVG peuvent être imprimées avec une grande qualité
quelque soit la résolution.
REHOUMA
Les éléments supprimés ou dépréciés en HTML5
REHOUMA
Les éléments supprimés ou dépréciés en HTML5
<acronym> <applet> <basefont>
<big> <center> <dir>
<font> <frame> <frameset>
<noframes> <strike> <tt> <u>
REHOUMA
Drag & Drop
REHOUMA
Drag & Drop
 Le Drag & Drop est une caractéristique très courante. C'est le

fait d’ attraper un objet et faites-le glisser vers un autre
emplacement.
 En HTML5, Drag and Drop fait partie de la norme, et tout
élément peut être déplacé.
<img draggable="true">
REHOUMA
Drag & Drop
 Les méthodes ondragstart and setData() définssent “what to Drag”
function drag(ev)
{ ev.dataTransfer.setData("Text",ev.target.id); }
 La méthode ondragover définit ou faire le Drop
event.preventDefault()
 La méthode ondrop effectue le Drop
function drop(ev)
{ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data)); }
REHOUMA
Web Storage
REHOUMA
Web Storage
Les pages Web peuvent stocker des données localement dans le

navigateur de l'utilisateur.
Avec HTML5, le stockage devient plus sûr et plus rapide..

 Les données ne sont pas inclus avec chaque requête serveur mais utilisé
uniquement lorsque demandé.
REHOUMA
Web Storage
Possibilité de stocker un grand nombre d’informations sans affecter

les performances du site
Les données sont stockées dans paires clé / valeur, et une page Web
ne peut accéder aux données stockées par elle-même
REHOUMA
Web Storage
Il y a deux objets pour sauvegarder les informations coté client:
 LocalStorage :
 Sauvegarde les informations sans date d’expiration
 SessionStorage :
 Sauvegarde les informations pour une seule session
if(typeof(Storage)!=="undefined")
{ // LocalStorage et sessionStorage supportés par le navigateur ! }
else
{ // LocalStorage et sessionStorage ne sont pas supportés par
le navigateur ! ..}
REHOUMA
Exemple Web Storage
<!DOCTYPE html>
<html>
<head><script> A DEVELOPPER</script> </head>
<body>
<p><button onclick="teststorage()" type="button">Click me!</button></p>
<div id="result"> </div>
<p> Cliquer sur le boutton .</p>
<p> Fermer votre navigateur, ouvrez le de nouveau et essayer de vous apercevoir de

ce qui se passe en cliquant sur le bouton. Votre conclusion?</p>
</body>
</html>
REHOUMA
Exemple Web Storage
<script>
function teststorage()
{ if(typeof(Storage)!=="undefined")
{ if (localStorage.clickcount)
{ localStorage.clickcount= Number(localStorage.clickcount)+1; }
else { localStorage.clickcount=1;}
document.getElementById("result").innerHTML=" Vous avez cliqué sur le bouton "
+ localStorage.clickcount + " fois "; }
else { document.getElementById("result").innerHTML="Désolé, votre navigateur ne

supporte pas le web storage..."; } }
</script>
REHOUMA
Exercice
 Refaire le même exemple en utilisant l’objet SessionStorage

au lieu d’ultiliser l’objet LocalStorage.
 Quesque vous remarquez?
REHOUMA
Géolocalisation
REHOUMA
Géolocalisation
L’API de Geo-localisation de HTML 5 est utilisée pour avoir la position géo-

graphique de l’utilisateur.
La position ne peut pas être obtenue que lorsque l’utlisateur accepte de

partager sa localisation.
REHOUMA
Géolocalisation
 La méthode getCurrentPosition()
 Traitement des erreurs et des rejections
 Afficher le résultat sur un Map
REHOUMA
Géolocalisation
REHOUMA
Géolocalisation
• getCurrentPosition() method sert à indiquer la position de l’utilisateur (exemple1)
REHOUMA
Géolocalisation
EXEMPLE BASIQUE
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()"> Try It </button>
</body>
<script>//A faire……………………………</script>
</html>
REHOUMA
Géolocalisation
<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>
REHOUMA
Géolocalisation
REHOUMA
Géolocalisation
function showError(error)
{
switch(error.code)
{ case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation." break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable." break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out." break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred." break; }
}
REHOUMA
Géolocalisation
REHOUMA
Géolocalisation
function showPosition(position)
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img
src='"+img_url+"'>";
}
REHOUMA
Plus d’Apis (Web Workers)
REHOUMA
Web Workers
 En exécutant des scripts dans une page HTML la page ne répond pas
jusqu’à la fin du script.
 Le Web Worker correspond à un script " Javascript " qui tourne en "back-
ground " indépendamment des autres scripts sans perturber les
performances de la page.
Possibilité de cliquer, sélectionner et faire les autres fonctionnalités quand

le web worker tourne en "back-ground".
REHOUMA
Web Workers
Exemple :
REHOUMA
Web Workers
Créer un Web Worker dans un fichier JavaScript externe HR.js :
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
REHOUMA
Web Workers
Créer un Objet Web Worker
if (typeof(w)=="undefined")
{ w=new Worker(“HR.js"); }
Envoyer et recevoir des messages du Web Worker
w.Onmessage = function(event){
document.getElementById("result").innerHTML=event.data; };
Envoyer et recevoir des messages du Web Worker
w.terminate();
REHOUMA
REHOUMA

Cours Introduction A HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

Cours Introduction A HTML 5

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

Cours Introduction A HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

HTML 5

HyperText Markup Language 5

Module : Technologies web 1

Apprendre à créer des pages en langage HTML 5

Savoir les principaux apports de HTML5 par rapport à ses prédécesseurs

Une nouvelle sémantique

Les nouveaux éléments de formulaire

Les nouveaux éléments pour les médias

HTML 4.01 Strict

<nav> les principaux liens de navigation

<section> les parties thématiques de la page

<aside> les informations complémentaires

<article> Un article provenant d'une autre page

 La plupart des sites web possèdent en général une en-tête.

 On y trouve le plus souvent

 À l'inverse de l'en-tête, le pied de page se trouve en général

 Regrouper tous les principaux liens de navigation du site.

 La balise <section> sert à regrouper des contenus en fonction

 La balise <aside> est conçue pour contenir des informations

 Ces informations sont généralement placées sur le côté

 Englober une portion généralement autonome de la page.

et la structuration de votre document.

Progress Définit une progression

 Élément graphique permettant d'afficher des données récupérées sur

Command Définit un bouton de commande

Embed Définit un contenu extérieur (audio, vidéo …)

wbr Définit un saut de ligne possible.

<input type="text" list="list">

datalist Spécifie une liste de pré-définis pour les options des contrôles d’entrée

 Définit un champ générateur de clés ( pour les formulaires).

output Définit le résultat d’une opération

<audio> Définit un contenu audio

<video> Définit une vidéo ou un film

Définit de multiples ressources pour les médias <video> et

Définit un conteneur pour une application externe ou un contenu

 Définit des pistes de texte pour les médias <video> et <audio>

Exemple Balise Video

scripts (habituellement en JavaScript)

vectoriel, ça fournit une surface sur laquelle on peut dessiner au niveau

binaire un peu à la manière des bitmaps.

 SVG est l’abréviation de Scalable Vector Graphics.

 Image vectorielle (ou image en mode trait).

 Image numérique composée d'objets géométriques individuels (segments de

droite, polygones, arcs de cercle, etc.)

 Se différencie des images matricielles (ou « bitmap »), dans lesquelles on

travaille sur des pixels.

 Les graphiques SVG conservent l’image telle qu’elle est même

quand elle est agrandie ou réduite de taille.

 Chaque élement peut être animé.

quelque soit la résolution.

<acronym> <applet> <basefont>

<big> <center> <dir>

<font> <frame> <frameset>

<noframes> <strike> <tt> <u>

 Le Drag & Drop est une caractéristique très courante. C'est le

 La méthode ondrop effectue le Drop

Les pages Web peuvent stocker des données localement dans le

Avec HTML5, le stockage devient plus sûr et plus rapide..

uniquement lorsque demandé.