NHS Designs
Web Design
HTML

HTML 14: The <a> Element

Linking To Other Web Sites

URLs aren't just for typing into browsers. You can use them right in your HTML. And, or course, right on cue, the Starbuzz CEO has a new task for you: make a link from the main Starbuzz page over to the caffeine information at http://buzz.headfirstlabs.com. As you can probably guess, we're going to throw that URL right inot an <a> element. Here's how:

<a href="http://buzz.headfirstlabs.com">Caffeine Buzz</a>

We start with an everyday, normal, garden-variety <a> element. Clicking on the label "Caffeine Buzz" will retrieve a page from buzz.headfirstlabs.com.

That's all there is to it. To link to any resource on the Web, all you need is its Uniform Resource Locator, which goes in the <a> element as the value of the href attribute. Let's go ahead and add this in the Stabuzz "index.html" page.

 

Exercise 1: Linking to Caffeine Buzz

  • Locate your "index.html" file inside your Starbuzz folder. If you do not have one, right click on this link and download the file to your folder.
  • Open index.html in a browser to view the design.
  • Open index.html in Notepad to edit the code. Scroll down to the bottom, where we will add two new links:
    • A relative link to the Mission Statement in "mission.html"
    • An absolute link to the Caffeine Buzz

     <h2>Chai Tea, $1.85</h2>
     <p>
          A spicy drink made with black tea, spices,
          milk and honey.
     </p>
     <p>
          Read about our
          <a href="mission.html">Mission</a>
     </p>
     <p>Read the <a
          href="http://buzz.headfirstlabs.com">Caffeine
          Buzz</a>
     </p>
</body>
</html>

  • Save and test your file in the browser.

 

Improving Accessibility by Adding a Title to Links

Wouldn't it be nice to get more information about the link you're about to click on? This is especially important for the visually impaired using screen readers because they don't often want the entire URL spoken to them ("h" "t" "t" "p" ":" "slash" "slash" "w" "w" "w" "dot"...). Yet the link's label usually only gives a limited description, like "Caffeine Buzz".

The <a> element has an attribute called title just for this purpose. Some people are confused by this attribute name because there's an element called <title> that goes in the <head>. They have the same name because they are related - it is often suggested that the value of the title attribute be the same as the value of the <title> element of the Web page you're linking to. But that isn't a requirement and often it makes more sense to provide your own, more relevant description in the title attribute.

 

Exercise 2: Adding a title Attribute

Here's how you add a title attribute to the <a> element:

Read the <a href="http://buzz.headfirstlabs.com" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>

Make sure there is a single space between href="http://buzz.headfirstlabs.com" and title="Read all about caffeine on the Buzz".

Now that we've got a title attribute, let's see how your visitors would make use of it. Different browsers make different use of the title, but many display a tool tip. Save your index.html file and refresh the page in the browser to see how it works.

 

Linking into a Page

So far, whenever you've linked to another page, the page loads and your browser displays it from the top.

But, the CEO's now asking you to link into a particular spot in the page: the Coffee section.

Sound impossible? We've got the technology. It turns out the <a> element can play two roles: you've alreayd seen it act as the jumping off point for traveling from one page to another. It can also act as a landing point or destination of a link.

When you use an <a> element to create a destination, we call that a "destination anchor".

Creating a destination is straightforward. here's how you can do it in three short steps:

  • Find the location in the page where you'd like to create a landing spot. this can be any text on the page, but often it's just a short piece of text in a heading.
  • Wrap the text within an <a> element.
  • Choose an identifier name for the destination, like "coffee" or "summary" or "bio", and insert an id attribute into your <a> element.

 

Exercise 3: Using the <a> Element to Create a Destination

Let's give this a try. Say you want to provide a way to link to the Chai Tea item on the Starbuzz page. Here's what it looks like now:

     <h2>Chai Tea, $1.85</h2>
     <p>
          A spicy drink made with black tea, spices,
          milk and honey.
     </p>

