Link It with HTML and Scripts  pwp home  >   Reference Library  >   HTML Tutorials  >  HTML & Scripts

As we mention in our Getting started with HTML - Links article, which is included in the PWP Help page's Special Features section, "One of the main features of HTML is the ability to provide hypertext links."   Hypertext links are one of the simplest, and in some cases on of the most misunderstood, of the HTML capabilities.   Links can tie one place on your web page to some other place on the WWW.

In this article we will review the use of the Anchor tag in achieving external (a completely different site, a different page on your site, or a 'downloadable' file) or internal (to another section on the current page) Hypertext Links.  We will also present various forms of the Hypertext Link, as simple text and/or images, and as Meta Refresh and URL Redirect CGI scripts.

The basic "Anchor" tag;
It is utilized by all forms of hypertext links! The barebones Anchor tag is <A attributes > identifying text </A>   The most commonly used attributes for the Anchor tag, defining its use, are HREF=string and NAME=string; where 'string' indicates some text, they are formed something like this:

<A HREF="URL">enclosed text</A>

and

<A NAME="identifer">enclosed text</A>

Where;

• HREF specifies the URL or location of the section, page, site, or file to which a visitor will be taken when they select (click on) the hyperlink.  The quotes must be closed around the value in HREF.  Older browsers were often quite forgiving about them, but as this caused other problems, it was fixed in newer releases.  As a result, a hyperlink with an unclosed quote may not work correctly.
  NOTE: You must make sure the HREF's URL reference EXACTLY matches the location's URL, all upper- and lowercase matching. If one letter is capitalized in one, but not the other, the hyperlink will not work.
  
• NAME is used to set up "named anchors." The enclosed text is treated as an unique "target" to which a browser can jump directly, and displays as 'normal' text.  For example, a definition within a document of: "<A NAME="toc">Table of Contents</A>" would be selectable via the URL "#toc".
  

The enclosed text of HREF will generally appear as underlined and in a different color than the rest of the text, selectable by the visitor; with a image link being 'bordered' by that identifying link color. Whereas, the enclosed text of NAME is simply a place marker, appearing as normal text on the page without an interface with the visitor.

For a detailed tutorial on the mechanics of using Hyperlinks and specific examples, see "Getting started with HTML - Links". It is included in the PWP Help page's "Special Features" section.

Off-page (external) Links:
Linking to a page on another WWW site requires an "absolute link", one where the complete URL of the linked page must be included. For example, to provide a link from your page to Prodigy Internet's PWP web site, your tag would be something like this:

Would you like to visit  <A HREF="http://pages.prodigy.net/">  Prodigy's Personal Web Pages site?   </A>

and it would display as:

Would you like to visit Prodigy's Personal Web Pages site?

Providing a link to another one of your own pages is also an external link, however, it allows use of a "relative link" for the HREF attribute.It means that the location URL is "relative" from the URL location of the current page. The advantages are: a) you have less to type, and b) it's easier to move a group of pages from one location (like your harddrive) to another (like your PWP directory). This is because the page's relative path names will remain the same.

If your PWP web directory's URL, containing all of your files, is http://pages.prodigy.net/userid/, and you want to include a link on your page, index.htm, that takes the visitor to your personal.htm) page, the tag placed in index.htm providing the 'relative' link to personal.htm would be something like this:

Learn about my <A HREF="personal.htm"> interests </A>.

However, if the file personal.htm were in subdirectory, such as "mystuff", of your webspace (or hard drive), simply add the name of the subdirectory and a "./" in front of the name of your page, like this:

Learn about my <A HREF="./mystuff/personal.htm"> interests </A>.

As you can see, using relative links can save you quite a bit of typing. It's a whole lot easier and quicker to type ./mystuff/personal.htm for a link than it is to type http://pages.prodigy.net/userid/mystuff/personal.htm.

On-page (internal) Links:
To provide a link to a specific place on your web page requires a two step process. For example, let's say that at the bottom of your page, you want to provide a way for your visitors to easily return to the top of that page. To do so, you'd first have to provide a NAME anchor, placed at the 'displayed' top of your page, that identifies that spot. Something like this: One of the main features

<A NAME="top">As we mention</A> in our Getting started with HTML.........

The text in quotes assigns the name top to the anchor thereby marking the place on the page where the tag is located.

Then at the bottom of the page you would place a hyperlink tag something like this working example:

Return to the <A HREF="#top"> Return to </A> the top of the page. Return to the top of the page.

NOTE: In order for this link to work, you must be sure to add the # to the NAME of your internal anchor, and ensure that upper- & lowercase letters match..

You can also use internal anchors to jump from one page to a specific section on another page. For example, let's say that you want to provide a link on your index.htm that would take your visitors to the hobbies section of your personal.htm page. First, on your personal.htm page, identify the hobbies section like this:

<A NAME="hobbies"> My hobbies. </A>

Next, on your index.htm page, provide a link that takes the visitor directly to the hobbies section of your personal.htm page, like this:

Read about my <A HREF="personal.htm#hobbies"> hobbies. </A>

Which would appear on your page as:

Read about my hobbies.

Now, when a visitor is on your index.htm page and clicks on hobbies, they'll be taken right to My hobbies on your personal.htm page.

Images as links:
Sometimes it's nice to provide visual links rather than textual links, use an image that will link to another page. For example, on your index.htm page you want to link to your personal.htm page, but using an image rather than providing text. You could do something like this:

