#

## About Composer

Netscape Composer integrates powerful What-You-See-Is-What-You-Get (WYSIWYG) document creation capabilities into Netscape Communicator's already rich set of World Wide Web features. In addition to electronic mail, threaded discussion group, and file transfer features included in Communicator, Composer makes composing for the Web, email, or newsgroups a simple cut-and-paste, drag-and-drop process.

The document creation capabilities in Composer are designed to provide both experienced and beginning content creators with a simple yet powerful solution for editing and publishing online documents. WYSIWYG editing allows first-time users to create dynamic online documents easily and publish them to local file systems and remote servers with ease.

There are a lot of things you can do with Composer:

- Work in a WYSIWYG environment. You can see the results of paragraph and font tags applied as you type.
- Add, remove and modify text. Click on any part of a downloaded Web page and immediately work with text and images.
- Drag-and-Drop. Drag-and-drop hyperlinks and images from the bookmark, mail, news, or browse windows, to a document in the editor (Windows and MacOS only). You can also drag an HTML or image file from the Windows File Manager (Explorer in Windows 95) and drop it in an edit window.
- Publish your documents on the Internet. Simplify the process of posting pages to a server by using one button to copy your files from your local hard disk to a remote directory or server.
- Format text to suit your needs. You can apply paragraph and character styles to text just as you would in your favorite word-processing application.
- Change font, font size and color. Use these features to create pages that focus a reader's attention where you want.
- Include objects in your pages. You can insert tables, images, horizontal lines, and hyperlinks in the Web documents you create.

## Starting Composer

You can create a Web document from scratch, edit the page you're browsing, or open an existing document that you want to modify.

- Creating a New Document
- Editing the Page You're Browsing
- Editing an Existing Page

## Creating a New Page

- From the File menu, choose New and then choose Blank Page (Blank on MacOS). Or, click the Composer button (pencil button) on the Component bar. A Composer window opens containing a blank page. The original browse window remains open behind the Composer window.
- From the File menu, choose New and then choose Page From Template. A dialog box appears where you can select a remote or local file to use as a template, or one of the template files available from the Netscape Template Web site. Once you've selected a template, choose Edit Page from the File menu to use the template as the basis for a new document.
- From the File menu, choose New and then choose Page From Wizard. A Navigator window opens containing the Page wizard. The wizard is a special page on the Netscape home site that walks you through the steps for creating a Web page. When you've completed the steps, you'll have a page that you can open in Composer and continue building on as your skills improve.

Note: The Netscape Template Web Site and Page wizard are located on the Netscape home site. To access them, you must be connected to the Internet.

See Also
  Using the Toolbars and Pop-up Menus

## Editing the Page You're Browsing

To edit the page (or frame) you're currently browsing:

- Choose Edit Page or Edit Frame from the File menu. The current Navigator window becomes a Composer window containing the document you were viewing. You can also drag the Location icon and drop it on the Component bar

See Also
  Using the Toolbars and Pop-up Menus

## Editing an Existing Page

To edit an existing page saved locally or in a remote location:

1. Choose Open Page (Open Page...in Composer on MacOS) from the File menu in Composer.
You see a dialog box where you can enter the filename or URL of the page you want to edit.
2. Select the file you want, click Composer, then click Open.
3. A Composer window opens containing the specified file.

See Also
  Using the Toolbars and Pop-up Menus

## Using the Toolbars and Pop-up Menus

The two Composer toolbars contain buttons corresponding to frequently-used commands. You can access all of these commands from menus, but it's generally quicker to use the toolbars.

Composition Toolbar
Use these items to create, open, and save Web pages, publish (upload) files to a remote server; view your Web page in the browser; perform standard editing tasks; create links and targets; insert images, horizontal lines, and tables; check spelling.

Formatting Toolbar
Use these items to apply paragraph formatting; specify fonts, font sizes, and font styles; apply text color, and control text alignment.

You can hide or display these toolbars by clicking the tab to the left of each toolbar. You can also hide or display these toolbars by choosing their respective menu items from the View menu.

#### Pop-up Menus

Pop-up menus (context menus on MacOS) are a handy way to get to frequently used commands: you select an object (such as text or a link) and then right-click the mouse to display the pop-up menu (mouse over on MacOS). The commands that are available depend on what's selected when you do this. For example, pop-up menus for links provide you with commands for copying the link or modifying its properties.

Place the pointer on | Use the pop-up menu to
Text | Change character, paragraph, or list properties; insert a new link; or paste from the clipboard.
A link | Change link, paragraph, or list properties; open the link in a browse or edit window; copy or remove the link; or add a bookmark for the link.
An image | Change link, paragraph, or list properties; create a link using the image; save the image under a new name; make the image the page background; cut, copy, or paste.
A horizontal line | Change horizontal line, paragraph, or list properties, cut, copy, or paste.
An HTML tag marker | Change tag, paragraph, or list properties; cut, copy, or paste.
A table | Change paragraph, character, or list properties; change table, row, or cell properties; insert or delete a table, column, row, or cell; insert a link; paste.

## Using Drag and Drop

Several drag-and-drop operations are available when you use Composer (Windows and MacOS only). You can:

- Drag a link from a Navigator window and drop it in a Composer window. This is like inserting a link in the document you're editing.
- Drag an HTML file (or multiple files) from the Windows File Manager (Explorer in Windows 95) and drop it in a Composer window to create a link to that file.
- Drag a link from a bookmark, mail, or news window and drop it in the Composer window.
- Drag an image from a Navigator window and drop it in a Composer window. This is the easiest way to add images to your Web pages.
- Drag an image file (GIF, JPEG or BMP) from the desk and drop it in an edit window to insert the image in the current document. Note:Composer converts BMP files to the JPEG format.

See Also
  Working with Hyperlinks
  Working with Images

#

## About Web Pages

Composer makes creating Web pages as easy as creating new documents in your favorite word-processing program. A few steps is all it takes. In this section, you'll learn the basics of becoming a Web page author.
Summary
  Creating Your First Web Page
  Browsing Your New Page
  Basic Text Editing
  Finding Text
  Checking the Spelling
  Composer Styles and Formats
  HTML Basics
  Working with Tables
  Setting Page Properties
  Setting Composer Preferences

## Creating Your First Web Page

#### Summary

1. From the File menu, choose New and then choose Blank Page.
2. Type some text in the Composer window.
3. Choose Save from the File menu or click the Save button and name the file.

#### Details

1. From the File menu, choose New and then choose Blank Page. Or, click the New Page button on the Composition toolbar.
You see the Composer window with a blank page, and toolbars at the top.
2. Choose Save from the File menu (or click the Save button on the Composition toolbar).
You see a dialog box where you can enter a filename.
3. Name your file something unique, such as firstpg.htm, give the page a title, and then click OK. If you are using an operating system that supports long filenames (such as MacOS), you can give the file an .HTML extension.

## Browsing Your New Page

1. Choose Save from the File menu and give the page a title and a filename if you haven't already done so.
2. Choose Browse Page to view your newly created page in the Navigator window. The Composer window remains open behind the new Navigator window.

## Basic Text Editing

Editing text in Composer works the same as in most word-processing applications. Composer's editing features are of vital importance, because writing is what you'll spend most of your time doing when creating your Web pages.
Summary
  Entering Text
  Selecting Text
  Cut, Copy and Paste
  Finding Text
  Checking the Spelling

## Entering Text

As you move the mouse cursor over the Composer window, it appears as an I-beam. When you click the mouse, an insertion bar marks the point where typed text apppears in the window. You can start typing right away.

Composer supports all normal keyboard characters, such as the ampersand and percent sign. To insert symbols, such as the copyright symbol, run the Windows Character Map application (or use the Key Caps program on MacOS). Change the font to Times Roman, copy the symbol you want, and then paste it into the Composer window.
Note: To cancel the effect of the most recently performed command, choose Undo from the Edit menu. (Not all actions can be undone). To perform the most recent action again, choose Redo from the Edit menu.

## Selecting Text

- To select a word, double-click on it.
- To select an entire line, click before the line.
- To select a paragraph, double-click before the line that begins the paragraph.

In Windows, once you've selected a word or paragraph, you can drag and then drop it to a new location anywhere in the Composer window (you see the insertion bar change to a hand icon).

Tip: Choose Show Paragraph Marks from the View menu to see where paragraph marks are located in your document--they appear as black rectangles. A short horizontal line appears to indicate the end of the page.

## Cut, Copy, and Paste

You can enter text in your document by pasting from almost any source. For example, you can select text on a page you are viewing in the Navigator window and copy it by choosing Copy from the Edit menu. You can then paste it into the page you are currently editing by choosing Paste from the Edit menu.

To remove text from your document, select it and then choose Cut from the Edit menu.

Tip: In Windows, you can right-click your mouse on selected text to quickly cut, copy, or paste the text.

