HyperText Reference Anchors - Links

HyperText Reference Anchors, also known as Links, are created using the basic command syntax below: 

<a href="URL">Link Text or Object</a>

Where URL is the Uniform Resource Locator of the target site, file or resource.  Link Text or Object can contain the actual text value that will display as the clickable link on the HTML document page.  Depending on how the browser's preferences are set, the Link Text will appear as underlined.  Images can also be used to generate clickable links.  If an inline image is used it will be surrounded by a blue border to indicate the link unless the border=0 command parameter is used in the <img src="../graphics/..."> code that loads the image (see examples below). 

HyperText Reference Links can be absolute or relative.  An absolute hypertext link gives the full URL to the target document, object or resource.  A relative hyptext link gives only a partial URL to the target and relies on the prevailing default for the balance of the address.  A default URL can be established in the Head Segment of the HTML document by inserting the code: 

<base href="default URL">

Where the default URL specifies the base address to be used as a prefix for all relative links defined within the HTML document.  Some care needs to be taken to make sure that relative link statements align properly with the statement of the base href.  A common error is to include one too many forward slashes (/) or to leave out a forward slash (/) in defining directory structures.  This will generate malformed URLs that don't work. 

Absolute links are not affected by the base href setting.  If no default is set in the Head Segment then the URL for the HTML document, itself, becomes the base href. 

Examples:

Absolute Links

<a href="http://www.iconbazaar.com/">IconBAZAAR</a>
IconBAZAAR

<a href="http://www.iconbazaar.com/fractals/"><img src="../graphics/fractals.gif"></a>

<a href="http://www.iconbazaar.com/fractals/"><img src="../graphics/fractals.gif"
border=0 align=absmiddle>Fractals</a>
Fractals

A Relative Link

<a href="../lists/">Lists and Indents</a>
Lists and Indents

Note that the browser provides a location prefix for the link.  Move the pointer over the link and observe the URL reported in the message bar at the bottom of the browser screen.

Name Anchors and Document Location Marker Links

Name Anchors mark specific locations within HTML documents.  They are used for internal navigation within a document or for navigation to specified locations within this document from other HTML documents.  They are created using the basic command syntax below: 

<a name="marker">Optional Link Text or Object</a>

Where marker defines name of the marked location within the HTML document.  Link Text or Object is optional and is generally not used so as to make the marker hidden.  If a visible marker is desired then text or objects can be included here.  The Link Text can be a segment of the code of the HTML document, itself.  It is best to set a location marker just above the segment of a document to be displayed.  This assures that the browser will display the segment from its beginning. 

Name Anchors are addressed using Document Location Marker Anchor Links.  These anchors have the same general form as the standard HyperText Reference link, except that they reference a specific location within the target document.  Links to document markers are created using the basic command syntax below: 

<a href="document#marker">Link Text or Object</a>

Where document is the Uniform Resource Locator of the target document and #marker specifies the name of the marked location to find and display within the target document.  Link Text or Object can contain the actual text value that will display as the clickable link on the HTML document page.  Depending on how the browser's preferences are set, the Link Text will appear as underlined.  Images can also be used to generate clickable links.  If an inline image is used it will be surrounded by a border to indicate the link unless the border=0 command parameter is used in the
<img src="../graphics/..."> code that loads the image (see examples below). 

Examples:

1. <a href="#example1">Go to Example 1</a>
   Go to Example 1
   <a name="example1"></a>
   (no visible marker)

2. <a href="#example2">Example 2</a>
   Example 2
   <a name="example2"><img src="../graphics/fractals.gif"></a>
   
   (visible marker)

3. <a href="#example3">See Example 3</a>
   See Example 3

   <a name="example3">Marker for Example 3</a>
   Marker for Example 3
   (visible marker)