html 5 and css 3
TRANSCRIPT
HTML5 and CSS3HTML5 ~= 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
New Elements
New Attributes
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