SlideShare une entreprise Scribd logo
1  sur  13
Télécharger pour lire hors ligne
HTML5 WORKSHOP

Présenter Par

:

Bilel Kabtni
HTML5






HTML5 est la dernière évolution des standards qui
définissent HTML. Le terme HTML5 regroupe deux
concepts différents :
Il s'agit de la nouvelle version du langage HTML, avec
de nouveaux éléments, attributs et comportements ;
mais aussi un ensemble plus large de technologies qui
permettent des crée des sites web plus variés et
puissants, et des applications web, mobiles.
Conçu pour être utilisable par tous les développeurs de
l'Open Web, cette page de référence fait des liens vers
de nombreuses ressources sur les technologies
HTML5, classés dans différents groupes d'après leur
fonction.
<!DOCTYPE html>




Cela permet au navigateur ne supportant pas
encore HTML5 de passer en mode standard et ainsi
d'ignorer les balises inconnues.
Il est beaucoup plus simple que les précédents
doctypes, et plus court. Il est ainsi plus facile à
retenir et réduit le nombre d'octets devant être
téléchargés.
<meta>





<meta charset="UTF-8">
Placez ceci au tout début de votre
élément <head>, car certains navigateurs reprennent
leur interprétation des documents HTML, si l'encodage
de caractère déclaré est différent de ce qu'ils avaient
anticipés. De plus, il est recommandé d'utiliser UTF8, car il simplifie la gestions des caractères dans les
documents utilisant plusieurs graphies.
Notez que HTML5 limite les encodages autorisés à ceux
compatibles avec ASCII et utilisant au moins 8 bits. Ceci
pour améliorer la sécurité et éviter certains types
d'attaques.
Semantics & Markup


<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>

<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<figure>
<img src="..."/>
<figcaption>Chart 1.1</figcaption>
</figure>
<footer>
Copyright ©
<time datetime="2010-11-08">2010</time>.
</footer>
</body>
Structure de Page HTML5
DATALIST












<input type="text" placeholder="Votre Ville:"
list="city">
<datalist id="city">
<option value="Tunis">
<option value="Ariana">
<option value="Nabeul">
<option value="Sfax">
<option value="Sousse">
<option value="Bizarte">
</datalist>
Progressive Bar










Your score is:
<meter min="0" max="100" low="40" high="90"
optimum="100" value="91"></meter>
Download is:
<progress>working...</progress>
Downloading is:
<progress value="75" max="100">3/4
complete</progress>
Speech Input


<input type="text" x-webkit-speech />
New form types
<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14"
value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel" placeholder="(555) 555-5555"
pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0"
/>
Form field types on mobile


type="email,tel,number"
Audio + Video




<audio id="audio" src="sound.mp3"
controls></audio>
document.getElementById("audio").muted = false;
<video id="video" src="movie.webm" autoplay
controls></video>
document.getElementById("video").play()
Contact



Contact:bilel-pazzo@hotmail.com
Facebook:bilel kabtni

Contenu connexe

En vedette

Déterminer les dépenses à la retraite
Déterminer les dépenses à la retraiteDéterminer les dépenses à la retraite
Déterminer les dépenses à la retraiteGFA Services Financiers
 
Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...
Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...
Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...AfricaNews
 
Aparato excretor(natalia y yo)
Aparato excretor(natalia y yo)Aparato excretor(natalia y yo)
Aparato excretor(natalia y yo)Alba3011
 
Des managers témoignent
Des managers témoignentDes managers témoignent
Des managers témoignentParadoxe06
 
ÉQUIPEMENT DU CHEF D’ORCHESTRE
ÉQUIPEMENT DU CHEF D’ORCHESTREÉQUIPEMENT DU CHEF D’ORCHESTRE
ÉQUIPEMENT DU CHEF D’ORCHESTREWengerCorporation
 
Projet Developpement Durable
Projet Developpement Durable Projet Developpement Durable
Projet Developpement Durable eleonorepodda
 
world war two : capacites de résistance et de resilience
world war two : capacites de résistance et de resilienceworld war two : capacites de résistance et de resilience
world war two : capacites de résistance et de resilienceClaude GINDREY
 
Data in Switzerland: National Library at OKCon 2013
Data in Switzerland: National Library at OKCon 2013Data in Switzerland: National Library at OKCon 2013
Data in Switzerland: National Library at OKCon 2013CH_Bundesarchiv
 
Tumblr afrique panafricain
Tumblr afrique panafricainTumblr afrique panafricain
Tumblr afrique panafricainOla Oz
 
Label hydricite EU vs USA
Label hydricite  EU vs USALabel hydricite  EU vs USA
Label hydricite EU vs USAClaude GINDREY
 
Formation hybride virtuose bd
Formation hybride virtuose bdFormation hybride virtuose bd
Formation hybride virtuose bdadeleflannery
 

En vedette (20)

Premium Insight Novembre 2012 fr
Premium Insight Novembre 2012 frPremium Insight Novembre 2012 fr
Premium Insight Novembre 2012 fr
 
Grupo #7
Grupo #7Grupo #7
Grupo #7
 
