Font & Paragraph Formatting

This page demonstrates Font and Paragraph Formatting in FrontPage 2000.

It may seem that this page is long and complicated, but when you bear in mind that this is ALL of the formatting that you get in HTML, it's worth studying what's available.

The only formatting elements not demonstrated on this page are Themes, Images and Backgrounds (and other page properties). In addition, advanced items like forms, style sheets (and some style sheet effects like Position or Borders and Shading), Dynamic HTML effects, and scripts can affect formatting but are beyond the scope of this document.

Table of Contents

Entering Text
Comments
Marquees
Headings
Alignment
Bold, Italics, Underlining and Strikethrough
Text Color
Fonts
Font Sizes
Superscript and Subscript
Special Styles
Character Spacing
Typewriter Font
Lists
Other Paragraph Styles: Address & Formatted
Horizontal Rules
Paragraph Spacing & Indenting
Tables

Entering Text

Enter text as you would with a word processor.  Pressing Enter starts a new paragraph (see below). Normally, you'll let the automatic word wrap take care of the end of each line. The arrow keys and standard movement keys can help.  Keep in mind these keyboard shortcuts:

Comments

Comments are notes you make to yourself about the page. They do not appear when the page is viewed in a browser. FrontPage displays comments in purple. FrontPage will print your comments if you print the page. To insert a comment, use the Insert | Comment command.

Comments do not affect spacing on a page.

Note: Anyone in the world can see a comment by viewing the page's HTML source code, so don't put anything confidential there.

Marquees

A marquee is a scrolling region available with the Insert | Component | Marquee command. The result works only in Internet Explorer.

This page demonstrates some character styles (this is a marquee that is only visible in Internet Explorer)

Headings

Headings are used to create an outline for your document. They automatically set text in the standard "Heading" style. Use the Style box on the Formatting toolbar, or use keyboard shortcuts (Alt+Ctrl+1 through Alt+Ctrl+6).

This is a Heading 1 style paragraph

This is a Heading 2 style paragraph

This is a Heading 3 style paragraph

This is a Heading 4 style paragraph

This is a Heading 5 style paragraph

This is a Heading 6 style paragraph

Note how small the last two styles are. Don't use headings gratuitously, and it's not good style to use them out of order (for example, using a heading four and then a heading two and then a heading six).

Alignment

This is a Normal paragraph.

This is a Normal paragraph with center alignment.

This is a Normal paragraph that is right-aligned.

This normal (left-aligned) paragraph has regular left-aligned word wrapping, so that the right edge of the paragraph is ragged; if you have a paragraph that includes very long words, it makes it obvious that the right edge is ostentatiously-devoid-of-justified-word-wrapping, which can make a paragraph a somewhat-more-difficult-to-read thing--reader-depending, of course.

This normal (justified, not left-aligned) paragraph has "Justify" word wrapping, so that the right edge of the paragraph is always even; if you have a paragraph that includes very long words, it makes it obvious that the right edge is ostentatiously-stretched-to-enable-justified-word-wrapping, which can make a paragraph a somewhat-more-difficult-to-read thing--reader-depending, of course.

Use the three alignment buttons on the Formatting toolbar, or use the Ctrl+L, Ctrl+E and Ctrl+R keyboard shortcuts, or use the Format | Paragraph command (the last method is the only way to choose Justify). Only entire paragraphs can be aligned.

Bold, Italics, Underlining

This Normal paragraph has italics (also known as the "em" style, for "emphasis"), bold (also known as the "strong" style), and bold italic text. Underlining is also available. Use Ctrl+B for Bold, Ctrl+I for Italics, Ctrl+U for Underline; or, use the appropriate buttons on the Formatting toolbar. The Format | Font command has the Font Style section, as well as some font variations.

Note: Underlining is easily confused with links, so it's best avoided.

Text Color

You don't have to have black text -- almost any color text is available. White (white), "red", green ("lime"), "blue", "yellow", magenta ("fuchsia"), cyan ("aqua"), "green" (technically it's closer to forest green), "purple", "gray", "maroon", "olive", "navy", "silver", "teal" and any custom color you want.  Use the Font Color button on the Formatting toolbar, or use the Format | Font command.

Fonts

