IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV

 

 

Creating Web Pages with Word 97 HTML Editor

Table of Contents

Introduction and Objective

So, you've decided that your course should have a web presence—but now what? This tutorial will have your syllabus up and running in no time. Our objective is to create your course syllabus, translate it into HTML—the "language" of the Web—and publish it on a web server. You may elect to enhance your web pages now with the additional features, or begin with a simple design and add features as times goes by.

Back to Top

The IUPUI Central Web Servers

Your home page must be housed on a web server—not simply a server that provides access to shared resources such as WordPerfect Office®, Word®, or Excel®. Your school or department may maintain a web server and provide space on it to the faculty.

Personal home pages, sometimes including syllabi and course pages, are housed in your personal account on the personal home page server. The URL for personal pages is http://mypage.iu.edu/~networkid. Institutional home pages, including course and research interests, schools and departments, may be housed on the Champion server under an institutional Network ID. The URL for institutional Web pages housed on Champion is: http://www.iupui.edu/~networkid. In addition, your school or department may provide space on its Web server for your use.

You must have an account on the machine that will house your Web page(s). To see the network services you currently have, go to the Account Management home page. Click in the line to note your IU status and what you need to do, then click Continue. NOTE: You will need your IUPUI Network ID and password to continue. For assistance, visit the The Support Center's Web site, E-mail a consultant, or phone the Support Center at 317-274-5357. IUPUI faculty can also obtain assistance through the Center for Teaching and Learning, (274-1300), UL 1125, or your Local Support Provider.

To request access (either as a new account or as additional services on an existing Network ID) to either the Champion or Personal Home Page server, use your Web browser and go to the Account Management Web page and follow the prompts.

Back to Top

Using HTML

If you are a "do-it-yourselfer" and wish to create your web pages "from scratch" then you'll need to learn HTML (HyperText Mark-up Language). Feel free to consult one of the many resources available on the Web, including the tutorials, HTML Basics or Beyond HTML Basics. You can find additional resources on Web by Design. Even when you create web pages using an HTML editor, you will most likely find it necessary to "tweak" the HTML tags to "clean-up" areas where the editor became "confused."

Back to Top

Using Word 97 HTML Editor

To simplify web development, there are many HTML Editors for purchase or download. Recent versions of Word and WordPerfect have HTML Editors, or you can choose a dedicated HTML editor such as FrontPage. When using a word processing application to create an HTML file, open the word processed document, then select the menu option FILE : Save As HTML.

NOTE: If your copy of Word 97 does not show this option in the File menu, the Internet options were not installed during installation; use the installation CD and select the missing options to have these installed.

The IUPUI web servers expect that your beginning web page will be called home.html so be sure to save your home page that way.

If your default word processing template includes any options other than the default, such as larger fonts or other special options, when you select Save As HTML, you will see a warning that you may loose that special formatting—that's OK—proceed with your save. You will see that your document is saved, then converted into HTML!

SAVE YOUR WORK OFTEN
Remember a power surge or a slight (even a very slight) disruption of power will cause the loss of any work that you have done that has not yet been saved. It is better to re-create the last fifteen minutes or so of work than it is to re-create the last five hours of work, so
SAVE SAVE SAVE SAVE SAVE SAVE SAVE SAVE SAVE SAVE

You will likely notice a difference in the appearance of your document after it is converted into HTML (notably, excess spacing most of which you can delete as you would any text or spacing in a word processed document). After the conversion, you may continue using any of the Word menu options and tools to enhance your text, including changing the font, the font size, bolding, italicizing, alignment, etc:

Standard Tool Bar

Standard Tool Bar

Special tools for home page development included on the toolbar assist you in inserting hypertext links, previewing your web page, creating forms, inserting tables, inserting horizontal rules and establishing background and font colors. If you forget which tool to use, while using Word, simply point to the tool you want information about and hold the mouse in position; a description of the tool will pop up.

Back to Top

Viewing your Web Pages During Development

View Web Page Tool At any time in your development cycle in Word, to test your web page, save the file, then click the Web Page Preview tool. This will start your default web browser (if it is not already open) and show you the home page.

When the file is visible in the web browser's window, if you have made any changes in Word since the time you last viewed your home page, you must save the document in Word, then in the browser click the browser's Reload (Netscape) or Refresh (Internet Explorer) button to retrieve and view the fresh copy.

Quite often the editor in Word does not display a true replica of your home page. For example, you may see a "stray" cell border in a table, or the spacing between paragraphs may appear too far apart. It is IMPORTANT that you frequently save, then view the re-loaded home page in your web browser and not rely entirely on the representation in Word's editor. Remember, your readers will view your page with a web browser—that is what you should rely upon to make decisions about layout.

Back to Top

Setting your Page Properties

The information supplied within the standard HTML <TITLE> tag appears at the top of your browser window in the colored strip. Many of the search engines still use the information supplied within this tag as the basis for conducting searches on the web. Therefore, it is very important that you give your home page a good title.

