HTML5

16/02/2015

HTML5

[Le Web Smantique ]

16/02/2015

HTML 5

LES BASES DE

HTML 5

16/02/2015

Plan Le HTML5

Vue

HTML 5 vs XHTML1.1

Navigation et Support

lments et Attributs

Les formulaires

Audio et Vidos

Les canevas

16/02/2015

HTML 5 -

On ne peut pas encore vraiment qualifier HTML5 de rvolution ; cependant, il marque des

avances dans le domaine de la cration de pages web . Avances en termes de

multimdia avec des lments audio et vido natifs affranchissant des plug-

ins habituels. Avances galement, mais peut tre moins perceptibles pour le grand

public, en termes de smantique avec de nombreux lments aux rles

prdtermins qui permettent de structurer prcisment les contenus des sites Internet.

Son association avec les feuilles de styles CSS3 rend possible la consultation des pages

sur les terminaux les plus divers, allant de classique la tablette et au

tlphone portable, grce aux multiples possibilits offertes par CSS.

16/02/2015

HTML 5 - HTML 5 vs XHTML

XHTML: Avantages :

Plus facile relire,

Facile maintenir,

Compatible avec d'autres technologies

XML...

Inconvnients :

Syntaxe plus exigeant au moment de

l'criture,

Sensible la casse (tout doit tre en

minuscules)

Le content -type : application/ xhtml+xml

pas reconnus par la majorit des

navigateurs

Doctype complexe

HTML5: Avantages :

Code plus simple,

Des lments Media plus riches,

Nouvelles balises "smantiques "

permettant de sectoriser une page web,

Syntaxe plus souple,

Insensible a la casse.

Doctype simplifi

Inconvnients :

Compatibilit avec les navigateurs web,

La souplesse du syntaxe peut produit un

code difficilement lisible et encore moins

maintenable

16/02/2015

HTML 5 - Navigation et Support

A l'heure actuelle, quelques nouveaux lments propres au langage HTML5 ne sont pas

encore entirement implments sur les navigateurs. Cependant ces navigateurs volue

rapidement et que dans un futur proche, de plus en plus de fonctionnalits serrons

support.

Le problme c'est que chaque navigateur gre certains lments et attributs qui ne son pas

prisent en charge par les autres. Ce qui complique les choses pour adapter le code tous

les navigateurs. Le mieux tant de que les lments ou attributs compatibles avec

un maximum de navigateurs, ou encore de faire une version plus "simple" pour les

navigateurs moins modernes.

Pour connatre le taux de compatibilit de votre navigateur, rendez-vous sur la page http ://html 5test.com/
http://html5test.com/http://html5test.com/http://html5test.com/http://html5test.com/http://html5test.com/http://html5test.com/http://html5test.com/http://html5test.com/

16/02/2015

HTML 5 - Navigation et Support

16/02/2015

HTML 5 - Navigateurs web et moteurs de rendu

Il convient de distinguer les navigateurs et les moteurs de rendu. Les premiers exploitent

les seconds au sein interface utilisateur. Il arrive que plusieurs navigateurs se

partagent le mme moteur de rendu.

Un moteur est charg de du code HTML et de son rendu graphique

avec des feuilles de style CSS et galement le code JavaScript prsent

dans la page.

16/02/2015

HTML 5 - Bibliothques de dtection et de modernisation

Les navigateurs sont ingaux pour la comprhension de HTML 5, depuis les lments de

base (nouvelles balises) diffrentes API complmentaires. Des librairies JavaScript

se proposent soit de pallier certains des manques, soit de renseigner sur les fonctionnalits

supportes par le navigateur du visiteur.

Modernizr : est srement la plus connue des librairies en ce qui concerne la dtection

HTML 5 et CSS 3. Il fichier JavaScript ajoutant ds le chargement de la page des

classes spcifiques racine .

html 5shim (ou html 5shiv) : Ce petit script autorise des nouveaux lments HTML5

