Want a tiled background image? 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 LinksThe HTML for a link consists of two parts. The first part indicates the type of link. The three types you will use most often are:
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?
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 and Uncle Walter, and that amazing little letter that flys across the screen and tucks itself neatly into a mailbox to indicate an email link.
a(nchor) - When used with the hyperlink reference attribute, it creates a hot link to direct your visitor to a different URL.
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.
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 thousands of servers on the WWW is hosting the file being called. Once the browser finds the correct server (domain), 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:
Each "line" or section of the path is separated from the others by a forward slash; and unlike addressing an envelope, a web 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 information necessary to get from the current location (the page containing the link) to another location in the same neighborhood. The complete path is implied, rather than being spelled out.
But if I ask the courier to deliver a package to my branch office in a different city or 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:
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. And as long as the directory structure on your computer is the same as on your web site, relative links will work both on line and off. 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:
Pretty slick, huh? But wait a minute! How do you
link from one of
those subdirectories back to
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:
Need to move back two directory levels? No problem. From "jones/surnames.html" back through families to your home page in genealogy_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
difference. If you write a
HTTP 404 - File not found
There are four possible reasons why a file can not be found:
If the page you are linking to is your own, we can assume you know if you removed it. So let's eliminate that possibility. That leaves name, path, and 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 <wink>) One link works, the other two are "broken". See if you can figure out why.
<a href="naming.htm"> Naming WebPage Files </a>
<a href="Naming.html"> Naming WebPage Files </a>