The feature that best characterizes the World Wide Web is the ability to link directly from one page to any other page anywhere on the Web. Normally, this hyperlinking is triggered by a mouse click on a letter, word, phrase, or graphic on the linking page, with the linked page retrieved and loaded immediately into the browser. Web links can be made to local pages in the same directory as the linking page or to a page at any other site on the Web. This is a very powerful, yet easy to use, feature that permits you to navigate to pages located around the world with the simple click of the mouse.

The <a> Tag

As described in an earlier tutorial the most common type of link is a clickable word or phrase that transfers directly to the target page. A text link is created by surrounding the text string with an <a href> anchor tag specifying the location of the page to which to link. The basic format of the tag is shown below.

General format for <a> tag.

The linking text is, by default, underlined and displayed in blue as a visual clue that the text string is a clickable link. The location of the linked page is given by the href attribute.

You can link to your own pages or to a page at a remote Web site. If the linked page is on the local PC or resides on the same Web server as the linking page, then the directory path to that target page is used as the URL (a relative link). If the linked page is at a different Web site, the link must include the protocol and domain reference http://domain name (an absolute link). You can link to the site name to retrieve the default home page or, if it is known, to a particular page at that site.

Link Targets

Unless instructed otherwise, the linked page opens in the same browser window that displays the linking page. The original page is replaced by the linked page. It is often convenient, especially when linking to remote sites on the Web, to open that page in a different browser window. When visitors leave your site to browse remote sites they may not be able to back-click their way to your original page. By opening remote sites in a new window, your visitors do not lose contact with your pages. Your site is always available in the original window.

You can specify where a linked page is to be opened by coding a target="_window" attribute in the <a> tag. Special values are coded to indicate the target window, each term prefixed with an underscore ( _ ) character. These target window codes are shown in the following table.

Values for target attribute of <a> tag.

In the following example a remote site is opened in a new browser window; the page containing the link remains visible in the original browser window.

<a href=”https://www.softlookup.com” target="_blank">The Softlookup homepage</a>

Link Styles

Text links are displayed in three different colors to identify the three conditions of a link. An unvisited link is displayed in blue, a visited link is displayed in purple, and an active link (the mouse button is clicked while pointing at the link text) is displayed in red. Also, text links are underlined.

You can override these default colors and underlines, as well as include other visual indicators of link status, with the style sheet selectors shown below.

Link selectors and stylings.

The a:link selector identifies an unvisited link, the a:hover selector identifies a link with the mouse positioned over it, the a:active selector identifies a link being clicked, and the a:visited selector identifies a link that has been visited. Any combination of text style properties and values can be applied to these linking states. The following style sheet illustrates possible settings for the four link states.

<style>
   a:link    {color:blue; text-decoration:none; font-size:12pt}
   a:hover   {color:green; font-weight:bold; text-decoration:underline; 
              font-size:14pt}
   a:active  {color:red; text-decoration:underline; font-size:14pt}
   a:visited {color:gray; text-decoration:none; font-size:12pt}
</style>

A normal unvisited link is colored blue but does not display the underline. When the mouse cursor is moved on top of the link it changes to green, is underlined, and is displayed in 14pt size. When the link is clicked, its color changes to red. A visited link is displayed at 12pt gray with no underline.

link="color"
vlink="color"
alink="color"

<body link="green" vlink="gray" alink="purple">

On-Page Links

Links are normally made between different Web documents so that visitors can navigate between pages. Links can, however, be made to different locations in the same document. These on-page links are often used to link from a table of contents at the top of a page to information appearing elsewhere on the same page.

In order to create on-page links you need to code the pair of <a> anchor tags shown below.

General formats for <a> tags to create on-page links.

The location to which a link is made (normally a side heading on the page, but any other target text can be used) is enclosed in an <a name="name"> tag supplying a name to identify this on-page link destination. The text from which the link is made is enclosed in an a href="#name" tag in which this destination name is coded, preceded by "#".

The following code shows three links to three different locations on a page. The target locations are named ITEM1, ITEM2, and ITEM3. When a link is clicked at the top of the page, the browser scrolls to one of these named destination links.

<!-- Links -->
<a href="#ITEM1">Go to Item 1</a>
<a href="#ITEM2">Go to Item 2</a>
<a href="#ITEM3">Go to Item 3</a>


<!-- Link Targets -->
<a name="ITEM1"><b>Here is Item 1</b></a>
...
<a name="ITEM2"><b>Here is Item 2/<b></a>
...
<a name="ITEM3"><b>Here is Item 3</b></a>
...

Even though the destination text strings are enclosed in <a> tags they are not colored or underlined as are normal links. They are "invisible" targets for links (using name attributes), not links themselves (using href attributes).

When linking from the top of a Web page to locations farther down the same page it is a good idea to provide return links to the top of the page. In this example each linked section (ITEM1, ITEM2, and ITEM3) is followed by a link back to the Top of the page. Each of these on-page links is coded as follows.

<a href="#TOP">Top</a>=>

It is instructive to note that there is no on-page destination text named "TOP". If there is no location on a page matching the target name, then the browser returns to the top of the page by default. The destination name "TOP" is used because there is no such target name, knowing that the browser will scroll to the top of the page as a result.

