MS FrontPage —

Understanding Hyperlinks

Sure, you know what a hyperlink is. You've clicked them to check the weather at the beach, to learn about giant squid, and to find bobble head dolls on eBay. But do you really know exactly what's happening behind the scenes when you click on a link?

A hyperlink is an HTML command that tells a browser to display a specific Web page. A link can lead to another spot on the same Web page or across the world to a different Web site.

Sounds pretty simple. But since you're about to create hyperlinks, not just click them, you'll need to learn a bit more. For example, there are different kinds of hyperlinks: absolute and relative. FrontPage helps you manage each type, but you should know how they work.

Hyperlinks in HTML Code

A Hyperlink in HTML looks like this:

    <a href="http://www.cnn.com/">Get news
    now.</a>

A viewer sees only the text between the tags, of course. It appears as a hyperlink. In other words, the phrase "Get news now." is underlined or displayed in a different color, depending on how you've formatted the link's appearance.

When a cursor passes over the phrase, its arrow changes into a "click here" pointing hand.

What do the tags mean? The a at the beginning of the tag stands for anchor. An <a> tag marks the hot spot that links to another page or file. The href attribute (short for "hypertext reference") specifies the address of the page the link opens. The sample link above opens CNN's home page.

Absolute vs. Relative URLs

Say you've just published your new Web site. It looks great out there on the Web, but wait! Your links aren't working. Your images don't show up. What happened?

A lot of new Web authors run into problems like these because no one ever told them about the difference between absolute and relative URLs. This section tells you everything you need to know.

What's a URL?

The destination of a hyperlink is called a URL (Uniform Resource Locator). URLs don't just appear within a Web page's HTML code. You find URLs all over the placeeven in magazine ads and on TV. A URL is simply an Internet address. For instance, the URLhttp://www.eatyourveggies.com/greens/lettucIndex_4.htm brings one distinct page that's out on the Web into your browser's window.

URLs are divided up into different sectionsall of which direct a browser to a particular page. Here's a look at how the above address breaks down:

  • http stands for hypertext transfer protocol. A protocol is a set of communication rules that lets the browser know how to converse with the Web server. (Other protocols you might have seen are FTP [File Transfer Protocol] and email protocols like POP (Post Office Protocol) or IMAP (Internet Message Access Protocol).

  • www.eatyourveggies.com specifies the domain, or Web server address, where the site is stored.

  • greens is the name of a folder within that Web site.

  • lettucIndex_4.htm is the name of the actual Web page that opens in the browser.

Absolute URLs

The World Wide Web is a big place. A browser uses every part of a URL to find the particular page that a hyperlink is pointing to. For example, the combination of domain name, folder, and file name in the Web address listed above is precise and unique, much like a phone number that is connected to one particular household. In either case, the location is absolute. Just as there's no other house in the world that has your phone number, every absolute URL points to one specific Web page.

Relative URLS

On the other hand, when you link to another page inside your own Web site, things work differently. That's because a browser doesn't need as much information. If a browser is on your site's home page, it already has some of the address details that it needs. It knows the first two components of the Web address: the protocol it's using, and the Web server (or domain) it's on. So, if you direct the browser to another location within the same domain, it needs only to know how to get there from where it is. That means that links within your site are described in relative terms. To use the phone number analogy: when you're inside an office, you need only to dial a person's extensionrather than her complete numberto reach her. Same goes for relative URLs: they need only to indicate the path in relation to the current page.

Relative Web addresses are pretty straightforward, but one thing that can help when you're trying to understand how they work is to think about how Web pages get stored when you're creating a Web site.

When you create a Web site, you store your files within folders (also called directories), as illustrated in Figure 3-1. You do this to help organize your pages. (Building and Managing a Website tells you more about why and how maintaining this organization is helpful.) In a relative hyperlink, you're letting the browser know how to navigate through this folder structure.

Imagine that your browser is visiting the Index1.htm page of the Web site illustrated in Figure 3-1. When you click the "gloves" link on the index page, you're telling the browser to open the gloves.htm page. How does your browser get there? By reading that link's relative URL: /accessories/gloves.htm. This URL tells the browser to open up the accessories folder and display the gloveIndex_19.htm file.

Once you've checked out all the gloves, you click a link on the gloves.htm page to get back to the home page (Index1.htm). To go there, the browser needs to get out of the accessories folder and back into the root folder. In other words, the browser goes up one folder level. The link from gloves.htm to Index1.htm has this relative URL: ../Index1.htm. The ../ in front of the file name tells the browser to go up one folder level. The URL ../../Index1.htm would tell a browser to go up two folder levels and look for the Index1.htm file.

Figure 3-1. Here's a simple example of a Web site's folder structure. The clothingstore folder contains the whole Web site. This folder is the first or main level of the site, often called the root directory. The Index1.htm file (the site's home page) lives in the root directory. The gloves.htm file lives one folder level down, within the accessories folder..

What all this means to you

Here's the bottom line: you use absolute URLs to link to pages on other Web sites. You use relative URLs to link to pages and files within your own site. Actually you won't really need to manage this yourself. When you create a link within your site, FrontPage automatically formats the URL as relative without any intervention on your part. However, when you have problems with hyperlinks, you can use your knowledge of URL types to troubleshoot.

Keep Your Site Together

I created a hyperlink to a PDF file. The link works when I'm testing the site on my own computer, but not when it's up on the Web server. What went wrong?

Most Web authors create and edit their sites on their own PCs and then publish them to a Web server so the public can see them. When a site contains a link pointing to a file on the PC but somewhere outside the Web site folder, the link won't work when the site gets moved onto a Web server.

For example, say the URL for that PDF file is something like C:\My Documents\Reports\june\profits.pdf. The link works on your computer, because you have access to that particular file. But once you copy the Web site folder up onto the live server, that same URL causes a problem. In the server environment, there's no such place as C:\My Documents\Reports, so a browser can't find the file.

The bottom line: you want to link to a file? Always import it into your Web site's folder structure first. (Select File » Import, then browse to and select the file.) Keep all your files stored together somewhere within your site's folder. That way, files in your site will live and travel together in one big package.