Character Formatting

1. Introduction

In a program like Dreamweaver, individual characters or groups of characters on web pages may be formatted just like in a word processor, although the options are much more limited and in some cases use different terminology.

Most of the character format options are found in the Properties palette. All of them are found in the Text menu. The most common character formatting options include:

• Styles (bold, italic, ...)
• Size
• Typeface
• Color

The process of formatting characters in Dreamweaver is similar to character formatting in other programs.

• If nothing is selected, new characters at the cursor position will take on the new settings.
• If some text is selected, all characters in the selection will take on the new settings.
• New text typed after any existing text will take on the same settings.

HTML includes two types of style classifications. Physical styles are like those found in a common word processor and logical styles whose actual results are determined by the browser.

2. Physical Styles

These styles are similar to those used with other programs. They include ...

Style	Example	HTML
Bold	Blue Mountain Community College	<b> ... </b>
Italic	Blue Mountain Community College	<i> ... </i>
Underline	Blue Mountain Community College	<u> ... </u>
Strikethrough	Blue Mountain Community College	<s> ... </s>
Teletype (monospaced)	Blue Mountain Community College	<tt> ... </tt>

You can use any combination of the these at any time. In Dreamweaver, buttons for bold and italic can be found on the Properties palette. All of these options are available in the Style submenu of the Text menu. For bold and italic, you can also use the keyboard shortcuts Ctrl-B and Ctrl-I.

Dreamweaver Preferences Note: One of the preferences in Dreamweaver forces bold and italic to be replaced by strong and emphasis (these are the equivalent logical styles ... see below). Why? Because some people prefer the use of the logical styles for various reasons. This preference can be turned on/off as follows: go to the Edit menu, select Preferences..., click on the General category at the left, click on the Use <strong> and <em> in place of <b> and <i> check box (it is the last one), and then click on the OK button.

DESIGN NOTE REGARDING UNDERLINE! Don't use underline. The default style for links on a web page is underline. Therefore, if a user sees something underlined, they assume it is a link. So, don't underline for emphasis. Use bold if you need to emphasize something.

DESIGN NOTE REGARDING ITALIC! Use italic as little as possible. Italic, although it is very readable in print, is not very readable on a computer monitor/screen. Therefore, as a courtesy to your readers, only use italic where it is proper to do so (eg. the title of a book) and never more than a couple of words.

Experiment with these options on a practice page and then view the resulting HTML codes.

3. Logical Styles

The original HTML specifications only had logical styles. The actual result of using these styles is determined by the browser, although most browsers agree. They include:

Style	Usually Rendered As ...	Example	HTML
Emphasis	italic	Blue Mountain Community College	<em> ... </em>
Strong	bold	Blue Mountain Community College	<strong> ... </strong>
Code	monospaced	Blue Mountain Community College	<code> ... </code>
Variable	italic	Blue Mountain Community College	<var> ... </var>
Sample	monospaced	Blue Mountain Community College	<samp> ... </samp>
Keyboard	monospaced	Blue Mountain Community College	<kbd> ... </kbd>
Citation	italic	Blue Mountain Community College	<cite> ... </cite>
Definition	italic	Blue Mountain Community College	<dfn> ... </dfn>
Deleted	strikethrough	Blue Mountain Community College	<del> ... </del>
Inserted	underline	Blue Mountain Community College	<ins> ... </ins>

You can use any combination of the these and the physical styles at any time. In Dreamweaver, all of these options are available in the Style submenu of the Text menu.

Experiment with these options on a practice page and then view the resulting HTML codes.

4. Text Size

Unlike other programs, the size of text is NOT measured in points. On web pages, text can be displayed in 7 sizes that are measured relative to the default text size determined by the browser's settings. Why? Because this gives the user control over the size of the text that is displayed on their computer. People with good eyes and/or a larger high resolution monitor may prefer to use smaller text (9 or 10 point) in order to get more on the screen. People with poor eyesight and/or a smaller low resolution monitor may prefer larger text (12 or 14 point).

Size values range from 1 (smallest) to 7 (largest). Note that this is just the opposite of heading sizes where 1 is the largest and 6 is the smallest. The default size is determined by the browser which is usually equivalent to size 3, therefore you can go two sizes smaller and four sizes larger than the default size. The following demonstrates these seven text sizes:

Text size 1	Text size 2	Text size 3	Default browser text size
Text size 4	Text size 5	Text size 6	Text size 7

In addition to specifying the specific desired size, you can also specify the size relative to the borrower's default by including a negative sign or a plus sign before the number. That is, -2 is usually the same as 1 and +4 is usually the same as 7. Anything less than -2 (such as -9) will result in using size 1 and anything larger then +4 (such as +9) will result in using size 7.

In Dreamweaver, the size of text can be adjusted in the Properties palette (the popup menu just after the word size) or from the Size and Size Change submenus found in the Text menu.

Experiment with these options on a practice page and then view the resulting HTML codes.

HTML

• <FONT SIZE="number"> ... </FONT>
  The value number indicates the size number: 1 (smallest) through 7 (largest).
• <FONT SIZE="relative"> ... </FONT>
  The value relative gives a relative size as compared to the default size. These must be signed numbers such as -2, -1, +1, +2, +3, and +4.
• <BIG> ... </BIG>
  Same as relative +1.
• <SMALL> ... </SMALL>
  Same as relative -1.

5. Font (i.e. Typeface)

Clarification of Terminology

Most people and programs use the term font incorrectly. The term font actually refers to three characteristics of text: typeface, size, and style. In most cases, the term typeface should actually be used. Typeface refers to the shape of the letters. Typefaces fall into several classifications including:

