p04.html

	Previous Contents Next
4. Basic Paragraph Structures

You should have notice in the previous example that the browser did not display the line or paragraph breaks as they were entered in the text editor. This is because there were no HTML commands to instruct your browser to do so. Remember, any and all formatting that you want done must be done through use of appropriate HTML tags. The following sections describe some of the basic tags that are used to dress up the presentation of text on a Web page.

The (Paragraph) Tag

The way to break text into paragraphs is by using the paragraph tag. Place a paragraph start tag at the beginning of a new paragraph and the browser will know to insert a blank line before the first line of text. Adding a paragraph end tag is optional as it is normally implied by the next open tag that comes along. Note that adding multiple tags will not cause multiple blank lines to appear. Any and all such consecutive tags are treated as a single paragraph break.

You can edit your previous HTML document to insert paragraph breaks:

<HTML>

<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>

<BODY>
All HTML documents have a simple, common structure
composed of an HTML section, a head section, and a
body section. The head section contains the title of
the document; the body section contains the text and
page markup codes.
 <== add this
Most HTML coding appears in the body section of the
document.
</BODY>

</HTML>

Now, resave your file and open it again in your browser. There is a break between the first and second paragraphs.

The (Break) Tag

Unless otherwise indicated, text in a paragraph flows across the page and is word wrapped within the width of the browser window. If you resize your browser window, the text will re-wrap accordingly. There may be occasions, however, when a single line should be forced to end at a certain point and a new line begun; for example, when displaying lines of poetry or a listing of some sort.

A line is ended with the line break tag . This tag forces the browser to start a new line, regardless of the position in the current line. Unlike the paragraph element, the line break does not double-space the text. For example, the following markup,

<BODY>
Mary had a little lamb 
Its fleece was white as snow 
And everywhere that Mary went 
The lamb was sure to go. 
</BODY>

is rendered in the browser as:

Mary had a little lamb
Its fleece was white as snow
And everywhere that Mary went
The lamb was sure to go.

The line break is an example of an empty tag (as opposed to container tag) because the line break element does not have an end tag enclosing text elements.

The ALIGN Attribute

Some tags have special attributes, or parameters, associated with them to provide further control over formatting. Paragraphs, for example, can be aligned to the left or right of the page or can be centered by using the ALIGN attribute in the paragraph tag. Its general format is

where you enter LEFT, CENTER, or RIGHT as the ALIGN parameter value. For example, the specifications:

This paragraph is aligned LEFT.
This paragraph is aligned CENTER.
This paragraph is aligned RIGHT.

are render in the browser as:

This paragraph is aligned LEFT.

This paragraph is aligned CENTER.

This paragraph is aligned RIGHT.

The default value for paragraph alignment is on the left. The alignment remains in effect until the next paragraph marker is encountered. As you will learn later, the ALIGN attribute can be used for other alignment purposes besides paragraphs.

The <CENTER> Tag

If you have several consecutive paragraphs that need to be centered--or you wish to center the text for an entire page--you can surround the text with the <CENTER> and </CENTER> tags rather than aligning each paragraph individually. The code:

<CENTER>
This paragraph will be centered.
So will this one.
As will this one.
</CENTER>

comes out looking like:

This paragraph will be centered.

So will this one.

As will this one.

The <BLOCKQUOTE> Tag

The <BLOCKQUOTE> tag is used to indent text from the left margin, setting it off from the surrounding paragraphs. Automatic paragraph breaks appear before and after the block quote. This container can contain any of the other formatting or break tags. As a container tag, it is turned off by using the </BLOCKQUOTE> tag.

The markup language:

Previous paragraph...
<BLOCKQUOTE>
HTML documents are plain-text, ASCII documents. As such, they can be
written with a text editor, a word processor, or by specialized HTML
editors that assist the author in composing and editing documents.
</BLOCKQUOTE>
Next paragraph...

is rendered in the browser as:

Previous paragraph...

HTML documents are plain-text, ASCII documents. As such, they can be written with a text editor, a word processor, or by specialized HTML edtors that assist the author in composing and editing documents.

Next paragraph...

The <PRE> (Preformatted) Tag

Preformatted text specified by the <PRE> and </PRE> tags is rendered using a fixed-width, monospaced font (unlike the proportional font normally used to display text). Plus, it recognizes space characters, line feeds, tabs, and carriage returns. Text appears exactly as typed. This feature enables creation of items such as tables, columns of text, and blocks of computer code. The specifications:

