Hyperlinks are what made the web famous. A hyperlink is a reference in a document, that points to a location anywhere on the world-wide web. Because anything can refer to anything the web becomes a gigantic tangle of related information.
Words can be a hyperlink, but also a small graphical picture, like a button for example. A hyperlink can refer to:
In cases d) and e) the location that the link refers it must be
marked in the file, using a name anchor:
<A NAME="SomeName"> </A>
With references of types a), b) and c) that isn't necessary, they always refer to the start of a page.
The reference itself is a reference anchor:
<A HREF="site, possibly directory, possibly location">text
or picture</A>
This makes the text or the picture "clickable", and the
browser gives it a different look. (By using CSS
you can alter that look, if you wish).
If you actually click on it, then the browser fetches and display
that new page it refers to. You surfed to a new web location. Usually,
it can also be done without a mouse: you navigate to it by pressing
the tab key, (to go backwards press shift-tab), and then press enter.
Above, we saw that links can refer to
various types of locations. Below are these cases again, now with the
HTML needed to make such references. Then follows the link itself,
to test if it really does what it should.
(Here is an explanation of how to show a
tag in the text without it becoming a real tag).
A shorter way to write this is:
<A HREF="http://www.google.com/">Google</A>
Google
or even:
<A HREF="http://www.google.com">Google</A>
Google
because web server usually try files index.html and index.htm by default.
You can do it like that, but it isn't the smartest of ways, because
moving the group of HTML files to some other location will invalidate
the links. And that already happens when you are testing the pages locally
on your own computer, instead of on the web. Therefore in links to
locations within the same site you should always leave the domain part
("rudhar.com" in the example) out. Then the browser assumes the
same domain as that of the referring page, and also its directory.
The reference is shorter, and also more flexible when testing or moving
the site.
<A HREF="css.htm">Explanation of CSS</A>
Explanation of CSS
Some other page on the same site, in a different directory as the
referring page. Here too we express links as references relative to
the current location in the directory tree.
We do not specify the domain.
<A HREF="subdir/insubdir.htm">This refers to a page in a subdirectory (sub-folder)</A>
This refers to a page in a subdirectory (sub-folder)
The symbol "..", meaning the higher level directory (assuming
a tree with its root in the air), lets us reach higher and next directories.
For example, this is a link to the Dutch version, which is in its own
directory html_nl, neighbouring the current directory html_en:
<A HREF="../html_nl/index.htm">This refers to a page in a sub-folder of a higher-level folder</A>
This
refers to a page in a sub-folder of a higher-level folder
Always use slashes (/), not backslashes (\).
To conclude, an example of a button, a picture, as a clickable link:
<A HREF="../html_en/links.htm#ReferTo"><IMG SRC="../html_en/links.htm#ReferTo"></A>>
Where the text was in earlier examples, we now have the picture, coded as
an IMG tag. The hyperlink looks like this:
For use as a button, this picture is way too big, so we'll make it smaller,
by specifying its width or height in pixels.