Creating Hyperlinks

<a href="web address">Link text</a>

Without a doubt, the most powerful and widely used of all HTML elements is the A element (a.k.a. 'anchor' tag). The A element uses the href attribute along with a valid web address as the value and some content between the start and the end tags to create what is known as a hyperlink. The gigantic international network of web pages known as the World Wide Web is interconnected through the use of hyperlinks and indeed would simply fail to exist without them.

The hyperlink typically uses the following syntax:

Example 1A

<a href="valid web address">The text or image you wish to display as a hyperlink goes here.</a>

...where valid web address equals any existing Uniform Resource Locator (URL).

The following example displays the source code used to create a hyperlink which, if clicked on, would load the web page you are currently viewing:

Example 1B

<a href="http://www.ironspider.ca/format_text/hyperlinks.htm">

Creating Hyperlinks</a>

The portion highlighted in red represents the URL which typically appears in the Address bar of your web browser. (If you're using Internet Explorer, hold down the Alt key and then press 'D' to highlight the URL. Press Ctrl + C to copy it.)

Example 1B would look like this on your web page:

Example 1C

Creating Hyperlinks

Link Colors

Clicking on hyperlinks with your mouse pointer will typically load the designated web page in your web browser. Hyperlinks can also be used to view images, download files, run various media such as Flash presentations, and activate Javascripts. All these and more represent the targets of the hyperlink. Hyperlink text is usually underlined and also carries a default color coding to indicate the current status of the hyperlink. The following illustrates the default color coding for the four basic states of a hyperlink:

Unvisited	The user has not visited the target of the hyperlink.
Visited	The user has visited the target of the hyperlink.
Hover	The user's mouse pointer is currently hovering over the hyperlink.
Active	The hyperlink is currently being activated (by clicking on it).

If you are using Internet Explorer, you can access a dialog to view and modify the default color coding for hyperlinks by clicking on Tools » Internet Options » Colors. These colors will be used for web pages that do not specify in the source code which colors to use for hyperlinks.

To specifically set the color of the hyperlinks on web page you are creating, you can apply certain attributes to the body element (see Essential Page Structure for more information about the body element). These attributes and their associated effects and values are displayed in the following table:

ATTRIBUTE	EFFECT	VALUE
`link`	Sets the color for unvisited hyperlinks	Any legal color value*
`vlink`	Sets the color for visited hyperlinks	Any legal color value*
`alink`	Sets the color for active hyperlinks	Any legal color value*

The above attributes with their associated values (*same as font color values) are placed in the <body> tag to define the link colors on a web page. Example:

Example 2 - SOURCE CODE

<body link="green" vlink="olive" alink="maroon">

Example 2 would produce the following result on your web page:

Example 2 - RESULT

Unvisited links would appear in green

Visited links would appear in olive

Activated links would appear in maroon

Anatomy of a URL

The URL, which stands for Uniform Resource Locator, is basically the address of your hyperlink's target. Using the URL of the web page you are currently viewing, let's dissect it and take a closer look. First, here's the full URL:

http://www.ironspider.ca/format_text/hyperlinks.htm

Now let's break it down:

`http://`	Protocol ~ This defines how the information (in this case, a web page) travels over the internet. `http` = Hyper Text Transfer Protocol. Another common protocol is `ftp` (File Transfer Protocol)
`www.`	Host name ~ This is typically `www.` which stands for World Wide Web and refers to the gargantuan international collection of interlinked web pages.
`ironspider.`	Second Level Domain (SLD) ~ This is the name that I selected to define this web site. This —combined with the Top Level Domain (see below)— is what is often referred to as the "domain name".
.`ca`	Top Level Domain (TLD) ~ This is the suffix I selected for my domain name to categorize this website. TLDs often employ a country-specific code (e.g., `.ca` = Canada) and other times are reserved or restricted for a specific use (e.g., `.biz` is restricted to businesses). See the official ICANN FAQ for full details.
`/format_text/`	Subfolder ~ My web host assigns me a root directory to store my web pages in. `/format_text/` is the subfolder in that root directory within which the current web page resides.
`hyperlinks.htm`	File name ~ This is the name of the electronic text file that contains the source code of the web page you are currently reading.
`#url`	Fragment identifier ~ This is a special in-page identifier. (Note: This may or may not appear depending on how you got to this part of the web page). This is used in hyperlinks leading to a specific location on a web page.

Altogether, this represents what is known as an absolute address. Likewise, the absolute address of any web page you visit on the World Wide Web will appear in the Address bar running across the top of your browser and this will represent a valid web address provided that the web page loaded successfully. You may use any valid web address as the value for the href attribute (as per above) to create a hyperlink.

If you wish to create hyperlinks (also known simply as links) in between pages on your own web site, you can alternatively use what is known as relative addressing. With relative addressing, it is only necessary to use the name of the web page file you are linking to as the value in the href attribute provided that the page containing the link resides in the same folder as the page acting as the link's target. Please see Relative Addressing for more information.

Linking to a Specific Location on a Web Page

So wondering how to create hyperlinks that —when activated— jump to a specific location on a web page? No problem. Let's start with the simplest example of this which is a hyperlink which leads to another part of the same page. For this you need only to use the standard hyperlink code and then use a fragment identifier as the value of the href attribute. The fragment identifier can be any name you like and must be preceded by the hash mark '#'. The following code will create a hyperlink that uses 'photos' as the fragment identifier:

<a href="#photos">My Photos</a>

Now all we have to do is create the code that will serve as the destination of our fragment identifier. This is inserted at the place in our web page that we want our hyperlink to jump to when it's activated (clicked). To do this, we need to use the name attribute in the A element. This will create what is known as a 'named anchor'. Here's the code you would use:

<a name="photos"></a>

Note that the <a name="anchor name"></a> tags are typically empty (i.e., no content is required between the start and end tag).

You can also create a hyperlink on one page that leads to a specific location on another page by using the same setup. You only need to append the fragment identifier on to the end of the URL used as the value for the href attribute. For example, if the named anchor 'photos' (the link destination) existed on a page called "vacation.htm" then the hyperlink that leads to it from another page would be created as follows:

<a href="vacation.htm#photos">My Photos</a>

Clicking on this link from another page would first load the 'vacation.htm' page and then jump to the part of the page where the named anchor 'photos' is located.

Creating named anchors and using fragment identifiers is really useful when you have a tendency to cram a lot of information on one page (like I do) and you would like to help readers out by enabling them to quickly locate specific sections.

* * *

Whew! And that concludes all the tutorials on Formatting Text.

If you have followed all these tutorials from the beginning of this section and the previous section, you are now equipped with all the necessary know-how to start from scratch and create a full blown text-only web page. But you'll probably want to learn how to jazz up your web page with some other stuff, right? (Of course you do.)

So let's giddy-up, move on and learn how to insert graphics on your web page...

Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates