HTML layouts
The cascading stylesheet or CSS is used to create layouts in a website or in an HTML document to add the background or to deal or position with the elements. CSS is also used to add colors to the page, to make the website look attractive.
HTML Layout Components
An HTML document has the following components:
- Header
- Main body
- Footer
The main body can be further divided into three parts that is left area comprising of table of contents, pictures etc, the centre having the main description about the topic and the right part that sometimes have advertisements, banners.
The components of HTML document have been demonstrated in the following example:
Header |
||
Left part having table of contents etc. |
Main Content |
Right part having advertisements |
Footer |
An HTML Document
This is a basic view of an HTML document containing header, footer and contents. Now let us take a look at the layout of HTML document using tables and div elements.
HTML layout using tables
To create layouts in an HTML document we use the TABLE element. Multiple rows and columns can be inserted by using the <table> tag.
EXAMPLE
The following example uses COLSPAN that is used to specify that how many columns of the table are going to be spanned by the cell, its default value is 1. The columns are counted from the left side of the table. All the tags that are used below are explained in the previous sections.
Consider the following example that uses the TABLE element with 3 rows and 2 columns:
<html>
<head>
<title> Layout of an HTML document using TABLES </title>
</head>
<body>
<table width = “100%” border = “0”>
<tr>
<td colspan=”2″ bgcolor = “#FF0000”>
<h1> Heading 1 </h1>
</td>
</tr>
<tr valign = “top”>
<td bgcolor = “#FFFF00” width = “50”>
<b> Table of Contents </b> <br />
Content <br />
Content <br />
Content
</td>
<td bgcolor = “#00FF00” width = “100” height = “200”>
Main Body of HTML Document
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor = “#008000”>
<center>
Footer
</center>
</td>
</tr>
</table>
</body>
</html>
The result is as follows:
The color is given to each column and row using bgcolor attribute.
HTML layout using DIV
DIV (block level element) is used to mark the block of document as a group. Then this element is used to specify the properties of this group. The DIV element does not affect the appearance of the HTML document. The use of DIV has been explained before. Let us consider how DIV is used to create layouts in an HTML document.
EXAMPLE
<html>
<head>
<title> Layout of an HTML document using DIV </title>
</head>
<body>
<div style=”width: 100%”>
<div style=”background-color: #0000FF; width: 100%”>
<h1> Heading 1 </h1>
</div>
<div style=”background-color: #800080; height: 200px; width: 100px; float: left;”>
<div> <b> Table of Contents </b> </div>
Content <br />
Content <br />
Content
</div>
<div style=”background-color: #800000; height: 200px; width: 350px; float: left;”>
<p>Main body of HTML document</p>
</div>
<div style=”background-color: #008080; height: 200px; width: 200px; float: right;”>
<div> <b> Advertisement Area </b> </div>
Contents <br />
Contents <br />
</div>
<div style=”background-color: #000080; clear: both”>
<center>
Footer
</center>
</div>
</div>
</body>
</html>
The result is as follows: