Layout
Multiple columns is 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.
HTML Layout 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:
Code
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 WorldWebDesigner.Blogspot.com</div>
</div>
</body>
</html>
The HTML code above will produce the following result:
Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
Web page layout is very important to make your website look good.
Design your webpage layout very carefully
Website Layouts
Most websites have put their content in multiple columns (formatted like a magazine or newspaper).Multiple columns is 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.
HTML Layout 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:
Code
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 WorldWebDesigner.Blogspot.com</div>
</div>
</body>
</html>
The HTML code above will produce the following result:
Main Title of Web Page | |
| Menu HTML CSS JavaScript | Content goes here |
| Copyright © 2011 WorldWebDesigner.Blogspot.com | |
Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
No comments:
Post a Comment