Creating Links In HTML

Links Links are what make the World Wide Web web-like. One document on the Web can link to several other documents, and those in turn to other documents, and so forth. The resulting structure, if diagramed, resembles a web. The comparison has spawned many “web” terms commonly used on the Internet—electronic robots that scour the Web are known as “spiders,” and so on. Besides linking to other documents, you can link to just about any content that can be delivered over the Internet—media files, e-mail addresses, FTP sites, and so on. This chapter covers the ins and outs of linking to references inside and outside the current document and how to provide more information about the relationship of your documents to others on the Web. What’s in a Link? Web links have two basic components, the link and the target. ✦  The link is the text in the main document that refers to another document. ✦  The target is the document (or particular location in the document) to which the link leads. For example, suppose a site on the Web reviews software. Each review includes a link to the manufacturer’s Web site. Such an arrangement would resemble the diagram shown in Figure 7-1. The link has two components: a descriptor and a reference to the target. The target is a document that can be delivered via the Internet. In the preceding example, the review might list the manufacturer’s name as the descriptor and the actual Web URL would be the reference. Both are specified in the anchor tag (<a>), as follows: <a href=“url_of_target”>descriptor_text</a>

C 7 7H A P T E R ✦✦✦✦ In This Chapter What’s in a Link? Linking to a Web Page Absolute versus Relative Links Link Targets and Titles Keyboard Shortcuts and Tab Order Creating an Anchor Choosing Link Colors The <link> Tag ✦✦✦✦

114 Part II ✦ HTML/XHTML Authoring Fundamentals

Review xyz Software Developed by xyz Inc xyz Inc Home Page Note Figure 7-1: The relationship of documents on the Web via links—the user clicks the link in the review document to reach the xyz Inc. home page. The target reference is specified via the href attribute, and the descriptor appears between the start and end anchor tags. For example, if the manufacturer is Acme Computers and its Web site is acme.example.com, the anchor tag would resemble the following: <a href=“http://www.example.com”>Acme Computer’s Web Site</a> If you don’t give the name of a document in the link, the Web server (in this case, www.example.com) will send the defined top-level document (known as an index document)—typically, this document is named index.html or home.html. If such a document doesn’t exist or one has not been defined for the server, an error will be returned to the client browser. The text “Acme Computer’s Web Site” would be highlighted in the document to show it is a link. The default highlight for a link is a different color font and underlined, though you will see how to change the highlight later in this chapter. According to the “strict” HTML standard, anchor links need to be placed within block elements (headings, paragraphs, and so on). As mentioned in the introduction to this chapter, you can link to other things besides HTTP documents. All you need is the URL of the item you wish to link to, and the protocol necessary to reach the item. For example, if you wanted to link to a document on an FTP site, you could use an anchor tag similar to the following: <a href=“ftp://ftp.example.com/pub/example.zip”>Zipped copy of the files</a> Note that the protocol is specified (ftp: instead of http:), and the server name is specified (ftp.example.com), as is the path and filename (/pub and example .zip). A similar method can be used to link to an e-mail address (href=“mailto:someone@example.com”). Clicking such a link will generally spawn the user’s e-mail client ready to send an e-mail to the address specified.

Chapter 7 ✦ Links 115

Note The rest of this chapter concentrates on linking to other HTML documents on the Web. However, all the concepts addressed apply when linking to other content types. Linking to a Web Page The most popular link style on the Web is a link to another Web page or document. Such a link, when activated, causes the target page to load in the client browser. Control is then transferred to the target page—its scripts run, and so on. To link to another page on the Internet, you simply specify the target’s URL in the anchor tag. Suppose you want to link to the products page of the Acme Web site and the page is named products.html and resides in the products directory on the Acme Web server. The href parameter of the link would be as follows: http://www.example.com/products/products.html Note that the URL (http://acme.example.com) contains the protocol, the server name, the directory name, and the filename. Figure 7-2 shows a breakdown of the various pieces of the URL. http://www.example.com/products/products.html protocol directory ✦ ✦ ✦ ✦ The protocol is first, and ends with a colon (http:). The server name is next, prefaced with a double slash (//www.example.com). The directory (or directories) is next, separated with slashes (/products/). The filename of the page is last, separated from the directory by a slash (products.html). The server name is actually two pieces, the server’s name and the domain on which it resides. In the www.example.com, www is the server name and example.com is the domain. There is a common misconception that all Web server names need to begin with www. Although www is a standard name for a Web server, the name can be almost anything. For example, the U.S.-based Web server for the Internet Movie Database (imdb.com) is us.imdb.com. server file/page Figure 7-2: The various pieces of a URL. In the case of this URL, the various pieces are separated by various key characters: Note

