A Simple Guide to the Preparation of Web Documents

Japanese Bibliography, Columbia University, Fall 2000

By Henry Smith

UPDATE: This guide was originally written for Netscape Composer, but when AOL took over Netscape in 2005 and created the clunky v. 8, it also eliminated the Composer function, which was the only thing that continued to make Netscape preferable to Mozilla. But thankfully, Composer survives in the Mozilla Suite, which may be downloaded for free at http://www.mozilla.org/products/mozilla1.x/. If you have an older version of Netscape (up to v. 7), you will already have Composer.  NOTE: the Composer function is not included in Mozilla Firefox.  Please also note that since this guide was written several years ago, the Composer program has been continually improved, and will do more than is indicated below.

This guide explains how to prepare simple Web documents on a PC, using the Composer function of Netscape (now Mozilla). It explains how to make links, but does not go into more advanced matters like the preparation of images or the creation of tables and frames. (If you are using a Mac, the procedures are generally the same, but various small details will differ.)

For detailed information on setting up your own Web page on a Columbia server, on transferring files to your Cunix account by FTP, and on changing permissions, go to the site provided by ACIS on "How to Publish Your Pages on CU Web" .
 

CONTENTS

1. Create your document
2. Convert the document to HTML
3. Open the document in MozillaComposer
4. Preview the document
5. Edit the document
6. Make the necessary links
7. Take a look at the HTML code



1. Create your document.

It is generally easiest to prepare your document in the word-processing program to which you are accustomed. Keep formatting commands to a minimum, since many of these will either disappear or create complications on conversion to HTML. Avoid all use of tabs (which will be converted to spaces in HTML, so it is best to use spaces from the start), all variable line spacing, and all special paragraph formatting.

There is no problem, however, with any normal character styles, such as bold, italics, underline, or superscripting. Even footnotes will generally be converted properly. For Japanese long vowels, use the circumflex, which will convert properly to HTML.(1) In naming your file, AVOID ALL BLANK SPACES, since these cannot be used in UNIX when the document is posted to a Web site. The convention is to use an underscore ( _ ) instead of spaces.


2. Convert the document to HTML

Once you have completed your document, convert it to HTML using the "Save As" command and choosing the HTML or (in recent versions of MS Word) "Web page" option. (If your word-processing program cannot convert to HTML, you should get a more up-to-date program.) Note that HTML documents must have one of two possible extensions: ".htm" or ".html". There is absolutely no difference between the two (the shorter one existing to accommodate the three-character limit in Microsoft DOS and Windows), and you can freely mix them on a web site. But remember that they are still different file names, so that when you call for a particular document, it must have the correct extension.


3. Open the document in Mozilla Composer

Load Mozilla. The quickest option is to use Ctrl-O (or go File - Open Page), although you can also switch first to Composer (using the "Communicator" drop-down menu or clicking on the small Composer icon to the bottom right of the screen) and then choose an "Open" command. Choose the option "Composer" for the choice "To open the file or location in." Then click on "Choose file" to browse for the location of the file on your computer. Click "Open" when you have located the file.

Note that a new window has now been opened, in Composer (as indicated at the end of the title bar on the top, in a different program icon at the bottom of your screen, and in a different set of commands on the Menu bar).

