Preformatted Text

   display text 
where          space and return
                       characters count?

Objectives

• 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 WWW browser will ignore extraneous space characters and carriage returns. However, there are some instances where it will be important to control these aspects of the 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 WWW broder to display the text exactly as written in the HTML document, including spaces, and carriage returns. A browser typically displays such text as a monospaced 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>

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.

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:

1. Open the second HTML file, Volc.html in your text editor.
2. 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).
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>
   

   NOTE: 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.

4. Save and Reload the HTML file.

Check Your Work

Review

1. How does the preformt tag change the way that the World Wide Web interprets HTML?
2. What other situations might you use this tag?

More Information

Independent Practice

Coming Next....

âccèñt

| Lesson Index | previous lesson "HyperGraphics" | next lesson "Special Characters" |