Note: Unlike text from the Composer window, text that you cut or copy from the Navigator window does not retain formatting information (such as fonts and font styles). You can always temporarily edit a page in order to copy styled text from it, however.

## Finding Text

#### Summary

1. Choose Find in Page from the Edit menu.
2. Enter the characters you want to search for.
3. If you wish, specify a search option, and then click Find.

#### Details

1. Choose Find in Page from the Edit menu to display the Find dialog box.
2. Enter the characters you wish to search for in the Find What text box (Find on Page on MacOS).
3. Click one of the following search options:

- Match Case (Case Sensitive on MacOS): Makes the match case-sensitive so that Composer looks for text that matches your uppercase and lowercase characters exactly. If you don't select this option, Composer ignores case.
- Up or Down: Specifies whether to begin searching upward or downward in the file. On MacOS, select Find Backwards to search upwards in the file, or select Wrap Search to search the entire file, regardless of where you start.

## Checking the Spelling

#### Summary

- Click the Check Spelling button on the Composition toolbar.
- Or, from the Tools menu, choose Check Spelling .

Composer checks for spelling errors using its main dictionary, which contains most common words. If Composer finds a word that is not in the main dictionary, it displays the word in the Check Spelling dialog box and gives you choices for correcting the possible misspelling.

#### Details

You can check the spelling of a selected word, a selection of text, or an entire document. To check the spelling in the current document:

1. Do one of the following:

- On the Composition toolbar, click the Spelling button.
- From the Tools menu, choose Check Spelling.

The Check Spelling dialog box appears.
2. For each word that is found, choose whether to correct it, ignore it, or add it to the dictionary.
3. To return to the document, click Stop.

## About the Check Spelling Dialog Box

(Windows and Unix only)

Use the items in the Check Spelling dialog box to correct the possible misspellings for selected words and to edit or add words to the current dictionary.

- The Word field displays the possibly misspelled word. You can also type a correction here, and then click Replace or Replace All to insert it in your document.
- The Suggestions field displays alternative spellings for the misspelling contained in the current dictionary.
- From Language drop-down list, select the dictionary to use to verify spellings. Click Edit Dictionary to edit or add words to the selected dictionary.
- Click Replace to replace the misspelling displayed in the Word field with a selected item from the Suggestions list. Or, you can type a correction in the Word field, and then click Replace to substitute it for the misspelling.
- Click Replace All to replace all occurrences of the misspelling.
Suggestion or the correction you typed in Word.
- Click Check to verify the entry in Word using the dictionary.
- Click Ignore to leave the selected word in the document.
- Click Ignore All to leave all occurrences of the selected word in the document.
- Click Learn to add the entry in the Word field to the dictionary and replace the selected word. Note: if there are several entries in the Word field, each one is added the dictionary.
- Click Edit Dictionary to display a dialog box you can use to add, replace, or remove words from the dictionary.
- Click Stop to close the dialog box and stop checking spelling.

## About the Edit Dictionary Dialog Box

(Windows only)

Use the Edit Dictionary dialog box to add, replace, and remove words from your personal dictionary.

- In the New Word field, type the word you want to insert into the dictionary; then click Add.
- In the Words field, select a word and then click Replace to substitute it with the word you typed in the New Word field.
- Click Remove to delete the selected word in the Words field from the dictionary.

## Composer Styles and Formats

Formatting your text and using color goes a long way to making your Web pages or presentations unique and interesting. Add images, horizontal lines, tables, and links and you start to understand why the Web has attracted so much attention. These elements of style are the "stuff" of the Web page.
Summary
  Formatting Styles
  About Composer Fonts
  Inserting Horizontal Lines
  HTML Basics

## Formatting Styles

There are two types of format styles available to you in Composer:

- Paragraph formats: includes heading levels and alignment options, and affects all paragraphs in the selected block of text.
- Character formats: includes font types, styles, sizes, and colors.

Summary
  Paragraph Formats
  Character Formats

## Paragraph Formats

#### Summary

- Select the text; then choose a paragraph style, alignment option, or both, from the Formatting toolbar.
- Or, select the text; then choose Paragraph from the Format menu and choose a paragraph style.
- Or, in Windows, right-click the selected text and then choose Paragraph/List Properties from the pop-up menu.

Paragraph formatting affects all paragraphs in the selection, or the paragraph in which the insertion point is located.

#### Details

These paragraph formats are available in Composer:

Headings
Address
List Item
Formatted
Description Title
Description Text

In addition to the formats mentioned above, you can also apply center, right-justify and left-justify alignment options. Choose Align from the Format menu, or select an alignment button from the Formatting toolbar.

## Headings 1 to 6

Headings divide sections of text. HTML defines six heading levels, which are reflected in the six heading choices that Composer provides. You can apply one of these heading levels by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing Heading from the Format menu. The headings differ from regular text by their type size.

#### Examples of heading levels

> ## Heading 1

> ## Heading 2

> ### Heading 3

> #### Heading 4

> ###### Heading 5

> ###### Heading 6

## Address

You can apply the Address paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing Paragraph from the Format menu.This format is used for a Web page "signature" that indicates who wrote the page and who to contact for more information, as in this example:

You might want to also include the date, any copyright notices, and other applicable information. This format usually appears at the bottom of the Web page and is often preceded by a horizontal line.

## List Item

You can apply the List Item paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing List from the Format menu.

The List Item style formats text in a list with a special symbol or bullet at the beginning of each line. Composer allows you to use the following types of lists:

> Unnumbered: Items are preceded by a bullet or other symbol.
> Numbered: Items are preceded by numbers or letters.
> Directory: Short items display horizontally in columns, as in a DOS directory listing.
> Menu: Short items appear without bullets or numbers.
> Description: Sometimes called a Definition or Glossary list. Items are indented. This style is often used for definitions.

Note: Navigator does not display Directory and Menu styles (it displays these styles as normal text), but other browsers may display them.

Tip: In Windows 95, you can right-click anywhere in a paragraph and choose Paragraph/List Properties from the pop-up menu to display the Character Properties dialog box (Character Info on MacOS).

## Formatted

You can apply the Formatted paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing Paragraph from the Format menu.

Most browsers remove any extra white space, tabs, and paragraph returns present in your text. However, text that contains white space and uses the Formatted style is displayed with the white space intact. This is useful for elements such as code examples, tables, and mail messages that you want displayed in a fixed-width font, as in this example below:

>     alert("Hello!")

## Description Title

You can apply the Description Title list style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing List from the Format menu.

Use the Description Title format for glossaries, definition lists, or other situations where left-justified short entries pair up with longer blocks of indented text. Usually used in combination with the Description Text format, as in this example:

Glossary Term
  Use the Description Text format to indent lines of text, such as listings of definitions in a glossary or other kinds of list. Use Description Title to format the glossary term itself.

## Description Text

You can apply the Description Text paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing List from the Format menu.

Use the Description Text format for glossaries or other kinds of lists where a single term or line needs to be associated with a block of indented text, as in this example:

Glossary Term
  Use the Description Text format to indent lines of text, such as listings of definitions in a glossary or other kinds of list. Use Description Title to format the glossary term itself.

## About the Paragraph Properties Dialog Box

Use the items on the Paragraph Properties dialog box to specify a paragraph style and text alignment for paragraphs. If you select the List Item paragraph style, additional list-specific options become available.

- From the Paragraph style drop-down menu, select a paragraph style.
- Click Additional style to display additional attributes for the paragraph style you've selected. Select List to display additional list styles, and then select List or Bullet style in the next field to specify the type of list you want in your document. The Block Quote attribute can be used with any paragraph style.
- In the List box, choose the type of list you want, then select Unnumbered, Numbered, Directory, Menu, or Description List.
- Number/Bullet Number: if you selected Numbered, indicate the type of sequential indicator to use, such as 1,2,3, or A,B,C. If you selected Unnumbered, specify the type of bullet to use (square, circle, or open square).
- Starting number: type the beginning number for the list.
- Alignment: specify whether to align the selected paragraph to the left, right, or center of the page.

Note: Netscape Navigator does not display the Directory or Menu styles (it displays these styles as normal text), but other browsers may display them.

## Character Formats

#### Summary

- Select the text and click a character format button on the Formatting toolbar.
- Or, select the text and choose Style from the Format menu.
- Or, select the text and choose Character Properties from the Format menu (Character Info on MacOS).

You can apply character formats to one or more characters, to text within a paragraph, or to text spanning parts of multiple paragraphs. In addition to color, the following character formats are currently supported in Composer:

- Bold
- Italic
- `Fixed width`
- Superscript
- Subscript
- Blink
- Underline
- Non-breaking

#### Details

To apply a character format:

1. Select the text.
2. Choose one of three ways to apply a character format:

