Vous êtes sur la page 1sur 25

HTML5-CSS3

Pr : Ilham Oumaira

Mail: oumaira@gmail.com
1
Historique (1)
1991 : Tim Berners-lee met au point le protocole HTTP ainsi que le langage HTML
1996 :
1re spcification HTML 2.0 par le W3C
Apparition du CSS
De 1997 1999 :
o Spcification HTML 3.2, 4.0 et 4.01
o Spcification CSS 2.0
o Cration du XML (eXtensible Markup Language)
2000 : Le W3C lance le XHTML 1.0, celui-ci possde exactement le mme contenu
que le html 4.01 la diffrence tient sur la syntaxe, le xhtml suivait les rgles du
xml. Exemple tous les attributs dune balise ne sexprime plus quen minuscule.
Historique (2)
2001 : Le W3C recommande le XHTML 1.1, celui-ci est entirement en XML,
cependant le navigateur le plus populaire du moment ne peut pas linterprter (ie
explorer). Le W3C perd pied avec la ralit des publications web. Ceci ne
lempche pas de se lancer dans le XHTML 2.0 cependant celui-ci possde
plusieurs problmes techniques et ne rpond toujours pas aux besoins
dveloppeurs du moment.
2004 : Scission au sein duW3C. Les reprsentants dOpra, Apple et Mozilla ne
sont pas en accord avec les priorits du W3C. Proposition de reprise du
dveloppement HTML pour la cration dapplications web mais celle-ci est rejete.
Les reprsentants dOpra et autres forment leur propre groupe WHATWG (Web
Hypertext Application Technology Working Group)

Historique (3)
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
et continue cependant sur le XHTML 2.0. De son ct WHATWG travaille
sur le HTML5
2007 : Le W3C accepte les propositions de recommandations du
WHATWG sur le HTML5.
2009 : Le format XHTML 2.0 est dfinitivement abandonn
2014: La spcification HTML5 devient une recommandation du W3C
Historique (4)
Des rgles ont t tablies
Toutes les nouvelles fonctionnalits seront bases sur HTML, CSS,
DOM, et JavaScript
Rduire au maximum la ncessit de plugins externes comme Flash,
Meilleure gestion des erreurs
HTML5 doit supporter plusieurs devices (mobiles)
Le processus de dveloppement doit tre ouvert au public

Qu'est-ce que HTML 5 ?
Une rvision majeure d'HTML
En remplacement de XHTML 2.0
En remplacement de HTML 4.01
S'appuie sur les standards existants

Simplifie la syntaxe

Ajoute des balises smantiques de structure
Rgles de base HTML 5

Pour avoir Un document bien form il faut respecter les rgles suivantes:
Les lments et les attributs sont insensibles la casse (mais la convention est
d'utiliser les minuscules)
Les lments non vides doivent avoir une balise douverture et une balise de
fermeture.
Les lments vides doivent se terminer par les caractres /> prcds dun espace
pour marquer la fin de llment
Les lments ne doivent pas se chevaucher et donc obir au principe premier
ouvert, dernier ferm
Tous les attributs doivent avoir une valeur incluse entre guillemets ("). Les
diffrents attributs du mme lment doivent tre spars par au moins un
espace
Une valeur doit tre donne tous les attributs utiliss, y compris ceux dont la
valeur est unique. Par exemple, plutt que dcrire :
<input type= "checkbox" checked disabled />
Il faut utiliser:
<input type= "checkbox" checked="checked" disabled="disabled" />

Validation dun document :
les validateurs du W3C et du WHATWG permettent de vrifier si le code
est bien form et conforme.
Pour lancer cette validation automatique, vous devez soumettre lURL ou
le code de vos documents HTML au validateur du W3C accessible
ladresse suivante : http://validator.w3.org, ou celui du WHATWG
ladresse : http://html5.validator.nu/
Structure dune page
Le langage HTML5 est une amlioration du langage HTML4, avec des
simplifications par rapport la version XHTML.
Tout document peut donc dbuter par la dclaration du doctype suivi de
llment racine html qui inclut les lments head et body.
Le Doctype

La dclaration du doctype est traditionnellement utilise pour spcifier le
type de balisage du document.
Celui de XHTML 1.0 tait le suivant :
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Celui de HTML 4.01 tait :
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01/EN
http://www.w3.org/TR/html4/strict. dtd >

Celui de HTML5 est:
<!DOCTYPE html>
La balise html
Llment <html> est llment racine du document
Il possde des attributs dont le plus utiles est lang. Celui-ci indique la
langue utilise par dfaut dans la page. Cette valeur sera reconnue par les
moteurs de recherche pour leur permettre dindexer les pages du site en
effectuant un tri par langue.
<html lang= fr >
La balise head
En HTML4 ctait
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
En HTML5 :
<meta charset= " utf-8 " >
< meta name = " description " content = " La description de la page " >

< meta name = " keywords " content = " Ecrire ici les mots cls " >

< meta name = " generator " content = " Notepad++" >

< meta name = " robots " content = " index,follow " >

< meta name = " author " content = " OUMAIRA ILHAM" >
Un document minimal
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
... <!-- Le reste du contenu --> ...
</body>
</html>
Les Formulaires
Formulaires HTML5
Enorme volution, alors que les formulaires navaient quasiment pas
chang depuis 1997
Ajout de nombreux validateurs qui auparavant ncessitaient du
JavaScript,
Ajout de nombreux types nouveaux pour les champs de formulaire,
auparavant fournis par des bibliothques JavaScript
Les nouveaux champs <input>
De nombreux nouveaux types de champs <input> ont t introduits, tous
ne sont pas encore supports, mme par les versions les plus rcentes des
navigateurs
color, date, datetime, datetime-local, email, month, number, range,
search, tel, time, url, week
http://www.w3schools.com/html/html5_form_input_types.asp

Le champ <input type=color>
Choisissez une couleur: <input type="color" name="favcolor" />

<input type=date>
Date de NAissance: <input type="date" name="bday" />





<input type=datetime-local>
Permet de choisir la date et lheure
Date Naissace: <input type="datetime-local" name="bdaytime" />
<input type=time>
Heure du rendez-vous :
<input type="time" name=rdv_time" />



<input type=week>
Choisissez la semaine :
<input type="week" name=no_semaine" />





<input type=month>
<input type="month" name="bdaymonth" />
Choix du mois et de lanne

<input type=email>
E-mail: <input type="email" name="useremail" />
Validation + messages derreurs.

Et lors de la soumission

<input type=number>
<input type="number" name="quantity" min="1" max="5" />

Attributs possibles : max, min, step, value (valeur par dfaut)
<input type=range>
<input type="range" name=n" min="1" max="10" />

Attributs : idem que ceux de type=number
Poppe un clavier contextuel sur mobile

Centres d'intérêt liés