HTML: Preformat Tag

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2013 All Rights Reserved Total Application Works


    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Preformat.html">
    Preformat Tags </a>
    </table>
    </body>
    </html>




How to write a HTML Page with Preformat Tags

The purpose of this tutorial is to show you how to write a HTML page with preformat text. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. In the following example, we will show you the code for our page that lays out preformated text. Note: the preformat tag instructs the browser to layout the preformatted text exactly as typed. Consider the following example

<html>
<body>
First Name     Last Name    Address  City   State     Zip       Telephone  
William        Jones        123 Main St.    Spokane   99201     509-555-0998
James          Billingsley  786 Canyon Rd.  Apex      27523     919-555-4453
</body>
</html>
Figure 1: HTML Example of a page with preformat tag


If we use the paragraph and break tags in the Figure 1 example, the output will look like:

First Name Last Name Address City State Zip Telephone
William Jones 123 Main St. Spokane 99201 509-555-0998
James Billingsley 786 Canyon Rd. Apex 27523 919-555-4453 </pre>
Figure 2: HTML Example of a page with unformatted text


The question is, "How can I write the text and get the columns to line up? The answer is to use the preformat tag. The example looks like the following:

<html>
<body>
<p>This is the start of a paragraph.
<pre> <b>
First Name     Last Name    Address  City   State     Zip     Telephone 
William        Jones        123 Main St.    Spokane   99201   509-555-0998 
James          Billingsley  786 Canyon Rd.  Apex      27523   919-555-4535
</b> </pre>
</p>
</body>
</html>
Figure 3: HTML Example of a page with preformat tag


  1. <html> - indicates the beginning of the HTML page
  2. <body> - indicates the beginning of what will be displayed on the user's screen
  3. <p> - indicates the beginning of a paragraph
  4. <pre> - indicates the beginning of the preformatted text
  5. <b> - indicates the beginning of the text that will be displayed with a bold font
  6. </b> - indicates the end of the text that was marked as bold text
  7. </pre> - indicates the end of the preformatted text
  8. </p> - indicates the end of the paragraph
  9. </body> - indicates the end of what will be displayed on the user's screen
  10. </html> - indicates the end of the HTML page
The HTML in Figure 3 when displayed by your browser will look like:

This is the start of a paragraph.

 

First Name     Last Name    Address  City   State     Zip     Telephone 
William        Jones        123 Main St.    Spokane   99201   509-555-0998 
James          Billingsley  786 Canyon Rd.  Apex      27523   919-555-4535

 

Figure 4: HTML Example preformat tag


Anoother example is:
Example of a preformatted paragraph A preformatted paragraph displayed in your browser

Soul Mate

 
<p>This is the start of a paragraph. 
<pre> <b>
Our marriage is like a row boat at sea,
We can always see land which is our goal,
We both man the oars, ours is a shared task,
Sometimes she is the CEO, sometimes, I am,
Sometimes she makes the assist for my layup,
Sometimes I make the assist for her layup,
We both marvel and revel in each other's triumphs,
We are both uplifting and we do not bash the other,
I am not the good catch that she stuffs and mounts on the wall,
She is not my eye candy that I march around for status,
Our love and honor for each other is pure and boundless,
Our love is fueled by the trust and respect we have for each other,
Our friendship for each other is enriching and will never be betrayed,
The texture of our love is rich and fulfilling,
Once she beat away a mountain lion to save my life,
Once I punched and kicked a shark in the nose to save her life,
When one gets tired, the other mans both oars,
We row on towards our goals no matter how choppy the seas,
We do not micro-manage each other's day,
She does not view me as an ATM or a wallet,
I do not view her as my maid,
She is my soul mate, I am hers,
We are both in this together - to the end.


I. Asone </b> </pre>
</p>

Soul Mate

This is the start of a paragraph.

 
Our marriage is like a row boat at sea, 
We can always see land which is our goal,
We both man the oars, ours is a shared task,
Sometimes she is the CEO, sometimes, I am,
Sometimes she makes the assist for my layup,
Sometimes I make the assist for her layup,
We both marvel and revel in each other's triumphs,
We are both uplifting and we do not bash the other,
I am not the good catch that she stuffs and mounts on the wall,
She is not my eye candy that I march around for status,
Our love and honor for each other is pure and boundless,
Our love is fueled by the trust and respect we have for each other,
Our friendship for each other is enriching and will never be betrayed,
The texture of our love is rich and fulfilling,
Once she beat away a mountain lion to save my life,
Once I punched and kicked a shark in the nose to save her life,
When one gets tired, the other mans both oars,
We row on towards our goals no matter how choppy the seas,
We do not micro-manage each other's day,
She does not view me as an ATM or a wallet,
I do not view her as my maid,
She is my soul mate, I am hers,
We are both in this together - to the end.


I. Asone

Figure 5: HTML Example preformat tag


Feel free to copy and paste the code in the above Figures into a source file.










HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

. 2002 - 2013 All Rights Reserved Total Application Works