How to Create a Website


Create a Website Template TRY This SiteBuilder FREE! - No Credit Card

Grab a pencil and paper and start by making a diagram of your web template.

You will be building your template with a series of boxes called divisions. Some of those boxes will be divided into columns.

Your brainstorming might go something like this.

Template Diagram

The template diagram shown below, proposes the use of 4 main divisions.

Note: Breaking up the web page into single row sections will make divisions easier to understand.

The top Division 1 is divided into 2 columns. We can place our sitename in one and our slogan in the other

The second Division 2 is also divided into 2 columns. The larger left column will contain our body content and the smaller will be used for site navigation or as a sidebar.

Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.

SquareSpaceSquareSpace

Start Your Website Now!SquareSpace


Web Template diagramThe third Division 3 in our design is an optional navigational device. It can be used if you want the pages in your site to be viewed in a specific order.

The division is divided into 3 columns. The left and right columns will contains arrow pointers. The middle cell is handy for banner placement or additional footer information.

The Footer

The fourth Division 4 in the template will contain the footer and possibly a bottom edge text map of the site.

The footer is also an important part of a website template. Not only does it supply information to a user, but it can also contain information for bots, like a valid physical address of your company.

Place contact information in the footer and information about the age of the page for your viewers. When someone enters your site via a page other than the homepage, the footer should provide sufficient information about where they are and how to get to the main page.

Color

If you have colored pencils or crayons, you might add the colors to the various sections that you want to use. You don't need to be exact. You're just getting a rough idea of the web page you want to build. Don't go crazy with color. Use 3 main colors or less.

The HTML Code for the Diagram

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="div1">
<div id="div1-left"></div>
<div id="div1-right"></div>
</div>
<div id="div2">
<div id="div2-left"></div>
<div id="div2-right"></div>
</div>
<div id="div3">
<div id="div3-left"></div>
<div id="div3-middle"></div>
<div id="div3-right"></div>
</div>
<div id="div4"></div>
</body>
</html>

First Timers: If this is your first website, and you would like to learn to create websites the right way, visit our 7 Step Crash Course on Learning Basic HTML

The HTML code shown on the left could actually be used to create the web page layed out in our diagram.

The web page would be linked to a style sheet as shown. This example is linked to style.css

The style sheet is where the actual design of our web page is defined.

We'll use our style sheet to define the width of each box (division) on the page.

We'll define the colors we want to use.

We'll even add background pictures and textures using our style sheet.

More Layouts

In conclusion, there are many different layouts which can be created using divisions and CSS. Choose one that suits your needs or create your own.

Get a second opinion. Get other people to look at your final choice of the web page templates you have built. Ask them about their first impressions. If their impressions agree with yours, start cranking out those pages.

Next Stop

More Web Page Layouts