HTML5 CSS3 Basics
•Transferir como PPT, PDF•
7 gostaram•7,108 visualizações
HTML5 CSS3 Basics
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a HTML5 CSS3 Basics
Semelhante a HTML5 CSS3 Basics (20)
Último
Último (20)
HTML5 CSS3 Basics
- 2. HTML5 • Less Header Code • More Semantic HTML tags Media Tags • Input Types • Form Validation • Geolocation • Draggable • Local Storage Cross-Domain Messaging Web Sockets • Canvas
- 3. Less Header Code HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 5 <!DOCTYPE HTML> <html> <head><meta charset=”utf-8”> <title>Page</title> </head>
- 4. Less Header Code HTML 4 <script src="jquery.js” type="text/javascript"> </script> <link href="style.css” type="text/css"></link> HTML 5 <script src="jquery.js"> </script> <link href="style.css"></link>
- 5. Less Header Code You should avoid following tags and attributes in HTML5 <font> <center> <frame> align bgcolor height width size type
- 9. Media Tags AUDIO <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>
- 10. Media Tags VIDEO <video width="320" height="240" controls autoplay> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> </video>
- 11. Input Types
- 12. Input Types
- 13. Input Types
- 14. Input Types
- 15. Input Types
- 16. Input Types
- 17. Form Validation Placeholder <input name="q" ” type=“text” placeholder="Go to a Website”>
- 18. Form Validation <form method='post' action=''> Username: <input name="username" type="text" required/> Password: <input name="password" type="password" required/> Email: <input name="email" type="email" required/> <input type="submit" value=”SAVE"/> </form>
- 21. Local Storage mainfest.appcache CACHE MANIFEST index.html style.css logo.png FALLBACK: / no-internet.html NETWORK: * HTML5 Code <!doctype html> <html manifest="mainfest.appcache"> Reference URL http://www.9lessons.info/2013/03/html5-application-cache.html
- 22. Canvas <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> <body> <canvas id="myCanvas" width="200" height="100" ></canvas> </body> http://demos.9lessons.info/game.php http://demos.9lessons.info/egg/
- 23. HTML5 Demos Web Socket http://demo.kaazing.com/livefeed/ Geo Location http://demos.9lessons.info/geo2.html Reference http://html5demos.com/ http://www.html5rocks.com/en/
- 25. CSS3 • Responsive Design • Border Radius • Text Effects • Web Fonts • Transitions
- 26. Responsive Design @media only screen and (min-width: 480px){ #header{ background-color: red } } @media only screen and (min-width: 768px){ #header{ background-color: blue } } @media only screen and (min-width: 1140px) { #header{ background-color: green } }
- 28. Border Radius Code #button { -moz-border-radius: 15px; // Firefox -webkit-border-radius: 15px; // Safari Crome border-radius: 15px; // IE - 9/10 } Online Tools http://css3.me/ http://css3generator.com/
- 29. Text Effects Code #Effect { color: #ffffff; text-shadow: 0 1px 0 #999, 0 2px 0 #999, 0 3px 0 #999, 0 4px 0 #999, 0 5px 0 #999, 0 6px 0 #000; }
- 30. Text Effects Online Tools http://css3.me/ http://css3generator.com/ http://css3gen.com/text-shadow/
- 31. Web Fonts @font-face { font-family: chandy; src: url(’fonts/comesinhandy.ttf') format("opentype"); } .myfont { font-family:”chandy”,arial; font-size:80px } // HTML Code <div class="myfont”>Website Title</div>
- 35. <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <title>HTML5 Template</title> <link rel="stylesheet" href="style.css"> <script src="modernizr.min.js"></script>