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. You create links with the <A>, tag and HREF attribute.

Types of Links

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 buttons that appear at the top or side of a page can be turned into links to make it easy for users to access other pages on the same Web site. When a user positions the mouse pointer over a link, the pointer takes the shape of a pointing hand, indicating the presence of an active, clickable link (

Link Destinations

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. 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. You can also provide links to different areas on the same page. This can be useful if a page is particularly long. It 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 Web address, or URL, to point to a specific page on a specific Web server:

<A HREF="http://www.example.com/page.html">Click here</A>

Relative links use shorthand to reference a page and do not specify the server. You generally use relative links to reference documents on the same Web site:

<A HREF="page.html">Click here</A>

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

All URLs for Web pages include the standard HTTP (Hypertext Transfer Protocol) prefix, as in http://www.example.com. Although 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 may 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 may use the MAILTO prefix (mailto:). There is also an encrypted version of the HTTP prefix, https://, which you may use when linking to secure areas of Web sites, such as those involving payment transactions.

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

Following the domain name in a URL is information about the directories in which the page is stored on the server. You use slashes (/) to separate the domain name, directories, and file name. Directory information does not exist in a URL if the HTML document for the page is stored in a Web directory's main, or root, directory.

File Name

For basic Web pages, the URL ends with the name of the HTML file. This information tells the Web server what document to retrieve and return to the Web browser. You may see additional information at the end of URLs for pages that are generated dynamically, such as those on sites that use technologies such as PHP or Java. When you reference a Web site's home page, you often omit the path and file name from a URL, such 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 directory.

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. You create a link using the <A> tag with an HREF attribute. You surround the content that you are turning into a link with an opening and closing <A> tag.

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/index.html.

Link to Another Page

INSERT A TEXT LINK

• 
• 
• 
  
  
  

INSERT AN IMAGE LINK

• 

  Note

  To learn how to add images to a page, see Chapter 5

• 
• 
  
  
  

Note

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 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 file name, 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 New Window with a Link

LINK TO A 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".

  

MAKE ALL LINKS OPEN NEW WINDOWS

• 

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

  

Note

Can I make multiple links on a page open in the same window?

Yes. Just use the same TARGET value for the links, for example TARGET= "new1". The first time a user clicks one of the links, a "new1" window opens. Subsequent link clicks open pages in the same window.

Should I open new windows 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. This saves the user from having to scroll.

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

• 

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

• 

CREATE A LINK TO THE AREA

• 

  Note

  Be sure to include the pound sign (#) when linking to other areas of a page.

• 
  

  Note

  To use an image as a link, see the section "Link to Another Page" to learn more

• 
  

Note

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, and 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, and then create a link to the page, adding a # and then the name to 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. Then you can reference them with a URL just as you do an HTML page.

Thanks to special plug-ins, some Web browsers can open certain non-HTML files. For a file that it cannot open, a browser may prompt users to save the file on their computers. For more about plug-ins, see Chapter 12.

Link to Another File Type

• 

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

• 
• 
  
  

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

  Note

  To open the file in a new window, see the section "Open a New Window with a Link."

  

Note

Can I include links to plain text files?

Yes, and most browsers can open and display such files. Because browsers do not read plain text files as HTML files, browsers display the text unformatted and without inline images or other features. This can be useful if you want to deliver raw text data that viewers can easily save in their browser.

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 possible 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 Reader program, which can read PDFs.

You can create a link in your Web page that allows users to send an e-mail message. In most browsers, clicking an e-mail link opens a new message in the default e-mail client program. The user can fill out a subject and message and then send the information to the address specified in the link. Adding e-mail links is a good way to solicit feedback and questions from your Web site visitors. An alternative way to allow users to send you information is with a form. See Chapter 8 for details about forms.

Link to an E-mail Address

• 

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

• 
• 
  
  
  

Note

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 they have or have not 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

• 

  Note

  To learn more about HTML color, see Chapter 4

• 
• 
• 
  
• 
  

  Note

  To learn how to change link colors using CSS, see Chapter 10

Note

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 controls for your Web page text. To learn more about CSS, see Chapter 10.