Html5 training
0 likes409 views
HTML 5 is intended to replace HTML 4 and XHTML as the next evolution of the standard. It is being developed jointly by the W3C and WHATWG to improve compatibility and introduce new semantic elements like <section>, <article>, and <nav> that provide more meaning than generic <div> tags. HTML 5 also adds new form input types, multimedia features like video and canvas drawing, and offline/storage APIs. While still in draft, major browsers have begun implementing key parts of HTML 5, but full adoption will take time as support needs to be added to Internet Explorer.
Html5 training
- 1. HTML 5 ● Background ○ Replacement for HTML 4 and XHTML ■ Several forks divided over XML ■ Finally gave up and chose to do a revised version of HTML ■ Compatibility was key ○ Timeline ■ Work started in 2004 ■ First Draft in January 2008 ■ Finalizing will take years ■ Features are being solidified though ○ Being worked on jointly W3C and Web Hypertext Application Technology Working Group (WHATWG) ■ Currently still in draft format ■ Several browsers are implementing parts of HTML5: Safari, Chrome, Opera and Firefox ● Philosophy ○ WHATWG studied how browsers actually handle HTML ○ Worked with browser makers ○ Presentation elements further removed ■ Poor accessability ■ High cost of maintaince ■ High document sizes ● Syntax ○ Double quotes, single quotes and no quotes is okay ○ Trailing Slashes Not Required (e.g. the br, img and input elements) Walking through a page Start at the Beginning or Technical Mumbo Jumbo ● doctype ○ simple: <!DOCTYPE html> ■ Previous: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> ○ forces standards mode ● <html> ○ Simplified: <html lang=”en”> ■ Previous: <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/ xhtml"> ○ Implies xhtml namespace ● <head> ○ Same as always ● <meta>
- 2. ○ Simplified: <meta charset=”utf-8″ /> ■ Previous: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ○ Assumes HTML MIME ● <link> ○ rel=”stylesheets” ■ Simplified: <link rel="stylesheet" href="style-original.css" /> ● Previous: <link href="/style/structure.css" rel="stylesheet" type="text/css" /> ■ No need for type since the only type of stylesheet on the web is CSS ○ Others: rel=” “ ■ icon ■ author ■ archives ■ license ■ prefetch ■ search New Elements ● <section> ○ a thematic grouping of content, typically with a heading ○ A Web site's home page could be split into sections for an introduction, news items, contact information. ● <nav> ○ Contains core navigation items for a site or page ● <article> ○ self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication ○ This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content ● <aside> ○ A sidebar ○ Contend that is related to but not essential to it’s parent content ● <hgroup> ○ Grouping of h1-h6 elements ○ Used to hide sub headers from outline ● <header> ○ Just what it sounds like ○ Can be used for the page over all and inside sections ● <footer> ○ Just what it sounds like ○ Can be used for the page over all and inside sections ● <time> ○ Indicates a date/time ● <mark>
- 3. ○ Used for emphasis or highlighting Finally Content or Bye, Bye divs ● Moving towards separation of markup and content. Want our markup to have meaning. ● Divs and ids don’t have inherent meaning ● Use new elements to help weave meaning into the webpage ● Better search results better reuse of content Before <div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this post"> Travel day</a> </h2> <p>Lorem ipsum dolor sit amet…</p> </div> Creating an Outline ● <header> ○ Enclosing logos and h1 tags ○ Problem of subheads ● <article> ○ Great for blog post ○ Problem with assembled content ■ HTML 4 only had h1-6 to create outline ■ Makes it difficult with WCMS ■ HTML5 allows you to start over for each section ○ Add a header with h1 tag ○ Could add footer ● <time> ○ <time datetime="2009-10-22" pubdate>October 22, 2009</time> ○ datetime attribute is machine readable ○ between the tags can be anything ○ pubdate ■ Within article it references just that article ■ Outside article means entire document After <article> <header> <time datetime="2009-10-22" pubdate> October 22, 2009</time>
- 4. <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day</a> </h1> </header> <p>Lorem ipsum dolor sit amet…</p> </article> Navigation ● <nav> ○ defines navigation area ○ important for screen readers Before <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div> After <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav> Footer ● Can include “fat footers” like on the SMU homepage After <footer> <p>§</p> <p>© 2001–9 <a href="#">Mark Pilgrim</a></p> </footer>
- 5. Forms ● placeholder ○ <input name="q" placeholder="Search Bookmarks and History"> ● AutoFocus ○ <input name="q" autofocus> New Input Types ● Email ○ “email” ○ Older browsers treat as text ○ iPhone uses special keyboard ● Web Address ○ “url” ○ iPhone custom keyboard ● Number ○ spinbox ○ iPhone custom keyboard ● Range ● Date, Month, Week, datetime, datetime-local ● Search ● Color picker ○ No support yet Auto Validation ● Works for Opera ● No other browser, yet Specialized Elements Canvas ● Use javascript to draw things in a box ● Importance ○ Can dynamically create graphics on the client side ○ Reduces dependence on flash Video and Audio ● With HTML5 video is baked into browser ● No plugins, like flash, needed ● Problem is formats, they must be built into browsers, creates licensing issues ○ Google announced WebM format on Tuesday. Will likely be the standard
- 6. ○ h.264 is also supported by most browsers, not Firefox <video width="320" height="240" controls preload> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> Location ● Supported mainly by iPhone and Android ● Firefox supports ● Opt-in Offline ● In html tag you provide a link to a “cache.manifest” file that lists files needed ● When Can I start using it? ● In general, when IE9 comes out. Maybe late 2010 or early 2011 ● Maybe now, if you are developing for mobile devices ● There are work arounds for older browsers The Appendix ● Elements Thrown Away ○ <acronym> ○ <applet> ○ <basefont> ○ <big> ○ <center> ○ <dir> ○ <font> ○ <frame> ○ <frameset> ○ <noframes> ○ <s> ○ <strike> ○ <tt> ○ <u> ○ <xmp> ● New Tags ○ article ○ section
- 7. ○ aside ○ hgroup ○ header ○ footer ○ nav ○ time ○ mark ○ figure ○ figcaption Websites for reference ●