Html5

1,282 views
1,228 views

Published on

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

No Downloads
Views
Total views
1,282
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. <ul><li>Introduction of </li></ul>Presented by Neetu sharma MCA (8 th trim)
  2. 2. Overview <ul><li>What is HTML5 </li></ul><ul><li>History of HTML5 </li></ul><ul><li>Difference of HTML5 with HTML4 </li></ul><ul><li>New features in HTML5 </li></ul><ul><li>Web applications currently using HTML5 </li></ul>
  3. 3. What is <ul><li>HTML 5 is the next version of Hyper Text Markup Language(HTML4) </li></ul><ul><li>It is developing by World Wide Web consortium W3C. </li></ul>
  4. 4. History of HTML5 <ul><li>HTML 3.0 was developed in 1995 </li></ul><ul><li>HTML 3.2 was completed by 1997 </li></ul><ul><li>HTML 4 was developed in the year 1998 </li></ul><ul><li>HTML5 was first started by Mozilla, Apple, and Opera under a group called the WHATWG(Web Hypertext Application Technology Working Group). In 2006 W3C showed an interest in HTML5 and in 2007 they created a working group to work in HTML5 project. HTML5 is still under development. </li></ul>
  5. 5. New features in HTML5 <ul><li>API's for multimedia by using video and audio tags </li></ul><ul><li>Drag and drop API </li></ul><ul><li>HTML canvas 2D context </li></ul><ul><li>HTML5 web messaging </li></ul>
  6. 6. Video and Audio <ul><li>HTML5 include video with video element </li></ul><ul><li>HTML5 specifies a standard way to include audio, with the audio element. </li></ul><ul><li>The audio element can play sound files, or an audio stream . </li></ul><ul><li>Adding native support to browsers </li></ul>
  7. 7. Audio+Video=magic <video src=&quot;movie.ogg&quot; controls=&quot;controls&quot;></video> <audio src=&quot; song.ogg &quot; controls=&quot;controls&quot;></audio>
  8. 8. Video and Audio Implementations <ul><li>Native video support in browsers </li></ul><ul><li>Opera </li></ul><ul><li>Safari 3.1 </li></ul><ul><li>Firefox 3.1 </li></ul>
  9. 9. Canvas <ul><li>Dynamic and interactive graphics </li></ul><ul><li>Draw images using 2D drawing API </li></ul><ul><ul><li>Lines, curves, shapes, fills, etc. </li></ul></ul><ul><li>Useful for:Graphs Applications Games and Puzzles. </li></ul>
  10. 10. Canvas Examples: Games <ul><li>Canvex </li></ul><ul><li>http:// canvex.lazyilluminati.com / </li></ul><ul><li>Experimental First-Person Shooter Game 3D Graphics </li></ul>
  11. 11. Meter <ul><li>Representing scalar measurements or fractional values </li></ul><ul><li>Useful for: </li></ul><ul><ul><li>User Ratings (e.g. YouTube Videos) </li></ul></ul>
  12. 12. Using Meter < meter >60%</ meter > < meter >3/5</ meter > < meter >6 blocks used (out of 10 total)</ meter > < meter value = &quot;0.6&quot; >Medium</ meter >
  13. 13. Progress bar <ul><li>Useful for: </li></ul><ul><ul><li>Indicate loading progress </li></ul></ul><ul><ul><li>Show user progress through a series of forms </li></ul></ul>
  14. 14. Using Progress <progress>Step 3 of 6</progress> <progress>50%Complete</progress> <progress value = &quot;0.5&quot; > Half way! </progress>
  15. 15. Form Controls: Numbers < input type = &quot;number&quot; > < input type = &quot;range&quot; >
  16. 16. Form Controls: Combo Boxes < input list = &quot;title-list&quot; > < datalist id = &quot;title-list&quot; > < option value = &quot;...&quot; > </ datalist >
  17. 17. Difference between HTML4 and HTML5 It contains attributes like control menu, spell check etc. It was not available It inbuilt multimedia element in html5 like Audio,video,convas No multimedia supported without third party Strictly parsing rules introduced in html5 so handle the error. It was lack of rules of parsing so it is difficult to handle error. It brought new element for web structure like nav,header etc Elements like nav, header were not present. HTML5 HTML4
  18. 18. Web sites that using HTML5 <ul><li>YouTube uses HTML5, www.youtube.com/ html5 </li></ul><ul><li>Google wave, a collaboration tool from Google uses several html5 tags </li></ul><ul><li>Only some of the browser only supports HTML5 features currently </li></ul>

×