The <A>...</A> Tag

Links are created in HTML with the <A>...</A> tag, commonly referred to as the anchor tag. Before creating a link two things must be known:

• 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

The most common attributes of the <A>...</A> tag are

• HREF short for Hypertext REFerence and used to specify the TARGET of a link
• NAME which allows reference to a specific point in an HTML file

The HREF Attribute

The HTML code for a link is shown and broken down below:

Example: Basic Use Of HREF Attribute
<A HREF="Links.html">Link to the top of this example</A> ____________</Example>

Result:
Link to the top of this example ____________</Result>

Breaking it down, the parts of the link are as follows:

• The complete example to break down:
  • <A HREF="Links.html">Links.html</A>
    
• The Opening Tag:
  • <A (Open the link tag)
  • HREF= (The most common attribute of the link tag, used to specify the target of the link)
  • "Links.html" (The name of the target file in quotes)
  • > (Close the link tag)
• The text that appears in the browser: Links.html
  • This part of the code appears in the Web browser as underlined or a different color (or both) to indicate a hypertext reference (link)
• The closing tag: </A>

NAME Attribute

Often linking to a specific file is not specific enough. Linking to a specific place in the BODY of an HTML page can be done with the NAME attribute.

Example: Use Of NAME Attribute
<A NAME="AnchorPoint"> The tag above is not seen in a browser but acts as a placeholder for a specific HREF link. Note the use of the Pound Sign (#) in the code below: <A HREF="Links.html#AnchorPoint">Jump to the AnchorPoint in the Links.html file</A> ____________</Example>

Result:
Jump to the AnchorPoint in the Links.html file All the reader sees is the line above ____________</Result>

The complete example to break down is in two parts:

1. The following code must be in the Links.html file:
   <A NAME="AnchorPoint">
2. The code to link to that specific point can be in any file:
   <A HREF="Links.html#AnchorPoint">Link To It</A>

1. The Target Anchor Tag code:
   <A NAME="AnchorPoint">
   • <A (Open the link tag)
   • NAME= (The attribute that will indicate a specific point in the file)
   • " (The name of the Anchor is enclosed in quotes)
   • AnchorPoint (The unique name of the Anchor point)
   • " (Close the quote)
   • > (Close the link tag)
2. The Source Anchor Tag code:
   <A HREF="Links.html#AnchorPoint">Link To It</A>
   • <A (Open the link tag)
   • HREF= (The attribute that will cause the link to work in the browser)
   • " (The target is enclosed in quotes)
   • Links.html (The name of the target file)
   • # (The Pound Sign indicating an Anchor Tag with the NAME attribute should be found in the target file)
   • AnchorPoint (The corresponding NAME attribute of the <A NAME=> tag)
   • " (Close the quote)
   • > (Close the link tag)
   • Jump to the AnchorPoint in the Links.html file (The text that will cause the browser to link)
   • </A> (The closing tag)

Any text can be used in place of the AnchorPoint example. The type must match exactly in both the source (<A HREF=...>) and target (<A NAME=...>) tags.

If linking to a different point in the same file, the name of the target file may be omitted in the source, starting the name of the link with the Pound Sign:
<A HREF="#AnchorPoint">Link To It</A>

Using Images As Links

Anything between the opening (<A HREF="...">) and closing (</A>) anchor tags will serve to activate the link whether it is text or a graphic element.

Simply adding code for an image inside the anchor tags will work:

Example: Using An Image As A Link
<A HREF="Links.html"><IMG SRC="Image.gif"></A> ____________</Example>

Result:
____________</Result>

Addressing A Link

As a Web presentation grows and dozens or hundreds of files are needed, it becomes necessary to organize themm in folders or directories.

When HTML files that are not in the same folder or directory are referenced, the link must contain instructions leading the browser to the location of the file. HTML allows links to be made using absolute and relative 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 are not nearly as portable as relative pathnames. If files move to a different folder or directory, or if part of a path or disk is renamed, absolute pathnames will not work. The link will be broken and the files will not be found.

Example: Absolute Addressing (1)
<A HREF="d:/HTML/index.htm"> The file index.htm is located on Drive D: in the HTML directory ____________</Example>

Example: Absolute Addressing (2)
<A HREF="Server/HTML Stuff/index.html"> The file index.html is located on the "Server" in the "HTML Stuff" folder ____________</Example>

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, the links still work.

The browsers remembers where the first file was opened; when another is called, it begins searching from the same directory as the file it already has open.

Example: Relative Addressing (1)
<A HREF="file2.html"> Look for "file2.html" in the same directory as the current file ____________</Example>

Example: Relative Addressing (2)
<A HREF="../file2.html"> Look for "file2.html" one level up from the current directory (two periods and a slash) ____________</Example>

Example: Relative Addressing (3)
<A HREF="../../file2.html"> Look for "file2.html" two levels up from the current directory (two periods and a slash, once for each directory) ____________</Example>

Example: Relative Addressing (4)
<A HREF="morefiles/file2.html"> Look for "file2.html" one level down from the current directory in the "morefiles" directory ____________</Example>

Example: Relative Addressing (5)
<A HREF="../../Specials/Pricing/file2.html"> This time "file2.html" will be found two levels up, and then down in the directory structure into the "Specials" directory then the "Pricing" directory ____________</Example>

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 to direct the browser to a specific file

• <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