Classification	Fonts	Example
serif	Times New Roman, Palatino, etc.	Blue Mountain Community College
sans serif	Arial, Helvetica, etc.	Blue Mountain Community College
symbol	Symbol, Dingbats, & Wingdings	Blue Mountain Community College
novelty	Script, Old English, etc.	Blue Mountain Community College
Note: The above examples may not work. They are dependent on the fonts available on your computer.

Due to the common misuse of these terms, we will use the terms typeface and font interchangeably (i.e. the following will use the term font technically incorrectly).

Normally, the typeface (i.e. font) of text is determined by the user in the preferences of their browser. This is generally considered a good thing because if a web page specifies a font to be used, that font may not be available on the user's computer. If this happens, a different font will be substituted, eliminating the purpose for specifying the font in the first place.

But a web page can specify a typeface. HTML uses the font tag to accomplish this task.

<font face="typeface-name-list"> ... </font>

The typeface-name-list is a list of fonts to be used. The first font in the list will be used if available, if not the second font will be used if available, if not ... If all of the fonts in the list are not available, the browser will use one of its default fonts (specified in the preference settings of the browser). The fonts in the list are separated by commas.

For example, the following ...

<font face="Arial, Helvetica, sans-serif">Blue Mountain Community College</font>

... will produce ...

Blue Mountain Community College

Notice the last font in this example is sans-serif. Other than actual font names, serif, sans-serif, cursive, fantasy, and monospace can be used as the final item in the list. This tells the browser that if none of the previous fonts are available, the use the browser's default font of this type.

In Dreamweaver, font families (i.e. predefined lists of fonts) can be defined and used as needed (6 of these are already defined when Dreamweaver is installed). Why define font families?" Because, as indicated above, the user may not have the font that is specified. Therefore, if several possible fonts are listed, then the browser will use the first font that is available on the system it is using. This is especially useful in making web pages cross platform. For example, Arial is the most common sans-serif font used on Windows computers but Helvetica is the most common sans-serif font used on Macintosh computers. Therefore, if you want the page to use a sans-serif font and make your web page cross-platform, you should specify both fonts.

To create, delete, or edit a font family ...

1. From the Text menu, select the Font submenu, and then select Edit Font List ....
2. Use the dialog box to add new lists, delete unwanted lists, or edit current lists.
3. These changes are not tied to the current web page under development. They are permanent changes to the program.

To use a specific font or font family, position the cursor where new text is to be type or select text whose font is to be changed and then use one of the following:

• In the font textbox in the Properties palette, type the name of the font to be used.
• Click on the arrow to the right of the font textbox in the Properties palette and select a font family from the popup menu. Note: To turn off font selection, choose the Default Font option in this menu.
• From the Text menu, select the Font submenu, and then select a font family. Note: To turn off font selection, choose the Default option in this menu.

DESIGN NOTE REGARDING SPECIFYING TYPEFACES. Don't use unusual or fancy typefaces. The problem with specifying the typeface is that you do not know if the user has that typeface available on their computer. Also, many fonts are VERY difficult to read on a computer monitor/screen.

Experiment with these options on a practice page and then view the resulting HTML codes.

6. Text Color

The <BODY> tag includes a parameter that determines the color of the text on the web page. This default color can be changed in Dreamweaver using the Page Properties... command in the Modify menu.

Any color can be applied to individual words/characters or groups of words/characters as needed. After selecting the text whose color is to be changed, Dreamweaver provides two options:

• select a color in the Text Color popup menu found in the Properties palette
• type the text color number (#rrggbb) in the textbox to the right of the Text Color popup menu in the Properties palette (this is the textbox just to the left of the bold button)
• select a color from the color dialog box (from the Text menu, select the Color... command)

DESIGN NOTE REGARDING COLOR. Don't use to many colors. Also, make sure any color you use provides a good contrast with the background (readability). Generally, the only time you should use different colors is for headings and to emphasize a word or two.

HTML

• <font color="color"> ... </font>

The color can be specified by using a 6 digit hexadecimal number preceded by a # symbol, or a color name. Many standard color names are recognized by browsers, but this may not be reliable from browser to browser. Notes on the details of color numbers can be found on the HTML Basics notes page.

7. Text Position (i.e. Subscripts & Superscripts)

Occasionally, a subscript (small lowered text) or superscript (small raised text) may be needed. Dreamweaver does not provide these commands directly, but they may be inserted manually.

Examples:

• subscript: H₂O
• superscript: e = mc²

HTML

• subscript: _...
• superscript: ^...

8. Special Characters

Several special characters may be included in the text of a page using special codes embedded between the ampersand (&) and semi-colon (;) characters.

Some examples include:

• &amp; = &
• &nbsp; = non-breaking-space
• &copy; = copyright symbol (©)
• &reg; = registered symbol (®)
• &cent; = cents symbol (¢)
• &deg; = degree symbol (°)
• &plusmn; = plus-or-minus symbol (±)
• &#n; = any character number where n = ASCII/Unicode number of the character
  • &#133; = ellipses symbol ( … )
  • &#152; = tilde symbol ( ˜ )

A complete (maybe?) list of all characters and symbols can be found at the Jalfrezi site and the VisiBone site.

In Dreamweaver, many of these symbols can be entered directly from the keyboard. Others can be found in the Insert palette under the Characters tab. A non-breaking space can be generated from the keyboard using Ctrl-Shift-Space. When working in the code view, you can create one of these characters by typing an & symbol. When this character is typed, a pop-up menu will be displayed that gives a list of the special character codes. As you continue to type, the list jumps to the letters you type. You can finish the code by either typing the rest of the code and end with a semicolon, or just click on the code in the list.

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