The title should be a concise definition of your page. For example, you should not title your page "My Home Page" or "Steve's Biology Page." Rather, a good descriptive title might be along the lines of "IUPUI Intro to Systems Analysis"—this title identifies the location (IUPUI), the type of course (introduction), and content of the course (systems analysis).

If you do not insert the title in your page, Word will simply pick up the top line of your file and use that instead. Insert the title information by choosing from the menu FILE : Properties and completing the Title information:

Page Property Dialog Box

Dialog Box for Setting Page Title

Back to Top

Using Hyperlinks

Hyperlinks are those areas that you design to be "clicked" in order to take your reader to a different location. There are of three types of hyperlinks:

Inserting a Hyperlink

  1. Type the text that you want your reader to see.

  2. Highlight the text.

  3. Insert Link Button Click the Insert Hyperlink tool.

  4. In the "Insert Hyperlink" dialog box:

Insert Link Dialog Box

Insert Hyperlink Dialog Box

Removing a Hyperlink

  1. Highlight the hyperlink. Be careful to point just beyond the endpoint of the hyperlink, then press and drag over it; otherwise, you'll "click" it and Word will try go to that location!

  2. Insert Link Button Click the Insert Hyperlink tool.

  3. Click the "Remove Link" option at the bottom of the dialog box.

Editing a Hyperlink

  1. Highlight the hyperlink. Be careful to point just beyond the endpoint of the hyperlink, then press and drag over it; otherwise, you'll "click" it and Word will try to go to that location!

  2. Insert Link Button Click the Insert Hyperlink tool.

  3. Edit the link information.

Back to Top

Using Bookmarks

After you have created an internal hyperlink pointing to a named location within the file, you MUST identify where that destination is—Word calls these destinations "bookmarks."

To insert a Bookmark:

  1. Highlight a word or phrase near the beginning of the destination location.

  2. Choose from the menu INSERT : Bookmark.

  3. Name the Bookmark the same as you named it in the "name location" box.

Back to Top

Using Images

Insert Picture Button Inserting images into your web document is as simple as clicking the Insert Picture tool then selecting the desired image. Word 97 contains many basic images (backgrounds, lines, bullets, and photographs) that you are encouraged to use in your HTML documents. Other options for images include scanning, creating/modifying in PhotoShop, or obtaining from the Web.

To save an image you find on the Web (assuming that you clearly have permission from the creator to use it and are not infringing on the copyright), point to the image and right-click (Windows users) or hold the mouse button down (Mac users), then choose Save Image As…

After an image is inserted into your web document, it can be resized or relocated by clicking on the image, then dragging the handles (the little solid squares around the border of the image) to resize or dragging the image to relocate. You will be able to keep the image proportionately correct during resizing if you will always use one of the corner handles to drag. Two-headed arrows will resize an image; four-headed arrow will allow you to move the image.

Other options for using images in your pages involve choosing from the INSERT : Picture menu:

IMPORTANT NOTE: The Word 97 HTML editor allows you to insert any image that is recognized by Word. However, the editor will convert those images to ".gif" format when you save the document. The image files will be referred to in your document—and placed in the same directory as your web/HTML file—as "Image1.gif," "Image2.gif, " "Image3.gif," etc. This will function fine; however, it does make future editing somewhat of a nightmare since you can not tell from the file name what the image might refer to. Furthermore, if you use the same image in multiple locations in your document, the editor does not recognize it as being "re-used"—it will simply create the next consecutive "Image#.gif" file. This could create many file duplications. The solution, if you desire to "clean-up" the files, is to rename them with meaningful names, both the files themselves and the referring locations in your HTML code.

Back to Top

Using Color and Textures

Paintbucket Button To set the background color of your home page, click the Paintbucket tool. This will give you a palette of colors from which to choose, an option to see a more extensive palette or an option to choose a textured background:

Background Color Palette

Background Palette

Fill Effects Palette

Fill Effects Palette

Font Color Button To set a specific word or phrase in color, highlight the text to be colored, then click the Font Color tool. The currently selected color is displayed as a band under the A. To choose a different color, click the down arrow to display a palette from which to choose:

Font Color Choice Sample

Font Color Choices

To set the text, link and followed (visited) link colors, choose from the menu FORMAT : Text Colors… Make the appropriate selections from the dialog box:

Text, Links, Followed Links Color Choices

Text and Link Color Choices

Back to Top

Using Horizontal Rules

Horizontal Rule Button To insert a standard horizontal rule in your document, position your cursor in the location of your document where you want the rule inserted, then click the Horizontal Rule tool.

To insert a graphical horizontal rule into your document, from the menu choose INSERT : Horizontal Line… Choose the line you prefer:

Sample Graphical Horizontal Rules

Sample Horizontal Rules

Back to Top

Using Sound

From the menu choose INSERT : Background Sounds : Properties. Make the appropriate selections from the resulting dialog box:

Sounds Dialog Box

Sounds Dialog Box

