Html5
- 2. Agenda • Introduction • History • Features • New API’s in HTML5 • Limitations
- 3. Introduction To give authors more flexibility and interoperability, and enable more interactive and exciting websites HTML5, introduces wide range of features. These feature includes form controls, API’s, multimedia, structure and semantics. HTML5 was introduced by W3C.Including browser vendors such as Apple, Mozilla, Opera, and
- 4. History HTML 3.0 was developed in 1995. HTML 3.2 was developed in 1997. HTML 4 was developed in 1998. After developing HTML4, W3C stopped working on HTML, and started working on XML. HTML5 was first started by Mozilla, Apple, and Opera, later in 2006 W3C showed interest on html5 and created group for working on HTML5 project
- 6. HTML5 Structure Fi g- H L5 docum TM ent st r uct ur e.
- 7. Continue… There are some new features in HTML5. Header header represents header of the section. Header element contains introductory information to a section or page. It can involve anything from our normal document headers to an entire table of contents.
- 8. Continue… <header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header> <header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>
- 9. <Footer> A footer typically contains information about its section such as who wrote it, links related to documents. For Example. <footer>© 2007 Example Inc. </footer>. <nav> The nav element represents section of navigation links.
- 10. Continue… The nav element is reserved for a section of document that contains links to other pages or links to the section of the same page. For e.g. Table of contents. <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> <nav>
- 11. <Aside> Aside represents contents related to the main area of the document. This usually expressed in side bars that contain related posts, tag clouds etc. <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li>
- 12. <Section> Section element represents a generic section of or application such as a chapter. It act as a same way as <div> does in separating portion of document. <article> Article element is independent section of document . It is suitable for content like news or blog.
- 13. Some other Features… HTML5 introduces new elements and its attributes like <audio> and <video>. Video element used for video files. Some attributes are not allowed in HTML5. Most of the styling attributes are removed from HTML5. Such as align attribute on caption, iframe, img, input, object, tabl e, hr, div, h1, h2, h3, p, etc.
- 14. New API’s in HTML5 API’s for multimedia using video and audio tag user can embed different video and audio formats in the web page. API’s that allow offline web applications HTML5 allows several features in which web applications can work locally, that is without internet connection. Drag and drop API’s html5 allows drag and drop feature with the help of draggtable attribute
- 15. Continue… HTML Microdata. User can embed machine readable data into HTML document. HTML canvas 2D context. This API used for rendering 2D graphics, bitmaps and shapes. This technology introduced by Apple.
- 16. Geolocation.
- 17. Geolocation This API include location information such as GPS (global positioning system)with device hosting API. This feature supports for devises such as mobile phones, GPS receivers etc.
- 18. Limitations of HTML5 Browsers do not provide full support for HTML5 Non of the web browsers for mobile or have full implementations at present. Internet Explorer browser does not support for HTML5. Even Apple ipad safari browser doesn’t have full support for HTML5. Cross platform browser compatibility The application developed for ipad is not guaranteed to work well in other browsers like IE.
- 19. Continue… Audio/video support HTML5 has added new video and audio tags in a browser without plugin but doesn’t officially support any video or audio format. Development tools There are no tools available that can create animations for html5 like flash professionals. For creating animations developers have to code animations in JavaScripts and CSS.
- 20. Supported Browsers Firefox 4(WebM, Beta) Google Chrome Opera 10.6 and above. Apple Safari (h.264, version 4+) Microsoft internet Explorer 9