HTML Layouts
HTML layout is a very important part of your website’s success. Although there are many ways in which to design a web page layout, there are a few basic standards that many websites use.
Website Layouts
The most popular website layout contains columns that are formatted like a newspaper. This type of design is very popular, as it enables the website to include sections of information with a link to additional information.
The easy way to create a layout with rows and columns is to use HTML tables. Although not the “correct” way of doing things, many sites have been using this technique for years.
HTML Table Layout 1
Header |
|
| Content |
Menu Page 1 Page 2 Page 3 Page 4 |
| Footer | |
HTML Code
<table width="525">
<tr>
<td colspan="2" style="background-color:#FF9900;">
<h1>Header</h1>
</td>
</tr>
<tr>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content</td>
<td style="background-color:#FFCC66;width:125px;" valign="top">
<b>Menu<br />
</b><br>
Page 1<br />
Page 2<br />
Page 3<br />
Page 4 </td>
</tr>
<tr>
<td colspan="2" style="background-color:#FF9900;">
Footer</td>
</tr>
</table>
HTML Table Layout 2
Header |
|
|
Menu Page 1 Page 2 Page 3 Page 4 |
Content |
| Footer | |
HTML Code
<table width="525">
<tr>
<td colspan="2" style="background-color:#FF9900;">
<h1>Header</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFCC66;width:125px;" valign="top">
<b>Menu<br />
</b><br>
Page 1<br />
Page 2<br />
Page 3<br />
Page 4 </td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FF9900;">
Footer</td>
</tr>
</table>
Web Page Layouts – Using <div> Elements
The div element is a container used for content within a document and for laying out a web page using CSS.
Columns are created using the <div> element and CSS for formatting.
The following examples use the div elements to create a rows and columns layout.
HTML Layout 1
Header
HTML code
<div id="container" style="width:525px">
<div id="header" style="background-color:#FF9900;">
<h1 style="margin-bottom:0;">Header</h1>
</div>
<div id="content" style="background-color:#EEEEEE;height:225px;width:400px;float:left;">
Content</div>
<div id="menu" style="background-color:#FFCC66;height:225px;width:125px;float:right;">
<p><b>Menu<br />
</b><br>
Page 1<br />
Page 2<br />
Page 3<br />
Page 4 </p>
</div>
<div id="footer" style="background-color:#FF9900;clear:both;"> Footer
</div>
</div>
HTML Layout 2
Header
HTML Code
<div id="container" style="width:525px">
<div id="header" style="background-color:#FF9900;">
<h1 style="margin-bottom:0;">Header</h1>
</div>
<div id="menu" style="background-color:#FFCC66;height:225px;width:125px;float:left;">
<p><b>Menu<br />
</b><br>
Page 1<br />
Page 2<br />
Page 3<br />
Page 4 </p>
</div>
<div id="content" style="background-color:#EEEEEE;height:225px;width:400px;float:right;">
Content</div>
<div id="footer" style="background-color:#FF9900;clear:both;"> Footer
</div>
</div>
This concludes the HTML Layouts section. For additional information, visit the HTML Website Templates section.