HTML Links

<!DOCTYPE html>
<html>
<head>
	<title>Websites</title>
</head>
<body>
	<h1>HTML Websites</h1>
	<p>Try <a href="http://www.quackit.com">Quackit</a> for starters.</p>
</body>
</html>

The above link is an example of a hyperlink. A hyperlink is a link that allows the user to navigate to another resource (such as a web page) or download it (such as in downloading a file). In this case, we link to another web page.

How Hyperlinks Work

A hyperlink is created by using the <a> tag along with the href attribute, which is used to specify the destination URL. Like this:


<a href="http://www.quackit.com">Quackit</a>

The <a> tag has a start and end tag. Any text or element between the start and end tag becomes the "clickable" part. You'll notice that most web browsers will display hyperlinked text in a different color and underlined. However, as with any HTML element, you do have control over how the link is styled by using CSS (we'll get to that soon).

As you can see from the top example, you can place links inline within the text—no need to place it on a new line or anything.

And you can link to any web page or document you like. There's no need to do anything on the destination page. Therefore, you can link to someone else's website without them even knowing. This is why there are so many links on the web!

Attributes

As well as the href attribute, the <a> tag also accepts other attributes. For example, the target attribute allows you to specify which frame, or browsing context, to load the destination page in.

Or for another example, the download attribute can be used to specify that the link is for downloading a resource (such as a file).

And, as with any other element, you can also use any of the global attributes. For example, you could use the title attribute to provide a "tool tip" type description of the destination web page.

And again, as with any other element, you can also use any of the event handler content attributes.

To see a full list of attributes that you can use with this tag, here's more information about the <a> element.

About URLs

URL (which stands for Uniform Resource Locator) is the location of a resource on the web. This is usually a web page, image, or some other file. Many non-technical people call this the web address.

When creating a hyperlink, you can use either an absolute URL or a relative URL.

Absolute URLs

An absolute URL is a URL where the full path is included. Here's an example of an absolute URL:


http://www.quackit.com/html/index.cfm

This includes the protocol (eg, http://), the domain name/sub-domain (eg, www.quackit.com), and the full path to the actual resource (eg, /html/index.cfm).

Relative URLs

A relative URL on the other hand, only contains some of the path. This is because the path is relative to an implied absolute URL. The page in the previous example could also be linked to with any of the following:


index.cfm
html/index.cfm
../html/index.cfm

The one you use would depend on where the current page is located (i.e. the page that you are linking from). Here's an explanation:

index.cfm: To use this URL, your code would look like this href="index.cfm". This requires that your linking page is in the same directory that index.cfm is located in.
html/index.cfm: To use this URL, your code would look like this href="html/index.cfm". This requires that your linking page is one directory above index.cfm. The path shows that index.cfm is located inside the html directory.
../html/index.cfm: To use this URL, your code would look like this href="../html/index.cfm". This requires that your linking page is in a directory that's at the same level as the html directory. The two dots and forward slash (../) indicate that you intend to move back one level, then into the html directory to the index.cfm file.

Although relative URLs can be shorter and easy to code, they can become broken very easily if you decide to move a page, do a major redesign, etc. Therefore, I don't normally recommend using them.

Root Relative URLs

Root relative URLs are a different story. A root relative URL always starts with a forward slash (/) and this indicates that it is relative to the website's root directory. The URL always consists of the full path from the website's root. Therefore, no matter where your linking page is located, you always use the same URL.

So we could use the following code no matter where our linking page is (as long as it's on the same website):


/html/index.cfm

To use this URL, your code would look like this href="/html/index.cfm".

Which One to Use?

I recommend using either root relative URLs or absolute URLs when linking to pages on the same website as the linking page.

When linking to external web pages (i.e. pages that are not on the same site as the linking page), you'll need to use absolute URLs. This is because you'll need to provide the domain name of the website that hosts the destination page.

Linked Images

You can link images in just the same way that you can link text. Simply insert the image code between the start and end <a> tags.

We'll be covering images next, so you'll be able to try this out!

<HTML.am>