Submitted By:Vijay Soni08CE90
   1991   HTML   1994   HTML 2   1996   CSS 1 + JavaScript   1997   HTML 4   1998   CSS 2   2000   XHTML 1   2002  ...
    HTML is a computer language devised to allow website    creation   Firstly mentioned on the Internet by Berners-Lee ...
   HTML5 ~= HTML + CSS3 + JavaScript   Written by Joshua Johnson, On 19th October 2009.    Filed in HTML, Web Standards....
 New features should be based on HTML, CSS,  DOM, and JavaScript Reduce the need for external plugins (like Flash) Bett...
 New   Markup Elements    <article> Defines external content    <aside> Defines some content aside from the     article...
<datagrid> Defines a list of selectable data. Thedatagrid is displayed as a tree-list<datalist> Defines a list of select...
 <nav> Defines a section of  navigation links <q> Defines a short quotation <time>   -   Defines a time or a date, or b...
 APIs for multimedia by using video and audio tags Drag and drop API HTML canvas 2D context HTML5 web messaging WebSQ...
   New Media Elements    ◦ <video>   Now embed video in your page without requiring    any plugin like Flash or Silverli...
<video src="movie.mp4“ controls="controls"></video>
   New Media Elements    ◦ <audio>   Extremely simple and easy way to show an    audio player in your page.    Browser  ...
   A canvas is a rectangular area, and you control    every pixel of it.<canvas id="myCanvas" width="200" height="100"></...
   Two new objects to save data:    ◦ localStorage - stores data with no time limit    ◦ sessionStorage - stores data for...
   email   url   number   range   date pickers (date, month, week, time, datetime)   search   color          <input...
HTML4                HTML5No multimedia support   It has inbuilt multimediawithout third party     element in html5 like  ...
   http://www.apple.com/html5   http://www.youtube.com/html5 GTA Game Clone in HTML5 http://www.webworks.dk/enginetest...
Conclusion –   Introduced the new elements and APIs included in    HTML5.    We also got a taste of the semantic changes...
 W3Schools.com HTML5Rocks.com HTML5Test.com   And then there is Google!
Vijayvs4v Soni     ijay@          gma             il.com
HTML5 Presentation
Upcoming SlideShare
Loading in...5
×

HTML5 Presentation

620
-1

Published on

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

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

No notes for slide

HTML5 Presentation

  1. 1. Submitted By:Vijay Soni08CE90
  2. 2.  1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5
  3. 3.  HTML is a computer language devised to allow website creation Firstly mentioned on the Internet by Berners-Lee in late 1991. HTML stands for Hyper Text Markup Language .• An HTML file is a text file containing small markup tags .• The markup tags tell the Web browser how to display the page .• An HTML file must have an htm or html file extension Example : Simple HTML Page Example Explained The first tag in your HTML document is <html>.
  4. 4.  HTML5 ~= HTML + CSS3 + JavaScript Written by Joshua Johnson, On 19th October 2009. Filed in HTML, Web Standards. World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). Still a work in progress. However, most modern browsers have some HTML5 support. http://HTML5Test.com
  5. 5.  New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public
  6. 6.  New Markup Elements  <article> Defines external content  <aside> Defines some content aside from the article it is placed in  <audio> Defines sound, such as music or other audio streams  <canvas> Defines graphic, such as graphs or other images  <command> Defines a command button, like a radio button, a checkbox, or a button
  7. 7. <datagrid> Defines a list of selectable data. Thedatagrid is displayed as a tree-list<datalist> Defines a list of selectable data. Use thiselement together with the input element, to make adropdown list for the input’s value<details> Defines details of an element, which theuser can see, and click to hide < dialog> Defines a dialog, such as a conversation .
  8. 8.  <nav> Defines a section of  navigation links <q> Defines a short quotation <time> - Defines a time or a date, or both <video> - Defines video, such as a movie clip or other video streams <meter> - Defines the range
  9. 9.  APIs for multimedia by using video and audio tags Drag and drop API HTML canvas 2D context HTML5 web messaging WebSQL Geolocation WebWorkers Notification WebSockets
  10. 10.  New Media Elements ◦ <video> Now embed video in your page without requiring any plugin like Flash or Silverlight. Browser MP4 WebM OGG IE9 Yes No No FF4+ No Yes Yes Chrome6+ Yes Yes Yes Opera10.6+ No Yes Yes
  11. 11. <video src="movie.mp4“ controls="controls"></video>
  12. 12.  New Media Elements ◦ <audio> Extremely simple and easy way to show an audio player in your page. Browser MP3 WAV OGG IE9 Yes No No FF4+ No Yes Yes Chrome6+ Yes Yes Yes Opera10.6+ No Yes Yes
  13. 13.  A canvas is a rectangular area, and you control every pixel of it.<canvas id="myCanvas" width="200" height="100"></canvas> Uses JS to draw shapes and color. ◦ <canvas> Entire library of JS functions for Canvas Dynamic and interactive graphics Draw images using 2D drawing API – Lines, curves, shapes, fills, etc.
  14. 14.  Two new objects to save data: ◦ localStorage - stores data with no time limit ◦ sessionStorage - stores data for one session localStorage ◦ Data stored till cleared programmatically by JS ◦ Or browser cache cleared. ◦ accessible only from the domain that initially stored the data. sessionStorage ◦ accessible only from the page that initially stored the data.
  15. 15.  email url number range date pickers (date, month, week, time, datetime) search color <input type="number"> <input type="range">
  16. 16. HTML4 HTML5No multimedia support It has inbuilt multimediawithout third party element in html5 like audio, video, canvas.No Threads Support of WebWorkersDrag and Drop with Drag and Drop withoutJavaScript API any JS API SupportIt was not available New tags like <header>, <footer>, <article>No Persistent Storage Persistent Storage with WebStorage API
  17. 17.  http://www.apple.com/html5 http://www.youtube.com/html5 GTA Game Clone in HTML5 http://www.webworks.dk/enginetest/ Web-Based Adobe Photoshop Clone in HTML5 http://www.picozu.com/
  18. 18. Conclusion – Introduced the new elements and APIs included in HTML5. We also got a taste of the semantic changes to come and the new structure our web pages should take in the future. Finally, we learned that even though HTML5 isn’t quite ready for the masses, we can still get our grubby developer fingers on it and start experimenting today.
  19. 19.  W3Schools.com HTML5Rocks.com HTML5Test.com And then there is Google!
  20. 20. Vijayvs4v Soni ijay@ gma il.com
  1. A particular slide catching your eye?

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

×