Working with URLs

A website without navigation is no website at all; just a web page. Site navigation, a.k.a. the Menu, is a fundamental component to any website, and should be regarded as being of equal importance to the site’s content. Without effective navigation, your content is largely inaccessible. If your content is inaccessible, then your website will fail.

Being imperative, it should come as no surprise that site navigation is therefore one of the most basic concepts of web-design. Despite having so much importance, however, it can also be one of the most confusing for the unintiated. And that is because it requires not only an understanding of layout and design, but also of the website’s underlying file structure.

In layman’s terms, we might compare this to construction work. It’s fine and good to sketch a building on a sheet of paper. But without detailed blueprints, that building cannot be made. It’s all about relationships: floor plans in relation to support beams and braces, hallways in relation to stairwells and elevators, so on and so forth.

Bringing it back to web-design, we might think of our pages as floors, the navigation links as stairwells, and our resources — stylesheets, scripts, image files — as structural support.

The key to understanding site navigation is in knowing your stairwells: which stairwell to use, and how far you have to climb either up or down to get from where you are, to where you want to be.

In this tutorial, we will first discuss URLs in general terms, and then discuss how URLs are used by TTG web engines to create navigation menus by default and within various non-default contexts, including how to write your own custom menus.

What is a URL?

From Wikipedia:

In computing, a Uniform Resource Locator (URL) is a Uniform Resource Identifier (URI) that specifies where an identified resource is available and the mechanism for retrieving it … The best-known example of the use of URLs is for the addresses of web pages on the World Wide Web, such as

Absolute URLs

An absolute URL points to a page or resource at a specific, unique location in the network and may be used to target that page or resource from any point of origin.

An absolute URL contains more information than a relative URL does. Relative URLs are more convenient because they are shorter and often more portable. However, you can use them only to reference links on the same server as the page that contains them.

An absolute URL typically takes the following form:


The protocol is usually http://, but can also be ftp://, gopher://, or file://. The hostname is the name of the computer. For example, the hostname of The Turning Gate’s central web server is The other_information includes directory and file information. You must use absolute URLs when referring to links on different servers.

An absolute URL must include a protocol. Writing an absolute URL as is incorrect and will not correctly function as a hyperlink; the correctly written URL includes the protocol http:// and is

When targeting pages or resources on the same server as the referring page, you may truncate an absolute URL such that the protocol and hostname are assumed. For example, the absolute URL:

… could be written as:


… only when the page containing the URL is located on the same server as the destination page or resource.

Returning to our architectural analogy, an absolute URL is like giving directions always from a common point of origin, such as the front door of the building, rather than from where you are in the building at a given time.

Relative URLs

A relative URL points to a page or resource located on the same server as the page which contains the URL. The URL traces a path from the page containing the URL to the location of the requested page or resource.

While an absolute URL will always be written the same no matter where you are beginning from, a relative URL will vary depending upon your current location.

Relative URLs can take a number of different forms. When referring to a file that occurs in the same directory as the referring page, a URL can be as simple as the name of the file. For example, if you want to create a link in your home page to the file about.html, which is in the same directory as your home page, you would use:

<a href="about.html">About</a>

If the file you want to link to is in a subdirectory of the referring page’s directory, you need to enter only the directory information and the name of the file. So if foobar.html were in the /foobar/ subdirectory of your www directory, you could refer to it from your home page by using:

<a href="foobar/foobar.html">Foobar</a>

If the file you want to link to is in a higher directory than the referring page, use ../, which means to go up a directory. For example, to link from foobar.html to home.html, which is in the directory above, you would use:

<a href="../home.html">Go back to my home page</a>

Using our architectural analogy, a relative URL is equivalent to giving directions from your current location to where you want to be — to get from the fourth floor to the third floor bathroom, proceed down one flight of stairs to the third floor, exit the stairwell, then enter the first door on the right — rather than giving directions from the building’s entrance on the ground floor.