* what is html5 and how to use it easily?
HTML5 is the newest and upgradted version of html 4, html5 add New Elements,New Attributes, it's Full CSS3 Supported .
It's supported all major browsers like (Chrome, Safari, Firefox, Opera, IE). HTML5 works with CSS3, html5 new features should be based on HTML, CSS, DOM, and javaScript.
-No need for external plugins (like Flash)
-Error handling should be easier than in previous versions.
-Scripting has to be replaced by more markup.
HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and lots more
example:-
* <canvas> Element
<canvas>- Used to draw graphics like line sqire cirle ect, animation via scripting (JavaScript,)
* New Media Elements
<audio> For use mp3
<video> For video or movie like mp4, vob, mpg, flv
<embed> Its use for coll an external application (a plug-in)
New elements for better page layout structure:
<article> use for an article
<aside> use for aside from the page content
<footer> Use footer continer
<header> use a header section like header continer
<nav> Use navigation links
<section> use section continer
<time> Use date/time on web page
<wbr> use line-break
Some tag's are removed from html5:-
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
Basic layout structure with html5 new elements:-
use inside head tag
<style type="text/css">
body {
width: 940px;
margin: 0 auto;
font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
background-color: #fafafa;
}
/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section
{ display: block; }
/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}
/* =page level container */
#pageContainer {
margin: 0px auto 0px auto;
width: 960px;
}
#pageHeader {
width:960px;
height:120px;
color:#0099CC;
background-color: #000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #ba3051;
}
.logo {
font-family: Arial, Helvetica, sans-serif;
font-size: 52px;
color: #FFF;
padding-top: 20px;
font-weight: 700;
padding-left: 20px;
}
#pageNav {
width: 960px;
height: 50px;
background-color: #999;
background-color:#eaeaea;
}
#pageNav ul {
margin: 0px;
padding: 0px;
}
#pageNav ul li {
float: left;
list-style-type: none;
display: inline;
padding-top: 10px;
padding-right: 50px;
padding-left: 10px;
}
#pageNav ul li a {
color: #000;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
}
#pageSection {
background-color: #f2f2f2;
height: 300px;
width: 660px;
float: right;
}
#pageAside {
width: 300px;
height: 300px;
background-color: #eaeaea;
float: left;
}
#contentContainer {
margin: 0px;
padding-top: 10px;
padding-bottom: 20px;
min-height: 500px;
}
#pageFooter {
width: 960px;
background-color: #c33754;
height: 100px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.clearfix {clear:both; }
</style>
use this code inside body tag
<body>
<div id="pageContainer">
<header id="pageHeader"><div class="logo">Justeffects.com</div></header>
<div class="clearfix"></div>
<nav id="pageNav">
<ul>
<li><a href="">Home </a></li>
<li><a href="">About</a></li>
<li><a href="">Our blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<section id="pageSection">
<header class="sectionHeader" style="padding:10px 0 0 10px;"><h3>Lorem ipsum dolor met</h3></header>
<article class="sectionArticle" style="padding:10px 0 0 28px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</article>
<footer class="sectionFooter" style="padding:10px 0 0 28px;">Integer et urna ut</footer>
</section>
<aside id="pageAside"><article>
<hgroup>
<h3>sidebar title</h3>
</hgroup>
<p>
Some Text Here
</p>
</article></aside>
</div>
<div class="clearfix"></div>
<footer id="pageFooter"><div style="padding: 20px 0px 0px 50px; font-size:12px;">© 2013 All Rights Reserved </div></footer>
</div>
</body>
HTML5 is the newest and upgradted version of html 4, html5 add New Elements,New Attributes, it's Full CSS3 Supported .
It's supported all major browsers like (Chrome, Safari, Firefox, Opera, IE). HTML5 works with CSS3, html5 new features should be based on HTML, CSS, DOM, and javaScript.
-No need for external plugins (like Flash)
-Error handling should be easier than in previous versions.
-Scripting has to be replaced by more markup.
HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and lots more
example:-
* <canvas> Element
<canvas>- Used to draw graphics like line sqire cirle ect, animation via scripting (JavaScript,)
* New Media Elements
<audio> For use mp3
<video> For video or movie like mp4, vob, mpg, flv
<embed> Its use for coll an external application (a plug-in)
New elements for better page layout structure:
<article> use for an article
<aside> use for aside from the page content
<footer> Use footer continer
<header> use a header section like header continer
<nav> Use navigation links
<section> use section continer
<time> Use date/time on web page
<wbr> use line-break
Some tag's are removed from html5:-
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
Basic layout structure with html5 new elements:-
use inside head tag
<style type="text/css">
body {
width: 940px;
margin: 0 auto;
font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
background-color: #fafafa;
}
/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section
{ display: block; }
/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}
/* =page level container */
#pageContainer {
margin: 0px auto 0px auto;
width: 960px;
}
#pageHeader {
width:960px;
height:120px;
color:#0099CC;
background-color: #000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #ba3051;
}
.logo {
font-family: Arial, Helvetica, sans-serif;
font-size: 52px;
color: #FFF;
padding-top: 20px;
font-weight: 700;
padding-left: 20px;
}
#pageNav {
width: 960px;
height: 50px;
background-color: #999;
background-color:#eaeaea;
}
#pageNav ul {
margin: 0px;
padding: 0px;
}
#pageNav ul li {
float: left;
list-style-type: none;
display: inline;
padding-top: 10px;
padding-right: 50px;
padding-left: 10px;
}
#pageNav ul li a {
color: #000;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
}
#pageSection {
background-color: #f2f2f2;
height: 300px;
width: 660px;
float: right;
}
#pageAside {
width: 300px;
height: 300px;
background-color: #eaeaea;
float: left;
}
#contentContainer {
margin: 0px;
padding-top: 10px;
padding-bottom: 20px;
min-height: 500px;
}
#pageFooter {
width: 960px;
background-color: #c33754;
height: 100px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.clearfix {clear:both; }
</style>
use this code inside body tag
<body>
<div id="pageContainer">
<header id="pageHeader"><div class="logo">Justeffects.com</div></header>
<div class="clearfix"></div>
<nav id="pageNav">
<ul>
<li><a href="">Home </a></li>
<li><a href="">About</a></li>
<li><a href="">Our blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<section id="pageSection">
<header class="sectionHeader" style="padding:10px 0 0 10px;"><h3>Lorem ipsum dolor met</h3></header>
<article class="sectionArticle" style="padding:10px 0 0 28px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</article>
<footer class="sectionFooter" style="padding:10px 0 0 28px;">Integer et urna ut</footer>
</section>
<aside id="pageAside"><article>
<hgroup>
<h3>sidebar title</h3>
</hgroup>
<p>
Some Text Here
</p>
</article></aside>
</div>
<div class="clearfix"></div>
<footer id="pageFooter"><div style="padding: 20px 0px 0px 50px; font-size:12px;">© 2013 All Rights Reserved </div></footer>
</div>
</body>
No comments:
Post a Comment