The opened file may not appear as it did when you created it. In particular, if you converted from certain versions of MS Word, it is likely to be filled up with lots of weird-looking yellow-and-blue brackets pointing in different directions. If you Preview the page [see below] immediately, it will probably look ok in the browser, but the minute you save any changes, much of the paragraph formatting will disappear, presumably because Microsoft does not want you to be using Mozillato edit your Web documents. [Microsoft's browser, Internet Explorer, does not include an editing function: you must acquire the separate program known as "Front Page," which is much more of a hassle to use than MozillaComposer.] The funny brackets are "span-style" markers and once you start editing, they can be considered as garbage: you can delete them all with impunity, although this is a very tedious process, since there is no known way to get rid of them all at once. It does no harm to leave them, since they will disappear when you preview the document in the browser. Unfortunately, they obstruct a clear view of the formatting, but I have yet discovered no way to delete them all at once. The only way to get around this infuriating Microsoft ruse is to use a program other than MS Word to convert to HTML (although not all versions of MS Word appeared to be equipped with the ruse); WordPerfect, for example, does a very nice job of HTML conversion.

This is a good time to check the page properties of your document, by choosing the "Page Colors and Properties" from the "Format" drop-down menu. The key thing to check here is the "Title" of the page, under the "General" tab. The chances are that some sort of title will already be here, maybe the first line of your document, depending on the word-processing program in which you saved it. But you should check to be sure that it is the name you want, since this is the way in which the document will be identified to the world on a browser; in particular, it is the title that will appear if the page is bookmarked It should be relatively short, but should serve as an accurate description of the page. (You can also enter "Author" and "Description" data here if you want: these fields are normally accessible only for those who look for them in the raw HTML code, but be mindful they will still be public information when the document is put on the Web.) After checking the title, you can go to the "Colors and Background" tab in order to change the background to something less stark than plain white (such as the gray color used in Bib 95).


4. Preview the document

The most important thing to remember about editing your document in Composer is that it will not always look the same when viewed in the browser. In particular, line spacing may be different, and you may notice other changes in the layout. For this reason, it is important to check the document from time to time using the "Preview" command on the Menu bar. If you have made changes in the document, it will require you to Save the changes before you can preview it. The Preview command will open still another window, this time in Netscape. If you close this window, it will then return you to the Composer window to continue editing.


5. Edit the document

Your first task will be to edit the document to make the formatting look proper, which will probably mean adding and/or deleting lines here and there. Be warned that insert and delete commands in Composer do not always act exactly the same way as in a normal word-processing program, because of the nature of HTML. But you will get used to these quirks as you go. If you find that you are having trouble entering extra lines or extra space (which will typically look OK in Composer, but not when Previewed), then try using the Shift-Enter or Shift-Spacebar commands.

You should also familiarize yourself with the formatting commands on Composer's editing menu bar. The first drop-down menu is for standard HTML formats, but you can safely ignore this and rely on the other commands. (If you really want to learn about these, you will find a full explanation in the Help documents for Composer.) You can change the font type and size, as well as the style (bold, italic, underline) of any selected text. Other icons enable you to make numbered or bulleted lists. Particularly important are the commands to the far right, which allow you to indent a selected body of text (or to move it back to the left), and a drop-down icon that enables you to choose among center and flush-left or flush-right for a selected piece of text.

One useful formatting device that you will have noticed in Bib 95 is a horizontal line, which appears in the "Insert" drop-down menu, and as an icon on the menu bar.


6. Make the necessary links

Making links is easy: you just select the text that you want linked, and then click on the "Link" icon (which looks like some links of chain, very cute) on the menu bar. If you are linking to another file on your computer, then just browse to that file using the "Choose file" command, or fill in the URL if you are linking to an external Web site.

Give some thought to how much text you select when you make a link, since that segment will be highlighted. It is easier for the viwer to have a larger area to click on than just a single word. But sometimes it looks funny to have too much highlighted. Use your judgement. If you want to remove a link (or have trouble shaking a link when you are adding text), use the "Remove link" command in the "Edit" drop-down menu.

It is also possible to make links to specific locations within a file, but you must first create what are known as "targets" at those locations. This is also very easy: just place the cursor at the point where you want the target to appear, and click on the "Target" icon on the menu bar (which, sure enough, looks like a target). Then give a name to the target; it is best to choose one word (or to separate words with an underscore rather than a space), since only the first word of the name will be used in HTML to identify the target. After naming the target, click "OK." A little target icon will appear in front of the cursor.

All targets that have been created for a particular document will appear in the large box on the lower left of the "Link" dialogue box that appears when you create a links. The default is for the current document you are working on, but you can select other Web documents on your computer as well. Just double-click on one of the target names to choose it as the place to which you wish to make a link.


7. Take a look at the HTML code

You don't need to know anything at all about HTML code in order to create your Web document. In time, however, you may get interested, since the only way to do real fine-tuning on a Web page is to edit the HTML directly. You can view the HTML version of any Web document in a browser (in Mozilla, go Ctrl-U or View - Page Source) or in Mozilla Composer, by choose Edit - HTML Source or click on the "HTML Source" tab to the lower left.  If you wish, you can make changes in the HTML code at this point.
 



NOTES:

1. For those using recent versions of MS Word, hold down Ctrl+Shift together and hit the numeral 6, then release the Ctrl+Shift keys and hit whatever vowel you want under the circumflex.  It works for upper-case vowels as well.  This is faster, once you get used to it, than going to the Insert--Symbols chart.  If you wish to insert a circumflex in HTML code, go to HTML Source and enter:  ô  (for a “ô”; for any other vowel, including upper-case, simple replace the “o” with the appropriate letter).  Or simply copy and paste the following:  ô  û  Ô  â  ê.   UPDATE:  The newest versions of HTML include code for proper macrons; the HTML entity is ō for ō, and ū for ū.)  Or just copy and paste: ō   ū