SlideShare une entreprise Scribd logo
Aperçu rapide des bases du HTML5




Voyelle	
  –	
  40	
  rue	
  du	
  Bignon,	
  forum	
  de	
  la	
  rocade,	
  bâ8ment	
  Oméga	
  à	
  Chantepie	
  -­‐	
  contact@voyelle.fr	
     1	
  
HTML5

Introduc8on	
  :	
  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	
  
d'annoncer	
  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è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	
  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	
  d'importance	
  
§  <cite>	
  pour	
  citer	
  le	
  nom	
  d'une	
  œuvre	
  mas	
  plus	
  le	
  nom	
  d'une	
  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	
  n'est	
  pas	
  possible	
  d'insérer	
  un	
  <a>	
  dans	
  un	
  <a>	
  !	
  


                                    Voyelle	
  –	
  40	
  rue	
  du	
  Bignon,	
  forum	
  de	
  la	
  rocade,	
  bâ8ment	
  Oméga	
  à	
  Chantepie	
  -­‐	
  contact@voyelle.fr	
         4	
  
Structure

Header,	
  footer,	
  nav	
  
La	
  fonc8on	
  de	
  ces	
  trois	
  balises	
  est	
  assez	
  simple	
  à	
  comprendre.	
  Elles	
  encadrent	
  l'entête,	
  le	
  pied	
  de	
  page	
  et	
  le	
  menu	
  de	
  
naviga8on.	
  
La	
  véritable	
  nouveauté	
  de	
  ces	
  trois	
  balises	
  résident	
  dans	
  le	
  fait	
  qu'elles	
  ne	
  sont	
  pas	
  exclusivement	
  des8né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.	
  
	
  
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	
  
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	
  cita8on	
  extraite	
  du	
  document	
  principal.	
  
	
  


                                  Voyelle	
  –	
  40	
  rue	
  du	
  Bignon,	
  forum	
  de	
  la	
  rocade,	
  bâ8ment	
  Oméga	
  à	
  Chantepie	
  -­‐	
  contact@voyelle.fr	
           5	
  
Structure

Ar8cle	
  
CeXe	
  balise	
  est	
  proche	
  de	
  sec8on	
  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	
  u8lisé	
  pour	
  les	
  billets	
  de	
  blog,	
  les	
  informa8ons,	
  les	
  fils	
  de	
  
discussion…	
  
	
  
Il	
  n'est	
  pas	
  simple	
  de	
  définir	
  quand	
  nous	
  devons	
  u8liser	
  sec8on	
  ou	
  ar8cle,	
  sachant	
  qu'il	
  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	
  d'un	
  
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	
  l'image	
  :	
  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 inline

Nouveaux	
  é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	
  d'un	
  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.	
  C'est	
  une	
  alterna8ve	
  html5	
  aux	
  
microformats.	
  Il	
  est	
  possible	
  d'y	
  ajouter	
  l'aXribut	
  pubdate	
  pour	
  informer	
  que	
  c'est	
  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	
  d'u8liser	
  du	
  HTML5	
  aujourd'hui,	
  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éments




Voyelle	
  –	
  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é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	
  

Contenu connexe

En vedette

Support de formation pour les pages Google+
Support de formation pour les pages Google+Support de formation pour les pages Google+
Support de formation pour les pages Google+
Voyelle Voyelle
 
présentation wordpress
présentation wordpressprésentation wordpress
présentation wordpress
monsieurpixel
 
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr
 

En vedette (20)

Support de formation pour les pages Google+
Support de formation pour les pages Google+Support de formation pour les pages Google+
Support de formation pour les pages Google+
 
CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
 
Comment développer la visibilité de mon commerce sur le web ?
Comment développer la visibilité de mon commerce sur le web  ?Comment développer la visibilité de mon commerce sur le web  ?
Comment développer la visibilité de mon commerce sur le web ?
 
Comment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clientsComment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clients
 
Amen.fr - Webinar avec l'Afnic : Nouveaux GTLD
Amen.fr - Webinar avec l'Afnic : Nouveaux GTLDAmen.fr - Webinar avec l'Afnic : Nouveaux GTLD
Amen.fr - Webinar avec l'Afnic : Nouveaux GTLD
 
présentation wordpress
présentation wordpressprésentation wordpress
présentation wordpress
 
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
 
Amen.fr - Afnic Nouveaux GTLD
Amen.fr - Afnic Nouveaux GTLDAmen.fr - Afnic Nouveaux GTLD
Amen.fr - Afnic Nouveaux GTLD
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 
Les applications iOS (iPhone & iPad) et Android
Les applications iOS (iPhone & iPad) et AndroidLes applications iOS (iPhone & iPad) et Android
Les applications iOS (iPhone & iPad) et Android
 
Améliorez votre présence en ligne pour attirer vos clients
Améliorez votre présence en ligne pour attirer vos clientsAméliorez votre présence en ligne pour attirer vos clients
Améliorez votre présence en ligne pour attirer vos clients
 
Amen et l'Afnic : Choisir son adresse internet.
Amen et l'Afnic : Choisir son adresse internet.Amen et l'Afnic : Choisir son adresse internet.
Amen et l'Afnic : Choisir son adresse internet.
 
Optimisez votre Référencement sur Internet pour améliorer la visibilité de v...
Optimisez votre Référencement sur Internet pour améliorer  la visibilité de v...Optimisez votre Référencement sur Internet pour améliorer  la visibilité de v...
Optimisez votre Référencement sur Internet pour améliorer la visibilité de v...
 
Conférence semestrielle Syntec numérique 2012
Conférence semestrielle Syntec numérique 2012Conférence semestrielle Syntec numérique 2012
Conférence semestrielle Syntec numérique 2012
 
