Lesson 5: Hyperlinks

Objectives

By the end of this lesson, you will be able to:

       Reference full and partial URLs.

       Specify alternative protocols.

       Create hyperlinks for text.

       Create hyperlinks for images.

       Link to local files.

       Link to remote sites.

       Create an internal anchor within a file and link to it.


Introduction to Hyperlinks

The characteristic that makes the World Wide Web a "web" is the linking capability that connects Web pages to other files across the Internet. Hyperlinks are in fact more fundamental than the ability to include multimedia objects in your HTML documents. Even users with non-graphical browsers, such as Lynx, can select links in Web pages to navigate and explore the Web. The critical element is the ability to move from page to page by clicking linked text or images.

A hypertext link is a word or phrase in an HTML document that is specially tagged as a link using the anchor tag, <a>. By default, hyperlinks appear blue and underlined in the browser. You can use CSS or the alink attribute of the <body> tag to make hyperlinks appear in any color you like. An image or icon can also be enclosed in anchor tags and used as a link to another file. In both cases, clicking the link will take the user to the link's specified destination.

You can create links to external files as well as to points within the current file. On a long page, you can use links to jump between sections of the page. Such a link is called an internal link.

The Anchor Tag

Links are created with the anchor tag, <a>. Anchor tags are container tags that encompass the text or image (or both) to be used as the link. The href attribute is used to specify the link's hypertext reference, or the target of the link. You can specify a fully qualified URL or a relative URL reference for any file, page or site. The W3C prefers the phrase Uniform Resource Identifier (URI) to URL. Most professionals still use the term URL, so this course will use URL throughout.

The syntax for using the anchor tag to create a link is as follows:

<a href="URL"> linked text or image (or both)</a>

 

Table 5-1 lists examples of values for the URL when referencing external links.

Table 5-1: URL options for external links

Type of Reference

Description

Examples

Fully qualified URL (also called absolute URL)

A URL (i.e., URI) that contains a full path to a resource, including the protocol indicator. Also known as a hard link.

http://www.someserver.com/somepage.html

or

ftp://ftp.someserver.com/pub/somefile.ext

or

c:\intetpub\wwwroot\ccyp\syb\syb.html

Partial URL 
(also called relative URL)

A URL that assumes the current document's path. All references are made from the document's current directory.

syb.html

or

../css/stylesheet.css

or

pub/images/mybullet.gif


As you read absolute and relative URLs, you must understand how browsers interpret them. Table 5-2 summarizes common URL paths. As you read this table, assume that all references are to the same page, index.html.

Table 5-2: URL paths

URL

Description

/mysite/index.html

The initial forward slash ( / ) instructs the browser to look for a directory named mysite that is off of the root directory. If you were to insert this reference into a page on your Windows XP system, your browser would interpret the first forward slash as C:\, and would look for the mysite/ directory, which would contain the index.html file. If this page were on a Web server, the link would refer to the Web server's root directory (e.g., /var/www/mysite/ in Linux/UNIX or C:\inetpub\wwwroot\ in Windows).

mysite/index.html

The absence of any initial characters instructs the browser to look for the mysite subdirectory. This subdirectory begins off of the same level as the current page. The index.html page resides inside of the mysite subdirectory.

../mysite/index.html

The initial two periods and forward slash ( ../ ) instruct the browser to look for a directory named mysite that begins one level higher than the page you are currently viewing.

 

Windows and UNIX/Linux systems use different naming conventions for their paths. Windows path names use back slashes, whereas UNIX/Linux paths use forward slashes

Also, Windows paths can use drive names (e.g., C:\), whereas Unix/Linux paths do not.

Specifying protocols

Hyperlinks do not have to point to HTTP addresses only. You can create hyperlinks for various protocols. Table 5-3 describes several protocols you can specify in a hyperlink URL.

Table 5-3: Protocols in hyperlink URL references/p>

Protocol

Hyperlink HTML Example

