intro | tags | path | tables | attributes

QUICK TUTORIAL - A WORD ABOUT "PATH"

In order to link to a page, or display an image, you have to tell the browser where it is located.

Sounds logical, right? And it is, though many people find it somewhat confusing at first.

Basic File Management
You learned when you first started using computers, or should have, that files are displayed by your computer's file management system as a hierarchical system. You put your files into virtual folders (also called directories), and you further organize them by putting similar folders inside other folders.

Thus, folders (or directories) can contain both files and other subfolders.

Linking to documents in HTML
Your html document will be inside a folder. Even if you save it to your desktop, the desktop is itself a folder (usually found somewhere in the Documents and Settings folder on your computer if you are using a PC).

Same Folder
If the document you are linking TO is in the SAME directory or folder on the computer as the page you are linking FROM, then you just tell the browser the DOCUMENT's NAME, like this:

<a href="mypage.htm">My page</a>

<img src="myimage.jpg">

Lower Folder
If the document you are linking TO is in a LOWER directory or folder on the computer than the directory or folder of the page you are linking FROM (that is, the folder you are linking to is inside the folder you are linking from), then you tell the browser the DIRECTORY OR FOLDER NAME as well as the DOCUMENT's NAME, like this:

<a href="myfolder/mypage2.htm">My second page</a>

<img src="images/myimage2.jpg">

Other Folder, Same Level
If the document you are linking TO is in a DIFFERENT BUT SIBLING directory or folder on the computer from the directory or folder of the page you are linking FROM, then you tell the browser to GO UP A LEVEL (../), then put the DIRECTORY OR FOLDER NAME as well as the DOCUMENT's NAME, like this:

<a href="../myotherfolder/mypage3.htm">My third page</a>

<img src="../images/myimage3.jpg">

Higher Level Folder
If the document you are linking TO is in a HIGHER directory or folder on the computer than the directory or folder of the page you are linking FROM, then you tell the browser to GO UP TWO (or more) LEVELS (../../) , then put the DIRECTORY OR FOLDER NAME as well as the DOCUMENT's NAME, like this:

<a href="../../myhigherfolder/mypage4.htm">My fourth page</a>

<img src="../../images4/myimage4.jpg">

Like Company Hierarchy
One way to think about this is to imagine the pages are employees of a company. If the company is small, everyone sits in the same room, and you identify everyone by their name.

If, however, you're in a large corporate department, you might identify people by the group they're in (like a subfolder). "She's in Jim's New Markets group."

Some people might be in different departments (and buildings) altogether, and to refer to them, you might have to say, " oh, he works in Marketing, in the Central Region group - that North Chicago bunch. His boss is at the same level as our boss's boss."