HTML 5

ISTA NTIC
Sidi Youssef
Ben Ali
Marrakech
HTML 5
HyperText Markup Language 5
SECTEUR NTIC
TECHNIQUES DE
DEVELOPPEMENT
INFORMATIQUE (TDI)
Dr. Abderrahim BEN BOUNA
Année universitaire MODULE 10: DEVELOPPEMENT WEB COTE

2021-2022 CLIENT
1
Objectifs
Apprendre à créer des pages en langage HTML 5
Savoir les principaux apports de HTML5 par rapport à ses prédécesseurs
2
PLAN
Historique
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
3
Historique
Historique
 1962 : US Air Force commande la création d’un réseau de communication militaire pouvant résister à une
attaque nucléaire.
 1964 : Paul Baran créé un réseau en forme de toile, évitant ainsi un système central vulnérable.
 1969 : ARPANET est créé pour relier 4 universités, indépendamment d’un objectif militaire. (Présentation
public en 1972)
 1971 : 1er Mail électronique. Le caractère @ est déjà présent. (Amélioration en 1972 avec boite mail
possédant un système d’archivage, de tri et « faire suivre »)
 1976 : Déploiement du protocole TCP (débuté en 1972) permettant la transmission de paquet et la gestion
des erreurs. Il sera scindé en 2 protocoles en 1978 : TCP/IP
 1980 : Tim Berners-lee et Robert Caillau mettent au point un système de navigation Hypertext. (ancêtre des
navigateurs)
 1984 : Mise en place du système de nommage DNS. (Domain Name System-système de noms de domaine)
C’est un service permettant de traduire un nom de domaine en informations de plusieurs types qui y sont
associées, notamment en adresses IP de la machine portant ce nom.
5
Historique
 1986 : Création du langage SGML (Standard General Markup Language) pour structurer des contenus
divers, considéré comme le 1er langage à balise.
 1991 : Tim Berners-lee met au point le protocole HTTP (Hyper Text Transfer Protocol), ainsi que le langage
HTML (Hyper Text Markup Language). Naissance du World Wide Web (WWW).
 1996 :
o 1ère spécification HTML 2.0 par le W3C (World Wide Web Concortium). le HTML 1.0 n’a jamais
vraiment existé.
o Apparition du CSS (Cascade Style Sheet – feuille de style) créé par Hâkon Wium Lie.
 De 1997 à 1999 :
o Spécification HTML 3.2, 4.0 et 4.01
o Spécification CSS 2.0
o Création du XML (eXtensible Markup Language)
 2000 : Le W3C lance le XHTML 1.0, celui-ci possède exactement le même contenu que le html 4.01 la
différence tient sur la syntaxe, le xhtml suivait les règles du xml. Exemple tous les attributs d’une balise ne
s’exprime plus qu’en minuscule. (cette sortie coïncida avec l’essor des navigateurs compatible avec CSS).
6
Historique
 2001 : Le W3C recommande le XHTML 1.1, celui-ci est entièrement en XML, cependant gros problème le
navigateur le plus populaire du moment de peut pas l’interpréter (ie explorer). Le W3C perd pied avec la
réalité des publications web. Ceci ne l’empêche pas de se lancer dans le XHTML 2.0 cependant celui-ci
possède plusieurs problèmes techniques et ne répond toujours pas aux besoins développeurs du
moment.
 2004 : Scission au sein duW3C. Les représentants d’Opéra, Apple et Mozilla ne sont pas en accord avec
les priorités du W3C. Proposition de reprise du développement HTML pour création d’application web
mais celle-ci est rejetée. Les représentants d’Opéra (dont Ian Hickson) et autres forment leur propre
groupe WHATWG (Web Hypertext Application Technilogy Working Group)
 2006 : Tim Berners-Lee admet que la migration du HTML vers XML était une erreur. Quelques mois plus
tard le W3C planche sur la version HTML 5 (avec espace) et continue cependant sur le XHTML 2.0. De
son côté WHATWG travaille sur le HTML5 (sans espace).
 2007 : Le W3C accepte les propositions de recommandations du WHATWG sur le HTML5 (sans espace).
 2009 : Le format XHTML 2.0 est définitivement mort
 2012 : La spécification HTML5 doit devenir « recommandation candidate », c’est-à-dire fin prête dans le
