Section Four: Handouts on the Web

Description:

Students using the capabilities of the Web for learning need passive learning tools as well as the dynamic learning tools discussed above in Sections One through Three. In addition to posting an "Internet Syllabus", the Web-savvy instructor can post handouts, summaries, lecture notes, sample quizzes, quiz answers, grades, and more on the Web using simple editing tools. Methods to facilitate such a transition from paper-based products to electronically transferred Web documents will be outlined using Microsoft Word 97 (Word 98 on the Macintosh), and several hints will be offered on how to avoid common pitfalls in this area.

Methodology:

Many web programmers do not enjoy the idea of having a program fill in the required code for common HTML tasks; I consider myself to be amongst these programmers. It is better to know the code personally, then transfer your hard work to the server for completion of the task.

However, if you have multiple documents to transfer to HTML, using a Web-savvy converter becomes essential. Some prefer programs like Dreamweaver or FrontPage which have a plethora of HTML commands built in and readily accessible.

But Microsoft Office products became web-savvy with the release of Office 97 (or Office 98 on the Macintosh), allowing for quick saves of files into web-accessible HTML. Because I used Microsoft Word for so many other tasks, I concluded that this program would be the best choice for transferring my documents to HTML

But alas! things do not always go as nicely as we would hope. Word's converter does not perform its task as efficiently as it should. The reasons for incomplete conversion are based within the program itself and in the limitations of HTML as a language for formatting documents.

Imagine that you have created a literary masterpiece, a work of writing requiring many hours of effort and worthy of great admiration. Now imagine seeing the same masterpiece on the Web with extra space gaps, twisted text, incomplete processing, and more! This frustration can be felt just as intensely when trying to convert files to HTML using Microsoft Word 97, and many at Mt. Hood Community College have adopted other programs for their Web conversion.

But for better or worse, I have developed a series of protocols to maximize the efficiency of Word's HTML conversion process. It requires that you format your text using methods quite unusual for most adept word processors, but they are manageable, and it gets more so with time. Early attempts at translation to HTML took up to an hour of manual editing to correct Word's "mistakes", but by learning Word's idiosyncrasies I have been able to reduce the editing time to a manageable level.

Once you have a document prepared in Word which you would like to save in HTML, select "File - Save as HTML" and save the file with an .html extension (.htm works OK also.) HTML files are actually nothing more than text files, but the .html (or .htm) suffix tells the computer program that this is a Web file and that it should be treated differently from PowerPoint or Excel documents.

Next, close the window and re-open the HTML file. Word will do its best to translate the HTML file into a Web document. In my opinion, this is an annoying feature: the Web commands Word uses are hopelessly inadequate for even simple formatting. I prefer to use the "View" - "HTML Source" option. This command will force Word to display the HTML file as it really is with no Web formatting. Should you wish to return to the pseudo-browser, select "View" - "Exit HTML Source" when viewing the raw code.

Following are a list of some tricks and traps to avoid while preparing and editing Word HTML files:

• "Find..." and "Replace..." in the Edit Menu

If your HTML code contains a commonly repeated phrase that you dislike or wish to edit, consider using Word's built-in "Find..." and/or "Replace..." commands. Both can be found under the "Edit" menu. Neither command was intended for HTML, but both can be used in a fashion analogous to text replacement in a normal word processing document.

"Find..." can be used to discover certain instances of code quickly. In large documents, navigating by HTML can become cumbersome. Using "Find..." as a search engine to look up specific words in the document available can save valuable editing time.

"Replace..." has the greatest versatility to HTML programmers. For example, if the built-in editor has consistently placed the following commands throughout your code:

Additional points to ponder when using the "Replace..." or "Edit..." commands:

• If you wish to delete a certain type of code element, use the "Replace..." command. Enter the code to be eliminated, and leave the "Replace With" entry blank. All of the undesirable code will be eliminated.
• If you have many files to edit, you might consider building a Word macro ("Tools" - "Macro" - "Record New Macro"). Macros can be as complex or simple as you wish them to be. For more information on using Word's macro language, see: Word 97 Macro & VBA Handbook by Guy Hart-Davis (Sybex, 1997)
• If you wish to retain portions of the code intact while affecting changes to other portions, select the text you wish to edit by clicking and dragging the mouse over it and then use the "Replace..." command. Changes can be made to individual selections and not the entire document if so desired.
• Searches and Replacements can also be made for Tabs, paragraph marks, and more. When in the "Replace..." screen, select "More" and notice the special columns at the bottom showing "No Formatting", "Format" and "Special". Select the "Special" and select the Tab, paragraph mark, etc. as appropriate.

The paragraph code gives the equivalent of two "Return" or "Enter" keys - the normal formatting between paragraphs. However, sometimes it is preferable to have only a single "Return" between lines of text, especially for syllabi, quizzes, etc. In other words, it is preferable to see formatted text looking like this:

In the "Formatting" Toolbar there are buttons on the right side to "Increase Indent" and "Decrease Indent". I recommend using them to indent sections of text instead of using a series of Tabs to align a section. HTML is not a good language for Tabs or formatted text (although DHTML and Style Sheets are making considerable inroads), and the Tab key is difficult to implement.

As an example, suppose you have the following text in a handout. The key features are indented with a Tab, followed by the relevant text. It might look like this:

Once Word's HTML Editor has converted these lines, they would look like this on your browser:

• Tables - Keep My Columns As They Are!

The HTML coding procedure that would result would probably look like this:

Notice that the Tab positioned between the first answer position and the second question has been reduced to a single space; this is common in HTML conversion programs. Fortunately there is a method to work around this dilemma.

I recommend using Tables whenever possible in Word if you desire an easy transition to HTML. I have used Tabs extensively in many of my Word documents, but I now use Tables wherever possible. Tables are utilized both in the Word computer program and in the HTML language. Learning tables in Word or HTML can require some effort if coding them manually. Fortunately Word does a great job transferring tables to HTML, so place your material with Tab commands into tables.

Note that Word has a built-in "Convert Text to Table..." command in the "Table" menu. It does an adequate (although far from perfect) job in changing text to a table for you. Text already placed in tables may be switched back to text using the "Convert Table to Text..." command if so desired.

Since the Tab command is not implemented in Word, indenting the beginning of a paragraph is also not an easy task to accomplish. Fortunately a work-around solution has been found using the transparent attribute of GIF graphic files. GIF stands for the Graphics Interchange Format, and GIF files are commonly utilized in Web browsers.

To indent paragraphs, you will need a special GIF graphic file which consists of nothing except a single pixel (a small unit of graphics.) It's a very small file - only 1 K or so. My file name is "blankdot.gif", but in theory you could change the title to whatever you desire.

Place the following command at the beginning of your paragraph:

Virtually all of my handouts and quizzes were created in Microsoft Word 98 or Word 97, and I used the principles discussed here to create the HTML code necessary for posting these items on the Web. It has been a "practice makes perfect" approach which led me to these ideas, and I am always trying to improve them. Do you have any methods that work better or that do something I have not discussed here? Please let me know!