html5 css3 basics

HTML5• Less Header Code• More Semantic HTML tags Media Tags• Input Types• Form Validation• Geolocation• Draggable• Local Storage Cross-Domain Messaging Web

Sockets• Canvas

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>

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>

Less Header CodeYou should avoid following tags and attributes in HTML5 <font><center><frame> alignbgcolorheightwidthsizetype

Semantic HTML tags

Media Tags

AUDIO<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"></audio>

Media TagsVIDEO<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>

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 name="password" type="password" required/>Email: <input name="email" type="email" required/>

<input type="submit" value=”SAVE"/></form>

Form Validation Support

IE10.0+

FIREFOX4.0+

SAFARI5.0+

CHROME10.0+

OPERA9.0+

Geolocationnavigator.geolocation.getCurrentPosition( function(position){position.coords.latitude,position.coords.longitude });

Local Storage mainfest.appcacheCACHE MANIFESTindex.htmlstyle.csslogo.pngFALLBACK:/ no-internet.htmlNETWORK:*

HTML5 Code<!doctype html><html manifest="mainfest.appcache">

Reference URL http://www.9lessons.info/2013/03/html5-application-cache.html

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.phphttp://demos.9lessons.info/egg/

HTML5 Demos

Web Sockethttp://demo.kaazing.com/livefeed/

Geo Locationhttp://demos.9lessons.info/geo2.html

Referencehttp://html5demos.com/http://www.html5rocks.com/en/

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 (min-width: 768px){

#header{ background-color: blue }

}

@media only screen and (min-width: 1140px) {

#header{ background-color: green }

}

Responsive DesignDemos

http://www.smashingmagazine.com/

http://demos.9lessons.info/responsive/

Border RadiusCode#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/

Text EffectsCode#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;}

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:”chandy”,arial; font-size:80px}// HTML Code<div class="myfont”>Website Title</div>

Web Fonts

Google Fontshttp://www.google.com/fonts/

Transitions

.ant_left{top: -22px;left: 15px;-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);transform:rotate(-30deg);}

Transitions

Demos

http://jsfiddle.net/MZpgY/3/embedded/result/

http://jsfiddle.net/Z7daH/embedded/result/

<!DOCTYPE html><html class="no-js"><head><title>HTML5 Template</title><link rel="stylesheet" href="style.css"> <script src="modernizr.min.js"></script>

Questions

Thanks

Srinivas Tamadahttp://9lessons.info

html5 css3 basics

Education