Basic HTML Page layout using Div tags
A web page layout is made of multiple columns. These columns are treated as different sections of data. There are two most popular ways to create those columns in html page. One way is using <div> tag and another way is using HTML <table> tag.
Most of the website layout has one common header area where we place website logo or tagline (sometimes menu as well). Then we have main content section divided into two or three columns. Bottom of the webpage contains a common footer section, where we can place logo, copyright statement, menu or some other content.
In two columns we have one left or right sidebar area and one content area. In three columns page design, we have left sidebar area, main content area and then one right sidebar area.
Creating a HTML page layout using DIV tags
Let us create a two column layout along with header and footer area using DIV tags.
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Layout using Div</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:cyan; text-align:center">
This is website tagline
</div>
<div style="background-color:lightgreen; height:400px; width:30%; float:left;">
<b>Main Menu</b><br />
Link 1 <br />
Link 2 <br />
Link 3
</div>
<div style="background-color:orange; height:400px; width:70%; float:left;">
This is sample content.
</div>
<div style="background-color:lightblue; clear:both">
<center>
Copyright © TutorialsClass.com
</center>
</div>
</div>
</body>
</html>| Tutorials |
|---|
| No Content Found. |
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |