Introduction to HTML5
•
3 likes•1,599 views
This document provides an introduction to HTML5 and summarizes its new features. It describes the new HTML5 doctype, new semantic elements like header, nav, section and article, new form input types like color and date, support for embedded video and audio, the canvas element for drawing, the history API for manipulating the browser history, local storage for persistent data, web workers for background processing, and links to additional HTML5 resources. The document serves as an overview of the new capabilities introduced in HTML5.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Introduction to HTML5
Similar to Introduction to HTML5 (20)
Recently uploaded
Recently uploaded (20)
Introduction to HTML5
- 1. Introduction to HTML5 adrian.olaru@1and1.ro Friday, December 10, 2010
- 2. What is HTML5? New Wave of Exciting Technologies for Making Web Apps. Friday, December 10, 2010
- 3. New doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> Friday, December 10, 2010
- 4. New Elements header hgroup nav details section summary article output aside progress footer menu Friday, December 10, 2010
- 5. Form enhancements new input types color number time month date datetime url range email search tel week datetime-local <input type="color" required="required" /> Friday, December 10, 2010
- 6. Form enhancements new attributes required autocomplete autofocus pattern ... <input type="color" required="required" /> Friday, December 10, 2010
- 7. Video & Audio <video> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> fallback content here <video> <audio src="audio.mp3">fallback content here</audio> Video Formats: .mp4 = H.264 + AAC .ogg/.ogv = Theora + Vorbis .webm = VP8 + Vorbis Friday, December 10, 2010
- 8. Canvas <canvas id="mycanvas" width="150" height="150"> fallback content here </canvas> var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); Friday, December 10, 2010
- 9. History manipulate the contents of the history stack history.pushState({page: 1}, "page 1", "page1.html"); history.replaceState() window.onpopstate = function(e) { e.state; }; Friday, December 10, 2010
- 10. Web Storage localStorage data persists after the window is closed data is shared across all browser windows. sessionStorage data doesn't persist after the window is closed data is not shared with other windows localStorage.setItem("size", "2"); //or localStorage.size = "2"; localStorage.getItem("size"); //or localStorage.size localStorage.removeItem("size"); localStorage.clear(); Friday, December 10, 2010
- 11. Web Workers var worker = new Worker('task.js'); worker.addEventListener('message', function(e) { e.data; }, false); worker.postMessage('Hello World'); // Send data to our worker. worker.terminate(); //to terminate the running worker task.js: onmessage = function (event) { postMessage(e.data); }; importScripts('foo.js', 'bar.js'); /* imports two scripts */ There are some HUGE stipulations, though: Workers don't have access to the DOM Workers don't have direct access to the 'parent' page. Friday, December 10, 2010
- 12. But wait, there’s more selectors inline editing drag & drop offline apps web SQL database geolocation messaging server events web sockets ... Friday, December 10, 2010
- 13. Resources HTML5 Spec @ WHATWG Using HTML5 Today http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.facebook.com/note.php?note_id=43853209391 W3C Spec HTML5 Demos and Examples http://www.w3.org/TR/html5/ http://html5demos.com/ Dive Into HTML5 by Mark Pilgrim Introducing HTML5 http://diveintohtml5.org http://introducinghtml5.com/ HTML5 Rocks Using HTML5's new Semantic Tags Today http://www.html5rocks.com/ http://msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx HTML5 Doctor Wrapping Things Nicely with HTML5 Local Storage http://html5doctor.com/ http://24ways.org/2010/html5-local-storage HTML5 Unleashed: Tips, Tricks and Techniques MDN HTML5 http://www.w3avenue.com/2010/05/07/html5-unleashed-tips- https://developer.mozilla.org/en/HTML/HTML5 tricks-and-techniques Friday, December 10, 2010
- 14. Thank You Friday, December 10, 2010