HTML5 CSS3 Basics
•Download as PPT, PDF•
7 likes•7,108 views
HTML5 introduced several new features including semantic HTML tags, media tags for audio and video, improved form validation, geolocation, local storage and web sockets capabilities. It also reduced unnecessary code in headers and provided more input types. CSS3 introduced responsive design, rounded corners using border-radius, text effects, web fonts, and transitions for animated effects.
More Related Content
What's hot
What's hot (20)
Similar to HTML5 CSS3 Basics
Similar to HTML5 CSS3 Basics (20)
Recently uploaded
Recently uploaded (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>