HTML - Layouts

  »   HTML  »   HTML Tutorial - Layouts / Creating a web page with layouts

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 of the right. This is the most classic layout for a website, and, in my opinion, 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>Aici poti sa pui un baner, logo, etc</td>
				</tr> 
			</table>
		
		</td>
	</tr>
	<tr height="200">
		<td bgcolor="white"> 
		
			<table id="navigation" title="Navigation" border="0">
				<tr>
					<td>Link-uri!</td>
				</tr>
				<tr>
					<td>Link-uri!</td>
				</tr>
				<tr>
					<td>Link-uri!</td>
				</tr>
			</table> 
			
		</td>
		<td bgcolor="white">
			
			<table title="Content" id="content" border="0">
				<tr>
					<td>Continutul sitului va fi plasat aici</td>
				</tr> 
			</table> 
			
		</td>
	</tr>
</table>

This is a basic approach. As you will see if you use these layouts on your web page, it will become very complex as you add more content. Nevertheless, you must specify the height and the width. The more you will be more specific in establishing these attributes and not only these, the fewer 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.