Trainer's Outline for IP Training 2 - Creating Hypertext Links

Handouts

  1. Topics covered
  2. "Composing Good HTML" is a recommended reference.

Instructions for Trainers

(Same as for IP Training 1) People learn HTML best when they can actually create some HTML documents during the session. If possible, get students to bring in text that they want to put onto CFN, so they have something real to work on.

If time does not permit any editing of HTML documents during the training session, give the students homework. There's nothing like doing it yourself to give you an "aha!" insight into how it works.

Another strategy I use is a lecture on an overhead projector with a connection to CCN. Even at that, I find myself writing on the blackboard most of the time and there is no hands on during the session. - CS

Time Limit: 1 hour

Suggested Outline

Introduction

Topic of this session is how to create hypertext links using HTML. We will also be covering a few pointers on the design of HTML documents.

A Very Simple Link

Example 2-1. A simple link to a file in the same directory. Tell the participants not to be distracted by the stuff in the "favourite foods" file; it's used later on to illustrate named anchors. Example 2-1 also contains a few notes introducing the anchor tag.

Mention that, if the destination specified in the "href" attribute is just a filename, the browser will assume that the file is in the same directory as the file where the reference occurred. In our example, this means that the file "favfoods.html" is in the same directory as "ex2-1.html".

At this point, it may be necessary to give a quick intro to the concepts of file, directory, pathname, relative pathname, absolute pathname.

A Link Using a Relative Pathname

Example 2-2. This is an example of a link to a file in a subdirectory of the current directory. The same file (favfoods.html) is used. Have the participants use the = key to show the information on the file location (i.e. verify that this file is indeed in the test subdirectory).

Recommend that IPs use relative pathnames whenever possible, because they will probably be moving files around a couple of times during the development process. Most IPs would probably be doing the initial HTML development on their PCs at work or home. Then the files would be uploaded to the IP rep's personal home directory on CFN for more testing. Then the files are installed to the IP directory. Point out that it makes things a lot easier in the long run if you make all your file references relative. Otherwise you would have to edit your HTML files and change the links every time you moved the files to another directory.

Named Anchors

Introduce the next variation on linking: suppose you want to link to somewhere in the middle of a document (could be in the middle of the same document or the middle of another document).

Give a couple of examples where you might want to use this: e.g. suppose you have a long document with several sections, and the first thing in the document is a table of contents; it would be a nice touch to have each item in the table of contents be a link to the corresponding section.

Two steps to accomplish this:

Step 1. Create a named anchor (i.e. mark the place where you want to be able to jump to).
Look at the favourite foods file, where the titles for the food lists (bottom half of the file) are named anchors.

Point out the similarity in format to the anchor tag with the href attribute. The difference is that the attribute is name, not href. Note that the name attribute doesn't specify a file name. It's just a way of identifying this word or phrase so you can link to it.

Step 2. Create a link to the named anchor.
See the favourite foods again, only this time look at the links in the top of the list. Note that you use the same method as you usually do for creating links. The only difference is that you refer to a named anchor by puttiing a # in front of it.

Named Anchors in Other Documents

See Example 2-3. This example just shows how to link to a named anchor in another document.

Links to other computer systems

Mention that the examples we've been dealing with are for files on the same system (in this case, CFN). If they want to link to files on other computer systems, the HTML usage is basically the same, you just replace the filename with a URL.

Of course, you'll have to explain what URL means. It may be helpful to explain the following terms first. Or, depending on the participants, you may want to go through the definition and format of a URL first. Whatever works.

[BTW, don't feel you have to stick with the definitions I've given. I supply them in case you don't want to make up your own. Also, feel free to correct me on any of these definitions. My knowledge of the net could always use some reinforcement. - BL]

What is the Internet?
In the simplest definition, the Internet is a network of computer networks which spans many counties over the world. It is not the only computer network in the world, but it is [probably] the largest.

Is Internet the same as the FreeNet?
No. A freenet (in general) is a community-based computer network, containing resources by and for the local community. Access to freenets is usually free or available for a nomimal amount, since they work on the principle of universal access, like public libraries. In addition to the community information, freenets usually provide access to the Internet, (thus the possible confusion between the freenet and the Internet). You could say that such a freenet is a part of the Internet (or, as we say, "on the Internet"). Chebucto FreeNet is the local freenet for the Halifax- Dartmouth-Bedford-Sackville area.

What do you mean by "access to the Internet"?
When computers are networked, it means that they are hooked together in some way. With all these computers hooked together on the Internet, there's a lot of ways that information can flow between them. You can send messages to someone on another computer (email). You can login to another computer on the Internet (telnet). You can access files that are on another computer and transfer them to your own computer (ftp). People have also developed other, easier-to-use methods of accessing information on the various computers on the Internet. One of these is called Gopher, which presents information in the form of menus. Another method of accessing information is the World Wide Web, which uses hypertext. This is what Chebucto FreeNet uses.

Having access to the Internet means that your computer is hooked up to the Internet in some way and you are able to use these various ways of transferring information (email, telnet, ftp, gopher, WWW). Since CFN is connected to the Internet and you have an account on CFN, you have Internet access. Note that this doesn't necessarily mean that you can use ALL of the Internet access methods. CFN has email, telnet, USENET news, gopher, but no FTP, due to our contract with NSTN.

What does URL mean?
URL stands for Uniform Resource Locator . It's a way of specifying the location of an information resource on the Internet.

The NCSA Beginner's Guide to HTML describes the format for a URL as follows:

scheme://host.domain[:port]/path/filename

where scheme is one of:

  • file
  • http
  • gopher
  • WAIS
  • news
  • telnet
    • (news and telnet are less often used)

    hostname.domain is the Internet address of the computer

    :port is optional (that's why it's in square brackets). It basically provides more information on where to connect to the hostname.domain computer

    The rest of the URL is the pathname for the file.

    Most of the URLs you'll be dealing with on CCN will probably be of the http (=HyperText Transfer Protocol) kind, since those indicate World Wide Web format.

    At this point, it would be useful to go to some CCN pages that have links to other sites, so that the participants can look at some real live URLs.

    Your own personal URL

    Everyone on CFN has a URL for their profile:

    http://www.ccn.cs.dal.ca/~zz999/Profile.html

    where you replace zz999 with your own user id. A couple of things to note:

    HTML Document Design

    Naming files:
    Choose descriptive names for your files. When writing your links, remember that after you move your files to CFN, the HTML file names must have the ending ".html".

    Multipart documents:
    If you can, break up your information into shorter files (these breaks should occur in logical places). People usually find it quicker to browse through several shorter linked files rather than one long one.

    A hierarchical organization of information is easily understood by the reader. If you use a hierarchical organization, make sure you keep this structure readily apparent by using a table of contents, and by putting links to the next section, links to the parent section, links to the previous section, links to the table of contents in each file.

    Don't create dead end files. Each file should have a link back to your organization's home page, a link to the next logical section (if appropriate) and a link to the previous logical section (if appropriate).

    Relative pathnames:
    These were mentioned earlier in this session. The main advantage is of using relative rather than absolute pathnames is for portability. Note that this applies to your own files, not other IP's files that you may want to link to.

    Check out some of the links on the IP Help Index... some of those documents have good guidelines for structure and organization.