9. Preformatted Text

How do you

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

In previous lessons we have seen that a web browser will ignore extraneous 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 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, meaning a font in which every character has the same width. Here is example of what the preformat does:


   <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 monospaced font (such as "Courier" or "Monaco"); if not, you will have to count spaces when aligning text into columns (and you will mutter bad words under your breath).

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 that are within the <pre>...</pre> tags:

HTML Result

<pre>
This tutorial is copyright 
1995, 1996
    
    <B>Be sure to tell all of 
    your friends about it!</B>     
             <i>We
                  Welcome
                    Your
                      Feedback</i>
fondly,
<A HREF=
"http://www.mcli.dist.maricopa.edu/">
mcli</A> 
</pre>

	This tutorial is copyright 
	1995, 1996
	    
	    Be sure to tell all of 
	    your friends about it!     
	                We
	                  Welcome
	                    Your
	                      Feedback
	fondly,
	mcli

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

Some web page developers will use the <pre>...</pre> tags with carriage returns in between to add white space between text or graphics in their web pages -- especially if they wish more white space than provided by the <p> tag. For example:

HTML Result

Cheese was long since 
abolished from the Orient.
<pre>



</pre>
...until Sir Longhorn arrived with the 
great Cheese Crusade of 1167.

Cheese was long since abolished from the Orient.

...until Sir Longhorn arrived with the great Cheese Crusade of 1167.

Use special character sets to add some âccèñt to your web pages.

previous: "HyperGraphics" | next: "Special Characters" |