Manfred Kuechler

Last Update: Jan 6, 2006

How to produce html (web) documents with MS Word or WP

 
Print this document and have it handy when you try to produce a web (html) document with MS Word or WP.

Even fairly old versions of both MS Word (version 97 or better) and WordPerfect (version 8 or better) allow you to create simple html documents without any significant technical knowledge. However, if you have MS Word 97 only, html support is not part of the standard installation and it may be necessary to add this using the MS Word 97 (Office 97) installation CD. To check whether this is necessary or not, start MS Word and check whether "File"/"Save as" includes "html" as a format option. In MS Word 2000, this option is labeled "Web Page (*.htm; * .html)"; in MS Word 2002/XP there is an additional option "Web Page, Filtered (*.htm; * .html)". In contrast, older version of MS Works do not allow to do what is described below; however, more recent versions of the  "MS Works Suite" include the matching version of  MS Word and thus will work.

Both MS Word and WP let you create your document as usual -- using the usual tools to format the text, but now they also offer an option to save the file in the "html" format (with an .htm or .html extension to the file name) rather than in the proprietary format (with an .wpd or .doc extension). The "html tags" which determine the appearance of a document in a web browser are generated in the background. For basic usage one need not be concerned about these. So, you do not need to learn html in order to produce html documents (web pages).


Adding (Hyper-) Links



