Html5

196
-1

Published on

This presentation introduces some new features of HTML5 taking web development to the next level

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
196
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. ….for the future web A presentation by SREEJITH.S
  2. 2. Contents  Introduction To HTML5  New elements of HTML5  New attributes 2D/3D graphics  Video and audio HTML 5 SVG
  3. 3. Introduction To HTML5 • Html 5 is the Next Version Of Hypertext Markup Language(HTML 4) • The previous version of HTML, HTML 4.01, came in 1999 • HTML5 is a suite of tools for: – Markup (HTML 5) – Presentation (CSS 3) – Interaction (DOM, Ajax, APIs)
  4. 4. Benefits of HTML5
  5. 5. New features of HTML5 • The <canvas> element for 2D drawing • The <video> and <audio> elements for media playback • Support for local storage • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> • New form controls, like calendar, date, time, email, url, search
  6. 6. <canvas> element • Used to draw graphics, on the fly, via scripting (usually JavaScript)
  7. 7. HTML5 video • Until now, there has not been a standard for showing a video/movie on a web page. • HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. Browser Support
  8. 8. HTML5 audio • Until now, there has not been a standard for playing audio files on a web page. • HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element. Browser Support
  9. 9. HTML 5 SVG • SVG stands for Scalable Vector Graphics • SVG is used to define vector-based graphics for the Web • SVG defines the graphics in XML format • SVG graphics do NOT lose any quality if they are zoomed or resized • Every element and every attribute in SVG files can be animated • SVG is a W3C recommendation
  10. 10. DIFFERENCE BETWEEN CANVAS AND SVG • SVG is a language for describing 2D graphics in XML. • Canvas draws 2D graphics, on the fly (with a JavaScript). • SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
  11. 11. HTML5 Form Elements • <input type="color" name="favcolor" /> • <input type="date" name="bday" />
  12. 12. <input type="datetime" name="bdaytime" /> <input type="email" name="usremail" />
  13. 13. • <input type="month" name="bdaymonth" /> • <input type="text" x-webkit-speech /> •
  14. 14. • <input type="range" name="points" min="1" max="10" /> • <input type="search" name="googlesearch" /> • <input type="time" name="usr_time" />
  15. 15. Removed elements • • • • • • • • <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame>
  16. 16. Removed elements • • • • <frameset> <noframes> <strike> <tt>
  17. 17. So long and thanks for all the attention  THANK YOU.!!!
  1. A particular slide catching your eye?

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

×