Next Chapter »

HTML Tutorial - HTML Layouts


HTML Layouts are widely used by almost all websites to give their webages a uniform and organized way. All the webaites have been designed to look like as magazine or newspaper. This is done by using the <table> tag or <div> tag. Also, the CSS which plays a main role in positioning the HTML elememts and to define different color of the HTML elememts.

HTML Example using the <div> Tag


Here <div> tag is used to position the HTML elements and CSS used gives background color to the HTML elements. Shown below is an example of Layout using <div> tag.

HTML Example for Layout 
<!DOCTYPE html>
<html>
<body>

<div style="width:550px">

<div style="background-color:#666633;height:50px;">
<h1 > Web Page Title goes here..</h1></div>

<div style="background-color:#91916C;height:250px;width:100px;float:left;">
<b>Main Menu</b><br>
HTML<br>
JavaScript<br>
SQL<br>
</div>

<div style="background-color:#BEBEBE;height:250px;width:450px;float:left;">
Your text content here</div>

<div style="background-color:#666633;clear:both;text-align:center;">
Copyright &copy; FundasMadeEasy. </div>

</div>
 
</body>
</html>

To edit the above code and see the result



For the Layout code shown above, HTML result is as shown below.


HTML Example using the <table> Tag


Here <table> tag is used to position the HTML elements and CSS used gives background color to the HTML elements. Shown below is an example of Layout using <div> tag.

HTML Example for Layout 
<!DOCTYPE html>
<html>
<body>

<table width="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:#666633;">
<h1>Web Page Title goes here..</h1>
</td>
</tr>

<tr>
<td style="background-color:#91916C;width:100px;" valign="top">
<b>Main Menu</b><br>
HTML<br>
JavaScript<br />
SQL<br>
</td>
<td style="background-color:#BEBEBE;height:250px;width:450px;" valign="top">
Your text content here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#666633;text-align:center;">
Copyright &copy; FundasMadeEasy.</td>
</tr>
</table>

</body>
</html>

To edit the above code and see the result



For the Layout code shown above, HTML result is as shown below.



Note: The CSS used in the Layouts can be moved to an external file and can be used as a single style sheet for all the webpages in the website. By doing this it helps to easily maintain and change the CSS code.

Next Chapter »