Website Design Template
Intro: 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
<!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>
<!-- 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).
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.
- 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.
4 Comments
emnafadila 6 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 dhabihttps://www.ingic.ae/abu-dhabi/web-design/
and what
thing makes the visit much successful in their eyes and who else is competing
with you.
robindallaway 9 years ago
good luck on your journey learning CSS and HTML, once you've got it, the world's your oyster.
JohnyAllen 10 years ago
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. http://www.emailchopper.com/portfolio.php
code source 11 years ago
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' >
body{background-image:url('back.jpg');}
< /style >
< /head >
< /html >
2)For simplicity use classes to style and place the rest CSS codes in