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

< Day Day Up >

In HTML/XHTML, the main way to define hyperlinks is with the anchor tag, <a> . A link is simply a unidirectional pointer from the source document that contains the link to some destination. In hypertext, the end points of a link typically are called anchors , thus the use of the anchor nomenclature in HTML documentation.

For linking purposes, the <a> tag requires one attribute: href . The href attribute is set to the URL of the target resource, which basically is the address of the document to link to, such as http://www.democompany.com. The text enclosed by an a element specifies a "hot spot" to activate the hyperlink. Anchor content can include text, images, or a mixture of the two. A general link takes the form <a href=" URL "> Visit our site </a> . The text "Visit our site" is the link. The URL specified in the href attribute is the destination if the link is activated. The following is an example of simple link usage:

  <!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>  Simple Link Example  </title>   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h1 align="center">  Lots of links  </h1>   <hr />   <ul>   <li>  Visit  <a href="http://www.yahoo.com">Yahoo!</a></li>   <li>  Just a  <a href="http://www.democompany.com">Demo Company</a></li>   <li>  Go to the  <a href="http://www.w3.org">W3C</a></li>   </ul>   </body>   </html>

When the preceding example is loaded into a Web browser, the links generally are indicated by underlined text, typically in a different color ”usually blue or purple, depending on whether the linked object has been viewed before. Links are displayed in a different color after you visit the linked page so that you know in the future which links you have already followed. Status information in the browser generally changes when you position a mouse over a link. The pointer also might change, as well as other indicators showing that the information is a link. See Figure 4-1 for examples of link feedback in various browsers. Note that the cursor over the link looks like a pointing finger, and the URL for the linked page appears in the status area in the lower-left corner of the browser frame.

Figure 4-1: Example rendering and link feedback in various browsers

It is possible that link rendering does not follow the previously described style. For example, you can turn off link underlining under some browsers or through the use of cascading style sheets. This might cause usability problems for some users, but some designers and users find pages rendered in this way more aesthetically pleasing. Also, in many browsers the status bar is not displayed by default so it is not always obvious where a link leads. We'll talk more about link presentation later as it is an important topic.

Note

You can underline any text in an HTML document by tagging it with the underline tag <u> . This practice might lead to confusion between hyperlinks and text that is underlined for stylistic purposes only. This is particularly evident if the link is viewed in a black-and-white environment or by a color-blind individual. Therefore, avoid the <u> tag if possible in documents to prevent potential confusion.

In the previous example, all the <a> tags point to external resources with fully qualified URLs. In many cases, however, links are made within a Web site to another document on the same server. In this situation, a shortened URL is used, called a relative URL , which omits the protocol, server name , and occasionally even directory path . The following example links to several other documents using relative URLs: a document in the same directory, called specs .html; a document in the "extras" subdirectory, called access.html; and a link back to a page in a directory above:

  <!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>  Simple Link Example 2  </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>   </ul>   <p align="center">   <a href="../index.html">  Back to Home Page  </a>   </p>   </body>   </html>

As you can see in the previous basic examples, the use of links, at least within text, is simple. However, specifying the destination URL might not be so obvious. Later in this chapter, I cover more advanced HTML/XHTML syntax for forming links, but first, let's take a closer look at URLs because a thorough understanding of URLs is quite important for forming links.

< Day Day Up >