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 d...
<!DOCTYPE html>




Cela permet au navigateur ne supportant pas
encore HTML5 de passer en mode standard et ainsi
d'ignor...
<meta>





<meta charset="UTF-8">
Placez ceci au tout début de votre
élément <head>, car certains navigateurs reprenne...
Semantics & Markup


<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
N...
Structure de Page HTML5
DATALIST












<input type="text" placeholder="Votre Ville:"
list="city">
<datalist id="city">
<option valu...
Progressive Bar










Your score is:
<meter min="0" max="100" low="40" high="90"
optimum="100" value="91"></mete...
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-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;
<v...
Contact



Contact:bilel-pazzo@hotmail.com
Facebook:bilel kabtni
Prochain SlideShare
Chargement dans…5
×

CreativeLab Html5 workshop

355 vues

Publié le

CreativeLab Html5 workshop by Bilel Kabtni

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
355
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

CreativeLab Html5 workshop

  1. 1. HTML5 WORKSHOP Présenter Par : Bilel Kabtni
  2. 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. 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. 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. 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>
  6. 6. Structure de Page HTML5
  7. 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. 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>
  9. 9. Speech Input  <input type="text" x-webkit-speech />
  10. 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. 11. Form field types on mobile  type="email,tel,number"
  12. 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()
  13. 13. Contact   Contact:bilel-pazzo@hotmail.com Facebook:bilel kabtni

×