Introduction

In order to experiment with the text formatting features described in this tutorial, create a new page. See the notes at the end of the last tutorial on creating new pages. Don't forget to do the following:

1. Before starting Nvu, first create a folder for the web site. For this tutorial, call it TrySite. For convince, you might want to put this folder on your desktop.
2. Start Nvu which also opens a new document.
3. Give the page a title (Format menu, Page Title & Properties command, and type a title in the dialog box). For this tutorial, call it Practice Page.
4. Save the file (call it index.html) in the site folder (TrySite).

Note that the tab in Nvu displays the page title. At the top of the window you will see the page title followed by the filename. Remember, the page title and the filename are two different things.

Why call the file index.html? Remember, the home page of a web site should always be named index.html or index.htm. Therefore, we are considering this page as the home page of a site.

Create a couple of paragraphs of text as follows:

1. In the popup menu at the far left of the top Format Toolbar, select the option that says Paragraph (as shown in the graphic at the right). This step is VERY important. The Body Text option, which is the default, does not create standard web page paragraphs.
2. Type at least four paragraphs of text.
   • End each paragraph by pressing the ENTER key (once).
   • For the first paragraph, just type: My First Page
   • For the other paragraphs, type at lease three lines each.

When you start the third paragraph, the paragraphs will separate slightly (Why doesn't this happen when you start the second paragraph? Who knows? Seems to be a minor program bug.). Web pages use a "block style" paragraph formatting. This means that paragraphs are automatically separated by a blank line and they do not use indenting (actually, there is a way to indent the first line of each paragraph, but that's a topic beyond the scope of this course).

NOTE: Technically, web pages do not recognize tab characters or multiple spaces. When displayed in a browser, any combination of spaces (single or multiple) and tabs (single or multiple) will be rendered as a single space. One way to get around this is to use a special character called a "non-breaking-space." If you type multiple spaces, Nvu automatically inserts the non-breaking-space characters. Also if you type a tab, Nvu will actually insert three non-breaking-spaces followed by a regular space.

Save your page and then open it in a browser. That is, after saving ...

1. Minimize Nvu.
2. Open the folder for the site (i.e. the folder TrySite).
3. Double-click on the file's icon (i.e. index.html).

NOTE: If double-clicking on the file does not open it in your browser, start your browser and then use the File/Open command to display the file.

