If you are supposed to desgin a HTML,then you should have a vision that how your structure would look like.
Let us consider a example .I am desgining a structure having
a)Header
b)leftpanel
c)mainpanel where your content is.
d)footer.
I will not use any table structure format.It is a bad practice to use table layout structure according to the HTML standards.
The reason is :when the page loads on the web ,first the table is displayed and then the content.so it takes more time.thats why table structure format is rarely used.it is used in such cases where there is tabular data.
In this case we will use only divs.let us understand first what is div.basicallly you can say it as a block or a container kind of thing where your content is stored.
Another thing we will be using ID and Classes.
ID and classes solves the same purpose that is to identify something…suppose header ,mainpanel,footer..etc..But there is a basic difference between these two.
ID can be used only once with same name.For example if you are using ,<div id=”header”></div>..this can be used only once .but if you are using class ,it can be used nos of times solving our purpose.for example <div class=”inner”></div>.This can be used nos of times.
I have tried to differntiate between ID’s and Classes.I think it might be clear to you.
Where we were.We were supposed to look an example.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>Simple example</title>
<link rel=”stylesheet” href=”css.css” type=”text/css” />
</head>
<body>
<div id=”container”>
<div id=”header”>header</div>
<div id=”leftpanel” class=”floatLeft”>leftpanel</div>
<div id=”mainpanel” class=”floatLeft”>mainpanel</div>
<div id=”footer”>footer</div>
</div>
</body>
css :
/* CSS Document */
*{margin:0px;
padding:0px;}
.floatLeft{float:left;}
body{
background:#95A8C4;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
color:#fff;
}
#container{
width:900px;
margin:auto;
text-align:left;}
#header{
background:#353E79;
height:50px;}
#leftpanel{
width:200px;
background:#757EC1;
height:800px;}
#mainpanel{
width:700px;
background:#D7DAEE;
height:800px;}
#footer{
clear:both;
height:50px;
background:#353E79;}
just try this example.save the css file in the same folder.
