Hyperlinks, or links for short, are what make Web pages different from other computer documents. Any publicly accessible Web page can be connected to another by creating a link. Links enable users to navigate from one topic to the next on a Web site and from one Web site to another. The user clicks the link and the browser opens the destination page.

Types of Links	Link to External Web Pages
Links can be text or images. Text links typically appear as underlined, differently colored words on a page. Any image on a Web page can also be turned into a link. For example, graphical site maps and navigation bars that appear at the top or side of a page make it easy for users to access other pages on the same Web site. When a user holds the mouse pointer over a link, the pointer takes the shape of a pointing hand, indicating the presence of an active, clickable link.	You can use links on your Web page to direct users to other pages on the Internet. For example, you might include a link on your company Web page to a local city directory detailing activities and hotels in the area. Or you might add a link on a product page to the manufacturer's Web site.
Link to Other Pages on Your Site If your Web site consists of more than one page, you can include links to other pages on the site. For example, your main page may provide links to pages about your business, products, and ordering information as well as to a map of your location. If you maintain a blog, the home page will usually link to postings that you have created in the past.	Link to Other Areas on the Same Page If your Web page is particularly long, you can provide links to different areas on the page. For example, at the top of a page, you might include links to each section heading or photo that appears below. This allows users to jump right to the information they want to view without having to scroll.
Absolute and Relative Links You can use two types of links in your HTML documents: absolute and relative. Absolute links use a complete URL to point to a specific page on a specific Web server. Relative links use shorthand to reference a page and don't specify the server. You generally use relative links to reference documents on the same Web site.	Anchor Tags The HTML code you use to create a link is called an anchor tag, consisting of the beginning <A> and the ending </A>. The HREF attribute works within the opening anchor tag to define the URL, or Web address, to which you want to link. You can learn more about using URLs in the next section, "Understanding URLs."

Every page on the Web has a unique address called a URL. Short for Uniform Resource Locator, a URL identifies the domain name of the Web server and the directory path to the file on that server. Absolute links specify a complete Web page URL, whereas relative links use shorthand to specify pages relative to the page containing the link.

HTTP Prefix	FTP or MAILTO Prefix
All URLs for Web pages include the standard HTTP (HyperText Transfer Protocol) prefix, as in http://www.example.com. While most browsers automatically insert the http:// prefix for you when you type an address such as www.example.com, you must include the prefix when referencing URLs in your HTML.	There may be times when you use a prefix other than HTTP in your URLs. If you are linking to a document that resides on a file transfer site, you use the FTP prefix (ftp://). If you want to create a link that opens an e-mail program, allowing a user to send an e-mail message, you use the MAILTO prefix (mailto:).

Domain Name

Following the prefix in a URL is the domain name of the Web server where the page is stored. Typically, domain names correspond to the company or organization hosting your Web page files. Hosts can include commercial companies, educational institutions, and government agencies. In the URL http://www.example.com, "example.com" is the name of the domain, with "www." specifying a Web server at that domain. Occasionally you may use a numeric IP (Internet Protocol) address such as 208.215.179.146 in your URL instead of a domain name.

Directory Path and File Name

Following the domain name in a URL is information about the file name of the HTML page and the directories in which the page is stored. For example, the page located at the URL http://www.example.com/pages/home.html has the file name "home.html" and is stored inside a directory named "pages" on the Web server. You use slashes (/) to separate the domain name, directories, and file name. When you reference a Web site's home page, you will often leave off the path and file name from a URL, as in http://www.example.com. In such cases, the server returns a default page for the site, usually titled index.html, located in the Web server's root folder.

URL Errors

One of the easiest mistakes you can make when creating a link is to type the wrong URL. This causes users to get an error message when they click the link. One misplaced letter or missing slash in a URL can result in a broken link. Renaming or rearranging the file structure on your Web server may also break links, requiring you to rewrite the URLs in your HTML.

You can create a link in your HTML document that, when clicked, takes the visitor to another page on the Web. You can link to a page on your own Web site or to a page elsewhere on the Web.

To create a link, you must first know the URL of the page to which you want to link, such as http://www.wiley.com.

Link to Another Page

INSERT A TEXT LINK

