Post
Ask Question

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 Website Template
 
HTML File
  1. <html>  
  2. <!-- HTML main head tells that we are going to use html in browser -->  
  3. <head>  
  4.     <!-- hrad tag-->  
  5.     <title>  
  6.         <!-- title tag-->  
  7.         Ehtesham's Template </title>  
  8.     <link href="style.css" rel="stylesheet" type="text/css" />  
  9.     <!--Here bind CSS file with it. -->  
  10. </head>  
  11. <body class="body">  
  12.     <!-- Body tag and in this body class call in the CSS file-->  
  13.     <div class="wrapper">  
  14.         <!--div tag in this main wrapper class calls in CSS file -->  
  15.         <div class="header">  
  16.             <!-- Header div-->  
  17.             <div class="header-logo">  
  18.             </div>  
  19.             <div class="heafer-text">  
  20.             </div>  
  21.             <div class="header-mini-logo">  
  22.                 <!-- here is link tag in the header mini div tag-->  
  23.                 <a href="#">  
  24.                     <img src="facebook.png" alt="" title="Follow us on facebook" border="0" /></a>  
  25.                 <a href="#">  
  26.                     <img src="linkedin.png" alt="" title="Follow us on linkedin" border="0" /></a>  
  27.                 <a href="#">  
  28.                     <img src="twitter.png" alt="" title="Follow us on twitter" border="0" /></a>  
  29.                 <a href="#">  
  30.                     <img src="flickr.png" alt="" title="Follow us on flicker" border="0" /></a>  
  31.             </div>  
  32.         </div>  
  33.         <div class="navbar">  
  34.             <!-- This is bavigation bar-->  
  35.             <ul>  
  36.                 <!-- here us list tag-->  
  37.                 <li><a href="#" title="home">Home</a></li>  
  38.                 <li><a href="#" title="about">About</a></li>  
  39.                 <li><a href="#" title="contact us">Contact us </a></li>  
  40.                 <li><a href="#" title="services">Services</a></li>  
  41.                 <li><a href="#" title="clients">Clients</a></li>  
  42.                 <li><a href="#" title="projects">Projects</a></li>  
  43.                 <li><a href="#" title="get in touch">Get in touch</a></li>  
  44.             </ul>  
  45.         </div>  
  46.         <div class="mainbody">  
  47.             <div class="mainbody-center">  
  48.                 <h1 class="h1">  
  49.                     Template License</h1>  
  50.                 <!-- H1 tag-->  
  51.                 <p class="p">  
  52.                     Posted by Owner | Filed under templates, internet</p>  
  53.                 <br>  
  54.                 <!-- Paragraph tag-->  
  55.                 <p class="p">  
  56.                     This is a free CSS website template by Etesham Mehmood. This work is distributed  
  57.                     under the Creative Commons Attribution 3.0 License, which means that you are free  
  58.                     to use it for any personal or commercial purpose provided you credit me in the form  
  59.                     of a link back to <a href="https://www.facebook.com/shami17">Ehtesham Mehmood</a>  
  60.                 </p>  
  61.                 <br>  
  62.                 Read more | March 16, 2015  
  63.                 <br>  
  64.                 <br>  
  65.                 <br>  
  66.                 <h1 class="h1">  
  67.                     Template License</h1>  
  68.                 <p class="p">  
  69.                     Posted by Owner | Filed under templates, internet</p>  
  70.                 <br>  
  71.                 <p class="p">  
  72.                     This is a free CSS website template by Etesham Mehmood. This work is distributed  
  73.                     under the Creative Commons Attribution 3.0 License, which means that you are free  
  74.                     to use it for any personal or commercial purpose provided you credit me in the form  
  75.                     of a link back to <a href="https://www.facebook.com/shami17">Ehtesham Mehmood</a>  
  76.                 </p>  
  77.                 <br>  
  78.                 Read more | March 16, 2015  
  79.             </div>  
  80.             <!-- Side bar menu-->  
  81.             <div class="mainbody-right">  
  82.                 <center>  
  83.                     <h2 class="h2">  
  84.                         SideBar Menu</h2>  
  85.                 </center>  
  86.                 <ul>  
  87.                     <li><a href="#">home</a></li>  
  88.                     <li><a href="#">about</a></li>  
  89.                     <li><a href="#">services</a></li>  
  90.                     <li><a href="#">clients</a></li>  
  91.                     <li><a href="#">projects</a></li>  
  92.                     <li><a href="#">request a quote </a></li>  
  93.                     <li><a href="#">get in touch</a></li>  
  94.                 </ul>  
  95.             </div>  
  96.         </div>  
  97.     </div>  
  98.     <!-- Here is Footer-->  
  99.     <div class="footer">  
  100.         <p>  
  101.             Template designed by:   <a href="https://www.facebook.com/shami17">Ehtesham Mehmood</a></p>  
  102.     </div>  
  103. </body>  
  104. </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 (.).
  1. @charset "utf-8";  
  2.   
  3. /* CSS Document */  
  4.   
  5. .h1 {  
  6.     color: #996;  
  7. }  
  8.   
  9. .h2 {  
  10.     color: #996;  
  11. }  
  12.   
  13. .p {  
  14.     color: #9C9;  
  15. }  
  16.   
  17. .body {  
  18.     background-image: url(bg.jpg);  
  19. }  
  20.   
  21. .wrapper {  
  22.     width: 880px;  
  23.     height: 950px;  
  24.     overflow: hidden;  
  25.     margin: 30px auto 30px auto;  
  26.     position: relative;  
  27. }  
  28.   
  29. .header {  
  30.     width: 880px;  
  31.     height: 130px;  
  32. }  
  33.   
  34. .header-logo {  
  35.     width: 183px;  
  36.     height: 120px;  
  37.     background-image: url(sma-solar-technology-logo.png);  
  38.     background-image: no-repeat;  
  39.     float: left;  
  40. }  
  41.   
  42. .header-text {  
  43.     width: 100px;  
  44.     height: 120px;  
  45.     margin: 0 5px;  
  46.     float: left;  
  47. }  
  48.   
  49. .header-mini-logo {  
  50.     width: 84px;  
  51.     height: 16px;  
  52.     float: right;  
  53.     margin: 5px;  
  54. }  
  55.   
  56. .navbar {  
  57.     width: 880px;  
  58.     height: 40px;  
  59.     background-image: url(menu_bg.jpg);  
  60. }  
  61.   
  62. .navbar ul {  
  63.     width: auto;  
  64.     float: left;  
  65.     display: block;  
  66.     list-style: none;  
  67.     padding: 2px 0 0 130px;  
  68.     margin: 0px;  
  69.     text-align: center;  
  70. }  
  71.   
  72. .navbar ul li {  
  73.     display: inline;  
  74.     padding: 0px;  
  75.     margin: 0px;  
  76.     height: 37px;  
  77. }  
  78.   
  79. .navbar ul li a {  
  80.     display: block;  
  81.     padding: 0px;  
  82.     padding: 0 17px 0 17px;  
  83.     float: left;  
  84.     text-decoration: none;  
  85.     text-align: center;  
  86.     color: #fff;  
  87.     font-size: 13px;  
  88.     line-height: 34px;  
  89. }  
  90.   
  91. .navbar ul li a:hover {  
  92.     color: #0C9;  
  93. }  
  94.   
  95. .mainbody {  
  96.     width: 870px;  
  97.     height: 750px;  
  98.     margin: 15px 2px 0px 2px;  
  99.     border-radius: 10px;  
  100.     background-color: #fff;  
  101. }  
  102.   
  103. .mainbody-right {  
  104.     width: 150px;  
  105.     height: 300px;  
  106.     border-radius: 10px;  
  107.     margin: 10px 10px 0px 10px;  
  108.     float: right;  
  109. }  
  110.   
  111. .mainbody-right a {  
  112.     color: #996;  
  113.     text-decoration: none;  
  114. }  
  115.   
  116. .mainbody-right a:hover {  
  117.     color: #0C9;  
  118.     text-decoration: underline;  
  119. }  
  120.   
  121. .mainbody-center {  
  122.     width: 670px;  
  123.     height: auto;  
  124.     border-radius: 10px;  
  125.     margin: 10px 10px 0px 10px;  
  126.     float: left;  
  127. }  
  128.   
  129. .footer {  
  130.     width: 880px;  
  131.     height: 40px;  
  132.     background-image: url(menu_bg.jpg);  
  133.     margin: 10px auto 20px auto;  
  134. }  
  135.   
  136. .footer p {  
  137.     color: #fff;  
  138.     margin: 2px;  
  139.     padding: 3px;  
  140. }  
  141.   
  142. .footer a {  
  143.     color: #fff;  
  144.     margin: 2px;  
  145.     padding: 3px;  
  146.     text-decoration: none;  
  147. }  
  148.   
  149. .footer a:hover {  
  150.     color: #0C9;  
  151.     text-decoration: underline;  
  152. }  
  153.   
  154. .footer-right {  
  155.     width: 80px;  
  156.     height: 40px;  
  157.     float: right;  
  158. }  
  159.   
  160. .footer-right a {  
  161.     color: #fff;  
  162. } 
I have also attached the full source code of this web page template with pictures so you guys can download it and use it.


Similar Articles