Paragraph Formatting

---

1. Introduction

Unlike word processing and desktop publishing, web pages can contain several types of paragraphs. These includes:

• normal (plain) paragraphs
• heading paragraphs
• preformatted paragraphs
• address paragraphs
• list item paragraphs

This page discusses these types of paragraphs, their characteristics, and other formatting options for these paragraphs.

2. Normal (i.e. Plain) Paragraphs

Paragraphs of plain text are created in Dreamweaver just like using a word processor. Position the cursor in the document and type. When you get to the end of a paragraph, press the Enter key and a new paragraph will be created. Try it! Create a new web page and type several paragraphs in the work area.

Some basic characteristics of web page paragraphs are ...

• single spaced - Design Note: Double or other line spacing is not used on web pages.
• block style - The first line of a paragraph is not indented, although there are ways to do this (discussed later).
• single blank line between paragraphs - Paragraphs are automatically separated by a blank line.

There are other types of paragraphs (discussed below). When these other types of paragraphs are used, to get back to a normal paragraph, select Paragraph from the Format popup menu in the Properties palette below the work area.

Some things that cannot be used in a normal paragraph are ...

• TAB's - The tab key will be ignored.
• Multiple spaces - Repeated typing of the space bar will be ignored. You can put only one space between any two characters.

Line Breaks: At any point in a paragraph, you can force a new line to begin. Visually, this has the effect of starting a new paragraph without the blank line. In Dreamweaver, a new line (aka: break) is inserted by typing SHIFT-ENTER. The primary purpose of this feature is to do something like the following, which is a single paragraph with a line break just after the words College and Avenue:

Blue Mountain Community College
2411 NW Carden Avenue
Pendleton, Oregon 97801

HTML

• Begin and end a normal paragraph: <p> ... </p>
• New line (aka: line break): <br>
  • Note that this is one of the few tags that does not have a corresponding ending tag

  The address for BMCC given above would be coded as ...

  <p>Blue Mountain Community College<br>2411 NW Carden Avenue<br>Pendleton Oregon 97801</p>

3. Heading Paragraphs

Pages usually have a main heading that identifies the page and other headings throughout the page that identifies sections of the page.

HTML includes a special type of paragraph called a "Heading Paragraph"

Format of a Heading Paragraph includes:

• boldface
• a blank "line" before and after
• six sizes

The following demonstrates the 6 heading sizes. The actual size that will be displayed in the browser is dependent on the browser's settings.

Heading 1	Heading 2	Heading 3
Heading 4	Heading 5	Heading 6

To make a heading paragraph in Dreamweaver, position the cursor in the paragraph and select Heading n in the Format popup menu in the Properties palette. The n is a number from 1 (largest heading) through 6 (smallest heading). A heading size of 4 is the same as normal paragraph text with boldface.

HTML

• largest heading: <h1> ... </h1>
• larger heading: <h2> ... </h2>
• large heading: <h3> ... </h3>
• small heading: <h4> ... </h4>
• smaller heading: <h5> ... </h5>
• smallest heading: <h6> ... </h6>

Try using some headings in your practice page and then view the HTML that is generated.

4. Preformatted Paragraphs

A limitation of normal and heading paragraphs is that you cannot use tabs (ignored) or multiple spaces (treated as a single space). Preformatted paragraphs have the following characteristics:

• all characters are significant, including ...
  • tabs (no control over the distance of a tab stop)
  • multiple spaces
  • new lines (ENTER key ... these paragraphs will not auto-wrap within the window, the user would have to manually scroll left-right)
• a mono-spaced font will be used

To create a preformatted paragraph in Dreamweaver, position the cursor in the paragraph and select Preformatted in the Format popup menu in the Properties palette. Try it!

HTML

• preformatted paragraph: <pre> ... </pre>

5. Address Paragraphs

This paragraph format is most often used at the bottom of a web page to identify the author, specify last modified information, copyright, and other various information. Address paragraphs have the following characteristics:

• the text will be displayed in italic
• ENTER key will generate new address paragraphs with no blank line between these paragraphs.

Since this type of paragraph is not used often and can be accomplished with other tags (i.e. bold and line bread), there is no command in Dreamweaver for this paragraph formatting option. Therefore, if you wish to use the address paragraph format, it must be done manually in the HTML code view.

HTML

• address paragraph: <address> ... </address>

Try using this format in your practice page. You will need to use either the code view or split screen view to change a pair of regular paragraph codes (<p> ... </p>) to address paragraph codes. This paragraph is using the address format.

6. Paragraph Alignment

