Formation html5

Aperçu rapide des bases du HTML5Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 1

HTML5Introduc8on : vers un web séman8que La version finalisée du html5 est prévu pour 2014 mais il est déjà possible de l’u8liser. L’avantage du html5 par rapport aux xhtml et hml4, c’est son importante orienta8on séman8que. Vous allez pouvoir plus facilement définir les rôles des balises html, ce qui aura aussi certainement un impact sur le référencement. Séman&que ? Le web séman8que est un mouvement qui favorise les « méthodes communes pour échanger des données ». Le html est séman8que depuis le début. Les balises qui composent le code html définissent leur rôle. Le 8tre principale est défini par un <h1>, les paragraphes sont eux des <p>, etc. Le html5 va plus loin en proposant des balises pour presque tous les cas. Là où était u8lisée la balise <div> pour les blocs du site, nous allons pouvoir spécifier ces blocs comme étant un <header>, un <footer>, le contenu de l’ <ar8cle>. Voir : §  hXp://fr.wikipedia.org/wiki/Web_s%C3%A9man8que §  hXp://www.php-‐astux.info/seman8que-‐html.php Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 2

Le <head>Simplifica8on du code Contrairement aux version html et xhtml passées, il ne sera plus nécessaire de spécifier la version. CeXe une manière dannoncer que le html5 est compa8ble avec toutes les versions et que les futures versions du html devront lêtre. Exemple de html5 : <!DOCTYPE html> <html> <head> <meta charset="UTF-‐8"> <8tle>ma page</8tle> <meta descrip8on="ma page"> <link rel="stylesheet" href="file.css"> <script src="file.js"></script> </head> (…) Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 3

Les balises obsolètesCertaines balises, même si elles peuvent être comprises par les navigateurs, sont considérées comme obsolètes par le html5. Il est recommandé de ne plus u8liser. Les balises à éviter §  frame, frameset et noframes §  acronym (u8liser abbr à la place) §  font, big, center et strike Les balises redéfinies §  <b> maintenant juste pour appliquer un style à un texte sans donner une importance §  <i> pour signifier que le texte est une voix alterna8ve sans donner dimportance §  <cite> pour citer le nom dune œuvre mas plus le nom dune personne Les liens : ça change ! La modifica8on du mode décriture des liens est importante. La balise <a>, de type inline, ne pouvait se placer que dans des balises bloc (<h1><a href="monlien.html">3tre</a></h1>). Si un lien était répété sur un 8tre et un paragraphe, il fallait le rédiger dans le <h1> et dans le <p>. Avec le html5, vous pouvez envelopper les deux balises par un <a> : <a href="monlien.html"><h1>8tre</h1><p>mon texte de paragraphe</p></a> Par contre il nest pas possible dinsérer un <a> dans un <a> ! Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 4

StructureHeader, footer, nav La fonc8on de ces trois balises est assez simple à comprendre. Elles encadrent lentête, le pied de page et le menu de naviga8on. La véritable nouveauté de ces trois balises résident dans le fait quelles ne sont pas exclusivement des8nées à lensemble de la page (auquel cas il ny aurait quun header, quun footer…) mais peuvent définir des données propres à une autre balise structurant la page. Sec8on Proche de la balise <div> avec une approche plus séman8que, elle est censé regrouper des contenus contextuel, par théma8que ou apparenté. CeXe balise peut contenir un header et un footer. Header, footer, nav et aside peuvent être u8lisés pour spécifiés les différents contenus de sec8on. Aside Cest une forme dencadré qui peut accueillir du contenu indirectement en lien avec le contenu général de la page mais qui naffecte ce contenu si il était enlevé. Cela peut être une cita8on extraite du document principal. Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 5

StructureAr8cle CeXe balise est proche de sec8on mais plus précise. Elle est censée regrouper les données soit dune page précise, soit dun flux éventuel. Il sera donc u8lisé pour les billets de blog, les informa8ons, les fils de discussion… Il nest pas simple de définir quand nous devons u8liser sec8on ou ar8cle, sachant quil peut y avoir plusieurs sec8on dans un ar8cle et inversement. Hgroup CeXe balise peut être u8lisée dans la balise header, sec8on ou ar8cle. Elle regroupe les éléments 8tres dun contenu. Elle peut donc afficher à la suite un h1, un h2, etc. Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 6

Exemple de structure en html5 Source de limage : hXp://www.html5code.com/tutorials/html5-‐seman8c-‐layout-‐tags/ Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 7

Les balises inlineNouveaux éléments orientés séman8ques HMLT5 implémente des éléments "inline" comme les précédents span, strong, em… Mark CeXe balise permet de surligner des récurrences sans lui donner une importance. Par exemple, sur une page de résultat pour la recherche dun terme, <mark> encadre le terme pour le meXre en surbrillance. Time La balise <8me> sert à informer sur les dates, les heures ou la combinaison des deux. Cest une alterna8ve html5 aux microformats. Il est possible dy ajouter laXribut pubdate pour informer que cest une date de publica8on. Exemples : <8me date8me="14:30">14 h 30</8me> <8me date8me="2012-‐08-‐01T11:12" pubdate>Ar8cle publié le 1 août 2012 à 11h12</8me> Autres balises : meter, progress > hXp://www.alsacrea8ons.com/ar8cle/lire/1416-‐html5-‐meter-‐progress.html Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 8

Utiliser html5 !Il est possible du8liser du HTML5 aujourdhui, même si tous les navigateurs (soit parce que anciens, soit parce que généralement probléma8ques). Pour que votre site puisse être lisible sur tous les navigateurs, il vous faudra vous armer de pa8ence et ajouter quelques codes. Style Pour les navigateurs qui ne savent pas encore interpréter le HTML5, vous devrez simplement les renseigner en CSS. Par exemple, vous donnez aux balises blocs une valeur "display: block" (sec8on, ar8cle, nav, aside, header, footer et hgroup). Les problèmes les plus important vous viendront de IE. Il faudrait, via du javascript, créer les éléments un par un. Heureusement, il existe des scripts pour le faire. Voir les scripts de Remy Sharp par exemple (hXp://html5shiv.googlecode.com/svn/trunk/html5.js) à appeler dans votre <head> avec les commentaires IE : <!—[if IE]><script src="…"></script><![endif]-‐-‐>. Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 9

Tableau des élémentsVoyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 10

Quelques liens§  Web séman8que et (x)html5 hXp://tcuvelier.developpez.com/tutoriels/web-‐seman8que/html5-‐microdonnees/introduc8on/ §  HTML5, lévolu8on séman8que et SEO hXp://blog.maroke8ng.com/html-‐5-‐evolu8on-‐seman8que-‐et-‐seo/comment-‐page-‐1/ §  Structurer une page en HTML5 avec les μdonnées et des μformats hXp://on-‐air.hiseo.fr/html5/seman8c-‐html5/ §  Les spéciﬁca8ons HTML5 hXp://www.xul.fr/html5/speciﬁca8ons.php §  Livre de Jeremy Keith hXp://www.abookapart.com/products/html5-‐for-‐web-‐designers/ et lire (en anglais) hXp://adac8o.com/ar8cles/1704/ §  HTML5 seman8c layout tags (en anglais) hXp://www.html5code.com/tutorials/html5-‐seman8c-‐layout-‐tags/ Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ contact@voyelle.fr 11

Formation html5

by Voyelle on Aug 01, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics

Formation html5 Presentation Transcript