Html5 p resentation by techmodi
1 like314 views
HTML5 introduces new semantic elements like <header>, <nav>, <article>, <section>, <footer> that make it easier to structure pages. It also includes new features like geolocation, canvas for graphics, audio/video playback, and local storage. While still a work in progress, HTML5 aims to provide richer content and interactivity while reducing the need for hacks and workarounds used in previous versions of HTML.
Html5 p resentation by techmodi
- 1. HTML5 Tushar A Deshmukh
- 2. Abstract The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers. To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics. Continued …
- 3. Abstract Continued … Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise. Note that the specification is still a work in progress and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.
- 4. STRUCTURE HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class. Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right.
- 5. STRUCTURE The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections. The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer. The markup for that document could look like the following:
- 6. Topics: • Tags • GeoLocation • Graphics - Canvas & SVG • Video/Audio • Storage
- 7. Tags: HTML5 contains a rich set of proposed tags. The goal of these new tags is to bring richer semantic meaning to content.
- 8. Tags - <header>: "a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos." <header> <h1>Main Header</h1> <p class="tagline">Tagline</p> </header>
- 9. Tags - <nav>: "Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element." <nav role="navigation"> <ul> <li> <a href="#" title="link">link</a> </li> </ul> </nav>
- 10. Tags - <article>: "a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry ..." <article> <h2>Item</h2> <p>Some content here.</p> </article>
- 11. Tags - <section>: "section is a blob of content that you could store as an individual record in a database." <section id="foo"> <h2>Foo</h2> <p> Content here </p> </section>
- 12. Tags - <article> vs. <section>: "Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element." "Section is used when there is naturally a heading at the start of the section."
- 13. Tags - <footer>: "The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like." <footer role="contentinfo"> <p> Footer </p> <nav> <h5>Quick Links</h5> <ul role="navigation"> <li> <a href="#">link</a></li> </ul> </nav> </footer>
- 14. Tags - Getting Started: • Small - Minor integration o Only modify the doctype • Medium - Thinking ahead o Modify the doctype, and include divs and classes that mimic HTML5 tags • Large - Full integration o Actually start using HTML5 tags
- 15. HTML5 - Doctype: <!DOCTYPE html> When browsers see this doctype, content is automatically switched into standards mode (as opposed to quirks mode). With this doctype, you can continue to write your markup as either HTML4 or XHTML1.0 Strict. What is quirks mode?
- 16. GeoLocation: • navigator.geolocation.getCurrentPosition() - obtain the user's current location • navigator.geolocation.watchPosition() - watches for changes in a user's location
- 17. Graphics: Canvas & SVG: Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).
- 18. Graphics: Canvas & SVG: "SVG - Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web." (http://www.svgbasics.com/index.html)
- 19. Audio / Video: • Offers the ability to easily embed media into HTML documents • Media playback can be controlled via JS and media events • A flash fallback could be provided for browsers that don't support HTML5 media • Many issues surrounding codecs that I am intentionally not getting into. o http://diveintohtml5.org/video.html
- 20. Storage: • Session and Local Storage—provides a js interface to key-value storage. • Web Databases—RDBMS support for storing structured data inside the browser. • Application Cache—Local Cache
- 21. Web Forms: • strongly-typed input fields • new attributes for defining constraints • new DOM interfaces