Website Design Template

Introduction: Website Design Template

About: 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 to become a programmer, although in what category is still a mystery (al…

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 -->
  <title>Website Design</title>
  <body background="back.jpg">
  <div style="margin-bottom:0;font-size:50px;">Company Name
  <div style="font-size:30px;width:250px;height:600px;float:left;border:1px solid black;">
    <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>
  <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>
   <div style="color:blue;font-size:20;margin:35px;">
    <a href="Contact.html">Contact us!</a>
  <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 style="background-color:black;clear:both;text-align:center;color:white">
   <sub>Company credentials go here...</sub><br>

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.

Be the First to Share


    • Sculpt & Carve Challenge

      Sculpt & Carve Challenge
    • Eggs Challenge

      Eggs Challenge
    • Fabric Challenge

      Fabric Challenge



    5 years ago

    The objective of each every website
    is to attract audience, and every audience visits the website for a specific
    purpose.A best website design helps in building good
    repute of business. Small business website design is different as compared to
    if you are designing the website for a large scale business.There are some common factors that you must
    keep in mind while designing a good website design. You must be clear about
    the requirements of your audiences and have the knowledge about their
    demographics. You must make your audience comfortable with the technology. Who
    is visiting the web design company abu dhabi
    and what
    thing makes the visit much successful in their eyes and who else is competing
    with you.


    good luck on your journey learning CSS and HTML, once you've got it, the world's your oyster.

    code source
    code source

    9 years ago on Introduction

    The website is nice..
    Here are some suggestions,

    1)Never put a body tag in an head tag, if you want to be an good designer.
    Here's the example how to do it.(Type these without the space inside the tags.)
    < html >
    < head >
    < style type='text/css' >
    < /style >
    < /head >
    < /html >

    2)For simplicity use classes to style and place the rest CSS codes in