Social Networks

HTML5 and only HTML 5 this is perfect time to take up HTML5 semantic markup tags into your website. IF you have already existing site you can change the tag easily or for new one you should must go with HTML5 design only. W3C has recently conducted a survey of over thousands of websites and found that the most of common div IDs and classes are 1.footer, 2. header, 3. menu, 4. content, 5. title and 6. nav. HTML5 semantic markup elements that can put across the point of the element to developers, browser as well the search spider algorithms also. As usual in this tutorial also you will get demo and you can try yourself after download the script.

Download Source HTML 5 Template Design Login With Facebook and Twitter New Live Demo HTML5 Template Design

 
Sample HTML5 File for Template Design Here we have used javascript Modernizr 2.6.1 (Custom Build) | MIT & BSD

< !DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> < ![endif]-->
<!--[if IE 7]>         </html><html class="no-js lt-ie9 lt-ie8"> < ![endif]-->
<!--[if IE 8]>         </html><html class="no-js lt-ie9"> < ![endif]-->
<!--[if gt IE 8]><!--> </html><html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Onlinewebapplication.com HTML5 Template for your site</title>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<script src="modernizr-2.6.1-respond-1.1.0.min.js"></script>
<link rel="stylesheet" href="style.css"  />
</head>
<body id="index" class="home">
	<header class='container' id='header'>
	OnlineWebApplication.com
	</header>
	<nav class='container roundEdge' id='nav'>
		<ul>
		<li><a rel="nofollow" href='#'>Home</a></li>
		<li><a rel="nofollow" href='#'>WordPress</a></li>
		<li><a rel="nofollow" href='#'>FreePlugins</a></li>
		<li><a rel="nofollow" href='#'>Games</a></li>
		<li><a rel="nofollow" href='#'>Social Media</a></li>
		</ul>
	</nav>
	<section class='container' id='main'>
	</section><section id='content'>
	<article>
	<header>
	<h2><a rel="nofollow" href='#'>HTML5 Template Design for WebSite</a></h2>
	</header>
	<p>
	Description Article 1
	</p>
	</article>
	<article>
	<header>
	<h2><a rel="nofollow" href='http://onlinewebapplication.com/android-app-development/'>How To Convert AVI To MP4</a></h2>
	</header>
	<p>
	Description Article 2
	</p>
	</article>
	<article>
	<header>
	<h2><a rel="nofollow" href='http://onlinewebapplication.com/android-app-development/'>Android App Development Is Experiencing An Increasing Fashion</a></h2>
	</header>
	<p>
	Description Article 2.
	</p>
	</article>
	<article>
	<header>
	<h2><a rel="nofollow" href='http://onlinewebapplication.com/samsung-galaxy-s4-phone-specifications-summary-whats-new/'>Samsung Galaxy S4 Phone Specifications Summary Whats New</a></h2>
	</header>
	<p>
	Description Article 3.
	</p>
	</article>
	</section>
	<aside id='sidebar' class='roundEdge'> 
	</aside>
 
<footer class='container' id='footer'>
<p>
© 2009-2013 onlinewebapplication.com.
</p>
</footer>
</body>
</html>

Sample CSS3 HTML5 file for Website Template Design

*{margin:0px; padding:0px}
header, footer,section,nav{display:blocks}
.container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
h1, h2 {color: #333;
font-family: Helvetica,Arial;
font-weight: bold;
line-height: 1.1em;
padding-bottom: 5px;
text-shadow: 0 1px 0 #FFF;
font-size: 28px;}
h2 a{
color: #333;
text-decoration:none;	
}
h2 a:hover{
color: #333;
text-decoration:none;	
background-color:#81c3de;
}
.roundEdge
{border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;}
#main, #header, #nav
{
overflow:auto;
}
#nav{background-color:#162336}
 
#footer
{
height:40px;
border-top:3px solid #333333;
}
#footer p
{
padding:20px 0px 20px 0px;
font-size:12px;
}
#content
{
float:left;
width:600px;
}
#content article
{
margin-bottom:20px;
}
#sidebar
{
float:right;
width:330px;
background-color:#dedede;
min-height:400px;
text-align:center;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
font-size:12px;
font-weight:bold;
}
#nav ul li a
{
color:#ffffff;text-decoration:none;display:block;padding:12px;text-align:center;min-width:100px;
}
#nav ul li a:hover
{
background-color:#81c3de;
color:#333333;
}
#logo
{
margin:10px;
}
#ads
{
text-align:center;
}

I hope this HTML5 Website Template Design tutorial will you to build next generation standard bog and sites. Very soon I will write article for WordPress blog HTML5 tutorials.

  1. Currently it looks like Drupal is the top blogging platform out
    there right now. (from what I’ve read) Is that what you’re using on your blog?

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>