Blah blah blah

What you see here is an example. This is exactly what the layout looks like if you don't edit anything, and as you can see it's not particularly attractive, so by all means remember to go wild and edit it!

Copy the code inside the text area and paste it into a text editor, then edit at will.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Your title here</title>

body {
color:#000000;
font-family:verdana, sans-serif;
font-size:10pt;
background:#FFFFFF;
margin:0;
padding:0;
}

a:link, a:visited {
text-decoration:underline;
color:#000000;
}

a:active, a:hover {
text-decoration:underline;
color:#888888;
}

img {
border:0px;
}

#header {
text-align:center;
height:150px;
}

#header img {
margin:auto;
}

#container {
position:relative;
width:100%;
}

#content {
margin-left:145px;
margin-right:145px;
padding:5px;
}

#leftmenu {
position:absolute;
left:0;
top:0;
width:130px;
padding:5px;
text-align:left;
}

#rightmenu {
position:absolute;
right:0;
top:0;
width:130px;
padding:5px;
text-align:right;
}

#leftmenu ul, #rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
}

</style>

</head>
<body>
<div id="header">
<img src="Your banner" alt="Your site name">
</div>

<div id="container">
<div id="content">
<p>Put your content here.</p>
</div>

<li>Category
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

</ul>
</div>

<li>Category
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

</ul>
</div>
</div>
</body>
</html>

How to edit this layout

The three main divs are #content, #leftmenu and #rightmenu, their purposes being rather obvious. #header is the header (which will contain some sort of a top banner). #container is just what it says, a container for the main divs; you can leave it completely alone in your editing unless you want the whole site to cover only a portion of the browser window; then you can set it to for example 80%. (Technically you can also set it to a fixed width in pixels and make an image-based layout if you know your stuff in that.)
To change fonts, font colors or font sizes for the whole page, change the font-family:verdana, sans-serif, color:#000000 and font-size:10pt; specified under body; to change them for the individual main divs, you should obviously just add similar declarations under the styles for that div.
The CSS for backgrounds is background:whatever;, with "whatever" being either a hexadecimal color code or an image in the form url(filename) (or both). Borders can be added with something like border:1px solid #000000;, obviously changing the width and the color as you like, and then you can change the "solid" to for example "dashed", "dotted" or "double" for different types of borders. Backgrounds and borders on the three main divs will only reach as far as to the bottom of each individual div's content; I'm afraid this layout can not make the background/border reach all the way to the bottom.
Depending on the height of your banner, I recommend changing the height of #header to the same height.
To remove one of the menus, delete it in the code and stylesheet and change either the margin-left or margin-right of #content, depending on which menu you removed, to 0. To change the width of the menus or their padding, just make sure to change the left or right (depending on which menu you edit) margin of #content by the same amount.
If you put backgrounds on all three main divs and don't want there to be space between the backgrounds on the menus and the background on the content, change the margins of #content to be the exact same as the width of the menu on that side plus twice the combined width of the padding and border. If you have borders on all three and want the borders where they meet to appear like one border rather than two side-by-side, do the same but subtract the width of the content's border on each side.
The way the menus are made may appear alien to many, but basically, it's made with lists. If you don't get how it works, just be sure to leave the #leftmenu ul, #rightmenu ul stuff alone in the CSS and copy and paste when you add new categories and menu items. (I double spaced around the code that makes one category to help with that.)
To make a different background image for the sublinks in the menus, use #leftmenu ul li ul, #rightmenu ul li ul as the selector.
To edit the link styles only for the menus, use #leftmenu a:link, #rightmenu a:link, #leftmenu a:visited, #rightmenu a:visited for the normal links and #leftmenu a:active, #rightmenu a:active, #leftmenu a:hover, #rightmenu a:hover for the links on hover. To remove the underline on any of them, change the text-decoration to none.
To make everything except the content appear the same on every page, you need to make sure your host supports SSI. If it does, cut out everything above the content in the code in your files and put in a separate file called for example top.txt, and the same for what is below the content except calling it something else, such as bottom.txt. Instead of that code, put  above the content and  below it.. Save the pages (not the menus) with the .shtml extension. Edit leftmenu.txt and rightmenu.txt when you want to edit the menus, and it will be edited everywhere.
It is also usually better to cut and paste everything between the <style> and </style> tags (not including the tags themselves) into a separate file called something like stylesheet.css and then externally link to it by replacing the <style> tags with <link href="stylesheet.css" rel="stylesheet" type="text/css">. Then the stylesheet will also be the same on every page, making a new style will be a breeze, and it will be completely separated from your HTML.
If you're going to link back, please visit the Link to Me section to find the most fitting button for your color scheme.

If you did not understand the instructions, it is probably best for you to learn more HTML and CSS before trying to make your own website.