Your SlideShare is downloading. ×
HTML5 CSS3 Basics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 CSS3 Basics

1,859
views

Published on

HTML5 CSS3 Basics

HTML5 CSS3 Basics

Published in: Education, Technology, Design

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,859
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
147
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 • Less Header Code • More Semantic HTML tags Media Tags • Input Types • Form Validation • Geolocation • Draggable • Local Storage Cross-Domain Messaging Web Sockets • Canvas
  • 2. 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>
  • 3. 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>
  • 4. Less Header Code You should avoid following tags and attributes in HTML5 <font> <center> <frame> align bgcolor height width size type
  • 5. Semantic HTML tags
  • 6. Semantic HTML tags
  • 7. Media Tags AUDIO <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>
  • 8. 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>
  • 9. Input Types
  • 10. Input Types
  • 11. Input Types
  • 12. Input Types
  • 13. Input Types
  • 14. Input Types
  • 15. Form Validation Placeholder <input name="q" ” type=“text” placeholder="Go to a Website”>
  • 16. 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>
  • 17. Form Validation Support IE 10.0+ FIREFOX 4.0+ SAFARI 5.0+ CHROME 10.0+ OPERA 9.0+
  • 18. Geolocation navigator.geolocation.getCurrentPosition( function(position){ position.coords.latitude, position.coords.longitude } );
  • 19. 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
  • 20. 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/
  • 21. 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/
  • 22. CSS3 • Responsive Design • Border Radius • Text Effects • Web Fonts • Transitions
  • 23. 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 } }
  • 24. Responsive Design Demos http://www.smashingmagazine.com/ http://demos.9lessons.info/responsive/
  • 25. 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/
  • 26. 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; }
  • 27. Text Effects Online Tools http://css3.me/ http://css3generator.com/ http://css3gen.com/text-shadow/
  • 28. 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>
  • 29. Web Fonts Google Fonts http://www.google.com/fonts/
  • 30. Transitions .ant_left { top: -22px; left: 15px; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); transform:rotate(-30deg); }
  • 31. Transitions Demos http://jsfiddle.net/MZpgY/3/embedded/result/ http://jsfiddle.net/Z7daH/embedded/result/
  • 32. <!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>
  • 33. Questions Thanks Srinivas Tamada http://9lessons.info