Movatterモバイル変換

Prepared by: Lanh LeDate: Feb 22, 2012HTML5 FUNDAMENTAL

• What is HTML5?• Discover HTML5• What’s new in HTML5?• Browser Support• Summary• FAQDouble your productivity

WHAT IS HTML5?HTML HISTORY1994 HTML 21997 HTML 3.21998 HTML 4.01999 HTML 4.012000 XHTML 1 – W3C focus on XHTML2004 WHATWG2006 W3C Realized the Mistake2009 Disbanded XHTML22010 HTML5 (latest draft)World Wide Web Consortium

WHAT IS HTML5?WHATWGHTML5World Wide Web ConsortiumJavascript APINew Standard of HTMLDevelop based on HTML4 Develop by member ofBrowser vendorsHTML CSS3JS

WHAT IS HTML5?Think about…. How did you deal with crossed multiple browsers?CSS Hack

"HTML5 is the next generation of HTML, superseding HTML 4.01, XHTML 1.0, and XHTML 1.1."THE NEXT GENERATION

HTMLMarkupWhat is new?• What is new?HTMLSemanticStructureWeb Form2.0header, footer, aside, article, section, navNew DoctypeMultimediaSupportInteractionAudio + Video +Drap&DropJSOffline/StorageWeb SQLDatabaseApplicationCacheIndexedDBWeb WorkersWebSocketNotificationsMicrodataAdvanced graphic2D/3Dgraphic/AnimationAccess tolocal filequicklyCSS3

What is new?• What is new?1. New Doctype2. Semantic HTML Structure1. header, footer, aside, article, section, nav3. HTML5 Form Features (Web Forms 2.0)1. calendar, date, time, email, url, search4. Canvas – Element for 2D drawing5. Multimedia Support1. Audio2. Video6. Interaction1. Drap & Drop2. Document Editing3. Local Storage

HTML ElementsDOCTYPESimple DOCTYPENo more STRICT OR TRANSITIONAL<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">v1. HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">2. HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">3. HTML 4.01 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4. XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5. XHTML 1.0 Transitional6. …

HTML Elements• New Block Elements<header> - defines the header of a page<footer> - defines the footer of a page<section> - to define sections of pages<nav> - defines the navigation on a page<article> - defines the article or primary content on a page<aside> - defines extra content like a sidebar on a page<figure> - defines images that annotate an article

HTML Elements• New Inline Elements<mark> - to indicate content that is marked in some fashion<time> - to indicate content that is a time or date<meter> - to indicate content that is a fraction of a known range - such as disk usage<progress> - to indicate the progress of a task towards completion• Microdataitemprop—This defines the names of the fields in your microdata.itemscope—This indicates that the element is part of a group of microdata.itemref—This is a list of element IDs that are associated with one another, even if they are not in the same itemscope.itemtype—This is the URL that provides the context for the microdata.itemid—This is a global identifier that is recognized outside the website, such as a ISBN number for a book.

• Web Forms 2.0datetimedatetime-localdatemonthweektimenumberrangeemailurl

Other New HTML Elements<canvas> - an element to give you a drawing space in JavaScript on your Web pages. It can let you add imagesor graphs to tool tips or just create dyanmic graphs on your Web pages, built on the fly.<video> - add video to your Web pages with this simple tag.<audio> - add sound to your Web pages with this simple tag.

• Basic HTML5 structure<!doctype html><html><header><meta charset=“UTF-8”><title>DocumentTitle</title><script></script><style></style></header><body></body></html>

HTML5 Layout StructureNon-Semantic HTML <div class=“top-navigation”>This is a top menu</div><div class=“title”>This is a page header</div><div class=“content”>This is a content area</div><div class=“sidebar”>This is a sidebar area</div>Semantic HTMLSupport SEOHTML5 – SemanticLayout Structure

• Removed Elementsacronymappletbasefontbigcenterdirfontframeframesetisindexnoframesnoscriptsstrikettu

• Use section “Each section of the document would generally have it's ownheader, and possibly footer, as well as content.”<section><h1>My Dogs</h1><section><h2>Dogs that I Adopted, Personally</h2><p>I have adopted three dogs in my life: McKinley, Shasta, and Mickey.</section><section><h2>Dogs that Were Part of My Family</h2><p>I have also had dogs that were adopted by my parents, but I consider them my dogs as well: Calicoand Homer</section><aside><h1>Ads</h1><p>Dog advertising</aside><footer><p>© 2011 Jennifer Kyrnin</footer></section>

Summary• What is HTML5▪ The result of Cooperation of W3C & WHATWG▪ New Standard HTML based on HTML 4.1 and XHTML1.1 (W3C)▪ New API for Web Development (WHATWG)• New Features▪ CSS3▪ HTML Sematic Structure▪ Web Forms 2.0▪ Local Storage Data▪ Interaction Web (Drap & Drop)▪ Multimedia (Video, Audio)▪ 2D & 3D graphic (Canvas, SVG)▪ Animation

Why not HTML5?Cross Multiple BrowsersReduce CSS HackAdapt Multiple Device (WebApp, Mobile)MultimediaSemantic HTML StructureDrap & DropDrap & Drop 2D/3D Graphics

FAQs• What is the differrent between HTML5 & Flash?• Which browser is supported HTML5• How can we deal with Internet Explorer problem?HTML CSS3 JavascriptsCrossed AnyBrowsersFlash HTML5Flash SkillsLimitFlatformsInstallation Any flatformsThe companiesare beholden toAdobe

Double Your ProductivityThank You

Movatterモバイル変換

Change Language

HTML 5 Fundamental

Embed presentation

Recommended

More Related Content

What's hot

Similar to HTML 5 Fundamental

Recently uploaded

HTML 5 Fundamental