Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Super quick introduction to html5

3,684 views

Published on

a quick look at the form elements of html5, to me one of the least appreciated features

Published in: Technology
  • Be the first to comment

Super quick introduction to html5

  1. 1. Super quick Introduction to HTML5 Woody Pewitt Icenium Evangulist http://blog.pewitt.org @woodyp woodyp@telerik.com
  2. 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. 3. Simplified!
  4. 4. HTML5<!DOCTYPE html>XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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. 5. SOME NEW TAGS IN HTML5
  6. 6. SO WHERE IS THE SEXY?
  7. 7. <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
  8. 8. 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
  9. 9. 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

×