HTML5 CSS3 Basics
Download as PPT, PDF7 likes7,129 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.
![<!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>](https://image.slidesharecdn.com/html5css3-130726120845-phpapp01/85/HTML5-CSS3-Basics-35-320.jpg)
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; }
- 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>