sur Internet Explorer (

16/02/2015

HTML 5

HTML5

lments et Attributs

16/02/2015

HTML 5 - lments et Attributs

Modles de contenu HTML 5

La spcification HTML5 dgage trois types de modles de contenu:

les lments de flux , qui structurent le document ;

les lments de phras, qui sont en gnral imbriqus dans les prcdents, et

confrent une valeur smantique particulire leur propre contenu ou qui

correspondent des lments mdias ou de formulaire ;

les lments de mtadonnes (ou mta-informations), qui apportent des

renseignements complmentaires au contenu ou agissent sur la prsentation.

16/02/2015

HTML 5 - Tableau du Modles de contenu HTML 5

16/02/2015

HTML 5 - Tableau priodique des lments... HTML5

16/02/2015


Le Doctype HTML 5

HTML 5, le doctype mentionnait document de rfrence, la DTD

(Document Type Definition ), grammaire rsumant la syntaxe HTML et ses attributs .

Depuis HTML5, le doctype a t considrablement simplifi pas sensible la

casse, DTD prcise, et que se limite une dclaration laconique :

16/02/2015


charset est nouveau en HTML 5. Il spcifie des caractres utilis. Cette

dclaration doit tre unique pour document.

Au lieux de

16/02/2015


le H de HTML, la cl de vote de la dimension hypertexte. La spcification

HTML5 a enrichie en ajoutant des attributs :

Tlcharger l'App

Attribut Valeurs Rle

media media query Spcifie une requte de mdia pour laquelle la cible est optimise

type type MIME Le type MIME de la destination du lien.

download nom du fichier aprs

tlchargement ou (vide)

Indique que la ressource lie est prvue pour tre tlcharge. Si une

tlchargement.

16/02/2015

HTML 5 - lments et Attributs - Sections et titres

Sections et titres

Les sections dlimitent les zones du document possdant une valeur smantique

particulire. Contrairement et qui aucun rle particulier, hormis

celui de regrouper des lments, chaque section possde un rle prcis, et peut tre

utilise une plusieurs fois dans le document.

Nom Dtails

section Section gnrique, regroupant une mme thmatique de contenu, de prfrence avec un en-tte.

article Section de contenu dans un document ou une application web, dont la composition peut tre indpendante du reste de

la page et extraite individuellement.

nav

aside contenu.

header selon le contexte titres,

navigation, formulaire de recherche, table des matires, logo, etc.

footer selon son plus proche anctre pouvant contenir des informations connexes et

une navigation annexe.

page web block

16/02/2015


lment fondamental de la nouvelle approche de dcoupe smantique des documents,

regroupe un contenu relatif une mme thmatique. Il peut tre introduit par

des lments de titraille (, , , etc.)

Il faut si est uniquement de pour affecter un style ou appliquer un

script ; si lments sont plus appropris (particulirement , ,

, , et en dernier recours).

Articles

<

<

16/02/2015


est une spcialisation de . Il possde une plus forte valeur

smantique, et pour cela il faut le considrer comme une portion de document qui se suffit

elle-mme, par exemple une entre distincte parmi . On peut extraire son

contenu, sans que celui-ci perde son sens.

<

Publication le < time datetime="2015-02-10" pubdate >Jeudi

10 fvrier 2015 par Ahmad

<

<

16/02/2015


Comme son nom le suggre, correspond un en-tte de section. Il peut

de -tte gnral du document , est plac de telle sorte dans la hirarchie

ne dispose pas de section. Il peut alternativement tre utilis en dbut de

ou le cas chant, et donc contenir :

des informations (titres , paragraphes, etc.) ;

une navigation (, , , etc.) pour cette sous-partie de document ;

une table des matires pour ou qui le contient . De par sa nature, un lment ne peut tre contenu dans , ou lui-mme.

< img src="logo.png" alt="" />

Titre principal

< li>Accueil

< li>Contact

< li> propos

16/02/2015


de pour le pied de page est . Il galement

lment spcialis possdant une valeur smantique, visant contenir les informations

que peut habituellement placer en fin de section, telles que des mentions lgales, des

informations de contact ou ventuellement une navigation. De par sa nature, un lment ne peut tre contenu dans , ou lui-mme.

Tous droits rservs

< li>Contact

< li>Plan du site

16/02/2015


Les niveaux de navigation peuvent tre multiples sur un site web ou une application. Il

peut de liens portant sur du site, sur une sous-partie de

en particulier, vers des pages, ou bien encore vers des sections du mme document.

est un choix de prdilection pour la navigation principale (souvent dans

) et ventuellement pour les navigations annexes (souvent dans < footer > ). Il peut galement aider les robots dresser une carte de du site

< li>Accueil

< li>Articles

< li>Archives

< li>Contact

16/02/2015


Une page web est bien souvent dote contenu principal et connexes.

On parle alors de contenu tangentiel, et est destin . On peut

considrer comme rpondant ces critres : une dfinition des termes utiliss dans le

contenu, une biographie, un glossaire, une chronologie, etc.

Gestion

< li>Panier

< li>Commandes

< li>Suivi

16/02/2015


Un bloc contenant des informations de contact peut tre ralis grce address.

Celui-ci son plus proche anctre de type body ou article.

Les informations peuvent correspondre aux noms des personnes du document,

leurs adresses e-mail, de messagerie instantane ou web, ventuellement leurs

coordonnes tlphoniques ou postales.

Auteurs de cet article :

M. Ahmaed,

Moi -mme

16/02/2015


regroupe un ou plusieurs titres . Idalement, il de

vocation tre utilis partir de deux titres, car il reprsente -tte section,

lorsque celle-ci dispose de plusieurs titres, sous-titres, ou titres alternatifs.

HTML5 et CSS3

Ou comment rvolutionner le web en douceur

Publication le Jeudi 3 fvrier 2015

<

16/02/2015

HTML 5 - lments et Attributs - Texte

Dans un web smantique, vient combler un manque cruel de balisage

des heures et des dates. il reprsente un avantage non seulement pour la smantique, mais

aussi pour automatise par les moteurs de recherche.

Publication: 2014-05-01 .

16/02/2015


Reprsente une opportunit de coupure de ligne (word break en anglais),

mot ou phrase. est un lment vide qui ne comprend bien entendu aucune

proprit de style.

Le mot le plus long de la langue franaise est: anticonstitu tionnellement

16/02/2015


Un texte contenu entre les balises et est considr comme marqu ou

surlign . Il signale et met en valeur une portion du document sur laquelle on veut

attirer dans un contexte particulier. du marqueur fluo.

Son apparence par dfaut consiste en une couleur de fond jaune vif et un texte noir.

Aviez -vous not le jeu de mots suivant ?

il balise !

16/02/2015


(BiDiisolate en anglais), isole son contenu des effets de la mise en forme

de texte bidirectionnelle . Il permet de ne pas aboutir un alignement confus pour du

contenu gnr par les utilisateurs, pour lequel la direction initiale est inconnue. Par

exemple, un nom crit en langue arabe qui serait mlang du texte latin.

< li> utlisateur Nicole: 60 points

< li> utlisateur Adam: 80 points

utlisateur : 90 points

16/02/2015

HTML 5 - lments et Attributs - Contenu embarqu

Contenu embarqu

On dsigne par contenu embarqu tout lment faisant rfrence des donnes stockes

dans un fichier ou une ressource externe au document HTML. Il

documents HTML, de mdias vido et .

Les nouveaux lments , , , font chapitre

ddi, car ils reprsentent une avance majeure de HTML 5 et mritent une attention

particulire.

16/02/2015

HTML 5 - lments et Attributs - Contenu embarqu

et < figcaption >

Cet lment ne correspond pas proprement parler un contenu embarqu, mais est bien

souvent en osmose avec < img > . Il permet une lgende optionnelle

du contenu regroup en un bloc.

Le rle de figcaption est de confrer une lgende figure . Son contenu autoris

est un contenu de type texte, mais aussi lments tels que des liens.

< img src="nyc-water-taxi.jpg" width="600">

Une photo du New York Water Taxi

16/02/2015

HTML 5 - lments et Attributs - Attributs vnements

Attributs vnements

Les attributs gestionnaires jouent un rle particulier, car ils associent un

type DOM pouvant survenir pour un lment une fonction de script. Cela

permet donc de dclencher un bout de code JavaScript, sur des vnements tels que

lorsque la page a t charge , ou lorsque presse sur une touche . La

plupart eux concernent :

les entres utilisateur (souris, clavier) ;

la navigation au clavier (focus) ;

les formulaires (changement de valeur, validation) ;

la lecture de mdias (audio, vido) ;

les interactions riches (glisser-dposer, molette souris) ;

le chargement des pages et des ressources.

16/02/2015

HTML 5

HTML5 Formulaires & Stockage des donnes locales

16/02/2015

HTML 5 - Formulaires

Les limitations de HTML 4 pour les formulaires sont flagrantes. Au cours de du

langage, divers lments de contrle ont t introduits pour permettre aux visiteurs

site des informations, les valider et les envoyer au serveur. Il de :

< input> avec les types text, radio, submit, checkbox, password, file, image, hidden ;

;

;

Web Forms 2.0, initialement nomme XForms Basic avait pour but de

fournir HTML 4 et XHTML 1.x des moyens de validation des donnes et plus

conviviaux. la spcification HTML 5 propose de nouveaux types pour ,ainsi que

quelques nouveaux lments part entire :

< input> avec les types tel , url , email , search, date , time , datetime , datetimelocal ,

month , week, number , range , color ;

;

;

;

;

.

16/02/2015

HTML 5 Formulaires - et ses variantes

et ses variantes est particulier, car il revt de multiples apparences et fonctionnalits,

uniquement caractrises par type . Son but est de recueillir les informations

entre effectue par . Afin de pouvoir enrichir les lments de formulaire

en HTML, des nouveaux types ont t ajouts pour en HTML 5.

Type Rle

tel Numro de tlphone

url Adresse URL/URI

email Adresse e-mail

search Champ de recherche

date Date

time Heure

datetime Date et heure

datetime -local Date et heure (locales)

month Mois

week Semaine

number Valeur numrique

range

color Une couleur RVB (3 composantes de 8 bits)

16/02/2015


Premier parmi la srie des nouveaux types inaugurs par HTML 5, tel est une dclinaison

champ texte par dfaut indiquant au navigateur que saisir un numro

de tlphone.

Tlphone :

Safari Mobile pour iOS reconnat

trs bien cette spcificit en

affichant un clavier appropri

de chiffres.

16/02/2015


Dans la mme famille, le Working Group HTML en a profit pour prvoir un champ texte

destin recevoir une adresse de type URL absolue.

URL :

De manire quivalente, Safari

Mobile dploie un clavier

personnalis comportant

quelques touches virtuelles plus

adresse Internet.

16/02/2015


Un champ de type email est un autre champ texte spcialis, destin recevoir une

adresse e-mail. Connaissant la plage de caractres qui peuvent tre entrs pour une telle

adresse, un navigateur mobile et tactile peut galement dcider un clavier

spcifique et restreint aux caractres utiles (a-z, 0-9, @, -, _, .) pour faciliter la saisie.

E-mail :

De manire quivalente, Safari

Mobile dploie un clavier

personnalis comportant

quelques touches virtuelles plus

adresse e-mail.

16/02/2015


Un champ de recherche de type search est une spcialisation de champ texte. Dans le

fond, il pourrait trs bien banale copie conforme, car elle actuellement

pas particularit signification plus explicite.

Recherche:

16/02/2015


Avec le type date , dbute une liste de plusieurs contrles pour de donnes

temporelles. Tel que son nom original cet lment vise une date slectionner

prcise du calendrier. Le format de la valeur texte y correspondant est la succession de

sur quatre chiffres, les numros du mois et du jour, spars par des tirets (ce qui

quivaut Y-m-d en PHP).

Date de naissance:

16/02/2015


Un type time est un champ pour une heure prcise. Son format peut se prsenter

sous deux aspects selon la prcision que souhaite obtenir : heures:minutes :secondes

(ce qui quivaut H:i :s en PHP).

Heure:

Opera 9+,

un calendrier est

droul pour

simplifier la slection.

16/02/2015


Le type datetime combine date et time. Du point de vue de la valeur texte reprsente par

les deux valeurs de date et sont spares par un caractre T . Elles

sont suivies par une prcision sur le fuseau horaire concern.

Date et Heure:

16/02/2015


Le type de champ datetime -local est extrmement proche de datetime, duquel il reprend

la slection de date et en omettant cette fois toute prcision sur le fuseau horaire.

La date est alors considre comme survenant dans le fuseau courant de faute

de plus .

Date et Heure:

16/02/2015


Ce champ permet de slectionner un mois et une anne. Il ne peut simple

slection de mois parmi un ensemble de douze choix uniques (de janvier dcembre),

mais bien mois du calendrier reli une anne prcise. La valeur texte est compose

de sur quatre chiffres, spare par un tiret du mois sur deux chiffres, entre 01

(janvier) et 12 (dcembre).

Date-mois :

16/02/2015


Le type week est trs semblable month , la diffrence que de ce champ comme

son nom est une semaine. Le format est l aussi trs simple apprhender, il

de sur quatre chiffres, suivie tiret, de la lettre W et du numro de la

semaine dans cette anne.

Date-Semaine :

16/02/2015


Un champ de type number consacre son existence aux valeurs numriques,

ventuellement situes dans un intervalle spcifi par les attributs min et max.

Age:

16/02/2015


Une slection de valeur numrique peut aussi tre effectue avec le type range , mais avec

un contrle volontairement imprcis. pourra naviguer dans un intervalle dfini

par les attributs min et max, avec un pas ventuellement prcis par step.

Volume:

16/02/2015


Grce au type color , devient un contrle pour la slection couleur,

ou plutt code couleur stock dans son attribut value. Le format est sous la forme

hexadcimale que retrouve dj au sein de HTML et CSS, dbutant par un dise suivi

de 6 caractres alphanumriques entre 0 et 9, A et F.

Couleur:

Attention : les codes couleur

HTML (tels que white, lime,

chocolate) ne sont pas

autoriss.

16/02/2015


list plac sur les champs permet lier une liste de choix possibles, en

se rfrant son identifiant (attribut id). Pour cela, est utilis en

complment . Celui-ci stocke des valeurs diffrentes de diffrents lments

auxquels on donne une valeur grce value.

Maroc

France

Le support de cet lment

derniers tests, seul Opera

11.5+ le comprend.

16/02/2015

HTML 5 Formulaires -

est vou recueillir le rsultat calcul. Celui-ci peut tre

dynamique en JavaScript ou gnr au pralable dans le code HTML par le serveur.

Recettes :

Dpenses :

Rsultat :

16/02/2015


reprsente une barre de progression, telle peut en trouver

dans les interfaces graphiques usuelles, --dire indiquant tche.

Cet lment est support partir

de Firefox 6, Internet Explorer 10,

Opera 11, et Chrome.

16/02/2015


est une jauge qui peut sembler similaire , mais qui

reprsente avant tout un tat prcis sur une chelle dfinie plutt pourcentage de

progression indicatif.

Temprature du corps :

37.5 C

Occupation du disque dur :

450 Mo

Score des votes :

9/10

Cet lment est support partir

Opera 11, Internet Explorer 10, et

Chrome.

16/02/2015

HTML 5 Formulaires - Construction de formulaires

Un formulaire est toujours contenu dans un lment . On y place de champs

, , , mais aussi de et .

Le formulaire est gnralement valid par un bouton input de type submit . Les valeurs des lments

contient sont alors envoyes au serveur, dfinie par action .

Attribut Valeurs Rle

accept-

charset

codes pages de

caractres spars par

des virgules caractres accepts par le serveur

pour traiter le formulaire

action URL Adresse laquelle sont envoyes les

donnes

enctype voir tableau

complementaire

Type MIME associ au contenu du

formulaire lors de sa soumission au

serveur

method Get, post

name texte Nom du formulaire

novalidate novalidate ou "" ou

(vide) donnes ct client pour la

soumission du formulaire.

target _blank, _parent, _self,

_top

Contexte de navigation spcifique

(iframe, autre) pour la validation du

formulaire, si celui-

dans le contexte courant.

Valeur enctype Description

application/x -

www -form -

urlencoded

Par dfaut. Tous les

caractres sont encods

avant d'tre envoys (les

espaces sont convertis en

symboles "+"

multipart / for

m-data

Aucun caractre n'est

encod. Cette valeur est

ncessaire lorsque vous

utilisez un formulaire qui

assure le contrle au

tlchargement

text /plain Les espaces sont

remplacs par "+"

16/02/2015

HTML 5 Formulaires - Quelques nouveaux attributs

Attribut Rle

placeholder placeholder

watermark )