Following the three steps above, we get this:

     <h2><a id="chai">Chai Tea, $1.85</a></h2>
     <p>
          A spicy drink made with black tea, spices,
          milk and honey.
     </p>

  • Add the <a> opening tag before the text.
  • Give this destination the identifier "chai".
  • And then end the element with a closing tag.
  • Make sure your <a> element is properly nested inside your <h2> element.

You've now made a destination anchor out of the Chai Tea heading in the "index.html" page. Test the page in a browser - notice that Chai Tea is not clickable. That is because you do not have an href attribute in the <a> element.

 

How to Link to a Destination Anchor

You already know how to link to pages using either relative links or URLs. In either case, to link more specifically to a destination anchor in a page, just add a # on the end of your link, followed by the destination anchor identifier. So if you wanted to link from any Starbuzz Coffee Web page to the "chai" destination anchor you'd write your <a> element like this:

<a href="index.html#chai">See Chai Tea</a>

Unfortunately, linking to Chai Tea with a destination anchor isn't very impressive because the whole page is small enough that it easily fits in the browser. The main benefit of destination anchors is to link to locations in long files so your visitors don't have to scroll through the file looking for the right section.

Let's link to the Coffee section of http://buzz.headfirstlabs.com instead. Here's what you're going to do:

  • Figure out the id of the destination anchor.
  • Alter the existing <a> element in the Starbuzz Coffee index.html file to point to the destination anchor.
  • Reload your "index.html" page and test out the link.

 

Exercise 4: Finding the Destination Anchor

To find the destination anchor, you're going to have to look at the buzz.headfirstlabs.com page and view their HTML. How? Almost all browsers have a "View Source" option. So, visit the page and when it is fully loaded, choose the "View Source" option (usually found in the View menu, or by right-clicking on the page), and you'll see the markup for the page.

Scroll down until you see the Coffee section; it looks like this:

   This is similar to the naming problem with
   <b>mateine</b> and <b>guaranine</b>.
</p>
<h3><a id="Coffee">Coffee</a></h3>
<p>
   <i>All fluid ounces are U.S. fluid ounces.</i>
</p>

Aha! Here is the destination anchor. It has the id name "Coffee".

Exercise 5: Linking to a Destination Anchor

Now all you need to do is revisit the link to Caffeine Buzz and add on the destination anchor name, like this:

Read the <a href="http://buzz.headfirstlabs.com#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>

  • Make this change to your Starbuzz "index.html file. Make sure you use a capital C for "Coffee"! Link IDs are case-senstive in many browsers.
  • Save the file.
  • Reload the page in a browser and click the "Caffeine Buzz" link.
  • You should be taken directly to the Coffee section of the Caffeine Buzz's front page.

 

Opening a New Window Using target

We have another new requirement from the Starbuzz CEO (there are always new requirements for Web sites.) What he wants is this: when you click on the "Caffeine Buzz" link in the Starbuzz Coffee page, the Starbuzz Coffee page shouldn't go away. Instead a whole new window should open up with the Caffeine Buzz page in it.

To open a page in a new window, you need to tell the browser the name of the window in which to open it. If you don't tell the browser a specific window to use, the browser just opens the page in the same window. You can tell the browser to use a different window by adding the target attribute to the <a> element.

The value of the target attribute tells the browser the "target window" for the page. If you use "_blank" or "_new" for the target, the browser will always open a new window to display the page.

Let's take a closer look:

Read the <a href="http://buzz.headfirstlabs.com#Coffee" title="Read all about caffeine on the Buzz" target="_new">Caffeine Buzz</a>

 

Exercise 6: Linking to a New Window

  • In your Starbuzz "index.html" file, add the target attribute above to the <a> tag that links to the Caffeine Buzz page.
  • Make sure there is a space between the end of the title attribute and the beginning of the target attribute. Save the file.
  • Now give it a try. Did you get a new window?
  • Turn in your Starbuzz folder. Make sure it is formatted as "lastnamefirstinitial_Starbuzz".

 

Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by >