Word 97 has several audio clips in its Clipart Gallery that you may use, or you may create your own audio clips, locate clips from the Internet where copyright permission has been given by the creator, or obtain copyright permission to use other works. While it may be tempting to have your audio clip loop infinitely, keep in mind that the continuous sound quickly becomes irritating to your listener. (During development, your clip will immediately begin playing; to stop the clip, from the menu choose INSERT : Background Sound : Stop.)

Back to Top

Inserting Scrolling Text Message

Word 97 has a feature to allow you to insert a scrolling text message into your web document. This feature only works when the document is viewed in Internet Explorer. In Netscape, it will simply show the message as a single printed line of text.

Marquee Sample Dialog Box

Marquee Dialog Box

Back to Top

Using Bullets and Numbered Lists

Bullet Tool Bullet Tool

Numbering Tool Number Tool

Bulleted and numbered lists are an effective way to organize your material for optimum reader "scan-ability." To insert bullets or numbers as you type, place the cursor in the paragraph in which you want the list to start (it doesn't have to be at the beginning of the sentence; simply in the paragraph); click the Bullet or Number tool. When you press ENTER to begin the next paragraph, the next bullet or number automatically appears.

When you begin the first paragraph that you don't want to have a bullet or number, click the Bullet tool or Number tool to turn off the feature.

Indent Button You can affect indentation of lists by clicking the Decrease Indent tool or Increase Indent tool, respectively.

To use graphical bullets or to change the number style (i.e. roman, upper case alphabetic, lower case alphabetic, etc.), choose from the menu FORMAT : Bullets and Numbering…

Bullet Dialog Box Numbers Dialog Box
Bullet Dialog Box Numbers Dialog Box

NOTE: The option chosen from the menu will remain the default type when using the Bullet Tool or the Number tool until a new choice is made.

CAUTION: Although it is possible to create nested lists, e.g., outlines, using Word, the editor tends to "get confused." Until you feel comfortable working directly with HTML tags, you should avoid nested lists.

Back to Top

Using Tables

Tables are useful to organize information. They are especially beneficial in creating the appearance of multi-columned text. Remember, there is no way to "tab" in HTML—the alternative is to create a borderless table. Simple tables are easy to create in Word; however, it has been my experience that creating a complex table, or editing a table requires direct HTML tag manipulation.

Insert Table Button To insert a table, click the Insert Table tool. The following type box will be displayed; simply press and drag to create the number of rows and columns you want in your table:

Table Size Dialog Box

Table Size Dialog Box

NOTE: It is best if you can decide ahead of time the number of columns—it will save you a step during development; additional rows at the bottom of the table are easily created during development.

When you release the mouse button, a table of the proportions selected will display in your document.

NOTE: The gridlines you see in Word are for you to use during development; they will NOT display on the Web:

Sample Table Grid

Sample Working Table Grid
(color enhanced)

To enter data into your table, click your mouse cursor in the cell and begin typing.

To move from cell to cell, press TAB.

To add an additional table row, position your cursor in the lower, right corner cell and press TAB.

Pencil Tool To manually draw a table, click the Pencil tool, drag diagonally to draw the rows and cells you desire.

Eraser Tool To erase cell lines, click the Eraser tool and press over the cell line you wish to erase.

To insert a row into your table, position your cursor BELOW where you want the row added, then from the menu choose TABLE : Insert Rows.

To delete individual cells, complete rows or complete columns, position your cursor in the appropriate location (in the cell, in the row, or in the column), then from the menu choose TABLE : Delete Cells. Make the appropriate choice from the Delete Cells box.

To control table properties such as text wrapping around the table, table background color, and table column spacing:

  1. Place your cursor within the table.

  2. From the menu, choose TABLE : Table Properties.

  3. Make the appropriate selections from the "Table Properties" dialog box:

Table Properties Dialog Box

Table Properties Dialog Box

To control cell properties such as text alignment within the cell and cell background color:

  1. Place your cursor within the cell.

  2. From the menu, choose TABLE : Cell Properties.

  3. Make the appropriate selections from the "Cell Properties" dialog box:

Cell Properties Dialog Box

Cell Properties Dialog Box

To add table borders, including border width:

  1. Place your cursor within the table.

  2. From the menu, choose TABLE : Borders.

  3. Make the appropriate selections from the "Cell Properties" dialog box:

Border Dialog Box

Border Dialog Box

Quite often the editor in Word does not display a true replica of your home page. For example, you may see a "stray" cell border in a table, or the spacing between paragraphs may appear too far apart. It is important that you frequently save, then view the re-loaded home page in your web browser and not rely entirely on the representation in Word's editor. Remember, your readers will view your page with a web browser—that is what you should rely upon to make decisions about layout.

Back to Top

Finishing Up

After you have created your web page in Word—saving often, of course!—then viewing your creation in your web browser, you are ready to publish your page on the Web:

Back to Top

 

HomeReturn Home

alid HTML 4.01 Transitional Valid CSS