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
tag.
(This is called AA
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.