Want a tiled background image? You need a Link!
Want a photo or graphic on your page? You need a Link!
Want to direct your visitor to another page? You need a Link!

Have I convinced you yet? Links are integral to your web page. Remember the basic page illustrated in VERY Basic HTML? Pretty boring, right? Without links, your page will contain text, and perhaps a background color. Everything else that appears on your page appears via the magic of a link. Understanding how to create a link, and how to fix a broken one, is probably the most important part of creating a successful web page. They are so important, I decided they deserved a page all their own.

Types of Links

BACKGROUND - This is used to call a graphic file such as a GIF or JPG. It instructs the browser to tile the graphic until it fills the page. Bet you didn't think of this as a link, did you?

BODY BACKGROUND=

IMG (image) - Displays a single photo or other graphic on your page. This is the link you use for navigation buttons, the picture of Aunt Minnie, or that amazing little letter that flys across the screen and tucks itself neatly into a mailbox.

IMG SRC=

A (anchor) - When used with the hyperlink reference tag, it creates a "hot link" to direct your visitor to a different URL.

A HREF=

Addressing a Link

The second part of a link is the URL or address. This is where you tell the browser how and where to find the file.

The web version of an address is called a path. Just like sending a letter, if the path/address is incorrect or incomplete, the link will probably not arrive at its destination. Here is a link=path to a graphics file that I'll be using on this page.

<img src="http://freepages.computers.rootsweb.com/
~pasher/graphics/it_worked.gif">

The very first thing the browser needs to know is how the file will be transferred from the server. This is not actually part of the URL, but is necessary so the browser and the server agree on how they will exchange information. Most of the time, you will want to download files using hyper text transfer protocol, indicated by http://

The first part of the address, freepages.computers.rootsweb.com, tells the browser which of the millions of servers on the WWW is hosting the file being called. Once the browser finds the correct server (URL), it needs to know where the file is stored on the server -- account name, subdirectory (if any), and file name. If you think of a web address as a postal address, it would look something like this:

state (server)		freepages.computers.rootsweb.com
city (account name)		~pasher
local address (subdirectory)		graphics
addressee (file name)		it_worked.gif

Each "line" or portion of the path is separated from the others by a forward slash; and the address starts with the general (the server), and ends with the specific (the file name).

Is it Relative or Absolute?

Suppose I call a delivery service to my office and ask the courier to deliver a package to an office one floor down and two doors closer to the elevator. Never mind that I'm too lazy to do it myself. <wink> I've described the location relative to my current location.

A relative link takes advantage of the fact that the browser knows where it is -- here and now, and simply supplies the minimum necessary information: how to get from here (the page containing the link) to there (another file at the same URL). The complete path is implied, rather than being spelled out.

<img src="graphics/it_worked.gif">

But if I ask the courier to deliver the package to my branch office in a different state, I'll have to give him absolute instructions so he can find the address. An absolute link contains all the information necessary to find a file anywhere on the World Wide Web:

<img src="http://freepages.computers.rootsweb.com/
~pasher/graphics/it_worked.gif">

When addressed correctly, an absolute link will always work; so why use relative links? Well, for one thing, they're usually much shorter, so they are easier to write without making a mistake. For another, why send the browser to search the entire web, when the file to which you are linking lives right next door?

Some URL Shorthand

A relative link can be used to link to any other file at the same URL. If your directory structure looks something like the one at the right, a relative link can be written from index.html to any file in the root directory (genealogy_html), or any of the subdirectories in that directory:

"aboutme.htm"
"documents/obituaries.html"
"families/brown/surnames.html"

Pretty slick, huh? But wait a minute! How do you link from one of those subdirectories back to index.html? You'll have to use an absolute link, right? Not at all. We just use some more HTML magic. It's called dot-dot-slash ( ../ ). Dot-dot-slash tells the browser to move one level back toward the root directory before looking for the path to the file. To link from obituaries.html to index.html, the browser must move back one level from documents to genealogy_html to find the file. The relative link is written like this:

"../index.html"

You can write a relative link from one subdirectory to another. To link from brown/surnames.html to jones/surnames.html, the browser must move back one level to the families directory to find the jones directory:

"../jones/surnames.html"

Need to move back two directories? No problem. From "jones/surnames.html" back through families to your home page in genealogy_html:

"../../index.html"

Just add one dot-dot-slash for every directory level you need to move back, until you find the path to the file.

Why Don't My Images Show?

There is one mistake that all web masters make sooner or later, no matter how experienced. They forget to remember the web is caSe seNsitivE. Upper and lower case letters make a difference. They make a BIG difference. If you write a link to MyImage.jpg and the file is named myimage.jpg, then the server will not be able to find it. On the server, MyImage.jpg is simply the "wrong" file name. And unlike the mailman, the server can't interpret variations of the address. If a postal address is 334 Brookhaven Street; and you address the envelope to 334 Brook Haven St., the chances are the postman will be able to figure out that you meant Brookhaven. He'll also know that "St." is an abbreviation for "Street". Computers aren't that smart. They believe you mean what you said, and said what you meant -- EXACTLY.

Write the link to the wrong file name, <img src="graphics/It-Worked.gif"> and you'll get this:
Make a mistake in syntax (can you spot what's missing? "Hint"), <img src=graphics/it_worked.gif"> and you'll get this:
While the correct link, <img src="graphics/it_worked.gif"> dutifully produces the desired image:

HTTP 404 - File not found

If the page/file you are linking to is your own, we can assume you know whether it is still on the server. So let's eliminate that possibility. That leaves name, path, or syntax. Hmm . . . Sounds familiar doesn't it? The same rules apply whether you are linking an image, or to another page. Upper and lower case letters must match. The path must be given, either relative or absolute. And the syntax must be correct.

Here are three links to a page called Naming WebPage Files. (You really ought to read this one too :-) One link works, the other two are "broken". See if you can figure out why.

<a href="http://freepages.rootsweb.com/~pasher/naming.htm"> Naming WebPage Files </a>

<a href="naming.htm"> Naming WebPage Files </a>

<a href="Naming.html"> Naming WebPage Files </a>

Back to: Adding a Link
TOP