116 Part II ✦ HTML/XHTML Authoring Fundamentals

Absolute versus Relative Links There are two types of URL styles, and therefore two link types, that you need to understand: absolute and relative. You have seen absolute links, where the URL used in the link provides the full path, including the protocol and full server address. These links are called absolute links because the URL itself is absolute—that is, it does not change no matter where the document in which it appears is kept. The other type of link, a relative link, does not provide all of the details to the referenced page; hence, its address is treated as relative to the document where the link appears. Relative links are only useful for linking to other pages on the same Web site, because any reference off of the same site requires the remote server’s name. It’s easier to understand the difference between the two types of links with an example. Suppose you are the Webmaster of example.com. You have several pages on the site, including the home page, a main products page, and hardware and software products pages. The home page is in the root directory of the server, while the product pages (all three) are in a products directory. The relative links back and forth between the pages are shown in Figures 7-3 and 7-4. Root Directory (/) /products/products.html Home Products Directory (/products) ./hardware.html ./software.html Hardware Products Software Figure 7-3: Relative links to subpages. Note that you can use directory shortcuts to specify where the pages are: ✦  Starting a directory with a slash (/) references it as a subdirectory of the root directory. ✦  Starting a directory with a period and a slash (./) references it as a subdirectory of the current directory (the directory where the current page resides). ✦  Starting a directory with a double period and a slash (../) references it as a parent directory to the current directory.

Chapter 7 ✦ Links 117