HTTP

Visit the <a href="http://www.ciwcertified.com">CIW<a/> site.

HTTPS (Secure HTTP)

Visit our <a href="https://www.ciwcertified.com">secure CIW<a/> site.

FTP

Download the file from our <a href="ftp://ftp.server.com">FTP server.</a>

E-mail

You can send e-mail to us at <a href="mailto:info@ciwcertified.com"> info@ciwcertified.com</a>.

Telnet

Please visit our <a href="telnet:melvyl.ucr.edu">Telnet server.</a>

Problems when creating hyperlinks

Many Web developers commit the same common errors when writing HTML code to create hyperlinks on their Web pages. As you use the <a> element, make sure that you:

         Use a closing anchor tag You must place the </a> tag after the page text to be affected.

         Place quotation marks around the value The value of the href attribute is the target of your link, for example "http://www.habitat.org".

         Include the closing bracket at the end of the opening <a> tag The following example is a common oversight: <a href="http://www.habitat.org" Habitat </a>
The tag should read as follows: <a href="http://www.habitat.org"> Habitat </a>

Table 5-4 lists some problems you might experience when creating links in HTML, with troubleshooting techniques that you can use to solve these problems.

Table 5-4: Troubleshooting hyperlink problems

Problem

Solution

Text and images disappear

The <a> tag is not properly closed with </a>, or you have not placed quotation marks around a value. Review your tags carefully.

All successive Web page text is a hyperlink

The <a> tag is not properly closed with </a> in the correct location. Review your tags carefully.

Garbled code appears on screen

One or more <a> tags may be missing an opening or closing angle bracket (i.e., wicket). Review each <a> tag carefully.

Code will not validate due to a problem <a> tag

A closing tag may be missing or mistyped (such as <a/> instead of </a>). Review your tags carefully.

Creating Local Hyperlinks

A local hyperlink is a link you create from one file on your local system to another file on your local system. You create these types of links when you are developing your own pages and linking them to form a site. Your files can be uploaded to a Web server in the same directory structure you save on your system, so your file references can remain unchanged as long as your directory structure persists. Creating local hyperlinks involves determining the location of the file to which you want to link, relative to the location of the file from which you are linking.

 


Lab 5-1: Creating local text hyperlinks in XHTML

Creating External Hyperlinks

An external hyperlink is a link you create from a file on your system to a separate file on the Internet. You add these types of links to your own pages to reference other Web sites' pages. Creating external hyperlinks involves determining the full URL, including the protocol indicator, for the Web page to which you want to link. Remember that you should not provide a link from your site to another site without first obtaining permission from that site's owner, because such a link may imply a business relationship or endorsement.

 


Lab 5-2: Creating external hyperlinks in XHTML

Using Images as Hyperlinks

You are not limited to using text to provide a link to another file. You can create a hyperlink from a graphic image by surrounding the image tag with opening and closing anchor tags.

 


Lab 5-3: Using images as hyperlinks with XHTML

So far, you have created external links using full and partial URLs. In the next section, you will learn how to create an internal link to a different area within the same page.

Creating Internal Links

On a long Web page, you may want to include links that target other areas within the same page so that users can easily find the information that interests them. An internal hyperlink provides this link from one point to another in a Web page.

Internal links require internal bookmarks, called anchors, to identify the point that the link will reference within the page. Creating an internal link requires two steps. You must first use the anchor tag, <a>, with the name attribute to define an area as a target (the bookmark or anchor). Then, in another portion of the page, you create the link that points to the bookmark using the anchor tag with the hypertext reference (href) attribute as you have already learned. The syntax for creating an internal link is as follows:

<a name="targetArea1">

target anchor text or image (or both)

</a>

 

other page content here

 

<a href="#targetArea1"> text/images linking to targetArea1 </a>

The name attribute of the <a> tag defines an internal bookmark or anchor in the page. Note that for the href value, the # symbol is used. This symbol, called a hash, tells the browser to look for an anchor by this name within the current document. Without this hash, the browser will look for an external file by that name.