The Normal paragraph is normally displayed in Times New Roman (depending on the remote system), but you can choose different fonts. Be careful, however, since you cannot guarantee what fonts are on the viewer's system. Arial is a safe bet (it's also known as Helvetica or Universe). Garamond (alias Palatino) looks nice, but you can't guarantee that it's there. Courier is also available. Use the Format | Font command or the Font pulldown menu on the Formatting toolbar (Ctrl+Shift+F).

Note: You can specify more than one font if you edit the HTML or type in a strong of comma-separated fonts in the Font dialog box; for example, you may end up with a tag like <FONT FACE="Verdana,Helvetica,Arial,Universe">

Font Sizes

On the Web, you don't specify point size. There are seven sizes: biggest (7), bigger (6), big (5), bigger than normal (4), normal (3), small (2), smallest (1).

Tip: Don't use the heading styles we saw earlier for character size unless your text is actually some kind of heading. Again, use the Format | Font command for font sizes, or the Font Size pulldown menu on the Formatting toolbar (Ctrl+Shift+P).

Superscript and Subscript

You can use Superscript (for example, the "2" in E=MC²) and Subscript (e.g., H₂O). Use the Format | Font command and choose Superscript or Subscript after selecting the text you want changed.

Special Styles and Effects

There is a certain special font effect shown in this otherwise normal paragraph. (Perhaps this sentence should be removed.) The Strikethrough effect is for indicating a section that should be removed. Use the Format | Font command and then choose Strikethrough for your selected text.