Déterminer les dépenses à la retraite
Déterminer les dépenses à la retraiteDéterminer les dépenses à la retraite
Déterminer les dépenses à la retraite
 
Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...
Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...
Morbidité maternelle et recours aux soins dans le Haut Atlas occidental au Ma...
 
Coag esf 2011
Coag esf 2011Coag esf 2011
Coag esf 2011
 
Los valores
Los valoresLos valores
Los valores
 
Aparato excretor(natalia y yo)
Aparato excretor(natalia y yo)Aparato excretor(natalia y yo)
Aparato excretor(natalia y yo)
 
Des managers témoignent
Des managers témoignentDes managers témoignent
Des managers témoignent
 
ÉQUIPEMENT DU CHEF D’ORCHESTRE
ÉQUIPEMENT DU CHEF D’ORCHESTREÉQUIPEMENT DU CHEF D’ORCHESTRE
ÉQUIPEMENT DU CHEF D’ORCHESTRE
 
Projet Developpement Durable
Projet Developpement Durable Projet Developpement Durable
Projet Developpement Durable
 
world war two : capacites de résistance et de resilience
world war two : capacites de résistance et de resilienceworld war two : capacites de résistance et de resilience
world war two : capacites de résistance et de resilience
 
Mypdf 8
Mypdf 8Mypdf 8
Mypdf 8
 
Offre de service L'Avantage GFA
Offre de service L'Avantage GFAOffre de service L'Avantage GFA
Offre de service L'Avantage GFA
 
Data in Switzerland: National Library at OKCon 2013
Data in Switzerland: National Library at OKCon 2013Data in Switzerland: National Library at OKCon 2013
Data in Switzerland: National Library at OKCon 2013
 
Museo de ciencias
Museo de cienciasMuseo de ciencias
Museo de ciencias
 
Paint
PaintPaint
Paint
 
Tumblr afrique panafricain
Tumblr afrique panafricainTumblr afrique panafricain
Tumblr afrique panafricain
 
Label hydricite EU vs USA
Label hydricite  EU vs USALabel hydricite  EU vs USA
Label hydricite EU vs USA
 
Samesame (1) (1)
Samesame (1) (1)Samesame (1) (1)
Samesame (1) (1)
 
Formation hybride virtuose bd
Formation hybride virtuose bdFormation hybride virtuose bd
Formation hybride virtuose bd
 

Similaire à CreativeLab Html5 workshop

Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies webIrinaTsimpilova1
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarCours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarAbdessattar Ettaieb
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSABNSA - Aquitaine
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxBrahimKarimi
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
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émantiqueYounesOuladSayad1
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le WebSaïd Radhouani
 

Similaire à CreativeLab Html5 workshop (20)

Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarCours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
XHL8
XHL8XHL8
XHL8
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
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
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
 
Html
HtmlHtml
Html
 

CreativeLab Html5 workshop

  • 2. HTML5    HTML5 est la dernière évolution des standards qui définissent HTML. Le terme HTML5 regroupe deux concepts différents : Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et comportements ; mais aussi un ensemble plus large de technologies qui permettent des crée des sites web plus variés et puissants, et des applications web, mobiles. Conçu pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait des liens vers de nombreuses ressources sur les technologies HTML5, classés dans différents groupes d'après leur fonction.
  • 3. <!DOCTYPE html>   Cela permet au navigateur ne supportant pas encore HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues. Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.
  • 4. <meta>    <meta charset="UTF-8"> Placez ceci au tout début de votre élément <head>, car certains navigateurs reprennent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipés. De plus, il est recommandé d'utiliser UTF8, car il simplifie la gestions des caractères dans les documents utilisant plusieurs graphies. Notez que HTML5 limite les encodages autorisés à ceux compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.
  • 5. Semantics & Markup  <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subtitle</h2> </hgroup> </header> <nav> <ul> Navigation... </ul> </nav> <section> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> </section> <aside> Top links... </aside> <figure> <img src="..."/> <figcaption>Chart 1.1</figcaption> </figure> <footer> Copyright © <time datetime="2010-11-08">2010</time>. </footer> </body>
  • 7. DATALIST          <input type="text" placeholder="Votre Ville:" list="city"> <datalist id="city"> <option value="Tunis"> <option value="Ariana"> <option value="Nabeul"> <option value="Sfax"> <option value="Sousse"> <option value="Bizarte"> </datalist>
  • 8. Progressive Bar       Your score is: <meter min="0" max="100" low="40" high="90" optimum="100" value="91"></meter> Download is: <progress>working...</progress> Downloading is: <progress value="75" max="100">3/4 complete</progress>
  • 10. New form types <input type="text" required /> <input type="email" value="some@email.com" /> <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/> <input type="range" min="0" max="50" value="10" /> <input type="search" results="10" placeholder="Search..." /> <input type="tel" placeholder="(555) 555-5555" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /> <input type="color" placeholder="e.g. #bbbbbb" /> <input type="number" step="1" min="-5" max="10" value="0" />
  • 11. Form field types on mobile  type="email,tel,number"
  • 12. Audio + Video   <audio id="audio" src="sound.mp3" controls></audio> document.getElementById("audio").muted = false; <video id="video" src="movie.webm" autoplay controls></video> document.getElementById("video").play()