Until now we have learn about the basic tags of a webpage. Now let’s start with a basic structure of a webpage. We will first learn which we are considering as a basic structure here. The below image we are considering as a basic structure.
Before we start developing and explaining I would love to describe why I am telling this a basic structure of a webpage. A basic webpage usually have 3 basic sections, the header section, the content section and a footer section. As we can see from the above, this page has all those three sections as we require.
If we want to develop this structure we need to find out the sections and we should structure those according to requirements. So let’s do this.
<html>
<head>
<title></title>
</head>
<body>
<div class=”warp”>
</div>
</body>
</html>
This is the outer line which covers the whole webpage. That’s why I picked the class name “warp”. Usually this kind of class names should be something so that a developer can easily understands the meaning of this class name.
Now we will build the top section below.
<div class=”header”>
</div>
This will be the for the header section where the logo and the menu is located. Let’s create two more div for them.
<div class=”header”>
<div class=”brand”></div>
<div class=”tmenu”></div>
</div>
So this will solve the header section with the components required. Let’s move to the next step.
Here we need to define one div to put the content. So the code will be same as below.
<div class=”cont”>
</div>
After this we only left one section which is footer. This is simple one more div to declare. Which will be:
<div class=”footer”>
</div>
Well this is the last div we needed to declare. Now there are several ways to understand which is what. The best way to understand this is to put the comment. How can we put comment to a webpage! Simple as below:
<! — put the comment here – – >
Putting <!- -sign means this is the beginning of the comment and –> this means the ending of the comment.
So let’s see the full form of our webpage with necessary comments.
<html>
<head>
<title></title>
</head>
<body>
<div class=”warp”>
<! – Header start – – >
<div class=”header”>
<div class=”brand”></div>
<div class=”tmenu”></div>
</div>
<! – Header end- – >
<! – content start – – >
<div class=”cont”>
</div>
<! – content end – – >
<! – Footer start – – >
<div class=”footer”>
</div>
<! – Footer end – – >
</div>
</body>
</html>
So this is our first basic webpage structure we will learn about the other structures in our next articles. As we can see this is just a html structure of a webpage we did not arranged it properly. So we will learn about the CSS which will arrange it in our next article also.
