Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

The Complete Idiot's Guide to Creating an HTML Web Page

Chapter 18 -- The Word Wide Web: Internet Assistant for Microsoft Word

Chapter 18

The Word Wide Web:
Internet Assistant for Microsoft Word




CONTENTS

I think one of the reasons HTML seems so, well, primitive, is that most of what you're coding is stuff that even the most brain-dead word processor has been able to handle for years. Formatting characters, creating paragraphs, setting up lists, and working with heading styles are all old hat to today's crop of word processing programs. Even inline images and tables are becoming de rigueur in high-end word pro circles. That leaves only hypertext links as a challenge, and how hard can that be to implement?

In other words, it seems entirely logical that you should be able to chuck the old HTML-tags-in-a-text-editor model out the window and, instead, create top-notch Web pages from the friendly confines of your favorite word processor. And you know what? You can! Microsoft's Internet Assistant for Microsoft Word turns Word into a full-fledged HTML machine that lets you create Web pages as easily as you pound out memos and letters. This chapter takes you through the basics of using Internet Assistant to put together Web pages.

Grabbing Internet Assistant

Internet Assistant isn't a separate program. Instead, it extends the functionality of Word by attaching itself-Alien-like-to the program. The result, as you'll soon see, is a new collection of menu commands and toolbars that are HTML-aware. As an added bonus, you can even use Word to browse the Web. Gnarly!

So your first order of business is to grab the file that includes the Internet Assistant stuff, and a setup program. Internet Assistant comes in two flavors:

Internet Assistant for Word for Windows 95  Version 2 of Internet Assistant works with Word for Windows 95. (This is the version I'll be covering in this chapter, although I'll point out the differences between versions as we go along.) To download this version of Internet Assistant, head for the following Web page:

http://www.microsoft.com/msoffice/freestuf/Msword/download/ia/ia95/default.htm

Internet Assistant for Word for Windows 6  Version 1 of Internet Assistant is designed for Word for Windows 6. To get this version of Internet Assistant, toddle over to the following Web page:

http://www.microsoft.com/msoffice/freestuf/Msword/download/ia/ia1z/default.htm

In both cases, look for the section named How to Download and Install Internet Assistant, and click on the "download" link (the actual link text depends on which version you're downloading). This will take you to another page that gives you more info and includes a link that downloads the file. When you select this link, your browser will ask what you want to do with the file. Select the "Save to Disk" option (or whatever) and then choose an empty folder or directory for the destination. (On my system, I've set up a directory named DOWNLOAD that I use as a sort of electronic waiting room for files that I download from the Internet and computer bulletin boards.)

Check Your Word Version!
If you plan to use Internet Assistant version 1 with Word for Windows 6, you need to make sure you have the correct version of Word 6. In Word, select the Help menu's About Microsoft Word command. In the About Microsoft Word dialog box that appears, check out the version of Word you have. If it just says 6.0 with no letter after it, you'll need to upgrade Word to version 6.0a. You can get a "patch" from the Microsoft FTP site:
ftp.microsoft.com/softlib/MSLFILES/WORD60A.EXE
Running WORD60A.EXE extracts a few files. The file named README.TXT gives you instructions on how to proceed.

Once the file is sitting pretty on your hard drive, follow these steps to install Internet Assistant:

  1. If you're using the Word 6 version of Internet Assistant, double-click on the file you downloaded. This extracts the compressed files that were crammed into the downloaded file.
  2. For the Word for Windows 95 version, double-click on the file you downloaded. A dialog box then asks if you want to install Internet Assistant. Select Yes to continue. For the Word 6 version, run the SETUP.EXE file that was decompressed in Step 1. An introductory dialog box appears.
  3. Press Enter to continue. After a while, the Setup program displays another dialog box with all sorts of scary-looking legal gibberish.
  4. Gluttons for punishment can struggle through the mumbo-jumbo. The rest of us can just select the Accept button to move on. (In the Word 6 version, you need to press Enter a couple of times before the Accept button shows up.) Setup displays a dialog box showing the location where Internet Assistant will be installed (see the figure below).

    Use the dialog box to select a different location for Internet Assistant.

  5. If you don't like the suggested location, select the Change Folder button (or the Change Directory button, in the Word 6 version), pick out a locale from the dialog box that appears, and then select OK. Otherwise, move on to the next step.
  6. Select the Complete button in the Word for Windows 95 version, or the Continue button in the Word 6 version. If you're running the Word 6 Setup, a dialog box asks if you want to install the browser components. Select Yes or No. Setup starts copying the Internet Assistant files to the location you chose. When the setup program is finished, it displays a dialog box from which you can start Word.
  7. Select the Launch Word button to crank up Word. One final dialog box shows up to let you know that the installation was completed successfully.
  8. Select OK.

