HTML Project, Complete webpage source code

A Simple Table Based Webpage Layout

This is the complete source code of this project. You can view the output of this Code Here .

You might have some problem on small monitor. If you are not able to view the source code completely. Please see printer friendly version of this page. The link is at the bottom of this page.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML Project</title>

<style type = "text/css">
body
{
margin: 0px;
}

.content
{
border-left: 1px solid #000000;
}

.table
{
border: 1px solid #000000;
}

.footer
{
border-top: 1px solid #000000;
}
</style>

</head>

<body bgcolor = "#FFEDB8">
<center>
<table width = "800" cellpadding = "15" cellspacing = "0" class = table bordercolor = "#FFEDB8"
bgcolor = "#F2F2F2">
<tr align = center valign = "middle" bgcolor = "#856300"
bordercolor = "#000000"><td colspan = "2" height = "100">

<font color = "#000000" size = "7"><img src = "logo.gif" alt = "Alternative Text">

<br>
<font color = "#ffffff" size = 2><u>Html Project</u></font> </font>

</td>
</tr>

<tr bordercolor = "#F2F2F2">
<td width = 150 valign = "top">
<a href = "#">Home</a>

<br>
<a href = "#">About Us</a>

<br>
<a href = "#">Login</a>

<br>
<a href = "#">Register</a>

<br>
<hr color = "#000000" size = "1" width = "100%">
<p align = "justify">

This page is a complete page layout project in HTML. This project uses the basic tags of html.
This layout is created using the HTML tables only.
</p>
</td>

<td class = content align = "justify">
<p>
<center><u><h3>HTML Web Page Layout</h3></u></center>

We want one heading and two columns. We can achieve this in the following two ways.

<ol type = "a">
<li> Using single table.</li>

<li> Using multiple tables.</li>

</ol>

These two methods are explained as below.

<ol type = "A">
<li> Using single tables</li>

<ul type = "square">

<li> Divide the page in two rows. Assign the top row a fixed height. Assign the first
row a column span of two. </li>

<li>Insert two cells in the bottom row. Assign a fixed width to the cell on left and
the rest of the length to the right cell. Since the left cell is to be used for
navigation purpose only, we assign it a smaller length to it. </li>
</ul>

<li> Using Multiple tables

<ul type = "square">

<li> Divide the page in two rows. Assign the top row a fixed height. </li>

<li> Insert a new table with one single row will two cells, inside the second row. </li>
</ul>

</li>
</ol>

The first method is recommended because it uses less code. You can use the third row in each
of the methods for footer. Alternatively the footer can be placed under the table.

<br>
This is the first part of the three web pages we will be creating as our next page.
</p>
</td>

</tr>
</table>

<br>
<a href = "#"><font size "2">Disclaimer</font></a>

</center>
</body>
</html>