Réalisée par :

Ferjani MayssaGuiras Zouhour

Le HTML 5

2

Sommaire

• La chronologie des technologies Web• Qu’est ce que c’est le HTML5 ?• Qu’est ce qui va changer avec HTML5?• HTML5,quels apports dans le monde mobile? • HTML5 vs Flash!• Qui l’utilise déjà?• Conclusion

3

La petite histoire des technologies web

4

le HTML5 est..

• Comme son nom l’indique, HTML5 est une évolution de HTML 4.0

• Le travail sur HTML5 a commencé fin 2003• En 2007 , le W3C officialise HTML5• A partir de la s’est fait un gros travail afin de permettre a

html5 d’etre compatible avec ses ancêtres ce qui a quelque peu ralenti son développement

Tout ce que vous savez faire en HTML reste valide

5

L’ambition de HTML5

• Supprimer les balises obsolètes• Remplacer certaines balises• Introduire de nouvelles balises afin de donner

une structure sémantique plus cohérente aux pages web

6

Nouvelles balises..

<<header>

<figure>

<

<<

<<aside>

<audio>

<canvas><nav>

<source>

<<video>

<<footer>

<

<

<<

<datalist>

<details>

<embed>

<mark>

<article>

7

Balises obsolètes..

<applet>

<acronym>

<frame>

<center><center>

<big>

<font>

<dir>

8

Les nouveautés de HTML5..

• Un allégement de code• Les balises à utilisation sémantique • Les balises à utilisation multimédia• Les nouveaux champs de formulaire• L’élément Canvas

9

Les balises simplifiées

On peut dire que l’HTML5 est beaucoup plus léger et laxiste sur l’écriture du code HTML

10

Les balises de structurations<div> avec un id=”header” est remplacée par

la balise <header>

• <header> : Qui indique que l’élément est une en-tête

• <footer> : Qui indique que l’élément est un pied-de-page

• <nav> : Qui indique un élément de navigation tel qu’un menu

• <aside> : Qui correspond à une zone secondaire non liée au contenu principal de la page

• <article> : Qui représente une portion de la page qui garde un sens même séparée de l’ensemble de la page

11

Avec HTML5, une séparation

Contenu

Présentation Structure

12

Les balises à utilisation multimedia..

<video>

Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube intégré à votre page et natif au navigateur !

13

<audio>

• En 3 lignes de code vous avez un lecteur MP3 !

• D’ailleurs chaque navigateur utilise un design qui lui est propre pour styliser son lecteur

Les balises à utilisation multimedia..

14

Des formulaires améliorés

15

Nouveaux types de champs input

<input type=‘’date’’/> Il permet d’afficher un champ de saisir de date avec une nouvelle présentation graphique, affichage de calendrier pour aider au choix

16

<input type= ‘’tel‘’ />

Sur un Android Sur un iPhone

17

<input type=‘’url’’/>

• le champ de saisi texte qui permet de vérifier automatiquement que la valeur saisie est une URL valide

18

Autre nouveaux types..

• Search : champ de saisi dédié à la recherche

• Placeholder : texte à afficher par défaut dans la zone de saisi, il sera masqué quand le curseur sera sur le champ, valable pour les champs de saisi

• Email : champ de saisi texte qui vérifie automatiquement que la valeur saisie est un email valide

19

Nouveaux attributs..

• Multiple: attribut pour le type «File» qui

permet le téléchargement de plusieurs fichiers simultanément

• Pattern: attribut pour le type «text» qui permet de définir le modèle que devra respecter la valeur Saisi dans le champ

20

21

Canvas

• Canvas permet d'intégrer des dessins vectoriels dans une page.

• Il peut aussi être utilisé pour l'interface d'une application

et remplace ainsi Flash.

• Il s’agit d’une surface sur laquelle il est possible de tracer des formes et de les animer.

• En résumé… C’est dans cette zone que sont réalisées des animations ou des jeux

22

HTML5 dans l’univers des mobiles

• Avec la croissance soutenue du marché des smartphones (iPhone, Android, Nokia)

• Le HTML5 apporte des solutions aux problèmes qui bloquaient jusqu'à présent nombre d'innovations sur l'internet mobile, motivant ainsi son adoption.

23

HTML5,quels apports pour le monde mobile?

• Lecteur de vidéo grâce aux APIs de video & audio

• Des images dynamiques en HTML5 grâce à l'élément Canvas

Lire des vidéos directement au sein du navigateur web, sans nécessiter la présence d’un plug-in supplémentaire tel que Flash d’Adobe

24

HTML5 vs Flash

• Scribd « le Youtube des documents » avait annoncé passer l’intégralité de son contenu de Flash vers HTML5.

• Le plus impressionnant c’est que en passant de Flash à HTML5, Scribd double son temps de visite !

25

26

Qui l’utilise déjà?

27

• Google et Apple ont déjà adopté HTML5

28

En conclusion..

• HTML5 propose de nouveaux éléments très pratiques qui ont pour objectif d'harmoniser les médias et de structurer la mise en page par des éléments plus "sémantiques".