Thursday, March 31, 2011

HTML Layout With Div

HTML Layouts - Using Div Elements

The div element is a block level element used for grouping HTML elements.


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


 

Posted by at No comments:

Basic HTML Layout with CSS

Layout
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!
Posted by at No comments:

HTML Basic Layout with Table

HTML Layout ( 100% HTML Website Design ) Tutorials

HTML layout is very basic. Not many options exist with the body tag alone. Tables on the other hand are the bread and butter of HTML layouts. Any element may be placed inside of a table including tables themselves.

HTML Code

<table id="shell" bgcolor="black" border="1" heigh="200" width="300">
<tr><td>
<table id="inner" bgcolor="white" heigh="100" width="100">
<tr><td>Tables inside tables!</td></tr>
</table>
</td></tr></table>


Tables inside tables:

Tables inside tables!
The white table (identified as inner) exists inside of the (shell) table, the black one. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts.

HTML Standard Layout
A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website.

HTML Code

<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" id="shell" height="250" width="400">
<tr height="50"><td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td></tr>
<tr height="200"><td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td>Content goes here</td></tr>
</table>
</td></tr></table>



Basic Layout:

Content goes here
This approach is basic yet organized. Often times websites become too complex for the viewer to follow. The code becomes complex rather fast, you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less debugging you will have to perform.


HTML Code

<table id="shell" title="Shell" height="250" width="400"
border="0" bgcolor="black" cellspacing="1" cellpadding="0">
<tr height="50"><td bgcolor="white">
<table title="banner" id="banner">
<tr><td>Banner goes here</td></tr>
</table>
</td></tr>
<tr height="25"><td bgcolor="white">
<table title="Navigation" id="navigation">
<tr><td>Links!</td>
<td>Links!</td>
<td>Links!</td></tr>
</table>
</td></tr>
<tr><td bgcolor="white">
<table title="Content" id="content">
<tr><td>Content goes here</td></tr>
</table>
</td></tr></table>



Basic Layout 2:

Content goes here
The code is quite a lot to look at, break it up and organize it in your own way to make things easier for you.
Posted by at No comments:
Subscribe to: Posts (Atom)