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:

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).
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:

The Opening Tag: <A HREF="Links.html">
- <A (Open the link tag)
- HREF= (The most common attribute of the link tag, short for Hypertext REFerence, used to specify the target of the link)
- "Links.html"> (The file that is the target of the link)
The highlighted text: Jump to the Links.html file
- This part of the text appears in the Web browser as underlined or a different color (or both) to indicate a hypertext reference (link)
The closing tag: </A>

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 Opening Tag: <A HREF="Links.html#0050_Basic_Format">
- <A (Open the link tag)
- HREF="Links.html"> (The file that is the target of the link)
- #0050_Basic_Format" (The specific point in the file to jump to)
The highlighted text: Go to Basic Format Section in Links file
- This source or jumping point of the link
The closing tag: </A>

Attributes

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:

HREF
This is the source or start point of the jump
NAME
This is the (optional) target of a jump and is used to bring a reader to a specific point in a file
TARGET
When frames are being used, this sets the target of the link to the correct window

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.

HREF

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:

Another part of the same document
Discusses the # (pound) symbol in the HREF attribute and the NAME attribute
Another file on a local disk
Discusses accessing files using absolute and relative pathnames
Any URL
Discusses HREF links to various URLs

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.

NAME

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:

The source of the link
Used with the HREF attribute in the <A>...</A> tag
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</A>

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.

TARGET

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:

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:

<A HREF="/d¦/HTML/index.htm">
The file index.htm is located on Drive D: in the HTML directory
<A HREF="/Hard Drive/HTML Stuff/index.html">
The file index.html is located on the "Hard Drive" in the "HTML Stuff" folder

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:

<A HREF="file2.html">
Look for "file2.html" in the same directory as the current file
<A HREF="../file2.html">
Look for "file2.html" one level up from the current directory
<A HREF="../../file2.html">
Look for "file2.html" two levels up from the current directory
<A HREF="morefiles/file2.html">
Look for "file2.html" one level down from the current directory in the "morefiles" directory
<A HREF="../../Hard Disk 2/HTML/file2.html">
This time "file2.html" will be found two levels up, on a different disk "Hard Disk 2" and one level down in the HTML directory

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:

Protocol
Several types of protocols are listed below
Host name
The computer system that holds the data
Directory and filename
The information

Different types of URLs include

<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).
<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.
<A HREF="news:...">
Link to a Usenet newsgroup
<A HREF="newsrc:...">
Link to a specific newsrc file (used by Usenet news reading software)
<A HREF="mailto:...">
Activate the browsers mailing dialogue box
<A HREF="gopher://...">
Link to a gopher server
<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: