Articles'
Contents

Virginia's HTML—Hyperlinks

©2005, Martin Rinehart html-intro-05.html

You've been clicking happily from one page to the next in this tutorial, probably without giving it much thought. In a well-designed website it's easy to get around. If the website needs navigation instructions, it probably needs to be redesigned. These links are examples of hyperlinks within a single site.

You can also have links to other sites and, if you have long pages, you can have links to specific locations within a page. I'll show you all three types here, although I'll not spend much time on the links within a page since I don't normally use them.

Links in Your Site

To try this yourself, create two subdirectories under your root, so you'll have three directories. Now create three pages (you can copy/paste from these):

<! root-page.html - sample page in root directory>
<HTML>

<HEAD></HEAD>

<BODY>
Sample page in root directory
</BODY>

<! end of root-page.html>

<! subdir1/subdir1-page.html - sample page in subdir1>
<HTML>

<HEAD></HEAD>

<BODY>
Sample page in subdir1
</BODY>

<! end of subdir1/subdir1-page.html>

<! subdir2/subdir2-page.html - sample page in subdir2>
<HTML>

<HEAD></HEAD>

<BODY>
Sample page in subdir2
</BODY>

<! end of subdir2/subdir2-page.html>

You should now have four files.

Now you need to incorporate some navigation. That requires anchor tags <A> and </A>. The most common form is the following.

<A HREF="subdir1/subdir1-page.html">go to subdir1</A>

The HREF attribute within a website is the relative address (relative to the current page) of the page you want to view.

To Navigate From Use this path/name
root to another root page root-page.html
root to subdir1 subdir1/subdir1-page.html
subdir to root ../root-page.html
or
../virginia.html
subdir1 to subdir2 ../subdir2/subdir2-page.html

To lock this firmly into your brain, add links from each page to each of the other pages. I'll get you started with links from virginia.html to each of the other pages.
within the <BODY> of virginia.html
<A HREF="root-page.html">root-page</A><BR>
<A HREF="subdir1/subdir1-page.html">subdir1-page</A><BR>
<A HREF="subdir2/subdir2-page.html">subdir2-page</A>

I've used <BR> tags to separate my links. You could also put your links between the <LI> and </LI> tags in an ordered or unordered list. Or you could move them to the right border by putting them inside <P ALIGN="right"> and </P> tags. You can also use <B> and <I> tags between the <A> and </A> tags. Have some fun!

Links Around the World Wide Web

Linking around the world is easy. You use the same <A HREF=""> anchor tags. The only new thing is that you must put in the full name of the site to which you are linking, including the "http://" prefix that we mostly forget when we're using our browsers. Here's a link to my site.

<A HREF="http://www.MartinRinehart.com">Martin Rinehart's site</A>

Suppose that the second site is one that your visitor will visit briefly (for example, to double check a fact) before continuing in your site. You can pop up the second site in a new browser window, this way.

<A HREF="http://www.MartinRinehart.com" TARGET="_new">Martin Rinehart's site</A>

For an example, check the cross reference links in my fitness site.

Users with a lame old browser (MSIE) will get a new browser popping up with TARGET="_new". Users with a tabbed browser (Firefox, Konqueror, Netscape, Opera) will get either a new browser or a new tab depending on the way they've configured their browser.

Links Within a Page

Generally, I'd say you should have multiple pages, not a long page with interior links. If you want to ignore my advice, here's how to do it. Assume that your page has three topics: Above the discussion of Topic A you'll put a name anchor:

<A NAME="topic-a">

To link to this anchor from within the page, use this syntax.

<A HREF="#topic-a">view Topic A</A>

To link to this spot from another page in your site, use this syntax.

<A HREF="relative/path/filename.html#topic-a">view Topic A</A>

To link to this spot from another website, use this syntax.

<A HREF="http://www.SomeOtherSite.com/relative/path/filename.html#topic-a">view Topic A</A>

So have some fun linking. Tomorrow I'll show you the basics of tables. (All the boxes you see above are tables. Some are tables inside other tables.) If you become a tablemeister you'll really be HTML-enabled.

Yesterday         Tomorrow