HTML Tutorial III : Hyperlinking for Dummies

Tip: It might be helpful to read HTML Tutorial I: HTML Basics, and HTML Tutorial II: Basic Structure of an HTML Webpage before this.

First of all, why would anyone want to use HTML coding? The answer is simple. Have you ever wanted to design a webpage/website, or anything to that effect, but couldn't for the life of you figure out how?

A website's content is mainly derived from HTML coding. From text to fonts to hyperlinks, all of it can be done with HTML. So without further ado, here is a quick tutorial.

Tip: When you happen to see tips like this one, read them carefully. If you don't it might not be very easy to understand.

IMPORTANT!!: Since using a code with brackets >, and < actually does something in this document, I'll use these: {, and}. In this Tutorial, please replace all { and } characters with > and < in your HTML documents.

HyperLinks: links anchored in a certain word or selection that when clicked take you to another webpage or site. An example, and the code used is: {a href="http://www.yourwebsite.com/the/rest/of/your/link.php"}Stuff{/a} The link here would appear as: {a href="http://www.yourwebsite.com/the/rest/of/your/link.php"}Stuff{/a}

If you happen to want the link to take them to the webpage/site on another window, as to leave yours up, use the target command, target="_blank" With the target=blank command, the HTML code should look similar to this: {a href="http://www.yourwebsite.com/the/rest/of/your/link.php"target="_blank"}Stuff{/a} There are two different types of URLs you can use to link to various pages, absolute and relative.

Absolute URLs

Absolute URLs include the complete path to the file’s location, including the names of all the directories and subdirectories.

Let’s say you have a folder inside your web site's root directory called "music" and you want to link to a page inside the "music" folder called brahms.html. The absolute URL is:{a href="http://www.yoursite.com/music/brahms.html"}Brahms{/a}

Relative URLs

If you don’t want to ever have to worry about going back and editing your hyperlinks if your site structure changes then relative URLs are the way to go. Relative URLs are more or less like shorthand that tells the browser to go backward one or more directories to find the file.

Let's say you're on the page we referenced above, brahms.html (located in the "music" folder) and you want to link back to the home page: (http://www.yoursite.com/index.html) Using a relative URL, you would tell the browser to go back 1 directory by using the dot-slash method. {a href="../index.html"}Home{/a}

The two dots followed by a slash instructs the browser to go up 1 more level to get to the main (root) directory.

Changing the Hyperlink Colors

The default color for hyperlinks on an HTML page is blue, but you can change it to whatever color you'd like by using the link code inside the {body} tag. Here's an example: {body link="green" vlink="yellow" alink="purple"}

In the above example, hyperlinks will be green, links that have already been visited will be yellow and active links will be purple. (An active link is one that has just been clicked, so for a split second the link will change colors as the mouse activates it).

Creating Email Links

Creating email links are just as simple. All you need is the "mailto" function to get this to work properly: {a href="mailto:youraddress@email.com"}Email Me{/a}

Anchor Links

If you want to create a link that will take the visitor to another section of the same page (rather than a new page or site), then you can create an anchor link. There are two steps to this process:

1) First, go to the place in your HTML code where you want the anchor to go. This is the spot on the page that the browser will move to when a person clicks on the link. Insert the code {a name="name1"}This is the Text Where the Anchor Will Land{/a} "name1" is just the name of the anchor I chose. You can all it anything you want.

2) Now to link to that section of the page, use the hyperlink code: {a href="#name1"}click here{/a}

And that's it for Hyperlinking!