autofocus la page.

required navigateur ne doit pas permettre la validation du formulaire si ce dernier reste vide.

pattern une expression rgulire. Les valeurs incorrectes bloquent la validation du formulaire.

16/02/2015

HTML 5 Stockage local de donnes

Contrairement aux Cookies, le Web Storage met en deux objets nomms

sessionStorage et localStorage pour faire persister les donnes de

respectivement durant la session ou sans limitation de dure particulire. La capacit

offerte est nettement suprieure, habituellement de 5Mo 10Mo par dfaut. Les donnes

ne sont alors plus vhicules sur le rseau chaque requte HTTP.

On utilise du JavaScript afin de manipuler les fonctions associes aux

sessionStorage et localStorage qui donnent aux donnes en lecture , modification et

suppression , de faon bien pratique.

16/02/2015


Stockage de session

Le stockage de session (session storage) est destin la mmorisation de donnes ayant

une courte dure de vie, dont la porte est limite la session active de la fentre (ou de

du navigateur ainsi domaine dont elles sont issues. se fait via

sessionStorage de type Storage, enfant direct de window .

Local Storage

la diffrence du prcdent, le stockage local bnficie dure de vie plus longue

pas effac la fermeture du navigateur. Il est accessible via global

localStorage de type Storage, enfant de window .

16/02/2015


Storage

Pour accder de manire unifie sessionStorage et localStorage, Storage a t

dfinie. Le modle de donnes est un tableau associatif de paires cl/valeur, accessible

par les suivantes:

Fonction Signification

(localStorage | sessionStorage).getItem ('nom') Retourne la valeur correspondant au nom

(localStorage | sessionStorage).setItem (' nom','valeur ') Stocke la valeur spcifie sous le nom spcifi

(localStorage | sessionStorage).key(position) position spcifie (0 correspond la premire

position de sauvegarde)

(localStorage | sessionStorage).length Retourne le nombre de donnes mmorises

(localStorage | sessionStorage).clear() Efface toutes les donnes sauvegardes

(localStorage | sessionStorage).removeItem ('nom') Efface la donne sauvegarde sous le nom

16/02/2015

HTML 5

HTML5

Les mdias Riche | < video >

16/02/2015

HTML 5 Les Mdias Riches

Sur le papier, la spcification promet un usage relativement simple des mdia riches. Mais

dans la pratique, les diteurs de navigateurs et les rdacteurs des groupes de travail

pu se mettre sur la solution technique prconiser en termes de format et de

conteneur. La problmatique actuelle rside surtout dans la multiplicit des solutions de

dcodage de la vido.

En ce qui concerne des lments et , gnralement ils ont

un comportement identique, et partagent beaucoup .

16/02/2015

HTML 5 Les Mdias Riches - Prise en charge par les navigateurs

Prise en charge des lments et par les navigateurs

Tableau de support (simplifi) des formats audio

Tableau de support (simplifi) des formats vido

HTML5

Documents

Transcript of HTML5