All You Should Read

Web Tutorials

It's All About Being Connected

The driving force behind the World Wide Web - what makes the web the web, so to speak - is a little something called a hyperlink. With this little gizmo, you can go from one page to another with the click of a mouse. The hyperlink is what put the H in HTML.

So what, exactly, is a hyperlink?

A hyperlink is a specially marked piece of content that becomes active when you select and click it. The activation starts a simple routine: the link looks for the referred anchor, and when it finds it, that's where you're taken.

The simplest form of a hyperlink is plain old text:

<a href="http://www.google.com">Go to Google</a>

A hyperlink consists of 4 parts:

1. The tags, which make up the hyperlink element;
2. The anchor, which can either be a source or a target (we'll get to that);
3. The value, indicating the name of the source or the location of the target;
4. The contents, which sit between the opening and the closing element.

Tags are the part of an HTML element that have the smaller than and greater than symbols: < and >.  (What people call the "link tag" is in fact the hyperlink element, but that's nitpicking...

The anchor is what defines the source or target. When you want to define a source anchor, you use the name attribute:

<a name="linkhere"></a>

The name attribute is used to split a page in parts, so that you can link to a part of that page (especially useful in very long pages.)

When you want to define a target (that's what people use use to link to a certain place), you use the href attribute (href stands for "hyperlink reference".)

<a href="http://www.google.com">Go to Google</a>

If you want to link to an anchor source on a page, you use the source identifier, which is indicated by an American pound sign (#):

<a href="http://www.somesite.com/longpage.html#linkhere">Go to section "linkhere"</a>

The value is, of course, the identifier or URL:

<a href="http://www.google.com">Go to Google</a>

The value must always be placed inside quotes.

What's left are the contents, sitting cosily between the tags:

<a href="http://www.google.com">Go to Google</a>

With that knowledge in mind, fancying up a link in a page shouldn't be too hard...

It's A linkin' Picture

If you hover your mouse over the picture on the left, you'll see that the cursor changes in a hand, just like with a normal link. So how's that done?

It's really incredibly simple... if you know how to put a picture on your web page, you can turn it into a link.

Remember the list up there? Point number 4: The contents.

You can place anything you want between anchor tags - except a pair of other anchor tags, that is - so that include a picture.

So if we have a picture...

<img src="/images/web_links_thumbnail.jpg" width="150" height="116" alt="A linked picture" />

... then all we have to do to make it into a link is add anchor tags:

<a href="/images/web_links.jpg"
 ><img src="/images/web_links_thumbnail.jpg"
 width="150" height="116" alt="A linked picture" /></a>

So How About JavaScript?

That, my friend, is another chapter.

And How About One Picture With A Bunch Of Links?

That, too, can be found on this site, in yet another chapter.