Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5

295 views

Published on

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

  • Be the first to comment

  • Be the first to like this

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.!!!

×