Table of contents
· Introduction
· Creating HTML documents
· Using stationery to create HTML documents
· Creating HTML documents without using stationery
· Saving documents as HTML files
· Opening HTML files
· Formatting and editing HTML documents
· Getting started
· Paragraphs
· Tabs
· Character formatting
· Headers
· Unsupported characters
· Hypertext links
· Lists
· Pictures
· Horizontal rules
· Preformatted text
· Literal text
· Technical details
· About this HTML translator
Introduction
To create documents that can be viewed by a World Wide Web (WWW) browser, you use the Hypertext Markup Language (HTML). HTML consists of a set of
tags (formatting codes) added to text. For example, if the text "Local News" is formatted as an 18 point header, the text looks like this: <H2>Local News</H2> when translated to HTML. Text can also be tagged to create a hypertext links to other documents. You can use ClarisWorks to open, edit, and create HTML documents without having to be familiar with HTML tags.
This document describes how to:
· open (import) HTML documents so you can read and edit them as word processing documents
· create word processing documents and save (export) them in the HTML format
As you get started, please keep the following points in mind:
· You should be familiar with the concepts and techniques for working with ClarisWorks word processing documents, stylesheets, and shortcut buttons. For more information on these topics, see the documentation that came with ClarisWorks.
· Each WWW browser interprets HTML tags in slightly different ways. For example, some browsers may display a header in color in an elegant typeface, while a text-only browser may display the same header in capital letters in the same size and font as the rest of the document. The ClarisWorks HTML translator uses the default display styles for Mosaic, a browser created by the National Center for Supercomputing Applications (NCSA). For more information on NCSA Mosaic, visit the WWW site at:
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic (note 1)
· The translator file is called "WWW [HTML]" and is installed, along with other translators, in the Claris Translators folder in the Claris folder (inside the System Folder). You don't use the HTML translator file directly. Instead, you use the ClarisWorks save and open commands to direct the file through the translator.
Note: Updates to this document are available on ClarisWeb at:
http://www.claris.com/pubs/clarisworks/html-primer.html (note 2)
Creating HTML documents
This section describes how to create new HTML documents. For information on entering and formatting text in HTML documents, see the section "Formatting and editing HTML documents."
Using stationery to create HTML documents
The easiest way to create HTML documents is to start with the ClarisWorks HTML stationery, a template included with ClarisWorks 4.0. The stationery is a blank preformatted word processing document that you can reuse.
To open the stationery document:
1. Launch ClarisWorks by double-clicking the ClarisWorks icon.
2. Choose New from the File menu.
3. In the New Document dialog box, select Use Assistant or Stationery.
4. Choose Internet from the pop-up menu, select WWW [HTML] Document, and then click OK.
You see the blank, untitled stationery in its own window. The original document remains unchanged, ready for you to use again. The stationery includes a set of HTML styles in the stylesheet palette and three shortcut buttons, "Make Hypertext Link", "Unordered List Item", and "Horizontal Rule."
5. To open the stylesheet palette, choose Show Styles from the View menu.
The styles include headers of various sizes as well as styles for normal, literal, and preformatted text.
6. To display the shortcuts palette, choose Shortcuts and then Show Shortcuts from the File menu.
For specific information about using the shortcut buttons to create HTML documents, see the sections "Hypertext links", "Lists", and "Horizontal rules."
Note: To make the buttons appear in the shortcuts palette for any ClarisWorks word processing document or text frame (not just in a stationery document):
1. Launch ClarisWorks and open the HTML stationery by following Steps 1-4, above.
2. Choose Shortcuts and then Edit Macros from the File menu.
3. Select Make Hypertext Link from the Macro pop-up menu and then deselect
Document Specific. Do the same for Unordered List Item and Horizontal Rule.
4. Click Done.
The HTML stationery shortcuts now appear in the shortcuts palette for any word processing document.
Creating HTML documents without using stationery
If you prefer, you can create an HTML document in a regular word processing document instead of the HTML stationery.
To open a word processing document:
1. Launch ClarisWorks by double-clicking the ClarisWorks icon.
2. Choose New from the File menu.
3. In the New Document dialog box, select Word Processing and then click OK.
Using the ClarisWorks HTML stylesheet or HTML shortcut buttons is optional. If you want to use the ClarisWorks HTML stylesheet, go on to the next step. If you want to use the HTML shortcut buttons, follow the steps in the Note in the previous section "Using stationery to create HTML documents."
4. To import the HTML stylesheet into your blank document, choose Show Styles from the View menu.
5. In the File menu on the stylesheet palette, choose Import Styles.
6. Navigate to the ClarisWorks Styles folder in the ClarisWorks 4.0 Folder, select HTML Styles, and then click Open.
7. In the Select Styles to Import dialog box, click Check All and then click OK.
Saving documents as HTML files
To save (export) a document as an HTML file:
1. Choose Save As from the File menu.
2. In the Save As pop-up menu, select WWW [HTML].
3. Navigate to the folder in which you want to save the file, type a file name, and click Save.
To help you keep track of the file format of your documents, you can add extensions to the filenames, such as myfile.html for an HTML file, or myfile.cw for a ClarisWorks file. For best results with HTML files, don't use spaces in the filenames. Either remove spaces or replace them with underscores or hyphens.
Important: Be sure to keep copies of your documents in their original formats, especially HTML documents that you import. The translator does not provide a complete set of HTML tags and may replace some of the original tags.
Opening HTML files
To open (import) existing HTML files:
1. Launch ClarisWorks by double-clicking the ClarisWorks icon.
2. Choose Open from the File menu and then navigate to the HTML file you want to open.
3. In the Document Type pop-up menu, select Word Processing. In the File Type pop-up menu, select WWW [HTML]. (If you'd like see what the HTML codes in your text look like, select All Available or Text in the File Type pop-up menu.)
4. Select the name of the file you want to open, and click Open.
The HTML document opens. You see it as it might look when viewed by an HTML browser. If you want to use the optional ClarisWorks HTML stationery features, continue to the next step.
5. Import the the HTML stylesheet into your document by following Steps 4-7 in the section "Creating HTML documents without using stationery."
Note: Imported text is styled as "Body+" in the stylesheet. However, the translator tags the text correctly when you export it, even when styled as "Body+," and you can use the stylesheet to style any new text that you type.
6. Set up your document with the HTML shortcut buttons by following the steps in the Note in the section "Using stationery to create HTML documents."
Formatting and editing HTML documents
This section describes how to use ClarisWorks text and paragraph attributes to format or edit documents that can be translated to HTML format.
Getting started
You start with a ClarisWorks word processing document. To create an HTML document, follow the directions in the section "Creating HTML documents." To open (import) an HTML file that you want to edit, follow the directions in the section "Opening HTML files".
It's easier to apply the various text styles if you can see the carriage returns and spaces in your document. To show these characters - called
invisibles or
formatting characters - use the keyboard shortcut Command-; (semicolon). To hide the formatting characters, press Command-; again. (The Command key is the cloverleaf key on the bottom row of the keyboard.)
If you're using the ClarisWorks stationery, or if you've set up a word processing document so you can use the HTML stationery features, show the stylesheet (choose Show Styles from the View menu) and the shortcuts (choose Shortcuts and then Show Shortcuts from the File menu).
Important: Apply only those ClarisWorks styles that start with "HTML" (for example, HTML Normal Text). With few exceptions, (noted in the applicable sections) the HTML translator and browsers don't recognize any other ClarisWorks styles.
Paragraphs
Type your text and end the line or paragraph by pressing Return (or place the insertion point in the text, choose Paragraph from the Format menu, and then type 1 in the space after box). The default paragraph style for the stationery is HTML Normal Text. The translator tags text styled as HTML Normal Text as a paragraph. Most browsers separate paragraphs by adding white space after the paragraph.
Note: The translator interprets soft returns (Shift-Return) as spaces.
If you don't want extra white space after a block of text, place the insertion point in the text, choose Paragraph from the Format menu, and then type 0 in the space after box. The translator will tag the carriage return as a break. Browsers don't usually add white space after a break.
Tabs
Tabs are usually translated into white space, except when the tabs appear in lists or preformatted text (see the sections "Lists" and "Preformatted text").
Character formatting
To make characters bold, italic, or underline, select the text and choose Bold, Italic, or Underline from the Style menu at the top of the screen. If you choose any other item from the Style menu (for example, Shadow or Inferior), the translator interprets it as plain text.
Note: The translator interprets most bold text as a header. Headers appear on a separate line when viewed from a browser. If you don't want the translator to interpret bold text as a header, make the font size of bold text 11, 12, or 13 points.
Headers
Use headers to structure and organize the HTML document, just as you use headers to structure and organize any text document. To create a header, type the text, select it, and then choose a header style-such as HTML Header (9 pt.)-from the stylesheet (or choose Bold from the Style menu and any size except 11, 12, or 13 points from the Size menu). When the translator interprets text styled as a header, it adds white space above and below the text.
Unsupported characters
The translator ignores or interprets as spaces characters such as soft returns (Shift-Return), page numbers, page breaks, and date characters inserted by using the Insert Date command.
Hypertext links
A hypertext link is a string of clickable text (called an
anchor). When you click on the link in a browser, you "jump" to another document.
To make a hypertext link:
1. Select the text that you want to be seen as the link anchor.
2. Click the Make Hypertext Link shortcut button (or style the text so it looks different from the surrounding text and then insert a footnote by choosing Insert Footnote from the Format menu).
* Make hypertext link shortcut button
Clicking the button changes the selected text to blue underline and inserts a footnote mark. You see footnote text instructing you to fill in the Uniform Resource Locator (URL) of the document you are linking to.
Note: If you insert a footnote but don't change the anchor's appearance (for example, to blue underline), the translator uses the text preceding the footnote (up to 255 characters) as the link anchor. Note also that HTML doesn't support footnotes, so you can't use footnotes except to create hypertext links.
3. Replace the footnote text "INSERT URL HERE" with the URL of the destination document.
URLs represent file locations on the World Wide Web. A URL has the general form
scheme: //host.domain [:port] /path /filename
For more information on HTML and URLs, visit the WWW site at
http://www.ncsa.uiuc.edu/demoweb/html-primer.html (note 3)
Lists
Use lists to group related items. List items always start with a tab (or a .5 inch indentation). You can show the relative importance of each item in a list by using multiple tabs (or multiple .5 inch indentations) to indent items-as you would in an outline. Items in
ordered lists are numbered and items in
unordered lists are set off with a bullet. You can include both ordered items and unordered items in the same list.
To create a list:
1. Press Tab to indent the line one or more times (or choose Paragraph and type a multiple of .5 inches in the Left Indent box).
Each tab character, regardless of tab size (or each .5 indentation, as typed in the Left Indent box), adds an additional level of indention.
2. Type the character that defines the type of list item (ordered or unordered).
To create this type of list item - Do this
Ordered (numbered) - Type a number followed immediately by a period, right parenthesis, or a hyphen-for example, 1., 1), or 1-. Browsers vary in how they format the numbers on ordered list items.
Unordered (bulleted) - Insert a bullet by clicking the Unordered List Item shortcut button (or type the bullet by pressing Option-8). Most browsers display a bullet at the beginning of each item in an unordered list.
3. Type the text for the item. The text can extend to more than one line.
4. Repeat Steps 1-3 for each item in the list.
5. End the list by doing one of the following:
· Start the next line of text at one less tab than the last item of the list.
· Press Return to insert a blank line after the last list item, and begin the next text segment with a non-list character (that is, no bullets or numbers).
Important: Don't use styles from the stylesheet (such as Bullet or Diamond) to create lists in your HTML document-the HTML translator and browsers don't recognize ClarisWorks styles as list types.
Example 1 Each additional list level is called an
embedded list.
1. The "1." is the beginning of the initial list.
2. This is the second item of the initial list.
1. Here we are at two list levels, thus we begin a new list.
2. This is the second item of the embedded list.
3. Here we end the embedded list, and continue the initial list.
The embedded list could have been a bulleted list. The type of list (ordered or unordered) is determined by the first list item in that list level.
Example 2 This ordered (numbered) list contains an unordered (bulleted) list:
1) The "1)" is the beginning of the initial ordered list.
2) Second item of the initial list
· First item of the unordered embedded list.
· Second item of the unordered embedded list.
3) Third item of the initial list.
Example 3 This list shows that the first character of a new list determines if the list is ordered or unordered. When viewed by a browser, the list in this example is ordered exactly the same as the list in Example 2.
1- The "1-" is the beginning of the initial ordered list..
· Second item of initial list (the bullet will appear as "2." in the HTML document)
· First item of the unordered, embedded list.
2- Second item of the embedded list. The number "2-" will be a bullet.
3- Third item of the initial list.
Pictures
You can include pictures (images) in your HTML document. The translator supports anchored pictures, but not floating ones. To make sure your pictures are anchored, select the picture and choose Cut from the Edit menu. Then click in the text where you want the picture to go and choose Paste from the Edit menu. Correctly anchored pictures have one handle when you select them. (Floating pictures have four handles when selected.)
The translator automatically saves the pictures as individual files and creates tags in the HTML file that refer to the picture files. The references are to the same relative directory as the HTML file, so if you move the HTML document to another location, you must also move the picture files.
The pictures are saved as PICTs, but to be able to view the pictures in the document on a WWW browser, you must convert them to Graphic Interchange Format (GIF). The translator adds the
.gif extension to the picture filenames in the HTML source file, but you still must to convert the file from PICT to GIF format. When you've finished, check to be sure that the filename for each picture has the ".gif" extension in lower case.
Note: Shareware conversion applications such as GifConverter and GraphicConverter are widely available from on-line services and popular Macintosh FTP archives on the Internet.
Horizontal rules
Horizontal rules are useful for separating sections of text. To insert a horizontal rule, click in the text and then click the Horizontal Rule shortcut button (or press Return, type a series of underscore characters, and then press Return again).
You see a series of underscores at the insertion point in the document.
Preformatted text
If you want a section of text to look exactly as you type it, select the text and then click
HTML Preformatted Text in the stylesheet palette in the HTML stationery (or choose Monaco from the Font menu). Preformatted text appears in both your document and the browser in a monospaced font:
This is an example of what
preformatted text looks like.
Although tabs are supported in preformatted text, you should use spaces instead of tabs, because tab sizes can vary in different browsers.
Literal text
There are many features in HTML that the translator doesn't support. If you want to add advanced or unsupported HTML commands to your document, select the text and then click HTML Literal Text in the stylesheet palette in the HTML stationery (or choose Text Color from the Style menu and select a shade of red).
Technical details
This section describes some of the details of the HTML tags used by the translator.
Character formatting HTML has two kinds of text styles,
logical and
physical. Logical styles are interpreted differently by different browsers. For example, the logical style <em> (that is, "emphasis") may be represented as red single underline by one browser and italics by another. Other examples of logical text styles are <strong> and <cite>. Physical styles, such as italic, underline, and 11, 12, or 13 point bold, are represented as typed. When you format text as italic, underline, or 11, 12, or 13 point bold, the ClarisWorks HTML translator tags these physical ch
aracter styles with logical character styles, like this:
These types of characters Are assigned this HTML tag
Italics <cite>
Underline <em>
Bold (11, 12, or 13 point only) <strong>
Note: If bold text is any size except 11, 12, or 13 points, the translator tags it as a header. See "Headers," below.
International characters The translator supports most of the ISO Latin 1 character set standard on both export and import.
Special characters Some characters (< > & ; and /) are used in HTML tags. If you type the characters <, >, &, ; or /, the translator interprets them as typed. If you want the characters to be interpreted as part of HTML tags, style the tags as literal text. See the section "Literal text."
Paragraphs and carriage returns The translator tags as a paragraph (<P>) any text followed by a hard return (created by pressing the Return key). The translator tags as a break (<BR>) any text block followed by a hard return that is formatted by placing the insertion point in the text, choosing Paragraph from the Format menu and then setting Space After to 0 (zero).
Headers A header is a logical style. The size depends on the type of header. Browsers usually insert white space above and below the header and display headers as bold.
If a text is bold, the translator checks the font size and then tags the bold text according to these rules:
If the bold text is this size The translator tags the text as
Greater than or equal to 20 points <H1>
Greater than or equal to 18 points and less than 20 points <H2>
Greater than or equal to 14 points and less than 18 points <H3>
Greater than 10 points and less than 14 points <strong>
Greater than 9 points and less than or equal to 10 points <H5>
Less than or equal to 9 points <H6>
Lists For each list level, the translator inserts the tag <OL> for an ordered list and <UL> for an unordered list. For each list item, the translator inserts a list-item tag (<LI>).
Horizontal rules If underscores begin and end with a hard Return, the translator inserts the <HR> (horizontal rule) tag in the HTML document.
About this HTML translator
The HTML translator included with ClarisWorks 4.0 represents the joint efforts of Claris and a dedicated team at the
Highly Interactive Computing Project4 (Department of Electrical Engineering and Computer Science) at the University of Michigan in Ann Arbor.
Claris would like to express its thanks to the Highly Interactive Computing Project, including:
Brian Sullivan
Ryan Day
Sean DeMonner
Jeff Spitulnik
Amanda Pryor
Edward Andrews
Craig Braman
Elliot Soloway
Claris also extends its thanks to Dr. Barbara Kurshan of Educorp Consultants.