Basic procedure for adding links to web pages (same for both WP and MS Word):

  1. Open word-processing software in one window
  2. Open web browser (e.g., MS IE, Netscape, Mozilla, Firefox, etc.) in a second window
  3. Display web page of interest in the browser, make sure that "address" (MS IE) or "location" bar (NS) is visible and displays the URL for this page
  4. Highlight the URL in the location bar (by clicking on it)
  5. Use "Edit"/"Copy" to copy the URL to the Windows clipboard; there is no acknowledgment, nothing seems to happen
  6. Switch to the window with the word-processing software
  7. Paste the URL from clipboard -- either using "Edit"/"Paste" or CTRL-V from the keyboard (holding down the CTRL key while pressing "v" (make sure that you start on a new line or that you leave at least one space separating existing text)
  8. Enter a space or press "Enter"; if your word processing software is set up accordingly (see below) the pasted URL will turn form "black" to "blue underlined"
  9. If URL stays black, you need to add the link manually (see below)
Adding links in MS Word manually
  1. Make sure that you have saved your document (the normal way as .doc MS Word file)
  2. Select (highlight) any string of text and go to "Insert"/"Hyperlink ..."
  3. In the "Insert Hyperlink" window, paste the URL into the box labeled "Link to file or URL" (MS Word 97), "File or Web page name" (MS Word 2000), or "Address" (MS Word 2002), then click OK
Setting options in MS Word for automatic link creation and activation (may already be set this way)
  1. Tools/AutoCorrect, select "Autoformat as you type" tab
    2. In section "Replace as you type", check box labeled "Internet and network paths with hyperlinks" (all MS Word versions)
  2. For text already existing, do the same under the "Autoformat" tab (all MS Word versions)

Adding links in WP manually
  1. Select (highlight) any string of text and go to "Tools"/"Hyperlinks ..."
  2. In the "Hyperlink Properties" window, paste the URL into the box labeled "Document/Macro", then click OK

Setting options in WP for automatic link creation and activation (may already be set this way)

  1. Tools/Quick Correct/Quick Links
    2. The box "Format words as hyperlinks ... " should be checked (maybe uncheck and  recheck, OK). This causes the automatic construction of  a link whenever a text string starting with "http:", "ftp:", or "mailto:" is entered (either via keyboard or paste from clipboard)
  2. Tools/Hyperlinks ...

    3. The box "activate hyperlinks" should be checked. The second setting leads to pop-up boxes showing the actual URL underneath the "anchor text" when the mouse is moved over the text string and would cause WP to pass this URL on to a web browser (possibly start a web browser in the first place) if the link is clicked.
Notes:
1. The manual method is preferable as you can choose any text string as "anchor" for your link. By choosing descriptive wording it can be made immediately clear where this link will lead to. Example:  PFAW statement about the confirmation of Alberto Gonzales rather than http://www.pfaw.org/pfaw/general/default.aspx?oid=17596
2. When using the direct paste method, any subsequent editing change to the link will only change the visible part, not the underlying link. Thus, the visible URL and the underlying URL may be different -- which can lead to great confusion. The underlying URL can be edited as well, but this must be done via "Tools"/"Hyperlinks ..."

Adding Images

Add images (photos, charts, graphs) as you would normally do in your word processing software -- either by going to the "Insert" menu (e.g., by adding an image which you have saved as a separate file already) or by copying-and-pasting. A separate document discusses how to save images from the web, but you can create your own charts and graphs with, e.g., MS Word, or you can use your own digital photos. If you use the latter, make sure that  you reduce the dimension and use a high level of compression to keep the file size in check.

Final conversion to htm format

While both WP and MS Word documents (when saved in the usual way as .wpd or .doc files) can contain clickable links, the interaction with a web browser is not always smooth and does not always work. Therefore, once you are finished with the document save the final document as "html" going to "File"/"Save as ..." and selecting "html" or "Web page" as format.

The screen shot below illustrates this final step: converting a document in .doc (the usual MS Word) format into .html:


And here is a screen shot for the same final step, but using a document in .wpd (WordPerfect) format to start with:


After you have saved the html version of the document, make sure that it works okay by opening the document (file) in a web browser. In Netscape, go to "File"/"Open Page .." and enter the path for the file in the top box. Alternatively, click "Choose File .." to find your htm file on your computer. Then click "open", the document will display. In MS IE, go to  "File"/"Open ...", then select "Browse" to find your htm file on your computer or type its "path" directly into the box. Once your document is displayed by the browser, check whether all links are properly working, i.e. that they lead to the web pages they are supposed to lead to. After this last check, the file is ready for submission -- depending on what the assignment calls for  -- either on a (floppy) diskette or via the Bb (the "Drop Box" or a specific "assignment"). As to latter, look for specific help files on your Bb course site. 


Complications when the document contains images

 
When the document contains images, the situation gets more complex. In contrast to .doc and .wpd files which typically contain all information about a document (text and all images), .html documents consists of a main file (which contains the text) and a separate file for each image.  When converting to html, MS Word puts all these images files into an associated folder which a matching name. In the example above, if the file "Christina_Matthes.doc" contains any images, MS Word would create a main file named "Christina_Matthes.htm" and a folder named  "Christina_Matthes_files" and this folder would contain all the image files (if necessary, converted to a format suitable for the web like ".gif", ".jpg", and more recently ".png"). Also, the main file  "Christina_Matthes.htm" would contain information where these image files are located relative to the location of the main file.

I don't have access to the recent version 12 of WordPerfect, but WP2000 (also known as WP9) contains some glitches so that  the images in the converted html file often do not show when opened in a browser. I assume the problem has been fixed in WP 12, but I don't know for sure.

While it makes no difference for the user during the conversion step whether the document contains images or not, i.e.,  no special directives have to be given, it makes a big difference when it comes to moving the converted  .htm document  (putting it on a web site, sending it via e-mail, copying it to a floppy diskette or to other portable devices like "pen" or "USB" drives, etc.). Then, great care needs to be taken that not only the main file gets moved, but all the associated images files get moved as well and that the relative location of main file and image files stays the same. As this can be tricky, it is a good idea to use a "zip" utility (like WinZip) to package main file and all associated files into one ("Christina_Matthes.zip") zip file and move this .zip file. This .zip file must also include "path information", i.e., the name of the folder where the image files should be put once the .zip file gets unzipped at the new location. (More details)


 Additional Notes

1. Both the Netscape browser (Netscape Navigator) and Mozilla come with a companion html editor (Netscape/Mozilla Composer). You can open your html documents in the Composer, if there is a need to make changes (or you can go back to your word processing software). You can also use Netscape/Mozilla Composer to generate html documents from scratch. Almost all documents you see on my course pages are generated with Netscape/Mozilla Composer. It is a very convenient tool. Consider this as an alternative, if you only have truly obsolete versions of MS Word or WordPerfect or some other word processing software not including html support such as older versions of MS Works.

2. The automatic htm conversion by MS Word actually produces "XML" documents. The advantage is that starting with MS Word 2000, all special features that Word documents (.doc files) may contain are preserved and that you can go back and forth between .doc and .htm format without losing anything. The disadvantage is that these files are unnecessarily large and that additional editing (using other software like Netscape Composer) is often rather difficult as the XML code is messy. So, it may be better to save document as simple or "compact" htm files. If you have MS Word 2000, you can download and install the "MS Office HTML Filter 2.0" on your home computer. This will add another item to the "File" menu (of MS Word 2000): "Export"/"Compact HTML". Use this new menu item, to produce a more standard htm file with MS Word. If you have MS Word 2002 (aka XP), there is no need to download and install this filter: It is integrated with the "File"/"Save as" menu, select "Web Page, Filtered" as "type".

3. At Hunter, all computer labs should be running at least MS Word 2002/XP, if not MS Word 2003, and MS Word should be set up to convert URLs into web links automatically.