Using Relative URLs

Up to this point, you've been linking to and saving example files in the same folder—the MyHTML folder. This is easier for novice users, at least starting out. If you want to create more than just a handful of simple Web pages, however, you may soon outgrow saving all of your files in the same folder. For a more complex Web site, organizing your files in separate folders can make maintaining and editing your site's files much easier to manage. If you want to do that, however, you need to know how to create relative URLs.

BUZZ WORD

A relative URL states the location of a linked object relative to the location of the linking file. An absolute URL states the location of a linked object on the Web. A relative URL is also called a partial URL, and an absolute URL is also called a full URL.

There are many different ways that a site can be organized. Some Web authors like to create an images folder to hold all of the images used in a site, which allows the same image to be reused in multiple pages, even if they are located in different folders. It is common to refer to different kinds of relative links based on the type of relationship that is involved, with child, grandchild, parent, grandparent, sibling, and cousin links being some of the kinds of relative links that can be created. Table 3.1 shows some of the kinds of relative URLs that can be used in Web pages.

Table 3.1: TYPES OF RELATIVE URLS

Relative URL	Type	Links To
page1.html	File name link	File in same folder as the linking file
images/mypic.jpg	Child link	File in a child of the linking file's folder
project1/chap01/ch01.html	Grandchild link	File in a child of a child of the linking file's folder
../index.html	Parent link	File in a parent of the linking file's folder
../../home.html	Grandparent link	File in the parent of the parent of the linking file's folder
../images/banner.gif	Sibling link	File in a child of the parent of the linking file's folder
../../sales/prices.html	Cousin link	File in a child of the parent of the parent of the linking file's folder
./index.html	Self link	File in the same folder as the linking file's folder
/contact/index.html	Root link	File in a child folder of the site's root folder
Note  Most servers specify index.html as the default name for a file that will be opened automatically when a folder is accessed. For instance, href="chap01/index.html" and href="chap01/" link to the same file (an index.html folder in a chap01 folder in the current folder) on most servers.