In this post i will show you how to create a basic HTML page . Here i called it as a template because a template is one that remains same throughout the website , only the content in your pages varies. Templates are necessary to create because we need not code all the markups again for each page , if we have a template decided then we can just keep working on that template every time when we add pages to our site. Mainly a template consists of a header , nav ,aside ,section, article, footer. |
 |
| A Basic template for a website |
Header generally contains the name of our website .
Navigation generally contains the main navigation to our site
Aside generally contains sub navigation and even we can place ads mostly right side aside tag is prefered for ads and left side one for sub navigation
Section generally contains the main content of a site.
Articles generally seperates 2 different posts/topics.
Footer generally contains the copyrights , license and any other such information
Lets now create this basic template ,
1) Open a create a new html page , by opening a new notepad file or if u have any advanced tools like notepad++ , sublime go ahead open with them and save it as .html extension.
Now add the following code in that file
<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="codingcorner-tuts.css">
<title>Give a title to your page!</title>
</head>
<body>
<div id="wrapper">
<header>
Name of Your Website
</header>
<nav id="menu">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Menu Item 1</li>
</a>
<a href="#">
<li>Menu Item 2</li>
</a>
<a href="#">
<li>Menu Item 3</li>
</a>
<a href="#">
<li>Menu Item 4</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</nav>
<br><br><br>
<img src="banner.jpg" width="100%" height="200em"/></a>
<div id="middlecontent">
<aside>
Ads or some other side navigation
</aside>
<section>
<article>
<p> This is the main section of your page , here all the content in your site is placed.
<h3> C program on Simple Intrest </h3>
<pre>#include <stdio.h>
#include <stdlib.h>
int main()
{
float SI,p,t,r;
printf("Enter Principle Amount: \t");
scanf("%f",&p);
printf("Enter Time Period: \t\t");
scanf("%f",&t);
printf("Enter Rate Of Interest: \t");
scanf("%f",&r);
SI = (p*t*r)/100;
printf("Simple Interest is \t\t%f",SI);
return 0;
}</pre>
</article>
<article>
<p> You can write another article here.
</article>
</section>
<aside>
Ads or some other navigation
</aside>
</div>
<footer>
This is a footer
</footer>
</div>
</body>
</html>
Now add a css file to it , create a new file and save it as .css extension add the following code in that file
body{
font-size:100%;
background-color:#000;
}
#wrapper{
width:100%;
}
header{
font-size:2em;
color:#FFF;
}
nav{
text-align:center;
}
#menu li{
width:14%;
margin:0.1%;
background-color:#FFF;
float:left;
font-size:1.2em;
color:#00F;
}
#menu li:hover{
background-color:#E8EBEA;
}
section{
width:58%;
background-color: #FFF;
margin:2%;
padding:0.2em;
}
article{
padding:0.4em;
}
aside ul a{
text-decoration:none;
color:#00F;
}
aside ul li{
list-style:none;
}
aside ul li:hover{
color:#777;
}
aside{
width:16%;
padding:0.2em;
margin:1%;
background-color:#EEE;
display:-webkit-box;
}
#middlecontent{
display:-webkit-box;
background-color:#222;
}
footer{
background-color:#FFF;
color:#f00;float:none;
text-align:center;
}Now OUTPUT will be something like : |
| HTML - A Basic Template |
