LIS Course Notes

LIS Notes: Allowing Movement Within Documents
Using Tables to Enhance Page Format

The terms "Web page" and "HTML file" are synonyms.The term "Web Page" is a bit misleading, because HTML documents are displayed without page-breaks on most browsers. A single file may take several screens to display. To view a long document users "scroll" down the "page". In the earliest versions of HTML, designers did not have much control over this "feature" of the Web. Designers created long documents, with indexes of paragraph labels at their tops, to allow motion to specific paragraphs. They sprinkled their documents with "back to top" buttons" to make viewing easier. Computer screens are basically TV screens - they are more horizontal than vertical. More recent Web layout tends to follow this orientation.

There are now many ways to enhance the appearance of pages, and to set them up so as to conform better to the horizontal format. They include (among other techniques):

using the "table" construct to control the positions of objects on a page.
using the "frame" construct to split a screen into several scrolable windows.
using the "target" construct to spawning new instances of the client (browser) software - the so-called "open in a new window" option.
using the "refresh" construct to switch from one page to another after some number of seconds.
using scripting languages like Java for precise control over the screen, and to allow interactive screens
using proprietary software packages, such as Shockwave or Quicktime, to create special presentations.

HTML is the decendent of SGML - a markup language used to simplify the production of printed documents. Special tags, especially the "anchor" construct, make it possible to jump from one document on the Web to any other document, anywhere in the world. Because long documents are considered single "pages", we also need special tags to make them easier to read.

We have used the anchor structure to establish links to other documents, pictures, etc. on the Web. But we can also use anchors to allow movement within a single document.

If you place the tag "<a name=paragraph-name"> at the beginning of a paragraph within a document, you can then allow people to jump directly to that paragraph: <a href="paragraph-name">click here to go to paragraph-name</a>. If you put a label like <a name="top"> at the top of your document, you can put "back to top" buttons throughout the document, which, when pressed, take the user to the top of a long document.

Writing HTML code by hand is often the best approach. However, it is easier to create tables using composition software like Netscape Composer or Microsoft Front Page. However, the software is sometimes too "helpful", and you may wish to tinker with the results by hand.

Tables can be used to split a screen into ROWS and COLUMNS. They can be used to control the WIDTH and HEIGHT of the display, and perhaps most importantly, the RELATIVE POSTIONS of objects on the page.

Here is a simple table:

This is the left cell This is the right cell

Here are some possible table options.
(Your composer may look a bit different).

The first options allow you to set the number of rows and columns in the entire table (you can add more, or delete some later),

"Table alginment" refers to the position of the table on the user's screen.

"Table Attributes" include solid borders around the table, blank "padding" between objects in the table cells and the cell borders, the width and height of the table in pixels or as percentages of the entire screen, and so forth.

If you select "equal column widths", the widest elements will govern the widths - in this table, the width of the picture (in the right column) will govern the width of this column of text.

You can also select a background colour for the table, or even choose to display a background image behind it.

Once you have set up a table, you can choose additional options to control the appearance of individual rows, columns, or cells. As well, you can put tables within tables to provide even more control.