Understanding Links

The essential concept of a web link is that it is a way to enhance a web site by connecting to assets elsewhere on the network. The following material covers:

Link Types -- By Destination

Web links can be classified in several types, based on their functions: navigation, images, external resources, internet protocols, and server instructions.

Link Types -- By Origin

Web links can also be classified by origin; that is, the anchor the link starts from. In most cases this is what you click your mouse on.

Link Syntax

HTTP link syntax allows great flexibility with a small number of structures.

Link Examples

A listing of link examples by type.

Link Theory

A brief background discussion of web links, along with some suggestions for avoiding pitfalls.

Types of Links -- by Destination

We can make the following types of links:

1. Network Navigation Links
   1. go to other pages at the same web site
   2. go to other points in the current page
   3. go to pages at other sites
   4. go to specific points in pages at other sites
2. Image Links
   1. insert images from the same site
   2. insert images from other sites
3. External Resources
   1. Text Files
   2. Postscript Files
   3. Acrobat Files
   4. Images
   5. Sounds
   6. Video
   7. Animation
   8. Other Resources
4. Internet Links
   1. WWW
   2. FTP
   3. Email
   4. Gopher
   5. WAIS
   6. Newsgroups
   7. Telnet
5. Includes & Executables
   1. insert files
   2. counters
   3. date stamps

Link Types by Origin

We can link from the following origins:

1. Text
2. Images
3. Image Maps

While the above list of link types might seem like too much to grasp, fortunately HTML uses a very small number of tags to provide all these variations.

Link Tags -- Syntax

To connect to network assets, we use the following HTML structures:

The Anchor Tag

This is the basic HTML tag for most network connections. With only two primary attributes, the anchor tag is used for navigation, for invoking network assets, and for connecting to internet resources of all types.

Here are the two most common forms of the anchor tag:

<A HREF="[destination]">[visible item]</A>

Clicking on [visible item] connects to [destination].


<A NAME="[anchor name]">...</A>

Makes ... a destination named #[anchor name] for a link from somewhere else.

The Inline Image Tag

This is the tag for inserting images into the layout ("in line") of a web page. The inline image tag takes several attributes, to allow some flexibility in layout. The inline image tag can also be used in conjunction with the anchor tag to create Image Maps, which are images "programmed" to respond differently depending on where on the image the user clicks the mouse (see Server Instructions).

Here is the simplest inline image tag, followed by image tags with some of the attributes:

<IMG SRC="[image file reference]">

---

<IMG SRC="[image file reference]" ALT="[alternative text]">

ALT provides the text [alternative text] to be displayed when a browser doesn't display images.

---

<IMG SRC="[image file reference]" ALIGN=[alignment value]>

The ALIGN attribute aligns the inline image in relation to text (choose one alignment value from TOP, BOTTOM, MIDDLE, LEFT, RIGHT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM). Examples showing the use of <IMG> alignment attributes are on a separate page.

---

