loading

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>
<!-- Created by Professor Pickle -->
<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.
<p>good luck on your journey learning CSS and HTML, once you've got it, the world's your oyster.</p>
<p>Hello for beginner this is a very nice website template design. but i want ti suggest you there are some best website and email template design service provider company that will help's you. <a href="http://www.emailchopper.com/portfolio.php" rel="nofollow">http://www.emailchopper.com/portfolio.php</a></p>
The website is nice.. <br>Here are some suggestions, <br> <br>1)Never put a body tag in an head tag, if you want to be an good designer. <br>Here's the example how to do it.(Type these without the space inside the tags.) <br>&lt; html &gt; <br> &lt; head &gt; <br> &lt; style type='text/css' &gt; <br> body{background-image:url('back.jpg');} <br> &lt; /style &gt; <br> &lt; /head &gt; <br>&lt; /html &gt; <br> <br>2)For simplicity use classes to style and place the rest CSS codes in

About This Instructable

1,211views

5favorites

License:

Bio: I enjoy anything to do with computers. I have made some interesting scripts, and I am constantly improving my skill set. One day I hope ... More »
More by Prof. Pickle:How to Create your own Commands with Batch Start a batch file completely hidden Tips on how to find errors in code (focused on DOS) 
Add instructable to: