7/31/2019 HTML5 Roundup
1/66
7/31/2019 HTML5 Roundup
2/66
Why HTML5?
State of the Internet Now states
http://www.onlineschools.org/state-of-the-internet/soti.html
7/31/2019 HTML5 Roundup
3/66
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 Roundup
4/66
What happened next?
7/31/2019 HTML5 Roundup
5/66
7/31/2019 HTML5 Roundup
6/66
WHATWG
7/31/2019 HTML5 Roundup
7/66
WHATWGWeb Hypertext Applications Working Group
http://www.whatwg.org/html
7/31/2019 HTML5 Roundup
8/66
WHATWG
A rebellion was formed within W3C.
W3C was formulating standards, which werepurely theoretical and unrelated to the needs
of the web designers. Members from 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 Roundup
9/66
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 Roundup
10/66
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 Roundup
11/66
HTML 5 & HTML5
7/31/2019 HTML5 Roundup
12/66
HTML 5 & HTML5
7/31/2019 HTML5 Roundup
13/66
SoWhat is HTML5
7/31/2019 HTML5 Roundup
14/66
An Application Platform
7/31/2019 HTML5 Roundup
15/66
7/31/2019 HTML5 Roundup
16/66
7/31/2019 HTML5 Roundup
17/66
HTML5
HTML + CSS + JSStructure + Presentation + Behavior
7/31/2019 HTML5 Roundup
18/66
Semantics
7/31/2019 HTML5 Roundup
19/66
Document Type Definition (DTD)
Old
7/31/2019 HTML5 Roundup
20/66
7/31/2019 HTML5 Roundup
21/66
7/31/2019 HTML5 Roundup
22/66
7/31/2019 HTML5 Roundup
23/66
7/31/2019 HTML5 Roundup
24/66
7/31/2019 HTML5 Roundup
25/66
7/31/2019 HTML5 Roundup
26/66
7/31/2019 HTML5 Roundup
27/66
7/31/2019 HTML5 Roundup
28/66
7/31/2019 HTML5 Roundup
29/66
Structural Elements
and more
7/31/2019 HTML5 Roundup
30/66
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 Roundup
31/66
Date and time
search
telrange
URLcolor
7/31/2019 HTML5 Roundup
32/66
Video Element
7/31/2019 HTML5 Roundup
33/66
Video Element
7/31/2019 HTML5 Roundup
34/66
Audio Element
Play theAudio
Pause the
Audio
Increase
Volume
DecreaseVolume
7/31/2019 HTML5 Roundup
35/66
Canvas
Create graphics with the canvas element
Uses Javascript to get the context and draw
elements.
Useful for creating Charts, Games,Visualizations etc.
7/31/2019 HTML5 Roundup
36/66
7/31/2019 HTML5 Roundup
37/66
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 Roundup
38/66
SoWhat About
7/31/2019 HTML5 Roundup
39/66
SoWhat About
7/31/2019 HTML5 Roundup
40/66
7/31/2019 HTML5 Roundup
41/66
IE is Improving
7/31/2019 HTML5 Roundup
42/66
7/31/2019 HTML5 Roundup
43/66
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 Roundup
44/66
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 Roundup
45/66
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 Roundup
46/66
RGBA
Background-color:{ rgba(234, 221, 79, 0.5) }
7/31/2019 HTML5 Roundup
47/66
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 Roundup
48/66
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 Roundup
49/66
Selectors
.row:nth-child(even) {
background: #dde;
}.row:nth-child(odd) {
background: white;
}
nth selectors
li:last-child {
background: #dde;
}
li:nth-child(3n) {
background: red;
}
7/31/2019 HTML5 Roundup
50/66
Selectors
form input[type="text"] {
border: 1px solid #333;
padding: 0.2em;
width: 400px;}
Attribute Selectors
a[href*="example.com"] { color : red ; }
7/31/2019 HTML5 Roundup
51/66
Compatibility
Most of the CSS3 elements can be used with
Vendor Prefixes.
http://caniuse.com/
7/31/2019 HTML5 Roundup
52/66
7/31/2019 HTML5 Roundup
53/66
7/31/2019 HTML5 Roundup
54/66
https://reader009.{domain}/reader009/html5/0427/5ae256a2b71e7/5ae256c419445.png
7/31/2019 HTML5 Roundup
55/66
Solution
Responsive Design
7/31/2019 HTML5 Roundup
56/66
7/31/2019 HTML5 Roundup
57/66
http://mediaqueri.es
7/31/2019 HTML5 Roundup
58/66
Responsive Design
Using CSS, we can make the website RESPOND
to the Device Landscape and structure content
appropriately.
7/31/2019 HTML5 Roundup
59/66
HTML5 & CSS3 are still work in progress,
But they can be still used.
7/31/2019 HTML5 Roundup
60/66
HTML5 & CSS3 are still work in progress,
But they can be still used.
FRAMEWORKSAcross Devices
7/31/2019 HTML5 Roundup
61/66
7/31/2019 HTML5 Roundup
62/66
7/31/2019 HTML5 Roundup
63/66
and many many more
52Framework
G5 Framework
Perkins
Sprites.js
LESS
SASS animate.css
7/31/2019 HTML5 Roundup
64/66
Resources
html5rocks.com html5doctor.com
net.tutsplus.com
smashingmagazine.com
caniuse.com
mediaqueri.es
blog.whatwg.org
w3.org
slides.html5rocks.com
netmagazine.com
7/31/2019 HTML5 Roundup
65/66
7/31/2019 HTML5 Roundup
66/66
Thank You