Linking in HTML | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

The discussion thus far has focused solely on the forms of URLs. Little has been said about how to link objects together on the Web. Later in this chapter, the discussion becomes more theoretical and discusses the relationship between URLs, URIs, URCs, and URNs.

The Anchor Element

As briefly introduced at the start of the chapter, the most common way to define hyperlinks in HTML is with the anchor tag, <a> . In its most basic form, this element needs two pieces of information: the URL of the target resource, and the document content needed to activate the hyperlink. Assigning a URL value to an <a> tag's href attribute specifies the target resource like so:

  <a href="URL">  Linked content  </a>

Note	An a element may not enclose another a element. The code <a href="URL1"> Linked <a href="URL2"> More linked </a></a> makes no sense.

Most defined hyperlinks probably use an HTTP URL to link one HTML document to another, but the other URL forms are valid as well. As an example, all the following are syntactically valid links:

  <a href="http://www.whitehouse.gov/">  Visit the White House  </a>   <a href="http://www.democompany.com/about/">  About Demo Company  </a>   <a href="http://www.democompany.com/products/robots.html">  Robots  </a>   <a href="http://www.democompany.com/products/robots.html#top">  Go to top  </a>   <a href="products/robots.html">  Robots  </a>   <a href="../../index.html">  Back to home  </a>   <a href="ftp://ftp.democompany.com">  Access FTP archive  </a>   <a href="mailto:info@democompany.com">  More information?  </a>

Note	Be careful when using mailto URLs; they often do not work because a browser is not configured to send mail or does not support this URL form properly.

The following example shows a more complete example of relative and absolute URLs and their use within an XHTML document:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Link Example 3  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h1 align="center">  Green Gadgets  </h1>   <hr />   <p>  Here you will find information about the mysterious green gadget--the wonder tool of the millennium.  </p>   <ul>   <li><a href="specs.html">  Specifications  </a></li>   <li><a href="extras/access.html">  Accessories  </a></li>   <li><a href="http://www.democompany.com">  Distributors  </a></li>   <li><a href="ftp://ftp.democompany.com/pdfs/order.pdf">  Download order form  </a></li>   </ul>   <div align="center">   <a href="../index.html">  Back to Demo Company Home  </a>   </div>   <hr />   <address>  Questions?  <a href="mailto:info@democompany.com">info@democompany.com</a>   </address>   </body>   </html>

Renderings of the link examples are shown in Figure 4-3.

Figure 4-3: Browser renderings of combined linked example

Link Renderings

In most browsers, text links are indicated by underlined text. Text is blue if the destination has never been visited, purple if it has been visited, and briefly red as the link is activated. If a link includes an image, the border of the image also will be blue or purple, unless the border attribute has been set to zero. HTML authors can override these default link colors with changes to the link , alink , and vlink attributes of the body element. The link attribute changes the color of all unvisited links; the vlink attribute changes all visited links. The alink attribute changes the color of the active link, which is the brief flash that appears when a link is pressed. By using a style sheet rule, authors also can change the decoration of links to turn off underlining; change the style in hover mode, where the mouse is over a link; or even display all links in completely different fashion. The approaches using HTML and CSS are summarized in Table 4-4 and demonstrated in the following example:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Link Style Changes  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">   a         {text-decoration: none;}   a:hover   {color: red; text-decoration: underline;}   </style>   </head>   <body link="blue" alink="green" vlink="purple">   <a href="#">Link to this page</a>   <a href="http://www.yahoo.com">  Test Link to Yahoo!  </a>   </body>   </html>

Table 4-4: Link Presentation Summary
Link State	Standard Color	HTML Attribute	CSS Pseudo Class Rule
Unvisited	Blue	<body link=" colorvalue ">	a:link {color: colorvalue; }
Visited	Purple	<body vlink=" colorvalue ">	a:visited {color: colorvalue; }
Hover	N/A	N/A	a: hover {color: colorvalue; }
Active	Red	<body alink=" colorvalue ">	a:active {color: colorvalue; }

Note	Except for backwards compatibility, it is preferable to specify all link changes in CSS rather than HTML.

Changing link colors or removing underlining might seem to make sense aesthetically ” but it also can confuse readers who have come to expect a standard color scheme for links. Occasionally, authors try to encourage return visits by changing the setting for visited links to remain blue, or they might reverse colors for layout consistency. Such changes can significantly impair the usability of the site by thwarting user expectations.

Like it or not, the standard Web experience has taught users to click underlined text that is blue or purple. Such user habits suggest that underlining for emphasis should be used sparingly, if at all, in HTML documents. Furthermore, HTML text probably shouldn't be colored blue or purple, unless it obviously isn't a link. Controlling color is very important, but it is only one of many aspects of links that can be controlled.

< Day Day Up >