All of the different types of paragraph formatting tags (normal paragraph, headings, preformatted, and address) include an optional alignment parameter.

The alignment parameter has four options:

• align="left" (this is the default ... hence unnecessary)
• align="center"
• align="right"
• align="justify"

In Dreamweaver, paragraph alignment is specified by using the alignment buttons in the Properties palette (the last four buttons in the first row of buttons).

HTML

• left aligned normal paragraph: <p> ... </p> or <p align="left"> ... </p>
• centered normal paragraph: <p align="center"> ... </p>
• right aligned normal paragraph: <p align="right"> ... </p>
• justified normal paragraph: <p align="justify"> ... </p>

7. Introduction to Lists

It is very common to include lists of things on web pages. HTML includes five different types of lists, but only three are in common use:

• unordered list (commonly called a bulleted list)
• ordered list (commonly called a numbered list)
• definition list (intended to be used as a list of terms and definitions)

NOTE: The other two types of lists are menu lists, and directory lists.

• The menu list was originally intended to be a single column list without bullets or numbers, but most browsers implemented the menu list just like an unordered (bulleted) list.
• Directory lists were originally intended to be implemented as multiple column lists, but this was never implemented by any browsers. Instead, the directory lists was implemented just like an unordered (bulleted) list.
• These two types of lists have been removed from the formal definition of HTML (although most browsers still implement them as unordered lists).

Unlike most other types of paragraphs (other than address paragraphs), the paragraphs that make up list items are not separated by blank lines. The visual separator for ...

• an unordered list is the bullet (hence its alternate name: bulleted list)
• an ordered list is a number (hence its alternate name: numbered list)
• a definition list is indenting

8. Unordered and Ordered Lists

Unordered (i.e. bulleted) and ordered (i.e. numbered) lists can be created from existing paragraphs (each paragraph becomes a list item) or one list item at a time. Once one of these lists have been created, more list items can be created by pressing the enter key at the end of any list item.

In Dreamweaver, to create a bulleted or numbered list from existing paragraphs ...

1. Select all of the paragraphs that are to be a part of the list.
2. Click on one of the list buttons in the Properties palette (near the end of the second row of buttons).

In Dreamweaver, to create a bulleted or numbered list one item at a time ...

1. Create a new paragraph for the first item (i.e. press the enter key).
2. Click on one of the list buttons in the Properties palette (near the end of the second row of buttons).
3. Type as many list items as needed, pressing the enter key after each item is typed.
4. After the last item, press the enter key twice.

Unordered lists can use three different symbols for the bullets, including ...

• a disk (i.e. solid circle, as seen on this line)
• a circle (i.e. open circle, as seen on this line)
• a square (i.e. solid square, as seen on this line)

To change the symbol used for an unordered list,

1. Position the cursor anywhere within the list. Do not select anything.
2. In the Properties palette, click on the List item... button.
3. Use the Style popup menu in the dialog box to specify the type of bullet to be used.
4. Click on the OK button.

Ordered lists can use five different numbering schemes, including ...

• Arabic numbers (1, 2, 3, 4, 5, ...)
• upper case Roman numerals (I, II, III, IV, V, ...)
• lower case Roman numerals (i, ii, iii, iv, v, ...)
• upper case letters (A, B, C, D, E, ...)
• lower case letters (a, b, c, d, e, ...)

Ordered lists can also starting numbering at any value.

To change the numbering scheme or beginning number for an ordered list,

1. Position the cursor anywhere within the list. Do not select anything.
2. In the Properties palette, click on the List Iterm... button.
3. Use the Style popup menu in the dialog box to specify the type of numbering to use.
4. Use the Start count text box to specify the beginning number. You must use a number here regardless of the number scheme that is being used. If the numbering is to begin with 1 (or: I, i, A, a), leave this text box empty.
5. Click on the OK button.

On your practice web page, try creating a bulleted list and a numbered lists. Also, experiment with the different list options given above. After creating the lists, go to the code view or split view to see the HTML that was created.

HTML

• Begin and end an unordered (bulleted) list: <ul> ... </ul>
• Begin and end an ordered (numbered) list: <ol> ... </ol>
• Begin and end a list item (for either list): <li> ... </li>

  NOTE: The list item tags must be contained within the list tags. For example ...

  <ul>
     <li>First list item paragraph.</li>
     <li>Second list item paragraph.</li>
     <li>Third list item paragraph.</li>
  </ul>

• Unordered list parameter used to specify the type of bullet for the entire list (placed in the <ul> tag) or for an individual list item (placed in the <li> tag):
  • a disk (i.e. solid circle): type="disk"
  • a circle (i.e. open circle): type="circle"
  • a square (i.e. solid square): type="square"
