Cours html5

Qu'est-ce que c'est le HTML 5 ?
Comme son nom l'indique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 a
commencé fin 2003 grâce à un groupe de travail indépendant, mais ce n'est qu'en 2007 que le
W3C officialise HTML5 en intégrant en son sein ce groupe de travail.

Doctype : Le doctype est simplifié : <!DOCTYPE html>
Nous avons classé les nouvelles balises en trois catégories : Multimédia, formulaire et sémantique
1. Balises à utilisation multimédia
Les deux éléments principaux sont : <audio> et <video>

Illustration 1: Balise Vidéo
Voir l'exemple ici

Illustration 2: Balise audio
Voir l'exemple ici
Pour avoir le résultat de ces deux balises avant l'apparition de HTML5, les développeur web étaient
obligés d'utiliser flash avec ces inconvenants classique : swf volumineux, certains terminaux
mobiles ne supportent pas flash, les problèmes de référencement du flash, ...
<audio>

<source src="trappeur.ogg" type="audio/ogg">
<source src="trappeur.aac" type="audio/aac">

<a href="trappeur.ogg">Télécharger <cite>Avant j'étais trappeur</cite></a>
de David TMX (format Ogg Vorbis)
</audio>

Abdelmonem NAAMANE Page 1/7

2. Balises à utilisation sémantique

Section
L'élément <section> permet de définir les différentes sections d'un document comme par
exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il
peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la
structure du document.

Article
<article> représente un texte, comme par exemple un article de journal, de blog ou de forum.

<article>
<p><a href="http://www.alsacreations.com/actu/lire/746-xhtml-est-mort-vive-html.html">
XHTML est mort, vive HTML !</a><br />
Sous ce titre quelque peu provocateur (et faux) se cache une réalité officielle depuis hier soir : le W3C vient
d'annoncer que ses travaux sur XHTML 2 se termineront cette année 2009.</p>
</article>

Aside
L'élément <aside> est destiné au contenu indirectement lié à l'article lui-même, il représente ce
qui l'entoure comme par exemple une barre latérale d'archives.

<aside>
<h1>Archives</h1>
<ul>
<li><a href="/archives/09/05/">Mai 2009</a></li>
<li><a href="/archives /09/06/">Juin 2009</a></li>
<li><a href="/archives /09/07/">Juillet 2009</a></li>
</ul>
</aside>

Header
L'élément <header> représente l'en-tête d'une section ou d'une page.

Footer
L'élément <footer> représente le pied de page d'une section ou d'une page pour mettre les
informations concernant l'auteur, les mentions légales…etc.

Nav
L'élément <nav> représente une section de liens de navigation.

<nav>
<a href="index.php">Page d'accueil</a>
<a href="contact.php">Contact</a>
</nav>


Figure
L'élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des
vidéos avec leur légende <legend>.

<figure>
<img src="/images/chaton.jpg" alt="oh le beau chaton" />
<figcaption>Un petit chat mignon tout plein</figcaption>
</figure>

Les nouveaux sites pourront adopter les balises telles que <header> pour remplacer
les<div id= "header"> que l'on trouve sur la plupart des sites construits actuellement.

Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une
meilleure accessibilité puisqu'une structure commune permettra entre autre aux synthétiseurs
vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement.
De nouvelles fonctionnalités permettront aussi d'utiliser HTML et uniquement HTML au lieu d'y
implémenter toute une série de plugins pour faire des choses finalement pas très compliquées.


3. Balise à utiliser dans les formulaires.
Plusieurs attributs ont été ajoutées au formulaires avec HTML5. L'ajout de ces éléments facilitera
la vie des développeurs vue qu'ils étaient obligés d'utiliser le FLASH ou beaucoup de code
javascript pour ajouter un élément simple au formulaire, comme les sliders, les dates, le
nombres,...

Illustration 3: Formulaire avec HTML5


Illustration 4: Source du formulaire

Voir la démo ici
Les nouveaux types et attributs de l'élément input :

Number : ce nouveau type permet de saisir des nombre et de faire une incrémentation ou
décrémentation grace aux boutons à droite.

<input type="number" name="points" min="0" max="10" required="required" step="3"/>


Step : le pas d'incrémentation.
Required : indique ce champs est obligatoire
min : la valeur minimale acceptée
max : la valeur maximale acceptée

Range : semblable au type number, mais l'affichage est sous forme de slider.

<input type="range" min="0" max="10" step="2" value="6">

Date : permet d'afficher un champs de saisie de date avec une nouvelle présentation graphique,
affichage de calendrier pour aider au choix.

<input type="date">
Il existe d'autres type semblable à date : datetime (date et heure), month (année et mois), week
(le numèro de la semaine) et time (heure et minutes)

Email : Champ de saisi texte qui vérifie automatiquement que la valeur saisie est un e-mail valide.
<input type="email">

URL : Champ de saisi texte qui permet de vérifier automatiquement que la valeur saisie est une
URL valide.
<input type="url">

Search (nouveau type): champ de saisi dédié à la recherche.
<input type="search" name="user_search" placeholder="Search W3Schools" />
placeholder : texte à affiché par défaut dans la zone de saisi, il sera masqué quand le curseur sera
le champs, valable pour les champs de saisis.

Color : permet d'afficher une palette de couleur à fin de choisir graphiquement un code couleur.


<input type="color">

Multiple (attribut pour le type File): permet l'upload de plusieurs fichier simultanément
<input type="file" name="img" multiple="multiple" />

Pattern (attribut pour le type text) : Permet de définir le modèle que devra respecter la valeur
saisi dans le champ.
<input type="text" name="country_code" pattern="[A-z]{3}" />

Ressources :
http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html
http://www.w3schools.com/html5/default.asp
http://diveintohtml5.org/forms.html


Cours html5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Cours html5

Similar a Cours html5 (20)

Último

Último (18)

Cours html5