Html 5
Download as PPTX, PDF1 like462 views
This document provides an overview of HTML5, including its goals to have the power of native applications across platforms while reducing the need for plugins. It describes new HTML5 tags like <video>, <audio>, and <canvas> for multimedia, as well as <section>, <header>, and <footer> for better document structure. The document also discusses HTML5's support for geolocation, drag and drop, and offline storage. It compares HTML5 to Flash and outlines browser compatibility for HTML5. Resources for learning more about HTML5 tags and examples are provided.
Html 5
- 1. Converting business ideas to reality...
- 3. 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
- 4. 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
- 5. 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
- 6. 20 Most used DIV ids:- ©Teamdecode 2011 6
- 7. 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
- 8. Basic Html 4 Structure ©Teamdecode 2011 8
- 9. Better Layout Structure: New Structural Elements <section> <header> <nav> <article> <aside> <footer> ©Teamdecode 2011 9
- 10. <header> <nav> <article> <aside> <footer>
- 11. <time> <figure> <legend> <meter>
- 12. Heading1 <h1> <section> Loremipsum dolor sit amet, consectetueradipiscingelit, seddiam nonummynibheuismodtinciduntutlaoreetdolore magna aliquam eratvolutpat. Utwisienim ad minim veniam, quisnostrudexerci tationullamcorpersuscipit Heading 2 <h1> Loremipsum dolor sit amet, consectetueradipiscingelit, seddiam nonummynibheuismodtinciduntutlaoreetdolore magna aliquam eratvolutpat. Utwisienim ad minim veniam, quisnostrudexerci tationullamcorpersuscipit Heading 3 <h1> Loremipsum dolor sit amet, consectetueradipiscingelit, seddiam nonummynibheuismodtinciduntutlaoreetdolore magna aliquam eratvolutpat. Utwisienim ad minim veniam, quisnostrudexerci tationullamcorpersuscipit
- 13. HTML 5 tags in a wesbsite ©Teamdecode 2011 13
- 14. 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
- 16. 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
- 17. 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
- 18. Browser Compatibility **Internet Explorer 9 has partial support of HTML 5. ©Teamdecode 2011 18
- 19. 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
- 20. Thank you
- 21. Questions? ©Teamdecode 2011 21