Formatting Paragraphs

Character formatting can pep up your prose, but FrontPage offers formatting control at an even higher level. Paragraph formatting expands your powers by letting you modify the way your text looks on an even broader scale.

A paragraph is just a collection of a bunch of characters, so what's the difference? Start at the basics. When you type a few words and press Enter, you create a paragraph. FrontPage's Design view indicates a paragraph break with a paragraph mark. (Click the Show All button on the Standard toolbar to reveal paragraph marks.) If you switch to Code view, you'll see that in the HTML, each paragraph is surrounded by a pair of <p> tags (the closing tag is a </p> tag). This means FrontPage applies certain formatting, like alignment, to entire paragraphs. Web designers often refer to this as block-level formatting. You've already learned how to apply other formatting, like italics or color, on a character level; that is, to a single character, word, or area of text. Paragraph formatting affects an entire block of texteverything between the <p> tags, for example.

FrontPage provides a variety of built-in paragraph styles such as headings and lists to help you organize your page. After you've applied one of these styles, you can format other attributes of any paragraph (like changing the alignment or the color), and you can also easily copy formatting from one paragraph to another.

    <p align="center">This is a centered paragraph.</p>

    Text can be <b>bold</b> or <i>italic</i> or plain.

2.4.1. Aligning and Spacing Paragraphs

FrontPage automatically sets text to align left (meaning that all lines sit flush against the left margin of the page). Inevitably, you'll want to use a different alignment for some paragraphs. Changing alignment to center, right-align, or justified (where the text aligns with both right and left margins) is very easy.

You can also set alignment using the Paragraph Properties dialog box (see Figure 2-8). To open it, select Format Paragraph.

This dialog box lets you change spacing between individual paragraphs. But, if you want to space out paragraphs throughout an entire page, skip this dialog box.

You'll save loads of time by using either tables (which you'll learn about in Tutorial 5) or Cascading Style Sheets (see Tutorial 7).

Figure 2-8. Not only can you set paragraph alignment within Paragraph Properties, but you can fine-tune indentation and spacing between paragraphs. Settings here display in pixels. However, you can type in other units of measure, such as inches (.5 in) or centimeters (8 cm).

2.4.2. Built-in Paragraph Styles

You can create an endless number of custom paragraph styles, which you'll read about in Tutorial 7. However, HTML contains some built-in styles, which appear on the FrontPage Style drop-down list for easy access (see Figure 2-9).

Figure 2-9. FrontPage features these basic built-in styles. A paragraph mark to the left of a style designates it as a paragraph-level style. An underlined "a" (like the one beside Default Character Style) denotes a character style.

2.4.2.1 Normal text

For the bulk of your page content, you'll use Normal style. When you start a new blank page, the text is always set to Normal style. FrontPage defines "Normal" as size 3 (12 pt), Times New Roman text. But you're not stuck with that look. You can customize the attributes of the Normal style to match your overall design, as you'll see when you come to learn more about applying styles to pages and entire sites.

2.4.2.2 Formatted text

The Formatted text option within the Style drop-down list is FrontPage's name for what traditional Web developers call preformatted text. (In fact, if you look at the HTML code, you'll see that its tag is <pre>).

Here's a style for folks who miss their old typewriter. Formatted text looks and acts just like the type that your old Underwood used to plunk out. For instance, when you use Formatted style, the browser is able to see space and tab characters, eliminating the need to insert nonbreaking spaces. But the typewriter nostalgia doesn't end there. Formatted text is also a monospaced font, meaning that each character takes up exactly the same amount of space. Because each character is the same width, you can use the Space bar and Tab key to create columns that line up with one anothersomething that's impossible with any other font. For these reasons, many people use formatted text to display tabular data when inserting an actual table would be unsuitable.

Tables, of course, are a much better solution when you've got tabular data, and it's unlikely you'll use this old-fangled text style on a regular basis. But if you do find a use for the Formatted style, keep in mind thatjust like on your grandfather's typewriterthe text doesn't wrap automatically. That means that unless you insert a paragraph or a line break, Formatted text will extend out and disappear beyond the browser window.

2.4.2.3 Address

Select Address style when you want to compress and italicize lines of text. Use this style for virtual or physical addresses and contact information.

2.4.2.4 HTML headings

Most of the text you read, whether it's in your newspaper, a corporate report, or even in this book, is organized and grouped beneath headings. HTML comes with a collection of six built-in heading styles, numbered from largest (Heading 1) to smallest (Heading 6). Figure 2-10 shows you what they look like.

If an author wants to create headings in a program like Microsoft Word, she might specify 16-point bold Arial font for one heading and 14-point Times New Roman for a subheading. In the early days of the Internet, you never knew what fonts a viewer had, so using fonts in this manner to organize a page was impossible. So how did our Web ancestors structure a page clearly? They used HTML headings as a workaround.

Figure 2-10. The six HTML headings display in bold and are usually used as headlines. Headings decrease in size as the heading numbers get larger. Heading 6 is especially small, which makes it handy for copyright notices.

HTML headings provide basic structural guidelines to the browser without actually specifying a particular size. In other words, browsers understand certain rules, like Heading 1 is the largest, but it's up to the browser (or the person who's tweaking the browser's preferences) to decide what font to use when displaying a heading.

In spite of the explosion of sophisticated graphics on the Web, headings can still help you outline a page. They're very effective tools that designers often use to apply styles across a Web site. As you'll see in Tutorial 7, Cascading Style Sheets, which can set formatting and display attributes for multiple pages, use headings to apply formatting to different paragraphs. For instance, a style sheet might specify that all of a site's Heading 2 paragraphs be bold, blue, and use Arial font.

Even if you're not that ambitious and just plan to use FrontPage's prepackaged graphic themes and Web site templates, you'll still see these headings throughout your pages, so you should know what they are and how to apply them.

You apply a heading style to a paragraph just as you would any other style.

2.4.3. Copy Formatting from One Paragraph to Another

Suppose you spent a lot of time formatting a paragraph to look just the way you want, but there are a ton of other paragraphs on the page that should match it. Don't worryyou don't have to do all that work over again for every paragraph. Copying paragraph formatting is fast and easy. The Format Painter on the toolbar makes it a breeze.

To copy formatting from one block of text to another:

2.4.4. Removing Paragraph Formatting

If you want to strip a paragraph of all formatting, click to place your cursor in the paragraph and select Format Remove Formatting or press Ctrl+Shift+Z.