Dealing with Documents

When Word starts, you just see the regular Word screen. To get to the HTML goodies, you need to open a new document based on Internet Assistant's HTML template.

Selecting the File menu's New command produces the New dialog box.

  1. Pull down the File menu and select the New command. Word displays the New dialog box (the figure below shows the New dialog box from Word for Windows
  2. In the General tab, highlight the HTML.DOT template. (In Word 6's New dialog box, highlight the Html item in the Template list.)
  3. Select OK. Word opens the new document.

If you'd prefer to open an existing HTML document, here are your choices:

In the Open dialog box that appears, select HTML Document (*.htm) from the Files of type list, highlight the file you want to work with, and then select Open.

Later, after you've made some changes to your new HTML file, here are your options for saving it:

What Happens to Word

Opening an HTML document changes Word's menus and, as you can see in the figure below, the toolbars get a facelift as well. The idea behind these changes is twofold:

Word's toolbars and menus change when you open an HTML document.

Internet Assistant: WYSIWYG Web Weaving

Internet Assistant, like the Netscape Gold editor I covered back in Chapter 15, doesn't show HTML tags on screen. You use a combination of formatting commands (such as boldfacing), styles (such as headings), and objects (such as links and tables) to produce your Web page. All this produces a document with the correct HTML knickknacks, but you don't see any of it. Instead, Internet Assistant just shows you what your text will look like in a browser. That is, Internet Assistant is a WYSIWYG display. (WYSIWYG stands for What You See Is What You Get, although some wags prefer Why Your Screen Will Inadvertently Yield Garbage.) Here are the basic steps you'll follow for each document:

  1. Type in your document text.
  2. If you want to format some text or apply a style, select the text you want to work with. If you're inserting an HTML object such as a link or an image, position the editor's cursor where you want the object to appear.
  3. Choose the appropriate menu command or toolbar button (I'll go through the available commands and buttons in the rest of this chapter).
  4. Save the file from time to time, as described earlier.
  5. Repeat steps 1 through 4 until you're done.

The next few sections expand on step 3 by showing you how to work with Internet Assistant's menus and toolbars.

Got a Hankering for HTML?
If you find you miss the HTML tags, it's easy enough to see them if you're using version 2 of Internet Assistant. Save the document and then select the View menu's HTML Source command. Feel free to edit the tags as necessary, and then select the Close button on the HTML toolbar to return to the regular view.

Adjusting the Title

When you start a new document, Internet Assistant tosses in all the basic tags that define the skeleton of the page: <HTML> and </HTML>, <HEAD> and </HEAD>, <BODY> and </BODY>, and <TITLE>. The default title (in version 2 only) is HTML document for the World Wide Web, which is probably a bit too vague for most folks' needs (!). To change this title, either select the File menu's HTML Document Info command, or click on the Title button in the Formatting toolbar. In the HTML Document Head Information dialog box that appears (see below), use the Title field to change the title and then select OK.

The Title button.

Use this dialog box to adjust the title of your Web page.

Need a New Paragraph? Just Press Enter

Back in Chapter 4 "Laying the Foundation: The Basic Structure of a Web Page," I mentioned that pressing Enter to start a new paragraph didn't work in HTML because you had to use the <P> tag, instead. Internet Assistant changes all that because pressing Enter really does start a new paragraph. In reality, pressing Enter in Internet Assistant adds a <P> tag behind the scenes. With WYSIWYG, all you see is the result: a new paragraph.

Formatting Characters

Thanks to the word processing ground upon which it sits, Internet Assistant has no shortage of options for formatting characters. (See Chapter 5 "From Buck-Naked to Beautiful: Dressing Up Your Page.") You can work with these options using either of the following methods:

The basic formatting options-bold, italic, and underline-are available only from the Formatting toolbar or via keyboard shortcuts. The following table shows you the buttons and keys associated with each option.

Style
Button
Shortcut
Bold
Ctrl+B
Italic
Ctrl+I
Underline
Ctrl+U

For other kinds of formatting, you have the following choices:

Use this dialog box to set some character formatting options.

Working with Styles

Much of HTML involves applying a particular style to a section of text or an entire paragraph. For example, a heading is a style that consists of bold text in a particular font size with an extra blank line before it. So it makes sense, then, that Internet Assistant uses a large collection of defined styles to insert HTML tags.

Internet Assistant gives you two ways to see a list of the available styles:

Much of Internet Assistant's HTML is produced using styles.

In the Style dialog box, styles preceded by a paragraph symbol () are paragraph styles: they apply to the entire current paragraph. Styles with the underlined letter a beside them are text styles: they apply to the currently selected text.

For example, if you wanted to format a paragraph as a top-level heading (the <H1> tag), you'd place the cursor inside the paragraph and then apply the Heading 1,H1 style.

Working with Numbered Lists

Inserting a numbered list in your HTML document is no different than doing it in a regular Word document. To start the list, use either of the following techniques:

Internet Assistant inserts the numbered list container (the <OL> and </OL> tags), adds the first item, and formats it with the List Number,OL style. (This style name is a bit confusing. The item is actually preceded by the <LI> tag, so a better name would be List Number,LI. Oh well.) Enter the item text and then press Enter to generate the second item automatically.

Working with Bulleted Lists

As with numbered lists, creating a bulleted HTML list is just the same as creating a bulleted list in a regular Word document. To begin, use either of the following techniques:

Internet Assistant inserts the bulleted list container (the <UL> and </UL> tags), adds the first item, and formats it with the List Bullet,UL style. Again, enter the item text and then press Enter to generate the next bullet automatically.

Customizing Numbered and Bulleted Lists
Internet Assistant gives you a few options for customizing your lists. For example, if you'd like to use a different numbering scheme or a different bullet style, select the Format menu's Multilevel Numbering command. The Bullets and Numbering dialog box lists all the available choices.

Working with Definition Lists

Definition lists operate a bit differently. Since there is no equivalent in regular Word documents, you have to use styles to build the list. Here's how it's done:

Inserting an Image

Do you feel like snazzing up your page with a nice graphic or two? (I explained graphics in gory detail back in Chapter 8 "A Picture Is Worth a Thousand Clicks: Working with Images.") Here's how it's done in Internet Assistant:

  1. Position the cursor where you want the image to appear.
  2. Pull down the Insert menu and select the Picture command, or click on the Picture button in the Formatting toolbar. The Picture dialog box appears, as shown in the following figure. (Version 1 uses a different dialog box.)
    The Picture button.

    Use the Picture dialog box to construct the <IMG> tag for the graphic you want to insert.

  3. Enter the name of the graphics file in the Image Source text box.
  4. Use the Alternative Text field to enter the text that will be displayed in non-graphical browsers.
  5. (Optional; version 2 only) Activate the Options tab and enter values for the Height and Width. If you want a border, activate the Display Border check box and enter a value for the Border Size. You can also use the Alignment with Text list to select an alignment option.
  6. When you're done, select OK to insert the image.

Inserting Hypertext Links I: Remote Links

Internet Assistant divides links into two categories: remote links that jump to a specified URL, and bookmarks that link to a specific section of a document. (For the complete link lowdown, jump to Chapter 7 "Making the Jump to Hyperspace: Adding Links.") This section covers remote links, and bookmarks are covered in next section.

Here are the steps to follow to insert a remote link in your document:

  1. Place the cursor where you want the link text to appear.
  2. Pull down the Insert menu and select the HyperLink command, or click on the Hyperlink button in the Formatting toolbar. The HyperlinkInsert dialog box appears, as shown in the following figure. (Version 1 uses a different dialog box.)
    The Hyperlink button.

    Use this dialog box to set up the <A> tag for the link.

  3. Enter the link text in the Text to Display field.
  4. Use the File or URL text box to enter the URL you want to display when the reader selects the link.
  5. Select OK.

Internet Assistant inserts a link tag that takes the following form:


<A HREF="The URL you entered">Your link text</A>

Inserting Hypertext Links II: Bookmarks

Recall from Chapter 7that you can insert an "anchor" inside a hypertext document and then create a link that points to that anchor. This enables your readers to jump to specific sections of the document. Internet Assistant uses the term bookmark instead of anchor, but the principle is the same.

To set up the bookmark, highlight the text and select the Edit menu's Bookmark command, or click on the Bookmark button in the Formatting toolbar. In the Bookmark dialog box that appears (see below), enter the name you want to use and then select the Add button. Internet Assistant inserts an <A> tag of the following form:


<A NAME="The name you entered">Your bookmark text</A>

The Bookmark button.

Use the Bookmark dialog box to enter a name for the bookmark.

Now you need to create a link that points to the bookmark you just created. This is almost identical to creating a remote link:

  1. Place the cursor where you want the link text to appear.
  2. Display the Hyperlink dialog box by pulling down the Insert menu and selecting the HyperLink command, or by clicking on the Hyperlink button in the Formatting toolbar.
  3. Enter the link text in the Text to Display field.
  4. Select the bookmark from the Bookmark Location in File list.
  5. Select OK.

Internet Assistant inserts an <A> tag of the following form:


<A HREF="#The bookmark name you selected">Your link text</A>

Constructing Tables

Microsoft Word has been table-aware for a few years now, and the latest versions make it a breeze to set up and format tables in your documents. Happily for us HTML types, Internet Assistant version 2 leverages all this table know-how, so you can create HTML tables just as easily as you can regular Word tables. (I talked about HTML tables ad nauseum in Chapter 11, "Table Talk: Adding Tables to Your Page." Note that Internet Assistant version 1 doesn't do the table thing.) Not only that, but Internet Assistant teaches Word a table trick or two, so that you can adjust things like the table borders, the cell width and spacing, and more.

Internet Assistant gives you two methods for creating a table:

Use the Insert Table dialog box to define your table.

  1. Creating a Table-Method #1  First, position the cursor where you want the table to appear. Now pull down the Table menu and select the Insert Table command. Word displays the Insert Table dialog box, shown in the following figure. Define the layout of your table by entering values in the Number of Columns spinner and the Number of Rows spinner. Select OK and Word inserts the table.
  2. Creating a Table-Method #2  Position the cursor where you want the table to appear, then click on the Insert Table button in the Standard toolbar. A table grid appears. Hold down the left mouse button and drag the pointer through the number of rows and columns you want. Release the mouse button to insert the table.

The Insert Table button.

The Table menu boasts all kinds of commands for fine-tuning your HTML table. Place the cursor inside the table and then choose from the following commands:

Borders This command displays the Borders dialog box, from which you can turn borders on and off and select the border thickness and color.
Cell Width and Spacing  This command lets you adjust the width of individual columns as well as specify the amount of space between each cell.
Cell Type  With the cursor inside a cell, use this command to designate the cell as a header (the <TH> tag) or as data (the <TD> tag).
Align  This command displays the Align dialog box, which enables you to choose the overall alignment of the table as well as the alignment for text within the cells.
Caption  Use this command to enter a caption for the table and to choose whether the caption appears above or below the table.
Background Color  This command lets you specify a background color for either the entire table or just the current cell. (This is an extension used by Internet Explorer.)

A Few Odds and Ends

To round out our look at what Internet Assistant can do, this section presents a few HTML odds and ends, including horizontal rules, character codes, background colors, and more:

The Least You Need to Know

This chapter showed you how to use Microsoft's Internet Assistant to wield the full power and splendor of a high-end word processor-Word for Windows to create Web pages. Time for a nostalgic look back:

If you have Word for Windows 6 (version 6.0a or later), you need version 1 of Internet Assistant. Use the following page to download it:

http://www.microsoft.com/msoffice/freestuf/Msword/download/ia/ia1z/default.htm