- From the Format menu, choose Style and then choose a format.
- Or, select a character format button on the Formatting toolbar
- Or, select the text and choose Character Properties from the Format menu (Character Info on MacOS) to display the Character Properties dialog box, where you can specify the font face, color, size, and several other character formats.

To remove character formats from selected text:

- Click the Remove All Styles button on the Formatting toolbar
- Or, choose Remove All Styles from the Format menu.
- Or, choose Character Properties from the Format menu (Character Info on MacOS) and then click the Remove All Styles button in the Character Properties dialog box.

See Also
  Adding Color to Text

## Adding Color to Text

Applying color to selected text is a good way to emphasize different parts of your Web page.

1. Select the text whose color you want to change and click the Font Color button on the Formatting toolbar. In Windows, you can also right-click your mouse on the selected text to display the Character Properties dialog and then select Use Color.
2. In the Color dialog, select a color or define your own custom color.You can specify default text color in the Colors and Background panel of the Page Colors and Properties (Page Properties on MacOS) dialog box.

## About the Character Properties Dialog Box

Use the items in the Character Properties dialog box to specify attributes such as the font, font size, color, and style for selected characters. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

- Click Font Face to select the font you want, or select Variable Width or Fixed Width so that your page displays the fonts specified by the viewer's browser. Select Don't change if the selected text contains more than one font style.
- Click Font Size to select the size for the specified font. The font sizes displayed here reflect the selection you made for Font Size Mode in the Composer Preferences panel (Windows only). To change this mode setting, choose Preferences from the Edit menu and then select the Composer category.
- Click Use Color and then click the color button to choose the color of the selected characters. You can use the document's default text color, or click Other to specify a custom color. Select Don't change if the selected text contains more than one color.
Note: To set the default colors, choose Page Colors and Properties from the Format menu (on MacOS, choose Page Properties), and then select the Colors and Background tab.
- Style: select a style for the selected character(s), such as italic, bold, underline, or non-breaking. You can also apply a special style called Blink which causes text to blink on and off.
- Click Other Colors to display a dialog box where you can choose a custom color.
- Click Remove Style Settings to reset any style checkboxes you have selected to unselected or blank.
- Click Remove All Settings to reset all settings you have made in this dialog box to unselected or blank.

## About Composer Fonts

Summary
  Choosing a Font
  Choosing Font Sizes

Composer provides you with the ability to create pages using fonts that work across platform (e.g., MacOS, Windows or Unix system), as well as the fonts installed in your computer system. You can also choose to let the browser font display setting dictate which the viewer sees when reading your page. Specifying a font for text corresponds to applying the "font face" HTML tag (with the exception of fixed width and variable width fonts).

#### Cross-Platform Fonts

Composer provides three fonts that map appropriately to similar fonts across operating systems. For example, if you create a page using Arial (the default Windows font), it automatically maps to a similar font, Helvetica, when viewed on MacOS or Unix systems.

This table shows how the fonts correspond to each operating system:

Windows | MacOS | Unix
Arial | Helvetica | Helvetica
Courier New | Courier | Courier
Times New Roman | Times | Times

#### Browser Font Display

