Simple HTML and CSS

Hyperlinks

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:

  1. Some other page on some site, somewhere in the world.
  2. Some other page on the same site, in the same directory as the referring page.
  3. Some other page on the same site, in a different directory as the referring page.
  4. A certain location in the same page as the one that contains the link.
  5. A certain location in some other page, again in a directory (the same or some other one) on some site (the same or some other one).

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

  1. Some other page on some site, somewhere in the world.
    <A HREF="http://www.google.com/index.html">Google</A>
    Google

    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.

  2. Some other page on the same site, in the same directory as the referring page. <A HREF="http://rudhar.com/sfreview/html_nl/css.htm">Explanation of CSS</A>
    Explanation CSS

    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

  3. 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 (\).

  4. A certain location in the same page as the one that contains the link.
    <A HREF="#ReferTo">Reference text above, in same page</A>
    Reference to text above
  5. A certain location in some other page, again in a directory (the same or some other one) on some site (the same or some other one).
    <A HREF="http://rudhar.com/sfreview/html_nl/links.htm#ReferTo">Full reference</A>
    <A HREF="../html_en/links.htm#ReferTo">Reference within same site</A>
    Full reference
    Reference within same site

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: tree big
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. tree small


Previous Start Next

Copyright © 2002 R. Harmsen