discours normatif.
7
Organismes de normalisation
IETF
L’Internet Engineering Task Force, abrégée IETF, littéralement traduit de l'anglais en « Détachement
d'ingénierie d'Internet » est un groupe informel, international, ouvert à tout individu, qui participe à
l'élaboration de standards Internet. L'IETF produit la plupart des nouveaux standards d'Internet. L’IETF est
un groupe informel, sans statut, sans membre, sans adhésion. Le travail technique est accompli dans une
centaine de groupes de travail. En fait, un groupe est généralement constitué d'une liste de courrier
électronique. L'IETF tient trois réunions par année.
9
W3C
Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de normalisation à but non-
lucratif, fondé en octobre 1994 chargé de promouvoir la compatibilité des technologies du World Wide Web
telles que HTML, XHTML, XML, RDF, SPARQL, CSS, PNG, SVG et SOAP. Fonctionnant comme un
consortium international, il regroupe en 2012, 378 entreprises partenaires.
Le W3C a été fondé par Tim Berners-Lee après qu'il eut quitté le CERN en octobre 1994. Le W3C a été
fondé au MIT/LCS (Massachusetts Institute of Technology / Laboratory for Computer Science) avec le
soutien de l'organisme de défense américain DARPA et de la Commission européenne.
10
WHATWG
Le Web Hypertext Application Technology Working Group (ou WHATWG) est une collaboration non officielle
des différents développeurs de navigateurs web ayant pour but le développement de nouvelles technologies
destinées à faciliter l'écriture et le déploiement d'applications à travers le Web. La liste de diffusion du groupe
de travail est publique et ouverte à tous. La Mozilla Foundation, Opera Software et Apple, Inc. en sont les
premiers contributeurs.
Ce groupe de travail se limite aux technologies qu'il estime imprésentables dans les navigateurs Web sur la
base des implémentations actuelles, et particulièrement de celles d'Internet Explorer. Il se présente
notamment comme une réponse à la lenteur supposée du développement des standards par le W3C et au
caractère supposé trop fermé de son processus interne d'élaboration de spécification. Cependant, de
nombreux participants à ce projet sont également des membres actifs du W3C, et le nouveau groupe de
travail HTML du W3C a adopté en 2007 les propositions du WHATWG comme base de travail d'un futur
HTML5.
11
Introduction
Introduction
Définition du HTML5
HTML5 est une combinaison de nouvelles balises HTML, de propriété CSS3, de JavaScript et de plusieurs
technologies associées mais structurellement séparées de la spécification HTML5.
Quand choisir HTML5/CSS3

Le W3C recommande dès à présent aux développeurs Web à utiliser HTML 5. De plus la majorité des
navigateurs semblent avoir intégrer les spécifications CSS3 et celui est le mieux à même à répondre aux
nouveaux supports de diffusion du web (tablettes, téléphone…).
La question devrait plutôt être quand ne pas l’utiliser. Il existe encore une majorité d’administration travaillant
encore avec des versions d’internet explorer antérieur à la version 9.0 dans ce cas mieux vaut rester dans
les recommandations de L’HTML 4.0.1. Pour le reste foncez vers le HTML5.
13
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">
15
HTML
Html
L’élément <html> est l’élément racine du document. Il est le parent de tous les autres, soit <head> et
<body>. Celui –ci possède des attributs dont le plus utiles est lang. Celui-ci indique la langue utilisée
par défaut dans la page. Cette valeur sera reconnue par les moteurs de recherche pour leur permettre
d’indexer les pages du site en effectuant un tri par langue.
<html lang= « fr »>
16
Head
Head
Cette section donne quelques informations générales sur la page, comme son titre et l’encodage de la
page (pour la gestion des caractères spéciaux). Ces informations sont les 2 seules obligatoires dans
cette section.
Si la balise <title> n’a pas changé, la déclaration de l’encodage a elle été simplifiée.
<meta charset= « utf-8 »>
17
Minimum Page HTML5
<!DOCTYPE html>
<html lang= « fr » >
<head>
<meta charset= « utf-8 »>
<title>page simple HTML5</title>
</head>
<body>

</body>
</html>
18
Nouvelle Structure
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">
20
<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

21
22
23
 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…
24
25
26
 À 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...
27
28
29
 Regrouper tous les principaux liens de navigation du site.
 Par exemple le menu principal de votre site