1 Type the text you want to use as a link.

2 Type <A HREF=" ? "> in front of the text, replacing ? with the URL of the page to which you want to link.

3 Type </A> at the end of the link text.

• The Web browser displays the text as an underlined link.

• Anytime the user moves the mouse pointer (

• The URL for the link appears in the status bar.

INSERT AN IMAGE LINK

1 Add the image you want to use as a link using the <IMG> tag.

2 Type <A HREF=" ?"> in front of the image code, replacing ? with the URL of the page to which you want to link.

3 Type </A> after the image code.

• The Web browser displays the image as a link.

• Anytime the user moves the mouse pointer (

• The URL for the link appears in the status bar.

Tip

How do I link to another page on my Web site?

You can link to another page on your site using a relative link. In a relative link, you can specify the location of the destination page relative to the page that contains the link without specifying the domain name of the server. If the destination page is located in the same directory as the containing page, you can simply specify the filename, as in <A HREF="photos.html">. If the destination page is in a subdirectory relative to the containing page, you need to specify that subdirectory as well, as in <A HREF="media/photos.html">.

My link image includes a border. How do I remove the border?

When you turn an image into a link, a browser automatically places a border around the image. To remove the border, type BORDER="0" in the <IMG> tag, as in <A HREF=http:// www.example.com><IMG SRC= "vacation.jpg" BORDER="0"></A>.

You can add instructions to an HTML link that tell the browser to open the link page in a new browser window. You may add this instruction if you want to keep a window to your own site open so the user can easily return to your page.

You use a target attribute within the link anchor element (<A>) to open links in new windows. To make all the links on your page open in new windows, you can use the BASE element. To learn more about how links and URLs work, see the sections at the beginning of this chapter.

Open a Linked Page in a New Window

LINK TO A NEW WINDOW

1 Click within the <A> tag for the link you want to edit and type TARGET=" ?", replacing ? with a name for the new window.

Other links on your Web page can reference the same target name to open pages in the same new window.

If you want the link to open in a new, unnamed window, type "_blank".

• When the link is clicked, the linked page opens in the targeted window.

MAKE ALL LINKS OPEN NEW WINDOWS

1 Click between the <HEAD> and </HEAD> tags and type <BASE TARGET=" ? ">, replacing ? with a name for the new window, such as main.

If you want the link to open in a new, unnamed window, type "_blank".

• When the user clicks any of the links on the page, the linked page opens in the targeted window.

Tip

Do I need to specify a name for the new window?

No. Rather than worry about what to name a new window, you can simply leave the window unnamed. You do this by using the TARGET="_blank" attribute. A new, unnamed window opens.

Should I open a new window for every link?

Probably not. If a new window opens every time a link is clicked on your pages, users may quickly become overwhelmed by the number of open windows. You may want to open new windows only when links lead to a page outside the current Web site. This way, the current Web site remains open on the user's computer.

You can add links to your page that take the user to another place on the same page. This is particularly useful for longer documents. For example, you can add links that take the user to different headings in your document.

To link to places on the same page, you must assign names to the areas to which you want to link. You can do this with the anchor tag (<A>) and the NAME attribute. Such assigned names are sometimes called named anchors.

Link to an Area on the Same Page

NAME AN AREA

1 Click in front of the section of text to which you want to create a link and type <A NAME="?">, replacing ? with a unique name for the area.

It is best to keep your names short and simple, using only letters and numbers.

2 Type </A> at the end of the section.

CREATE A LINK TO THE AREA

1 In front of the text or image you want to turn into a link, type <A HREF="# ?">, replacing ? with the name of the section to which you want to link.

2 Type </A> after the link text.

• When a user clicks the link, the browser scrolls to the designated section of the page.

Tip

Can I place a link at the bottom of my page that returns the user to the top of the page?

Yes. It is a good idea to add a link to the bottom of a long page to help the user navigate to the top again without having to scroll. To create such a link, create a named anchor at the top of the page following the steps shown in this section. Then insert a link that references that named anchor. Good text to use for such a link is "Return to Top" or "Back to Top."

How do I link to a specific location on another page on my Web site?

You can use the same technique shown in this section to link to a section on another page. First, name the area on the other page using the <A NAME="?"> tag and attribute. Then create a link to the page, adding a # and then the name of the relative link, such as <A HREF="page.html#section1">.

You can add links to non-HTML resources, such as Word document files, spreadsheet files, image files, compressed files, and more. To make such files Web-accessible, you must store them in the same locations on the Web server as your HTML files.

Thanks to special plug-ins, some Web browsers can open certain non-HTML files. For a file that it can't open, a browser may prompt users to save the file on their computers.

Link to another File Type

1 Type the text for the link.

It is good form to include a description on the page that identifies what type of file the link opens.

2 Type <A HREF=" ?">, replacing ? with the full path and name of the file.

3 Type </A> at the end of the link text.

• The link appears on the Web page.

When the link is clicked, the browser may display the file in the browser window.

If the browser cannot open the file, a File Download dialog box may appear that allows the user to download the file to his or her computer.

Tip

Can I include links to plain-text files?

Yes, and most browsers will be able to open and display such files. Because plain-text files do not include HTML formatting, browsers display the text unformatted and without inline images or other features.

What happens if the user cannot download or open the file?

If the user encounters problems accessing a non-HTML file, his or her browser or computer may display an error message. To help with any problems that might occur, be sure to include information about the file format and size on the Web page; also include links to any useful tools that can help the user work with the file. For example, if the link is to a PDF file, include a link to the Adobe Web site where the user can download the Adobe Acrobat Reader program, which can read PDFs.

You can create a link in your Web page that allows users to send an e-mail message. Adding e-mail links is a good way to solicit feedback and questions from your Web site visitors.

Link to an E-mail Address

1 Type the text you want to use as an e-mail link.

It is standard practice to use the e-mail address as the text link.

2 In front of the link text, type <A HREF="mailto: ?">, replacing ? with the e-mail address you want to use.

3 Type </A> at the end of the link text.

• The link appears in the Web browser.

• When the link is clicked, the user's e-mail editor opens with the To field prefilled with the e-mail address.

Tip

Can I specify a subject for an e-mail message?

Yes. You can use the ?subject parameter within the link tag to include a subject line with the e-mail message. When the user clicks the link and the e-mail client opens, the subject area is prefilled. You can use this technique to help recognize e-mail generated from your Web site. For example:

<A HREF="MAILTO:webmaster@ example.com?subject=comments"> E-mail a comment</>

Is it safe to use my e-mail address in a link?

You should use caution when placing a personal e-mail address on a Web page. e-mail addresses on Web pages are notorious magnets for unsolicited e-mail, because such addresses can be harvested automatically by spamming tools that crawl the Web. For this reason, you may want to create a separate e-mail account just for your Web-generated e-mail messages. See your Internet service provider for more information.

You can control the color of links on a page. Links can appear as different colors depending on whether or not they have been clicked before. You can also define the color that a link turns when a user clicks it.

You assign link colors in the <BODY> tag. Use the LINK attribute to assign a color to unclicked links. Use the ALINK attribute, which stands for active link, to specify the color that appears when a link is being clicked. Use the VLINK attribute, which stands for visited link, to change the color of previously clicked links.

Change Link Colors

1 Click within the <BODY> tag and type LINK=" ?", replacing ? with the color value you want to apply to the unselected links on your page.

2 Type a space.

3 Type ALINK=" ?", replacing ? with the color value you want to apply to active links on your page.

4 Type a space.

5 Type VLINK=" ?", replacing ? with the color value you want to apply to the previously selected links on your page.

• The browser displays the links in the colors you chose.

Tip

Can I type color names rather than hexadecimal values?

Yes. You can use any of the 16 Web-safe colors by name rather than by hexadecimal value to change link colors. For example, you can type:

<BODY LINK="teal" VLINK="gray" ALINK="red">

and achieve the same effect as typing:

<BODY LINK="#008080" VLINK="#808080" ALINK="#FF0000">

For a list of color names and their hexadecimal values, see Chapter 4.

How do I remove underlines from my text links?

You can remove the underlining that browsers apply to links using Cascading Style Sheets, or CSS. CSS gives you greater formatting control over your Web page text. To learn more about CSS, see Chapter 11.