Once the file is opened in your browser, you can go back to Nvu (don't close the browser), make changes, save, and then return to the browser and click on the Reload or Refresh button to view the changes.

It is ALWAYS a good idea to view your pages in the browser. Even though Nvu is WYSIWYG (what you see is what you get), sometimes there are surprises. In fact, pages can render differently in different browsers. Therefore, it's not a bad idea to view your pages in two or more browsers (FireFox, Internet Explorer, and Netscape are the three most common in use today).

Introduction to Formatting Paragraphs

Unlike word processing , web pages can contain several types of paragraphs. The two most common types of paragraphs include:

• normal (plain) paragraphs
• heading paragraphs

Lists are also another type of paragraph, but they will be considered in the next tutorial.

Normal (i.e. Plain) Paragraphs

All of the paragraphs you created above are normal paragraphs. As stated above, web pages were designed to use block style paragraphs. This means that paragraphs are separated by a blank line and they do not normally have the first line indented. Note that you cannot place the cursor in a blank line between paragraphs. If you can, then you probably forgot to select Paragraph from the menu at the beginning of the Format Toolbar.

To create new paragraphs, place the cursor where the paragraph is to be created, make sure the the Paragraph option is selected in the popup menu at the left end of the Format Toolbar, and type the text. Separate paragraphs by pressing the ENTER key once.

Line Breaks: At any point in a paragraph, you can force a new line to begin. Visually, this has the effect of starting a new paragraph without the blank line. In Nvu, a new line (aka: a line break) is inserted by typing Shift-Enter (i.e. hold down the shift key when pressing the enter key). The primary purpose of this feature is to do something like the following, which is a single paragraph with a line break just after the words College and Avenue:

Blue Mountain Community College
2411 NW Carden Avenue
Pendleton, Oregon 97801

Try it!

Heading Paragraphs

Pages usually have a main heading (this is not the page title) that identifies the page and other headings throughout the page that identify sections of the page. HTML includes a special type of paragraph called a Heading Paragraph.

The format of a Heading Paragraph includes:

• boldface
• a blank "line" before and after
• six sizes

The following demonstrates the 6 heading sizes. The actual size that will be displayed in the browser is dependent on the browser's settings.

Heading 1	Heading 2	Heading 3
Heading 4	Heading 5	Heading 6

To make a heading paragraph in Nvu, position the cursor in the paragraph and select Heading n in the popup menu at the far left end of the Format Toolbar. The n is a number from 1 (largest heading) through 6 (smallest heading). A heading size of 4 is the same as normal paragraph text with boldface. Try this with the first paragraph in the document and then view it in your browser.

Try creating some more headings in your practice page. Note that a heading paragraph does not have to be at the beginning of the page. This type of paragraph can be used at any point in the document (often used for sub-headings and section headings).

Paragraph Alignment

Any paragraph can be aligned to the left, to the right, centered, or justified (just like paragraphs in a word processing document). Use the alignment buttons on the Format Toolbar .

Try it! Apply centered alignment to the heading at the top of the document. Also, try the other alignments with other paragraphs.

Indented Paragraphs

NOTE: An indented paragraph does not mean that the first line of the paragraph is indented. It means that all lines of the paragraph are indented.

For example, this paragraph is indented. Note that its left edge is indented relative to the other paragraphs. The amount of indent is actually determined by the browser. If you want to indent further, just apply the command below two or three or more times.

To indent a paragraph (try it),

1. Position the cursor in the paragraph to be indented. Note that you do not have to select the paragraph, just put the curser IN the paragraph.
2. Click on the Indent text button in the Format Toolbar .
3. View the results in your browser (remember, if you didn't close the browser, just got to the browser and click the Reload or Refresh button).

To un-indent a paragraph that has been indented, use the Outdent text button in the Format Toolbar . Try it!

Separating Sections of a Page - "Rules"

Paragraphs are naturally separated by blank lines, but horizontal lines are often used to separate sections of the web page (as this page does). These horizontal lines are called rules.

In Nvu, position the cursor where you want the horizontal rule (usually at the beginning or end of a paragraph) and then from the Insert menu, select the Horizontal Line command.

The thickness, width, alignment, and style of the rule can be adjusted as follows:

1. Right-click on the rule.
2. Select the Horizontal Line Properties command from the popup menu (last item in the menu).
3. Use the dialog box to set the line width, height (i.e. thickness), style (3-D Shading checkbox on or off), and alignment.
4. Click the OK button when done.

Try these options on your practice page until you have an idea of the affect of each setting.

Character Formatting

In a program like Nvu, 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 Format Toolbar. All of them are found in the Format menu (the first four commands). The most common character formatting options include:

• Font (i.e. typeface)
• Size
• Style (bold, italic, ...)
• Color

The toolbar buttons include the following from left to right:

• Text Color: The top square of the first button (currently black) sets the text color. Select the text, click on the upper square, and select a color.
  • Design Note: "Don't use to many colors." Text color should be used to draw attention to a word or two. To much color reduces this emphasis. 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.
• Paragraph Background Color: The lower square of the first button (currently white) sets the background color of paragraphs. Position the cursor in the paragraph or select several paragraphs, click on the lower square, and select a color.
• Character Background Color: The second button above sets the background color of the text (Nvu calls this the highlight color ... like using a highlighter pen). Select the text, click the button, and then select a color.
• Decrease Text Size: The third button (little A) will decrease the size of selected text.
• Increase Text Size: The fourth button (big A) will increase the size of selected text.
• Bold, Italic, and Underline: The last three buttons above will boldface, italicize, and/or underline selected text.
  • Design Note: "Don't use underline!" Users expect underlined text to be links to other pages. Therefore it is a good idea to avoid the use of underline (just because you can do it doesn't mean you should). To emphasize text use bold, italic, and/or colors.
  • Design Note: "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.

Try each of these formatting options in your practice web page. Also, check out and try the first four commands in the Format menu for additional options.

The first command in the Format menu is used to determine the Font (i.e. typeface) of text. The first five options in the Font submenu are the most common. They include:

• Variable Width - Uses the browser's default proportionally spaced font (i.e. different letters take different amounts of horizontal space ... eg. a "W" takes a lot of space an an "i" uses little space). Most fonts are variable width.
• Fixed Width - Uses the browser's default fixed space font (i.e. every character uses the same amount of horizontal space)
• Helvetica, Arial - The most common sans-serif fonts. Helvetica is the most common sans-serif font used on Macintosh computers and Arial is the most common sans-serif font used on Windows computers.
• Times - The most common serif font.
• Courier - The most common fixed width font.

Design Note: "Don't use unusual or fancy typefaces." Be careful with font (i.e. typeface) options. If the user does not have the font you specify, another font will be substituted by their browser. Therefore, it is best to only use the standard (i.e. common) fonts.

Special Characters

Several special characters (i.e. characters that are not available on a standard keyboard) may be included in the text of a page.

Some examples include:

• copyright symbol (©)
• registered symbol (®)
• cents symbol (¢)
• degree symbol (°)
• plus-or-minus symbol (±)
• ... and many others.

In Nvu, these symbols can be inserted into a page as follows:

1. Position the cursor where the character is to be placed.
2. From the Insert menu, select the Characters and Symbols... command.
3. Use the dialog box to select a symbol/character.
4. Click the Insert button.
5. Repeat steps 3 & 4 to insert additional characters.
6. Click the Close button when done.

Try it!

Where to go from here...

If you understand the above concepts, you are ready to go to the next tutorial (Graphics, Lists, and Tables)