30
31
32
 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.
33
34
35
 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é
36
37
38
 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
39
40
Balises de tableaux
Balises de tableaux
Les tables servent à représenter des collections de données. Il est inutile de chercher à les remplacer par des
calques avec des feuilles de styles, et à l'inverse, l'agencement d'une page web doit être réalisé par des
calques avec feuilles de style et non par une table.
Les balises en HTML 4 et HTML 5
Table
Le conteneur global, on peut lui assigner un id et une class pour un style global personnalisé.
<table>
</table>
42
Balises de tableaux
Thead
Contient les titres de colonnes. On peut le supprimer, se contenter d'utiliser des balises <th>, mais il aide à
accéder au contenu d'une table en JavaScript.
Contient une ligne <tr> et des cellules <th>.
<table>
<thead>
<tr> <th>Col 1</th> <th>Col 2</th> </tr>
</thead>
<tbody>
<tr> <td>Contenu 1</td> <td>Contenu 2</td> </tr>
</tbody>
</table>
Cet élément à un intérêt limité. Il peut dédoubler les titres de colonnes, mais nuit au rendu de la table. Si on
l'utilise, on le place avant les lignes, juste après <thead>.
43
Balises de tableaux
Tbody
Contient un ensemble de lignes, donc de balises <tr>. Sert à accéder par script au contenu de la table.
Tr
Ligne de table, contenant un ensemble de cellules, soit des balises <th>, soit <td>.
Th
Cellule d'en-tête. On peut lui assigner un style particulier. On peut les placer dans <thead> ou dans <tr>.
On peut en placer une en début de chaque <tr> pour créer un en-tête de ligne. On peut aussi les placer dans
le corps de la table. Cependant si les dimensions d'une <th> différent de celles des <td>, cela peut changer
l'apparence globale.
Td
Cellules de tableau. L'attribut colspan permet d'en regrouper plusieurs horizontalement sans changer
l'agencement global de la table. On peut les fusionner verticalement, sur plusieurs lignes avec
l'attribut rowspan.
44
Balises de tableaux
Td
Cellules de tableau. L'attribut colspan permet d'en regrouper plusieurs horizontalement sans changer
l'agencement global de la table. On peut les fusionner verticalement, sur plusieurs lignes avec
l'attribut rowspan.
Exemple:
<td colspan="2"> </td>
<td rowspan="2"></td>
45
Balises de tableaux
Balises futures
Colgroup
• Une balise colgroup représente une ou plusieurs colonnes. Avec l'attribut span qui permet de les
regrouper elle peut représenter plusieurs colonnes adjacentes.
• Elle permet d'assigner des propriétés à toutes les cellules d'une colonne: largeur, couleur, alignement, etc.
• Elle se place après caption et avant toutes autres balises.
• Colgroup et col sont mal ou pas supportées par Firefox aussi sont elles mentionnées pour mémoire.
Col
• La balise col permet d'appliquer un style à une colonne ou plusieurs colonnes adjacentes avec
l'attribut span, à l'intérieur d'une colgroup.
• Ainsi le style défini par une colgroup peut être précisé pour chaque colonne quand la colgroup contient
plusieurs colonnes. On peut surcharger le style de la colgroup par une col.
• L'attribut width de colgroup ou col définit la largeur de la ou les colonnes.
46
Balises de tableaux
Structure d'une table
La balise table et le choix des balises internes.
Structure complète
Elle permet en théorie de mieux contrôler le contenu, mais pas plus qu'une structure simple avec des ID et des
classes.
<table>
<caption></caption>
<thead> <tr> <th></th> ... </tr> ... </thead>
<tfoot></tfoot>
<tbody> <tr> <td></td> ... </tr> ... </tbody>
</table>
47
Balises de tableaux
Structure d'une table
La balise table et le choix des balises internes.
Structure simple
Elle est suffisante dans la plupart des cas, accompagnée d'une feuille de style pour mettre en relief les titres de
colonnes et de lignes.
<table>
<caption></caption>
<tr> <th></th> ... </tr>
<tr> <td></td> ... </tr>
</table>
On peut aussi utiliser des <th> en début de ligne.
48
Balises de tableaux
Les balises Table en HTML 5
La nouvelle balise tfoot peut être placée avant ou après tbody.
On peut omettre les balises de fermeture comme </td>, </th>, </thead>, </tbody>, </tfoot>.
Mais <table> et <caption> doivent être fermés.
Exemple de code HTML 5:
<table>
<caption>Libellé</caption>
<thead>
<tr>
<th>Titre 1
<th>Titre 2
<tfoot> Bas de page
<tbody>
<tr>
<th>Titre de ligne
<td>Contenu de cellule ...
</table> 49
Nouvelle sémantique en
HTML5
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>
Et
<progress>
encore ...…
<svg>
<dialog>
<time>
<embed>
<figure>
<command>
<menu>
Rating:
51
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 une Base de
Datagrid
Données.
Utilisation très simple et rendu final agréable.
Time Définit une unité de temps
Svg Définit une image vectorielle
52
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
53
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.
Employée pour mettre en avant une partie d'un contenu en appliquant un style
Mark
surligné jaune sur le texte qu'elle décrit.
wbr Définit un saut de ligne possible.
54
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> 55
Les nouveaux éléments de
formulaire
<input type="datetime">
<input type="text" list="list">

