Super quick introduction to html5
•
1 recomendación•4,113 vistas
a quick look at the form elements of html5, to me one of the least appreciated features
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Super quick introduction to html5
Similar a Super quick introduction to html5 (20)
Más de Woody Pewitt
Más de Woody Pewitt (12)
Último
Último (20)
Super quick introduction to html5
- 1. Super quick Introduction to HTML5 Woody Pewitt Icenium Evangulist http://blog.pewitt.org @woodyp woodyp@telerik.com
- 2. • Less Header Code • More Semantic HTML tags • Media Tags • Geolocation • Canvas • Input Types • Form Validation • Draggable • Local Storage • Cross-Domain Messaging • Web Sockets • Eventually, 3D canvas
- 3. Simplified!
- 4. HTML5 <!DOCTYPE html> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> HTML5 HTML5 <script> <style> // Code here. // Code here. </script> </style> XHTML 1.0 Transitional XHTML 1.0 Transitional <script type="text/javascript"> <style type="text/css"> /* <![CDATA[ */ // Code here. // Code here. </style> /* ]]> */ </script>
- 5. SOME NEW TAGS IN HTML5
- 7. SO WHERE IS THE SEXY?
- 8. <canvas> + <svg> • SVG (Scalable Vector Graphics) pre-dates HTML5 • But it is finally viable now that IE9 supports it • This means all major browsers will support SVG and canvas I will not cover <svg> or <canvas> in this talk
- 9. New for elements <input type="date" /> <input type="datetime" /> <input type="email" /> <input type="month" /> <input type="number" /> <input type="range" /> <input type="tel" /> <input type="time" /> <input type="url" /> All tags from HTML4 are supported
- 10. Resources • html5test.com • alistapart.com/articles/get-ready-for-html-5 • dev.w3.org/html5/spec/Overview.html • diveintohtml5.org • html5.org • html5demos.com • html5doctor.com • sencha.com/products/touch • w3schools.com/html5
Notas del editor
- <header><footer><aside><nav><div class=”content”><article><section><hgroup><section><dialog><p>etc...<figure><figcaption><img /><details><summary><p>etc...