Building a web site: Part 2

Absolute vs. Relative URL – continued

Can you guess what the absolute URL would be for the web page ‘bookcases.html’? For the domain name: ‘www.myStore.com’ it would be:

http://www.myStore.com/products/bookcases.html

Just think about it a little and hopefully it will sink in! If it doesn’t right away, don’t worry, it will come.

View of website directory

Relative URL

A relative URL is a partial address that is relative to the page where you placed your link. So if you were linking from the index.html page of this web site to the bookcases.html page your relative URL (address) would be:

products/bookcases.html

And the actual link tag would look like this:

<a href="products/bookcases.html">Check out our bookcases!</a>

You are basically telling the browser that the HTML page we want to load is in the products folder. Play around with links and folders on your own web site and things will become very clear. This is important because if you get the address wrong, it won’t load!

Ok, one more example to help you guys and gals out there: lets say you wanted to link to the page ‘contact.html’ from the ‘index.html’ page:

<a href="contact.html">Contact us</a>

Since the page ‘contact.html’ is on the same level as the page ‘index.html’, we need only include the name of the html file in the link address.

Summary of the process of creating a web site

Now that we got some preliminary theory out of the way (it’s about time,) we can actually go over the 10 steps you’ll need to take to build and bring a website ‘live’ on the World Wide Web.

1. Define the purpose of the web site

When starting a web site project, you must first clarify what the goals of the website are. Knowing your goals will impact the choices you make when putting the web site together and ultimately contribute to its success or failure.

This may sound obvious, but many web sites seemed to have been put together without the goal kept in mind. The result is a messy web site that is disorganized and harder to build and maintain.

So if, for example, the goal is to create an e-commerce web site that sells products, then as a web site designer you have to consider things like the following:

  1. Do you need credit card processing capabilities?
  2. Are you going to need a shopping cart system to take orders?
  3. How many items will be sold on the web site?

This is just one example. The point to take away is that by defining the purpose you can better prepare and get the right tools / people for the job.

2. Diagram the structure of the website.

A simple diagram helps to visualize the web site for both you and your client – this assuming someone has hired you to build a website. Nothing special is really needed, just a series of boxes representing each page in the site with lines connecting them showing the linking strategy. A pyramid scheme is usually used to show the hierarchy of a web site from the splash/home page down*.

Note: I use the terms ‘splash page’ and ‘home page’ interchangeably most of the time. There is a subtle difference from the perspective of an old-time web nerd, but for the rest of the world, it basically is the first page someone hits when they visit a website.