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
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.
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.
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
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
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.
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 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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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 pageFor comments, suggestions, or further information on this page, contact Vance Stevens, page author and webmaster.