Creating Web Documents

Hypertext Techniques

Concepts

Hypertext--text which contains links to other text--is one of the major features of the World Wide Web. So intrinsic is hypertext to the nature of the Web, that if you are not using hypertext in your Web documents, you are not tapping into the power of the Web itself.

Hypertext allows you to link information in a way that is not linear like the bound pages of a book, but associative, so that people can choose their own path through the information. Hypertext on the Web makes it possible to link your documents to many resources by other authors in other places.

I think that hypertext represents a unique mode of human communication that makes possible new ways of creating meaning. Some people even think a new kind of fiction is possible called "hypertext fiction," and that hypertext online represents a new kind of E-literacy.

How Hypertext Works

To make hypertext, you create HTML files containing the anchor (A) element.

We've already seen how to use the A element like this:

You can link to the <A Href = "https://johndecember.com/html/">HTML Station</A>

In this example, I used a full URL in the Href attribute. It is possible to refer to files on the same server using relative links.

Anchors using relative links

If you are making a link from an HTML file to other files or resources on the same server, you can use relative path names. In a relative path name, you don't include the entire URL in the Href attribute, but only the path name to the file.

For example, the "hello.html" lesson is in the same directory as this file ("hypertext.html"). So I could make a link to that file just using the file name as the Href attribute, like this:

I can link to the <A Href="hello.html">Hello, World</A> lesson.

I might want to link to a file on my same server in another directory. For example, I can link to the "books.html" page of the MKE blue publication. The MKE books file is located at a directory two levels up from this one, in the places directory and the mke subdirectory. So my link from here would look like this:

You can check out <A Href="../../places/mke/books.html">MKE books</A>.

Remember, it is always "OK" to use the full URL in the Href attribute of the A element. Using relative path names just makes it easier to create a set of linked pages that are all located on the same server.

Named anchors

The linking methods we've seen so far in this lesson brought the user to the top of the page at the linked resource. You can used the named anchor technique to link to a specific place on an page.

For example:

You read about my last name on <A Href = "../../john/faq.html#lastname" >on my FAQ</A>.

In my FAQ, I have this line near where I talk about my last name:

<A Name="lastname"></A>

Notice that this is the A element, but without the Href attribute. This gives me (or anyone) a way to force the user's Web browser to "skip down" to that section of the page.

Redirection

Sometimes you might want to force a user's browser to go to a different page. You can accomplish this by browser redirection.

Hypertext Use

Things to keep in mind

1. When you make a hypertext page on the Web, people may find it useful and link to it. This linking creates collaborative "texts" that consist of many pages at many sites by many authors.
2. Break up the information you have on your site into coherent "chunks" rather than placing unrelated information all together on one long page. These smaller chunks make it easier for people to link to the specific information that interests them at your site.
3. When you break up information into many pages, you'll need to provide some navigation links to help "hold it together." For example, the navigation links at the top of this page help you see that this page is a lesson in the Creating Web Documents course, and is part of the HTML Station.
4. After a while, keyword search engines may index pages that reference your site. You can use AltaVista to see who references a particular Web page. For example, in the AltaVista search box, I enter this:

   link:johndecember.com/html -host:december.com

   to find out what web pages in the AltaVista search engine link to johndecember.com/html but are not located on my own host december.com (I don't care to find out where I link to my own pages).
5. When you move your pages, change your URL, or change file names, it is more difficult for people to find the web pages you create. Their links to your pages "break" when you change URLs. Therefore, as you build a web site, figure out a stable directory and file naming convention from the start and keep your file names and directory names stable.

Look at examples

Check out some excellent examples of the use of hypertext:

• Yahoo Full Coverage: This news service presents stories in a way that allows users to delve into related information to the depth and extent they desire.
• The Free Online Dictionary of Computing: this reference work defines computer science terms with definitions that contain links to more definitions. Compare the usability of this online dictionary with a paper dictionary where you would have to turn pages.
• Go.com: Disney's online media portal. What is interesting about this hypertext work is that Disney has a vested interest in using hypertext to lead users through related content all within the Disney "universe."

Exercise: Experiment with the non-linear nature of hypertext

Create a set of Web pages which demonstrate a non-linear, associative presentation of text (for example data, poetry, or fictional prose) and relative path names.