HTML5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5

  • 1,005 views
Uploaded on

presentation prepared for my academic seminar

presentation prepared for my academic seminar

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,005
On Slideshare
1,004
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
28
Comments
0
Likes
1

Embeds 1

http://a0.twimg.com 1

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
    • 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
  • 9. INTRODUCTION
    • 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
  • 16. INTRODUCTION
    • New input types
    • 17. Form validation
    • 18. Geolocation
  • 19. HTML5 vs HTML4
    • <! 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
  • 23. HTML5 vs HTML4
    • <!DOCTYPE HTML>
  • 24. NEW FEATURES
    • 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
  • 29. NEW TAGS
  • 37. MEDIA PLAYBACK
    • Embed video or audio without a plugin
    • 38. <video src = “file.ogg”>
    • 39. <audio src = “file.mp3”>
    • 40. <embed src=&quot;helloworld.swf&quot; >
  • 41. MEDIA PLAYBACK
    • Video formats ogg mp4 WebM
    • 42. Audio Formats ogg mp3 wav
  • 43. MEDIA PLAYBACK
      <video src=&quot;file.mp4&quot; controls=&quot;controls&quot;> Your browser does not support the video element. </video>
  • 44. THE CANVAS ELEMENT
    • 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>
  • 49. THE CANVAS ELEMENT
      <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>
  • 50. HTML5 STORAGE
    • two new objects for storing data on the client
      • LocalStorage
      • 51. SessionStorage
    • Uses JavaScript to store and access the data
  • 52. LOCAL STORAGE
      <script type=&quot;text/javascript&quot;> localStorage.firstname=&quot;Anees&quot;; document.write(localStorage.firstname); </script>
  • 53. SESSION STORAGE
      <script type=&quot;text/javascript&quot;> sessionStorage.firstname=&quot;Anees&quot;; document.write(sessionStorage.firstname); </script>
  • 54. NEW INPUT TYPES
  • 61. FORM VALIDATION
    • <input type = &quot;name&quot; required/>
    • 62. <input type = &quot;email&quot;/>
  • 63. GEOLOCATION API
    • Share your location with trusted web sites
    • 64. support is opt-in
    • 65. getCurrentPosition()
  • 66. CONCLUSION
  • 67. REFERENCE
    • '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