Many of the formatting buttons on the toolbars in FrontPage look like the buttons in Word and Excel. You may not get exactly the same effect, however. These buttons actually insert HTML tags to create their effects.
FrontPage is a mix of the old and new methods at the moment. Many of the changes you can make with the Formatting bar are done with tags that are deprecated (considered obsolete). Future browsers may ignore these. Some buttons use the new method of assigning characteristics formatting by using styles (covered in a later lesson under development).
Project 2: HTML Basics
Buttons on the Formatting Bar
You may click on a button above to skip down to its description below.
Has a list of the basic HTML block elements, those that start a new paragraph.
You have already used some of these HTML styles: Heading 1, Heading 2, Definition, Defined Term, Bulleted List, and Numbered List.
HTML Code: Selecting a style from the list
surrounds the whole paragraph that the cursor is currently in with the
selected tag, like:
In FrontPage you create new styles with
Cascading Stylesheets (CSS).
This feature is not covered in HTML Basics.
Drops a list of the fonts installed on the computer.
HTML Code: Choosing a font will apply it to the
selected text by surrounding the text with a font tag, like:
Consider carefully when deciding to pick a specific font.
If that font is not installed on the computer that is used to view
the HTML document, the browser will use its default font instead. The newer
HTML recommendations use Cascading Stylesheets (CSS)
to assign a font instead of using the
HTML Code: In HTML you can only set a relative
font size from 1 to 7 by adding the SIZE attribute
to the FONT tag, like
The default font size is 3. Other sizes are actually a percentage of the default size.
The Font Size box shows both a point size and an HTML size. The point size is an estimate of the size you will see. It does not mean that even a print-out will be that exact size.
The Increase and Decrease Font Size buttons do not assign a specific point size to the selected text. They just change the size up or down 1 size.
Different fonts at the same font "size" do not actually appear on the page as the same physical size! The samples below show Times New Roman and Arial in sizes from 1 to 7. Quite a difference in the larger sizes, in both width and height!
These buttons surround the selected text with
character formatting tags:
Some other WYSIWYG editors will use the logical formatting tags <em> and <strong> instead.
The number for each color comes from the hexadecimal numbers (that is, base 16) for how much red, green, and blue are needed to make the color. 255 gives the maximum amount of a color. 255= FF in hexadecimal (base 16) numbers. Of course, 0 would mean that none of that color.
from row 2, 3rd from the right, in the FP 2002 color palette
at the far right in the color palette
The Alignment buttons add the ALIGN attribute to a block element tag in order to align the text. There are actually four values for alignment: left, center, right, and justify.
HTML Code: Selecting an alignment button adds the ALIGN attribute to block element tags like
The List buttons turn your selected text into a list with either numbers or bullets. You can format the style of numbering or bullet shape from the menu| .
For numbered lists you may choose whether to number as 1, 2, 3 or I, II, III or A, B, C or a,b,c or i, ii, iii.
For bullet lists you can choose a solid disc, an open circle, or a square. You can also use a picture for a bullet shape.
HTML Code: The tags
The Indent buttons increase or decrease the amount that the selected text is indented.
HTML Code: The block element that the cursor is in is surrounded
by the tags
Disadvantage: You cannot use basic HTML to adjust the amount of indention that
The Borders button adds a border around the selected block elements, those that create a new paragraph.
HTML Code: The selection is surrounded by a DIV (division) tag with a complex STYLE attribute, like:
The code should produce the sentence below with a border extending from edge to edge.
The STYLE attribute is a way to apply stylesheet formatting to a particular spot on your page.
Clicking the Highlight button applies the color shown on the button as a background to the selected text. Clicking the arrow opens a palette of colors.
HTML Code: The selection is surrounded by a SPAN tag with a COLOR attribute, like:
The code should produce the sentence below with the last two words on a yellow background:
~~ 1 Cor. 10:31 ...whatever you do, do it all for the glory of God. ~~