7/31/2019 HTML5 Roupup

1/48

HTML5The Myth, The Reality and The Future.@rohitrmehta

7/31/2019 HTML5 Roupup

2/48

Why HTML5?

State of the Internet Now states

The Internet is a strange, hugebeast. It is getting bigger, faster

and more mobile each day.

http://www.onlineschools.org/state-of-the-internet/soti.html

7/31/2019 HTML5 Roupup

3/48

Timeline

1995 Nov HTML 2.0 Published by IETF

1997 Jan HTML3.2 published, W3C

1997, Dec HTML 4. 1999, Dec HTML 4.01 was published.

2000, Jan XHTML 1.0

2001, May XHTML 1.1

7/31/2019 HTML5 Roupup

4/48

What happened next?

7/31/2019 HTML5 Roupup

5/48

W3C & the XHTML2

In 2002 W3C began work on XHTML2

It was nothing more than a sloppy language

going backward compatible.

It was a Disaster

7/31/2019 HTML5 Roupup

6/48

WHATWG

7/31/2019 HTML5 Roupup

7/48

WHATWGWeb Hypertext Applications Working Group

http://www.whatwg.org/html

7/31/2019 HTML5 Roupup

8/48

WHATWG

A rebellion was formed within W3C.

W3C was formulating standards, which werepurely theoretical and unrelated to the needs

of the web designers. Apple, Opera and Mozilla were unhappy with

this direction.

Expectation was to place more emphasis onformats that allowed creation of WebApplications.

7/31/2019 HTML5 Roupup

9/48

Birth of WHATWG (& HTML5)

2004, Ian Hickson, proposed the Idea ofextending HTML to create Web Applications.

Proposal Rejected

WHATWG formed.

Ian Hickson became the editor of HTML5

7/31/2019 HTML5 Roupup

10/48

Reunification

WHATWG continued to do its work on HTML5

and W3C continued on XHTML2

2006, W3C issued charter to adopt the work

done by WHATWG as the basis.

7/31/2019 HTML5 Roupup

11/48

HTML 5 & HTML5

7/31/2019 HTML5 Roupup

12/48

HTML 5 & HTML5

7/31/2019 HTML5 Roupup

13/48

SoWhat is HTML5

7/31/2019 HTML5 Roupup

14/48

An Application Platform

7/31/2019 HTML5 Roupup

15/48

HTML5

HTML + CSS + JS

7/31/2019 HTML5 Roupup

16/48

HTML5

HTML + CSS + JSStructure + Presentation + Behavior

7/31/2019 HTML5 Roupup

17/48

Semantics

7/31/2019 HTML5 Roupup

18/48

Document Type Definition (DTD)

Old

7/31/2019 HTML5 Roupup

19/48

Document Type Definition (DTD)

Old

New

7/31/2019 HTML5 Roupup

20/48

7/31/2019 HTML5 Roupup

21/48

7/31/2019 HTML5 Roupup

22/48

7/31/2019 HTML5 Roupup

23/48

7/31/2019 HTML5 Roupup

24/48

7/31/2019 HTML5 Roupup

25/48

7/31/2019 HTML5 Roupup

26/48

7/31/2019 HTML5 Roupup

27/48

7/31/2019 HTML5 Roupup

28/48

Structural Elements

and more

7/31/2019 HTML5 Roupup

29/48

Your menu

Article title

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada

About section

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Copyright 2009 Your name

7/31/2019 HTML5 Roupup

30/48

Date and time

search

telrange

email

URLcolor

7/31/2019 HTML5 Roupup

31/48

Video Element

7/31/2019 HTML5 Roupup

32/48

Video Element

7/31/2019 HTML5 Roupup

33/48

Audio Element

Play theAudio

Pause the

Audio

Increase

Volume

DecreaseVolume

7/31/2019 HTML5 Roupup

34/48

Canvas

Create graphics with the canvas element

Uses Javascript to get the context and draw

elements.

Faces tough completion from the SVG

Useful for creating Charts, Games, Visualizers

etc.

7/31/2019 HTML5 Roupup

35/48

Canvas

Create graphics with the canvas element

Uses Javascript to get the context and draw

elements.

Faces tough completion from the SVG

Useful for creating Charts, Games, Visualizers

etc.

7/31/2019 HTML5 Roupup

36/48

Styling with CSS3

7/31/2019 HTML5 Roupup

37/48

CSS3

Still work in progress

Already a widely used and unsung standard

All modern browsers support CSS3

(Chrome, Firefox, Safari, Opera)

7/31/2019 HTML5 Roupup

38/48

SoWhat About

7/31/2019 HTML5 Roupup

39/48

SoWhat About

7/31/2019 HTML5 Roupup

40/48

7/31/2019 HTML5 Roupup

41/48

IE is Improving

7/31/2019 HTML5 Roupup

42/48

Some CSS3 properties

7/31/2019 HTML5 Roupup

43/48

Rounded Corners

Border-radius{10px}

-moz-Border-radius{10px}

-webkit-Border-radius{10px}

Border-radius{10px 20px 30px 40px}

-moz-Border-radius{10px 20px 30px 40px}-webkit-Border-radius{10px 20px 30px 40px}

7/31/2019 HTML5 Roupup

44/48

Box Shadow

Box-shadow {3px 3px 10px #333}

-moz-Box-shadow {3px 3px 10px #333}

-webkit-Box-shadow {3px 3px 10px #333}

Box-shadow {inset 3px 3px 10px #333}

-moz-Box-shadow {inset 3px 3px 10px #333}-webkit-Box-shadow {inset 3px 3px 10px #333}

7/31/2019 HTML5 Roupup

45/48

Text Shadow

Text-shadow {3px 3px 10px #333}

-moz-Text-shadow {3px 3px 10px #333}

-webkit-Text-shadow {3px 3px 10px #333

7/31/2019 HTML5 Roupup

46/48

RGBA

Background-color:{ rgba(234, 221, 79, 0.5) }

7/31/2019 HTML5 Roupup

47/48

Gradientsbackground-image: linear-gradient(bottom, rgb(36,72,244) 39%, rgb(65,101,255)

70%);

background-image: -o-linear-gradient(bottom, rgb(36,72,244) 39%, rgb(65,101,255)

70%);

background-image: -moz-linear-gradient(bottom, rgb(36,72,244) 39%,

rgb(65,101,255) 70%);

background-image: -webkit-linear-gradient(bottom, rgb(36,72,244) 39%,

rgb(65,101,255) 70%);

background-image: -ms-linear-gradient(bottom, rgb(36,72,244) 39%,

rgb(65,101,255) 70%);

background-image: -webkit-gradient(

linear,left bottom,

left top,

color-stop(0.39, rgb(36,72,244)),

color-stop(0.7, rgb(65,101,255))

);

7/31/2019 HTML5 Roupup

48/48

There is a lot more to CSS3