HTML5 is the thing that developers are starting to take a look more and more. More and more browsers are getting compatible with it and with the iPhone choosing this as it’s main multimedia language I have no doubt that this will be demanded in great quantities. In this post I will explain how to create a sample HTML5 structure for your web site.
Can develop apps for Android, BB, Windows, IPhone.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
<style>
header, nav, article, footer, address, section { display: block; }
#container { width:900px; margin:auto; background-color:white; }
header { background-color:#666; }
nav li { display:inline; padding-right:1em; }
nav a { color:white; text-decoration:none; }
nav a:hover { text-decoration:overline; }
h1, h2 { margin:0px; font-size:1.5em; }
h2 { font-size:1em; }
footer { background-color:#999; text-align:center; }
</style>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
</script>
</head>
<body>
<div id="container">
<header>
<h1>Sample HTML5 Structure</h1>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</header>
<section>
<hgroup> <h1>Main Section</h1> <h2>This is a sample HTML5 Page</h2> </hgroup>
<article> <p>This is the content for the first article</p> </article> <article> <p>This is the content for the second article</p>
</article>
<p>This is the content for the second article</p> </article>
</section>
<footer>
<p>This is the Footer</p> </footer> </div> </body>
</html>
As you can see the syntax is very similar, the start tags changed somewhat, but it makes it more convinient for the coder. Alsoas you can see now instead of making separate divs to stylize the header and footer, now HTML5 gives you a specified tag for each of them. The <nav> tag is the where your main site navigation will be at. You can also see the <section> tag, this will define the differents parts of your page, for example articles, blogroll, etc. The <hgroup> tag is used to group various content heading, for example when you have an Article title and a Subtitle.
The JavaScript part of the code will create the tags so that older browsers and IE will accept them. This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot.
Can Fix The Footer:
EX:-
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
Check Out:-
http://html5tutorial.info/html5-canvas-rect.php
http://line25.com/tutorials/coding-up-a-web-design-concept-into-html-css
Thanks,
Sujay
Comments
Post a Comment