Techcss
Untitled Document

HTML Layout

Layout of web page is a primary need to design or create a web page. The layout is the basic skeleton of any web page.

The HTML layout can be structured by using <table> tag or <div> tag.

Layout using <table>

Designing a layout of web page using <table> is a long time practice since the first era of HTML / web page.

Example:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The title of Web page</title>
</head>

<body>
<table width="100%" height="570" border="0">
<tr>
<td height="200" colspan="2" bgcolor="#DEB887">
<h1>Name of Web site / Organization</h1> </td>
</tr>
<tr>
<td width="20%" height="294" bgcolor="#FFE4C4">
<h3>Menu Section</h3>
</td>
<td width="80%">The content section</td>
</tr>
<tr>
<td colspan="2" height="100" bgcolor="#DEB887"><h4>Footer Section</h4></td>
</tr>
</table>
</body>
</html>
Output:

Name of Web site / Organization

Menu Section The content section
Footer Section


HTML Layout using <div>

<div> is a most useful block element of HTML used to build the layout of web page as well as define any section to contain any media, text or image.

A simple example of HTML layout using <div>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The title of Web page</title>
</head>
<body>
<div id="container" style="width:100%; height:700px">

<div id="header" style="background-color:#DEB887; height:200px">
<h1 style="margin-bottom:0;">Name of Web site / Organization</h1></div>

<div id="menu" style="background-color:#FFE4C4;height:400px;width:20%;float:left;">
<b>Menu</b>
</div>

<div id="content" style="height:400px;width:80%;float:left;">
The Content.....</div>

<div id="footer" style="background-color:#DEB887;clear:both;text-align:center; height:100px">Footer</div>

</div>
</body>
</html>
Output:
The Content.....