HTML 5 and CSS 3
•
3 gefällt mir•1,135 views
Introduction of HTML 5 and CSS 3. At the end of slide there is a exercise for you.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie HTML 5 and CSS 3
Ähnlich wie HTML 5 and CSS 3 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
HTML 5 and CSS 3
- 1. HTML5 and CSS3 HTML5 ~= HTML + CSS + JS
- 2. Outline ● HTML5 Introduction ● New Elements ● New Attributes ● Full CSS3 Support ● Media ● 2D/3D Graphics ● Local Storage ● TODO
- 3. 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.
- 4. 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
- 5. New Elements
- 7. Full CSS3 Support ● CSS Selector ○ :nth-child(NUMBER) ○ :first-child ○ :last-child ○ input[type="email"] ○ ...
- 8. Full CSS3 Support ● Gradients ○ linear-gradient ● Shadows ○ text-shadow ○ box-shadow ● Round Corners ○ border-radius ● ...
- 9. 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'; }
- 10. Full CSS3 Support ● Media Query @media mediatype and|not|only (media feature) { CSS-Code; }
- 11. 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>
- 12. 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>
- 13. 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 );
- 14. 2D/3D Graphics ● Canvas 3D ○ http://www.kevs3d.co.uk/dev/html5logo/
- 15. 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>
- 16. Local Storage ● Web Storage ○ localStorage.setItem(KEY, VALUE); ○ localStorage.getItem(KEY); ○ http://www.w3schools.com/html/tryit.asp? filename=tryhtml5_webstorage_session
- 17. 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)
- 18. 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