<A HREF="personal.htm"> <IMG SRC="mypic.gif" HEIGHT="33" WIDTH="33" ALT="My personal info page"> </A>

Which would appear on your page as:

As you may have noticed, in this example there's a border around the image that show that the image is clickable. You can eliminate the border around the image by adding BORDER=0 to the IMG tag, like this:

<A HREF="personal.htm"> <IMG SRC="mypic.gif" HEIGHT="33" WIDTH="33" ALT="My personal info page" BORDER=0> </A>

Which would appear on your page as:

Providing 'downloadable file' links:
Another use for links is to allow visitors to view images, hear sounds, or download files. This is an ,external link', but rather than placing a Web Page file name in quotes after the HREF attribute, you put the name of the image or sound file which your visitors can see/download/hear. For example, if you have a picture of yourself uploaded to your PWP directory, named "mypic.gif", that you'd like to allow your visitors to see or download, the link tag would be something like this:

Here's a <A HREF="mypic.gif"> picture </A> of me.

Which would appear on your page as:

Here's a picture of me.

You can replace mypic.gif with whatever file name you'd like your visitor to download (regardless of the file type). When a visitor clicks on picture, the file will be immediately opened up with the browser, or whatever helper application the visitor has configured for that file type. If the file you're providing is a type that the visitor does not have a helper configured for (like a program or zipped file), they will be prompted to save the file to their hard drive.

That's it! That's all there is to providing links on your page. With links, you can go to different web sites, go to different web pages within your own site, provide navigational links within a page, or provide a means for your visitors to view and download images, sounds, and other files.

Redirect URL link:
If you want to set up a special form that allows visitors to make a selection that navigates to different Web URLs based on a list of choices, you can easily set one up with the CGI Redirection Script, one of the CGI capabilities offered by Prodigy Internet. Here is a single box form using PI's Redirection Script. It allows users to select a new URL from a list of options, which include links to the PWP and PWP Help Forms Tutorials (just in case you want to review form construction) In addition there is a link to the "How to Setup a Redirect Link" page, so that you can get instruction on how to setup "Redirect" on your page!

Select a place to go then Click to Go there!: Prodigy Internet PWP Home Page PWP - Forms Tutorial PWP Help - Forms Tutorial How to Setup a Redirect Link

Here is the HTML code used to create this sample redirection form. This code presumes that the finished HTML page is placed in your main directory on PI, and not a subdirectory beneath your main directory.

<FORM method="GET"ACTION="/cgi-bin/redirect"> Select a place to go then click to Go there!: <select name="nexturl"> <option value="http://pages.prodigy.net/"> Prodigy Internet PWP Home Page <option value="http://pages.prodigy.net/create/form2.htm"> PWP - Forms Tutorial <option value="http://pages.prodigy.net/pwphelp/forms.htm"> PWP Help - Forms Tutorial <option value="http://pages.prodigy.net/create/redirect.htm">How to Setup a Redirect Link </select> <input type="submit" name="submit"value="Go there!"> </FORM>

Netscape Refresh:
Would you like to provide an informational opening page which automatically opens your main page. Or maybe, provide a "slideshow" for your visitors? Too do this you would use the Netscape 'Refresh' attibute to the META tag. META tags are placed in the HEAD section of your page, and identify meta-information not defined by other elements in the HEAD. The basic format is:

<META NAME="string" CONTENT="string">

• Name: Specifies the meta-information name.
  
• Value: Enter the CONTENT attribute "string" describing the document content. This entry is mandatory.
  
• HTTP-Equiv="string": May be used instead of the NAME attribute. Information may be passed from the document to the server delivering the document using the HTTP-Equiv attribute.
  

While META tags are most often seen used to provide information related to the title and topic of the web page and the name of the web page author, the HTTP-EQUIV="string" attribute provides the REFRESH capability. The code to use the META tag for a REFRESH would look something like this:

<META HTTP-EQUIV="refresh" CONTENT="10; URL=nextpage.htm">

The "10; URL=nextpage.htm" following CONTENT= is the key for utilizing 'refresh'. The format is extremely important and must be maintained for the refresh to work properly. The number (10) specifies the time delay in seconds before loading the page specified arter the URL= . The number 10 and the page, nextpage.htm can be changed to whatever meets your needs.

To have the opening page automatically transitioning to your 'main' page, place the META 'refresh tag in your opening page with the URL= being your main page. Specify a delay number which allows the visitor enough time to see and understand the information on the opening page before they are taken to the main page. You may have seen pages which tell you to expect, "You should jump to my main page in ten seconds....." If so, they were most probably using the META Refresh. For an example of this is checkout DocB's WebDesign Clinics.

To create a slide show, or "flashing" words or images, requires a series of pages with just a line or two of text or an image. Each page would have a META tag that calls up the next page in the series. The last page could have a META tag that calls up your main page, or a more common, clickable link.

---

We have come to the end of our article! We reviewed the external and internal use of the Anchor tag, a swell as various forms of the Hypertext Link. We offered examples of Meta Refresh and URL Redirects. If you want information on how to create a "clickable image" link see the PWP Help Special Features article, "Creating and Using A Clickable Link" . For further information on ANCHOR and Hypertext links, visit the PWP Help Features pages.