Section 8.1. Understanding the Anchor

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:

 <a>Click Me</a> 

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.

Figure 8-1. If you don't take any other steps to customize the anchor tag, the text appears with the familiar underline and blue lettering in the browser. When you move the mouse over a hyperlink, the mouse pointer turns to a hand. You can't tell by looking at a link whether or not it works. If the link points to a non-existing page, you'll get an error only after you click it.

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:

  • Internal links point to other pages or resources (for example, downloadable files) in your Web site.

  • External links point to pages or resources in other Web sites.

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 (, 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.

Changing Link Color with Style Sheets

Virtually everyone born since the year 1900 has an instinctual understanding that blue underlined text is there to be clicked. But what if blue links are at odds with the overall look of your site? Thanks to style sheets, you don't need to play by the rules.

Based on what you learned about CSS in Chapter 6, you can quickly build a style sheet rule that changes the text color of all the link-producing anchor tags in your site. Here's an example:

 a {   color: fuchsia; } 

But watch out: making this change creates two problems. First, ordinary links look different after you've clicked them (they turn from blue to red). The style sheet rule in this example overrides that subtle modification, which many Web surfers depend on to know which links they've clicked in a site. Second, if you apply a rule to all anchor tags, it also affects any bookmarks (see Section 8.3), which probably isn't the behavior you want.

A better way to create colorful links is to use another style sheet trick: pseudo-selectors . Pseudo-selectors are more specialized selectors (Section 6.1.3) that rely on other details that the browser keeps track of behind the scenes. For example, an ordinary selector applies to a given tag, like <a>. A pseudo-selector can apply specifically to clicked or unclicked links. Pseudo-selectors are a mid-range CSS feature, which means they don't work on very old browsers like Internet Explorer 4 and Netscape 4.

There are four pseudo-selectors that help you format links. They are :link (for links that point to virgin ground), :visited (for links that have already been visited), :active (the color a link turns while you're clicking it, just before the new page appears), and :hover (the color a link turns when you move the mouse over the link). As you can see, pseudo-selectors always start with a colon (:).

Here's a style rule that uses pseudo-selectors to create a misleading pageone where visited links are blue and unvisited links are red:

 a:link {   color: red; } a:visited {   color: blue; } 

If you want to apply these rules to some, but not all, links, you can use a class name with your pseudo-selector rule:

 a.BackwardLink:link {   color: red; } a.BackwardLink:visited {   color: blue; } 

Now the anchor tag needs to specify the same class to get this style, as you can see in this line:

 <a class="BackwardLink" href=""> </a> 

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=  "">hydrangeas</a>? 

So which approach should you use? Deciding's easy. There are exactly two rules you should keep in mind:

  • If you're creating an external link, you must use an absolute URL .

    In this situation, a relative URL just won't work. For example, imagine you want to link to the page home.html on Amazon's Web site. If you create a relative link, the browser will assume that home.html refers to that file on your Web site. Clicking the link won't take your visitors where you want them to go (and may not take them anywhere at all, if you don't have a file with that name on your site).

  • If you're creating an internal link, you really, really should use a relative URL .

    Technically, either type of link works in this situation. However, relative URLs have several advantages. First, they're shorter and make the HTML more readable and easier to maintain. More importantly, relative links are flexible. You can rearrange your Web site, put your files into a different folder, or even change the domain name of your Web site without disturbing your relative links.

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 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 . 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 . If you decide to buy a new, shorter domain name like and move your Web site there, the links keep on working.

Navigating and Frames

How do I make a link that opens in a new browser window ?

When visitors click on external links, you might not want to let them get away that easily. A common trick that Web sites use is to open external Web sites in separate browser windows . This way, your Web site remains open in its original window, ensuring the reader won't forget about it.

To make this work, you need the help of another HTML feature frames . Using frames, you can open a document in a specific section of the browser window or even in an entirely new window. Chapter 10 covers frames in detail. However, you don't need to understand frames just to open a link in a new window. All it requires is one extra attribute in your anchor tag, like this:

 >a href="LinkedPage.htm"  target="_blank"  < Click Me>/a< 

The target attribute names the frame where the destination page should be displayed. The value _blank indicates that the page should be loaded into a new frame, in a new, empty browser window.

Some people love this feature, while others think it's an immensely annoying and disruptive act of Web site intervention. If you use it, apply it sparingly on the occasional link.

It's also worth noting that some vigilant pop-up blockers intercept this type of link and prevent the new window from appearing altogether. (Pop-up blockers are standalone programs or browser features designed to prevent annoying pop-up ads from appearing.) Internet Explorer 6 includes its own pop-up blocker, but its standard settings allow links that use target="_blank".

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 automatically returns the default page

Figure 8-2. This diagram maps out the structure of a very small Web site featuring photos taken on a trip. The root folder contains a style sheet used across the entire site (styles.css) and two HTML pages. Two subfolders, Trip1998 and Trip2005, contain additional pages. The Trip2005 folder holds thumbnail images of pictures taken on one of the trips. For each thumbnail, there's a corresponding full- size picture in the Photos subfolder.

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 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. 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.

Figure 8-3. Using a relative link, you can jump from the main index.htm page (top) to a page with picture thumbnails (bottom). Each picture is itself a linkclick it to see a larger- sized version of the picture.

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. 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. 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, 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 ( and then adds the relative part of the path, starting with your personal folder.

The Rules for Relative URLs

The rules for correctly writing a URL in an anchor tag are fairly strict, and there are a few common mistakes that creep into the best Web pages. Here are some pointers to help you avoid these headaches :

  • When creating an absolute URL, it must start with the protocol (usually http://). You don't need to follow this rule when typing a URL into a browser. For example, if you type, most browsers are intelligent enough to assume the http:// part. However, in an HTML document it's mandatory.

  • Don't mix up the backslash (\) and the ordinary forward slash (/). In the Windows world, the backslash is used in file paths (like C:\Windows\win.ini ). In the Web world, the forward slash separates subfolders (as in Once again, many browsers tolerate backslash confusion, but the same mistake in an anchor tag will break your links.

  • Don't ever use file paths instead of a URL. It's possible to create a URL that points to a file on your computer using the file protocol (as in file:///C:/Temp/myPage.htm ). However, this link won't work on anyone else's computer, because they won't have the same HTML file on their hard drive. Sometimes, design tools like FrontPage may insert one of these so-called local URLs (for example, it can occur if you drag and drop a picture file into your Web page). Be vigilantcheck all your links to make sure this doesn't happen.

  • Don't use spaces or special characters in your file or folder names, even if these special characters are allowed. For example, it's perfectly acceptable to put a space in a file name (like My Photos.htm ), but in order to request this page, the browser needs to translate the space into a special character code ( My%20Photos.htm ). To prevent this confusion, just steer clear of anything that isn't a number, letter, dash (-), or underscore (_).

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:

  • You can link to a JPEG, GIF, or PNG image file (Section 7.1.4) . When the visitor clicks this link, the browser displays the image in the browser window without any other content. Web sites often use this approach to let visitors take a look at large graphics. For example, the trip Web site presented in the previous section has a page chock full of small image thumbnails. Click on one of these, and you'll see the full-size image appear.

  • You can link to a specialized type of file, like a PDF file, a Microsoft Office document, or an audio file (like a WAV or an MP3) . When you use this technique, you're taking a bit of a risk. These links rely on the browser having a plug-in that recognizes the file type, or a suitable program installed on the computer. If the surfer's computer doesn't have the right software, the only thing they'll be able to do is download the file to their computer (see the next point), where it will sit like an inert binary blob. However, if they do have the right plug-in, a small miracle happens. The Office, PDF, or audio file opens up right inside the browser window, as though it were a Web page!

  • You can link to a file you want others to download . If a link points to a file of a specialized type and the browser doesn't have a plug-in that wants to deal with that file type, the browser usually gives the Web surfer a choice. The visitor can ignore the content altogether, open it using another program on their computer, or save it on the computer. This is a handy way to distribute large files (like a ZIP file featuring your personal philosophy of planetary motion).

  • You can link to an email message . Everybody's favorite form of note-sending these days is email. It's easy to build a link into a Web page that fires up your visitors' favorite email program and helps them send a note to you. Section 12.2 has all the details.

Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
Year: 2003
Pages: 135

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: