Overview of HTML Clickable Links (Hyperlinks)

If this explanation doesn't help you understand links, don't forget the other resources I put on our class web page, such as the one for the on-line HTML training from w3schools.com.  You can also visit me during office hours, or make an appointment, for some more personal help.  You can also post questions on the class discussion board; maybe a fellow student can explain this better than I.

A clickable link is the blue, underlined text you see in a web page that you can click on.  If you hover the mouse pointer (the cursor) over such a link, it will change from an arrow to a hand.  When you click on that text, a different web page is then displayed.  These are also called hyperlinks, web links, links, and sometimes other terms.

In an HTML document you can create such clickable links using the A tag.  (This is called A for anchor, but had they consulted me I would have called it LINK.)  Like most HTML tags, this one has a start tag and a matching close tag.  You put the text you want to appear as blue and underlined in-between, like so:

<A ...>link text</A>

(The link text can be split over several lines if you wish.)  When someone views this web page in a web browser, they will see the link text as blue and underlined.  They can click on that text to view a different web page.  (Instead of text, a link can be an IMG instead, or both.)

The final part of the story is that you (the author of a web document) must say where to go when the user clicks on your link text.  This is done by adding the HREF attribute to the A tag:

<A HREF="some-URL">link text</A>

Note the quotes around the URL.  A URL is the location or web address of some web page (or other resource), somewhere on the Internet.  URLs usually look something like:

http://www.example.com/

In your searching for images or scavenger hunt information, you will eventually find what you need on some web page.  The location or address of that page is the URL, and you need to make a clickable link to it, in your own web pages.  You should copy that URL (it shows at the top of the web browser, on the toolbar, just below the menubar), and then paste it into your own web page.

Here's a working example of a clickable link.  It goes to the w3schools.com tutorial on links:

<A HREF="http://www.w3schools.com/html/html_links.asp">
w3schools.com tutorial on HTML links</A>

When placed in a web page, that HTML looks like this:

w3schools.com tutorial on HTML links

When making links from one web page to another web page in the same folder, the URL is simply the file name.  for example, suppose you have two web pages, the first called index.htm and the second called MyBio.htm.  You can make a clickable link in index.htm to the MyBio.htm page, by adding this HTML in the index.htm file:

You can learn more about me if you
<a href="MyBio.htm">view my biography</a>.

Note that HTML tag names are not case-sensitive, but the URLs often are (not always though, but that's a story for another day).  So, you can use (for example) any of the following:

<A HREF="URL">link text</A>

<a href="URL">link text</a>

<a HrEf="URL">link text</A>

(Lower-case tag and attribute names are preferred.)  The link text will appear to the reader as you typed it, so that should be considered as case sensitive.

URLs should not contain spaces or other weird characters.  Many web browser will guess what the real URL is and the link will still work.  But you should not count on that.  The easiest way to deal with this situation, is to not use any weird characters in your filenames.  If you do choose to use spaces or other characters except letters, digits, a dash, and a period, then those characters should be URL encoded, also called percent encoded.  You can read about that from other resources found on our class page, or elsewhere on the Internet.

A final note: A web page usually has lots of links.  No two links to different URLs should have the same link text.  Also all links to the same URL should always have the same link text.