Home News Links People Catalog

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:

  • TARGET="_blank": opens up the linked page, specified by the URL, into a new browser tab or window (behavior varies by browser but most modern browsers open up a new tab).  Without the TARGET="_blank" parameter, a new page will replace the existing page in the same browser window.
  • 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:

    A:LINK    {Text-Decoration: none}
    A:VISITED {Text-Decoration: none}
    A:HOVER   {Color: #RRGGBB}
    where #RRGGBB is the hexidecimal color attribute value we have studied previously.

    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 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.
    Both of the following source code commands: 1. <P>Go to <A HREF="../htmlcss/">Student Class Repository</A>.</P>

    2. <P>Go to <A HREF="">Student Class Repository</A>.</P>
    create hyperlinks to the same place (the first hyperlink uses a relative URL from this page and the latter an absolute URL):Note: Two "../" symbols can be used to refer to a directory that is two levels above the current directory. In fact, you can use as many ../ sequences as you wish to get back to the webroot directory from which all Web content is stored.

    Note:  On some browsers, hyperlinks to locations external to that website are the visited link color, even before they have been activated.

    A graphic image can be the hyperlink which is activated to get to another location:

    • <A HREF="URL"><IMG SRC="graphic.png"></A>: defines an anchored hypertext reference (hyperlink), using a graphic image or icon (rather than text) as the image source of the visible link.  Most commonly, the photograph, icon, or other graphic is a .gif, .png, or a .jpg based image.

      If no BORDER parameter is specified within the <IMG SRC> tag, a uniform border around the image is created having a width of 2 pixels.  (The unvisited, active, and visited colors of the border will be the same as that of the other text hyperlinks on the page.)  BORDER="0" will cause no border to be present around the hyperlink image.

      Instead of a document or a location in a document being the target of a hyperlink, it is not uncommon for the target to be another graphic image.  In fact, sometimes a small, thumbnail version of an image can be used as the hyperlink (e.g., <A HREF=""> <IMG SRC="thumbnail.png"> </A>) which goes to the larger version of the same image.  Both of the following source code commands work well to set up hyperlinked images from thumbnails:
    <A HREF=""><IMG SRC="graphics/vivaNM.png" WIDTH="98" HEIGHT="43" ALT="Viva New Mexico!"></A><BR><BR>

    <A HREF=""><IMG SRC="graphics/vivaNM.png" WIDTH="98" HEIGHT="43" BORDER="0" ALT="Viva New Mexico!"></A>
    Notice in the source code of each small hyperlink image that the width and height are 98 pixels and 43 pixels, respectively.  These measurements are about 25% of the comparable measurements of the larger target image (WIDTH = 390 pixels, HEIGHT = 170 pixels).  A thumbnail image can be any smaller size and will appear as a miniature replica of the larger image, as long as the measurements of the smaller and larger images are directly proportional.  Simply multiply the WIDTH and HEIGHT measurements of the larger image by the same number to obtain the WIDTH and HEIGHT measurements of the smaller, thumbnail image.  Here is the math for the above measurements:
    • WIDTH conversion:  390 by .25 = 97.5 (rounded to 98)
    • HEIGHT conversion:  170 by .25 = 42.5 (rounded to 43)

    Alternatively, you can just modify the WIDTH or HEIGHT attribute and leave the other one out of the attribute list of the IMG tag. The browser will maintain the same aspect ratio for you.

    Sometimes, the target of a hyperlink is a sound file.  The source code for an image to hyperlink to a sound file looks like this:

    <A HREF=""><IMG SRC="graphics/mygraphic.png" BORDER="0" HEIGHT="116" ALT="Canary Song"></A>

    Area Maps

    With HTML, it is possible to embed many different graphic hyperlinks within a larger graphic image.  This is called image mapping.  Clicking these active areas or regions enables the browser to link to different documents or locations.  Either an ISMAP or a USEMAP parameter is placed inside of an <IMG SRC> tag to indicate which style of map will be used.

    The ISMAP style of image mapping is supported by all graphical browsers.  However, there are certain drawbacks to using it. The entire <IMG SRC> image used must be a hyperlink (that is, placed between <A HREF></A> tags).  Also, ISMAP references a server-side image map, because special server software (usually in a cgi-bin location at the server's site) must be present to translate the coordinates clicked upon and to determine a response.  Furthermore, time-consuming server-side processing of the coordinates, network delays, and other problems all can make this type of image mapping undesirable.  For this reason, it will not be discussed further here.

    The USEMAP style of image mapping is now supported by all browsers produced in the last five years.  The entire <IMG SRC> image used is not a hyperlink; rather, regions of the image are converted into hyperlinks, each with its own specific URL (address).  USEMAP references a client-side image map, because the HTML author (client) provides the map of coordinates for the image.

    • USEMAP="URL#name": indicates that a client-side map is to be used.  The value of the USEMAP parameter is the URL (address) of the document containing the map (which is embodied within <MAP> & </MAP> tags).  The "name" aspect of the URL matches the name of the map to be used (which is located inside the <MAP> tag).  Usually, the map is in the same document as the <IMG SRC> tag with the USEMAP parameter, in which case only the #name value is required for USEMAP.
    For a client-side map to work, a set of coordinates and URLs must be included somewhere (typically, in the same document as the <IMG SRC> tag with the USEMAP parameter).  This information defines the cursor-sensitive regions of the graphic image and the links taken when these regions are clicked on.  Such data is contained between map tags labeled with a specific name attribute:
    • <MAP>map information</MAP>: embodies "<AREA>" tags which contain all the information for a client-side map.  The map specifications themselves are not displayed on a browser.
    A <MAP> tag must contain within it a "name" parameter as part of the command:
    • NAME="name": specifies the name of a map.  The NAME parameter is unique for any given map and cannot be used by any other map in the document.  The "name" value of the NAME parameter must match the "#name" value of the USEMAP parameter in a <IMG SRC> tag for the map instructions to apply to the latter graphic image.  The USEMAP parameters for more than one graphic image may reference the same map.
    Between the <MAP></MAP> tags are empty "area" tags:
    • <AREA>: defines the shape and coordinates of a region in a <IMG SRC> graphic image and the action the browser should take if that region is selected by the user.  When the user's arrow moves over any region (defined by an <AREA> tag) within the graphic image, the arrow will change into a "hand" shape (as it does when encountering any hyperlink), and the URL of the link will be displayed at the bottom of the browser window.
    An <AREA> tag must contain within it other parameters as part of the command:
    • SHAPE="RECT|CIRC|POLY": defines the shape of a region in a graphic image which will become a hyperlink and will be sensitive to a user's arrow.  The SHAPE value determines how the values of the COORDS parameter (described next) will be interpreted by a browser.    "RECT" (or "RECTANGLE") (the default) defines a region with four sides and angles.
         "CIRC" (or "CIRCLE") defines a circular region.
         "POLY" (or "POLYGON") defines a region with multiple sides and angles.

    • COORDS="coordinates": defines the pixel coordinates of the SHAPE parameter of a region which will become a hyperlink.  (The coordinates of the upper-left corner of a graphic image are 0,0.)  The coordinates of points in a graphic image can be determined by using graphic software, such as Paint Shop Pro or Adobe Photoshop.
      For a rectangle ("SHAPE=RECT"), the coordinates are "X1,Y1,X2,Y2", where the X1,Y1 coordinates designate the upper-left corner of the rectangular region, and the X2,Y2 coordinates designate the lower-right corner of the region.

      For a circle ("SHAPE=CIRC"), the coordinates are "X,Y,R", where the X,Y coordinates designate the center of the circular region and R is the radius of the region in pixels.

      For a polygon ("SHAPE=POLY"), the coordinates are "X1,Y1,X2,Y2,...Xn,Yn", where each Xn,Yn set of coordinates designates a vertex of the polygonal region and "n" is the number of vertices.  (Since the polygon is closed automatically, it is not necessary to include the first pair of coordinates again at the end of the list.)

    • HREF="URL#name": defines the URL of the hypertext reference (hyperlink) to which a browser will jump when that region is activated by clicking on it.  The "name" attribute is used only if the target is a specific location within the same document or within another 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: <HREF="#name">.)  The file that a hyperlink targets or "calls up" when activated can be an HTML document, a graphic image, a sound, a video, or an executable piece of software.
    • NOHREF: optional; indicates that the region defined by the SHAPE and COORDS parameters in the <AREA> tag will not become a hyperlink and, therefore, will not link to another document if selected by a user. Note:  Either an HREF or a NOHREF parameter must be included within each <AREA> tag.
    The following shows code for a 300-pixel by 200-pixel graphic image (containing rectangular and circular regions) and client-side image map information:<CENTER>
    <TR> <TD><IMG SRC="graphics/geoimag1.jpg" USEMAP="#geoshapes1"></TD> </TR>


    <MAP NAME="geoshapes1"> <AREA SHAPE="CIRC" COORDS="150,100,29" HREF="circle.html">
    <AREA SHAPE="RECT" COORDS="0,0,149,99" HREF="prllgram.html">
    <AREA SHAPE="RECT" COORDS="149,0,299,99" HREF="rctangle.html">
    <AREA SHAPE="RECT" COORDS="0,99,149,199" HREF="square.html">
    <AREA SHAPE="RECT" COORDS="149,99,299,199" HREF="triangle.html">

    Area maps are very useful for locking down the look and feel of a menu that is graphical in nature, but even more useful for geographic presentations.