Ok, so when I was learning HTML, I decided to create a website design to help me train my skills.

Take note that the code is very messy. This is because I had not yet learnt CSS.

It originally contained more than one document, for the other sections of the website, but I took them out for the ease of a small instructable.

Here is the code:

Step 1: Code

<!DOCTYPE html>

<html>
<head>
<title>Website Design</title>
<body background="back.jpg">
</head>
<body>
<div>
<div style="margin-bottom:0;font-size:50px;">Company Name
</div>
<div style="font-size:30px;width:250px;height:600px;float:left;border:1px solid black;">
   <ol>
    <i>Menu:</i><br>
    <hr>
    <li><b>Home</b></li>
    <li><a href="Op1.html" title="Breif description">Option 1</a><br></li>
    <li><a href="Op2.html" title="Breif description">Option 2</a><br></li>
    <li><a href="Contact.html" title="Breif description">Contact Details</a><br></li>
    <li>Etc...</li>
   </ol>
</div>
<div style="background-color:gray;width:775px;height:600px;font-size:20px;float:right;align:right;border:4px solid black;opacity:0.9;">
   <img style="width:175px;height:175px;float:right;" src="logo.jpg" alt="Logo" title="Logo"></img><br>
   <h2 align="center">About us...</h2>
   <p style="margin:35px;">Info goes here...<br>
    ...And here.<br>
    <hr>
    <hr>
    <hr>
   </p>
   <div style="color:blue;font-size:20;margin:35px;">
    <a href="Contact.html">Contact us!</a>
   </div>
</div>
<div align="center">
   <img style="width:200px;height:300px;float:left;" src="main.jpg" alt="We're here to help" border="2"></img>
   <cite>We're here to help</cite>
</div>
<div style="background-color:black;clear:both;text-align:center;color:white">
   <sub>Company credentials go here...</sub><br>
</div>
</body>
</html>

Step 2: Fill in the Blanks

Now, this code is missing files, mainly images. Below will be a list of images that you will need... (remember to put all of these images in the same directory).

Background. This image will cover your whole background, you should name it "back.jpg". That way you won't need to edit the code.
Logo (top right corner of the "About us..." section). This image is your company, co-corporation, etc logo. Should be named "logo.jpg".
General image (middle left). This should be an image showing what your company can do, or something about it. Should be named "main.jpg".

Additional Files (these are files like "Option 1", "Contact Details" and any others you need:

Options (Will be in the "site navigator"). These should be renamed to things like "Photo Gallery" and "Menu", depending on your preferences. This file should be named appropriately (you should edit the code to include the name).

And that's it. If you need any help with anything, you can leave me a comment or a PM and I will respond to you quickly. I understand that I didn't allow for a learning curve with this instructable, that is my own fault. If you need any of the code edited or find any mistakes or inefficiencies with the code (besides the absence of Style Sheets), feel free to let me know.