Creating a glossary

A glossary provides a helpful navigation feature, especially if your site introduces concepts and terms to an audience that is unfamiliar with your practices. A glossary is one way to help index and catalog your site.

 


Lab 5-4: Using internal hyperlinks

Accessing an external file's internal link

Suppose you want to link to a specific point in another page without first accessing the top of that page. To link to an internal anchor in another file, use the following syntax:

<a href="URL/filename.ext#AnchorName">link text or image</a>

 

You can start with a full or partial URL, but you must specify the file name, followed by the hash symbol, followed by the name of the internal anchor to which you want to direct the link.

Managing Hyperlinks

Periodically, you will need to check both the external and internal hyperlinks on your Web pages to verify that they still work. Links can become invalid for a variety of reasons, most commonly because a referenced page is moved or deleted, or because page content is changed and anchors are renamed or lost.

You can use automated link-checking software to validate the hyperlinks on your pages. This type of software has the ability to report the state of all site links. Following are some common automated link-checking software products:

         Linklint (www.linklint.org)

         Link Controller (http://freshmeat.net/projects/linkcont)

         Checkbot (http://degraaff.org/checkbot)

Consider that automatic link-checking software can identify invalid links for you, but you still must manually update your XHTML code to delete or modify any invalid links. Even if you use automatic link-checking software, it is advisable to check your hyperlinks manually as well. Although a link may still be valid, the content of either the target page or the page with the link can change in ways such that a link is no longer relevant or appropriate.

 

Case Study

The Missing Link

Omar works on a Web development team that just posted a site. This site contains both internal and external links. Only three days after the site was posted to the production server, Omar found that four external hyperlinks were already invalid. To solve this problem, he checked each link manually and edited the XHTML code to validate each one.

After this experience, Omar wanted to manage the links more closely and be notified of any problem links immediately. He obtained automatic link-checking software, which checks all site links periodically then sends an e-mail message reporting the status of every link. After installing this software, Omar was confident that his site's links would always remain valid.

*           *           *

As a class, discuss the following points:

    After Omar installs automatic link-checking software, will his site links always remain valid? Why or why not?

    Why would it be important to occasionally check your hyperlinks manually?

    Why would it be important to use both external and internal links on your Web site?

 

Lesson Summary

 

Application project

This lesson taught you about internal, external and local hyperlinks in Web documents. Take some time to learn more about the attributes available to the <a> tag. Visit the following sites to read about hyperlink options:

         W3C (www.w3.org)

         W3Schools (www.w3schools.com)

As you visit these sites, research the capabilities and limitations of XHTML 1.0 and HTML 4.0 in relation to the <a> tag.

 
Skills review

In this lesson, you learned to create hyperlinks from text and images to other Web files and sites. You learned that you could use full or partial URLs in your links, and you learned to link to an internal anchor point within the current document or even in another document. You also had a chance to use skills you learned in previous lessons.

Now that you have completed this lesson, you should be able to:

        Reference full and partial URLs.

        Specify alternative protocols.

        Create hyperlinks for text.

        Create hyperlinks for images.

        Link to local files.

        Link to remote sites.

        Create an internal anchor within a file and link to it.

Lesson 5 Review

1.   Name the two types of URL you can reference when creating hyperlinks to an external site or to another page on the same site.

2.   Within an anchor tag ( <a> ), the href attribute performs what function?

3.   You are creating an image hyperlink. What HTML code links the image zoomap.jpg to the map.htm Web page?

4.   You want to create a hyperlink that provides the end user with a pre-addressed blank e-mail message when he or she clicks the link. You want to pre-address the e-mail messages to info@habitat.org. The hyperlink text should read "Please send e-mail to info@habitat.org." What HTML code would create this hyperlink?

5.   Describe the syntax used to link to an internal anchor in another file without first accessing the top of that page.