The Blink (<BLINK>) appearance is for attracting attention. It is a notoriously hated style. Not all browsers support blinking; only Netscape does (and we wish it didn't, right?).

Similarly, the Emphasis appearance is only technically different from the regular Italic command -- it uses the <EM> HTML tag instead of the <I> HTML tag, but again browsers treat them identically.

FrontPage 2000 introduces support for some special styled text (using an advanced feature called Cascading Style Sheets). These styles are not supported in older browsers, such as Internet Explorer 3.0 and earlier as well as Netscape Navigator 3.0 and earlier. Here are the new special styles, each of which is selected from the Format | Font command's list of special effects:

1. Overline text (text with a line over it)
2. Small Caps (Text With A Special Mix of Font Sizes for Capital and Lowercase Letters)
3. ALL CAPS text (every letter in uppercase)
4. All Caps (every first letter is capitalized automatically even when not typed that way)
5. Hidden Text (text that doesn't appear in the browser)

In addition to the above effects, there are some other special HTML tags supported by FrontPage. The important thing to remember about these HTML tags is that they are "logical tags," not "presentation tags." Therefore, they can appear differently in a different browser.

1. Sample style (<SAMP>) is for computer code output samples (that is, computer code, for example if you were documenting the display of a particular computer program). It is often rendered in Typewriter style.
2. Definition style (<DFN>) is for defining terms. It is often rendered in italics.
3. Citation style (<CITE>) is for citing an author or source, especially book titles. It is often rendered in italics.
4. Variable style (<VAR>) is for displaying "variables" in computer code, that is, text that users should enter or that varies from example to example. It is often rendered in italics.
5. Code style is for displaying computer code listings. It is often rendered in Typewriter style.
6. Keyboard style (<KBD>) is for indicating text or keys that a user should type. It is often rendered in Typewriter style.

Note: To remove all of the formatting (bold, font, color, special styles, etc.), highlight the text and use the Format | Remove Formatting command (Ctrl+Shift+Z).

Character Spacing

The Format | Font command has a new tab in FrontPage 2000 that allows you to use Cascading Style Sheet effects for making text appear wider or more condensed.

For example, this paragraph is expanded by 3 pts.

For example, this paragraph is expanded by 2 pts.

For example, this paragraph is expanded by 1 pt.

For example, this paragraph is condensed by 1 pt.

For example, this paragraph is widened by 2 pts.

For example, this paragraph is widened by 3 pts.

Typewriter Font

As of FrontPage 2000, the Typewriter style ("<TT>") is not directly supported, although it shows the results properly in the editor. If you wish, you can use the HTML tab and then add the <TT> and </TT> tags directly to your document (around whatever text you want in typewriter mode). The result is demonstrated in the next paragraph. You can't use the Format | Font command to do this effect.

This is Typewriter style -- and did you know that most typewriters use the Courier font? The default font for Typewriter should be Courier, but that depends on the viewer's browser and computer system. Any mono-spaced font could be used.

In Typewriter mode, everything lines up:

12345678 llllllll The quick brown fox

12345678 wwwwwwww The quick brown fox

In Normal mode, the default font, Times New Roman, is "proportional" (as opposed to Courier, which is "fixed-width" or "mono-spaced"). So things don't line up:

12345678 llllllll The quick brown fox

12345678 wwwwwwww The quick brown fox

Lists

A couple of sections above, you saw a numbered list to display the different special styles. There are several types of lists you can use; these are accessible in FrontPage by using the buttons or Style choices on the Formatting toolbar. Or, to have the most choices, use the Format | Bullets and Numbering command.

Numbered Lists

1. Numbered lists
2. These are fairly straightforward.
3. These four numbered items are in the "Numbered List" paragraph style. Note that all lists automatically indent second lines so that they line up with the first line, after the number or bullet.
4. Numbered lists are also called "ordered lists." (The HTML tag is <OL>.)

Numbered Lists (Alternate 2)

1. You don't have to use Arabic numerals.
2. Roman Numerals add a touch of class.

Numbered Lists (Alternate 3)

1. You don't even have to use Arabic or Roman numerals.
2. Lettered lists add a breath of fresh air.

Numbered Lists (Alternate 4)

1. You don't have to use upper-case letters.
2. Lower-case letters are certainly different.

Numbered Lists (Alternate 5)

1. You don't have to use upper-case Roman numerals.
2. Lower-case Roman numerals are a touch gothic.

Numbered Lists (Alternate 6)

33. In any system, you don't have to start at 1. You can begin at any number.
34. Front Page goes to the next number automatically.
35. See?
36. Use the "Start at" option in the Bullets and Numbering dialog box.

Numbered Lists (Embedded)

1. You can create outlines using Embedded lists.
   1. For example, there are four major versions of FrontPage.
      1. FrontPage 1.1
      2. FrontPage 97
      3. FrontPage 98
      4. FrontPage 2000
   2. Also, there are many versions of Netscape.
2. See below for instructions on Embedded lists.

Bulleted Lists

• Bulleted lists.
• These are also fairly simple.
• These bulleted items are in the "Bulleted List" paragraph style.
• Bulleted lists are also called "unordered lists" (the tag is <UL>).
• FrontPage uses the term "Plain Bullets."

Bulleted Lists (Alternate 2)

• You can use alternate Plain Bullet styles
• But a bulleted list is still a bulleted list
• Be careful that you check your work -- browsers display bullets differently, and there are big differences between a Mac bullet and a PC bullet

Bulleted Lists (Alternate 3)

• This square bullet adds a lot, don't you think?
• Or perhaps not.

Bulleted Lists (Embedded)

• Perhaps you wish to have a sublist.
• You can have several subpoints under a main point.
  • This is a sub-point, part of a second bulleted list.
  • This type of list is called an Embedded List since the second list is embedded entirely within the first.
    • This is a third bulleted list, completely embedded within the second list.
    • It has two subpoints, both with the square bullet style (on most browsers).
• Sublists can be useful for outlines.
  • To create a sublist, use the Indent button twice.
  • The Indent button is one of the last buttons on the Formatting toolbar.
  • The first time will remove the bullet, the second time will embed the list as a sub-point, like this one.
  • Or this one.
• There are two ways to end an embedded list.
  • Use the Un-indent button twice to return to the parent list.
  • Or, press ENTER three times.
• To end the parent list (or any normal list), just press ENTER twice.

Definition Lists

Definition Lists

A definition list gives some terms and their definitions.

This is a term.

This is the definition.

Multiple Uses

You don't have to use them for terms and definitions. Definition Lists are a useful formatting technique.

Example

Examples are always useful. You can use whatever formatting you like for definitions. The term "Example" is italicized just for emphasis.

HTML

"Hypertext Markup Language" -- the language that web pages are written in. FrontPage handles writing HTML for you.

HTTP

"Hypertext Transfer Protocol" -- the protocol, or method, that web browsers use to transfer pages from the World Wide Web to your computer.

 

Compact Definition Lists

Definition List (Compact)

There is no current difference between a compact definition list and a regular definition list. But it's an option.

Directory Lists

• Directory Lists
• Directory lists were supposed to be able to list files and folders.
• However, they are no different from bulleted lists.

Menu Lists

• Menu Lists
• Menu lists were supposed to list things in an ordered fashion.
• However, they are no different from bulleted lists.

Picture Lists

Other Paragraph Styles: Address & Formatted

There are several other Paragraph Styles available from the style box on Formatting toolbar (Ctrl+Shift+S).

Formatted Style (also know as "PRE" for Pre-Formatted style) is a way to get things to be exact. Words don't wrap automatically.

                     Formatted Style
                     ===============

          It is the only style that allows you to use more than one space
          between words and sentences.


    /------------------------*  !  *----------------------\
    |                                                     |
    |   You can draw oddball things in Formatted style.   |
    |                                                     |
    \-----------------------------------------------------/  

Formatted style is rendered by the browser in the same font as Typewriter style.

Horizontal Rules

Horizontal Rules are horizontal lines, used to break up pages and for decoration.

A normal, default horizontal rule is two pixels high, 100% of the screen, shaded, and black.

You can make horizontal rules that are a little thicker. This one is five pixels tall:

You can make horizontal rules that are not shaded. This unshaded rule is also five pixels tall:

You can make horizontal rules have any color you want (although Netscape Navigator 3.0 will only show them in black):

You can make horizontal rules less than the entire width of the screen (such as 50% width):

They can also be left-aligned or right-aligned:

You can combine several attributes. This line is 10 pixels thick, right-aligned, 350 pixels wide, and green:

You can make a tall line, but it's a little pointless since you can't have text next to it:

The above line is 1 pixel wide and 60 pixels tall.

To change the format of your horizontal rule, double-click on it. FrontPage will display a dialog box that lets you edit the options. The next horizontal rule you insert will have the same properties as the previous one.

Paragraph Spacing & Indenting

Normal HTML (as viewed in older browsers) is fairly limited. You can't change the line spacing within a paragraph. There is no good "Tab" character to indent the first line, and there are only two types of carriage returns -- a full paragraph break (with a blank line), or a single line break. In sum, traditional HTML has only limited options for a paragraph.

When creating a list of information, try using a Line Break (the "<BR>" code) by using SHIFT+ENTER. This is useful for short lines of information, such as an address:

E. Stephen Mack
TiVo
Mountain View, CA  94043

You can also use a line break to have several paragraphs, one after the other, without a full empty line in between them. Another way to get a line break is the Insert | Break command (choose "Normal Line Break").
This option may look a little unusual, and is not necessarily recommended. So be careful, since this option isn't standard and may not produce the desired results.

In addition to breaks, there's also indenting. You can indent a paragraph using the Increase Indent button on the Formatting toolbar. This inserts a <BLOCKQUOTE> tag. Indented paragraphs are indented an equal amount on both the left and the right.

You can double indent a paragraph.

You can even triple-indent a paragraph!

FrontPage 2000 also introduces some advanced ways of formatting for newer browsers, using features from Cascading Style Sheets. These are available from the Format | Paragraph command. You can indent by a certain amount (such as 5% or .5in or 10mm), separately for the left and right. You can have a different indentation amount for the first line (like in this paragraph and the next one, with .5 in).

You can also choose to use double-spacing or single spacing, or in-between with 1.5 spacing. For example, the previous paragraph and this paragraph use 1.5 spacing. You can also apply a fixed distance above and below a particular paragraph.

Tables

A table (created with the Table | Insert Table command) can hold data:

Vertical information is called a "column" and horizontal information is a "row." Each intersection is called a "cell." To change the properties of a cell, right-click and choose Cell Properties. The first two cells in this table are given the "Header Row" property, which makes them centered and bold.

Tables can have borders:

Tables can have cellspacing (the distance between cells):

Tables can also have cellpadding (the distance within a cell):

By setting the width of the table (as a percentage or in pixels), changing the border size, combining properties and using colors, you can create very fancy tables:

You can place images inside tables, or lists, or even other tables. You can merge and split cells to create fancy effects. Tables can be used for layout (to align things in arbitrary positions on the page). Note that the most convenient way to move from cell to cell in a table is with the Tab key, which also creates a new row if you tab on the last line.

[ Home ] [ Links ] [ Formatting ] [ IE-Only Features ] [ Server Comparison ] [ Hints and Tips ]