Télécharger pour lire hors ligne
![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"
/>](https://image.slidesharecdn.com/html5workshop-131025175117-phpapp02/85/CreativeLab-Html5-workshop-10-320.jpg)
CreativeLab Html5 workshop
- 1.
- 2. HTML5 HTML5 est laderniè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 permetau 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 ceciau 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>Pagetitle</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. Structure de PageHTML5
- 7. DATALIST <input type="text" placeholder="VotreVille:" 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 scoreis: <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. Speech Input <input type="text"x-webkit-speech />
- 10. New form types <inputtype="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 typeson mobile type="email,tel,number"
- 12. Audio + Video <audioid="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.