Home Root Directory (/) ../home.html Products Directory (/products) ./products.html ./products.html Hardware Products Figure 7-4: Relative links to parent pages. Software Relative links are easier to maintain on sections of Web sites where the pages in that section never change relationships to one another. For example, in the case of the site shown in Figures 7-3 and 7-4, if the products pages move as a whole unit to another place on the site, the relative links between the product pages won’t change. If the links were coded as absolute (for example, http://www.example.com/ products/hardware.html), they would have to change. Link Targets Note Normally, links open the page they refer to in the active browser window, replacing the page currently displayed. However, you can control where the page opens using the target attribute in the link tag. The target attribute has been deprecated in strict HTML. It appears here be- cause most browsers still support the attribute and it can be useful. However, keep in mind that your documents will not validate against strict HTML if you use the target attribute. The target attribute supports the values shown in Table 7-1. Value Description _blank Opens the linked document in a new browser window _self Opens the linked document in the same frame as the link Table 7-1 Target Attribute Values Continued

118 Part II ✦ HTML/XHTML Authoring Fundamentals

Table 7-1 (continued) Value Description _parent Opens the linked document in the parent frameset _top Opens the linked document in the main browser window, replacing any and all frames present name Opens the linked document in the window with the specified name For example, to open a linked document in a new window you would use a tag similar to the following: <a href=“http://www.example.com” target=“_blank”> New Window</a> Caution The debate about whether you should ever open a new window is fierce. Most users are accustomed to all new windows being of the pop-up ad variety—and very unwelcome. However, from a user interface standpoint, new windows can be used very effectively if they are used like dialog boxes or new windows that an operating system spawns. In any case, you should make a habit of informing users when you are going to open a new window so you don’t surprise them. The last value listed for target, name, can also aid in the user interface experience, if used correctly. Certain methods of opening windows (such as the JavaScript window.open method) allow you to give a browser window a unique name. You can then use that name to push a linked document into that window. For example, the following code displays two links; the first opens a new, empty browser window named NEWS, and the second pushes the content at www.yahoo.com into the window: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <script language=“JavaScript”> function NewsWindow(){ fin=window.open(“”,“NEWS”,“width=400,height=400”); } </script> </head> <body> <p><a href=“JavaScript:NewsWindow()”>Open Window</a></p> <p><a href=“http://www.yahoo.com” target=“NEWS”>Fill Window</a></p> </body> </html> Cross- Reference For more information on JavaScript and the window.open method, refer to Chapter 25.

Chapter 7 ✦ Links 119

Link Titles You can also title a link, using the title attribute in the anchor tag. This causes most current browsers to display the text of the title as a ToolTip when the mouse hovers over them. For example, the following link will cause Internet Explorer 6 to display “Example.com’s Web Site,” as shown in Figure 7-5. More information can be found <a href=“http://www.example.com” title=“ Example.com’s Web Site”>here</a>. Figure 7-5: The title attribute causes a ToolTip display when the mouse hovers over the link. You can use this feature to give the user more information on the link, before they click it. Keyboard Shortcuts and Tab Order In the modern world of computers it is easy to make assumptions about users, their hardware, and capabilities. Several years ago, no one would have dreamt of delivering rich, multimedia content over the Web. Today, however, it is easy to assume that everyone is using the latest browser, on a high-end computer, across a broadband connection. However, that isn’t always the case. In fact, some users who visit your site may not even have a mouse to aid in browsing. The reason could be a physical handicap, a text-only browser, or just a fondness for using the keyboard. It is important to

120 Part II ✦ HTML/XHTML Authoring Fundamentals

Tip accommodate these users by adding additional methods to access links on your page. Keyboard shortcuts Each link can be assigned a shortcut key for easy keyboard-only access using the accesskey attribute with the anchor tab. The accesskey attribute takes one letter as its value, the letter that can be used to access the link. For example, the following link defines “C” as the access key: <a href=“http://www.example.com” accesskey=“C”>Table of <b>C</b>ontents</a> Note that different browsers and different operating systems handle access keys differently. Some browser and operating system combinations require special keys to be pressed with the defined access key. For example, Windows users on Internet Explorer need to hold the Alt key while they press the access key. Note, also, that different browsers handle the actual access of the link differently—some browsers will activate the link as soon as the access key is pressed, while others only select the link, requiring another key to be pressed to actually activate the link. Keyboard shortcuts won’t help your users if you don’t give them a clue as to what the shortcut is. In the example earlier in this section, the defined shortcut key (“C”) was used in the link text and highlighted using the bold font attribute. Tab order It will also help your users if you define a tab order for the links in your document. As with most graphical operating systems, the tab key can be used to move through elements of the interface, including links. Typically, the default tab order is the same as the order that the links appear in the document. However, upon occasion, you might wish to change the order using the tabindex attribute. The tabindex attribute takes an integer as its value; that integer is used to define the tab sequence in the document. For example, the following document switches the tab order of the second and third links: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <title>Tab Ordered Document</title> </head> <body> <p>This is the <a href=“http://www.example.com” tabindex=“1”>first link</a>.</p> <p>This is the <a href=“http://www.example.com” tabindex=“3”>second link</a>.</p>

Chapter 7 ✦ Links 121

Note <p>This is the <a href=“http://www.example.com” tabindex=“2”>third link</a>.</p> </body> </html> As with most interface elements in HTML, the browser defines how tabindex is implemented and how tabbed elements are accessed. Creating an Anchor Anchor tags have another use; they can be used as a marker in the current document to provide a bookmark that can be directly linked to. For example, a large document might have several sections. You can place links at the top of the document (or in a special navigation frame) to each section, allowing the user to easily access each section. To create an anchor in a document, you use the anchor tag with the name attribute. For example, the following code creates a chapter01 anchor at the “Chapter 1” heading: <h1><a name=“chapter1”>Chapter 1</a></h1> To link to the anchor you use a standard link, but add the anchor name to the end of the URL in the link. To identify the name as an anchor, you separate it from the rest of the URL with a pound sign (#). For example, suppose the Chapter 1 anchor appears in the document book.html. To link to the Chapter 1 anchor, you could use the following code: <a href=“http://www.example.com/book.html#chapter1”>Go to Chapter 1</a> Note Because the URL in the link tag can contain the server and document names as well as the anchor name, you can link to anchors in the same document or any accessible document. If you are linking to an anchor in the same document, you can use a shortcut form of the URL, using only the pound sign and the anchor name as the URL. In addition to using the anchor tag for bookmarks, you can link to a block element’s id attribute. For example, if Chapter 1 appears inside an <h1> tag, you can set the <h1> tag’s id attribute to Chapter1 and omit the anchor link altogether, as shown in the following code example: <h1 id=“chapter1”>Chapter 1</h1> Choosing Link Colors It is important that links stand out from the normal content in your documents. They need to be recognizable by users. Each link has four different status modes:

122 Part II ✦ HTML/XHTML Authoring Fundamentals

Note ✦  Link—The standard link in the document that is not active, nor visited (see other modes). ✦  Active—The target of the link is active in another browser window. ✦  Visited—The target of the link has been previously visited (typically, this means the target can be found in the browser’s cache). ✦  Hover—The mouse pointer is over the link. Each of these modes should be colored differently so the user can tell the status of each link on your page. The standard colors of each link status are as follows: ✦ ✦ ✦ ✦ Link—Blue, underlined text Active—Red, underlined text Visited—Purple, underlined text Hover—No change in the appearance of the link (remains blue, red, or purple) As with other presentation attributes in HTML, the browser plays a significant role in setting link colors and text decorations. Most browsers follow the color scheme outlined in this section, but there are browsers that don’t conform to this scheme. To change the text color and other attributes of links, you can modify the properties of each type of anchor tag. For example, the following style, when used in an HTML document, sets the default visited link text to bold and yellow: Tip a:visited { color: yellow; font-weight: bold; } Setting the properties of the anchor tag without specifying a mode changes all of the link modes to the characteristics of the style. For example, this style sets all types of links (link, active, visited) to red: a { color: red; } So why would you want to change the color of links in your document? One reason would be that the normal text of your document is the same color as the default link. For example, if your text is blue, you probably want to change the default color of the links in your document to better enable users to recognize them. It is a good idea to define all of the link attributes instead of haphazardly defining only one or two of the link status colors. The following styles define each type of link, ensuring they appear how you want in the document: a:link { color: #003366; font-family:verdana, palatino, arial, sans-serif; font-size:10pt; text-decoration: underline; } a:visited {color: #D53D45; font-family:verdana, palatino, arial, sans-serif; font-size:10pt; text-decoration: underline; }

Chapter 7 ✦ Links 123

a:active {color: #D53D00; font-family:verdana, palatino, arial, sans-serif; font-size:10pt; font-weight: bold; text-decoration: underline; } a:hover {color: #D53D45; font-family:verdana, palatino, arial, sans-serif; font-size:10pt; text-decoration: none; } Note the redundancy in the styles—there are only subtle changes in each style. You should strive to eliminate such redundancy whenever possible, relying instead upon the cascade effect of styles. You could effectively shorten each style by defining the anchor tag’s attributes by itself, and defining only the attributes that are different for each variant: a { color: #003366; font-family:verdana, palatino, arial, sans-serif; font-size:10pt; text-decoration: underline; } a:visited {color: #D53D45; } a:active {color: #D53D00; font-weight: bold; } a:hover {color: #D53D45; text-decoration: none; } Link Target Details There are a host of other attributes that you can add to your anchor tags to describe the form of the target being linked to, the relationship between the current document and the target, and more. Table 7-2 lists these descriptive attributes and their possible values. Attribute Meaning Value(s) Hreflang The base language of the target language_code for example, “en-US” Table 7-2 Link Target Details Charset The character encoding of the target char_encoding for example, “ISO 8859-1” Rel The relationship between the current document and the target alternate designates stylesheet start next prev contents Continued

124 Part II ✦ HTML/XHTML Authoring Fundamentals

Attribute Meaning Table 7-2 (continued) Value(s) Rev The relationship between the target and the current document alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark Any valid MIME type Type The MIME type of the target index glossary copyright chapter section subsection appendix help bookmark An example of how the relationship attributes (rel, rev) can be used is shown in the following code snippet: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <title>Chapter 10</title> </head> <body> <p><a href=“contents.html” rel=“chapter” rev=“contents”>Table of Contents</a></p> <p><a href=“chapter9.html” rel=“next” rev=“prev”>Chapter 9</a></p> <p><a href=“chapter11.html” rel=“prev” rev=“next”>Chapter 11</a></p> ... The anchor tags define the relationships between the chapters (next, previous) and the table of contents (chapter, contents).

Chapter 7 ✦ Links 125

The Link Tag You can use the link tag to provide additional information on a document’s relationship to other documents, independently of whether the current document actually links to other documents or not. The link tag supports the same attributes as the anchor tag, but with a slightly different syntax: ✦ The link tag does not encapsulate any text. ✦ The link tag does not have an ending tag. For example, the following code could be used in chapter10.html to define that document’s relationship to chapter9.html and chapter11.html: <link href=“chapter9.html” rel=“next” rev=“prev” /> <link href=“chapter11.html” rel=“prev” rev=“next” /> The link tag does not result in any visible text being rendered, but can be used by user agents to provide additional navigation or other user-interface tools. Another important use of the link tag is to provide alternate content for search engines. For example, the following link references a French version of the current document (chapter10.html): <LINK lang=“fr” rel=“alternate” hreflang=“fr” href=“http://www.example.com/chapter10-fr.html” /> Other relationship attribute values (start, contents, and so on) can likewise be used to provide relevant information on document relationships to search engines. Summary This chapter covered links—what they are and how to use them to reference other content on the Web. You learned how to construct a link and what attributes are available to the anchor and link tags. You also learned how to define relationships between your document and other documents, and why this is important. From here, you should progress through the next few chapters, familiarizing yourself with the other various pieces of an HTML document. ✦✦✦