HTML Tasks
Making Your Web Site

Introduction

Now that you have had a chance to try out the tags, it's time to make a site that really counts.

• There will be 4 pages in the web site.
• It will be possible to follow links from any page to any of the other pages.
• One Page will contain a reviews of some of your favourite web sites
• One page will be used for a Javascript game that we will make after designing the other pages.
• One page will be on the theme of your choice.

Planning The Structure Of Your Site

Creating a structure diagram helps you to consider how the pages in your site relate to one another. It also allows you to record the filenames that you are going to use. This will help when creating links. Print off and complete the diagram above with the details of your site, you will need to choose a name for the last page.

Storyboards

Good design is rarely the result of a happy accident. Creating a storyboard for each of the pages in your site makes lots of sense and will cut down the time you spend staring at the screen wondering what it was you wanted to do. The example below can be printed off and used to design each of your pages. Alternatively, copy it into a graphics package and draw the page layout with lines and shapes. I have suggested a layout for the navigation pane.

Starting The Design

Before you do any coding, make a folder to store the work that you do.

The top part of each page will be exactly the same. We should only need to design this once.

Step 1

Design the title block for your site. You need to think of a suitable name for your site. Find and save an appropriate graphic (.gif, or .jpg) for your site.

Step 2

Make the hyperlinks. Even though you haven't yet made the pages, you already know what their filenames are.

Step 3

When you are happy with the way that the top part of your page looks, you are ready to make the site work. Add the words Home Page just below the links and save the file with the name index.htm.

Change the heading to Favourite Links and save the file with the name links.htm.

Repeat this process until you have done this for all of the pages in the site.

Step 4

Test your site. Make sure that all of the links work. If they don't, accelerate the palm of your hand against your forehead and seek assistance. You may need to return to Step 2.

Making The Pages

Complete the design of the Home Page, Favourite Links and the extra page that you decided to include. Try to use similar fonts and styles on each of your pages so that your site has a consistent look and feel.

Web site designers and computer programmers tend to follow the KISS principle. KISS stands for Keep It Simple Stupid. Work with what you know and be inventive with that before trying out the really complex stuff. Simple, clean designs often work better as web sites.