<PRE>
Table 1. Hexadecimal Colors

   COLOR      HEX
+--------+-----------+
| RED    |  #FF0000  |
+--------+-----------+
| GREEN  |  #00FF00  |
+--------+-----------+
| BLUE   |  #0000FF  |
+--------------------+
</PRE>

are rendered exactly as typed. Note that the <PRE> tag causes an automatic paragraph break before and after the enclosed text.

The drawback to using this tag is that the text is displayed in a rather uninteresting monospaced font. However, in later sections we will cover other techniques for creating table-like structures that give you full control over appearance while using the standard browser font.

The <ADDRESS> Tag

One of the most important parts of web documents is the address section. This is where you identify yourself as the author of the document, indicate any copyrighted material used, and let people now how to get in touch with you. The address section is normally placed at the beginning or end of a document and is identified by the <ADDRESS> tag. This tag is usually rendered in italics by the browser. Thus, the code:

<ADDRESS>
This page was designed by YourName 
Contact at your_name@where.what 
</ADDRESS>

is displayed as

This page was designed by YourName
Contact at your_name@where.what

You'll learn later how to assign a link to your address so that people who don't even know you can hassle you through the convenience of e-mail.

Multicolumns (Navigator 3.0 only)

If you are using Netscape Navigator 3.0 then you can view text arranged in columns. The <MULTICOL> container tag encloses the text to be placed in columns and the COLS, GUTTER, and WIDTH attributes control the number of columns, the amount of space between columns, and the width of the columns, respectively. You can see the effect in the following layout:

Using Multicolumn Layout

<MULTICOL> - This tag begins the columnar definitions. All lines of text between this tag and the closing </MULTICOL> tag are placed in columns. The browser attempts to balance the amount of text in the columns to make them the same lengths.

COLS - This attribute is required in the <MULTICOL> tag. It controls the number of columns into which the text is split.

GUTTER - This attribute control the amount of space between columns. The default is 10 pixels.

WIDTH - This attribute controls the width of individual columns. If not specified, column width is adjusted to fit within the width of the browser window. All columns are the same width.

In this example the specification is

The WIDTH attribute is not used so that the layout will span the width of the browser window.

The <SPACER> Tag

Also recognized by Navigator 3.0 is the <SPACER> tag. This tag inserts a block of white space in the document, thereby permiting you to have greater control over the vertical and horizontal space that appears between words and lines on a page. One of the uses of this tag, for example, is for paragraph indents. Notice the effect in this paragraph.

The <SPACER> tag has the attributes:

TYPE=HORIZONTAL|VERTICAL|BLOCK
SIZE=pixels
WIDTH=pixels
HEIGHT=pixels
ALIGN

Horizontal Space

The paragraph indents used here are created with the specification:

This tag is placed at the beginning of a paragraph to insert a 20-pixel-width block of horizontal white space simulating a paragraph indent.

The tag can be used anywhere in a line of text.For instance, a horizontal space of 30 pixels has been inserted between these two sentences.

Vertical Space

You can use the TYPE=VERTICAL attribute to control the amount of space between lines in a block of text.

The space inserted between these lines, for example, is set by the specification:

inserted between each of the lines.

You cannot use the vertical spacer, though, to set line spacing for an entire paragraph. It only controls the amount of space between individual lines or between paragraphs, working in conjunction with or instead of the or tags.

Block Space

By using TYPE=BLOCK along with WIDTH, HEIGHT, and ALIGN attributes, you can insert a large block of white space around which text will wrap. The space to the left around which this paragraph flows was created with the specification

You may need to tinker with the width and height settings to get the exact look you want.

In fact, if you are using the <SPACER> tag within a multicolumn format, you may need to adjust horizontal and vertical spacing several times to get the appearance you want. The browser does its best to balance the amount of text in columns; but sometimes you may need to add artificial space so that you do not end up with orphaned headings or lines at the bottom or top of columns.

Galloping right along... This section has covered most of the standard markup tags for typing and aligning paragraphs; others will be introduced later. However, these are the most-often used paragraph tags and parameters and will get you started in adding some variety to your presentations.

Previous Contents Next

The <P> (Paragraph) Tag