Html5 Vvr Session

8/22/2019 Html5 Vvr Session

1/44

HTML

Venkata Ramana V


2/44


3/44

HTML Timeline

19921990 19961994 20001998 20042002 20082006 20122010

1995: HTML2.0Formalized the syntax and many of the

rules that were already implemented.


4/44

HTML Timeline

19921990 19961994 20001998 20042002 20082006 20122010

1997: HTML3.2Largely ignored by browser manufacturers who

began to implement their own tags.


5/44

HTML Timeline

19921990 19961994 20001998 20042002 20082006 20122010

1998: Web Standards ProjectPushed for standards adoption, added weight to the W3C

recommendations and promoted standards-based browsers.


6/44

HTML Timeline

19921990 19961994 20001998 20042002 20082006 20122010

1999: HTML 4.0Stabilized the syntax and structure of HTML,

became the standard for web authoring.


7/44

HTML Timeline

19921990 19961994 20001998 20042002 20082006 20122010

2000: XHTML 1.0Designed to move HTML towards XML, DTD's

often caused it to render as HTML.


8/44

HTML Timeline

19921990 19961994 20001998 20042002 20082006 20122010

The growth of the WebHigh 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.


9/44

HTML Timeline

19921990 19961994 20001998 20042002 20082006 20122010

The rise of HTML52004 : 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.


10/44

What is HTML5?


11/44

Expectations of HTML5?


12/44

Integrated APIs

Video and Audio API

Inline Editing API Offline Application API

History API

Web Protocol API

Drag & Drop API


13/44

Associated APIs

Geolocation API

2D Canvas Drawing API Local Storage API

Web Workers API

Web Sockets API

Messaging API


14/44

HTML5 application focus on

Media

Interactivity

Communication

Web Application


15/44

DocType has been simplified

Prior Doctypes


16/44

DocType has been simplified

HTML5


17/44

HTML5 Character Encoding

HTML4


18/44

HTML5 New Elements

article, aside, audio, canvas, command,

datalist, details, embed, figcaption,

figure, footer, header, hgroup, keygen,

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

ruby, section, source, summary, time,

video


19/44

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.


20/44

New Structural Tags

aside Tag

"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 beconsidered separate from that content. Such sections are often represented assidebars in printed typography."


21/44

New Structural Tags

article Tag

"The article element represents a self-contained composition in a document,

page, application, or site and that is intended to be independently distributable orreusable, e.g. in syndication. This could be a forum post, a magazine ornewspaper article, a blog entry, a user-submitted comment, an interactive widgetor gadget, or any other independent item of content."


22/44

New Structural Tags

header Tag

"The header element represents a group of introductory or navigational aids. Aheader element is intended to usually contain the section's heading(an h1-h6elements or an hgroup element), but this is not required. The header element canalso be used to wrap a section's table of contents, a search form, or any relevantlogo's."


23/44

New Structural Tags

hgroup Tag

"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 assubheadings alternative titles, or taglines."


24/44

New Structural Tags

footer Tag

"The footer element represents a footer for its nearest ancestor sectioning

content or sectioning root element. A footer typically contains information aboutits section such as who wrote it, links to related documents, copyright data, andthe like."


25/44

New Structural Tags

nav Tag

"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."


26/44

New Content Tags

figure Tag

"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 ofthe document.

The element can thus be used to annotate illustrations, diagrams, photos, codelistings, etc., that are referred to from the main content of the document, but thatcould, without affecting the flow of the document, be moved away from thatprimary content, e.g. to the side of the page, to dedicated pages, or to anappendix."


27/44

New Content Tags

video Tag

"... is a media element whose media data is ostensibly video data, possibly with

associated audio data."


28/44

New Content Tags

audio Tag

"The audio element is a media element whose media data is ostensibly audio

data."


29/44

New Content Tags

embed Tag

"The embed element represents an integration point for an external(typically non-

HTML) application or interactive content."


30/44

New Content Tags

canvas Tag

"...providing scripts with a resolution-dependent bitmap canvas, which can be

used for rendering graphs, game graphics, or other visual images on the fly."


31/44

Header Nav

Article AsideHeader

Section

Section

Footer

Figure


32/44

More New Tags


33/44

More New Tags


34/44

More New Tags


35/44

More New Tags


36/44

More New Tags


37/44

More New Tags


38/44

Deprecated Tags/Elements


39/44



40/44



41/44



42/44



43/44



44/44

HTML5

Demo

Html5 Vvr Session

Documents