[HTML]

Text

Basic text layout features of HTML.


<H3 ALIGN=center>

Some
text in a
<P ALIGN=center> paragraph
with a few
breaks.


<H3 ALIGN=right>

Some
text in a
<P ALIGN=right> paragraph
with a few
breaks.


<H3 ALIGN=left>

Some
text in a
<P ALIGN=left> paragraph
with a few
breaks.


Combinations

This table has ALIGN=left
but this text has ALIGN=right within the table.

This text is centered -
in the space left by the table
which is aligned left. If the text is long enough and the page is narrow enough, the text will eventually flow past the end of the table and we will see how the centering works after that point is reached.
You might have to resize your browser window to investigate the effect.


A 1x1 image (left, red) with ALIGN=left can be expanded by the WIDTH attribute to give indenting at the start of a line. Varying the value of the WIDTH attribute will vary the indentation.
If the image is a transparent gif, as at the left, it will not be seen and this can be used to make a traditional indented paragraph. Personally I prefer indented paragraphs in text rather than those separated by blank lines which is a more ambiguous form. The problem with creating indented paragraphs this way in HTML is that the semantic information expressed by <P>...</P> is lost. A better solution would be to allow the `style' of paragraphs to be controlled.

1x1 gifs can be
used to control
the indenting
as desired.
Whether or
not this
is a good
thing is
another
matter!
Some of
you might
recall an
artistic use
of this effect
in Alice in
Wonderland by
Lewis Carroll


<BLOCKQUOTE>

The <BLOCKQUOTE> tag can be used for quotations, for example:

Many [web] sites are not geared toward consumers. In the information realm, sites must satisfy impatient, directed visitors. These sites can't afford to put too much glitter in front of the information.
- David Siegel, Creating Killer Web Sites, p39, Hayden Books 1996
It provides the semantic information that some text is being quoted and the browser (probably) indents it.


Multiple Columns

Multi-column layouts can be approximated by using tables but one would ideally like to have the browser select the number of columns and their break points - under instruction from the author.

Very long lines of text are considered to be hard to read while multiple columns and hence shorter lines are thought to be easier - within limits.

Many jounals and conference proceedings are printed in two column format for this reason. Newspapers take multi-column formats to the extreme.

The problem and challenge for an HTML

 

author is that he or she does not know the page width or even the screen size of the computer being used to read the HTML.

The author does not even know the size of the fonts being used, although he or she might try to enforce a particular font selection.

e.g.I might design this section as

 

being in three columns which fit quite easily on a 1200x1000 screen while being too cramped on a 480x??? or smaller screen.

There are further problems: The author must divide the text into columns. If the page corresponds to more than one sheet of paper when printed, the author must also consider that complicating factor - with variable fonts etc.

Although the three columns in the table above were requested to be 30% of the page width each (where did the 10% go?) they almost certainly were not exactly equally wide on your browser. The <TABLE> is "smart", sometimes too smart, and tries to do a "nice" layout. On the other hand, if the column widths had been set to absolute pixel values the widths could not change with the browser window.

<MULTICOL>

There is a Netscape-ism for multiple columns, e.g. <MULTICOL COLS=3 GUTTER=30> ... </MULTICOL> is used for the following text:

Very long lines of text are considered to be hard to read while multiple columns and hence shorter lines are thought to be easier - within limits.

Many jounals and conference proceedings are printed in two column format for this reason. Newspapers take multi-column formats to the extreme.

The problem and challenge for an HTML author is that he or she does not know the page width or even the screen size of the computer being used to read the HTML.

The author does not even know the size of the fonts being used, although he or she might try to enforce a particular font selection.

e.g.I might design this section as being in three columns which fit quite easily on a 1200x1000 screen while being too cramped on a 480x??? or smaller screen.

Try resizing the window and watch the text above move around.


<FONT> Netscape-isms

Netscape introduced extra attributes to the <FONT> tag which are not standard HTML. Generally speaking such trickery should be avoided! One possible self-interest reason for avoiding it is that the extra <FONT> tags break up words in the HTML file and may cause `search engines' to ignore these broken words when they might have been valuable search terms.


Copyright © L. Allison, Department of Computer Science, Monash University, Australia 3168 / 1997