LINKING

HTML hyperlink tags

One of the most unique and useful aspects of web pages and sites is the ability to link to other sites, to other pages, or to different locations on the same or alternate pages. This is known as creating a hyperlink and is accomplished quite easily, especially if you have carefully thought out your site plan and identified all of the possible links you wish to include. If you don't do this you will probably become hopelessly bogged down and confused. The process of linking involves a number of different HTML tags as well as an accurate knowledge of the addresses of the destination pages or locations.

Kinds of links

The HTML tags used for linking are dependent upon where you wish to link. There a few different types of links which are shown here.

• Links from one page to another, external page at another site on the web.

• Links from one page in your site to another page in your site.

• Links from one page in your site to a location further down on the same page.

• Links from one page in your site to a location further down on a different page.

• The only type of link you can't make is one from your site to a location on a page in another site on the web.

Addresses, destinations, and anchors

Before you start with the appropriate HTML tags you should first be clear on addresses or file names. To link to a page somewhere out there on the web, you will need the complete and accurate URL for the site or page. This must be complete so that the page can be found and it goes without saying that it must be accurate in terms of letters, punctuation etc. to assure linking.

If you are building a link from one of your pages to another of your pages in the same site, then the complete URL is not necessary, only the accurate filename. This is the name under which you have saved it on your disc or hard drive, such as mypage.html (don't forget the .html or .htm suffixes).

For linking to other locations on the same or different pages you will need to create an anchor tag at the destination location. This means that you need to specify a place further down on the page where the browser can go when the link is clicked. This works well for very long, scrolling pages like glossaries or indexes, but isn't real useful in shorter pages where a brief scroll will take the user down the page. You will need to decide this when you design the pages. If you plan to use this type of link, you will need to place a different anchor tag at each of the destinations down the page so that the browser can link to the appropriate location on the page.

The <A> or anchor tag for linking

The basic HTML tag used in linking is the anchor tag, <A>. This is usually used with the attribute HREF which stands for hypertext reference, making the complete tag <A HREF=" destination file">. The destination file can be any HTML document that represents a page or any image. For this reason, the destination file will always end in .HTML or .HTM, or if it is an image, .JPEG, .JPG, or .GIF.

The only differences between different links is in the nature of the destination file. If it is located in the same folder as the document with the link, all that is necessary is the file name.HTML. If on the other hand, it is some where on the web, then the complete URL for the destination page must be given. Take a look at these examples.

<A HREF=" story.html">

<A HREF="http://www.storybook.edu ">

The first of these links to a local file called story.html, while the second link goes to a site on the WWW called storybook.edu.

As you design web pages you will find that most of the pages you will link to will be of your own creation or at least locally available, so you should always place them in the same folder as all of your other HTML documents. In this way, your links will be easy to create and you won't have problems with broken links.

Of course, you remember that most HTML tags require a closing tag and the linking anchor is no exception. The close tag is </A>. In between the open and close tags, you should place any text that you want to become "hot" or "clickable" to activate the link. When you do this, that portion of the text will be highlighted and underlined, indicating that it is a link. The actual wording of this text should, of course, reflect the nature or destination of the link clearly to the visitor. Avoid using vague linking text like "click here".

Linking from images

You can also make an image a clickable link by simply including the <IMG SRC="picturename.gif">in between the open and close tags of the link. In this case, the image itself will have a highlighted border and will activate the link when clicked by the visitor. Sometimes it is a good idea to also include some identifying text so that the visitor knows that the image is a link. Often the highlighting is not very obvious or the visitor is not aware that it is a link.

Imagemaps are a special form of visual link in which the image is broken up into several different "hot" or clickable links. This is particularly useful with maps or complex diagrams. Designing imagemaps is, for the time being, beyond what you are ready to do here, however.

Links to destinations on the same page

Occasionally, and especially with very long, scrolling pages, you may wish to link to locations further down the page, thereby relieving your visitor of the burden of scrolling or to help them find a specific location on the page.

To do this, you need to create two link tags. The first of these is similar to the usual link tag, but it does include a special destination identifier called an anchor point. This identifier uses a pound sign (#) which precedes a name for the destination. Look at this example.

<A HREF="#part six">

In this case, the term "#part six" refers to an intended destination further down on the page.

The second part of this link is the <A NAME> anchor which is placed at the specific location further down on the page where the link should be aimed. <A Name"> anchor should contain the anchor tag and the name of the destination that was assigned earlier in the link tag. In this case that would be:

<A name="part six">.

Notice that the pound sign (#) is not used in the NAME anchor.

You can also combine these tags to enable a visitor to link to a different part of a different page. To do this, simply include the NAME anchor in the link as shown below

<A HREF="story.html#section ten">.

and the anchor is

<A name="section ten">.