Web Site Design - The Basics

A web site is nothing more than a collection of related web pages linked for easy navigation between them. The secret to good web site design therefore is good web page design supported by an excellent and intuitive system of navigation. Always try to think like a visitor when you design you web site because your visitors are why you are building it in the first place.

how to build web site free tutorial

I've no idea what your web design skills are like so I'm going to start right at the beginning and build up from there. In this first article we are going to produce a very simple single page web site design that you will be able to use as a template for your own designs.

You will not need an online web host to follow this tutorial but you will have to get one sorted out if you want to upload your page and have it seen by visitors from the Internet.

First create a directory (folders and directories are the same thing by the way) on your hard drive somewhere and call it mysite. This will be the directory that you will save your simple web site design into. You will be able to upload the files from this directory to your web host when they are complete.

Hello world

All the best web designers start out by producing a simple web page with the words "Hello World" on it. Well not everyone starts out like this but it is a bit of a tradition that has been inherited from software development. The words could be anything you like but what we are trying to achieve is the ability to produce and display a web page design no matter what content it has on it. When we can do this we know that we have all the tools and applications in place that will allow us to produce more sophisticated pages.

Ok so lets do it. Open up Notepad or your favourite text editor on your PC. It doesn't matter which editor you use as long as it will save your files in plain text format without any formatting. Don't be tempted to use Microsoft Word or any other word processor because it will only give you trouble. Enter the following text without the quote (") characters.

"Hello World"

Save the file into your mysite folder with the name myfirstpage.html. Remember to save it as a simple text file with no formatting.

Now using Windows Explorer, double click on the file myfirstpage.html to display it in your default web browser. If this works congratulations are in order because you've just written your first web page. Easy isn't it?

Completing The Web Page

As you have seen most, if not all, browsers will happily display the "Hello World" page that we produced above. Strictly speaking though, it isn't a proper web page yet because it lacks a few things that every web page must have:

<!doctype>
<html>
<head>
<body>

<!doctype>

Right at the very top of your web page you need a <!doctype> tag. This tag tells the browser what kind of document this is and what standards the browser should adhere to when displaying the page. An incorrect doctype may cause the browser to render (show) your page not as you intended. Leaving out the doctype altogether can cause the browser to go into a pre-standards 'quirk' mode when all browsers did more or less their own thing. There's no telling what might happen in this case.

There are several doctype statements that you can use but for now you just need this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

Every web page should have an <html> tag and a </html> tag. All content apart from the <!doctype> tag must be placed between these two tags.

<head>

The <head> tag is optional but most web pages will have one and yours should too. Its purpose is to hold information that isn't normally displayed in the browser window. The title of the page and keywords are two examples. The section is closed by a corresponding </head> tag

<body>

The content of your web page that gets displayed in the browser window is enclosed by <body> and </body> tags.

Our corrected "hello world" page now looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  Hello World
</body>
</html>

Notice that I've added a title that will show in the browser's top title bar.

CSS - Cascading Style Sheets

It's a grand name but CSS gives you a simple way of determining how your content will be displayed without needing to adjust the content itself very much. CSS commands are enclosed within <style> and </style> tags and can be placed either in your web page or in an external file. The advantage to having CSS in a separate file is that you can use the same file in any or all of the pages that make up your site if you wish. For the purposes of this discussion I'm going to stick with the style commands in your page to make things simpler.

In the <head> tag place the following code:

Then put a pair of <p></p> tags around the "hello world text" like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <style>
    p { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 80%;
    }
  </style>
</head>

<body>
<p>
Hello World
</p>
</body>
</html>

The effect of the <style> tag parameters is to set the font and the size of everything enclosed within the <p> or paragraph tag

CSS is a larger topic than I want to get into here but I do want to use it to give you a very simple web page template that you can use with your first web page project.

Free Web Site Design Template

The template that I want to give you today uses CSS to create a very simple web page consisting of a header, a two column content section and a footer bar.

In theory it should be very simple to do this with CSS. In practice it isn't quite so easy. The main problem with this simple template is the fact that most browsers set the height of a column to fit what you put into it. In a multi column design where you want the background of the columns to be different colours this presents a problem because the bottoms of the columns will not line up.

The multi column problem is made worse by the fact that different browsers are not always consistent in the way they display things. This means that you might find a work around that solves the problem in one browser but not in another.

There are many ways to solve this problem all of which add complexity to the CSS parameters. Some solutions are very complex and promise to solve the problem for multiple columns of arbitrary length and do so for all browsers. I want to avoid this complexity, at least for the time being and I believe that I've found the simplest solution to the two-column design but there are some compromises to be made.

You can copy and paste the code from the box below. Click here To try it out first. The template page will open in a new window.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>My First Web Page</title>

#wrapper { width: 800px;
      background-color: #ccccff;
      margin: auto;
    } 
	
    #header { width: 800px;
      height: 60px;
      background-color: #ffcccc;
      text-align: center;
      font-size: 24px;
    }

#content { 
      width: 592px;
      float: left;
      background-color: #ccffff;
      padding: 4px;
   }

#sidebar { 
      width: 192px;
      background-color: #ccccff;
      float: right;
      padding: 4px;
    }