You can create pages that use only the display font setting specified by your (or your reader's) browser. This type of font setting applies to variable width and fixed width text. In Navigator, you can set the font display for variable width and fixed width text in the Appearance/Fonts panel of the Preferences dialog box. For example, if you've specified Times New Roman as the font to use for displaying variable width text, and you create a page in Composer that uses the Variable Width font setting, then your page will be displayed in Navigator using the Times New Roman font. Similarly, you can apply the Fixed Width font face setting to the text in your Composer page, and Navigator will display it using whichever font is specified for fixed width display.

Note: Keep in mind that your readers can always choose to override your settings and choose another font for their default page display.

## Choosing a Font

#### Summary

- Click the Font button on the Formatting toolbar.
- From the Format menu, choose Font and then select the font you want.
- Choose Character Properties from the Format menu (Character Info on MacOS) to select a font from the Character Properties dialog box.

#### Details

In addition to the fonts installed in your system, you can also apply the font Navigator uses to display fixed width or variable width text. You specify the fonts for variable and fixed width text in the Appearances/Font panel of the Preferences dialog box (choose Preferences from the Edit menu, and then select the Appearance/Font category).

To apply a font:

1. Select some text or place the insertion point in your page where you want the font to begin.
2. Choose one of three ways to apply a font:

- Click the Font button on the Formatting Toolbar.
- Or, choose Font from the Format menu.
- Or, choose Character Properties from the Format menu (Character Info on MacOS) to display the Character Properties dialog box.

3. Select Variable Width or Fixed Width, or choose a specific font from the list.

## Choosing Font Sizes

#### Summary

1. Select a font size mode in the Composer Preferences dialog box (Windows only).
2. Select the font size you want in the Composer window.

#### Details

Composer uses the setting you specified for font size mode in the General panel of the Composer Preferences dialog box to display the font size choices available to you (Windows only). Depending on what you're familiar with, you can choose to display font sizes as relative HTML sizes, or as absolute point sizes, or both.

You can choose one of three modes of display for font sizes. To choose a font size mode:

1. From the Edit menu, choose Preferences and then select the Composer category (Windows only).

You see the General panel of Composer Preferences.

2. At Font Size Mode, select the type of font sizes you want to display (Windows only):

- as relative to the point size of the default Navigator font (you can specify this in the Appearance/Fonts category of the Preferences dialog box)
- as a relative HTML font scale (between -2 and +4)
- as both relative HTML font scale and absolute point sizes

To apply a font size:

1. Select some text or place the insertion point in your page where you want the font to begin.
2. Choose one of three ways to apply a font:

- Click the Font Size button on the Formatting Toolbar.
- Or, choose Font Size from the Format menu.
- Or, choose Character Properties from the Format menu (Character Info on MacOS) to display the Character Properties dialog box.

See Also
  Composer Preferences-General

## Inserting Horizontal Lines

To insert a horizontal line:

1. Click the location in the Composer window where you want the line to appear.
2. Click the Horizontal line button or choose Horizontal Line from the Insert menu. Double-click on the line and choose Horizontal Line Properties from the pop-up menu to display the Horizontal Line Properties dialog box, where you can specify alignment, width, height, and whether to use 3-D shading.

Tip: Double-clicking non-text objects in your document lets you modify their properties.

## HTML Basics

Strictly speaking, you don't need to know HTML to use the Composer. However, it pays to be familiar with what's really going on inside an HTML document when you're troubleshooting a Web page you're working on. If you don't get the results you want, it's useful to look at the raw HTML file and tags to see what the problem might be.
Formatting in HTML documents consists of tags of plain ASCII text instructions enclosed in angle brackets <>. A format area typically uses two tags: one at the beginning and another at the end. For example, to designate a particular line as a heading, you enclose the heading text inside tags that mark the beginning and end:

`<H3>Hello World Wide Web!</H3>`

The <H3> tag marks the beginning of text to be considered a level 3 heading (Heading 3); the </H3> tag marks the end of the text heading. Instead of the usual manual way of inserting this tag, the Composer lets you automatically apply an H1 format using the drop-down style list on the Paragraph toolbar, or by choosing Paragraph from the Format menu.

How Composer formats correspond to HTML tags

This Composer format | Corresponds in HTML to
Address | <address>
Formatted | <PRE>
List Item | <LI>
Unnumbered | <UL>
Numbered | <OL>
Directory | <DIR>
Menu | <MENU>
Description List | <DL>
Description Title | <DT>
Description Text | <DD>

## Inserting Raw HTML

If you already have an understanding of HTML you can insert HTML tags that aren't available from Composer's Format menu. This feature is particularly useful for inserting HTML form tags, and JavaScript, and plug-in code into your documents. Although the Composer does not display these objects, it does insert special HTML tag icons so you know where they are.
You can insert and edit them using the HTML Tag dialog box and then browse your document to see them.

Tip: Double-click the tag icons to display the HTML Tag dialog box and quickly edit your HTML, Java applet, or plug-in code.

To insert HTML tags:

1. Choose HTML Tag from the Insert menu.

A dialog box appears that lets you type the HTML you want to insert at the selected place in your document.

2. Click Enter at the end of each line to ensure that your HTML is easily readable.
3. Click Verify to have Composer check the HTML you've typed.

The Composer checks to make sure you have both opening and closing brackets < > around your HTML, and quotation marks around any attribute text.

## About the HTML Tag Dialog Box

Use the HTML Tag dialog box to enter HTML tags (including Java Script) that aren't available from Composer's Format menus. Click Verify to have Composer check to make sure you have both opening and closing brackets < > around your HTML, and quotation marks around any attribute text.

Note: You can enter only one tag at a time. For example:

<applet code="HelloWorld.class" width=100 height=30>
<param name=text value="Hello World!">
</applet>

In this example, you would type each line or tag separately. So, you would need to type the first line in the box and click OK, type the second and click OK, and so on, for each tag you want to add to your page.

Although Composer not display these objects, it does insert special HTML Tag icons so you know where they are. You can still insert and edit them using the HTML Tag box, and then browse your document to see them.

## About the Extra HTML Tag Dialog Box

When you're creating tables and links, you can use the Extra HTML dialog box to enter additional HTML attributes or JavaScript for the particular <TABLE> or <HREF> tag you working with.

## Working with Tables

Tables are useful for presenting information you want to display in a grid, such as a calendar, or in a spreadsheet, such as financial data. But you can also use tables whenever you want to have greater control over page layout than you normally would. For example, you could combine graphics in a table to create a resume or a newsletter. Or, you could create a table that encompasses an entire page, and then nest tables within the main table for even more layout control.

Summary

  Inserting a Table
  Selecting and Deleting Tables
  Adding and Deleting Rows, Columns, and Cells
  Setting Table Properties

## Inserting a Table

#### Summary

- Click in the page where you want to insert a table.
- Click the Insert Table button on the Composition toolbar, or choose Table from the Insert menu.

#### Details

To insert a table:

1. Place the insertion point where you want the table to appear in your document.
2. Choose Table from the Insert menu or click the Insert Table button on the Formatting toolbar.
3. In the New Table Properties dialog (Insert Table dialog on MacOS), set the properties you want.
4. Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.

## About the New Table Properties Dialog

Use the items in the New Table Properties dialog box (Insert Table dialog on MacOS) to create a table and specify attributes for it such as number of rows and columns, border line width, cell spacing and padding, table width and height, color, and captioning. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

- In the Number of rows field, enter the number of rows in the table. You can add rows later by choosing Table from the Insert menu and then selecting Row.
- In the Number of columns field, enter the number of columns in the table. You can add columns later by choosing Table from the Insert menu and then selecting Column.
- Click Left, Center or Right at Table Alignment to select a left-justified, centered, or right-justified alignment for the table within the document.
- Click Include caption to insert a space to use for centered line of text and then click Above table or Below table.
- In the Border line width field, enter a number for the size, in pixels, of the border lines around cells (table items). Type 0 to make the border invisible. Note: Composer displays tables with a zero (0) border width by using dotted outlines in the Composer window only; not when you view the page in Navigator.
- In the Cell spacing fielld, enter a number for the space, in pixels, between cells.
- In the Cell padding field, enter a number for the padding, in pixels, within each cell. This sets the top, bottom, right, and left margins of each cell.
- In the Table width field, enter a number for the width of the table and then select pixels or % of window. You can specify table width as a percentage of the window width or as a number of pixels. If you specify the width as a percentage, the table width changes whenever the window width changes.
- In the Table min. height field, enter a number for the minimum height of the table and then select pixels or % of window. This is the smallest height the table can have. If you type more text in the table, the table is automatically resized to fit the text you enter. You can specify table height as a percentage of the total window height or as a number of pixels. If you specify the height as a percentage, the table height changes whenever the window height changes.
- Click Equal column widths to have Composer automatically set the width of each cell equally. Deselect this if you want to size each cell individually.
- Click Use Color to use a color as the table's background, and then select the color you want. Click Other Colors to define a custom color.
- Click Use Image to use an image as the table's background, and then type the location and filename of the image you want to use. Click Choose Image to browse for the file location.
- Click Leave image at the original location if you don't want to make a copy of the image file and place it in the same directory as the current document.
- Click Extra HTML to display a dialog box where you can add any other HTML or JavaScript to the TABLE tag.

Note: If you are inserting a table within a table (called "nesting tables") you can also set the minimum height and width of the nested table as percentages of the "parent" cell (the cell of the table in which the nested table resides). The nested table's height and width change whenever the parent table's height and width changes. Type a number in the box and then select % of parent cell.

## Selecting and Deleting Tables

- To select a table: click in the table and then choose Select Table from the Edit menu. You can cut or copy the table to paste somewhere else in your document.
- To delete a table: click in the table and then choose Delete Table from the Edit menu.

## Adding and Deleting Rows, Columns, and Cells

- To add a row, column, or cell: click in the table where you want the addition to appear. From the Insert menu, choose Table and then choose Row, Column or Cell.
- To delete a row, column, or cell: click in the row, column, or cell you want to delete. From the Edit menu, choose Delete Table and then choose Row, Column, or Cell.

## Setting Table Properties

Once you've created a table, choose Table Properties from the Format menu (Table Info on MacOS) to set various properties for rows and cells, or modify the properties you set for the table itself.

Note: The settings you choose in the Table Properties dialog box always override the settings used when you first created the table.

To set table properties:

1. Click in the table.
2. Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Table tab.
3. In the Table Properties dialog, set the properties you want.

## About the Table Properties Dialog

Use the items in the Table Properties dialog box to specify attributes such as border line width, cell spacing and padding, width, height, color, and captioning for the selected table. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

- Click Left, Center or Right at Table Alignment to select a left-justified, centered, or right-justified alignment for the table within the document.
- Click Include caption to insert a space to use for centered line of text and then click Above table or Below table.
- In the Border line width field, enter a number for the size, in pixels, of the border lines around cells (table items). Type 0 to make the border invisible. Note: Composer displays tables with a zero (0) border width by using dotted outlines in the Composer window only; not when you view the page in Navigator.
- In the Cell spacing fielld, enter a number for the space, in pixels, between cells.
- In the Cell padding field, enter a number for the padding, in pixels, within each cell. This sets the top, bottom, right, and left margins of each cell.
- In the Table width field, enter a number for the width of the table and then select pixels or % of window. You can specify table width as a percentage of the window width or as a number of pixels. If you specify the width as a percentage, the table width changes whenever the window width changes.
- In the Table min. height field, enter a number for the minimum height of the table and then select pixels or % of window. This is the smallest height the table can have. If you type more text in the table, the table is automatically resized to fit the text you enter. You can specify table height as a percentage of the total window height or as a number of pixels. If you specify the height as a percentage, the table height changes whenever the window height changes.
- Click Equal column widths to have Composer automatically set the width of each cell equally. Deselect this if you want to size each cell individually.
- Click Use Color to use a color as the table's background, and then select the color you want. Click Other Colors to define a custom color.
- Click Use Image to use an image as the table's background, and then type the location and filename of the image you want to use. Click Choose Image to browse for file location.
- Click Leave image at the original location if you don't want to make a copy of the image file and place it in the same directory as the current document.
- Click Extra HTML to display a dialog box where you can add any other HTML or JavaScript to the table.

Note: If you are inserting a table within a table (called "nesting tables"), you can also set the minimum height and width of the nested table as a percentage of the parent cell (the cell of the table in which the nested table resides). The nested tables height and width changes whenever the parent tables height and width changes. Type a number in the box and then select % of parent cell.

## Setting Row Properties

To set row properties:

1. Place the insertion point in the row you want to modify.
2. Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Row tab.
The Row properties dialog box appears, allowing you to specify properties such as horizontal and vertical text alignment, and text color.
3. Set the properties you want.
4. Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.

## About the Row Properties Dialog

Use the items on the Row Properties dialog box to specify attributes such as horizontal text alignment, and vertical text alignment, and text color for the selected table row. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

- At Horizontal Alignment, set the horizontal position of text relative to the top, bottom, and sides of cells in the selected table row. Select Default to leave the alignment as it was set when the table was created.
- At Vertical Alignment, set the vertical position of text relative to the top, bottom, and sides of cells in the selected table row. Select Default to leave the alignment as it was set when the table was created.
- Click Use Color to use a color as the row's background, and then select the color you want. Click Other Colors to define a custom color.
- Click Use Image to use an image as the row's background, and then type the location and filename of the image you want to use. Click Choose Image to browse for file location.
- Click Leave image at the original location if you don't want to make a copy of the image file and place it in the same directory as the current document.
Click Extra HTML to display a dialog box where you can add any other HTML or JavaScript to the table.

## Setting Cell Properties

To set cell properties:

1. Place the insertion point in the cell you want to modify.
2. Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Cell tab.
The Cell properties panel appears, allowing you to specify properties such as spanning additional rows and columns, horizontal and vertical text alignment, text style and wrapping, cell width and height, and cell color.
3. Set the properties you want.
4. Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.

Note: If you are modifying a table within a table (called a "nested table"), you can also set the minimum height and width of the cell in the nested table as a percentage of the parent cell (the cell of the table in which the nested table resides). The height and width of the cell in the nested table changes whenever the parent cell's height and width changes. Type a number in the box and then select % of parent cell.

## About the Cell Properties Dialog

Use the items on the Cell Properties dialog box to specify attributes such as horizontal and vertical text alignment, text style and wrapping, cell width and height, and cell color. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

- At Horizontal Alignment, set the horizontal position of text relative to the top, bottom, and sides of cells in the selected table cell. Select Default to leave the alignment as it was set when the table was created.
- At Vertical Alignment, set the vertical position of text relative to the top, bottom, and sides of cells in the selected table cell. Select Default to leave the alignment as it was set when the table was created.
- In the Cell spans field, specify whether you want the selected cell to span more than one column or row. Type a number in the rows box to span additional rows. Type a number in the columns box to span additional columns.
- Click Header style to center the text in the selected cell and sets its style to bold.
- Click Nonbreaking to keep the text from wrapping to the next line. Text will wordwrap to the next line ony if you insert a paragraph break.
- Click Cell width to specify the width of the selected cell. You can specify cell width as a percent of the table width or as a number of pixels. If you specify the width as a percent of the table, the cell width changes whenever the table width changes. Type number in the box and select pixels or % of table.
- Click Cell min. height to set the minimum height of the selected cell. This is the smallest height the cell can have. If you type more text in the cell, the cell automatically resizes to fit the text you enter. You can specify cell height as a percent of the total table height or as a number of pixels. If you specify the height as a percent of the table, the cell height changes whenever the table height changes. Type a number in the box and select pixels or % of table.
- Click Use Color to use a color as the cell's background, and then click the color button to select the color you want. Click Otherto define a custom color.
- Click Use Image to use an image as the cell's background, and then type the location and filename of the image you want to use. Click Choose Image to browse for file location.
- Click Leave image at the original location if you don't want to make a copy of the image file and place it in the same directory as the current document.
- Click Extra HTML to display a dialog box where you can add any other HTML or JavaScript to the table tag.

## Working with Images

There are two ways that images typically are presented. The most common way is as an inline image, where the picture appears as part of the Web page. The less common way is as a separate external link that you need to download apart from Web pages. Images are actually separate image files and do not "live" in the HTML document itself. The images that appear on your Web page can be image files on your local disk, or on a remote computer.

Most of the current Web browsers support either of two image formats; the Composer supports both formats as well:

- GIF (CompuServe Graphics Interchange Format .GIF extension)
- JPEG (Joint Photographic Experts Group .JPG extension)

GIF files lack the higher quality of JPEG files but are usually faster because they're more compact and optimized for electronic downloading. Composer also allows you to insert bitmap graphic files (.bmp) by converting them to JPEG format when you place them into your document (Windows only).

You can get images by drawing them yourself, scanning them, or buying them as part of a commercial clip art package. You can also find GIF images out on the Net in one of the many image archives available. If you intend to use images on your Web pages, it's wise to create your own, get permission from the owner of an image, or use royalty-free clip art so you don't infringe on a possible copyright.

Composer provides two alternatives to displaying images: alternate text and low-resolution images. Alternate text is displayed in place of images. You should specify alternate text for those readers who use text-only browsers. In addition, Navigator and other browsers display this text when the mouse cursor is over an image.

Low resolution images are another alternate to normal image display. You simply specify a low-resolution image to display while the normal image is loading.

Tip: To quickly insert an image, cut and paste it from the clipboard, or drag and drop it to the location you want on your page.

Tip: If the document you're editing contains an animated GIF file, click Esc to stop it from continually loading so that you can work in the document.

Summary
  Inserting an Image

## Inserting an Image

Inserting an image in your Web page either copies the image file to the same directory as that of the parent document--the Web page you're editing, or leaves the image file where it is, depending on the settings you've specified in Composer Preferences. Once you've inserted an image, you can resize it by selecting it and then dragging the handles that appear at each corner.

Note: On MacOS, you must have QuickTime installed in order to copy a PICT file from the clipboard. Composer prompts you to name the image file before you paste it, and converts it to JPEG format.

Tip: To quickly insert an image, cut and paste it from the clipboard, or drag and drop it to the location you want on your page.

To insert an image:

1. Place the insertion point where you want the image to appear in your document.
2. Choose Image from the Insert menu or click the Image button on the Composition toolbar. The Image Properties dialog appears, allowing you to specify the source location of the image, its alignment relative to text, and the amount of space you want around it.
3. Type the name and path of the image file you want to insert in your document. If you're not sure of the file name or its location, click Browse to select an image file from the directory list.

Important: If you move an image file from the specified location, it will no longer appear on your Web page.

4. Type the name of a low-resolution version of the image previously specified. This image loads first while the higher resolution image is loading on top. If you're not sure of the file name or its location, click Browse to select an image file from the directory list. (Optional)
5. Type the text that you want to have appear in place of the specified image file. You should always specify alternative text for readers who use text-only Web browsers, such as Lynx, or who have graphics turned off. If you don't include this alternative, your readers might see placeholder images instead of informative text. (Optional)

## About the Images Properties Dialog Box

Use the items on the Image Properties dialog box to insert a new image or modify an existing image's properties, such as text wrapping, height and width, and spacing.

- In the Image location field, type the name or location of the image file you want to insert in your document, or whose properties you want to modify. The editor supports .GIF and JPG image file formats. If you're not sure of the file name or its location, click Choose File to select an image file from the directory list.
- Click Leave image at original location if you do not want to have a copy of the image file placed in the same directory as the current document.
- Click Alt. Text/LowRes to display a dialog box where you can specify whether to display text or a low-resolution image in place of the original image.
- Click an Alignment button to indicate the position of the selected image relative to text, top, center, or bottom. You can also specify whether to have the image right-align or left-align to the page. To see alignment changes you've made, view your page in the browser.
- In the Dimensions field, set the height and width of the new or currently selected image as measured in pixels.
- Click Original Size to undo any changes you've specified.
- Click Lock width/height to maintain the size settings of the image if you decide to move it within your document.
- In the Space around field, enter the amount of white space (space where no text is allowed) on the right and left, top and bottom of the image. You can also select to have a black border surround the image and specify its width in pixels.
- Click Remove Image Map to remove all link regions from the image. An image map is a special type of image that contains links to different locations within the same image.
- Click Edit Image to edit the image using the external editor you specified in the General panel of the Composer Preferences dialog box. If you haven't specified an image editor, you will be prompted to do so.

## About the Alternate Image Properties Dialog

(Windows only)

Use the items on the Alternate Image Properties dialog box to add alternate text for an image and specify a low-resolution image to use in its place.

- In the Alternate text field, enter the text string you want to display in place of the image, for example, a caption or brief description of the image.
- In the Low resolution image field, enter the name of the lower resolution image you want to display while the main image is loading. Click Choose File to browse for the file location.
- Click Edit Image to edit the image file using the external image editor you specified in the General panel of the Composer Preferences dialog.

## About the Image Conversion Dialog Box

(Windows only)

Use the Image Conversion dialog box when you need to import a bitmap graphics file (.bmp) into your page. Composer converts the file to the JPEG (.jpg) format, and allows you to select a high, medium, or low quality pixel display.

## Setting Page Colors and Properties

You use the Page Colors and Properties panels (Page Properties on MacOS) to set general information and properties for your documents, such as authoring information, keywords, hyperlink colors, background images and colors, and advanced settings such as meta tags.

#### Summary

About the General Page Colors and Properties Panel
About the Colors and Background Panel
About the Meta Tags Panel

## About the General Page Colors and Properties Panel

Displays information about the current document and lets you provide additional information helpful to Web users searching for specific topics. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Location

The location of the current document on your local disk.

Title

The text you want to appear in the window title when the document is browsed. This is how most Web search tools locate specific Web pages, so if you want readers to be able to locate your page easily, select a useful title that conveys what your page is all about.

Author

The name of the person who created the current document. This information can be helpful to readers who've found your document by using a Web search tool and must now select from a list.

Description

A brief description of the contents of your document. Again, this information can be helpful to readers searching for a specific topic.

Other Attributes

Type keywords that you want searching services such as Yahoo to use to help users locate your document on the Web. Type the category name (obtained from a catalog server) you think best applies to your document. Classification names are another method used by searching services to locate documents.

## About the Colors and Backgrounds Panel

Lets you specify how to use the browser's colors for linked text and document background or specify custom colors for the current document. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Use custom...

Allows you to set your own colors for text, linked text, and document background (default) and save it in the document.

Use Browser's...

Lets you use the colors set for browser display in the General preferences panel for the current document. Since users can set their own color choices for default browser display, their settings will always determine what colors are used.

Color schemes

Lets you select a scheme from the list.

Custom colors

Allows you to specify the color for Normal, Link, Active Link, and Followed Link text. Click the button to display the color palette and select the color you want. Sample text in the color you've specified appears to the right.

Background

Click this to display the Color dialog and choose a solid color to appear as the background for the current document.

Use image

Check this box to use an image as the background and type an image file name. If you're not sure of the file name or its location, click Browse to select an image file from the directory list.

Note: Background images appear tiled and override background color selections.

## About the Meta Tags Panel

This panel displays optional information that your online service provider might want you to include in your document. This information doesn't actually appear in the document when edited or browsed--only in the source HTML. Contact your provider for more information.

## Setting Composer Preferences

You use the Composer Preferences General and Publishing panels to set preferences for all the pages you create, such as choices for external HTML and image editors, font size display modes, publishing locations and options.

From the Edit menu, choose Preferences and then select the Composer category.

#### Summary

Composer Preferences-General
Composer Preferences-Publishing

## Composer Preferences - General

Use the General panel of Composer Preferences to specify the author name to associate with your documents, and which applications to open when you want to edit the HTML source for your page or modify the image files. You can also choose whether or not to have Composer automatically save your document, and specify the way font sizes are displayed while you work (Windows only).

Author name

Enter the name used by Composer to indicate who created your documents. This information can be helpful to readers who find your document by using a Web search tool and must select from a list.

External Editors

Enter the path and filename of the text and image editors of your choice. For example, if you want to use Notepad to edit the actual HTML source, type C:\WINDOWS\NOTEPAD.EXE. Then when you choose HTML Source from the Edit menu, Notepad starts with the current document displayed. If you're not sure of the filename, click Choose to find the application.

Note: When you edit HTML source using an external editor, first save your changes in the editor and then choose Reload from the Viewmenu to see your changes in Composer.

Automatically save page every___ minutes

Click this box to have Composer automatically save your document, and then specify how often (in minutes).

Template for new page:

(MacOS only) Enter the template's location or click Choose Local File to browse for the filename of the file you want to use as a template for this page.

#### Font Size Mode

Select the way you want Composer to display font sizes (Windows only):

- As relative to the point size of the default Navigator font (you can specify this in the Appearance/Fonts category of the Preferences dialog box)
- As a relative HTML font scale (between -2 and +4)
- As both relative HTML font scale and absolute point sizes

See Also
  Choosing Font Sizes

## Composer Preferences - Publish

Use the items in the Publish panel of Composer Preferences to specify settings for saving remote documents, such as whether to maintain links or copy image files to the remote locations. You can also indicate the default FTP or HTTP publishing locations for your documents.

#### Maintain links

Select this to make sure that links are kept relative to the current document's location. When saving a document from a remote server to your local disk, or publishing to a remote server, this option insures that any links in that document to other files in the same directory are relative when saved/published. These links will work locally if you've also saved the remote files they pointed to. Links to files outside the document's directory are absolute. If you do not select this option, link path names are not modified and links local to the saved document may no longer work.

#### Keep images with page

Select this to save a copy of each image file in the same location as the document. Since images are not located in the document itself, deselecting this option means that only the HTML document is saved, not the image files. It is recommended that you leave this option selected, so that your document's images are always kept in the same directory as that document.

#### Enter a FTP or HTTP site address to publish to:

- FTP: Enter the default location to which you want to upload your Web pages using the File Transfer Protocol. You may need to contact your internet service provider to find out what to type here. For example, if your service provider is America Online, the URL in this box might look something like this: ftp://ftp.aol.com/docs/.
- HTTP: Enter the default location to which you want to upload your Web pages using the Web server protocol. If you are not running your own Web server, you may need to contact your internet service provider to find out what to type here. For example, the URL in this box might look something like this: http://websurf.com/docs/.

#### If publishing to a FTP site, enter the HTTP address to browse to:

Enter the default location of your published Web pages. For example, if you publish your Web pages to: http://aol.com/docs/, you should type this URL in the box.
See Also
  Relative and Absolute Links

## Working with Hyperlinks

A hyperlink is an active part of a document. When you click a hyperlink, you can link to

- Parts of the same Web page.
- Files on your computer.
- Computers on the Internet.

Hypertext and hyperlink documents are commonplace in computing now. Consider the MS Windows, MacOS, and OS/2 Help systems, for example. Help typically displays highlighted areas that you can click to access additional information. This other information might be contained elsewhere in the same file or in another help file on your computer. On the Web, hyperlinks access information on your own computer, and potentially on any accessible computer on the Internet. The information you access, stored in computer files, can produce words, sounds, pictures, or even action video on your own computer.

Summary
  About URLS
  Creating Links
  Linking Images
  Linking to Targets
  Relative and Absolute Links

## About URLs

Uniform Resource Locators or URLs are street addresses for bits of information on the Internet. Most of the time, you can avoid trying to figure out your own URLs by simply navigating to the information you want to point to with your browser, and then copying and pasting the long string of "stuff" into your link. But it's often useful to understand what a URL is all about, and why it has to be so long and complex. Also, when you begin publishing your own information on the Web, you'll want to know something about URLs so that you can tell people how to find your Web page.\

Most URLs have four parts: the protocol, the host name, the directory, and the file name; for example:

http://mysystem.com/docs/index.html

- The protocol (http:) is how the document is accessed; that is, the type of protocol or program your browser will use to get the file. If the browser is using HTTP to get to the file, the protocol part is http. If the browser uses FTP, it's ftp.
- The host name (mysystem.com) is the system on the Internet where the information is stored, such as home.netscape.com. You can have the same host name but have different URLs with different protocols, for example:

http://mysystem.com ftp://mysystem.com gopher://mysystem.com

This is the same machine, but with three different information servers. As long as all three are installed on that system and available, there's no problem having the same host name.
- The directory (/docs) is the location of the file or other form of information on the host. The directory might be the actual directory and file name, or it can be another indicator that the protocol uses to refer to the location of that information.
- The file name (index.html) is the .HTML file for the Web page.

## Creating Links

### Summary

1. Select the text or image you want to create a link for.
2. Choose Link from the Insert menu or click the Link button on the Composition toolbar
3. Enter the file name or URL to link to.

Tip: To create a link to a page displayed in the browser, drag the link icon that's to the left of the location box from the Navigator window to a Composer window (MacOS and Windows only).

When you link to a local document, you're linking to a document on your computer; documents you reference don't have to be in the same directory (it's a good idea though). Linking to a remote document means you're linking to somewhere on the Internet rather than on your local disk.

### Details

You can create links in your documents by dragging them from other windows and then dropping them into the edit window (MacOS and Windows only). For example, you can drag a link from a browse, bookmark, mail, or news window and drop it on a document in the Composer window. You can also create links using the Link Properties dialog.

1. Select the text or image you want to create the link for.
2. Choose Link from the Insert menu or click the Link button on the Composition toolbar.

Link Source displays the selected text you want to use to create a link. To change this text, select the text in your document and retype. To see the change reflected in the dialog, select the text before opening the dialog.

3. Type the local file name or remote URL to link to the selected text. Click Browse File to select a local file.
4. Select a named target present in the current document or selected file (depending on how you've set the "Show targets in" option). Select a target to which you want to link the selected text.

The Show targets in option lets you specify displaying either the named targets in the current document or those in the file specified in the Link to page or file box.

5. Click Apply to make the changes you've specified and leave the dialog box open. Click OK to make the specified changes and close the dialog box.

See Also
  Linking Images
  Linking to Targets

## About the Link Properties dialog

Use the items on the Link Properties dialog box to insert a new link or modify an existing link's properties. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

- In the Link source field, enter the text you want create a link to. If you've already selected an image or text in your page to link to, you see it here.
- In the Link to page location or local file field, enter the local filename or remote URL to which you want the selected text to link. Type a URL or click Browse File to select a file.
- In the Select a named target field, you see the the named targets present in the current document or selected file (depending on how you've set the Show targets in option). Select a target to which you want to link the selected text.
- Click Selected file or Current file at Show targets in to specify either the named targets in the current local document or those in the local file specified in the Link to page or file box.
- Click Remove Link to unlink the selected linked text. If the current selection contains more than one link, an alert box appears asking you if you want to remove all links.
- Click Extra HTML to display a dialog box where you can add any other HTML or JavaScript to the link tag.

## Linking Images

#### Summary

1. Insert an image.
2. Click the Link button on the Composition toolbar
3. Specify a link location.

#### Details

Just as with text, you can configure images to behave as links in your documents. When you click a linked image, the Navigator window displays the page that the image is linked to.

1. Insert an image on your page.
2. Select the image and then click the Link button on the Composition toolbar.
You see the Link properties dialog box.
3. Specify a link location.
Choose Browse Page from the File menu and then click on the image to go to the linked page.

Tip: Dragging a linked image from the Navigator window into a Composer window copies both the image and the link.

See Also
  Inserting an Image

## Linking to Targets

If you want to link to a specific place within a document rather than just linking to the document itself, you create a target (also called named target or anchor in HTML). You can do this by inserting a target in one document, and then creating a link in the same document, or another document that points to that target. When you click on the link in the browser, the browser opens the document containing the target and scrolls to the target location.

1. Place the cursor at the beginning of a line for which you want to create a target, or select some text at the beginning of a line.
2. Choose Target from the Insert menu or click the Target button on the Composition toolbar.
3. Type a name for the target in the edit box; it can be up to 30 characters long. This name will appear in the target list of the Link Properties dialog. If you selected some text in step one, this box will already contain a default target name.
4. Click OK. A special Target icon appears in your document (only visible in the Composer window) to mark the location of the link.
5. Insert a link by clicking the Link button or by choosing Link from the Insert menu.
6. Choose Browse Page from the File menu and then click the link you just created to go to the location marked by the selected target.

## Relative and Absolute Links

When you specify the path name of a file to be linked to as a single file name, Composer looks for the listed file in the current directory (same directory as the current file), even if it is looking at that file over a network. This is a relative path name. Relative path names point to the document you want to link to by describing its relation to the current document.

Relative path names

Path name | Means
link.html | link.html is located in the current directory.
files/link.html | link.html is located in the directory (or folder) called files and the files directory is located in the current directory.
docs/files/link.html | link.html is located in the files directory, which is located in the docs directory, which is located in the current directory.
..link.html | link.html is located in the directory (or folder) above the current directory (the same directory the current directory is in). You can use multiple "../" to indicate a file location further up the directory structure.

Absolute path names point to the document by starting at the top level of your directory hierarchy and working down through all the subdirectories to reach the file. You should use absolute path names when linking to a page from another Web site, such as the Netscape site.

Generally, when linking together your own documents, you'll want to use relative path names. If you specify your links as absolute path names and then move your files elsewhere on the disk, or rename a directory or a disk listed in that absolute path, then your links to these files might not work.

Absolute path names or URLs

Path name or URL | Means
/docs/test/link.html | link.html is located in the directory /docs/test.
/C|/docs/html/link.html | link.html is located on the C: drive in the directory docs/html.
http://netscape.com/link.html | link.html is located on the Netscape Web server.

#

## About Advanced Topics

Now that you've learned the basics of Web page authoring with Composer, it's time to let other people on the Internet see what you've accomplished. In this chapter you'll learn how to publish your Web pages and create even more advanced pages using the new scripting language, JavaScript.

Summary

  Publishing Your Pages
  Using One-Button Publishing
  Using the File Transfer Protocol (FTP)

## Publishing Your Pages

Once you have finished creating your Web page, or perhaps an entire Web presentation and tested it on your own system, you can publish it to a server. Right now your page exists on your local disk; you can browse your Web page, but no one else can. When you publish to a server, you're copying your Web pages (HTML files) to a Web server so that others can see what you've done.

#### What is a Web server?

A Web server is a program that runs all the time and waits for Web clients (such as Navigator) to connect to it and request data, usually a file. Servers and browsers communicate using the HyperText Transfer Protocol (HTTP), a language created for transferring hypertext documents over the Web. Web servers are often called HTTPD servers.

Note: The "D" in HTTPD stands for daemon. A daemon is a UNIX term for a program that sits in the background and waits for requests. You don't have to be on UNIX for a program to behave like a daemon, so Web servers on any platform are still called HTTPD servers, or simply HTTP servers.

#### Finding a Web server

Ideally, you'll be able to publish your Web pages using the same organization that gives you access to the Internet. If you get access to the Internet through a commercial provider, that organization might offer Web space that you can use as well. Ask your system administrator if they offer Web server access.

#### Filename Conventions

Filenames have different conventions and restrictions depending on the platform. It's important to understand these distinctions before publishing your Web information, because you want your documents to be as portable between platforms as possible. If you are working with more than one platform, naming your files is very important.

For example, if you're moving your files to or from DOS-based systems, you'll need to follow the 8.3 rule--file names must be only 8 characters long with 3-character extensions. Also, if you're moving files from a MacOS to other systems, don't use spaces or other funny characters, use only letters and numbers and keep your file names under 8 characters.

## Using One-Button Publishing

The one-button publishing feature in Composer makes publishing your Web pages quick and easy. You can select which files or directories you want to upload (publish) to a remote server. You can also specify the remote server site.

To publish your page:

1. Choose Publish from the File menu or click the Publish button on the Composition toolbar.
You see the Publish dialog box.
2. Select the options you want and then click OK.

Note: If a file on the remote server where you're publishing has the same filename as the one you're uploading, it will be replaced with the new one without asking you to confirm the action.

## About the Publish Files Dialog

Use the items in the Publish Files dialog box to select which files or directories you want to upload (publish) to a remote server, specify a title and filename, and set your user name and password. You can also specify the remote server site.

- In the Page Title field, enter the text that appears in the window title when the document is browsed. This is how most Web search tools locate specific Web pages, and it also is used as the page's bookmark title. So, if you want readers to be able to locate your page easily, select a useful title that conveys what your page is all about.
- In the HTML Filename field, enter a filename for the current document you want to upload to a remote server. Be sure to add an .htm or .html extension.
- In the HTTP or FTP Location to publish to field, enter the location of the remote site you want to publish your Web pages to. You may need to contact your internet service provider to find out what to type here. For example, if your service provider is America Online, the URL in this box might look something like: ftp://ftp.aol.com/docs/. Or, if a Web server protocol is used, http://commercialweb.com/docs/. Once you've typed some locations here, in future you can simply select from the list of remote locations you've established. Click Use Default Location to use the location youve specified in the Publish panel of the Composer Preferences dialog box.
- In the User name field, enter the name you type when accessing the network your Web pages will be located on.
- In the Password field, enter the password for your user name.
- Click Save Password to save your password information so that you only need to type it in the box once instead of each time you publish your Web pages.
- Click Files associated with this page to display all of the files referenced by the current document. Then select the files you want to publish along with the document. Click Select None or Select All to quickly select and deselect files in the list.
- Click All files in page's folder to display all of the files in the current document's directory. Then select the files you want to publish along with the document. Click Select None or Select All to quickly select and deselect files in the list.

Note: If a file on the remote server you're publishing to has the same filename as one you're uploading, it will be replaced with the new one without asking you to confirm the action.

## Using FTP

You can also use FTP to transfer (or upload) your files to a Web server. Composer lets you access FTP servers in the same way you access Web (HTTP) servers.

Note: Most FTP client software lets you choose either ASCII text or binary transfer mode. Although HTML files themselves can be transferred as text files, other files, such as JPEG and GIF files, cannot be correctly transferred that way. In the Composer, files are uploaded to FTP sites in binary mode by default. To point Composer to an FTP site, use the following syntax in the location field:

ftp://username@ftp.foo.com/directory1

You might find the FTP directory and content pages have minimal formatting. When possible, the browse window shows the type, size, date, and a short description of each file in a directory. A directory is presented as a list of links; each link is often preceded by a small icon indicating another directory or a file. Clicking on a directory link displays a subdirectory. Typically, at the top of a subdirectory is a link that displays the parent directory.

After you have accessed an FTP server, you can upload files to the site by dragging and dropping them from the Windows File Manager or Explorer to the browse window. This process is easier if all your Web page files are located in one directory on your local disk.

#

## About Page Design

Even though the Web is relatively young, there are already some definite do's and don'ts regarding content creation. If you heed some of the following credos regarding text, page length, graphics, and color, you'll be on your way to presenting an attractive and well-turned Web page, one with content that readers will enjoyably sink their teeth into.

Time spent planning before you start "cooking" up your creation is time well spent. Consider these issues:

- What's the purpose of the page? Are you providing a service, a product, or entertainment?
- Who is your intended audience? Knowing your readers helps you shape the information content and pick a consistent voice to address them.
- How do you intend to structure the information? It's common to see at least two levels of hierarchy: a top level index and second-level pages. Put as much content toward the top of a hierarchy as possible. (This way, even the casual reader can quickly grasp the sort of information you're presenting.) The easiest way to lay out your information is by chunking it: break your topics into subtopics. If you have several small topics, group them onto a single page.
- How many links will you include? Remember that readers can create links that go to your home page as well as to any page within your set of pages. Also, readers can start to browse your Web page at any number of points; then navigate them in arbitrary fashion, choosing where to start and stop browsing. When planning the number of links you'll include, plan to test their validity on a regular basis.
- How many pictures, sounds, and movies should you use? The fancier and more complex your pages are, the more work and time you'll need to develop them. While multimedia elements definitely add pizzazz to your pages, they also can make a page take too long to load, delaying the reader from the information they're looking for.

## Using Different Browsers

As the Web grows in popularity, more browsers are becoming available. This means you can't assume that folks reading your pages are using the same browser you are. Even those who do use Navigator might not use it all the time (they might use a different browser at home or at work).

Don't make your document overly dependent on HTML features that can't be seen by all browsers. If you decide to use Netscape-only HTML tags, consider how your page might look to someone whose browser doesn't support those tags. Some browsers might not accept your graphics, so provide alternative text. Also, Navigator (and many other browsers) lets users choose how they want the pages they view to look. Users can choose fonts and font sizes, override a page's colors and backgrounds, and generally ignore a lot of the formatting options a Web author has specified.

Do assume that a user's screen size, number of available colors, and screen resolution will be different from yours, even those readers using the same browser. This means that a page that looks great on your screen might look completely different on someone else's. This is another strong reason to concentrate on content first, and use design options as enhancements only.

## Setting Page Length

Most current personal computer monitors display 640 x 480 pixels on 13- to 15-inch screens. Designing your pages so that the information is presented in short, clearly segmented chunks will make it easier to keep pages concise.

A good rule of thumb for writing a page meant to be read onscreen is to make it no longer than two to three 640 x 480 screens' worth of information, including local navigational links at either the beginning or the end of the page layout. If you make the page longer than the window, your reader has to remember too much information that's already scrolled off the screen.

A disadvantage of a very long Web page is that the reader must depend on the vertical scroll bar slider to navigate. Small scrolling movements can completely change the screen contents, leaving the reader no familiar landmarks.

Keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. If you want to provide a good online interface for pages and easy printing or saving of the content, divide the page into chunks of two to three printed pages of worth information, including inline graphics or figures. Or provide a link to a separate file that contains the full-length text combined into one page.

## Providing Good Content

While the graphic design of your pages should be pleasing, it is ultimately the content that determines a page's value to others. Follow these simple guidelines to giving good content:

- Use graphics and color and vary the font size to enhance your page, but make sure your page also works when viewed as straight text. And always include a text alternative to graphic elements.
- Pare down your text. Usability tests show that people will skip over text that they consider non-essential. They don't like to scroll. Often readers will scan a page reading only the text of the hypertext links before they choose their next destination.
- Settle on as few heading styles and subtitles as are necessary to organize your content, then use your chosen styles consistently. Just because Composer provides six levels of headings doesn't mean that you should use them all in a single page! Use heading levels in order, with one level 1 heading at the top, and if necessary, several level 2 headings. Be aware that different browsers use different spacing and fonts. Use the heading levels to indicate structure, as they were intended.
- Avoid overusing boldface, italics, and multiple font styles in your text. One thing you can do to ease the monotony and visual strain of reading lots of text on the computer screen is to use the Block Quote paragraph format and Unnumbered List format (available in the Properties dialog box). Both formats result in indented text blocks that shorten lines of text, keep margins clear, and generally make the page easier to scan. You can also insert horizontal lines to visually separate sections of your document.

See Also
  Doing Graphics Justice
  Taking Stock of Colors and Fonts

## Doing Graphics Justice

Graphics add a lot to the visual appeal and information content of a page. But poor use of graphics can frustrate your readers or keep them from understanding the message you're trying to send.

Practically every published Web author will agree--keep images small! You should aim to keep the total file size of images used on a page to less than 30K. If you need to use a large image, you might want to consider using a thumbnail of the image and then linking it to the full-size copy. You can reduce file size by using design programs to eliminate unnecessary colors.

Use backgrounds intelligently. Backgrounds that are "loud" make it extremely hard to read the text that's on top of them. Don't let your backgrounds interfere with the message you're sending the reader. For a background to work well, color contrast is not enough. The background either needs to be very light (for dark text) or very dark (for light text). A background that contains an image should have low contrast, so it's not too distracting.

The two types of image formats used by most Web browsers are GIF (CompuServe Graphics Interchange Format, .GIF extension) and JPEG (Joint Photographic Experts Group, .JPG extension). The JPEG format works best for photos and continuous tone images. The GIF format works best for inline images, line art drawings, most logos, and screen dumps. Both formats should use a resolution of 72 dpi (dots per inch) and use RGB (red-green-blue) color mapping.

Since you can't assume your readers are using a graphical browser to view your pages, be sure to enter an alternative description in the Alternate Image Properties dialog box (choose Image from the Insert menu. This way, readers using text-based browsers will see the alternate text description, and those using graphical browsers will also see something if the image fails to load.

Here are some other techniques that can help minimize download times for images:

- Supply interlaced .GIF files in your pages. Of course, the caveat here is that not all browsers support interlaced images, but if your pages are graphics-intensive, it's worth considering. If you plan to use the same image several times in your pages, provide a link to the graphics file. Otherwise, the browser has to reload the image every time it's used. Just make sure your graphics are accessible to the Web server delivering your pages.
- Use the Image properties dialog box to indicate the amount of space (in pixels) you want around an image. This speeds up the dowloading process because the server doesn't need to request size dimensions to transmit to the client and can therefore display text faster. You may have heard of an extended type of graphic image called an image map. An image map is where different parts of the image activate different links. Clicking on one area of the image takes you to a specified page, clicking another area takes you to a different page, and so on.

See Also
  Working with Images

## Taking Stock of Colors and Fonts

It's tempting to add lots of colors and font styles to a page just because you can. But the result is more likely to frustrate a reader and detract from the message you're trying to get across. After all, it's the content you want your audience to focus on, and that means presenting a page that's easy to read. Even though most graphical browsers (including Navigator) use a proportionally spaced font such as Times Roman as the default for text, many browsers are user-configurable, meaning the user can choose any font for viewing your page.

Consider typography as the tool you use to paint patterns on the page. The first thing your reader sees is not the title or other details of the page, but the overall pattern and contrast of the page. The reader's eye scans the page first as a purely graphic pattern, then begins to track and decode type and page elements.

Good typography depends on the visual contrast between one font and another and the contrast between text blocks and the surrounding empty space. There are a few basic typographic principles that can help make your pages easier on the eye:

- Avoid overusing boldface, italics, and multiple font styles in your text. Too much contrast is just as bad as no contrast at all.
- Making text uniformly bigger doesn't help at all, and only contributes to making the pager longer.
- Boldface fonts become monotonous very quickly, because if everything is bold, nothing stands out, and it looks as if you're shouting at your readers. Using all uppercase can have the same jarring effect.
- Choose a few heading styles to organize your content, and then use your chosen styles consistently. Regular, repeated patterns help readers quickly establish the location and organization of your information, and increase the overall legibility of your pages.
- Use white space judiciously. Don't put blank lines or horizontal rules everywhere or your pages will look choppy. (Plus, you're trying to keep page length to a minimum.)

Thoughtful and consistent use of color in backgrounds can really help pull your pages together into a cohesive presentation. In general, light pastel backgrounds are best for reading substantial amounts of text. If you are showing a lot of pictures, a black background can make your photos look good and give your pages a gallery-like effect. Using tiled backgrounds makes everything above them "float," causing your readers to work much harder to read your text. Using a white background can make text look good and your document look clean, but if you have a lot of pages, it can be extremely wearing on the eyes.

## Finishing Touches

And last, but not least---the proverbial icing on the cake. These elements are considered the hallmarks of the work of a professional Web author:

- Headers: A consistent titling design at the top of your Web page allows your readers to immediately know what the main point of the document is, and what (if any) relationship the page might have to other pages in a related group. Unlike a browsing a book, which is linear in design, a Web author can never be sure what other pages the reader has seen before linking to the current page. Graphics placed above the main heading should not be so large that they force the title of the page on a standard office-size monitor (640 x 480 pixels) to go off the screen.

- Footers: Ideally, each page should have a footer that contains your name, organization, navigational elements (links or icons), copyright information, and revision/change dates.

- Email Address: Like any fine work of art, a good Web page should have a signature or some other form of contact information. You can provide a link to an email form your readers can use to send comments and feedback to you. Select the Link tab in the Properties dialog box. In the Link to field, type the HTML tag mailto:`` followed by your email address. At the very least, provide your name, organization, and street address, in case your page is viewed on a browser that doesn't support email forms.

- Navigation: Include a target (a return link) to your top level on each page so readers have a quick way of returning to the beginning. It also helps to include links to an index or table of contents, other sections, and previous and next pages. You might want to add these targets to the bottom of the page, so the reader always knows where to find them. If your links only flow downward from the home page, the pages in your document will become dead ends.

- Links: Avoid the "click here" syndrome when defining a link; for example, "Get information about whatever is available by clicking here." Readers then have to remember where they're going to once they jump to another page. It's better to link to words or phrases that are a meaningful part of a sentence; for example, "Information about whatever is now available." If you use links to items on the same page, remember to use relative links, as absolute links (full URLs) can cause a browser to reload the page each time a link is selected.

- Time Stamps: Date your revisions and indicate those pages that have been changed or are new additions.

## About Composer Plug-ins

You can add new functionality to Composer by taking advantage of the plug-in tools available from Netscape. To download the sample plug-ins:

1. Select the desired plugin ZIP file.
2. Save the plugin's ZIP file to the appropriate location:

- On MacOS, this is the folder Plug-ins located in the same folder as the Navigator application.
- On Unix, this is /usr/local/netscape/plugins, or whatever the environment variable NPX_PLUGIN_PATH specifies.
- On Windows, this is the directory Plugins located in the same directory as the Navigator.exe file.

3. Restart Communicator.

Your new plug-in will appear in the Tools menu of the Composer window.