Posts
Website Layouts
Website Layout is very important to make your website look good. So you need to design your website properly.
There is two ways of designing layout.
Most websites have put their content in multiple columns (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.
HTML Layouts – Using Tables
The simplest way of creating layouts is by using the HTML <table> tag.
The following example gives you more appropriate vision:
Code:
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Welcome To My First Website</title>
</head>
<body>
<html>
<body>
<table width=”960″ border=”0″ align=”center”>
<tr>
<th height=”77″ colspan=”2″ bgcolor=”#CCCCCC” scope=”col”>This is a header part</th>
</tr>
<tr>
<th colspan=”2″ bgcolor=”#FFCCCC” scope=”col”><table width=”300″ border=”0″>
<tr>
<th width=”100″ bgcolor=”#FFFF66″ scope=”col”>Home </th>
<th width=”100″ bgcolor=”#FF99FF” scope=”col”>About US</th>
<th width=”100″ bgcolor=”#66FFFF” scope=”col”>Contact Us</th>
</tr>
</table></th>
</tr>
<tr>
<td width=”123″ height=”311″ valign=”top” bgcolor=”#CCCCFF”><table width=”123″ border=”0″ cellspacing=”2″>
<tr>
<th bgcolor=”#999999″ scope=”col”>Home</th>
</tr>
<tr>
<td align=”center” bgcolor=”#999999″><strong>HTML</strong></td>
</tr>
<tr>
<td align=”center” bgcolor=”#999999″><strong>CSS</strong></td>
</tr>
</table></td>
<td width=”827″ bgcolor=”#3399CC”> </td>
</tr>
<tr>
<td colspan=”2″ align=”center” bgcolor=”#CCCCCC”>Copyright © 2012. All rights reserved.</td>
</tr>
</table>
</body>
</html>
</body>
</html>
Output
Website Layout is very important to make your website look good. So you need to design your website properly.
There is two ways of designing layout.
- Using Table
- Using CSS(Without using table)
Most websites have put their content in multiple columns (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.
HTML Layouts – Using Tables
The simplest way of creating layouts is by using the HTML <table> tag.
The following example gives you more appropriate vision:
Code:
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Welcome To My First Website</title>
</head>
<body>
<html>
<body>
<table width=”960″ border=”0″ align=”center”>
<tr>
<th height=”77″ colspan=”2″ bgcolor=”#CCCCCC” scope=”col”>This is a header part</th>
</tr>
<tr>
<th colspan=”2″ bgcolor=”#FFCCCC” scope=”col”><table width=”300″ border=”0″>
<tr>
<th width=”100″ bgcolor=”#FFFF66″ scope=”col”>Home </th>
<th width=”100″ bgcolor=”#FF99FF” scope=”col”>About US</th>
<th width=”100″ bgcolor=”#66FFFF” scope=”col”>Contact Us</th>
</tr>
</table></th>
</tr>
<tr>
<td width=”123″ height=”311″ valign=”top” bgcolor=”#CCCCFF”><table width=”123″ border=”0″ cellspacing=”2″>
<tr>
<th bgcolor=”#999999″ scope=”col”>Home</th>
</tr>
<tr>
<td align=”center” bgcolor=”#999999″><strong>HTML</strong></td>
</tr>
<tr>
<td align=”center” bgcolor=”#999999″><strong>CSS</strong></td>
</tr>
</table></td>
<td width=”827″ bgcolor=”#3399CC”> </td>
</tr>
<tr>
<td colspan=”2″ align=”center” bgcolor=”#CCCCCC”>Copyright © 2012. All rights reserved.</td>
</tr>
</table>
</body>
</html>
</body>
</html>
Output
No comments:
Post a Comment