Making links

This page’s goals

By the end of this page, you should:

  • Be able to use the <a> tag to make links.
  • 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.

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:

Horizontal 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:

Horizontal navigation bar - just text

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:

Directories

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.
  • Play swarm. Bring your dogs to our location for hours of fun.
  • Puppy training. Puppy Swarm’s expert puppy wranglers will help you train your puppy.
  • Puppy stuff. Puppy Swarm finds the best products for your puppy. Food, supplements, toys, leashes, crates, ...

Start by creating a set of folders for the Web site.

Directories for Puppy Swarm

Create an index.html file in the services and products directories. Each index.html file should have the name of the site and the name of the site section. Here’s an example:

Services

Create a home page (index.html in the Web root). Here’s an example:

Home page

Create a directory for this project on your server. Upload your files there. You can enter the URL of the site’s home page below.

(Log in to enter your solution to this exercise.)

Now, let’s see how to make links.

The <a> tag

Use the <a> tag to create links. Here’s an example:

<a href="/articles/">Articles</a>

It renders like this:

Articles

The tag has two parts to it:

  • The content the user sees.
  • The URL to go to when the user clicks on the content.

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?

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:

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

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:

Link to Wikipedia

You can enter the URL of your solution below.

(Log in to enter your solution to this exercise.)

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:

Directories

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:

Link to a file in a subdirectory

Figure 6. Link to a file in a subdirectory

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

<p>We've updated our page on <a href="basics/puppies.html">puppy nutrition basics</a>. Check it out!</p>

The browser looks for a directory called basics in the current directory, then looks for a file called puppies.html inside that.

Actually, the browser does the same thing it does for image URLs:

  • Take the URL of the referring page (http://dognutrition.bz/index.html).
  • Drop off the file name (that’s index.html, leaving http://dognutrition.bz/).
  • Append the URL from the <a> tag (that’s basics/puppies.html, giving http://dognutrition.bz/basics/puppies.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.

Link to a file in a parent directory

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:

Link to file in another subdirectory

Figure 8. Link to a file in another subdirectory

The code might be:

<p>We recommend <a href="../products/supplements/vita-mite.html">Vita Mite</a></p>

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:

List of links

You can put the URL of your solution below.

(Log in to enter your solution to this exercise.)

Root relative URLs

You’ve seen absolute URLs and relative URLs. There’s a third category. It’s the root relative URL.

This is an absolute link to a page on your site, but with the domain name missing. Root relative URLs start with /, which means “go to the root of the site and then follow the path to a file.”

Here’s some code:

<p>Read our <a href="/basics/puppies.html">updated puppy nutrition page</a>.</p>

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.

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.

What if you had used absolute URLs in your links? Like this:

<p>And here's a <a href="http://dognutrition.bz/products/treats/treat1.html">tasty treat</a>!</p>

You would have to find every dognutrition.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.

Again, you have to change the link above. This time, to:

<p>And here's a <a href="http://dognutrition.bz/dog-nutrition-products/treats/treat1.html">tasty treat</a>!</p>

Ack! What an unw00fy thing.

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>

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.

...
<body>
...
<h2>Small breed puppies</h2>
...
<h2>Large breed puppies</h2>
...
</body>
...

Figure 9. Puppies page

Suppose you were writing a blog entry, and wanted to add a link to the large breed section of puppies.html. First, you would add an id to the destination in puppies.html:

<h1 id="large_breed">Large breed puppies</h1>

In your blog page, add this link:

<p>You can read more about <a href="/basics/puppies.html#large_breed">more about large breed puppies</a>.</p>

The href attribute has a #, followed by the id of the destination in puppies.html.

You can link to sections of the same page. For example, you might put this in puppies.html:

<p>Read more about large breeds <a href="#large_breeds">later on this page</a>.</p>

When there’s nothing in front of the #, your browser will look in the current page, that is, the one it’s showing.

Example: Table of contents

You can use internal links to make a table of contents for a long page. Here’s an example. You can try it.

<h1>Puppy Nutrition</h1>
<p>Contents:</p>
<ul>
  <li><a href="#small_breed_puppies">Small breed puppies</a></li>
  <li><a href="#large_breed_puppies">Large breed puppies</a></li>
</ul>
<p>Lorem ... libero.</p>
<h2 id="small_breed_puppies">Small breed puppies</h2>
<p>Lorem ... libero.</p>
<h2 id="large_breed_puppies">Large breed puppies</h2>
<p>Lorem ... libero.</p>

Figure 8. Table of contents

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>

You could also do:

<a href="http://www.google.com/search?q=dog+nutrition" target="_blank" title="Search for 'dog nutrition' in Google. Opens a new window.">Google "dog nutrition"</a>

The ?q=… tells Google to actually run a search. Try it:

Google “dog nutrition”

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

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.

Here’s a zoomed out view of Buddy’s page:

Buddy's page

Here are photos you can use.

Buddy thumbnail Buddy

Honeyface thumbnail Honeyface

Louieeeeee thumbnail Louieeeeee

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

If you want to suppress the border on images with links, you can use border: none; in your CSS. Check the page on Styling boundaries for more on CSS and images.

Summary

On this page, you learned:

  • How to use the <a> tag.
  • The difference between absolute, relative, and root relative links.
  • How to make a link open in a new browser tab or window.
  • How to create a table of contents for a long page.

What now?

This lesson is about making links between pages. Put links together with the things you learned in earlier lessons – text, interaction, and images – and you have all you need for a basic Web site.

You’ve seen how to make basic links, but they don’t look great. Let’s fix that.


How to...

Lessons

User login

Log in problems? Try here


Dogs