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:
These are the classes that I have used in the HTML code. In CSS a class starts with a dot (.).
  1. @charset "utf-8";
  3. /* CSS Document */
  5. .h1 {
  6. color: #996;
  7. }
  9. .h2 {
  10. color: #996;
  11. }
  13. .p {
  14. color: #9C9;
  15. }
  17. .body {
  18. background-image: url(bg.jpg);
  19. }
  21. .wrapper {
  22. width: 880px;
  23. height: 950px;
  24. overflow: hidden;
  25. margin: 30px auto 30px auto;
  26. position: relative;
  27. }
  29. .header {
  30. width: 880px;
  31. height: 130px;
  32. }
  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. }
  42. .header-text {
  43. width: 100px;
  44. height: 120px;
  45. margin: 0 5px;
  46. float: left;
  47. }
  49. .header-mini-logo {
  50. width: 84px;
  51. height: 16px;
  52. float: right;
  53. margin: 5px;
  54. }
  56. .navbar {
  57. width: 880px;
  58. height: 40px;
  59. background-image: url(menu_bg.jpg);
  60. }
  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. }
  72. .navbar ul li {
  73. display: inline;
  74. padding: 0px;
  75. margin: 0px;
  76. height: 37px;
  77. }
  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. }
  91. .navbar ul li a:hover {
  92. color: #0C9;
  93. }
  95. .mainbody {
  96. width: 870px;
  97. height: 750px;
  98. margin: 15px 2px 0px 2px;
  99. border-radius: 10px;
  100. background-color: #fff;
  101. }
  103. .mainbody-right {
  104. width: 150px;
  105. height: 300px;
  106. border-radius: 10px;
  107. margin: 10px 10px 0px 10px;
  108. float: right;
  109. }
  111. .mainbody-right a {
  112. color: #996;
  113. text-decoration: none;
  114. }
  116. .mainbody-right a:hover {
  117. color: #0C9;
  118. text-decoration: underline;
  119. }
  121. .mainbody-center {
  122. width: 670px;
  123. height: auto;
  124. border-radius: 10px;
  125. margin: 10px 10px 0px 10px;
  126. float: left;
  127. }
  129. .footer {
  130. width: 880px;
  131. height: 40px;
  132. background-image: url(menu_bg.jpg);
  133. margin: 10px auto 20px auto;
  134. }
  136. .footer p {
  137. color: #fff;
  138. margin: 2px;
  139. padding: 3px;
  140. }
  142. .footer a {
  143. color: #fff;
  144. margin: 2px;
  145. padding: 3px;
  146. text-decoration: none;
  147. }
  149. .footer a:hover {
  150. color: #0C9;
  151. text-decoration: underline;
  152. }
  154. .footer-right {
  155. width: 80px;
  156. height: 40px;
  157. float: right;
  158. }
  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.