Any kid, and their grandmother too, can make a webpage. There
are many "wysiwyg" webpage design applications that let you
create a webpage as easy as typing text. But only a few people
can create a website. The stumbling block is knowing how to link
webpages together to form a website. I have seen many websites
that consist of a single webpage - about a mile long!
The first problem is that websites are contained in virtual
directories. You know that your webpages can be found at
yourdomain.com, but the actual path to yourdomain.com on the web
server may be known only by the system administrator. And the
system administrator can move your website to a different
folder, or even a different computer, without changing its
The second problem is that most people don't know how to write a
relative link. Relative links have the advantage that you don't
need to know the path to the webpage that you want to link to,
you only need to know where it is "relative" to the webpage
containing the link.
Designing Your Directory Structure
The first step to implementing a website is to design the
directory structure. Let's design a directory structure for a
simple download website. The website consists primarily of
articles and digital material that visitors can download. You
could just dump everything at the top level of the website. Good
luck maintaining that website!
To keep the files organized, you need to create sub-directories
(folders) on the website. Even though the website consists only
of articles and digital downloads, you need five
sub-directories, as described below.
You understand what the "articles" and "downloads"
sub-directories are for, but what are the other three
sub-directories for? It's standard practice to provide certain
features on your website, as listed below.
- User Agreement
Each of these features requires a webpage. Instead of dumping
the webpages at the top level of the website, or mixing them in
with articles or downloads, let's put them together in a folder
named "general" (I'm sure you can think of a better name).
All of your webpages use certain things in common, for example,
your logo graphic. If your web server provides SSI (Server Side
Includes) all your webpages can share a common header file and a
common footer file. You might also define all your website's
styles in a common style sheet. Let's put all of these files in
a folder named "common".
Your contact page might use an email form. If your server
provides server-side scripts, you would place the email form
script in a folder named "cgi-bin". Cgi-bin stands for "Common
Gateway Interface - Binary". Few people use CGI any more, and
those that do don't use binary files, but the folder name has
stuck as a traditional place to store scripts. Almost all
websites come with a preconfigured cgi-bin folder, and the
website may be configured so that the cgi-bin folder is the only
folder with rights to run scripts.
I would also recommend that you create certain sub-directories
for some of the above mentioned directories. Most web pages
contain images. You could dump all the images in the same folder
with the webpages, but when you get more than about 50 files in
a folder, it becomes difficult to maintain. You should create an
"images" sub-directory in the articles, downloads, and general
directories. The downloads directory should also have a "files"
sub-directory to store the downloads.
This arrangement of directories and sub-directories will provide
good file organization for the example website. Understanding my
reasoning for this directory structure should help you to design
a directory structure for the website you have in mind.
Default Page Configuration
Every website has at least one default webpage configured (also
called the "home" page). The default webpage is the webpage that
is returned when the user enters or clicks on a link containing
only the domain name, without a specific file name. On a Unix or
Linux web server, the default webpage will usually be
"index.htm". On a Windows web server (IIS), the default page
will usually be "default.asp".
The website administrator, or if your webhost provides the
required "control panel" feature, you can actually configure any
page to be the default page. If your web server has more than
one default page configured, I would recommend removing all but
the default page that you intend to use.
Now, let's assume that all of your webpages need to link to an
image file named "logo.gif" stored in the "common" folder. The
relative link on your default webpage would be as shown below.
The website file manager interprets this as "look in the folder
named common for the file named logo.gif".
However, the link on any webpage contained in one of the
sub-directories would be as shown below.
The website file manager interprets this as "go up one level,
then look down in the folder named common for the file named
This difference in the link may not be a problem unless you use
SSI or ASP (Active Server Pages) to build your webpages from a
common header file and a common footer file. Then you need a
different link in the common file depending upon whether the
page linked to the common file is the default webpage (where you
would use common/filename) or a webpage contained in a
sub-directory (where you would use ../common/filename). There
are several ways to solve this problem.
- If your website has a server-side scripting engine like ASP
or PHP and you know how to program, you could implement code
that selects the proper link.
- You could use the complete
path, including the domain name, on all pages. This will cause
problems if you ever have to move your website to a different
web host (Until all the dns servers across the planet have been
- You could put your home page in a sub-directory, for example
"common", and make your default page into a re-direct to your
home page. Then you would use "../common/filename" for all
links. The following meta tag, placed the head section of your
default webpage, will immediately redirect the users browser to
your real home page.
<meta http-equiv="refresh" content="0,url="http://yourdomain.com/common/homepage.htm">
In this article, I showed you how to design a directory
structure for your website and how to create relative links to
link all your webpages together to form a website. Website
visitors don't like to do a lot of scrolling, so try to keep
your webpages to only two or three screens high. Please, no more
websites that consist of only one mile long webpage!