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 view this web page in a web browser they will see the link text as blue and underlined.  They can click on it to view a different web page.

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 making links from one web page to another web page in the same folder the URL is simply the file name.  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 first file:

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

Finally 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.