Your SlideShare is downloading. ×
0
HTML5
• Less Header Code
• More Semantic HTML tags Media Tags
• Input Types
• Form Validation
• Geolocation
• Draggable
• ...
Less Header Code
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5...
Less Header Code
HTML 4
<script src="jquery.js” type="text/javascript"> </script>
<link href="style.css” type="text/css"><...
Less Header Code
You should avoid following tags and attributes in HTML5
<font>
<center>
<frame>
align
bgcolor
height
widt...
Semantic HTML tags
Semantic HTML tags
Media Tags
AUDIO
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</a...
Media Tags
VIDEO
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src=...
Input Types
Input Types
Input Types
Input Types
Input Types
Input Types
Form Validation
Placeholder
<input name="q" ” type=“text” placeholder="Go to a
Website”>
Form Validation
<form method='post' action=''>
Username:
<input name="username" type="text" required/>
Password:
<input na...
Form Validation Support
IE
10.0+
FIREFOX
4.0+
SAFARI
5.0+
CHROME
10.0+
OPERA
9.0+
Geolocation
navigator.geolocation.getCurrentPosition( function(position){
position.coords.latitude,
position.coords.longit...
Local Storage
mainfest.appcache
CACHE MANIFEST
index.html
style.css
logo.png
FALLBACK:
/ no-internet.html
NETWORK:
*
HTML5...
Canvas
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRe...
HTML5 Demos
Web Socket
http://demo.kaazing.com/livefeed/
Geo Location
http://demos.9lessons.info/geo2.html
Reference
http:...
CSS3
• Responsive Design
• Border Radius
• Text Effects
• Web Fonts
• Transitions
Responsive Design
@media only screen and (min-width: 480px){
#header{ background-color: red }
}
@media only screen and (mi...
Responsive Design
Demos
http://www.smashingmagazine.com/
http://demos.9lessons.info/responsive/
Border Radius
Code
#button
{
-moz-border-radius: 15px; // Firefox
-webkit-border-radius: 15px; // Safari Crome
border-radi...
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 #...
Text Effects
Online Tools
http://css3.me/
http://css3generator.com/
http://css3gen.com/text-shadow/
Web Fonts
@font-face
{
font-family: chandy;
src: url(’fonts/comesinhandy.ttf') format("opentype");
}
.myfont
{
font-family...
Web Fonts
Google Fonts
http://www.google.com/fonts/
Transitions
.ant_left
{
top: -22px;
left: 15px;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
transform...
Transitions
Demos
http://jsfiddle.net/MZpgY/3/embedded/result/
http://jsfiddle.net/Z7daH/embedded/result/
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js...
Questions
Thanks
Srinivas Tamada
http://9lessons.info
HTML5 CSS3 Basics
HTML5 CSS3 Basics
HTML5 CSS3 Basics
Upcoming SlideShare
Loading in...5
×

HTML5 CSS3 Basics

2,019

Published on

HTML5 CSS3 Basics

Published in: Education, Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,019
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
156
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 CSS3 Basics "

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

    Clipping is a handy way to collect important slides you want to go back to later.

×