Even More Links

The types of links explained in this tutorial are not as crucial as the ones from the previous one, but are important just the same. Let's begin with the "name" attribute, as it is the most important of the links in this lesson.

You know how on some FAQ's (Frequently Asked Questions) that at the top there will be a list of topics covered on the page, and they are all links that will "jump" you down the page? Also, note the links that can take you to the top of a page. These are all links using the "name" attribute.

To create one of these links, there are two parts. First you must put the anchor where you want the link to "jump" to, and second you must add the link. This doesn't work well on short pages though.

<a name="linkdestination"></a>

This is the anchor. It won't make anything visual happen, but it provides a place where the link can "jump" to. Change the value of the name attribute to suit your needs. Also, if your destination is a bit of text, make sure to put it between the opening and closing anchor tags.

Now you need to have the link placed so that it will refer to your anchor. To refer to the anchor, you make it exactly like a normal link, but instead of putting the address, you put a pound sign ( # ) followed by the name of the anchor which, in this example, is "linkdestination".

<a href="#linkdestination">Follow this link</a>

Again, change the name of the anchor to fit your needs, and the text as well. You can also put a link to the anchor on a completely different page.

<a href="http://mysite.com/page1.html#linkdestination">Page One</a>

This will take the visitor to page1.html, and jump to where the "linkdestination" anchor is placed. This works for relative links as well.

Finally, the links that take the visitor to the top of the page. You don't have to specify an anchor at the top of the page, fortunately. A link to the "#top" anchor will snap the user to the top of the page. However, if you add an anchor named "top" anywhere on the page, it would most likely jump to the one you added elswhere on the page.

Next, what if you have a zipped file or an executable (.exe file) that you would like the user to be able to download? Fortunately, linking directly to the file will initiate the download. Music files, such as .wav, .mp3, or others will most likely be played using a browser plug-in, such as Windows Media Player or QuickTime, so if you want them downloaded, zip these files first.

<a href="http://wengerenterprises.com/ahk13534.exe">Download ahk13534.exe</a>

Note that this is actually a program I made in my spare time to send a friend. It does nothing but make your computer beep, and a messagebox pop up. Download it if you like, but the point is that the link works and begins the download.

Images can be used as links as well. It requires nesting an image inside a link, where the text would normally be.

<a href="http://wengerenterprises.com"><img src="http://wengerenterprises.com/images/weirdologoub5.gif"></a>

Finally, there are a few types of links that allow you to activate various programs, such as AOL instant messenger, or the user's email client (most common is Outlook Express). First I will show you the link to activate the user's email.

<a href="mailto:youremailaddress@yahoo.com">Contact Me</a>

I wouldn't advise sending an email to that address, since it may be someone's actual email. If you copy that example, make sure to change the email address.

You can even add default text in the subject and body of the email. We include this right after the address, seperating the address and subject with a question mark, and the subject and body with an ampersand ( & ).

<a href="mailto:youremailaddress@yahoo.com?subject=Message From Your Website&body=I like your site">Contact Me</a>

If you are planning on setting up a professional website, I would suggest learning how to set up a PHP contact form, like the one this site has. However, for most beginning webmasters, this will do for now.

The next link I will mention is one that will activate AOL Instant Messenger. Knowing how to make an email link, these links should be fairly simple to understand. The first link will allow you to add me to your contact list, and the second link will send a message to me. This is my real AIM screename. Feel free to contact me with any questions. Note that you must have AIM installed on your machine to activate it.

<a href="aim:addbuddy?screenname=wenrob3843">Add wenrob3843 to your contact list</a>

<a href="aim:goim?screenname=wenrob3843&message=Hi.+Are+you+there?">Send wenrob3843 a message</a>

You may be able to find more links that activate other programs, but those are the most popular. We have finally come to the end of the links tutorials, for now. The next tutorial is about special attributes of the body tag. Ironically, it includes some styling of links. Links are a very important part of every website.