Web Design - Introduction to HTML: Hyperlinks

Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5
Section Three:  Part A  |  Part B  |  Part C  |   Part D  |  Part E  |  Part F  |  Part G

Let's See the Anchor Tag in Action

Take a look at the mash-up screen shot below. Pay particular attention to the <a></a> tags, the attributes included in the opening <a> tag, and the text listed between the tags.

yamaha see it in action

Upon review of the mash-up, there are some important things to note; particularly:

  1. The <a></a> tags are listed in the body of the web page between the <body></body> tags.
  2. The href="" attribute is listed in the opening <a> tag.
  3. The href="" attribute includes the entire URL for the Yamaha Motor web page
  4. The text listed between the opening <a> tag and the closing </a> tag, “I love Yamaha”, is made a link in the web browser.

Creating Meaning Text Links

Be sure to use meaningful text as the text for your links. If you had the text “Pink Ponies on Parade” listed between the above tags your visitors would be a little confused when the link went to the Yamaha Motor web site.

Avoiding Broken Links

When creating absolute links in a webpage there cannot be any errors in the URL listed in the href="" attribute. For instance, if you added the code listed in the image below (where Yamaha is misspelled), your link to the Yamaha Motor web site would not work. Instead, you would either get a broken link, 404, error or be sent to an unintended page.

Broken Yamaha Motor link

A useful tip for ensuring the correct URL is listed in your absolute reference is to navigate to the page you want to link to, copy the entire URL listed in the web browser address bar, and then paste the URL between the quotation marks " " of the href="" attribute.

NextNext

© 2008 KCDL. All rights reserved.