Your SlideShare is downloading. ×
0
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5

873

Published on

presentation prepared for my academic seminar

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
873
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×