Embed Size (px)
DESCRIPTION
Cours HTML5
Citation preview
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émantique1. Balises à utilisation multimédiaLes deux éléments principaux sont : <audio> et <video>
Illustration 1: Balise VidéoVoir l'exemple ici
Illustration 2: Balise audioVoir l'exemple iciPour 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> <!-- Deux formats disponibles par ordre de priorité: --> <source src="trappeur.ogg" type="audio/ogg"> <source src="trappeur.aac" type="audio/aac"> <!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: --> <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>
Abdelmonem NAAMANE Page 2/7
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.
Abdelmonem NAAMANE Page 3/7
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
Abdelmonem NAAMANE Page 4/7
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"/>
Abdelmonem NAAMANE Page 5/7
Illustration 4: Source du formulaire
Step : le pas d'incrémentation.Required : indique ce champs est obligatoiremin : la valeur minimale acceptéemax : 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.
Abdelmonem NAAMANE Page 6/7
<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.htmlhttp://www.w3schools.com/html5/default.asphttp://diveintohtml5.org/forms.html
Abdelmonem NAAMANE Page 7/7
