Phantom Maelstrom

For our continuing tutorial on basic html, we will now be discussing about links (linking), or anchors. It is commonly known as hyperlinks.

But first things first, what is an anchor or hyperlink?

A hyperlink is a link wrapped in a word, a group of words, a character, or an image that you can click on; linking you to a new document, a file, an email address, or a section within the current document. By the way, web pages can also be referred to as a document so don't confuse it for an MS Word Document.

A hyperlink when linked into a file will usually open the download file option. If it is linked into an email address, for example: abc@abc.com, it will open up an email service program or client, however, you need to assign the extra mailto: attribute for this to work. Now, if it links to a new page or document, it will open up the page, and depending on the type of hyperlink, it may open up a new window or you will jump into a new page. Finally, if the hyperlink is linked within a page, it can either reload the page, or jump you into the section of the page where the hyperlink connects.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand, however, this can be customized using a javascript, but as far as defaults are concerned - it appears as little hand. Furthermore, links by default are also underlined and glows in a different color; if the page has already been visited, it glows in another color. These colors can also be customized using a stylesheet.

The tag or element use to create an anchor or hyperlink is <a> or <A>.

The <a> tag can be used in two ways:

1. To create a link to another document by using the href attribute.
2. To create a bookmark inside a document by using the name attribute.

Now, let's discuss the basics of <a>.

An anchor cannot work without the help of an attribute. Of course, we need to define where the link leads to, that is why we need to use the attribute href, short for hypertext reference. To use this attribute, we add it to <a>, the result is <a href="yourlink">, where yourlink refers to a url (uniform resource locator), a page, a file, or an email. Also note that urls always begin with an http://, however, most browsers usually do not require it as it automatically puts the http:// in case it is forgotten. Let's put it into the test...

Let's try the url first... Syntax: <a href="http://www.yourlink.com">yourtext</a>


Here's the resulting page:



The first link points to the url http://www.google.com, when clicked, it will direct you to Google's page at http://www.google.com. Try it...

Now, for the second link, we inserted an email address. As previously said, it cannot work without the extra mailto: attribute. Without this special attribute, the browser will treat the email address as a url, thus, it will lead to an error page or "Page not found". The purpose of the mailto: attribute is to tell the browser that this is an email address, and because it is an email address, the browser will call for an email client - Outlook Express if you're using Windows OS (Operating System).

Let's try the link...
Syntax: <a href="mailto:youremail@emailserviceprovider.com">yourtext</a>


The result:


As you can see, it opened an email client with the email address already in place as the recipient.

Finally, what if it links to a file? You may ask... Naturally, any document that cannot be opened on the browser is subject for download. This depends on the extension name (ex: .doc, .exe, .htm, etc.). Web pages usually have the .htm, .html, .php, .asp, etc. These can, of course, be opened by the browsers as browsers were naturally designed to handle these document types, however, there are some documents that are not supported, and these will become subjects for download.

Let's test the 3rd link since it links to a file.
Syntax: <a href="filename.extensionname">yourtext</a>


This will come out:


Now, you have the option to either open, save the file, or cancel. If you choose "open", it will find a program on your computer that can open it; if you choose the option "save", it will save the file on a destination on your computer; and of course, "cancel" would cancel the download.

Now, you may ask, what would happen if the file does not exist? Well, naturally, the browser will tell you that it's not there.

Well, this is it for now, next time, we will continue our tutorial from where I left off... as you can, we haven't yet discussed how to bookmark, until then...