Cours html5

10 663 vues

Publié le

Cours HTML5

Publié dans : Formation
5 commentaires
4 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
10 663
Sur SlideShare
0
Issues des intégrations
0
Intégrations
106
Actions
Partages
0
Téléchargements
550
Commentaires
5
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours html5

  1. 1. Quest-ce que cest le HTML 5 ?Comme son nom lindique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 acommencé fin 2003 grâce à un groupe de travail indépendant, mais ce nest quen 2007 que leW3C 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 lexemple ici Illustration 2: Balise audioVoir lexemple iciPour avoir le résultat de ces deux balises avant lapparition de HTML5, les développeur web étaientobligés dutiliser flash avec ces inconvenants classique : swf volumineux, certains terminauxmobiles 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. 2. 2. Balises à utilisation sémantiqueSectionLélément <section> permet de définir les différentes sections dun document comme parexemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Ilpeut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de lastructure 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 vientdannoncer que ses travaux sur XHTML 2 se termineront cette année 2009.</p></article>AsideLélément <aside> est destiné au contenu indirectement lié à larticle lui-même, il représente cequi lentoure comme par exemple une barre latérale darchives.<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>HeaderLélément <header> représente len-tête dune section ou dune page.FooterLélément <footer> représente le pied de page dune section ou dune page pour mettre lesinformations concernant lauteur, les mentions légales…etc.NavLélément <nav> représente une section de liens de navigation.<nav><a href="index.php">Page daccueil</a><a href="contact.php">Contact</a></nav>Abdelmonem NAAMANE Page 2/7
  3. 3. FigureLélément <figure> peut être utilisé pour regrouper des éléments tels que des images ou desvidé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 remplacerles<div id= "header"> que lon trouve sur la plupart des sites construits actuellement.Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi unemeilleure accessibilité puisquune structure commune permettra entre autre aux synthétiseursvocaux de se développer et aux personnes mal voyantes de se repérer plus facilement.De nouvelles fonctionnalités permettront aussi dutiliser HTML et uniquement HTML au lieu dyimplémenter toute une série de plugins pour faire des choses finalement pas très compliquées.Abdelmonem NAAMANE Page 3/7
  4. 4. 3. Balise à utiliser dans les formulaires.Plusieurs attributs ont été ajoutées au formulaires avec HTML5. Lajout de ces éléments faciliterala vie des développeurs vue quils étaient obligés dutiliser le FLASH ou beaucoup de codejavascript pour ajouter un élément simple au formulaire, comme les sliders, les dates, lenombres,... Illustration 3: Formulaire avec HTML5Abdelmonem NAAMANE Page 4/7
  5. 5. Illustration 4: Source du formulaireVoir la démo iciLes nouveaux types et attributs de lélément input :Number : ce nouveau type permet de saisir des nombre et de faire une incrémentation oudécrémentation grace aux boutons à droite.<input type="number" name="points" min="0" max="10" required="required" step="3"/>Abdelmonem NAAMANE Page 5/7
  6. 6. Step : le pas dincrémentation.Required : indique ce champs est obligatoiremin : la valeur minimale acceptéemax : la valeur maximale acceptéeRange : semblable au type number, mais laffichage est sous forme de slider.<input type="range" min="0" max="10" step="2" value="6">Date : permet dafficher un champs de saisie de date avec une nouvelle présentation graphique,affichage de calendrier pour aider au choix. <input type="date">Il existe dautres 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 uneURL 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 serale champs, valable pour les champs de saisis.Color : permet dafficher une palette de couleur à fin de choisir graphiquement un code couleur.Abdelmonem NAAMANE Page 6/7
  7. 7. <input type="color">Multiple (attribut pour le type File): permet lupload 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 valeursaisi 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.htmlAbdelmonem NAAMANE Page 7/7

×