HTML Continued

Anchors and Links

This material is adapted from Hyperlinks

Anchors and Links are the features of HTML that make websites so expansive as an information delivery platform. The technical skills necessary to create hyperlinks in your pages are minimal, but the best use of links within websites is truly a masterful skill to gain. Study information theory. Build a library of useful links from which to promote your ideas. Surf the Web often to find the best indexing schemes and approaches to expanding your impact through proper reference to others.

A hyperlink is, most commonly, an underlined word or phrase, or sometimes even a graphic image or icon, which has been tagged with a particular HTML-encoded HREF URL containing the specific address of another location.  Usually, by placing the cursor on the hyperlink and clicking on it, you can jump quickly or instantly from one Web location to another Web location (within the same document, in another document, or somewhere else on the World Wide Web). Occasionally, clicking on a hyperlink will elicit a sound, an image, an animation, or an executable piece of software.

In most Web pages, unvisited hyperlinks will remain blue in color.  After the hyperlink has been activated (visited), its color changes to purple.  In most Web browsers, these are the two default colors of unvisited and visited hyperlinks (but the browser allows you to change your defaults within the browser preferences menu). If you see a hyperlink to a location which your browser previously has visited, its color should be the visited color. (With some Web browsers, hyperlinks which make a jump to another location within the same document are always the visited color, whether those hyperlinks have been activated or not.)

The colors of unvisited hyperlinks do not have to be blue, and the colors of visited hyperlinks do not have to be purple. Using additional HTML tags or CSS style attributes you can implement any link color scheme, thereby overriding the default colors. All the unvisited hyperlinks in a document can be made any color you wish, and all the visited hyperlinks can be made any (usually a different) color.

Most often, a hyperlink will jump to the beginning of another Web document.  To implement a hyperlink, a pair of anchor (A) tags is required:

The HTML element <A HREF="URL">text or graphic image</A> defines an anchored hypertext reference (commonly known as a hyperlink), including the unique URL (Uniform Resource Locator) of the target location to which a browser will jump when that link is activated by clicking on it.  The file that a hyperlink targets or makes active when clicked on can be an HTML document, a graphic image, a sound, a video, or an executable program.

The <A HREF> tag may contain within it another parameter as part of the command:

Sometimes a hyperlink will jump to a certain location within another document, or even within the same document containing the hyperlink. We call such a feature a bookmark. In this case, two pairs of anchor (A) tags are required:

• <A HREF="URL#name">text or graphic image</A>: defines an anchored hypertext reference (commonly known as a hyperlink), including the unique URL (Uniform Resource Locator) of the target location to which a browser will jump when that link is activated by clicking on it.  In addition to the standard URL, a name attribute must be included which takes the browser to a specific location within the linked document. This name attribute is used only if the target is located within another document or the same document.  (In the specific case that the target of the hyperlink is within the same document as the hyperlink, only the #name aspect of the address needs to be listed: <A HREF="#name">.  In this case, the initial URL information is unnecessary.
  
  
• <A NAME="name">(optional header, text, or graphic image)</A>: defines an anchored name or called name anchor (target) to which a browser will jump when a hyperlink (<A HREF="URL#name">) with that target's address and name is activated.  The <A NAME> & </A> tags may be placed next to each other; any text or image between them is optional (although if the tags are located within a list or a table, there should be text between them). Some browsers will not recognize adjacent pairs of anchored name tags (<A NAME=""> </A> <A NAME=""> </A> <A NAME=""> </A>).  Therefore, it is recommended that something (such as a space, letter, word, or graphic) be inserted between one set of <A NAME=""> </A> tags and another set adjacent to it.  (Placing the empty, meaningless <!> tag between adjacent sets of anchored name tags will work; the <!> tag is invisible on a browser, and it takes up no space.)
  
  Note:  The "name" attribute of both the anchored hypertext reference tag (<A HREF="URL#name">) and the anchored name tag (<A NAME="name">) must match exactly; otherwise, the link will not occur.  Moreover, the "name" attribute of the <A HREF="URL#name"> tag must contain the "#" symbol for the link to work properly.
  
  Note:  Some browsers will not link to a <A NAME></A> tag which is located inside of a list or a table, although a link is more likely to be successful if text is placed between the <A NAME> and </A> tags.

Often it is desirable not to have hyperlinks to be underlined, which is the default appearance.  Furthermore, any hyperlink (underlined or not) can be made to change color when the mouse arrow "hovers" over it.  Here is the code that is used to do any or all of these things:

In most cases, the targeted address of a hyperlink is that of a location external, rather than internal, to the document containing the hyperlink.  If the target file is located within the same directory as the file document containing the hyperlink, only the target file name (such as document.html, photo.gif, sports.avi, rock.wav, or typtutor.exe) needs to be listed as the address in the hyperlink code.  This address is considered a relative URL.  (The URL, or Uniform Resource Locator, is the unique address of a file or location within a file). If, however, the target file is located outside of the same directory (especially, on another web server), the absolute URL or address of the file (such as http://www.theoceanproject.org/) must be included within the attribute value.

If you have more than one Web-enabled directory on your internet server, and the files at your Web site are located under two or more usuch directories (as mine are), there is an easy way to link from a document under one user name to a file under a neighboring user name.  (The same principle applies when linking from a document in one directory of your computer to a file in an adjacent directory.  In fact, your internet web site should be paralleled by adjacent corresponding directories on your computer.) Rather than writing the complete URL to link between directories on the same Web server, you can use the ../ sequence:

• ../ backs out of the directory in which the active document is located to refer to a parent directory. This simple sequence of characters avoids having to list the lengthy complete URL of a distant directory and file.