NetaGuru - Online Learning Center

  HTML Tutorials
  GuruSearch!
  Web Glossary
  LiveWire Forums

  Getting Started
  Text
  Links
  Colors
  Backgrounds
  Images
  Tables
  Frames
  Image Maps

  Design Guide
  Forms
  Meta Tags
  JavaScript
  Style Sheets
  SSI
  CGI
  Web Browsers

  HTML Editors
  Free Web Hosting
  Domain Names
  Copyrights

If you have been browsing the internet for any time at all, you probably know that at the core of every web page is the hyperlink. A hyperlink (or link for short) is simply a snippet of code that directs the user's browser to another page or file on the internet.

Links are created using the <A> or anchor tag. Every <A> tag requires a few attributes to make it function properly. The first and most important of these is the HREF attribute. HREF stands for Hypertext Reference and is used to specify where you want the user to go when they click on your link. The proper use of the HREF attribute is HREF="URL of document". The URL of the document can either be the entire URL of the file (e.g. HREF="http://www.netaguru.com/index.shtml") or the relative path to the file. Relative paths tell the browser the location of the target file based on the location of the current file. For example, if the file that you are linking from is in the directory named "html", and the file that you are linking to is named "important.html" and is located in the directory named "content" which is inside of the "html" directory, the relative path would be "content/important.html". if the file is located in a directory that is outside of the current directory, you must use "../" to move up one level in the directory tree. Relative path names can be incredibly useful to point to other files of your site without typing their entire URL. This can also be handy when you are planning to relocate your site to another server and do not want to be forced to change all of your links to reflect the change.

An example of an <A> tag is:

<A HREF="url or relative file path">Text or image that the link is to apply to</A>

An example of a text link:
Code: <A HREF="links.shtml">Links Tutorial</A>
Result: Links Tutorial
An example of a image used as a link:
Code: <A HREF="links.shtml"><IMG SRC="../images/headers/links-head.gif" BORDER="0"></A>
Result:
Border="0" is commonly used when an image is a link because otherwise a thick blue line outlines the image.
An example of a image used as a link without Border="0":
Code: <A HREF="links.shtml"><IMG SRC="../images/headers/links-head.gif"></A>
Result:

Another important element of the link tag is the TARGET attribute which specifys where to open the new page. It is be used to open the page in a specific window or frame. You can also use other special values to open new windows or control frames. The values that are availible to you are

Frame or Window Name - The name of a frame or window to load the link into it (if the window that you name does not exist, a new window with that name will be created)
TARGET="Main"
_blank - Creates a new window and opens the page in it
TARGET="_blank"
_parent - Opens tha link in the parent frame set
TARGET="_parent"
_self - The frame containing the link (default value)
TARGET="_self"
_top - Opens the page in the entire browser window
TARGET="_top"

Another use for the <A> tag is to place named anchors on your web site. An anchor allows a link to point directly to a certain location on a page. This is especially useful if you have a page with a lot of text and you want to reference different topics at different points on the page. Anchors are placed using the <A> tag but instead of using the HREF attribute, you use the NAME attribute.

An example of an anchor:

<A name="anchor"></A>

This creates an anchor named "anchor" at this point on the page. You can then link to the anchor by adding a number sign (#) and the name of your anchor to the end of your link path.

<A HREF="links.shtml#anchor">Anchor</A>

If you are linking to an anchor that is on the same page as the link, you can simply link to #anchor and ommit the path to the file.

Tell a friend about NetaGuru | Comment on NetaGuru | Bookmark NetaGuru

This page was last updated 12/12/03
Please read our disclaimer and legal notices.
All editorial content and graphics copyright 2002 NetaGuru.
Designed and maintained by David Jones and Reid Beels.

Search the Best of the Web!