Workshop materials from April 4, 1997
Afternoon session: Using Microsoft Word with Internet
Assistant
David Bowen
Special instructions for the ISP computer lab are
in parentheses.
Topics:
Most of the topics have more than one part (Example: 2A). The later parts in any topic are more advanced. If time is running short we will skip these more advanced parts in each topic, and leave them for you to finish on your own as you see fit. I will always be willing to help you, inside or outside of the workshop (e-mail: drbowen@cll.wayne.edu).
Web Browser. Requests Web documents (files) and displays them for the user. Examples: Netscape Navigator, Microsoft Internet Explorer, Mosaic
Browser Dependence. Web Browsers have considerable leeway in how the display, or "render" a Web document. When you work on the Web, you lose the complete control over appearance that you have in distributing "dead tree" (paper) documents.
Web Server. The computer and computer program behind the scenes that send the requested documents to the Browser.
In this workshop, you will create your own Web documents, including text, graphics and links, and learn how to locate them so the CLL Web Server can find them.
URL. A Web address. For example, the URL for CLL is http://www.cll.wayne.edu. Actually, this is the address of the Web Server.
HTML. "Hyper Text Markup Language", the file format for Web documents. Graphics images are not embedded in the HTML file; instead the HTML file contains a link to the graphics image file. The Web Browser sees the link in the file, gets the graphic file in a separate request to the server, and paints the picture in place. Web graphics are in either the GIF or JPEG format.
Windows 3.x. All versions of Windows that start with a "3"; Windows 3.0, Windows 3.1, Windows 3.11, Windows for Workgroups 3.1 and Windows for Workgroups 3.11. Specifically, within ISP, if you are a Windows user, and you have not upgraded to Windows 95, you are using Windows 3.x. In Windows 3.x, HTML files do not have the normal html extension, but instead use htm (example, this file is winwkshp.htm). Similarly, JPEG files do not use the normal jpeg extension, but use jpg. GIF files appear normally with their normal gif extension.
Internet Assistant for Word.
A free "add-in" from Microsoft that adds the Web "HTML" file format to the list of formats supported by Word. With Internet Assistant installed, you can work in and convert between
If you are using Windows 3.x, you are limited to Word 6 and Internet Assistant 1. That is the version covered here. With a Macintosh, you need Word 6 for Mac and Internet Assistant 2, a considerable improvement. To get Internet Assistant with Windows, you need Word 7. To get Word 7 you need Windows 95. All Windows users that want to do substantial Web authoring should upgrade to Windows 95.
Internet Assistant is NOT perfect. There are times when you will have to protect yourself from it, and times when you will have to open an html file in text mode to correct mistakes. It is also not 100% WYSIWYG. A Web Browser is the final authority on what your users will see, and different Browsers will present the same document in different ways.
(Inside CLL at WSU: Xun Li, Tom Moeller and David Bowen can install Internet Assistant, if you already have Word.) If you know how to install Windows software, you can just get the installation diskette and use "a:/setup." You can also download Internet Assistant from Microsoft's Web Site. Internet Assistant comes without a manual. If you want a user's guide, you can buy a copy of "10 Minute Guide to Internet Assistant for Word," by J. Michael Roach, published by Que for about $10. There may also be other guides available.
Web page, Web document, Web file, html document and html file. All mean a single file or document in the Web format. These may be longer or shorter than an actual page of paper or a computer screen.
Web Site. Usage varies, but generally a connected series of Web pages (or possibly a single independent Web page). For a faculty member for example, the CLL Web Server is generally set up with a personal Web page and connections to a series of courses. Each course might also have many Web pages. The Web pages for a given course are the Web Site for that course. The entire set of Web pages for the faculty member, including the Web pages for each course, are the faculty member's Web Site. And all faculty are part of the ISP Web Site, and so on.
Home Page. Usage varies, but generally the highest level document for a Web Site.
Click (single-click, double-click). Many Windows users are confused about whether to use a single click or a double click. Generally, activating a button or a menu item requires only a single click. Activating an icon generally requires a double click. Web Browsers only require single clicks. If you are in doubt, a single click is safer; if nothing happens try a double click. If you use a double click when only a single click is required, that second click can do something unplanned. Also, always know what you expect to happen. If nothing happens, or if something unexpected happens, stop and think. At this point, consider "Undo."
Creating Web pages with Word with Internet Assistant. With Internet Assistant added in to Word, there are three ways to create or author an html (Web) document:
NOTE: Simply changing the file extension to "htm" will not work. You can change the extension of a file in the Save As dialog, but this will not change the file format. To make an html file, you must use one of the three methods above.
Formatting text: with Word with Internet Assistant, in the html mode, it is usually best to type text first, then select it and format it. You will quickly see that your formatting choices are limited. Horizontal layout using tabs and tables is not available, so vertical layout using bulleted and numbered lists becomes more important. In general, use only the pull-down list to format text. In html mode, the formatting tool buttons such as B for Bold have only a temporary effect; they work on the screen in Word but do not make it into your file and hence not onto your Web Site. Here are some html formats to try:
Normal. This is actually the absence of any other formats. Usually Times Roman. Your other choice is a monospacing font, usually Courier (but it is not called that).
Emphasis, usually italics (be careful - very difficult to remove once you apply it!)
Strong. Strong emphasis, usually bold. (be careful - very difficult to remove once you apply it!)
...
Blockquote. This is normal, except indented.
Preformatted. This is Courier. Use this whenever you want different lines to line up, as in a table of figures. Normally, if you use the <Tab> key or the spacebar to align columns, they will be ignored. Only in preformatted formatting will these be retained. And <Tab> will ALWAYS be ignored; it just doesn't work. There is a variety of other formats that produce courier. Some of them are: Sample, Typewriter, Keyboard and Code.
Many formats can be combined.
Besides bulleted lists and numbered lists, there is a third list
format, Definition List, that is supposed to put terms to be defined
lined up on the left margin with their definitions indented below.
This does not appear to work in Word with Internet Assistant 1;
avoid it. You cannot center, right justify or full justify in
Word with Internet Assistant. We will show you how to Center later,
but the other formats cannot be done in Web documents.
(NOTE: all of these comments apply only to html format. The other
formats -- doc, text, etc. -- are not changed.)
OK. Go wild with your Home Page, entering text and formatting. Notice that Spell Check works. Make sure your file is saved.
If you brought documents for one of your courses, create a Home Page for this course. You can list the name, number, credits, semester, Instructor, etc. Also list the syllabus and several assignments. You will make links to these documents below, so just list them for now. If you are not a faculty member, make a second file to describe something from your personal Home Page in more detail., or, you can find some of my course documents in c:\webpages. For now, list "Agenda for Class 1," "Agenda for Class 2," and so on, through "Agenda for Class 8."
Use File Manager to make a subdirectory off of c:\webpages for this second file. Save this second document in the subdirectory. Keep both documents open. You can switch between them in the "Window" menu item.
Still keeping your created files open, open one of the "doc" files that you brought with you on the floppy disk. If you did not bring a "doc" file, open one of the existing "doc" files in c:\webpages. Choose File / Save As and then Save File As... Html. Make sure that the extension changes to htm. You do not need to change the file name, but feel free to do so if you wish. When everything is right, click the OK button. You have converted your first document. Word will chug along for a while, but eventually the screen will change to the html screen. Probably the conversion will not be exactly what you want. Use the formatting options to clean it up, and save the file.
Convert and clean up at least two other files.
Make sure that all of your Html files are in the directory c:\webpages or in subdirectories off of this.
NOTE on filenames for Mac users: If you are a Mac user, in place of c:\webpages, substitute the webpages folder on the hard drive. Below, we will use the subdirectory terminology. A subdirectory in windows-speak is a subfolder in Mac-speak. The subfolder name in Mac-speak will be the same as the subdirectory name in Windows-speak.
HTML is a very formal markup language. (A markup language is a formatting language.) HTML documents have a "HEAD" and a "BODY". We have been working so far in the BODY. The HEAD contains information about the document, and is normally invisible to the user. An important part of the HEAD is the HTML Title. The HTML Title may or may not agree with any title that you have given the document, which goes in the BODY section. It is very common not to have an HTML Title, but you should avoid this condition because:
To insert the HTML Title
Since formatting is restricted and variable on the Web, you may want to use centering, for example for titles. Internet Assistant 1 does not support centering directly, but does allow you to do it. Also, bear in mind that not all Browsers support this formatting. Here is how to center:
Internet Assistant 1 offers a very limited version of tables. A table is a grid of rows and columns; the intersections are often called "cells." The HTML specification has a "table", but this is not supported by Internet Assistant 1. What you can do in its place is to take a table from an existing "doc" document and paste it into an html document, where it will show up as preformatted (Courier) text. Here are the steps:
One of the very bad things that Internet Assistant does is not allowing you to remove Emphasis and Strong formatting. Here you find out how to remove that formatting.
Select some text near or at the beginning of one of your files and format it as Strong. With the same text selected, reformat it as Normal. Try the italics button. Notice that the format is still listed as Strong in the format list. Save the file, including all changes, close it, and open it up again. Notice that, even if that section was not italicized when you closed the file, it is italicized now.
OK, now to remove the Strong (bold) formatting.
You will see all of the Html markups that Internet Assistant has been protecting you from. The Html markup is always between "<" and ">" delimiters. Look for "<STRONG>" and "</STRONG>" surrounding the text that you formatted this way. The <STRONG> Tag, as it is called, starts the formatting, and, as with many Web formatting Tags, the same Tag with a leading / ends it; here, </STRONG>.
Using the normal editing keys, remove both <STRONG> and </STRONG> surrounding your text. Remove both the word STRONG and the "<" and ">" delimiters. Be careful not to delete anything else. When you are done, save the file (as Text Only), close it, and reopen it as Html. The offending formatting will be gone.
NOTE: You can remove italics and bolding much more easily if you realize that you want to remove them immediately after you apply them formats. Simply choose the menu item Edit / Undo.
Web graphics (or Web graphics files) come in two file types: gif, and jpeg (or jpg in Windows 3.x). There are many places to find Web graphics. We will not go here into how create or find your own. This section is about inserting an existing graphic into a Web document. Bear in mind, again, that the graphic does not become part of the Web file. What goes into the Web document is a reference to the graphic file, which the Browser gets and displays at the point of the reference.
(In ISP computer lab: We have included a number of gif graphics in the directory c:\webpages. The graphic file phone.gif is animated. You will not be able to see the animation using Word with Internet Assistant, but the file will be animated if you view the document in a Web Browser such as Netscape navigator. Other animated gifs in c:\webpages are: cat_play.gif, bookflip.gif, bookflp2.gif, hotflash.gif and newflash.gif. The graphic spider.gif is not animated, but it is awsome.)
Here is how to insert a graphic:
That's it. You can Center using the same method as for text. There is no wrap available.
Insert at least four more graphics in this or other files.
You delete a graphic the same way that you delete text; select it with the mouse and hit the "Delete" button.
Here are very important points about managing Web graphics:
Hyperlinks (also, more simply, links) are definitely cool. In creating links, some forethought is necessary. A link has three parts, and you have to have all three clearly in mind, hopefully before you start. The three parts are:
This section concerns the first type, a link from one document to the beginning or top of another document in the same directory, or at least a near-by directory. Examples are
Here are some standard guidelines about links:
Choose a link to create. If you do not have such files already, choose another type of link to create. Links are easy to change or remove, so don't make a big thing out what link to create.
Follow these steps to create a link:
The selected text should turn blue and underlined. If this occurs, your link was formed. Note the eyeglasses button in the upper left part of the Word screen. The eyeglasses indicates that you are in the Edit View and can click on the button to switch to the Web Browse view. In the Web Browse View, Word with Internet Assistant acts like a (bad) Web Browser and can be used to check links. However bad it is as a Browser, this is still a quick way to check links.
Test your link (ALWAYS!) as follows:
Make at least four other links. For example,
it is often mentioned as good practice to make reverse links.
NOTE: If you are in Web Browse View (pencil button) you will not
be able to edit (change) your document. To return to Edit View
so that you can make changes, click on the pencil button.
Make a link from a graphic to another file. Select the graphic just as you would the "to" text. There will be a blue frame inserted around the graphic; this takes the place of the underlining for text. (There are methods of creating links from graphics without the frame, but you cannot use Word with Internet Assistant for this. These methods are not covered here.
A link to another Web Site is very similar to links to local documents. You must know the URL for the other Web site.
In one of your documents, type the "from" text for a link to the Yahoo search site.
It can be useful in a long document to create a Table of Contents for the document, with links to the various sections. However, this type of link can confuse your users. Confusion arises because
Use this type of link sparingly, and consider some explanation. For this reason, it can be better to divide a long document (file) into several smaller ones with links back and forth. If you do have a long document, your users will appreciate links back to the top, or to the Table of Contents.
For the other two types of links (to another document and to another Web Site), the "to" part of the link already exists. In making an internal link, however, you will first have to create the "to." To practice this technique, open a document in which internal links are appropriate, such as a long document with several parts. Decide on an internal link that you would like to make. Here are the steps:
Test the link (ALWAYS!) by double-clicking on it
Your Web content files (html, gif and jpg) must go in the right directories for your Web Server to find them and send them to your users. (If you are a Windows user with a Web Site on the CLL Web Server, we have set up your own Home Page as the m:\ drive. Your own welcome.htm and other files go in this directory (m:\). You will need a link from the ISP level to your welcome.htm file; see David Bowen to get this link set up. Generally, when a Web Site is created for you, you will have a skeleton welcome.htm with links to and from ISP, and if you work with this file, the links will already be made.)
Each course that you have on the Web should have its own subdirectory (off of your m:\ drive.) You can create these subdirectories using File Manager. Each subdirectory should have its own welcome.htm Home Page just for that course, and all of the files associated with a course (htm, gif and jpg) should go in the course directory. Generally, you will want links going both ways to and from your own Home Page and each course Home Page.
You should test all links at least once, using a Browser, not Word with Internet Assistant.
If you are making changes to your Web Site, beware of Browser cache! "And just what," we hear you asking, "is Browser cache? " Browser cache is memory that all Web Browsers set aside, partially in memory (RAM) and partially on the hard drive, where they store Web Pages that you have been to. Because downloading can be slow, your Browser will usually use the stored image instead of getting a new copy, for pages that your have been to. This speeds things up, but if the page has changed, you will not see the changes. If you are working on your Web site, and trying to get the images just right, you will not see any changes for pages that your Browser goes to the cache for. You can use your Browser's "Reload" button, but this does not always seem to work. The best bet is to turn off your Browser's cache. Unfortunately, this varies from Browser to Browser, and from version to version. In Netscape 2.0, the option to turn off the cache is in the menu item Options / Network Preferences ... / Cache. Here you both set the cache size to 0, and empty any existing cache. If you are making a lot of changes in a course Web site, you should warn your students also.
If you are editing a Web file, be aware that no one else will be able to use it while you are editing it. Anyone who clicks on a link to a file that you are editing will get an error message. So you may want to copy your Web files to your local hard drive, edit them there, and then copy them back. Some people will keep a "mirror" of their Web site on their hard drive. This requires discipline in keeping file versions synchronized (that is, keeping the versions the same in both locations). Also, in copying files, remember that graphics files are separate from html documents.
Graphics. There are many public-domain collections of Web graphics on the Internet. (There is a small collection on the CLL LAN under I:\WEBTOOLS. In addition, graphics in most other formats can be converted to Web format using free software available under I:\WEBTOOLS. There is a digital camera available through David Bowen. This camera can easily make photographs that can be converted to Web formats. Finally, you can create your own graphics using drawing programs. You can use the Paint or Paintbrush program that come with Windows, but since it does not save in the gif format, you will need to use a graphic file conversion program to end up with a gif file. Some other free and low-cost programs are available; see David Bowen for details.)
All of the Web content that we have dealt with so far is often called "passive hypertext." In some sense it is active, because the user can make choices about where to go and what to see, using the links. However, these links were all set up beforehand by the document developer.
In interactive Web content, the user types in text or clicks on radio buttons, and submits his/her own data. This requires a Web Server behind the scenes in to work, and an additional program behind Web Server to handle the interactive input from the user. Here we will give a brief interactive function that you can include in your Web Site.
The file "comments.htm" in the directory c:\webpages is an html form. If you copy this file into your Web Site and make a link to it, the user will see a form that has boxes for the user to enter his/her name, address, and any comments. You can use this anywhere comments would be appropriate. For example, you might want to receive comments on your Web Site, or on a test or assignment.
If you are not in CLL, contact David Bowen (drbowen@cll.wayne.edu) for a copy of the necessary files.
Open this file up. It appears much more neatly in a Web Browser than it does in Word with Internet Assistant. You can edit (change) anything except the following:
Actually, these can also be changed if you know how, but that is beyond our scope here.
After clicking on the "Done - Send It In" button, the user will get a nice message back from the system thanking him/her for commenting. Above that message will be a customizable "header", and beneath it a customizable "footer." The header and footer are in the file commcust.htm, which is also in c:\webpages. You also have to copy it to the same directory as comments.htm.
If you open commcust.htm in Word with Internet Assistant, the header is everything between, but not including, "[start]" and "[finish]", and the footer is everything between, but not including, "[finish]" and "[end]". This file is fully editable, except for the terms in square brackets. Here you can customize the response that the user sees, consistent with the type of comment being submitted. You can even insert graphics and links in the header and footer.
This system works for anything that you want the user to submit. We are using it for a problem submission form for the LAN and web. You can use it to have students submit quiz answers. It will work in any situation in which the user should send something to the Web system for you to read. And between customizing the comments form and customizing the response to the user, it can be made to fit many situations.
The users' comments will appear in a file comments.txt, which will be in the same directory as the comments.htm file. You can read comments.txt with Word or notepad, to read the comments. Each comment is appended to the end of the file, so the file contains all of the comments made since you installed these files. You can delete or rename comments.txt at any time to reset the comments file.
The FLS project is creating other interactive functions for use in Education and Training.
Transfer all the files that you used -- htm and gif -- to a floppy. If you have a Web site on the CLL Web Server, you also have an m: drive defined. (Your m: drive is not defined until you log on to the CLL LAN). If you do not have a Web Site on the CLL LAN, request one from David Bowen. Once you copy the files from your floppy to your m: drive, your Web Site will be on the air. After copying the files from the floppy, you can edit (change) them later directly from the m: drive. Just bear in mind that, while you are editing a file, your users will not be able to access it.
Web Sites can also be set up for groups such as ISP itself (this one already exists, although ISP itself has not organized to put content into it), Student Services, and so forth. )