• Like
HTML5
Upcoming SlideShare
Loading in...5
×

HTML5

  • 766 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
766
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
28
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
    • 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