Well, start your site by creating a table to display your content.
HTML
<html>
<head>
<title>
My Webpage
</title>
<STYLE type=text/css>
<!--
@import url( yourname.css );
-->
</STYLE>
</head>
<body>
<table width="700" border="1" cellpadding="3" cellspacing="0" align="center" class="MAIN_TABLE">
<tr>
<td valign="top" height="100" colspan="2" class="CELL">
Your banner
</td>
</tr>
<tr>
<td width="15%" valign="top" height="25" class="CELL">
Menu
</td>
<td width="85%" valign="top" height="25" class="CELL">
Main Content
</td>
</tr>
<tr>
<td width="15%" valign="top" height="400" class="CELL">
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
</td>
<td width="85%" valign="top" height="400" class="CELL">
Your Main Content
</td>
</tr>
</table>
</body>
</html>
<head>
<title>
My Webpage
</title>
<STYLE type=text/css>
<!--
@import url( yourname.css );
-->
</STYLE>
</head>
<body>
<table width="700" border="1" cellpadding="3" cellspacing="0" align="center" class="MAIN_TABLE">
<tr>
<td valign="top" height="100" colspan="2" class="CELL">
Your banner
</td>
</tr>
<tr>
<td width="15%" valign="top" height="25" class="CELL">
Menu
</td>
<td width="85%" valign="top" height="25" class="CELL">
Main Content
</td>
</tr>
<tr>
<td width="15%" valign="top" height="400" class="CELL">
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
<li><a href="link">Link</a>
</td>
<td width="85%" valign="top" height="400" class="CELL">
Your Main Content
</td>
</tr>
</table>
</body>
</html>
Save this file as 'Yourfile.html'
You have to say that if you have seen this file in action, it's really very dull.
So... Lets liven it all up with some css.
CSS can look quite complicated at first. Well, don't let that scare you away. It's actually quite simple.
HTML
BODY { BACKGROUND-COLOR: #0066CC; FONT-COLOR: #000000; FONT-FAMILY: verdana; TEXT-DECORATION: underline;
}
}
Save this file as Yourname.css.
You will notice that all this will do is make the bacground blue, and change the font to Verdana. This really doesn't do too much for your site. So lets spruce up the links shall we?
HTML
A { FONT-COLOR: #0066CC; }
A:hover { FONT-COLOR: #000000; TEXT-DECORATION: none;
}
A:hover { FONT-COLOR: #000000; TEXT-DECORATION: none;
}
This will make the links blue with an unerline. It will also mean that when you hover your mouse over the links the unerline will dissapear, they will turn black and the text will become bold.
Well your site will still be looking quite dull. So lets spruce up your table adding the class tag in your html. You'll notice in the table code at the top of the page you'll see class="MAIN_TABLE". This defines the table to you can customise it's appearence in the CSS.
HTML
.MAIN_TABLE { BACKGROUND-COLOR: 000000; BORDER: 1px solid #000000;
}
}
This will make the main table background black.
You'll also notice that in the html there is a class="CELL" bit of code on all of the cells. So lets spruce them up.
HTML
.CELL { BACKGROUND-COLOR; #FFFFFF;
This will make the cells white.
Well you can add whatever content you like and you may want to add some background images and regular images to make it look better. Also change the colors to suit what you want it to look like.
Well, hope my basic tutorial has helped some of you. If I happen to have a made a mistake somewhere, please tell me. And I'll correct it.
