Formation html5

959 views
870 views

Published on

support de formation

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
959
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Formation html5

  1. 1. Aperçu rapide des bases du HTML5Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   1  
  2. 2. 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  
  3. 3. 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  
  4. 4. 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  
  5. 5. 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  
  6. 6. 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  
  7. 7. 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  
  8. 8. 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  
  9. 9. 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  
  10. 10. Tableau des élémentsVoyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   10  
  11. 11. 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écifica8ons  HTML5  hXp://www.xul.fr/html5/specifica8ons.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  

×