IAB European Agency Snapshot Study
IAB European Agency Snapshot StudyIAB European Agency Snapshot Study
IAB European Agency Snapshot Study
 
Comment choisir son nom de domaine avec Amen
Comment choisir son nom de domaine avec AmenComment choisir son nom de domaine avec Amen
Comment choisir son nom de domaine avec Amen
 
Conseils et outils gratuits pour démarrer
Conseils et outils gratuits pour démarrer Conseils et outils gratuits pour démarrer
Conseils et outils gratuits pour démarrer
 
Adobe Digital Index "Best of the Best Benchmark 2014"
Adobe Digital Index "Best of the Best Benchmark 2014"Adobe Digital Index "Best of the Best Benchmark 2014"
Adobe Digital Index "Best of the Best Benchmark 2014"
 
Stratégie Product Listing Ads Google AdWords (2013)
Stratégie Product Listing Ads Google AdWords (2013)Stratégie Product Listing Ads Google AdWords (2013)
Stratégie Product Listing Ads Google AdWords (2013)
 

Similaire à Formation html5

Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
adeljaouadi
 

Similaire à Formation html5 (20)

Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
CreativeLab Html5 workshop
CreativeLab Html5 workshopCreativeLab Html5 workshop
CreativeLab Html5 workshop
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
4-html5_liste_balises.pdf
4-html5_liste_balises.pdf4-html5_liste_balises.pdf
4-html5_liste_balises.pdf
 
Html5 bonnes-pratiques
Html5 bonnes-pratiquesHtml5 bonnes-pratiques
Html5 bonnes-pratiques
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
 
Html 5
Html 5Html 5
Html 5
 
cours Php
cours Phpcours Php
cours Php
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Html
HtmlHtml
Html
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 

Plus de Voyelle Voyelle

Présentation Yahoo pipes
Présentation Yahoo pipesPrésentation Yahoo pipes
Présentation Yahoo pipes
Voyelle Voyelle
 

Plus de Voyelle Voyelle (20)

Construire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapesConstruire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapes
 
Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2
 
La publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'internationalLa publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'international
 
Etablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’internationalEtablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’international
 
Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...
 
Essentiel medias et reseaux sociaux
Essentiel medias et reseaux sociauxEssentiel medias et reseaux sociaux
Essentiel medias et reseaux sociaux
 
Prezi community management par Pierre AVRIL
Prezi community management par Pierre AVRILPrezi community management par Pierre AVRIL
Prezi community management par Pierre AVRIL
 
Edo2016 facebook
Edo2016  facebookEdo2016  facebook
Edo2016 facebook
 
Edo2016 twitter
Edo2016  twitterEdo2016  twitter
Edo2016 twitter
 
Edo2016 démarrer son activité les outils de communication c. guezou
Edo2016  démarrer son activité les outils de communication c. guezouEdo2016  démarrer son activité les outils de communication c. guezou
Edo2016 démarrer son activité les outils de communication c. guezou
 
Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ? Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ?
 
Les outils pour animer votre site web
Les outils pour animer votre site webLes outils pour animer votre site web
Les outils pour animer votre site web
 
Google analytics
Google analyticsGoogle analytics
Google analytics
 
Présentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! PipesPrésentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! Pipes
 
Mailjet
MailjetMailjet
Mailjet
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive design
 
Pour créer un bandeau de vignettes qui ouvre une lightbox
Pour créer un bandeau de vignettes qui ouvre une lightboxPour créer un bandeau de vignettes qui ouvre une lightbox
Pour créer un bandeau de vignettes qui ouvre une lightbox
 
Création & Gestion de fan page Facebook
Création & Gestion de fan page FacebookCréation & Gestion de fan page Facebook
Création & Gestion de fan page Facebook
 
Présentation Yahoo pipes
Présentation Yahoo pipesPrésentation Yahoo pipes
Présentation Yahoo pipes
 
Brochure 2012
Brochure 2012Brochure 2012
Brochure 2012
 

Formation html5

  • 1. Aperçu rapide des bases du HTML5 Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   1  
  • 2. HTML5 Introduc8on  :  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. 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   d'annoncer  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. 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  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  d'importance   §  <cite>  pour  citer  le  nom  d'une  œuvre  mas  plus  le  nom  d'une  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  n'est  pas  possible  d'insé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. Structure Header,  footer,  nav   La  fonc8on  de  ces  trois  balises  est  assez  simple  à  comprendre.  Elles  encadrent  l'entête,  le  pied  de  page  et  le  menu  de   naviga8on.   La  véritable  nouveauté  de  ces  trois  balises  résident  dans  le  fait  qu'elles  ne  sont  pas  exclusivement  des8né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.     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   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  cita8on  extraite  du  document  principal.     Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   5  
  • 6. Structure Ar8cle   CeXe  balise  est  proche  de  sec8on  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  u8lisé  pour  les  billets  de  blog,  les  informa8ons,  les  fils  de   discussion…     Il  n'est  pas  simple  de  définir  quand  nous  devons  u8liser  sec8on  ou  ar8cle,  sachant  qu'il  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  d'un   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. Exemple de structure en html5 Source  de  l'image  :  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. Les balises inline Nouveaux  é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  d'un  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.  C'est  une  alterna8ve  html5  aux   microformats.  Il  est  possible  d'y  ajouter  l'aXribut  pubdate  pour  informer  que  c'est  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. Utiliser html5 ! Il  est  possible  d'u8liser  du  HTML5  aujourd'hui,  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. Tableau des éléments Voyelle  –  40  rue  du  Bignon,  forum  de  la  rocade,  bâ8ment  Oméga  à  Chantepie  -­‐  contact@voyelle.fr   10  
  • 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