we know that for creating a web page, Layout play a very important role to make it beautiful.
For designing the web page beautiful make the Layout very carefully.Here i want to teach you how to make a layout using <div> and <table> elements.
Website Layout
Many people make a layout in multiple Column like magazine or newspaper, and we create the multiple column by using <div> or <table> elements.
HTML Layout - Using <div> Elements
Now here i create a Layout by using <div> elements and we also know that div element is a block level element and it is used for grouping html elements.
Example:
Your Result:
Here is the your result in a web browser.
HTML Layouts- Using Tables
For Creating Layouts, the simple method is by using html <table> tag.Many people make a layout in multiple Columns like magazine or newspaper by using <div> or <table> elements.Here i teach you how to create a layout (simple) by using <table> tag. Now see
Example:
Your Result:
Here is the your result in a web browser.
Can you see the difference between these two layouts,here the difference is the Space between Header,Menu,Content and Footer you can see clearly the difference. T hats all if you have any problem then please Contact Us.
For designing the web page beautiful make the Layout very carefully.Here i want to teach you how to make a layout using <div> and <table> elements.
Website Layout
Many people make a layout in multiple Column like magazine or newspaper, and we create the multiple column by using <div> or <table> elements.
HTML Layout - Using <div> Elements
Now here i create a Layout by using <div> elements and we also know that div element is a block level element and it is used for grouping html elements.
Example:
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:orange;">
<h2 style="margin-bottom:0;">Here is the
Header</h2></div>
<div id="menu"
style="background-color:green;height:200px;width:1
00px;float:left;">
<b>Menu</b><br />
Item 1<br />
Item 2<br />
Item 3</div>
<div id="content"
style="background-color:#EEEEEE;height:200px;widt
h:400px;float:left;">
Content Area!</div>
<div id="footer"
style="background-color:#FFA500;clear:both;text-alig
n:center;">
Copyright © Welearner.blogspot.com</div>
</div>
</body>
</html>Your Result:
Here is the your result in a web browser.
HTML Layouts- Using Tables
For Creating Layouts, the simple method is by using html <table> tag.Many people make a layout in multiple Columns like magazine or newspaper by using <div> or <table> elements.Here i teach you how to create a layout (simple) by using <table> tag. Now see
Example:
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:orange;">
<h2>Here is the Header</h2>
</td>
</tr>
<tr valign="top">
<td style="background-color:green;width:100px;text-align:top;">
<b>Menu</b><br />
Item 1<br />
Item 2<br />
Item 3
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
Content Area!</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © Welearner.blogspot.com</td>
</tr>
</table>
</body>
</html>Your Result:
Here is the your result in a web browser.
Can you see the difference between these two layouts,here the difference is the Space between Header,Menu,Content and Footer you can see clearly the difference. T hats all if you have any problem then please Contact Us.
No comments:
Post a Comment