Linking with HTML  pwp home  >   Reference Library  >   HTML Tutorials  >  Linking with HTML

One of the main features of HTML is the ability to provide hypertext links. Links can be used to take a visitor to another one of your pages, to a completely different site on the WWW, to download files, or to jump from one section of a page to another section on that same page. When a link is included on a page, it will generally appear on the page as underlined and in a different color than the rest of the text on a page.

The anchor tag: The anchor tag is the tag you use to provide links on your page, and looks something like this:

<A HREF="URL">text for link</A>

Where URL represents the page, site, or file to link to, and text for link represents what you want your clickable hypertext link to say.

Providing a link to another WWW site: To provide a link from your page to another site on the WWW, you should use an absolute (or fully qualified) URL for the HREF attribute of the anchor tag. In other words, when providing a link to anothere WWW site, you should use the full URL. For example, if you wanted to provide a link from your page to MTV's web site, you'd add something like this to your page:

Wouldn't you like to visit <A HREF="http://www.mtv.com">MTV's web site?</A>

Which would appear on your page as:

Wouldn't you like to visit MTV's web site?

When a visitor to your page clicks on MTV's web site?, they'll be taken to the URL http://www.mtv.com.

Providing a link to another one of your own pages: To provide a link from one of your pages to another of your pages, you can use a relative URL for the HREF attribute of the anchor tag. The advantage of using a relative link rather than an absolute link is that: a) you have less to type, and b) it's easier to move a group of pages from one location to another since the page's relative path names will remain the same. Relative links are "relative" from the location of the page that contains the link. For example, let's say that the URL of your main page is http://www.wherever.com/yourname/index.htm, and on your main page, you want to include a link that take the visitor to your personal information page (which we'll call personal.htm). Let's also assume that both personal.htm and index.htm are stored in the same directory of your webspace (or hard drive). To provide a link from index.htm to personal.htm without having to type in the full URL, you could put something like this on your index.htm page:

Find out what my <A HREF="personal.htm">interests</A> are.

When a visitor clicks on interests, they'll be taken to your personal.htm page.

If the page that you want to link to is in a subdirectory of your webspace (or hard drive), simply add the name of the subdirectory and a "/" in front of the name of your page. For example, if your personal.htm is in a subdirectory called mystuff, you'd link to it like this:

Find out what my <A HREF="mystuff/personal.htm">interests</A> are.

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://www.wherever.com/yourname/mystuff/personal.htm.

Providing a link from one section of your page to another section on the same page: If you have a long page with separate sections, and you'd like to provide a way for your visitors to easily move from one section to the other, you can provide an internal anchor using the NAME attribute of the anchor tag. Doing so is a two step process; you must first identify where an internal link is to jump to, then you include the link that will take you to that section. 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 an anchor that identifies the top of your page, something like this:

<A NAME="top">This</A> is the top of my page.

Please note that when providing an internal anchor, as in this example, the words between the <A NAME="top"> and </A> tags will not show up as a hypertext link, but will appear as normal text. This is simply a means of providing a place on your page to jump to. The text in quotes after the NAME attribute (in this case top) assigns a name to the anchor so that you can then link to it, which you would do with something like this:

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

Which would appear on your page as:

Return to the top of the page.

In order for this link to work, you must be sure to add the "#" to the NAME of your internal anchor, and you must also make sure that all of your capitalizations match. If one letter in either the anchor or the link is capitalized in one, but not the other, the internal link will not work.

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.

Providing links to download or view images, files, or sounds: Another use for links is to allow visitors to your page to view images, hear sounds, or download files. This is done exactly the same as linking to another page, but rather than placing a page name in quotes after the HREF attribute, you put the name of the file you'd like your visitors to see/download/hear. For example, if you have a picture of yourself that you'd like to allow your visitors to see or download, you'd add something like this to your page:

Here's a <A HREF="mypic.gif">picture</A> 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 whatever helper application the visitor had 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 file), they will be prompted to save the file to their hard drive.

Using images as links: Sometimes it's nice to provide visual links rather than textual links. In other words, you might want to use an image that, when clicked on, will take you to another page. For example, let's say that on your index.htm page, you want to provide a link to your personal.htm page, but rather than providing text for your visitor to click on, you want them to be able to click on an image to go to personal.htm. 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:

You might have noticed how in this example there's a blue border around the image that show that the image is clickable. If you'd like 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>

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.