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 Code
You should avoid following tags and attributes in HTML5
<font>
<center>
<frame>
align
bgcolor
height
width
size
type

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

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>

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
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.longitude }
);

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

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/

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/

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 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-radius: 15px; // IE - 9/10
}
Online Tools
http://css3.me/
http://css3generator.com/

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;
}

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 Fonts
http://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 Tamada
http://9lessons.info

HTML5 CSS3 Basics

Recommended

More Related Content

What's hot (20)

Similar to HTML5 CSS3 Basics (20)

Recently uploaded (20)

HTML5 CSS3 Basics