<datalist id="list">
<option value="Mr">
...<input<input type="number">
type="range">
<input type="url">
<input
</datalist> type="email">
Et encore…
57
Minimum
Regular
MaxLengthand Maximum
Expressions
Required for
Fields textarea Values
Et encore…
<input type="text"
<input
<input pattern="[A-Za-z0-9_\-]+">
type="email"
type="range"
<textarea required="required">
min="20" max="80">
maxlength="2000"></textarea>
58
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
keygen permettre 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
59
Les nouveaux éléments de
média
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
61
Les nouveaux éléments de média
Exemple Balise Video
62
La balise Canvas en HTML5
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.
64
La balise <canvas>
Le canvas est une zone rectangulaire dans une page HTML
.
65
La balise <canvas>
66
La balise <canvas>
67
La balise <canvas>
68
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
69
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.
70
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.
71
Les éléments supprimés ou
dépréciés en HTML5
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>
73
Drag & Drop
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">
75
Drag & Drop
 Les méthodes ondragstart and setData() définissent “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)); }
76
formulaires
formulaires
L'élément HTML <form> représente une section d'un document qui contient des contrôles
interactifs permettant à un utilisateur d'envoyer des données à un serveur web.
http://41mag.fr/liste-des-balises-html5/balise-form-html5
78
Web Storage
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é.
80
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
81
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 ! ..}
82
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>
83
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>
84
Exercice
 Refaire le même exemple en utilisant l’objet SessionStorage au lieu d’ultiliser

l’objet LocalStorage.
 Quesque vous remarquez?
85
Géolocalisation
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.
87
Géolocalisation
 La méthode getCurrentPosition()
 Traitement des erreurs et des rejections
 Afficher le résultat sur un Map
88
Géolocalisation
89
Géolocalisation
getCurrentPosition() method sert à indiquer la position de l’utilisateur (exemple1)
90
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>
91
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>
92
Géolocalisation
93
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; }
}
94
Géolocalisation
95
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+"'>";
96
Plus d’Apis (Web Workers)
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".
98
Web Workers
Exemple :
99
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();
100
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();
101

HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

HTML 5

Transféré par

Informations du document

Description originale:

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

HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

ISTA NTIC

Année universitaire MODULE 10: DEVELOPPEMENT WEB COTE

Apprendre à créer des pages en langage HTML 5

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

Structure d’un document HTML5

Une nouvelle sémantique

Les nouveaux éléments de formulaire

Les nouveaux éléments pour les médias

Quand choisir HTML5/CSS3

HTML 4.01 Strict

<html lang= « fr »>

<meta charset= « utf-8 »>

<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

• le slogan de votre site…

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

 On y trouve des informations comme

• les mentions légales, etc...

 Regrouper tous les principaux liens de navigation du site.

 Par exemple le menu principal de votre site

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

 Elle englobe généralement une portion du contenu au centre

 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.

 articles de journaux ou de blogs

Les balises en HTML 4 et HTML 5

<td colspan="2"> </td>

On peut aussi utiliser des <th> en début de ligne.

Progress Définit une progression

Time Définit une unité de temps

Svg Définit une image vectorielle

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

wbr Définit un saut de ligne possible.

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

 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

 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.