HTML Tutorial - Chapter 3: Links, Links, Link

» Can You Imagine?

Can you imagine the Internet without hyperlinks? It just wouldn't work, links are the very soul of the Internet. That's why, in this chapter, we're going to teach you everything you'll ever need to know about site links. It's going to require a bit of practice, but I guarantee the end result will be worthwhile.

Follow me...

When I first started learning HTML, I dreamed of one day creating a tag that was named after me (Adam). I dreamed that it would be named <a>, which would be the first letter of my first name...

And then I found out that not only was the <a> tag taken already, but it was one of the most important tags in all of HTML. It was the "Link" tag.

Like <font>, the <a> tag, on its own, doesn't do anything. You have to specify a property within it. Namely, you have to tell the tag what it should link to.

Now, before we go into specifics, there are two types of links. Absolute links and relative links. Absolute links are used when you're linking to another website. It's when you type out the URL completely, like http://www.founderweb.com/index.html. On the other hand, relative links are when you just type out the name of the file. Like this: index.html

You should always use absolute links when you're linking to outside sites and you should use relative links when you're linking to files on your website. You can use absolute links on your own website, but this takes a lot of time to do and, if you change to another domain name in the future, you'll have to update a lot of links.

Here's an example of an absolute link used in HTML. The biggest mistake people make with absolute links is that they forget that all links must begin with http:// - this is very important, as if you forget this part, your link will be translated as a relative one and probably won't work.

<a href="http://www.founderweb.com">Click here to visit FounderWeb!</a>

Remember, all properties need an equal sign with quotation marks. The only property we should be interested in for the <a> tag is what I typed above, href. It seems to be nonsensical, but it actually stands for "Hyper Reference." You know, links are actually called "Hyperlinks" - so that's where the "hyper" comes into play.

As with all tags, the code above processes the tag to the text between where it opens and closes. That is, in this case, it links the text for the following output:

Click here to visit FounderWeb.com!

Let me explain relative links a bit more, because they are quite useful. To use them correctly (and not get a broken link), you need to know the directory structure of your website.

If you're linking a file (let's say contact.html) that's in the same folder as the HTML page with the link, you simply type:

<a href="index.html">Click here to visit FounderWeb!</a>

If you're linking to a file that's in a folder above the folder (let's say a folder named "pictures") your HTML page is in, the format would be:

<a href="pictures/index.html">Click here to visit FounderWeb's Picture Section!</a>

And lastly, if you're linking to a file that's in a folder below the folder your document is located, the format would be:

<a href="../contact.html">Click here to visit FounderWeb's Contact Area!</a>

One of the most important uses of the <a> tag is linking to your email address. When you make such a link, the moment your visitor clicks on it, it opens up his or her email client to send you an email. The code for this is very similar to a normal link with one difference...

<a href="mailto:John@FounderWeb.com">E-mail John!</a>

The important part here is in bold. Instead of starting your link address with "http://", you start it off with the sub-property mailto:, which is followed directly (no spaces!), by the person's email address.

This is very easy, the most common mistake made though is accidentally putting a space after the colon in mailto: - please don't do this!

Here are some important notes about links...

• Links Can Point To Themselves - A document can link to itself. To do this you could either type the absolute link, the relative link, or simply type the symbol # in place of the URL. It's almost never advisable to link a document to itself unless you use the # symbol. Using the # symbol, you can link to what are called "Anchors" (more on that later) or simply link to the top of a document. Here's the code to link to the top of any given page (with the resulting output):

  <a href="#">Top ^</a> | Output: Top ^

• Links Can Link to Anything - You can link to anything. Images, HTML files, movie files, etc. However, not all files will appear in your browser when clicked-on. For larger files, like Word documents and movies, you should warn your visitors first, so they don't freak out about large load-time. Here's the code to link to an image (only link to .GIF or .JPG files - these are pretty much the only web-friendly graphic types out there)! You'll notice that the code below, which links to an image, is a heck of a lot like the code to link to an HTML page. The only difference is the file ending.

  <a href="http://www.founderweb.com/logo.gif">Click here!</a> | Output: Click here!

• Common Mistake - Other than forgetting to put "http://" at the start of your link, the second most common mistake is putting information about your hard drive into your link. Links reference Internet servers - not your computer. Putting a link with the name of your computer drive (like the one below) will absolutely not work.

  <a href="C:\My Documents\File.html">My Kewl Site</a>

Create a few links now that lead to your favorite site. Even try and link to some images online. Also, experiment with what you know using <font> tags and <b> tags to make your links different sizes and shapes.

Now that you understand hyperlinks, it's time to move onto another very important use of HTML - inserting images into your site! Imagine an Internet without images. Boring...

Previous Chapter | Next Chapter