HTML Layouts
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 Layouts - Using Tables
The simplest way of creating layouts is by using the HTML 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="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 wirosableng.com</td>
</tr>
</table>
</body>
</html>
The Result
Main Title of Web Page | |
Menu HTML CSS JavaScript | Content goes here |
Copyright © 2011 Wirosableng.com | |
HTML Layouts - 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 example:
<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 wirosableng.com</div>
</div>
</body>
</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 wirosableng.com</div>
</div>
</body>
</html>
The Result
www.beternak-hamster.blogspotcom
Content goes here
0 comments:
Posting Komentar