This page’s goals

Know the difference between absolute, relative, and root relative links.

Be able to make a link open in a new browser tab or window.

Be able to create a table of contents for a long page.

How links are used

Links tie Web pages together. A link appears on a source page. Click it, and the browser shows the destination or target page.

Links are used in two main ways on Web pages. First, they can form navigation bars, also called nav bars. A navigation bar is a group of links that appear together in a block. Here’s a navigation bar:

Figure 1. Navigation bar

CSS makes each link look like a tab, but each one is just a regular link. Notice that the “lesson” link looks different from the others. This tells you that the page showing the navigation bar is in the Lessons section of the site.

Navigation bars can be just simple text as well. Here’s part of a navigation bar from Gmail:

Figure 2. Horizontal navigation bar – just text

So, the first way that links are used on Web pages is to make navigation bars.

The second way is just as part of the main content of a page. For example, here is a link to CoreDog’s articles list. It’s just a normal part of this paragraph.

Most links on a page are in navigation bars, or part of the content. But links are also used in tables of contents, site maps, and other things. We’ll look at tables of contents and site maps in this lesson.

Example: Dog nutrition

Let’s look at a scenario we’ll use to talk about links. Suppose you start a business around dog nutrition. You create a site at http://dognutrition.bz (available at the time of writing). The site has:

Tutorials on dog nutrition, like a page on nutrition for puppies and another on nutrition for older dogs.

Articles on more specific topics, like diet supplements for active large dogs.

A blog, where you write about new products, and whatever else interests you.

A catalog of products your customers can order.

You create the following directory structure:

Figure 3. Directories

Here’s what goes in each directory:

1

Root of the site - the home page (index.html) is here

2

HTML files for articles

3

HTML files for nutrition basics

4

HTML files for blog entries

5

Files shared across the site

6

HTML files for the products

Figure 4. What is stored in each directory.

Exercise: Puppy Swarm directories

Puppy Swarm wants a Web site. Puppy Swarm is a small company with lots of puppies. It offers the following services:

Swarm of joy. Liven up your party with a swarm of happy puppies. Puppy Swarm will bring them to you, take them away, and help you clean up.

Micro-swarm of cheer. Cheer up a friend with a visit from two puppies. Puppy Swarm will handle the transport and wrangling.

The content of the tag – Articles – is what the user sees. It’s between the <a> and the </a>. The href attribute gives the destination – /articles/. This is where the browser goes when the user clicks.

Some links have a complete URL, like http://coredogs.com/lesson/web-page-structure. But most don’t. They have shortened links, like web-page-structure. How does this work?

Absolute, relative, and root relative links

URLs can be absolute, relative, or root relative.

Absolute URLs

An absolute URL is complete, including a domain name. For example:

<a href="http://dognutrition.bz/basics/puppies.html">Articles</a>

Absolute URLs are used most when referring to someone else’s Web site, not your own. For example:

On the page Static Web pages, we talked about a server’s default file. When a browser gives a server just a path, like http://site.com/products/, the server knows what directory to look in – products – but not what file to send. So it looks in products for a file with a default name, usually index.html. If it finds the file, it sends that.

So, when a URL includes the default file name, you can omit it. For example, the OpenOffice link could be:

<a href="http://download.openoffice.org/">Download OpenOffice</a>

When the last character of the URL is /, you can leave it out. This is the same as the previous:

<a href="http://download.openoffice.org">Download OpenOffice</a>

Exercise: Link to Wikipedia

