About: Using Microsoft Word to Create Web Content

Last updated: 5/20/01

[Return to Web 101 Welcome Page]

Background

You can use Microsoft Word to create Web content. You can create and edit (change) HTML files, convert files back and forth between the HTML format and other file formats such as the Microsoft DOC format for word processing files. Here are the details for the various versions of Word:

Creating HTML Documents with Microsoft Word

For the most part, creating a web page with Microsoft Word is much like creating an ordinary document. The menus change once you save a Word document as HTML, so you probably want to save as HTML as soon as possible - before you actually write anything, for example. Depending on the version and installation choices (it is even possible not to install HTML at all),

You can use fonts, formatting such as bold, italics and underline, and bulleted and numbered lists. Be careful with fonts; any font you use must exist on the user's computer. If you are used to print documents, be sure to try font color and background color, which come free on the web but are expensive in print. Spell check is available.

Links

If you have more than one web page, you will need to link between them. A link is from somewhere and to somewhere else, and so has two parts:

  1. In the document that you link from, the text that is underlined and blue, that you click on to execute the link. We will call this the link text.
  2. The document that you link to, that opens up when you click on the link in the from document.

To make a link, make sure that both files are saved, and saved in the same drive/folder. Make a link from the first file to the second file by:

  1. Create and then select the link text - the text that you want to be blue and underlined
  2. Click on the chain or link tool button
  3. Use the "Choose" button to navigate and choose the file that you want to link to.
  4. Click OK.
  5. Make sure that the link tag (starts with <a href= and ends with </a> does NOT have "file" in it. That would tell browsers to find the file on the computer you are using when you composed the web page, which they would not have access to. Result: a failed or broken link, and you look foolish in public.

You should always check your web pages and especially the links before putting them on the web server. That is, make your mistakes in private, not in public. You can open view files stored on your local computer using a web browser using "File / Open..." or "File / Open Page..." In Navigator/Communicator, be sure to open the files in the browser, not the editor (Composer). In the editor, clicking on a link does not activate it, but instead leads to editing the link text. In the browser, you cannot edit but the links will work. Some aspects of web pages require that they be on a web server, but not these. To double-check your links, hold the mouse icon over the link, without clicking. The file that will be linked to is shown on the status bar at the bottom of the window, on the left-hand side. Again, make sure that the link does not have the word "file" in it.

You can also link to another web site by inserting the full URL, starting with "http://..."

Pictures

You can use Word to insert pictures into a document, using clip art or a wide variety of graphic file formats (the web formats - gif and jpg - or wmf, bmp and many more). You can also create special effects using Word Art or make drawing using Word's drawing tools. On the other hand, web graphics only use two main formats, gif and jpg. (A third format, png is more versatile and is becoming popular.) Another difference between graphics in Word and HTML is that in Word, when you insert a picture it becomes part of the Word file, while in HTML graphics remain separate files, gif or jpg. What goies in the HTML document is a link to the graphics file, not the graphics file itself. Word bridges these difference in a very nice way; when you Save as HTML, word converts any pictures to gif files, and puts the required links to those gif files in the HTML document. If you don't have a graphics program, this is actually useful even for converting graphics in another format to the gif format for use in a web page.

You will have to upload the graphics file(s) to the web server you are using, in addition to uploading the HTML file(s). To do this, you will need to know the names of the graphics files. To learn the file names of your graphics, choose the menu item "View" and then "HTML Source", then look for the "img" tags inside the angle brackets <> (these are the symbols that start and end HTML tags). The file name will be in quotes after "src=". For example in <img src="MagGlass.gif">, the graphic file is MagGlass.gif, and this file will have to be uploaded to the web server along with the HTML file.

However, there is one difficulty with this system: if you let Word choose the file names, rather than choosing them yourself, the file names will be a root such as "image" or "img" followed by a number and then the extension (.gif). This can cause several difficulties:

Instead of letting Word choose file names for graphics, control them yourself, and also choose descriptive names so that you can tell them apart. Unfortunately, the method is cumbersome and obscure, but if you will be developing web pages on a regular basis, it is worth the effort. Here is how:

  1. Save the HTML file normally. This will convert the graphic to a gif file with one of the standardized names.
  2. Click on the graphic to select it, then right-click and choose "Save Picture As..." and save it with the name that you want to use.
  3. Choose the menu item "View" then "HTML Source" and change the standardized name for the graphic, after "<img src=" to the new name, including the .gif extension.
  4. Choose the menu item "View" then "Exit HTML Source", and the graphic should still be there. If not, you may need to refresh the document, for example by closing it or reopening it, or alternatively by choosing the menu item "View" then "Toolbars" and choosing the "Web" toolbar, then clicking on the "Refresh" button (two arrows chasing each other clockwise). If you do not see the graphic after these methods, then double-check to make sure that the graphic file name exactly matches the name in the img tag.

You will need to do this for each graphic.

Converting a document in another format to HTML

You can use Word to convert an existing document to HTML by reading the file in and then saving it as HTML as above. Both "doc" files in the Word format and documents in other formats can be converted, as long as they can be read into Word. Which format you can read depend upon which filters are installed. Filters can be installed with the original Word installation, or they can be installed afterwards if you have the installation diskettes or CD-ROMs.

Uploading to a web server.

For information about uploading a web page to a web server, follow this link.

More Detail About Working With the Versions of Internet Assistant in Windows (Word 6 and Word 7 only):

NOTE: This section is not a User's Guide for Word with Internet Assistant. Internet Assistant is used only with earlier versions of Word  - Word 6 and Word 7). This section is intended primarily

Versions:

Creating and Converting HTML documents using Word with Internet Assistant

The normal Word file format is DOC (For Office97, this reportedly changes to HTML as the default. In Word, with HTML support, documents can be saved as HTML in several ways:

User Problems with Both Versions of Internet Assistant (1 and 2):

  1. Users have assumed that once they install Internet Assistant 1, all documents are automatically in HTML format. This is not true. When you install Internet Assistant, you do not loose any functionality of Word. You can still use Word in exactly the ways you used it before the installation. Specifically, the default file format is still DOC. You must use one of the methods above to create an HTML document.
  2. Some users get confused when it seems that they cannot edit (make changes in) a document. The most likely problem is that you are in "Browser view" instead of "Edit view." You must be in Edit view in order to edit. (Normally, a Browser of any kind cannot be used to make changes in a document that is being browsed.) There is an icon or button that is on the "Formatting toolbar", which is normally the lower toolbar at the top of the screen and at the extreme left side of the screen. This icon has a right-pointing arrowhead and either a pair of glasses or a pencil. The arrowhead indicates "switch to", the glasses indicate Browser view, and the pencil indicates Edit view. So, if you see the glasses, you would click this button to switch to the Browser view, and so you must be in Edit view, so edit away. Conversely, if you see the pencil, you would click this button to switch to the Edit view, so you must be in the Browser view. This is why you can't edit; click the button to switch so that you can edit.
  3. I believe that we have seen Internet Assistant 2 scramble Definition Lists in the same way as described for Internet Assistant 1 in section 2.3 below.

Problems with Word 6 with Internet Assistant 1

Except as noted below, all of the problems below are problems ONLY for Internet Assistant 1. And, lest I seem to be warning you off of Internet Assistant 1, I believe that, unless you have Windows95 with Word 7 or higher, Internet Assistant 1 is the most productive tool available for creating Web documents.

  1. Users need to realize that the normal toolbar icons will not "work" with HTML. For example, selecting text, clicking on the "B" icon (Bold) will make the selected text appear bold on the screen, but will not put in the HTML Tags for bold, and so the selected text will not appear bold on subsequent edits, or to other users of the document. The only Word toolbar icons that "work" are the "promote" (left arrow) and "demote" (right arrow) icons. For other formatting tasks, use the pull-down format menu as below:
    1. To make selected text bold, select "Strong,STRONG."
    2. To italicize selected text, select Emphasis,EM."
    3. To make a bulleted list out of selected text, select List Bullet,UL." Each paragraph becomes a bulleted list item.
    4. To make a numbered list out of selected text, select List Number,OL. Promotions and demotions in numbered lists initially seem not to change the numbering. Everything is OK, but to work around this problem, after creating a numbered list, first save the file, then close the file, and finally re-open it. (Beware; numbering schemes are Browser-dependent.)
  2. Internet Assistant 1 does at least three very bad things to advanced HTML Tags, if the file is saved from Word. These are:
    1. If the <BODY> Tag includes any options, such as BGCOLOR, those options are removed when the file is saved. For example, <BODY BGCOLOR="FFFFFF"> (white background) becomes <BODY>, resulting in the Browser's default background, which is white in some Browsers and gray in others.
    2. If a link goes to a specified location inside another document, the specified location is deleted, redirecting the link to the beginning of the document. For example,
      <A HREF="list.htm#documents">, which links to the document LIST.HTM at the HTML anchor (location) "documents" becomes <A HREF="list.htm">, which links to the same document, but to it's beginning. (A link to another location in the same document, such as <A HREF="#documents"> is saved correctly.
    3. Definition lists scrambled, at least in the case of lists defined by <DT> and <DD> tags (with their associated ending versions with "/"). This is the type of list that seems to work best with Netscape Navigator. This or something similar may also happen with Internet Assistant 2.

The behavior seems to be, if a Tag can be partially used by Word, all features that are not used are deleted. If this is indeed the case, other Tags may also be affected in this way.

Conclusion: if a file contains such Tags, do not save any changes as HTML in Word 6 with Internet Assistant 1. (Word 6 can still be used with such files in the "Text Only" mode. In this mode, Tags are displayed on the screen and formatting Tags have no on-screen effect on the formatted text. But, be very careful to save such files as "Text Only"; otherwise, the HTML Tags will be corrupted as described above.)