AGOCG logo
Graphics Multimedia VR Visualization Contents
Training Reports Workshops Briefings Index
This report is also available as an Acrobat file.
Back Next Contents
Authoring and Design for the WWW

PRINCIPLES AND THEIR IMPLICATIONS

Functional markup versus fixed formatting

Disadvantages of functional description

Lack of resemblance to paper documents

This might seem an odd objection to an electronic document, but there may be occasions when a close resemblance to a paper document a piece of virtual paper is desirable on screen.
Virtual paper' may be valuable when:

Lack of visual quality

The functional description approach has flexible outcomes which may well be inferior to the look of a designed page on paper, since it is limited in the range of visual styles it can draw on. Paper documents by contrast can make use of distinctive typefaces and unusual layouts to achieve a different look.

In practice

It is not right to discount this as merely an issue concerning decoration and therefore not a serious matter. If the aim of a Web page is to be read, viewed, interacted with, then the appearance of that page must be able to motivate the reader. It is unreasonable to hope that a reader will be entirely motivated by anticipating a benefit from the content alone: if this were the case, there would be no graphic designers! However, users are fortunately often willing to sacrifice some weaknesses of the medium in terms of its visual qualities for the convenience and accessibility of the content.

The style-sheet approach neither one thing nor the other

Some of the commonest software tools page-layout packages and the more advanced word-processors do not wholly adopt either fixed formatting or functional description, but a hybrid of the two involving style-sheets. The shortfalls of this approach compared with the full functional description of HTML are worth considering.

In a page-layout package, any whole paragraph may be given a named style. So for example in this handbook created in Adobe PageMaker, this current paragraph is in a style called body, while the one-line paragraph forming the sub-heading The style-sheet approach neither one thing nor the other, is in a style called subhead. The definition of how these styles should appear is stored independently, so if we want to set every paragraph whose style is body in a different font, this is easily done by changing the definition of the style. The appearance of all paragraphs in that style is instantly altered.

diagram of the style sheet approach

The style-sheet approach: tagged paragraphs of text acquire the styles assigned to them by the style sheet

If the text from such a document is exported, the tags are made visible, appended to the beginning of the relevant paragraphs in angle-brackets:

<body>In a page-layout package, any paragraph may be given a named style.

A paragraph output from a page-layout package. The tag is in angle-brackets at the beginning (a widely used convention to which HTML also conforms).

A benefit of this technique, and one which applies equally to markup for style-sheets and markup in HTML, is that content can be prepared in even the crudest text-editing system, since the formatting is specified only by the name of the tags, which are simply more text, partitioned off from the actual content-text by the < and > tag-markers.

HTML looks at first sight similar to these style-sheet tags. However, there are important differences: style-sheets have limitations which HTML avoids.

Style-sheets typically only work with whole paragraphs

In most page-layout packages, it is not possible to tag anything smaller than a complete paragraph. So for example, in the sentence We recommend that the University move to a position of assuming that paper documents will not be produced,' tagging is not capable of recording that the word 'not' is in bold. In HTML on the other hand, the size of an element is immaterial it can be as small as a single character.

<p>We recommend that the University move to a position of assuming that paper documents will <emphasis>not</emphasis> be produced.

A paragraph of HTML. Each element has a start-tag and an end-tag. In this example, an emphasised element is contained (nested) within a paragraph element.

Thus a tag can dictate the behaviour of as small an item as a single letter, just as well as it can for a whole paragraph.

Style-sheets in page layout packages prohibit structures within structures

Given that only paragraphs can be tagged, elements cannot be nested' that is, one kind of element cannot be contained inside another. In HTML by contrast, nested structures represent one of the most useful features. For example, it is through the use of a nested structure that lists can be represented.
  1. How Acrobat and HTML work
  2. The style of electronic documents
  3. The work of the project
  4. Organising University documentation

<OL>
<LI>How Acrobat and HTML work
<LI>The style of electronic documents
<LI>The work of the project
<LI>Organising University documentation
</OL>

A list above as displayed and below as tagged in HTML: each line is tagged as a List Item (using the <LI> tag) and the group of lines is contained in an overall pair of tags (<OL> and </OL>) indicating that this is an Ordered (ie. numbered) List.

The tags are displayed in this example in order to clarify the principles on which HTML works, but it should be remembered that there is a decreasing need for Web publishers to edit these codes directly themselves, as more software becomes available which does the work.

One useful result is that the machine can be used to do tedious and error-prone work which would otherwise need to be done by hand. For example a new item can be introduced into a numbered list (and which HEI does not deal in extraordinary quantities of lists?) without any need to renumber: the browser does the numbering instead of the author doing it. The browser also indents the list appropriately and provides suitable spacing between the items.

Even page layout style sheets are preferable to crude fixed formatting, in that they avoid the need to do the formatting of each item individually by hand, and allow content and design to be separated. But the kinds of structures used in HTML take the style sheet concept further, and in so doing make it more effective.


Back Next Contents

Graphics     Multimedia      Virtual Environments      Visualisation      Contents