15. Preformatted Text

How do you

display       text 
where        space   and   carriage return
                       characters   count?

Objectives

After this lesson you will be able to:

Create a table of aligned text
Control the placement of text on a page when tabs and spaces are important.

Lesson

In previous lessons we have seen that a web browser will ignore extraneous space characters, tabs, and carriage returns. However, there are some instances where it will be important to maintain these aspects of page layout. In this lesson, the example will be where we want to insert a table of text with aligned columns.

The preformat tag instructs your web browser to display the text exactly as typed in the HTML document, including spaces, tabs, and carriage returns. A browser typically displays such text as a m o n o s p a c e d type. An example of the preformat tag:

<pre>
    We have indented with 5 space characters.
    And used the carriage return to jump
    to
    a
    new
    line.
    
          Here      we
          use       
          spaces    to
          create    a
          text      table.
   </pre>

Without the <pre> and </pre> tags, the same HTML produce:

We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table.

With the preformat tag, it helps if the text editor you are using can display in a mono-spaced font (such as "courier" or "monoco"); if not you will have to count spaces when aligning text into columns.

For our Volcano lesson, we want to add a table under the Introduction section that lists several well-known volcanoes, when they erupted, and the volume of erupted material. To do this:

Open the second HTML file, index.html in your text editor.
Under the last portion of the Introduction section, place a header of level 4 (<h4>) with the text Volumes of Some Well-Known Volcanic Eruptions (If you do not remember how to make headers, see lesson 3).
Below this heading, enter the following text:

<pre>
  Eruption                      Date           Volume in km^3
  --------                      ----           --------------
  Paricutin, Mexico             1943                 1.3
  Mt. Vesuvius, Italy          79 A.D.                3
  Mount St. Helen, Washington   1980                  4
  Krakatoa, Indonesia           1883                 18
  Long Valley, California     pre-historic        500 - 600
  Yellowstone, Wyoming        pre-historic           2400
</pre>

In this example we use space characters to make the first column left justified and the other 2 columns center-justified. The dashes are used to highlight the column headings.

Save and Reload in your web browser.

Check Your Work

Compare your web page with a sample of how this document should appear. If your web page was different than the sample, review the text you entered in the text editor. If the columns are not aligned, then it is likely that you are missing or have too many space characters.

Review

Review topics for this lesson:

How does the preformat tag change the way that a web browser interprets HTML?
In what other situations might you use this tag?

More Information

You can still use HTML tags inside text that is marked by the preformat tag. For example we can add a hypertext link and some style tags:

This tutorial is copyright 1999 by
    www.skynet.be
    Be sure to tell all of your friends about it!     
                We
                Welcome
                Your
                Feedback

Which is produced by the HTML:

<pre>
  This tutorial is copyright 1996 by
  <A HREF="http://www.skynet.be/">www.skynet.be</A>
  <B>Be sure to tell all of your friends about it!</B>     
             <i>   We
                Welcome
                Your
                Feedback</i>
</pre>

Note that the HTML tags do not count as spaces; they are ignored within the preformat region.

Independent Practice

Add a table or chart to your HTML document using the preformat tag.

Coming Next....

Use special character sets to add some

�cc��t

to your web pages.

Home	Next Lesson: Special Characters.