HTML 5 Presented By: Anees P Guided By: Mr. Aneesh M. Haneef
CONTENTS <ul><li>Introduction
Comparison between HTML 4 and HTML 5
New Features
New Tags
Media Playback
The Canvas Element
Web Storage </li></ul>
INTRODUCTION <ul><li>Developed by WHATWG and W3C
Successor to HTML 4
Working draft came in 2008
Still a work in progress
New Elements
Full CSS3 support
More markup to reduce scripting </li></ul>
INTRODUCTION <ul><li>New input types
Form validation
Geolocation </li></ul>
HTML5 vs HTML4 <ul><li><! DOCTYPE HTML PUBLIC “-//W3C//DTD// HTML 4.01//EN” “ http://w3.org/TR/html4/strict.dtd ”>
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;>
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot; http://www.w3.org/TR/html4/frameset.dtd &quot;>
Upcoming SlideShare
Loading in...5
×

HTML5

885

Published on

presentation prepared for my academic seminar

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
885
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1. HTML 5 Presented By: Anees P Guided By: Mr. Aneesh M. Haneef
  2. 2. CONTENTS <ul><li>Introduction
  3. 3. Comparison between HTML 4 and HTML 5
  4. 4. New Features
  5. 5. New Tags
  6. 6. Media Playback
  7. 7. The Canvas Element
  8. 8. Web Storage </li></ul>
  9. 9. INTRODUCTION <ul><li>Developed by WHATWG and W3C
  10. 10. Successor to HTML 4
  11. 11. Working draft came in 2008
  12. 12. Still a work in progress
  13. 13. New Elements
  14. 14. Full CSS3 support
  15. 15. More markup to reduce scripting </li></ul>
  16. 16. INTRODUCTION <ul><li>New input types
  17. 17. Form validation
  18. 18. Geolocation </li></ul>
  19. 19. HTML5 vs HTML4 <ul><li><! DOCTYPE HTML PUBLIC “-//W3C//DTD// HTML 4.01//EN” “ http://w3.org/TR/html4/strict.dtd ”>
  20. 20. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;>
  21. 21. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot; http://www.w3.org/TR/html4/frameset.dtd &quot;>
  22. 22. There's Even more </li></ul>
  23. 23. HTML5 vs HTML4 <ul><li><!DOCTYPE HTML> </li></ul>
  24. 24. NEW FEATURES <ul><li>Canvas element for drawing
  25. 25. Video and audio elements for media playback
  26. 26. Local offline storage
  27. 27. Content specific elements
  28. 28. Form validation is no longer painful </li></ul>
  29. 29. NEW TAGS <ul><li><video>
  30. 30. <audio>
  31. 31. <canvas>
  32. 32. <header>
  33. 33. <footer>
  34. 34. <nav>
  35. 35. <article>
  36. 36. <time> </li></ul>
  37. 37. MEDIA PLAYBACK <ul><li>Embed video or audio without a plugin
  38. 38. <video src = “file.ogg”>
  39. 39. <audio src = “file.mp3”>
  40. 40. <embed src=&quot;helloworld.swf&quot; > </li></ul>
  41. 41. MEDIA PLAYBACK <ul><li>Video formats ogg mp4 WebM
  42. 42. Audio Formats ogg mp3 wav </li></ul>
  43. 43. MEDIA PLAYBACK <ul><video src=&quot;file.mp4&quot; controls=&quot;controls&quot;> Your browser does not support the video element. </video> </ul>
  44. 44. THE CANVAS ELEMENT <ul><li>A rectangular area
  45. 45. You control every pixel of it
  46. 46. no drawing abilities of its own
  47. 47. Uses javascript to draw on a webpage
  48. 48. <canvas id=”mycanvas” width=&quot;200&quot; height=&quot;100&quot;> </canvas> </li></ul>
  49. 49. THE CANVAS ELEMENT <ul><script type=&quot;text/javascript&quot;> var c=document.getElementById(&quot;myCanvas&quot;); var cxt=c.getContext(&quot;2d&quot;); cxt.fillStyle=&quot;#FF0000&quot;; cxt.fillRect(0,0,150,75); </script> </ul>
  50. 50. HTML5 STORAGE <ul><li>two new objects for storing data on the client </li><ul><li>LocalStorage
  51. 51. SessionStorage </li></ul><li>Uses JavaScript to store and access the data </li></ul>
  52. 52. LOCAL STORAGE <ul><script type=&quot;text/javascript&quot;> localStorage.firstname=&quot;Anees&quot;; document.write(localStorage.firstname); </script> </ul>
  53. 53. SESSION STORAGE <ul><script type=&quot;text/javascript&quot;> sessionStorage.firstname=&quot;Anees&quot;; document.write(sessionStorage.firstname); </script> </ul>
  54. 54. NEW INPUT TYPES <ul><li>email
  55. 55. url
  56. 56. number
  57. 57. range
  58. 58. Date pickers (date, month, week, time, datetime, datetime-local)
  59. 59. search
  60. 60. color </li></ul>
  61. 61. FORM VALIDATION <ul><li><input type = &quot;name&quot; required/>
  62. 62. <input type = &quot;email&quot;/> </li></ul>
  63. 63. GEOLOCATION API <ul><li>Share your location with trusted web sites
  64. 64. support is opt-in
  65. 65. getCurrentPosition() </li></ul>
  66. 66. CONCLUSION
  67. 67. REFERENCE <ul><li>'Will HTML5 re-standardize the Web?' - Paper
  68. 68. W3C Working Draft dev.w3c.org/html5
  69. 69. W3schools.com
  70. 70. Dive Into HTML5 – Mark Pilgrim
  71. 71. shwetankdixit.com </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×