<IMG SRC="[image file reference]" WIDTH=[#] HEIGHT=[#]>

The WIDTH and HEIGHT attributes set the size of the image in pixels, allowing the browser to lay out the page faster when loading; some browsers will scale the image size up or down using WIDTH and HEIGHT in pixels or percentages.

---

<IMG SRC="[image file reference]" BORDER=[#]>

BORDER places a border of thickness [#] around the image (0 means no border).

---

<IMG SRC="[image file reference]" VSPACE=[#] HSPACE=[#]>

The VSPACE and HSPACE attributes add vertical or horizontal space in pixels around the image.

---

Inline image tags may have any number of attributes. The tag must have the SRC attribute, and it is considered good form to include the ALT attribute.

---

Server Instructions

Server instructions are ways to enhance a web page by invoking the capabilities of the Web server.

Server Side Includes
The most common server instructions are formally called Server Side Includes, or SSIs, A popular example of an SSI is the visitor counter, which displays the number of visitors to a site. A very handy use of server instructions is to automatically insert standard parts into web pages; the parts can be modified in only one file and the changes will show up in all the files containing that part.

The general form of the SSI directive is:

<!--#command parameter="argument"-->

Here are three types of server instructions:

<!--#exec cgi="[script.cgi]"-->

Tells the server to execute the script [script.cgi].

---

<!--#include file="[filename]"-->

Inserts the file [filename] (provided [filename] is in the same directory as the current file).

Or...
<!--#include virtual="[file reference]"-->

Inserts the file [file reference].

---

<!--#echo var="[server/environmental variable]"-->

Inserts the information from [server/environmental variable] into the text.

---

Image Maps
Another type of server instruction is involved in image maps, which are images that anchor multiple links; the different links are activated by clicking on different sectors of the image.

An image map requires a small text file that contains the x:y coordinates of the different sectors and the URLs of the links associated with each sector. This file is usually called the map file.

Note: The most universal type of image map activates a script located on the web server; this is known as server-side image mapping. Before using Image maps on your site you must get the correct script reference and its specific syntax from the administrator of your server.

One web browser also correctly interprets an image map whose map file is incorporated into the HTML document. This is known as client-side image mapping. Because they don't require a call to the server for any computing, client-side image maps respond more quickly than server-side image maps. I'll cover them when they're more universal.

Here is the general form of a server-side image map:

<A HREF="[script.cgi][map file reference]" > <IMG SRC="[image file reference]" ISMAP > </a>

1. Places the image [image file reference], which has the special attribute ISMAP, on the page;
2. Catches the horizontal and vertical coordinates of a mouse click on the image;
3. Calls the server script [script.cgi], which interprets the mouse click coordinates as links according to
4. a text file [map file reference], which contains the boundaries of the link sectors of the image, and
5. the network addresses of the links for each sector.
6. Follows the link corresponding to the sector that includes the mouse click coordinates. Whew!

Link Tags -- Examples

1. Network Navigation Links
   1. go to other pages at the same web site
      <A HREF="testpage.html">My Test Page</A>
      
      
   2. go to other points in the current page
      <A HREF="#top">[Go to Top]</A>
      
      
   3. go to pages at other sites
      <A HREF="http://www.brucevanallen.com/weblab/bwvanallen/testpage.html">Bruce's Test Page</A>
      
      
   4. go to specific points in pages at other sites
      <A HREF="http://www.brucevanallen.com/weblab/bwvanallen/testpage.html#ocelot">Bruce's Favorite Animal</A>
      
      
2. Image Links
   1. insert images from the same site
      <IMG SRC="ocelot3.GIF" WIDTH=313 HEIGHT=331 BORDER=2 ALT="Ocelot" ALIGN=MIDDLE >
      
      
   2. insert images from other sites
      <IMG SRC="http://www.wolfenet.com/~critter/pictures/felines/ocelot3.jpg" WIDTH=313 HEIGHT=331 BORDER=2 ALT="Ocelot" ALIGN=MIDDLE >
      
      
   Examples showing the use of <IMG> alignment parameters are on a separate page.

3. External Resources
   1. Text Files
   2. Postscript Files
   3. Acrobat Files
   4. Images
   5. Sounds
   6. Video
   7. Animation
   8. Other Resources
4. Internet Links
   1. WWW
   2. FTP
   3. Email
   4. Gopher
   5. WAIS
   6. Newsgroups
   7. Telnet
5. Includes & Executables
   1. insert files
   2. counters
   3. date stamps

Links - Background

Among the greatest powers of the HTTP protocol is its capacity for linking files and other network assets. A few HTML tags enable much of the richness and multi-dimensionality we're becoming familiar with on the World Wide Web.

To compose readable and dynamic web sites, it's useful to understand the history of Web links, and their inherent difficulties.

Web links have their origin in theoretical work started 25 years ago by computer science pioneers, especially Ted Nelson, who developed the concept of Hypertext. The idea of Hypertext is that a reader would have the ability to jump from a word or phrase in a text to related information elsewhere, rather than only following the text in the order composed by its author. For a variety of reasons, Hypertext has never been fully achieved. There are technical obstacles, practical limitations, and conceptual complications.

What follows here is a discussion of the difficulties of Hypertext, along with their implications for good Web linking using HTML. Please note that there is a large body of thought about hypertext, and some of what I criticize here is the result of "thinkos" (thinking errors, like typos) that don't take away from the validity of the basic ideas.

Technical Obstacles

The HTTP protocol overcomes more of the obstacles to realizing the Hypertext idea than many previous attempts. The foundation for the success of HTTP includes:

• the power of modern computers and the near universal use of computer monitors for output;
  
  
• the extensive connections available over phone lines, allowing the rise of a worldwide network of computers -- the Internet;
  
  
• the evolution of network operation based on balancing the computer workload between the network server and the client computer; and
  
  
• the development of non-text user input methods such as mouse clicks and keyboard controls.

HTTP builds on these achievements, adding:

• an easily learned vocabulary (HTML tags);
  
  
• consistent presentation of information independent of the computer operating system;
  
  
• a richer set of network data exchange tools than previous specialized protocols; and
  
  
• an extensible approach to presenting network assets, so that new forms (beyond text, graphics, sounds, animation, video, 3-D) can be added as they are developed, and faster modems & network connections can be accommodated.

Technical obstacles remain, including, especially:

• computer monitors are harder to view than printed paper;
  
  
• HTML Hypertext links must be hard-coded (specified by the author) in the text in which they appear;
  
  
• many potential viewers cannot afford computers and do not have access to phone lines;
  
  
• important information is not available to computer networks because of language, educational, and cultural barriers; and
  
  
• HTML standards are at risk of losing control, due to commercial competitive pressures and eagerness of Web viewers and developers for ever-fancier features.

Technical Solutions for Good Web Links:

• Test all links when you first make them, and test them periodically to make sure that what you have linked to is still there, and is still what you wanted your viewers to get to;
  
  
• If you link to network assets of the newer types, like sound, video, or animation, make sure your viewers have the software/hardware necessary to handle them (a good example is the National Public Radio Web site, which provides audio broadcasts in RealAudio format; NPR provides a way for viewer/listeners to download the software to play RealAudio sound files);
  
  
• Remember that not all Web browsers do as much as Netscape or Internet Explorer (I say this a lot, don't I?), so if you use a graphic image as a link, provide a text alternative for viewers whose browsers don't handle images;
  
  
• Warn your viewers when your links go to pages with large files or many graphics, which can take a long time to load;

Practical Limitations

The original Hypertext idea was that the reader could touch any word in a text to get more information; this runs into practical limits, including:

• if every word were linked to more info, the programming to accomplish the linking would take up far more space than the original text;
  
  
• many readers probably won't want links from every word, but who can anticipate what a reader will want to know more about?
  
  
• many authors won't have the knowledge to make adequate links for many terms, or wouldn't know where information is located to link to;
  
  
• an automated linking system would really have to incorporate the whole language, which itself is constantly changing; and
  
  
• a visual approach to making links apparent (e.g., underlining) can clutter the page so much that the text becomes unreadable.

Practical Strategies for Good Web Links:
HTML linking tools provide excellent linking across any network with a minimum of code. To make your links useful and practical, keep the following suggestions in mind:

• Don't overload your text with links; it's often better to have a list of links before or after a block of text, rather than spread through it;
  
  
• Make sure your text links are apparent; that is, text links should look like the standard text links (underlined, color -- which they'll be unless you expressly change them);
  
  
• Graphics used as links should give some clue to the viewer that they are in fact links. The accepted "grammar" for graphic links is to have a text link to the same destination below or beside the graphic link, or to have a text message incorporated into the graphic;
  
  
• Maintain a consistent visual style for links in your site. Some sites have their main navigational links in the form of small graphic "buttons" or "tiles" at the top or bottom of the page, and use text links for connecting terms and ideas between text blocks.
  
  
• Assist your visitors in maintaining a train of thought by providing links that let them get back where they came from on your site;

Conceptual Complications

Hypertext theory has at times fallen victim to conceptual dead ends and intellectual fads, preventing useful implementation. Now that HTTP has given networks powerful tools for hypertext-ish programming, some of hypertext's conceptual complications are creating real-world problems.

• Hypertext theory has stumbled over the belief that "linear" is bad and "non-linear" is good. [In this context, "linear" refers to proceeding in regular steps in a certain direction; "non-linear" means anything that doesn't proceed that way.] I'm not going to go into a long philosophical discussion here; it's enough to say that this dichotomy is just too simplistic: this is a case of being overwhelmed by a powerful insight.
  
  Some of our experience does follow a linear development; and of course, much of experience isn't linear. But, in general, seeing this as an either-or choice is asking for trouble. Life doesn't break down into strictly linear and non-linear pieces; neither does language or thought.
  
  The implication of this for linking is that you need to think through how you present your material. A block of text full of hyperlinks to other subjects can be useful, but it can also make the visitor miss the meaning of the text, because they'll mostly be scanning for links, rather than carefully reading what you've written.
  
  
• A popular idea in recent decades is that it would be the richest or most "natural" or "empowering" experience for readers to choose their own paths through the material being presented. Thus, rather than passively submitting to the dictatorship of the author, readers direct the process by following their mental or emotional associations from the words of the text.
  
  But refusing to use a beginning-middle-end structure can sometimes lead to a failure of communication. It depends on context. Sometimes when we read, we want the author to take us for a ride. Other times we want to stop at ideas to think or research them elsewhere, before coming back to the author's flow of ideas -- or possibly not coming back at all.
  
  The main thing for composing good web sites is to understand that what we want is effective communication. Don't be afraid to present your information in an organized, sequential way. Alternatively, some web sites work best by just presenting material with lots of links, and allowing the visitor to pick and choose in whatever order appeals to them.
  
  
• "It's all connected" is another compelling insight that applies to ecology, social/economic relationships, and, for some people, spirituality. In the context of hypertext and network communication, however, this leads to nothing but confusion.
  
  Yes, on the 'net, everything is connected to everything else, potentially. But what does this mean for communication, learning, or entertainment?
  
  Our job as web composers is to provide our visitors specific useful connections among the Everything of the network. We want to link for a purpose related to our site, not for the sake of linking. A site that is primarily links to other sites will disappoint most visitors. Leave that to the search engines like Yahoo, Alta Vista, Excite, etc.