8.1. Understanding the Anchor
In HTML, you use the anchor tag to create a link that, when clicked, transports the Web site reader to another page.
The anchor tag is a straightforward container tag. It looks like this:
Inside the anchor tag, you put the clickable content:
The problem with the above link is that it doesn't point anywhere . To turn this into a fully functioning link, you need to supply the URL of the destination page using the href attribute (which stands for hypertext reference ). For example, if you want a click to take the reader to a page named LinkedPage.htm , you'd create this link:
<a href="LinkedPage.htm">Click Me</a>
In order for this line to actually work, the LinkedPage.htm file must reside in the same folder as the Web page that contains the link. You'll learn how to become more organized and sort your pages into different subfolders on Section 8.1.2.
Tip: To create a link in FrontPage, select the clickable text, and hit Ctrl+K. You can then browse to the correct page, and FrontPage will create the relative link. Dreamweaver and Nvu work the same way, when you press Ctrl+L.
The anchor tag is an inline tag (Section 5.2) that fits inside any other block element. That means it's completely acceptable to make a link out of just a few words in an otherwise ordinary paragraph, like this:
<p> When you're alone and life is making you lonely<br> You can always go <a href="Downtown.htm">downtown</a> </p>
Figure 8-1 shows this link example in action.
8.1.1. Internal and External Links
Links can shuffle you from one page to another in the same Web site, or they can transport you to a completely different Web site on a far-off Web server. Depending on which task you're performing, you use a different type of link.
Conceptually, there are two types of links:
For example, if you want visitors to surf from your bio page ( MyBio.htm ) to another page on your site with your address information ( ContactMe.htm ), you need to create an internal link. In all likelihood , you'll have stored both files in the same folder, and even if they aren't they're still part of the same Web site on the same Web server. On the other hand, if you want visitors to surf from your favorite books page ( FavBooks.htm ) to somewhere on Amazon (www.amazon.com), you need an external link. Clicking this type of link transports the reader out of your Web site and on to a new site, located elsewhere on the Web.
When you create an internal link, you should always use a relative URL , which tells the browser the location of the target page relative to the current folder. In other words, it gives instructions on how to find the new folder by moving up or down from the current folder. (Moving down means moving from the current folder into a subfolder. Moving up is the reverseyou travel from a subfolder into the parent folder that contains it.)
All the examples you've seen so far use relative URLs. For example, imagine you surf to this page:
The Products.htm page includes a relative link that looks like this:
Would you like to learn more about our purple <a href="Flowers.htm">hydrangeas</a>?
In this case, Flowers.htm is a relative URL. If you click this link, the browser automatically assumes that Flowers.htm is stored in the same location as Products.htm , and it fills in the rest of the URL. That means the browser actually requests this page:
HTML gives you another option, called an absolute URL , which defines the whole URL exactly, including the domain name, folder, and page. For example, you could convert the previous example into an absolute URL that looks like this:
Would you like to learn more about our purple <a href= "http://www.GothicGardenCenter.com/Sales/Flowers.htm">hydrangeas</a>?
So which approach should you use? Deciding's easy. There are exactly two rules you should keep in mind:
One of the nicest parts about relative links is that you can test them on your own computer, and they'll work the exact same way as they do online. For example, imagine you've developed the www.GothicGardenCenter.com Web site on your own computer and have stored it inside the folder C:\MyWebSite (that'd be Macintosh HD/MyWebSite , in Macintosh-ese). If you click the relative link that leads from the Products.htm page to the Flowers.htm page, the browser looks for the target page in the C:\MyWebSite ( Macintosh HD/MyWebSite ) folder.
Once you've polished your work to perfection , say you upload the site to your Web server, which has the domain name www.GothicGardenCenter.com . Because you've used relative links, you don't need to change anything. Now, when you click on a link, the browser requests the corresponding page in www.GothicGardenCenter.com . If you decide to buy a new, shorter domain name like www.GGC.com and move your Web site there, the links keep on working.
8.1.2. Relative Links and Folders
So far, all the relative link examples you've seen have assumed that both the source page (the one that contains the link) and the target page (the destination you arrive at when you click the link) are in the same folder. There's no reason to be quite this strict. In fact, your Web site will be a whole lot better organized if you store groups of related pages in separate folders.
For example, consider the Web site shown in Figure 8-2.
Note: The root folder is the starting point of your Web siteit contains all other files and folders. Most Web pages include a page with the name index.htm or index.html in the root folder. This is the default page (Section 3.2). If a browser sends a request to your Web site domain without supplying a file name, the Web server sends back the default page. For example, requesting www.TripToRemember.com automatically returns the default page www.TripToRemember.com/index.htm.
The Web site shown in Figure 8-2 uses a variety of different relative links. For example, imagine you need to create a link from the index.htm page to the contact.htm page. Both of these pages are in the same folder, so all you need is a relative link:
<a href=" contact.htm ">About Me</a>
You can also create more interesting links that move from one folder to another, which you'll learn how to do in the following sections.
Tip: If you'd like to try out this sample Web site, you'll find all the site's files on the "Missing CD" page at www.missingmanuals.com. Thanks to the magic of relative links, all the links will work fine no matter where you copy the files on your computer (PC or Mac), as long as you keep the same subfolders.
22.214.171.124. Moving down into a subfolder
Say you want to create a relative link that jumps from the index.htm page to the antarctica .htm page in the Trip2005 folder. Now you need to include the name of the subfolder in your relative link, like this (remember, this line of code should be on the index.htm page):
See pictures from <a href= "Trip2005/antarctica.htm" >Antarctica</a>
This link gives the browser two instructionsgo into the subfolder Trip2005, and get the page antarctica.htm . In the link, the folder name ("Trip2005") and the file name ("antarctica.htm") are separated by a slash (/). Figure 8-3 shows both sides of this equation.
Interestingly, you can use relative paths in other HTML tags, like the <style> tag and the <img> tag. For example, imagine you want to show the picture photo01.jpg in the page index.htm . This picture is two subfolders away, but that doesn't stop you from linking to it:
<img src= "Trip2005/Photos/photo01.jpg" alt="A polar bear">
Using these techniques, you can dig even deeper into subfolders of subfolders of subfolders. All you need to do is add the folder name and a slash character for each subfolder, in order.
But remember, links are always relative to the current page . If you want to display the same picture in the antarctica.htm page, that <img> tag above won't work, because the antarctica.htm page is in the Trip2005 folder (take a look back at Figure 8-2 if you need a visual reminder of the site structure). From the Trip2005 folder, you only need to go down one level, so you need this link:
<img src= "Photos/photo01.jpg" alt="A polar bear">
By now, you've probably realized that the important detail is not how many folders you have in your site, but how you've organized them. Remember, a relative link always starts out from the current folder, and works it way up or down to the folder holding the target page.
Tip: One you start using subfolders, you shouldn't change the names of any of the folders or move them around. That said, many Web page editors (like FrontPage) are crafty enough to help you out if you do make these changes. When you rearrange pages or rename folders inside these programs, they can adjust your relative links automatically to take into account the new structure. It's yet another reason to think about getting a full-featured Web page editor.
126.96.36.199. Moving up into a parent folder
The next challenge you'll face is going up a folder level. To accomplish this task, you need to use the character sequence ../ (two periods and a slash). For example, if you want to add a link in the antarctica.htm page that returns the reader to the index.htm page, it would look like this:
Go <a href= "../index.htm" >back</a>
And as you've probably guessed by now, you can use this command twice in a row to jump up two levels. For example, if you have a page in the Photos folder, you would need this link to get back to the index page:
Go <a href= "../../index.htm" >back</a>
For a more interesting feat, you can combine both of these tricks to create a relative link that travels up one or more levels and then travels down a different path . For example, you'd need this sort of link if you wanted to jump from the antarctica.htm page in the Trip2005 folder to the idaho .htm page in the Trip1998 folder. Here's the link you need:
See what happened in <a href= "../Trip1998/idaho.htm" >Idaho</a>
This link moves up one level to the root folder, and then back down one level to the Trip1998 folder. You follow the same process when you're browsing files on your computer.
188.8.131.52. Moving into the root folder
The only problem with the relative links that you've seen so far is that they're difficult to maintain if you ever end up reorganizing your Web site. For example, imagine you have a Web page in the root directory of your Web site. Say you want to feature an image on that page that's stored in the images subfolder. You'd use this link:
<img src= "images/flower.gif" alt="A flower">
But then, a little later on, you decide your Web page really belongs in another spota subfolder named plant so you move it there. The problem is that the link now points to plant/images/flower.gif , which doesn't exist. As a result, your image link is broken.
There are a few possible workarounds. In programs like FrontPage, when you drag a file to a new location, the HTML editor updates all the relative links automatically, saving you the hassle. Another approach is to try to keep related files in the same folder, so that you always move them as a unit. However, there's a third approach, called root-relative links.
So far, the relative links you've seen have been document-relative , because they're based on the current location of the Web page document that contains the link. Root-relative links are based on the root folder in your Web site. They always start with the slash (/) character (which indicates the root folder).
Here's the <img> tag for flower.gif with a root-relative link:
<img src= "/images/flower.gif" alt="A flower">
The remarkable thing about this link is that it works no matter where you put the Web page that contains it. For example, if you copy this page to the plant subfolder, the link still works, because the first slash refers to the root folder.
The only trick to using root-relative folders is that you need to keep the real root of your Web site in mind. When using a root-relative link, the browser follows a simple procedure to figure out where to go. First, it strips all the path and file name information out of the current page address, so that it's left with nothing but the domain name. It then adds the relative link on the end. So if you're on this page:
The browser strips away the /horticulture/plants/annuals.htm portion, adds the relative link, and then looks for the picture here:
This makes perfect sense. But consider what happens if you don't have your own domain name. In this case, your pages are probably stuck in a subfolder on another Web server. Here's an example:
In this case, the domain name part of the URL is http://www.superISP.com, but for all practical purposes, the root of your Web site is your personal folder ~user9212 . That means you need to add this detail into all your root-relative links. To get the result you want with the flower.gif picture, you'd need to use this messier root-relative tag:
<img src="/~user9212/ images/flower.gif " alt="A flower">
Now the browser strips out just the domain name part of the URL (http://www.superISP.com) and then adds the relative part of the path, starting with your personal folder.
8.1.3. Linking to Other Types of Content
Most of the links you write will point to bona fide HTML Web pages. But that's not your only option. You can link directly to other types of files. The only catch is that it's up to the browser to decide what to do when someone clicks a link that points to a different type of file.
Here are some common examples: