Html5 VVR Session

HTML
Venkata Ramana V
HTML Timeline
1995: HTML2.0
Formalized the syntax and many of the rules that were already implemented.
1990 1992
1994 1996 1998 2000 2002 2004 2006 2008
2010 2012
HTML Timeline
1997: HTML3.2
Largely ignored by browser manufacturers who began to implement their own tags.
1990 1992
1994 1996 1998 2000 2002 2004 2006 2008
2010 2012
HTML Timeline
1998: Web Standards Project
Pushed for standards adoption, added weight to the W3C recommendations and promoted standards-based browsers.
1990 1992
1994 1996 1998 2000 2002 2004 2006 2008
2010 2012
HTML Timeline
1999: HTML 4.0
Stabilized the syntax and structure of HTML, became the standard for web authoring.
1990 1992
1994 1996 1998 2000 2002 2004 2006 2008
2010 2012
HTML Timeline
2000: XHTML 1.0
Designed to move HTML towards XML, DTD's often caused it to render as HTML.
1990 1992
1994 1996 1998 2000 2002 2004 2006 2008
2010 2012
HTML Timeline
The growth of the Web
High bandwidth connections increase, as does the demand for multimedia and applications driven by technology such as Flash and AJAX. Work on XHTML 2.0 begins.
1990 1992
1994 1996 1998 2000 2002 2004 2006 2008
2010 2012
HTML Timeline
The rise of HTML5
2004 : WHATWG begins what will become HTML5. 2007 : W3C characters new working group and adopts WHATWG's work, renamed HTML5. 2009 : W3C does not review the XHTML 2.0 charter. 2010 : Driven in large part by Apple and Google, public interest in HTML5 grows.
1990 1992
1994 1996 1998 2000 2002 2004 2006 2008
2010 2012
What is HTML5?
Expectations of HTML5?
Integrated APIs
Video and Audio API Inline Editing API
Offline Application API

History API Web Protocol API Drag & Drop API
Associated APIs
Geolocation API 2D Canvas Drawing API
Local Storage API

Web Workers API Web Sockets API Messaging API
HTML5 application focus on
Web Application
Media
Communication
Interactivity
DocType has been simplified

Prior Doctypes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//wapforum//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
DocType has been simplified

HTML5
<!DOCTYPE HTML>
HTML5 Character Encoding

HTML4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
HTML5
<meta charset=UTF-8 />
HTML5 New Elements

article, aside, audio, canvas, command,
datalist,
figure,
details,
embed,
figcaption,
keygen,
footer,
header,
hgroup,
mark, meter, nav, output, progress, rp,
ruby,
video
section,
source,
summary,
time,
Forms in HTML5
Web Forms 2.0 specification is integrated into HTML5.

New Form elements Date pickers, color pickers and numeric stepper controls added.
New Input field types now include email, search and Url.
PUT and DELETE form methods now supported.
New Structural Tags

aside Tag
<aside></aside>
"The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography."
New Structural Tags

article Tag
<article></article>
"The article element represents a 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 blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content."
New Structural Tags

header Tag
<header></header>
"The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section's heading(an h1-h6 elements or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logo's."
New Structural Tags

hgroup Tag
<hgroup></hgroup>
"The hgroup element represents the heading of a section. The element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings alternative titles, or taglines."
New Structural Tags

footer Tag
<footer></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."
New Structural Tags

nav Tag
<nav></nav>
"The nav element represents a section of a page that links to other pages or to parts within the page like section with navigation links."
New Content Tags

figure Tag
<figure></figure>
"The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc., that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix."
New Content Tags

video Tag
<video></video>
"... is a media element whose media data is ostensibly video data, possibly with associated audio data."
New Content Tags

audio Tag
<audio></audio>
"The audio element is a media element whose media data is ostensibly audio data."
New Content Tags

embed Tag
<embed></embed>
"The embed element represents an integration point for an external(typically nonHTML) application or interactive content."
New Content Tags

canvas Tag
<canvas></canvas>
"...providing scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly."
Header Article Header
Nav
Aside
Section
Figure
Section
Footer
More New Tags
More New Tags
More New Tags
More New Tags
More New Tags
More New Tags
Deprecated Tags/Elements
HTML5
Demo

Html5 VVR Session

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Html5 VVR Session

Hochgeladen von

Copyright:

Verfügbare Formate

HTML

1994 1996 1998 2000 2002 2004 2006 2008

1994 1996 1998 2000 2002 2004 2006 2008

1994 1996 1998 2000 2002 2004 2006 2008

1994 1996 1998 2000 2002 2004 2006 2008

1994 1996 1998 2000 2002 2004 2006 2008

1994 1996 1998 2000 2002 2004 2006 2008

1994 1996 1998 2000 2002 2004 2006 2008

Offline Application API

Local Storage API

HTML5 application focus on

DocType has been simplified

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DocType has been simplified

HTML5 Character Encoding

HTML5 New Elements

mark, meter, nav, output, progress, rp,

Web Forms 2.0 specification is integrated into HTML5.

New Structural Tags

New Structural Tags

New Structural Tags

New Structural Tags

New Structural Tags

New Structural Tags

New Content Tags

New Content Tags

New Content Tags

New Content Tags

New Content Tags

Header Article Header

More New Tags

More New Tags

More New Tags

More New Tags

More New Tags

More New Tags

Das könnte Ihnen auch gefallen