Download - HTML5 Roupup
-
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