Introduction: Website Design Template
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
<!-- Created by Professor Pickle -->
<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>
<a href="Contact.html">Contact us!</a>
<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>
<sub>Company credentials go here...</sub><br>
Step 2: Fill in the Blanks
- 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".
- 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.