Traveling the information highway with Bob Alden

August 1997

Web page links

The usefulness of the WEB depends, not only on the quality of the information and services provided, but on the way in which the HTML files that create the Web pages are linked. Many IEEE members are creating pages and sites of their own and for IEEE entities. As Web page creators, we need to know how to structure our pages to help our viewers navigate the Web easily. This column is the third in a series about creating links.

FRAMES. In the June issue of The Institute, I discussed how to create Web frames -- this technique enables us to split the Web page into parts which can be scrolled individually. In my view, the prime use of this technique is to display a list of categories (table of contents) in one frame and the contents (the set of links) in the other frame -- this makes sense if we have a long list of links that we need to organize into browse-able chunks. If we use frames, we have to look after several separate Web pages instead of one.

IMAGE MAPS. In the July issue, I looked at image maps and their use in IEEE Web templates that are now available from IEEE. Image maps are useful to provide identity and consistency of format for major links to other Web pages within a Web site. These are generically graphic images but we can use table tags or hypertext links for similar purposes.

JUMP TAGS. In this issue, I will describe how to use tags to jump down a Web page. A very effective way to organize a single Web page with a large number of distinct content segments is to create a table of contents at the top of the page and be able to click on each entry in the table and jump down the page to that specific content segment. The content may or may not include a lot of links.

The objective in using this strategy is similar to using the frames technique. You may prefer this look to that of the split-page look of Web frames. Or you may prefer to manage one HTML file rather than several.

THE EXAMPLE that I am using is my set of Web links that I call my "World In General Web Page Links." This page can be viewed at "http://power.eng.mcmaster.ca/alden/wig.html". This is the file that I copied and split into several files to create the frames example described in the June issue. In this issue I am looking at the single page version.

[Author's Oct 2006 note: the referenced page is no longer available on the "power" server - please use http://bobalden.com/wig/index.htm]

The top portion of this page is shown above. I am using table tags to create a three-column by 11-row table so that the entire table of contents fits on most screens. Only the top three rows are shown. Below the table, and not shown here, are the actual contents. For example, the "Hotels" category has about a dozen or more entries, as do most of the categories. With this much information, there would be too much scrolling without the ability to jump about this page.

The coding box below illustrates two portions of the corresponding HTML code. Lines 1-7 form part of the table of contents at the top of the Web page. Lines 8-12 are from further down in the file. We will look at the coding in two steps -- the essential "jump tag" implementation, and the overall presentation within a table structure.

JUMP TAG CODING. Lines 4 and 8 illustrate the two key portions of the jump tag coding. These are confined to the link tag which is of the form: <a attribute="...">---</a>, where ... is the jump instruction and --- is the text to be highlighted on the page.

Line 4 contains the "departures" information (using airport terminology). Here the format is href="#hotels" where the pound sign (#) indicates that hotels is the name of a so-called anchor that exists somewhere else on the same page.

Line 8 contains the "arrivals" information with the format name="hotels". Thus clicking on the highlighted text, "Hotels," in the table of contents, causes a jump to the highlighted text, "Hotels," elsewhere on the same page -- which is displayed at the top of the browser window.

TABLE TAGS. Let's now look at the segments of coding represented by lines 1-12 to put the specific jump action into perspective. Lines 1 and 2 are headings I will come back to line 1 in a moment.

Lines 3-7 contain the tags to define a table with three columns and a menu list with square bullets. Lines 4, 5, and 6 contain the entries in the top row of this table -- all entries being "departures"-type jump tags. The two sets of three dots indicate where similar lines of code are not shown for this example.

Line 8 is the first "arrivals" type jump tag which is paired up with line 4. Line 9 contains one entry in the definition list: <dl> and </dl> are the list delimiters, and <dt> indicates the start of each entry. The set of three dots indicates where additional entries are not shown.

Line 10, together with line 1, shows how to jump back up to the table of contents. Lines 11 and 12 illustrate another set of entries similar to those of lines 8 and 9.

LINK & JUMP. You can also combine linking from one document to another and jumping down the page. For example, on my home page, I have a link to a set of IEEE Web page links which are listed on a page of professional association links. The departures" tag is: <a href="http://power.eng.mcmaster.ca/alden/pa.htm/#ieeehp">IEEE</a> and the "arrival" tag is: <a name="ieeehp">IEEE Home Pages</a>. Here I have used a full path spec including the machine, the file name, and the "jump down" tag.

DESIGN CHOICES. Jump tags are useful to guide the viewer up or down relatively large pages. The alternative is to break up the page into several pages. Image map tags and table tags are useful tools to help us implement a sound Web page design strategy. Good design -- good engineering -- good business -- good luck!

Robert T.H. (Bob) Alden is the chair of the IEEE Electronic Communications Steering Committee, and a former IEEE vice president. In his other life, he is the director of the Power Research Laboratory at McMaster University in Hamilton, Ontario, Canada. He welcomes your input via .

extracted from the IEEE website www.theinstitute.ieee.org
by Bob Alden