Font & Paragraph Formatting: Character Styles

This page demonstrates Font and Paragraph Formatting in FrontPage 98.

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 Images, Backgrounds (and other page properties) and Forms. In addition, advanced items like 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
Typewriter Font
Font Sizes
Superscript and Subscript
Special Styles
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 | FrontPage Component command and select Comment.

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 | Active Elements | Marquee command. It 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 Normal toolbar, or use the Format | Paragraph command.

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 latter 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 centering.

This is a Normal paragraph that is right-aligned.

Use the three alignment buttons on the Format toolbar, or use the Ctrl+L, Ctrl+E and Ctrl+R keyboard shortcuts, or use the Format | Paragraph command. Only entire paragraphs can be aligned.

Bold, Italics, Underlining and Strikethrough

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 Format | Font command.

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

There is a certain special font style shown in this otherwise Normal paragraph. (Perhaps this sentence should be removed.) The Strikethrough style is for indicating a section that should be removed. Use the Format | Font command.

Text Color

You don't have to have black text -- almost any color text is available. White (white), Red, green (called "lime" by FrontPage), 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 Palette button on the Format 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). Garamond (alias Palatino) looks nice, but you can't guarantee that it's there. Courier is also available. Use the Format | Font command.

Note: You can specify more than one font if you edit the HTML; for example <FONT FACE="Verdana,Helvetica,Arial,Universe">

Typewriter Font

The Typewriter style ("<TT>") is demonstrated in the next paragraph. Use the Format | Font command.

This is Typewriter style -- Did you know that most typewriters use the Courier font? The Default font for Typewriter should be Courier (be careful that FrontPage doesn't use Times New Roman, since FrontPage is quirky that way).

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). So things don't line up:

12345678 llllllll The quick brown fox

12345678 wwwwwwww The quick brown fox

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.

Superscript and Subscript

You can use Superscript (for example, the "2" in E=MC²) and Subscript (e.g., H₂O).

You can specify how much subscripting and superscripting: You can go ^{above by any number of points (here 10) such as 5 points,3 points, 2 points, 1 point,} or back to 0, _{or -1 points, -2 points, -3 points, -5 points}, etc. It remains to be seen how useful superscripting and subscripting is. Be sure to check your results in both Netscape and Internet Explorer.

Special Styles

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

1. Citation style (<CITE>) is for citing an author or source, especially book titles. It is often rendered in italics.
2. Sample style (<SAMP>) is for code samples. It is often rendered in Typewriter style.
3. Definition style (<DFN>) is for defining terms. It is often rendered in italics.
4. Blink (<BLINK>) style 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?).
5. Code style is for displaying computer code listings. It is often rendered in Typewriter style.
6. Variable style (<VAR>) is for displaying "variables" in computer code, that is, text that users should enter. It is often rendered in Typewriter style.
7. Bold style is only technically different from the regular Bold command -- it uses the <B> HTML code instead of the <STRONG> HTML code, so that Bold style ("true Bold") is always rendered in bold. In practice, you'll never use it.
8. Italic style is only technically different from the regular Italic command -- it uses the <I> HTML code instead of the <EM> HTML code, so Italic style ("true Italics") is always rendered in italics.
9. 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), highlight the text and use the Format | Remove Formatting command.

Lists

A couple of sections above, I used a number list to display the nine different special styles. There are several types of lists you can use; these are accessible in FrontPage by using the buttons on the toolbar or by using the Paragraph styles. 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 three 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."

Numbered Lists (Alternate 1)

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

Numbered Lists (Alternate 2)

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

Numbered Lists (Alternate 3)

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

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?

Numbered Lists (Embedded)

1. You can create outlines using Embedded lists.
   1. For example, there are three versions of FrontPage.
      1. FrontPage 1.1
      2. FrontPage 97
      3. FrontPage 98
   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 "ordered lists."

Bulleted Lists (Alternate 1)

• You can use alternate button styles
• But a bulleted lists 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 2)

• 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.
    • It has two different styled subpoints.
• Sublists can be useful for outlines.
  • To create a sublist, use the Indent button twice.
  • The Indent button is the last button 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.

Other Paragraph Styles: Address & Formatted

There are several other Paragraph Styles available from the style box on Format toolbar.

Formatted Style (also know as "PRE") is a way to get things to be exact.

                     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 in the 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

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. In sum, 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
Silicon Graphics
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 | Line Break command (choose "Normal Line Break").
This option may look a little unusual, and is not necessarily recommended. But be careful, since this option isn't standard and may not produce the desired results.

You can indent a paragraph using the Indent command. 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!

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.

[To the Agenda for FrontPage 98]

Last Modified: September 21, 1998