• Ordered list parameter used to specify the type of numbering scheme for the entire list (placed in the <ol> tag) or for an individual list item (placed in the <li> tag):
  • Arabic numbers: type="1"
  • upper case Roman numerals: type="I"
  • lower case Roman numerals: type="i"
  • upper case letters: type="A"
  • lower case letters: type="a"
• Ordered list parameter used to specify the beginning number of a list (placed in the <ol> tag):
  • start="x"
  • In the above syntax, the x must be a number (integer) greater than 1.

9. Definition Lists

Definition lists are not as common as bulleted or numbered lists. The purpose is to give a list of terms with corresponding definitions, although the term/definitions pairs do not have to be actual terms and definitions. A definition list is displayed in a browser as follows ...

first term

First definition paragraph.

second term

Second definition paragraph.

third term

Third definition paragraph.

Each "term" and "definition" can be a paragraph of any length.

To create a definition list in Dreamweaver ...

1. Press enter to create a new paragraph for the first term.
2. From the Text menu, select the List submenu, and then select Definition List.
3. Type the first term and then press enter.
4. Type the first definition paragraph and then press enter.
5. Repeat these last two steps for each of the other term/definition pairs.
6. Press the enter key twice after the last definition to end the list.

Try creating a definition list on your practice web page. When finished, go to the code or split view to see the HTML that is generated.

HTML

• Begin and end the definition list: <dl> ... </dl>
• Begin and end a term: <dt> ... </dt>
• Begin and end a definition paragraph: <dd> ... </dd>

  Example (the code for the example given at the beginning of this section):

  <dl>
     <dt>first term</dt>
     <dd>First definition paragraph.</dd>
     <dt>second term</dt>
     <dd>Second definition paragraph.</dd>
     <dt>third term</dt>
     <dd>Third definition paragraph.</dd>
  </dl>

10. Indented Paragraphs

Paragraphs may be indented (although you don't have any control over how far). When a paragraph is indented, both the left and right margins are moved in relative to the page's window. There may be several levels of indented paragraphs by repeating the command more than once.

In Dreamweaver, position the cursor in the paragraph and click on the Text Indent or Text Outdent buttons in the Properties palette. Try it!

HTML

• indent one or more paragraphs: <blockquote> ... </blockquote>

Nested Lists:

Lists can be nested inside each other (i.e. in the place of a list item, another list is created). Nested lists in Dreamweaver are created by using the text indent and text outdent buttons in the Properties palette. Try it!

Any type of list can be nested within any other type of list. If the nested list is a numbered list, it restarts its numbering at 1. When the outer list is resumed (click text outdent) the numbering of that list resumes from where it left off (if it is a numbered list).

11. Centering a Section (block of page elements) of a Web Page

Paragraphs can be centered using the align="center" parameter. If several paragraphs and other page elements are to be centered, you have the option of centering each paragraph individually or specify that an entire section of the page is to be centered. This type of "block" centering can be accomplished in HTML two ways.

• Use the division tag with an alignment parameter. Everything within this tag will be centered.

  <div align="center"> ... </div>

• Use the center tag. Everything within this tag will be centered. This method is considered the "old" way of centering a block of page elements. The division tag is now considered the preferred method.

  <center> ... </center>

In Dreamweaver, this type of block centering is implemented by selecting the block to be centered and then clicking on the Align Center button in the Properties palette. The type of centering that will be created is determined by Dreamweaver's preferences settings. The default is to use the division tag.

12. Separating Paragraphs

Paragraphs are naturally separated by blank lines, but horizontal lines are often used to separate sections of the web page. These horizontal lines are called rules.

In Dreamweaver, position the cursor where you want the horizontal rule and then click on the horizontal rule button on the common objects palette (above the work area).

The thickness, length, alignment, and style of the rule can be adjusted as follows:

1. Select the rule by clicking on it (notice that the Properties palette changes).
2. Use the options in the Properties palette to adjust its settings. Note that the rule's width can be specified in pixels or as a percentage of the window's width.
3. Click elsewhere on the page to deselect the rule.

Try these options on your practice page.

HTML

• Default rule: <hr>

Optional parameters include,

• thickness (height) in points (default is 3): size="#"
• width in points or percent (default is 100%): width="#"
• solid rule (default shading is embossed): noshade
• alignment (default is center):
  • align="left"
  • align="center"
  • align="right"

Where to go from here? After you complete and understand the topics covered on this page, continue with the next set of notes (Character Formatting ).