Create a file in the root of your Puppy Swarm site. Call it our-puppies.html. Add a link to Wikipedia’s article on puppies (http://en.wikipedia.org/wiki/Puppies). The page might look like this:

Relative URLs

These URLs are missing stuff at the beginning, and don’t begin with a /. For example:

<a href="puppies.html">Puppies</a>

This refers to a page in the same directory as the page containing the link. So if the link above was in the page http://dognutrition.bz/basics/index.html, then the browser would look for http://dognutrition.bz/basics/puppies.html.

However, if the link:

<a href="puppies.html">Puppies</a>

was in the page http://dognutrition.bz/products/food/index.html, the browser would look for http://dognutrition.bz/products/food/puppies.html.

The page you link to does not have to be in the same directory as the page containing the link, as long as you specify the path from the page with the link, to the target page.

Here’s the directory structure for dognutrition.bz we saw earlier, with some files added:

Figure 5. dognutrition.bz directories

Let’s say we’ve updated the puppy nutrition article. Its URL is http://dognutrition.bz/basics/puppies.html (please find it in Figure 5). We want to put a note on the home page, telling users that the article has been updated, with a link to the updated page:

Figure 6. Link to a file in a subdirectory

We might add this to the home page at http://dognutrition.bz/index.html:

You can make links to pages at higher levels in the directory tree. For example, you might have a link to the home page in an old blog entry.

Figure 7. Link to a file in a parent directory

The code might be:

<p><a href="../../index.html">Home</a></p>

../ means “go up a level.” So the URL is “go up a level (from /blog/archives/ to /blog/), then go up a level (from /blog/ to /), then find index.html.”

You can also navigate from one subdirectory to another. For example, in the page on the basics of puppy nutrition (http://dognutrition.bz/basics/puppies.html) there might be a link to a page in the supplements directory of the products section:

The code is in http://dognutrition.bz/basics/puppies.html. It says, “from the current directory (/basics/), go up a level, then go into the products/ subdirectory, then go into the supplements/ subdirectory, then find the file vita-mite.html.”

When a relative link navigates between subdirectories, it goes up the tree until it find a common parent, then goes down. In this example, the source is http://dognutrition.bz/basics/puppies.html. The destination is http://dognutrition.bz/products/supplements/vita-mite.html. Their common parent is http://dognutrition.bz/; it’s the part of their URLs they have in common.

Here’s another example. Suppose you have a link in the page http://dognutrition.bz/products/food/food1.html to the page http://dognutrition.bz/products/treats/treat1.html (please find both of them in Figure 8). They both have the common parent http://dognutrition.bz/products/, since both pages are under the products/ part of the Web site’s directory tree. So there’s no need for the link to navigate all the way back to the home page. The code might look like this:

<p>And here's a <a href="../treats/treat1.html">tasty treat</a>!</p>

This link is in http://dognutrition.bz/products/food/food1.html. It says “go up a level (from http://dognutrition.bz/products/food/ to http://dognutrition.bz/products/), then go down into treats/, and find the file treats1.html.” This link has the usual pattern: go up to the common parent (products/), and then go down.

So, you can make a link from any HTML page on your site to any other page. Specify the path with ../ and subdirectory names.

Exercise: Links from the home page

On the home page for Puppy Swarm, create a list of links to the index.html files for each of the sections, and to the Our Puppies page. Like this:

No matter where this link is on your site, it will always point to the same file.

Root relative links have two main uses. First, they’re good for linking from a page deep in your site to a page in another section of the site. You can leave out a lot of ../../../.

Second, they’re particularly useful in creating Web page templates. We’ll talk about those later in the book.

Which type of link should you use?

Suppose you’re just getting started with your dog nutrition business at dognutrition.bz. You’ve launched a beta (version for user testing) of the site, but haven’t done any promotion. The day after your site goes up, dognutrition.com becomes available. W00f! You snap it up, and decide to change everything to the new domain.

You would have to find everydognutrition.bz in every link and change it to dognutrition.com. It would be easy to miss one, leaving users with broken links, and maybe costing you business.

Now suppose you want to change the name of the products directory to dog-nutrition-products. Why would you do this? Because your pages might then rank higher in Google. That makes your products easier for people to find and buy, which means more money to support your coffee and chocolate habits.

OK, let’s rewind. What if you had used a relative link to start with? Like this:

<p>And here's a <a href="../treats/treat1.html">tasty treat</a>!</p>

You change to dognutrition.com, so you change the link to… Wait, you don’t have to change the link at all! It still works! The link doesn’t have dognutrition.bz in it, so there’s nothing to change. W00f!

What about changing the directory name to dog-nutrition-products? Again, the link is fine the way it is. There’s nothing to change. W00f times 2!

Most of your links should be relative. This makes your site easier to manage. And easy is good!

Use absolute links to refer to pages outside your domain. You don’t have much choice. For example:

<p>You should use <a href="http://www.mozilla.org/firefox/">Firefox</a>, because of its w00fy Weber add-ons. Also try <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.opera.com/">Opera</a>, and <a href="http://www.google.com/chrome/">Chrome</a>.</p>

Within-page links

Sometimes you want to create a link to a spot within a page. For example, the puppies.html page in the dog nutrition site might have a section for small breed puppies, like chihuahuas, and another for large breed puppies, like Great Danes.

You’ll notice that the page contains a lot of strange text. This is filler text that won’t distract from the page’s structure. Lorem ipsum text has been the printing industry’s standard dummy text since the 16th century, and Webers have adopted the tradition. You can read more about it, if you want to.

Extra attributes

The <a> tag has other attributes. If you want to open a linked page in a new window, use this:

<a href="www.google.com/" target="_blank">Google</a>

_blank stands for a blank window.

The title attribute pops up a message when the mouse hovers over the link. For example:

<a href="www.google.com/" target="_blank" title="Google search in a new window.">Google</a>

The URL contains search parameters, as if the user had typed them manually.

Links on images

So far, all of the links have shown text. But you can add links to images as well, like this:

<a href="/index.html"><img src="/library/home.png" alt="Home"></a>

The browser will jump when the user clicks on the image.

Exercise: Dog pals

Buddy, Honeyface, and Louieeeeee are three dog pals. Create a page for each one. Buddy’s page has a photo of Buddy, and links to Honeyface’s and Louieeeeee’s page. Honeyface’s page has a photo of Buddy, and links to Buddy’s and Louieeeeee’s page. Louieeeeee’s page…, well, you get the idea. All links are on thumbnail images.