9. Preformatted Text

How do you

      display  
          text 
       where        space, 		TABS   and   carriage return
                  characters     count?

In previous lessons you will have seen that a web browser ignores extra space characters, tabs, and carriage returns in your HTML files. However, there are some instances where it will be important to maintain these aspects of your page layout. Now we are going to learn how to do just that, the example will be where we want to insert a table of text with aligned into columns.

The preformat tag instructs your web browser to display the text exactly as typed in the HTML document, including all spaces, tabs, and carriage returns. A browser typically displays such text as a

m o n o s p a c e d

type, meaning a font in which every character has the same width. Here is example of what the pre format does:

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.

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 pre format tag, it helps if the text editor you are using can display in a mono spaced font (such as "Courier" or "Monaco"); if it doesn't then, you will have to count the spaces and tab when aligning text into columns (and you will mutter bad words under your breath when its wrong).

For our Eazy Space Tours lesson, we want to add a table above the seismograph image in the issapissin.htm that lists several well-known volcanic eruptions, when they occurred, and the volume of erupted material. To do this:

1. Open the issapissin.htm HTML file, in your text editor
2. Above the image portion of the issapissin.htm, place a header of level 4 (<h4>) with the text: Volumes of Some Well-Known Volcanic Eruptions of Venus (If you do not remember how to make headers, see lesson 3).
3. Below this heading, enter the following text exactly as follows (this would by a really good time to copy and paste from this web page!):

   <pre>
     Eruption                       Date           Volume in km^3
     --------                       ----           --------------
     Mt. Issapissin                 2004           1.3
     Mt. Fritchyon                  79 A.D.        3
     Mt. Fritchyon                  1980           4
     Mt. Nimucissa                  pre-historic   500 - 600
     Yellowstone, Wyoming (earth)   pre-historic   2400
   </pre>
   

   In this example we use space characters to make all three columns left justified

4. Save and Reload in your web browser.

MORE INFORMATION

You can still use HTML tags inside text that is marked by the pre format tag. For example you can add a hypertext link and some style tags that are within the <pre>...</pre> tags:

HTML Code	Page Result
<pre> This tutorial is copyright ©2004 EzyHTML.com <b>Be sure to tell all of your friends about it!</b> <i>I Welcome Your Feedback</i> sincerely, <a href= "http://www.eazyhtml.com/ contactus.php/" target="_blank"> EazyHTML</a> </pre>	This tutorial is copyright ©2004 EzyHTML.com Be sure to tell all of your friends about it! I Welcome Your Feedback sincerely, EazyHTML

Note that the HTML tags don't count as spaces; they have been ignored within the pre format region.

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look. If your page looks different than the example, review the text you entered in the text editor or update your content. Make sure it matches the text instructions in the 9. Preformatted Text section of this lesson. After viewing the sample, you can close the window that opened.

Practice
Add a table or chart to your HTML document using the pre format tag.

Top of page | Previous Lesson| Lessons Index | Next Lesson