Successfully reported this slideshow.

Html 5

460 views

Published on

Published in: Technology
  • Be the first to comment

Html 5

  1. 1. Converting business ideas to reality...
  2. 2. Topics Covered:-•What is HTML5?•HTML 5 Goals•20 Most used Div ids prior to HTML5.•Lets talk HTML 5•HTML 5 Tags•Pictorial representation of HTML 4 and HTML 5•HTML5 vs Flash•Browser Compatibility•Html 5 Resources ©Teamdecode 2011 3
  3. 3. What is HTML5? HTML5 is the new standard for HTML, XHTML, and the HTML with a lot of new functionalities and tags. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors. ©Teamdecode 2011 4
  4. 4. HTML 5 Goals• Latest version is HTML5 – Aimed to have all of the power of native applications – Run on any platform (Windows, Linux, iPhone, Android, Mac, etc.)• New features should be based on HTML, CSS, DOM and JavaScript• Reduce the need for external plugins• Better error handling• More markup to replace scripting• HTML5 should be device independent 5
  5. 5. 20 Most used DIV ids:- ©Teamdecode 2011 6
  6. 6. Lets talk HTML5 • New HTML Tags • Audio and Video • Vector Graphics • Native support to Geolocation API , Drag and Drop, device orientation, Speech Input • Offline data storage • Validation • Input Element ©Teamdecode 2011 7
  7. 7. Basic Html 4 Structure ©Teamdecode 2011 8
  8. 8. Better Layout Structure: New Structural Elements  <section>  <header>  <nav>  <article>  <aside>  <footer> ©Teamdecode 2011 9
  9. 9. <header> <nav> <article> <aside> <footer>
  10. 10. <time><figure> <legend> <meter>
  11. 11. Heading1 <h1> <section>Loremipsum dolor sit amet, consectetueradipiscingelit, seddiamnonummynibheuismodtinciduntutlaoreetdolore magna aliquameratvolutpat. Utwisienim ad minim veniam, quisnostrudexercitationullamcorpersuscipitHeading 2 <h1> Loremipsum dolor sit amet, consectetueradipiscingelit, seddiam nonummynibheuismodtinciduntutlaoreetdolore magna aliquam eratvolutpat. Utwisienim ad minim veniam, quisnostrudexerci tationullamcorpersuscipitHeading 3 <h1> Loremipsum dolor sit amet, consectetueradipiscingelit, seddiam nonummynibheuismodtinciduntutlaoreetdolore magna aliquam eratvolutpat. Utwisienim ad minim veniam, quisnostrudexerci tationullamcorpersuscipit
  12. 12. HTML 5 tags in a wesbsite ©Teamdecode 2011 13
  13. 13. HTML 5 Tags •Doctype:- −HTML 4:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> −HTML 5:- <!DOCTYPE html> •Meta tag:- −HTML 4:- <meta http-equiv="Content-Type" content="text/html; charset=utf-8”> −HTML 5:- <meta charset="utf-8"> ©Teamdecode 2011 14
  14. 14. HTML 5 Tags contd... •Video:- <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video> •Audio:- <audio controls="controls”> <source src="song.mp3" type="audio/mpeg" /> </audio> NOTE:-More Tags in action can be seen at:- http://www.w3schools.com/html5/default.asp ©Teamdecode 2011 16
  15. 15. HTM5 vs FlashIs HTML5 is going to replace flash??Flash is rejected by Apple for their iOS devices.HTML5 Canvas element(<canvas>Code goes here </canvas>)Hardware acceleration.So, who wins?©Teamdecode 2011 17
  16. 16. Browser Compatibility **Internet Explorer 9 has partial support of HTML 5. ©Teamdecode 2011 18
  17. 17. HTML 5 – Showcases and Resources• HTML 5 Rocks – Examples, Demos, Tutorials – http://www.html5rocks.com/• Great HTML 5 Slide – http://slides.html5rocks.com/• Internet Explorer 9 Test Drive for HTML 5 – http://ie.microsoft.com/testdrive/• See Geolocation in action – http://html5doctor.com/finding-your-position-with- geolocation/  To know more about HTML tags:- – http://www.w3schools.com/html5/default.asp 19
  18. 18. Thank you
  19. 19. Questions?©Teamdecode 2011 21

×