Tuesday, April 17, 2012

HTML Advanced tutorial 17 : HTML Layouts

Website Layouts
Web page layout is very important to make your website look good.  Most websites have put their content in multiple columns For Example formatted like a magazine or newspaper. Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.

Using Tables
The simplest way of creating layouts is by using the HTML <table> tag. The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:

<html>
<body>
<table width="450" border="0">
<tr>
<td colspan="2" style="background-color:Red;">
<h1>Header of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD800;width:110px;text-align:top;">
<b>Menu Here</b>
</td>
<td style="background-color:#EEEEEE;height:220px;width:410px;text-align:top;">
Web content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2012 yoursite.com</td>
</tr>
</table>
</body>
</html>

The HTML code above will produce the following result.

Header of Web Page

Menu Here Web content goes here
Copyright © 2012 yoursite.com

Using Div Elements
The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout, creating the same result as in the previous (using table tag) example.

<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:Red;">
<h1 style="margin-bottom:0;">Header of Web Page</h1></div>
<div id="menu" style="background-color:#FFD800;height:200px;width:110px;float:left;">
<b>Menu</b>
</div>
<div id="content" style="background-color:#EEEEEE;height:220px;width:410px;float:left;">
Web content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 yoursite.com</div>
</div>
</body>
</html>

The HTML code above will produce the following result.
Web content goes here

The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file.


HTML Layout Tags

Tag Description
<table> Defines a table
<div> Defines a section in a document

HTML Advanced tutorial 18 : HTML Doctypes  >>
<<  HTML Beginner tutorial 16 : HTML Colors

No comments:

Post a Comment