HTML 5 and CSS 3

HTML5 and CSS3
HTML5 ~= HTML + CSS + JS

Outline
● HTML5 Introduction
● New Elements
● New Attributes
● Full CSS3 Support
● Media
● 2D/3D Graphics
● Local Storage
● TODO

HTML5 Introduction
● What is HTML5?
○ HTML is a core technology markup language of the
Internet used for structuring and presenting
content for the World Wide Web (WEB).
○ HTML5 is the latest HTML standard. It walks hand in
hand with CSS3, the latest CSS standard.

HTML5 Introduction
● Rough Timeline of Web Technologies
○ 1991 : HTML
○ 1994 : HTML 2
○ 1996 : CSS 1 + JavaScript
○ 1997 : HTML 4
○ 1998 : CSS 2
○ 2000 : XHTML 1
○ 2002 : Tableless Web Design
○ 2005 : AJAX
○ 2009 : HTML5

Full CSS3 Support
● CSS Selector
○ :nth-child(NUMBER)
○ :first-child
○ :last-child
○ input[type="email"]
○ ...

Full CSS3 Support
● Gradients
○ linear-gradient
● Shadows
○ text-shadow
○ box-shadow
● Round Corners
○ border-radius
● ...

Full CSS3 Support
● Web Fonts
@font-face {
font-family: 'Angkor';
src: local('Angkor'),
url(http://fonts.gstatic.com/angkor.ttf)
format('truetype');
}
h1 {
font-family: 'Angkor';
}

Full CSS3 Support
● Media Query
@media mediatype and|not|only (media feature) {
CSS-Code;
}

Media
● Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Media
● Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

2D/3D Graphics
● Canvas 2D
<canvas id='canvas' width='600' height='300'>
Your browser does not support the canvas.
</canvas>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText("Hello Canvas", canvas.width/2 - 150,
canvas.height/2 + 15);
context.strokeText("Hello Canvas", canvas.width/2 - 150,
canvas.height/2 + 15 );

2D/3D Graphics
● Canvas 3D
○ http://www.kevs3d.co.uk/dev/html5logo/

Local Storage
● Cache Webpage
○ <html manifest="name.appcache">
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<h1>Hello AppCache Demo</h1>
<p>
<img src="img_logo.gif" width="336" height="69">
</p>
</body>
</html>

Local Storage
● Web Storage
○ localStorage.setItem(KEY, VALUE);
○ localStorage.getItem(KEY);
○ http://www.w3schools.com/html/tryit.asp?
filename=tryhtml5_webstorage_session

TODO
● By using CSS3 media query and nth-child,
download this zip http://goo.gl/1SFTh9 and
style the HTML of “index.html” look to the
same to image giving (for desktop, tablet
and smartphone, you can see the example
in slide number 10)

References
● http://www.colorzilla.com/gradient-editor/
● http://css3gen.com/text-shadow/
● http://www.cssmatic.com/box-shadow
● http://www.w3schools.com/html/html5_audio.asp
● http://www.w3schools.com/html/html5_video.asp
● https://developer.mozilla.org/en-
US/docs/Web/API/Canvas_API/Tutorial
● http://corehtml5canvas.com/code-live/
● http://www.html5rocks.com
● http://html5test.com/
● http://www.kevs3d.co.uk/dev/html5logo/
● http://slides.html5rocks.com/
● http://www.w3schools.com/html/html_xhtml.asp
● http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

HTML 5 and CSS 3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML 5 and CSS 3

Similar to HTML 5 and CSS 3 (20)

Recently uploaded

Recently uploaded (20)

HTML 5 and CSS 3