Making HTML5 Template Design for Blog

View: 443    Dowload: 1   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

File has been tested

Download  making-html5-template-design.rar (3.58 KB)

You need to Sign In to download the file making-html5-template-design.rar
If you do not have an account then Sign up for free here

This is right time to adopt HTML5 semantic markup tags into your website design. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav. HTML5 semantic markup elements that can convey the purpose of the element to developers, browser and search spider algorithms.

DOCTYPE
The most important deceleration element, this helps your browser to understand what kind of HTML version it is trying to parse.

<!DOCTYPE html>
HTML5 dropped type attribute 
<meta http-equiv=”Content-Type” content="text/html";>
to
<meta charset=”UTF-8”>

<link rel=”stylesheet” href=”style.css” type=”text/css”>
to
<link rel=”stylesheet” href=”style.css”>

You should avoid following tags and attributes in HTML5 

<font>, <center>,<frame> align, bgcolor, height, width, size, type
Step 1

Web layout divided into four horizontal parts are HearderNavSection and Footer

HTML Code

<header class='container'>1 Header</header>
<nav class='container'>2 Nav</nav>
<section class='container'>3 Main</section>
<footer class='container'>4 Footer</footer>
HTML5 Template Design for Blog.

CSS Code :

*{margin:0px; padding:0px}
header, footer, section, nav
{
display:blocks
}
.container
{
margin:0 auto; 
width:950px;
margin-top:20px
}
Step 2

Now working with an unorder list <ul> tag. 

<nav class='container' id='nav'>
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</nav>

HTML5 Template Design for Blog.

#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
Step 3

section (main part)  dividing into two vertical parts are section(article part) andaside(sidebar part)

<section class='container'>
<section id="content">Article</section>
<aside id='sidebar'>Sidebar</aside>
</section>
HTML5 Template Design for Blog.

CSS code :

#main
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}

Article Page
Here article title is the most important and top level, so title should be in <h1> tag.

<section id='content'>

<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description 
</p>
</article>

</section>
HTML5 Template Design for Blog.

Home Page
This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading. 

<section id='content'>

<article>
<header>
<h2>Article Title 1</h2>
</header>
<p>
Article Short Description 
</p>
</article>

<article>
<header>
<h2>Article Title 2</h2>
</header>
<p>
Article Short Description 
</p>
</article>

.......

</section>
 
HTML5 Template Design for Blog.
Modernizr

Modernizr is a JavaScript library that detects the availability of native implementations for next-generation Web Technologies. These technologies are new features that stem from the ongoing HTML5 and CSS3 specifications. 

Responsive Web Design using CSS3


HTML Code
For implementing lower version browser like Internet Explorer 7 and 8, you just include modernizr.min.js after style sheet inside header tag.

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width"> 
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>
<header class='container' id='header'>
Logo Part
</header>

<nav class='container' id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>DEMOS</a></li>
<li><a href='#'>PROJECT</a></li>
.....
.....
</ul>
</nav>

<section class='container' id='main'>
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>  
</article>
</section>
 
<aside id='sidebar'> 
</aside>
</section>

<footer class='container' id='footer'>
<p>
© 2009-2013 9lessons.info. 
</p>
</footer>
<body>
</html>

Now this code works fine with Internet Explorer lower version. 
style.css
Final CSS :

*{margin:0px; padding:0px}
header, footer,section,nav{display:blocks}
.container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
#main, #header, #nav
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
#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;
}

 

Making HTML5 Template Design for Blog

This is right time to adopt HTML5 semantic markup tags into your website design. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav

Posted on 16-02-2016 

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
File top downloads
Codetitle.net - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.net Develope by Vinagon .Ltd