HTML - Diseños de página

  »   HTML  »   Tutorial HTML - Diseños de página

HTML - Standard layout

A standard layout is composed of a banner in the upper part of the page, a menu in the left part, and the content zone in the middle or in the right. This is the most classic layout for a web site, and in fact, a representative model.

A layout does not have many options. On the other side, a table is very useful. In a table you can add almost every element, even another table.

html<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400">
	<tr height="50">
		<td colspan="2" bgcolor="white"> 
		
			<table title="Banner" id="banner" border="0"> 
				<tr>
					<td>Here you can put a baner, logo, etc</td>
				</tr> 
			</table>
		
		</td>
	</tr>
	<tr height="200">
		<td bgcolor="white"> 
		
			<table id="navigation" title="Navigation" border="0">
				<tr>
					<td>Links!</td>
				</tr>
				<tr>
					<td>Links!</td>
				</tr>
				<tr>
					<td>Links!</td>
				</tr>
			</table> 
			
		</td>
		<td bgcolor="white">
			
			<table title="Content" id="content" border="0">
				<tr>
					<td>Content will be placed here</td>
				</tr> 
			</table> 
			
		</td>
	</tr>
</table>

This is a basic approach. As you will see if you use these layouts in your web page, it will become very complex as you add more content. Nevertheless, it is very important that you specify the height and the width. The more you will be more specific in establishing these attributes and not only these, the less bugs you will have.

Study this code a little bit, organize it so that you will be able to understand it. Copy it in a new document to see it.