Aperçu rapide des
bases du HTML5
Ticoët l Communication culturelle
Rozenn Tanguy - 06 78 00 37 02 - rozenn@ticoet.fr
Erwan...
HTML52
HTML : les balises et les attributs
HTML permet d'enrichir un
texte avec des informations
structurelles, sémantique...
HTML53
Le head
Simplification du code
Contrairement aux
version html et xhtml
passées, il ne sera plus
nécessaire de spéci...
HTML54
Les balises
Par défaut, il existe plusieurs
comportements pour les
balises. Les deux principaux
sont les balises bl...
HTML55
Les balises
Inline
Les balises inline déterminent
une particularité pour des
éléments précis. Il a la largeur
que l...
HTML56
Les attributs
Les attributs les plus courant
pour faciliter l’usage des CSS
permettent d’ajouter des
identifiants o...
HTML57
Le <head>
Simplification du code
Contrairement aux version html et xhtml passées, il ne sera plus
nécessaire de spé...
HTML58
HTML5
Introduction : vers un web sémantique
La version finalisée du html5 est prévu pour 2014 mais il est déjà poss...
HTML59
Les balises obsolètes
Certaines balises, même si elles
peuvent être comprises par les
navigateurs, sont considérées...
HTML510
Structure
Header, footer, nav
La fonction de ces trois balises est assez simple à comprendre. Elles
encadrent l'en...
HTML511
Structure
Aside
C'est une forme d'encadré qui peut accueillir du contenu
indirectement en lien avec le contenu gén...
Exemple de structure en html5
Source de l'image : http://www.html5code.com/tutorials/html5-semantic-layout-tags/
HTML513
Les balises inline
Nouveaux éléments orientés sémantiques
HMLT5 implémente des éléments "inline" comme les précéde...
HTML514
Utiliser html5 !
Il est possible d'utiliser du HTML5 aujourd'hui, même si tous les
navigateurs (soit parce que anc...
Tableau des éléments
HTML516
Quelques liens
 Web sémantique et (x)html5
http://tcuvelier.developpez.com/tutoriels/web-semantique/html5-
microd...
Prochain SlideShare
Chargement dans…5
×

Les base du Html5

653 vues

Publié le

Sans rentrer dans les détails des nouveautés du html5, voici une liste condensée.

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
653
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
18
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les base du Html5

  1. 1. Aperçu rapide des bases du HTML5 Ticoët l Communication culturelle Rozenn Tanguy - 06 78 00 37 02 - rozenn@ticoet.fr Erwan Tanguy – 06 62 15 11 02 – erwan@ticoet.fr
  2. 2. HTML52 HTML : les balises et les attributs HTML permet d'enrichir un texte avec des informations structurelles, sémantiques et de présentation. Le principe de HTML consiste à utiliser des éléments délimités par des balises. <balise>éléments</balise> Exemple : <h1>Titre de mon contenu</h1> <p>Paragraphe de mon contenu<p> Les attributs permettent d'apporter certaines précisions à des éléments. Il peut s'agir par exemple d'un nom de fichier (pour placer une image) ou d'une référence à une adresse HTML (lorsqu'on crée un lien). <balise attribut="contenu">éléments</b alise> Exemple d’une image : <IMG src="bateau01.jpg" alt="Un bateau">
  3. 3. HTML53 Le head Simplification du code Contrairement aux version html et xhtml passées, il ne sera plus nécessaire de spécifier la version. Cette une manière d'annoncer que le html5 est compatible avec toutes les versions et que les futures versions du html devront l'être. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ma page</title> <meta name="description" content="ma page"> <link rel="stylesheet" href="file.css"> <script src="file.js"></script> </head> (…)
  4. 4. HTML54 Les balises Par défaut, il existe plusieurs comportements pour les balises. Les deux principaux sont les balises bloc et les balises inline. Bloc Les balises bloc déterminent un cadre qui, par défaut, prend 100% de la largeur et dont la hauteur se définit par ses contenus. Il est possible d’imbriquer plusieurs balises bloc en fonction des besoins. Les balises les plus courantes :  <div> pour un cadre sans particularité ;  <h1>, <h2>, <hx> pour encadrer des titres ;  <p> pour encadrer des paragraphes ;  <hr> pour afficher une ligne de séparation ;  <header>, <footer>, <section>, <article>, <aside> pour encadrer des parties précises de votre contenu…
  5. 5. HTML55 Les balises Inline Les balises inline déterminent une particularité pour des éléments précis. Il a la largeur que lui impose son contenu. Les balises les plus courantes :  <strong> pour afficher un gras ;  <em> pour afficher une emphase, italique ;  <span> pour encadrer des éléments sans particularité – utile pour des modifications avec les CSS ;  <br> pour faire un saut de ligne ;  <img src="url" alt="description"> pour afficher une image ;  <a href="url"> pour mettre un lien sur un élément…
  6. 6. HTML56 Les attributs Les attributs les plus courant pour faciliter l’usage des CSS permettent d’ajouter des identifiants ou des classes aux balises. Cela permet par exemple de pouvoir isoler une div d’une autre : <div>contenu</div> <div id="special">contenu identifié</div> L’id "special" va permettre de donner des spécificités CSS sans toucher à l’autre div. En CSS, on appelle cet élément #special. Liste des attributs les plus fréquents :  id pour donner un identifiant (CSS : #id) ;  class pour donner une classe (CSS : .class) ;  title pour donner une information bulle à un contenu (texte ou image) ;  href pour indiquer le chemin pour les liens <a> ou les styles CSS <link> ;  src pour indiquer le chemin pour les <script> ou les images <img>…
  7. 7. HTML57 Le <head> Simplification du code Contrairement aux version html et xhtml passées, il ne sera plus nécessaire de spécifier la version. Cette une manière d'annoncer que le html5 est compatible 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"> <title>ma page</title> <meta name="description" content="ma page"> <link rel="stylesheet" href="file.css"> <script src="file.js"></script> </head> (…)
  8. 8. HTML58 HTML5 Introduction : vers un web sémantique La version finalisée du html5 est prévu pour 2014 mais il est déjà possible de l’utiliser. L’avantage du html5 par rapport aux xhtml et hml4, c’est son importante orientation sémantique. 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émantique ? Le web sémantique est un mouvement qui favorise les « méthodes communes pour échanger des données ». Le html est sémantique depuis le début. Les balises qui composent le code html définissent leur rôle. Le titre 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 utilisé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’ <article>. Voir : http://fr.wikipedia.org/wiki/Web_s%C3%A9mantique http://www.php-astux.info/semantique-html.php
  9. 9. HTML59 Les balises obsolètes Certaines 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 utiliser. Les balises à éviter frame, frameset et noframes acronym (utiliser 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 alternative sans donner d'importance <cite> pour citer le nom d'une œuvre mas plus le nom d'une personne Les liens : ça change ! La modification 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">titre</a></h1>). Si un lien était répété sur un titre 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>titre</h1><p>mon texte de paragraphe</p></a> Par contre il n'est pas possible d'insérer un <a> dans un <a> !
  10. 10. HTML510 Structure Header, footer, nav La fonction de ces trois balises est assez simple à comprendre. Elles encadrent l'entête, le pied de page et le menu de navigation. La véritable nouveauté de ces trois balises résident dans le fait qu'elles ne sont pas exclusivement destinées à l'ensemble de la page (auquel cas il n'y aurait qu'un header, qu'un footer…) mais peuvent définir des données propres à une autre balise structurant la page. Section Proche de la balise <div> avec une approche plus sémantique, elle est censé regrouper des contenus contextuel, par thématique ou apparenté. Cette balise peut contenir un header et un footer. Header, footer, nav et aside peuvent être utilisés pour spécifiés les différents contenus de section.
  11. 11. HTML511 Structure Aside C'est une forme d'encadré qui peut accueillir du contenu indirectement en lien avec le contenu général de la page mais qui n'affecte ce contenu si il était enlevé. Cela peut être une citation extraite du document principal. Article Cette balise est proche de section mais plus précise. Elle est censée regrouper les données soit d'une page précise, soit d'un flux éventuel. Il sera donc utilisé pour les billets de blog, les informations, les fils de discussion… Il n'est pas simple de définir quand nous devons utiliser section ou article, sachant qu'il peut y avoir plusieurs section dans un article et inversement.
  12. 12. Exemple de structure en html5 Source de l'image : http://www.html5code.com/tutorials/html5-semantic-layout-tags/
  13. 13. HTML513 Les balises inline Nouveaux éléments orientés sémantiques HMLT5 implémente des éléments "inline" comme les précédents span, strong, em… Mark Cette balise permet de surligner des récurrences sans lui donner une importance. Par exemple, sur une page de résultat pour la recherche d'un terme, <mark> encadre le terme pour le mettre en surbrillance. Time La balise <time> sert à informer sur les dates, les heures ou la combinaison des deux. C'est une alternative html5 aux microformats. Il est possible d'y ajouter l'attribut pubdate pour informer que c'est une date de publication. Exemples : <time datetime="14:30">14 h 30</time> <time datetime="2012-08-01T11:12" pubdate>Article publié le 1 août 2012 à 11h12</time> Autres balises : meter, progress > http://www.alsacreations.com/article/lire/1416-html5- meter-progress.html
  14. 14. HTML514 Utiliser html5 ! Il est possible d'utiliser du HTML5 aujourd'hui, même si tous les navigateurs (soit parce que anciens, soit parce que généralement problématiques). Pour que votre site puisse être lisible sur tous les navigateurs, il vous faudra vous armer de patience 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" (section, article, 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 (http://html5shiv.googlecode.com/svn/trunk/html5.js) à appeler dans votre <head> avec les commentaires IE : <!—[if IE]><script src="…"></script><![endif]-->.
  15. 15. Tableau des éléments
  16. 16. HTML516 Quelques liens  Web sémantique et (x)html5 http://tcuvelier.developpez.com/tutoriels/web-semantique/html5- microdonnees/introduction/  HTML5, l'évolution sémantique et SEO http://blog.maroketing.com/html-5-evolution-semantique-et- seo/comment-page-1/  Structurer une page en HTML5 avec les μdonnées et des μformats http://on-air.hiseo.fr/html5/semantic-html5/  Les spécifications HTML5 http://www.xul.fr/html5/specifications.php  Livre de Jeremy Keith http://www.abookapart.com/products/html5-for-web-designers/ et lire (en anglais) http://adactio.com/articles/1704/  HTML5 semantic layout tags (en anglais) http://www.html5code.com/tutorials/html5-semantic-layout-tags/ 16

×