[Links]Hop, Skip, Jump

To & Fro

Links are created in HTML with the <A>...</A> tag, commonly referred to as the anchor tag. Before creating a link you need to know two things:
  1. The Target: the name (and location) of the file that you want to link. This is called the URL of the file (see below for more on URLs).
  2. The Source: the element (text or graphic) that will serve as the springboard to the target of the link.

Basic Format Of A Link

The basic format of a simple link looks like this:

<A HREF="Links.html">Jump to the Links.html file</A>

and appears in the browser as:

Jump to the Links.html file

The parts of the link are:

A slightly more advanced version of a link is one that can take you to a specific point in a file. This method relies on the NAME attribute of the <A>...</A> tag which is discussed at length below.

<A HREF="Links.html#0050_Basic_Format">Go to Basic Format Section in Links file</A>

and appears in the browser as:

Go to Basic Format Section in Links file

This method relies on an anchor tag in the Links file at the point in the file just before the Basic Formats section which would look like:

<A NAME="0050_Basic_Format"></A>

The NAME attribute of the <A>...</A> tag does not appear in Web browsers.

The parts of this link are:


The <A>...</A> tags by themselves are rather lame. The tags need more information in the form of attributes to make them function. The attributes for <A>...</A> the tag include: Note: The <A>...</A> tags do support other attributes such as METHODS, REL, REV, TITLE, and URN, but these are not nearly as common as the attributes listed above, and not covered in these Web pages.


The HREF attribute is used to specify the target of the link. The target can be any HTML file in the world, from your local hard disk to the other side of the planet. The target of the link can be: Note: The target of the link may also be a specific point in any Web page. The path (URL) to the file must be correct and the NAME attribute must be present in the target for this to work.

The basic format of a link using the HREF attribute is:

<A HREF="../index.html">Go to the index</A>

and appears in the browser as:

Go to the index

The basic format of a link has been discussed above.


I have found this attribute to be particularly useful. It allows an author to specify a point in the code that can be referenced as a target. The format is:

<A NAME="0500_Jump_To_This_Type"></A>

The user does not see anything in the Web browser.

The type does have to be unique in the sense that it appears in only 2 places:

  1. The source of the link
    Used with the HREF attribute in the <A>...</A> tag
  2. The target of the link
    Used with the NAME attribute in a separate <A>...</A> tag
The HTML code for the source of a link using the HREF attribute looks like:

<A HREF="0500_Jump_To_This_Type">
The reader sees this (highlighted) source type

The HTML code for the target of a link using the NAME attribute looks like:

<A NAME="0500_Jump_To_This_Type">

The user does not see anything in the Web browser as a result of the <A>...</A> tags using the NAME attribute.


The TARGET attribute allows the author to specify which window to open the linked HTML document when frames are being used in the Web page. Frames allow a display to be broken up into different horizontal and vertical windows called frames.

For instance, the following link will send the target of the link (using the TARGET attribute) to the upper left hand frame of this display:

This is giving me a headache

The frames section describes how a browser display can be divided and how each window can be named. The TARGET attribute sends the HTML page to the name of the window in the HTML code like this:

<A HREF="Gears.html" TARGET="TopLeftFrame">Grind the gears</A>

The code above will open the file Gears.html in the window named "TopLeftFrame". The link would look like this:

Grind the gears

Link To Another Part Of The Same Page

The code to link to another part of the same page involves using an anchor with the NAME attribute. Actually, in order to link to any point in an HTML document other than the top, the target HTML document must have an anchor tag with the NAME attribute. The HREF attribute will specify the specific type to search for in the HTML document. That specific string of text must exist for the link to perform properly.

The only other thing to do is to be certain that there is a # (pound) sign as the first character in the string to search for. This is the symbol that tells the browser that it is looking for a specific place in an HTML document. It looks like this:

<A HREF="#0200_LinkThisPage">Show me a link to this page</A>

The reader would see this in the browser:

Show me a link to this page

You may wonder what would possess me to use a string like 0200_LinkThisPage. Well, I have been messing with different types of code for a couple of decades, now. I find that the number helps the string stay unique; it gives me an idea of how far down the document I need to scroll to get to the point that I need to edit for changes and/or debugging; when there is a long list of elements, the numbers serve to keep the list a little more manageable by keeping things in columns. There are probably other advantages that I can't think of because I am very tired, now. I find it tends to save time especially as there are more alterations.

Link To A Different Local Page

As your Web presentation grows, it becomes increasingly difficult to manage if everything is in the same directory (or folder). It becomes reasonable at some point to organize files into subdirectories. HTML allows links to be made using both relative and absolute pathnames.

Absolute Pathnames

Absolute pathnames specify the exact location of the file using the names of the directories that must be traversed in order to reach the referenced file.

Absolute pathnames always start with a slash, which is how to tell the difference between absolute and relative pathnames.

Absolute pathnames are not nearly as portable as relative pathnames. If the files move to a different part of the hard disk, if a directory is renamed, or if the pages are published on the Web, absolute pathnames will not work. The paths will be broken and the files will not be found.

Here are some examples of absolute pathnames: Absolute pathnames are not reccommended for general Web publishing.

Relative Pathnames

Relative pathnames are the best way to keep your document portable. If the files are moved from one disk to another, or pushed several directories down, they still work. The browsers remembers where the first file was opened; when another is called, it begins looking in the same directory as the file it already has open. Here are some examples: Relative pathnames are much easier to move around. When it comes time to publish your Web pages on a server, the files will probably not work unless relative pahtnames are used.

More about URLs

URL stands for Uniform Resource Locator. Simply, it is a method to point to a specific place on the Internet. It allows each place to have a unique "address", like a street address or phone number. Each URL contains 3 parts:
  1. Protocol
    Several types of protocols are listed below
  2. Host name
    The computer system that holds the data
  3. Directory and filename
    The information
Different types of URLs include
  1. <A HREF="http://...">
    HTTP stands for HyperText Transfer Protocol and is the most popular protocol in use today (and the protocol that WWW servers use to send HTML pages over the Internet. If the URL ends in a "/" it implies that you are looking for the "default" file on the server, which is usually named "index.html" (usually all lower case, too).
  2. <A HREF="ftp://...">
    FTP stands for File Transfer Protocol. It is used to point to files on FTP servers and is a little different from HTTP. It is possible to specify a directory name (and retrieve a listing of files in that directory). It is possible to specify an HTML document which the browser will display. FTP sites are usually slower than HTTP sites (with a Web browser) because the connection to the server is closed after the information requested is retrieved.
  3. <A HREF="news:...">
    Link to a Usenet newsgroup
  4. <A HREF="newsrc:...">
    Link to a specific newsrc file (used by Usenet news reading software)
  5. <A HREF="mailto:...">
    Activate the browsers mailing dialogue box
  6. <A HREF="gopher://...">
    Link to a gopher server
  7. <A HREF="telnet://...">
    Start a Telnet session to the machine specified

Images Used As Links

Making an image act as a link instead of (or even with) text is easy. Use the <IMG> tag with the SRC attribute like this:

<A HREF="#0300Images_As_Links"><IMG SRC="Next.gif"></A>

The link looks like this:

The part of the link between the opening and closing tags is replaced by the code to insert an image. For more information on check out:

<A HREF="Images.html"><IMG SRC="Images.gif"></A>

Which translates to:

[Top] [Back] [Next] [Main Menu] [Index]
[ Basics ] [ Text ] [ Images ] [ Links ] [ Tables ] [ Forms ]
©Ken Kaleta 1997, 1998, 1999