Maddog's HTML for Real People Chapter 4, Lesson 6


[INDEX] Ch 4, L 6 - Pre-Formatted Text

If you already know how to turn "pre-formatted" text mode on and off in HTML, and when and why to use it, you can skip this lesson.

One of the features of HTML I find most useful is implemented using the 'PREformatted text' tag pair. Sometimes (heck, often), you want to include text in your web page, that already exists in a separate text file. Along with the text itself, you want to maintain the layout of the text, including all the line breaks and spaces and tabs (careful, now! what's a tab?).

As you no doubt recall, however, the receiving browser ignores whitespace in the HTML file, inserting a maximum of one "space" for each series of whitespace. Carriage returns (end-of-line actions) are also ignored, since they are treated much like whitespace. If this were not true, we wouldn't need the '<BR>' tag or the '&nbsp;' special character. That's where the 'PREformatted text' tag pair comes in; it basicly says to the browser "hey! we're gonna take care of whitespace and line-breaks now, so STOP ignoring them"

The 'PREformatted text' tag pair allows us to insert the text without having to manually insert a '<BR>' tag at the end of each line, and without having to inserts zillions of '&nbsp;'s to get indentation, etc. The tag pair for PREformatted text is:

<PRE></PRE>

Let's see how this might be applied:

HTML Source Code Follows:


Here's a dashingly impressive poem:
<PRE>
There once was a weirdo named 'Maddog'
who couldn't keep gas in his roadhog;
      when he started to pass,
      he ran out of gas
and went the rest of the way using egg nog.
</PRE>
and here's the classic "Hello World" 'C++' program"
<PRE>
// copyright 1997 (just kidding...)
#include &lt;iostream.h&gt;

main( )
{
    cout << "Hello World" << endl;
}
</PRE>
(End of HTML Source Code)

Demonstration Follows:

Here's a dashingly impressive poem:

There once was a weirdo named 'Maddog'
who couldn't keep gas in his roadhog;
      when he started to pass,
      he ran out of gas
and went the rest of the way using egg nog.
and here's the classic "Hello World" 'C++' program"
// copyright 1997 (just kidding...)
#include <iostream.h>

main( )
{
    cout << "Hello World" << endl;
}

(Demonstration Ends)

There are several important things to notice here. First, fixed-spaced fonts are used inside the 'PREformat' tags. Secondly, the <PRE> opening tag causes an automatic double end-of-line action (like a paragraph, and the </PRE> closing tag does the same, thereby automatically setting-off the pre-formatted text. Last, but most certainly not least, no explicit line-breaks or non-breaking space characters were required to get the layout we intended.

While some consider the fixed-font to be a little harsh on the eyes, it is still quite readable, and the ease of entering text inside the <PRE></PRE> tag pair offsets any minor aesthetic concerns.


-PREVIOUS- -CHAPTER- -INDEX- -NEXT-

Overseer: Monty Northrup ... maddog@io.com ... leave e-mail ...
...to maddog 'n' miracles homepage...