You can, of course, supply a named text string as the return destination for linking back to the top of the page. You could, for instance, add a heading at the top of the page as the return link target:

<h1><a name="TOP">On-Page Links</a></h1>

Now, when a Top link is clicked, the page is scrolled to the named location of the heading "On-Page Links."

It is possible to link from one page to a specified location on a different page, combining an external link with an on-page link. Assume, for instance, that you need to link to a section of NextPage.htm that is identified with the tag <a name="SECTION3">. Use the format for an on-page link, <a href="#name">, and simply prefix the target #name with the name of the page.

<a href="NextPage.htm#SECTION3">Go to Section 3 on Next Page</a>

This link transfers to a page named NextPage.htm and scrolls to the tag identified with <a name="SECTION3">. This type of linking can normally be done only with pages you create. It is unlikely that you would know the named target sections of remote pages even if they are available for linking.

Links to Other Documents Types

It is not necessary to link only to Web pages. You can use the <a> tag to link to text documents, word processing documents, spreadsheets, graphic files, and other types of documents. The manner in which the browser treats the linked document depends on the document’s file extension and how the browser is set up to handle non-HTML extensions.

Text Files

Standard text files with the .txt extension are opened in the browser just like an XHTML document. The file is displayed in the original font face and style used to create the document; plus, the browser maintains original line breaks and spaces coded in the document. The link below retrieves a text document located in the same directory as the Web page containing the link and opens it in the browser.

<a href="TextDocument.txt">Display Text Document</a>

In this example the text document is opened inside the browser window, replacing the linking page. If target="_blank" is added to the <a> tag, the document is opened in a separate window. However, when a document with a .txt file extension is opened in a separate window, it is opened by the program associated with that file type. In the case of a .txt file, the default text editor program, normally Notepad, is used to open the document, which then appears inside the external Notepad window. If the user has chosen a different editor program as the system default, then the document is opened inside that program.

Word Processing Documents

Word processing documents can be displayed in the browser if compatible software is available on the the user’s computer. When linking to a Microsoft Word document -- and Microsoft Word (or the special Word reader software) is installed on the user’s computer system -- then the Word document opens inside the browser window. The following link opens a Word document, replacing the linking page.

<a href="WordDocument.doc">Display Word Document</a>

Notice that the Microsoft Word program opens inside the browser window and that a subset of Word menus is added to the browser’s Menu Bar. Users can perform basic editing of the Word document and can save it to their local computers. They cannot, of course, edit and resave the original document, only the copy displayed in the browser window. If target="_blank" is added to the <a> tag, then the linked document is opened in a separate browser window that also includes the subset of Word editing menus.

Spreadsheet Documents

As with word processing documents, spreadsheets are displayed in the browser if compatible software is available on the user’s computer. When linking to a Microsoft Excel document -- and Microsoft Excel (or the special Excel reader software) is installed on the user’s system -- then the spreadsheet opens inside the browser window. The following link opens an Excel spreadsheet in the same browser window as the linking page.

<a href="ExcelDocument.doc">Display Excel Document</a>

A subset of Excel menus is added to the browser’s Menu Bar for minor editing and saving of the document to the local computer. The Back button is used to return to the linking page. A similar external window opens when the link is made with target="_blank" added to the <a> tag.

Presentation Documents

Slide presentations are displayed in the browser if the same software is available on the user’s computer. When linking to a Microsoft PowerPoint document -- and PowerPoint (or the special PowerPoint reader software) is installed on the user’s system -- the presentation opens inside the browser window. The following link opens a PowerPoint document for display in the browser window.

<a href="PowerPointDocument.doc">Display PowerPoint Presentation</a>

As in the case with Word and Excel documents, PowerPoint documents have associated menus added to the browser’s Menu Bar for navigating the slide presentation and saving it to the local computer. The Back button returns to the linking page. This same external browser window is opened when target="_blank" is added to the tag.

Graphic Files

Both GIF and JPEG images can be displayed in the browser through direct links to these graphic files. In other words, it is not necessary to embed a graphic on a Web page in order to display it. Simply by linking to files with .gif and .jpg file extensions the images are opened directly inside the browser.

Since the images are not formatted on a Web page, they are positioned in the top-left corner of the browser window at their original sizes. The following link opens a .gif image file. When the image opens in the same browser window, the Back button is clicked to return to the linking page.

<a href="Flower.gif">Display GIF Image</a>

Email Links

There is a variation of the href attribute that permits you to set up an email link. A click on the link opens the visitor’s default email program for correspondence with the address provided in the link. The general format for this link is shown below.

<a href="mailto:email@address">link text</a>

General format for mailto: link.

The href=mailto: attribute is followed by an email address. The following link, for example, opens the visitor’s email program (the one that is set as their browser’s default email program) and inserts the specified email address into the address line.

<a href="mailto:info@softlookup.com">Contact Me</a>

This type of link often appears on Web sites for visitors to correspond with the owners or authors of the sites. You might, for instance, use your email address in the link for feedback from visitors to your site.

---

---