Return to CALL resources page | esl_home index
Return to the Writing for Webheads page
Next visit, start at http://www.netword.com and GO to the netword "webheads"


Creating HTML in MS Word 97
Step by Step

Created by Vance Stevens, MLI

To author HTML in Word, that option has to have been installed on your Office 97 setup. Click here if you don't have or need help with the HTML authoring installation.

This hypertext tutorial will guide you in the creation of a document where all the interaction occurs within the document through jumps to and from bookmarks placed in the document. You can also jump out to different files as well as to bookmarks by using the appropriate option when you insert hyperlinks.

For example, this file with its blue background is different from the file with the yellow background to which it is linked. Except for the color change placed here for illustration, whether the jump is within or outside a file should be transparent to the user.

For simplicity here, we will learn to bookmark a single document and jump around in that. You'll get the most out of this tutorial if you reduce your Netscape window and open a Word one, and try out the features as you go.

What do you want to do now?

Go on to the next logical step.

Return to the yellow document, "whathtml?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Creating HTML in Word

Table of Contents

Most of the process of creating and editing HTML files is the same as for Word. HTML file creation and development is fairly intuitive but differs from Word in the following components. Click on a component to find out more about it.

HTML File Creation

HTML File Enhancement

Creating Headings

Adding Background

Making Bullets

Horizontal Lines

Inserting Images

Creating those nifty little pull-down boxes

Creating Hyperlinks

Bookmarking Your Document

Linking to Bookmarks

Changing and Removing Bookmarks

Linking to Files

Saving Your HTML File

Editing Hyperlinks

If you're not sure about what to do, then we'll see how to create an HTML document using Word.

What do you want to do now?

Select one of the topics above, OR

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML File Creation

With Word, you can create two kinds of documents, Word documents, and HTML documents. If you start by creating a word document, you will have to save it later as HTML.

To open a Word document, use: File / New / General / Blank Document

To open an HTML document directly, use: File / New / Web Pages / Blank Web Page

What do you want to do now?

Jump to the table of contents at the top of this document

Go on to the next logical step

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Saving Your HTML File

Depending on how you created your document, when you pull down the File menu, you should see Save options as follows:

If your document is already HTML, you will see: Save, Save as ... , Save as Word Document. Here, you choose Save, and give your document a name if necessary.

If your document is in Word format, you will see: Save, Save as ... , Save as HTML. Here you choose Save as HTML, and give your document a name.

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML File Enhancement

Creating HTML, or Web documents, in Word is as easy as creating Word documents. Basically, you just write out what you want to say. However, with Web documents, you want to bear in mind how your audience is interacting with the text. Also, formatting features are liable to be more prominent and varied in Web documents than in prose ones, and these enhancements take on more communicative import. Here, you can find out about the following enhancements:

Creating Headings

Adding Background

Making Bullets

Creating those nifty little pull-down boxes

Click on one of the items above or below.

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Creating Headings

Highlight the text you want as a heading.

Center it if you wish.

Either click on the big A (repeatedly if necessary) and B I U as needed or use Format / Font / (select size and attributes) (click OK)

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Adding Background

You can easily color or texture the background on your web document. Here's how:

Format / Background / (select a color; it is immediately applied)

Format / Background / Fill Effects / (select a shaded texture, immediately applied)

This process will copy a file to the folder where your HTML document is stored. When you transport your Word/HTML document, make sure you copy the associated image files as well.

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Making those nifty little pull-down boxes

Here's what we know so far. If you use:

Insert / Forms / Dropdown Box ... you get what's inserted below (you can only see this with a Java enhanced browser)

Our challenge now is to get text into the boxes. Can you crack this conundrum??

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Making Bullets

Easy, just highlight the text you want bulleted, then use:

Format / Bullets and Numbering / (choose Bulleted or Numbered) / (select a scheme) (click OK)

This process will copy a file to the folder where your HTML document is stored. When you transport your Word/HTML document, make sure you copy the associated image files as well.

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Horizontal Lines

Place the cursor where you want the line, then use:

Insert / Horizontal line / (select one) (click OK)

Once the line is on the page, you can click on it to expose its handles and then drag the handles to resize the line.

This process will copy a file to the folder where your HTML document is stored. When you transport your Word/HTML document, make sure you copy the associated image files as well.

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Inserting Images

Place the cursor where you want the image, then use:

Insert / Picture / (select Clip Art or From File) (browse for the image or file containing the image) (click OK)

You have a number of options for inserting objects using this command sequence. In Clip Art, you will see a number of images and also be offered access to pictures, sound, and video files, as well as an option to browse the Web to locate art to import into your document. The From File option assumes that you have images in files somewhere and that you can locate these on your hard drive. There are a number of such images in the /Program Files /Microsoft Office / Clip Art folder on my machine, created during installation of Microsoft Office 97, and these files may reside on your machine as well.

When you get your standard issue digital camera, you can have fun with this feature

The image at the top of this page came from /Program Files /Microsoft Office / Clip Art /Icon / pencil_paper.gif. Click here to check it out.

This process will copy a file to the folder where your HTML document is stored. When you transport your Word/HTML document, make sure you copy the associated image files as well.

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely


Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Creating Hyperlinks

Bookmarking Your Document

Before you can jump around in a document, you have to create labeled locations. Then you jump to those labels. Here's how:

Insert / Bookmark / (write in bookmark name) (click OK)

What do you want to do now?

Jump to the table of contents at the top of this document

Go on to the next logical step

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Linking to Bookmarks

To effect the jump from label to label, use:

Insert / Hyperlink / at "Named location in file" click Browse / (select bookmark) (click OK) (click OK again)

What do you want to do now?

Jump to the table of contents at the top of this document

Go on to the next logical step: Finding your Bookmarks

See how to link to files

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Finding Your Bookmarks

Unfortunately, you can't see your bookmarks. However you can find them. Here's how:

Insert / Bookmark / (highlight the bookmark you are looking for) (click Go To)

 

What do you want to do now?

Jump to the table of contents at the top of this document

Go on to the next logical step

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Changing and Removing Bookmarks

The bad news is, you can't change a bookmark. The good news is, there's a workaround.

You can remove bookmarks and put them back correctly if needed. Here's how:

Insert / Bookmark / (highlight the bookmark to be deleted) (click Delete) (click Close)

 

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Linking to Files 

To effect the jump from file to file, use:

Insert / Hyperlink / at "Link to File or URL" click Browse / (select file) (click OK) (click OK again)

Be sure that "Use relative path for hyperlink" is clicked on. Then when you transport the associated files, simply be sure that you keep them in their original hierarchical structure.

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.

 

 

 

 

 

 

 

 

 

 

 

 

 

Editing Hyperlinks

Right-click on the hyperlink you want to edit

Choose Hyperlink / Edit Hyperlink / (make the changes directly to the dialog box) (click OK)

What do you want to do now?

Jump to the table of contents at the top of this document

Return to the yellow document, "What is HTML?"

Leave this tutorial completely

Use the Back Arrow key on your web browser to page back through screens you've already seen.


Use your browser's BACK button to return to a previous page

For comments, suggestions, or further information on this page, contact Vance Stevens, page author and webmaster.

Last updated: June 29, 1999