Creating a Website Template in HTML and CSS

HTML Website Template

Today in this article I will show you how to make a simple basic website template using HTML and CSS. This article will help those who understand the basics of HTML and CSS and provide help to the beginners of Web Development.

Diagram

HTML File

<html>
<head>
<title>
Ehtesham's Template </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">
<div class="wrapper">
<div class="header">
<div class="header-logo">
</div>
<div class="heafer-text">
</div>
<div class="header-mini-logo">
<a href="#">
<img src="facebook.png" alt="" title="Follow us on facebook" border="0" /></a>
<a href="#">
<img src="linkedin.png" alt="" title="Follow us on linkedin" border="0" /></a>
<a href="#">
<img src="twitter.png" alt="" title="Follow us on twitter" border="0" /></a>
<a href="#">
<img src="flickr.png" alt="" title="Follow us on flicker" border="0" /></a>
</div>
</div>
<div class="navbar">
<ul>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="about">About</a></li>
<li><a href="#" title="contact us">Contact us </a></li>
<li><a href="#" title="services">Services</a></li>
<li><a href="#" title="clients">Clients</a></li>
<li><a href="#" title="projects">Projects</a></li>
<li><a href="#" title="get in touch">Get in touch</a></li>
</ul>
</div>
<div class="mainbody">
<div class="mainbody-center">
<h1 class="h1">
Template License</h1>
<p class="p">
Posted by Owner | Filed under templates, internet</p>
<br>
<p class="p">
This is a free CSS website template by Etesham Mehmood. This work is distributed
under the Creative Commons Attribution 3.0 License, which means that you are free
to use it for any personal or commercial purpose provided you credit me in the form
of a link back to <a href="https://www.facebook.com/shami17">Ehtesham Mehmood</a>
</p>
<br>
Read more | March 16, 2015
<br>
<br>
<br>
<h1 class="h1">
Template License</h1>
<p class="p">
Posted by Owner | Filed under templates, internet</p>
<br>
<p class="p">
This is a free CSS website template by Etesham Mehmood. This work is distributed
under the Creative Commons Attribution 3.0 License, which means that you are free
to use it for any personal or commercial purpose provided you credit me in the form
of a link back to <a href="https://www.facebook.com/shami17">Ehtesham Mehmood</a>
</p>
<br>
Read more | March 16, 2015
</div>
<div class="mainbody-right">
<center>
<h2 class="h2">
SideBar Menu</h2>
</center>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">clients</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">request a quote </a></li>
<li><a href="#">get in touch</a></li>
</ul>
</div>
</div>
</div>
<div class="footer">
<p>
Template designed by: <a href="https://www.facebook.com/shami17">Ehtesham Mehmood</a></p>
</div>
</body>
</html>

CSS File

First, the following introduces CSS:

CSS stands for Cascading Style Sheets.
Styles define how to display HTML elements.
Styles were added to HTML 4.0 to solve a problem.
External Style Sheets can save a lot of work.
External Style Sheets are stored in CSS files.
CSS makes websites look good.

These are the classes that I have used in the HTML code. In CSS a class starts with a dot (.).

@charset "utf-8";
/* CSS Document */
.h1 {
color: #996;
}
.h2 {
color: #996;
}
.p {
color: #9C9;
}
.body {
background-image: url(bg.jpg);
}
.wrapper {
width: 880px;
height: 950px;
overflow: hidden;
margin: 30px auto 30px auto;
position: relative;
}
.header {
width: 880px;
height: 130px;
}
.header-logo {
width: 183px;
height: 120px;
background-image: url(sma-solar-technology-logo.png);
background-image: no-repeat;
float: left;
}
.header-text {
width: 100px;
height: 120px;
margin: 0 5px;
float: left;
}
.header-mini-logo {
width: 84px;
height: 16px;
float: right;
margin: 5px;
}
.navbar {
width: 880px;
height: 40px;
background-image: url(menu_bg.jpg);
}
.navbar ul {
width: auto;
float: left;
display: block;
list-style: none;
padding: 2px 0 0 130px;
margin: 0px;
text-align: center;
}
.navbar ul li {
display: inline;
padding: 0px;
margin: 0px;
height: 37px;
}
.navbar ul li a {
display: block;
padding: 0px;
padding: 0 17px 0 17px;
float: left;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 13px;
line-height: 34px;
}
.navbar ul li a:hover {
color: #0C9;
}
.mainbody {
width: 870px;
height: 750px;
margin: 15px 2px 0px 2px;
border-radius: 10px;
background-color: #fff;
}
.mainbody-right {
width: 150px;
height: 300px;
border-radius: 10px;
margin: 10px 10px 0px 10px;
float: right;
}
.mainbody-right a {
color: #996;
text-decoration: none;
}
.mainbody-right a:hover {
color: #0C9;
text-decoration: underline;
}
.mainbody-center {
width: 670px;
height: auto;
border-radius: 10px;
margin: 10px 10px 0px 10px;
float: left;
}
.footer {
width: 880px;
height: 40px;
background-image: url(menu_bg.jpg);
margin: 10px auto 20px auto;
}
.footer p {
color: #fff;
margin: 2px;
padding: 3px;
}
.footer a {
color: #fff;
margin: 2px;
padding: 3px;
text-decoration: none;
}
.footer a:hover {
color: #0C9;
text-decoration: underline;
}
.footer-right {
width: 80px;
height: 40px;
float: right;
}
.footer-right a {
color: #fff;
}

I have also attached the full source code of this web page template with pictures so you guys can download it and use it.