html 5 fundamental
TRANSCRIPT
Prepared by: Lanh Le
Date: Feb 22, 2012
HTML5 FUNDAMENTAL
• What is HTML5?
• Discover HTML5
• What’s new in HTML5?
• Browser Support
• Summary
• FAQ
Double your productivity
WHAT IS HTML5?
WHAT IS HTML5?
HTML HISTORY
1994 HTML 2
1997 HTML 3.2
1998 HTML 4.0
1999 HTML 4.01
2000 XHTML 1 – W3C focus on XHTML
2004 WHATWG
2006 W3C Realized the Mistake
2009 Disbanded XHTML2
2010 HTML5 (latest draft)
World Wide Web Consortium
WHAT IS HTML5?
WHATWG
HTML5
World Wide Web Consortium
Javascript APINew Standard of HTML
Develop based on HTML4 Develop by member of
Browser vendors
HTML CSS3
JS
WHAT IS HTML5?
Think about…. How did you deal with crossed multiple browsers?
CSS Hack
DISCOVER HTML5?
"HTML5 is the next generation of HTML, superseding HTML 4.01, XHTML 1.0, and XHTML 1.1."
THE NEXT GENERATION
WHAT IS HTML5?
HTML
Markup
What is new?
• What is new?
HTML
Semantic
StructureWeb Form
2.0
header, footer, aside, article, section, nav
New Doctype
Multimedia
Support
Interaction
Audio + Video +
Drap&Drop
JS
Offline/Storage
Web SQL
Database
Application
Cache
IndexedDB
Web Workers
WebSocketNotifications
Microdata
Advanced graphic
2D/3D
graphic/Animat
ion
Access to
local file
quickly
CSS3
What is new?
• What is new?
1. New Doctype
2. Semantic HTML Structure
1. header, footer, aside, article, section, nav
3. HTML5 Form Features (Web Forms 2.0)
1. calendar, date, time, email, url, search
4. Canvas – Element for 2D drawing
5. Multimedia Support
1. Audio
2. Video
6. Interaction
1. Drap & Drop
2. Document Editing
3. Local Storage
HTML Elements
DOCTYPE
Simple DOCTYPE
No more STRICT OR TRANSITIONAL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">v
1. HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//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.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
5. XHTML 1.0 Transitional
6. …
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
• Microdata
itemprop—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.0
datetime
datetime-local
date
month
week
time
number
range
url
Other New HTML Elements<canvas> - an element to give you a drawing space in JavaScript on your Web pages. It can let you add images
or 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>Document
Title</title><!-- Conditional
Comment--><script></script><style></style>
</header>
<body><!--Page structure -->
</body></html>
• New Media Elements
HTML5 Layout Structure
Non-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 HTML
Support SEO
HTML5 – Semantic
Layout Structure
• Removed Elements
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt
u
• HTML - Old Structure
• Semantic HTML structure
• Use section“Each section of the document would generally have it's own
header, 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: Calico
and Homer
</section>
<aside>
<h1>Ads</h1>
<p>Dog advertising
</aside>
<footer>
<p>© 2011 Jennifer Kyrnin
</footer>
</section>
SUMMARY
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 Browsers
Reduce CSS Hack
Adapt Multiple Device (Web
App, Mobile)
Multimedia
Semantic HTML Structure
Drap & Drop
Drap & 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 Javascripts
Crossed Any
Browsers
Flash HTML5
Flash Skills
Limit
FlatformsInstallation Any flatforms
The companies
are beholden to
Adobe
Double Your Productivity
Thank You