Demonstration of Hyperlinks

Examples of Linking

Note: For the following examples, I have turned off the normal color highlighting that shows whether you have visited a link. It would normally be something like red after the first time you clicked the link. I did this to avoid obscuring the other coloring I used below to highlight some key pieces of the explanation. I also thickened the link underlines and gave them a yellow background to make them a little more visible in this tutorial on links. The cursor still changes shape as it normally does when you hover it over a link; that could also be configured, if desired. Jeff -- 4/29/12

Here is a paragraph containing some hyperlinks to pages on and off the jgkhome.name website. Here is a link to a location on the same page you are now viewing. (Press the browser's Back button to return to where you were.)

Here is a link to a file placed in a subdirectory immediately below the current directory, i.e., that file is in a directory immediately below the directory that contains the page you are now viewing. This shows how you can create a self-contained directory tree for your files, with simple links between files in the tree. Note that the test file linked to here has a number of examples of some easy HTML/CSS formatting you can do.

To show you that links can be included in something other than a paragraph, here is the same set of links, but now presented in the form of a bulleted (unordered) list and displaying a different set of highlighted text for the links. You can specify as much or as little text as you want to be the selectable link.

This links to a file on the jgkhome.name website, but not in the directory subtree of the file you are now viewing. It happens to be in a directory above the current directory, but could have been anywhere on the jgkhome.name website.
This links to a file not on the jgkhome.name website.
This links to a location on the page currently being viewed. (Press the browser's Back button to return to where you were.)
This links to a file lower in the directory subtree of the current directory.

To create a link, use an anchor tag, <a href="URL">...text...</a>, in your source file at the point you want the link (the selectable text) to appear. The anchor tag would appear similar to the following line. I'm using some coloring here to let you easily match the pieces to the explanation below.

...any preceding text...<a href="place you want to link to">any desired text</a>...any following text...

The href attribute's value, which must be in quotes, is the address (URL) or location of the place you want to link to.

The text between the begin and end anchor tags is what you want to have as selectable (normally by the left mouse button) to cause the desired web page to be displayed. That text is usually highlighted in some way, e.g., with an underline, although you can specify how you want that highlighting to appear (as shown by this very page), if at all. In fact you can specify things other than text to be the selectable link, e.g., an image, as is done in the Home button described below.

The values of the href attributes in the <a> tags used above, i.e., the values specifying the ("place you want to link to"), are shown respectively in the following ordered list. I have used a different font type and also removing the link's underscore to make it a little easier to see the details:

The Home Button

This page's Home button is shown below (the green button with "HOME" inside). Such a button is usually included on a displayed page to make it easy for the viewer to return to the website's Home page. However the button is intentionally not shown on a printed page since it would serve no purpose there. It uses some standard code, usually just copied to each page on the website. The button contains an anchor tag. For each page, the href attribute value (the URL) for that tag, may need to be changed to reflect the subdirectory depth from which the page is being executed. Once you understand directory subtrees, you will appreciate that this "relative addressing" makes the website very portable, which also helps in testing. Print this page to see how you can separately control display vs. print formatting; that can be extremely useful when a single format isn't appropriate for both media.