#footer { 
      width: 800px;
      background-color: #00cccc;
      text-align: center;
      clear: both;
    } 
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="header">
      This is the header box.
    </div>

<div id="content">
      <p>
        Hello World
      </p>
      <p>
This is the left hand content column. It's floated left inside a wrapper. The sidebar to the right is floated right within the same wrapper.
      </p>
      <p>
This is an example where the left and main content text column is longer than the text in the sidebar and because the browser makes columns only as long as it needs to, the background colour shows through at the bottom of the sidebar.
      </p> 
      <p>
The simple solution to this is to make the background colour of the wrapper the same colour as the sidebar. If you know that the sidebar is going to be longer than the left content column then make the wrapper background colour the same as the left content background.
      </p> 
    </div>

<div id="sidebar">
      <p>
This is the sidebar. You can put navigational menus, search
boxes and adverts in this space
      </p>
    </div>

<div id="footer">
      <p>
        This is the footer
      </p>
  </div>
</div>
</body>
</html>

You will see that the code that holds the content of your web page design between the <body> and </body> tags is very simple and this of course is exactly what we are trying to achieve. Practically all of the formatting and presentation is done within the CSS <style> </style> tags.

Wrapper

All of the content of the page is contained within a <div id="wrapper"></div> tag pair. This allows us to set the overall style of the page in the #wrapper style:

#wrapper {
width: 800px;
background-color: #ccccff;
margin: auto;
}

This sets the width of the web page to be 800 pixels which is the lowest resolution that most of your visitors will be using when they see your page.

The background colours are set as a combination of red, green and blue colour values in three sets of two hexadecimal numbers. A hexadecimal digit can be 0-9 and a-z allowing for 16 different numbers. 0 = 0 and f = 16 (decimal). When you put 2 hex digits together you can represent the numbers 00 = 0 to ff = 255 (decimal). So the colour #ff0000 is red, #00ff00 is green and 0000ff is blue. Combining colour values gives you all the other colours. Remember that #000000 is black being the absence of any colour and #ffffff is white because it has equal quantities of all colours. #cccccc is a shade of grey.

The margin of the wrapper is set to auto. This effectively centres your content in the browser.

Header

The web page design allows for a header at the top of all your content. The contents of the header are encapsulated within <div id="header"> </div> tags. The style that controls the header is below:

#header {
width: 800px;
height: 60px;
background-color: #ffcccc;
text-align: center;
font-size: 24px;
}

The width of the header is set to the width of the wrapper and the height is set to a fixed value making the rectangle 800 x 60 pixels. The background colour is set so that we can see where the header actually is on the page. Any text appearing in the header will be centred and will be a larger size.

Content

The main content of this web site design is contained within the <div id="content"></div> tags and will be displayed on the left in the middle of the page. Here is the style for the content section:

#content {
width: 592px;
float: left;
background-color: #ccffff;
padding: 4px;
}

The content is a rectangle 600 pixels wide extending as far downwards as is required to display the text. The width is set to 592 pixels to allow for 4 pixels padding around all edges of the text. The padding is added to make the page look a little nicer. The content is set to 'float' to the left meaning that it will be positioned to the left and allow other content to be placed next to it. The background colour is set to indicate the position of the content section.

Sidebar

To the right in the middle of our web site design is a narrower column called the sidebar. The sidebar can be used for such things as navigation, search boxes, adverts etc. The sidebar content is contained within the <div id="sidebar"></div>. Here is the style for the sidebar section:

#sidebar {
width: 192px;
background-color: #ccccff;
float: right;
padding: 4px;
}

Again we allow a 4 pixel padding for readability and the width is set as 192 allowing for 8 pixels of padding to make 200 pixels total. The total width of the content and sidebar sections is equal to the width of the wrapper. The sidebar is floated right so that it appears side by side with the content giving the illusion of columns.

Footer

The last component of the web site design is the footer. This appears below everything else and spans the whole width of the wrapper. The content of the footer is contained within the <div id="footer></div> tags. Here is the style for the footer section:

#footer {
width: 800px;
background-color: #00cccc;
text-align: center;
clear: both;
}

The width is set to the width of the wrapper and the colour assigned to something unique on the page and any text in the footer will be centred. In order to make the footer section display where we want it to and not overlap with the content or sidebar the parameter clear: both; is used. This tells the browser that this section can't have anything displayed to the left or right of it so forcing it below everything else.

Solution to the column colouring problem

The simple solution to the column background colouring problem is to set the background colour of the wrapper style to be the same as the background of the shortest column. The wrapper background will then show through underneath the shorter column and give the impression that the column is the same colour all the way down.

Of course this solution will only work if you know which column is going to be the longest when you are designing the web page. If you can't predict the length of column, perhaps because your content is drawn dynamically from a database, then you have two options.

You can employ a more sophisticated CSS scheme that will take care of the varying length columns or you can use the same colour for the background of all columns and the wrapper. Personally I think that when it comes to web site design the simple solutions are the best.

Well I hope that you have fun building your web site and that this free web site design development template helps you to get on your way. I shall be adding more free articles like this one soon so drop me a line using the contact form on this site if you would like to be informed when I update the site.

How To Design Web Sites

Web Site Design - The Basics

Menu