WEB 101: What Does it Take to Get Started in Using The Web for Education and Training?

[Return to Welcome Page] || [Ask a question or make a comment]

What does it take to get started? Seven Phases of Web Use in Education and Training

Using the Web will be a process of starting at the beginning, crawling before you walk and walking before you run, and so forth. Therefore I have divided this process into phases, starting at the earliest phase.

Web documents conform to a standard called "HTML", or Hypertext Markup Language. In electronic publishing, a markup language is a set of definitions for fonts, paragraph styles and other document elements. "Markup" is what an editor does with a blue pencil. The editor sets hyphenation, specifies fonts, inserts headings and defines major and minor headings, and in general specifies everything a typesetter needs to set up the printing press. Markup languages do this electronically, and HTML is a markup language. What takes the place of the typesetter? Your Browser does; it receives the HTML document from the Server and displays it on the screen. In electronic publishing, we say that your Browser "renders" the document. [Ignore the slight odor of "trashing" that emanates from "render". Render away, my Browser!]

CONTENTS:

Phase 0 - Having Your Students Use Other Web Sites

Phase 1 - A single scrollable document

Phase 2 - Hypertext links within a single document

Phase 3 - A welcome sheet and hypertext links to other documents in your Web directory, and to other Web sites

Phase 4 - Graphics

Phase 5 - Passively collecting information from students

Phase 6 - Actively responding to student information

Phase 7 - Research on learning (cognitive science)

Phase 0 - Having Your Students Use Other Web Sites

You can assign your students to use The Web for locating research materials for papers and similar assignments. At this point, you would need to acquaint them with

• Using Web Browsers such as Netscape
• Web Search Sites such as Yahoo!
• Search conventions as defined by each site. For example, entering the search text computers and society would not find items about "Computers and Society." First, the "and" would likely be ignored, and then a list of items that contained both "computers" and "society", but anywhere, not necessarily together, would be returned.
• Search results for popular topics are generally at first to whole Web Sites, not to individual papers that might be useable as references. Several layers of searching are often required. My (DB) students were very frustrated by their first efforts.
• Downloading items to the local hard drive. The Web is increasingly where research results show up fastest. This is because publishing on the Web is very easy, and it is very fast. (Librarians are rushing to turn themselves in "cybrarians.")
• They would need to know why documents look so freaky when you paste them into word processing documents. This is because of the HTML codes.

Phase 1 - a single scrollable document

In order for you to put a single existing scrollable document such as a syllabus on the Web for your students to see, you need:

• A directory or folder on a Web Server that you have access to, either through a LAN or by physical access to the Web Server computer.
• Knowledge of the Web address to give to your students, which you would get from the person who set up the directory or folder for you.
• One of the many computer programs that converts word processor formats to HTML or generates HTML documents from the start.
• Your existing document.

{ISP/CLL Faculty: David Bowen can supply you with the first three of these.}

There are three types of editing programs that convert to HTML or generate HTML:

1. Text or ASCII editors. Examples: Notepad, TeachText. To use these to generate HTML you must know all of the codes and type them in. This is slow and unreliable, since the Server will not tolerate misspellings of the codes. Many elements must be enclosed by quotation marks, and you had better remember both of them or you are in trouble. Spaces are important. Also, many codes have endings as well as beginnings. Leaving off the ending code EM (emphasis, usually rendered as italics), for example, means that the whole document (after the code to start italics) is in italics. And since many of the codes cannot be used together, you tend to find the first error first, correct it, then find the second error, etc. You cannot find all of the errors at once and correct them at once.
   
   Text editors are not a recommended method.
   
2. HTML editors. Examples: HotMetal, HTML Assistant. These are a step up. You must know the HTML codes, but the HTML editor inserts them and makes sure that they are in valid combinations. Also, many of the codes require sub-codes, and HTML editors know what sub-codes are required in every case, and prompt you to enter them. However, you must still know the HTML codes, and there are many of them. You cannot start producing a document until you know the first twenty or thirty codes, so HTML editors have steep learning curves.
   
   HTML editors are not a recommended method.
   
3. Word Processors with HTML extensions. Example: Internet Assistant add-on for Microsoft Word. These programs make HTML much easier. HTML is treated like another word processing format that you can export to or import from. You will still learn about HTML, just as you would learn about Word's own formats, but at least you can begin producing documents right away, and learn about more advanced features as you need them.

While this page is not intended as a manual for Internet Assistant, it does use Internet Assistant to illustrate how easily links and other HTML features are inserted, using the right software. I understand that WordPerfect and other major word processors have similar features. Internet Assistant for Word for the Macintosh was announced recently (2nd quarter 1996).

Unfortunately, Internet Assistant for Word (Version 1.0Z) does not edit some features easily, and does not display some features correctly. Hopefully Microsoft will update this version soon.

If you are familiar with Word's Styles such as "Normal", "Heading 1" and so forth, applying HTML styles is just like using Word styles. You select styles from a pull-down scrolling menu, and click on the one you want.

One thing that is missing is font names and font sizes. In current HTML the is one font in one size. Heading styles have large font sizes, but no choice of styles, and heading styles are only good for one line at a time.

For a discussion of HTML fonts, screen styles and codes, return to the top of this document, select the [Return to Welcome Sheet] link, and from the Welcome Sheet choose the [World Wide Web screen styles] link.

[Return to list of phases] || [Ask a question or make a comment]

Phase 2 - hypertext links within a single document

The figure above illustrates the elements of a link within a document. There is a "from" location, a "to" location and the link itself/. All three must be defined by you, the document creator, to establish a link. The from and to elements are called HTML anchors, and the link definition is defined in the "from" anchor.

In Internet Assistant for Microsoft Word, setting up an internal link is a three-step process:

1. Decide what the link's "from" and "to" locations are.
2. At the "to" location, define a bookmark. This will become the HTML "to" anchor.
   1. Highlight the text to become the bookmark.
   2. Click on the bookmark icon.
   3. A bookmark dialog window appears. Type in a name for the bookmark. To make your life easier later on, make this a descriptive name.
   4. Click on the OK button in the dialog.
3. At the "to" location, set up the link to the bookmark.
   1. Select the text to be linked (this is the text that will appear underlined and blue).
   2. Click on the link icon (it's supposed to remind you of a link in a chain).
   3. A link dialog window appears. Click on the "to Bookmark" tab at the top of the link dialog window.
   4. Still in the link dialog window, from the scrolling list of names for defined bookmarks, click on the one you want to link to.
   5. Click on the OK button in the dialog.

The "from" text turns blue and underlined and your link is defined. At this point you can switch from the default "edit" view to "Browse" view and click on the link to test it. Switching back and forth between "Edit" and "Browse" is easy -- click on an icon -- but you do need to keep track of which view you are in.

Changing a bookmark or a link is best done by removing it and then setting it up again.

Note that in setting up the link to the bookmark using Internet Assistant, if the "to" element, a bookmark, has not already been defined, it will not be there for you to select in the dialog in step 3.4 above. You must carry out the steps in the order shown; "to" (bookmark) first, then "from" (link).

You will soon learn that keeping track of a large number of bookmarks and links is not easy. Use descriptive names for bookmarks does help, but if you define a large number of links, even that won't help. I am convinced that we will need a graphical display to manage large numbers of links.

One other point: HTML links are one-way. If you want to make it easy for the user to go back to where s/he came from, you must set up that link also. From what we have been able to tell, the return link must go back to a slightly different location: circular links are not implemented correctly, at least in Internet Assistant.

For comparison, the HTML codes for making Welcome to WEB 101: Using the Web in Education and Training into a "to" anchor or bookmark called "Beginning" are shown below.

<A NAME="Beginning">Welcome to WEB 101: Using the Web in Education and Training</A>

The codes for making [Return to Top] into a link to the "Beginning" anchor are

<A HREF="#Beginning">[Return to Top]</A>

[Return to list of phases] || [Ask a question or make a comment]

Phase 3 - a welcome sheet and external hypertext links to other documents in your Web directory, and to other Web sites

Setting up external links to other documents is hardly any more difficult than setting up internal links within a document. It is convenient for users if you set up a "home page" or a "welcome page" that contains links to the other documents in your Web area. You can configure your Web Server to default to this document, and then you can give out simpler Web addresses; simper because they do not need to contain a document name. This home page is also often called a "jump page" because from it you link or jump to all of the other documents. Of course, the home page can have content on it as well as links.

In Internet Assistant for Word, you link to another document in your Web area by:

1. Decide which document will have the "from" location, and where in that document the "from" location is (in bottom-line terms, which text will get blue and underlined), and which document is the "to" location.
   
   (NOTE: Although full HTML will let you link to a specific location within a document, Internet Assistant V 1.0Z will only let you create an external link to the beginning of a document. Internal links within a document, as described above, can go from and two any location within a document.)
2. Open the "from" document and select the "from" text.
3. Click on the link icon.
4. In the link dialog window, click on the "to Local Document" tab at the top.
5. Still in the link dialog window, select the "to" document, using the same methods that you would to open a file in Windows.
6. Click on OK.

To create a link to another Web Site, in Step 4 select the "to URL" tab, type in the Web address, and click on OK.

One final note on creating links to files in your Web are. Links can either be "absolute" or "relative." Relative links are relative to the directory that the "from" document is in, and absolute links have all path information in them. If your "from" document is C:\WEBSITE\WEB101\STARTING.HTM and your "to" document is C:\WEBSITE\WELCOME.HTM, then the absolute reference to the "to" document is the second reference. The relative reference, however, is ..\WELCOME.HTM, where ".." tells DOS to go up one directory level.

Now here is the point. Relative references will save you trouble later on. If you need to move your Web files to another location (for example because your Web site has gotten very popular, or its hard disk crashed) and you are using relative directories, the directory names do not appear. If you use absolute references, you will have to go through and edit all of your links with the new directory names. This might sound like a very rare occurrence, but in fact having to move your directories is fairly common. One other advantage: we like to place our Web files on our LAN server, since that enables us to transport files back and forth between home and work. Relative references make this much easier; we can test the links at home without having to transport the new versions down to the LAN server in order to test the links.

The HTML codes to turn What is The Web, Really? into a link to the document WHATIS.HTM are:

<A HREF="whatis.htm">What is The Web, Really?</A>

[Return to list of phases] || [Ask a question or make a comment]

Phase 4 - Graphics

There are two basic steps in putting graphics into your Web pages:

1. Developing Graphics Files that You Can Insert Into Your Web Pages
2. Inserting Graphics Files Into a Web Page

1. Developing Graphics Files that You Can Insert Into Your Web Pages

There are presently two supported graphics formats on the Web: GIF and JPEG. Actually, only the GIF format is supported by the large majority of Browsers. Sending graphics in a file format not supported by a particular Browser results in an error message or some indication such as a picture of a broken icon. Web developers should also be aware that many Web users configure their Browsers to ignore graphics, since text loads much faster.

Both GIF and JPEG are "bitmap" formats. The picture is defined by specifying the color of each pixel on the screen. (A pixel is the unit of screen size, as in "640 x 400". It is one of the little dots that you can see if you look closely on your screen. For high resolution monitors you may need a magnifying glass to see individual pixels.) There is some compression, since fields of the same color do not the color defined for each pixel in the field. Bitmap formats are very good at displaying complex images, but they do not rotate well, and they cannot be moved, stretched, flipped, reduced or enlarged very well.

The other type of graphics file format is a "vector" format such as those used by CAD programs. A line is defined as coordinates on a grid with all points in between. Vector formats rotate and scale very well. If you are not a good freehand drawer, vector files are usually easier to work with because you can put down a shape and then stretch, rotate or move it until it looks right.

One solution is clip art, which can be found in many programs, including Microsoft Word, in third-party clip-art files, and at many web Sites. Clip art images are bitmap files. They can be loaded into bitmap graphics programs such as Paintbrush, and even combined and enhanced with text. At this point, few of the popular bitmap programs support the GIF format, so you still may need a program to convert graphics file formats. There are many such programs. LVIEW is a popular one for Web users, since it reads in virtually anything and can convert to GIF. It can also manipulate the color palette in a file and perform other transformations to disguise the fact that you don't have original a drawings in your documents.

If you are not a good freehand drawer and you want original graphics for your Web pages, you will want to create in a vector format and convert the final result to the GIF format. This means a conversion program such as LVIEW and two versions for every graphics file. You may be tempted to cut the number of files in half by not saving the vector version. Resist this temptation. Looking at your first efforts in your Web Browser can be discouraging. You will want to make revisions.

You can also scan in drawings and photographs. Seattle Film Works will develop your film and send you prints and a diskette with the pictures in files. Find them on The Web.

2. Inserting Graphics Files Into a Web Page

So you have your graphic in a GIF file and you are ready to insert it into a Web page. The graphic file is not actually copied into the Web page. Instead there is something very much like a hypertext link that tells the Browser to get the graphics file and render it. (Recall that "render" means the same as "display" in the world of electronic publishing.) Bearing in mind the points about relative versus absolute file references in the sections on links, it is best to put graphics files in the same directory as the Web pages they will be used in.

In Internet Assistant for Word, insert a graphic by:

1. Choosing the menu item Insert, and then Picture.
2. A file selection dialog window appears. Navigate to the right directory and select the desired file.
3. Click on OK and you're done.

The HTML codes for inserting the graphic file MOUSE.GIF are

<IMG SRC="mouse.gif" ALIGN="BOTTOM">

[Return to list of phases] || [Ask a question or make a comment]

Phase 5 - Passively collecting information from students

In this phase, you would collect responses from students, but would not respond to them via The Web. Examples of what you might be doing in this phase include

• Login or registration information
• E-mail messages from a Web page
• Survey or evaluation responses
• Test and exam responses to be printed out and graded by hand
• Votes on a question before the class

All of these involve HTML Forms. You can include the following types of elements on forms:

• Normal HTML text, to label elements
• Radio buttons, where one choice is permitted from options
• Checkboxes, where you check all of the responses that apply
• Text Lines, single-line boxes in which the user types a response
• Text Areas, larger areas in allowing longer responses
• Scrollable pick lists, or drop-down menus from which one option can be selected
• Invisible elements containing information defined within the document
• A "Submit" button, which causes the information that has been entered to be sent to the designated Web Site. The designated Web Site is encoded within the document and is invisible to the user. The Submit button can actually have any text on it that you specify.
  [If the user leaves the Form without clicking on Submit, all information is lost.]
• A "Clear" button in case the user wants to reset everything to the original state.

The information from a form is not transmitted without a "to" address, and that address must include the name of an executable program, a "CGI" program (more about this soon). This CGI program is started by the Web Server. The Web Server passes the received data to this program in a specified format. The program must create a response HTML document file with a filename specified by the Server. After processing the data and creating the response file, the CGI program ends. After it ends, the Server transmits the response HTML document to the user.

The above sequence and defined formats is the "Common Gateway Interface", or CGI. That is how the CGI program gets that name -- it conforms to the Common Gateway Interface standard. The actual name of the program is something else; CGI program is a category of programs, not a specific program.

The Server does nothing with the form data except pass it through. The CGI standard does not say or even suggest what the CGI program does with the data or what is in the response HTML document. All of this is up to the Web Site developer or the CGI programmer. Deciding what the CGI program should do with the data and how it should create the response HTML document will be one of the major tasks of making The Web useful for education and training. Actually, there will be many CGI programs needed, for different intentions.

One CGI program can serve a whole Web Site. You do not need a copy of a program for each form.

In the case of passively collecting data, the CGI program writes the form data to a file and sends back a standard document.

Passively collecting data therefore has three major steps:

1. Creating the form, which includes
   1. Choosing elements
   2. Arranging the elements on the screen
   3. Defining the data values to be returned. Each question is sent back with text to identify it, and so is each response. See the example below.
   4. Naming the Web site and the CGI program
   5. Defining any supplementary data values to be sent to the CGI program
2. Defining and writing the CGI program, which includes
   1. The name and format of the file which will receive the form data
   2. The content of the response HTML document
3. Later of the form data using the data file

For example, here is a description of the CGI program that FLS is developing:

• The program is FLS.EXE. At this point it is freely available for use by others at no cost. The program is written in Microsoft Visual Basic V 3.0 and works with the WinHTTPD Web Server from CityNet that runs under Windows 3.x.
  {ISP/CLL Faculty: You can simply name this program in your form. You do not need a copy or anything else, although you are welcome to them.}
• Besides the form data, FLS.EXE gets two additional pieces of information from the form:
• The form of the data file. There are three options:
  • File the data in a text file suitable for printing and reviewing by the instructor. This is appropriate for a test with essay or short-answer questions, where the instructor grades the test by reading the responses.
  • File the data in a form that can easily be imported into a spreadsheet program or database program. This is appropriate for surveys and evaluations, for statistical analysis, and for multiple-choice questions, for automatic grading.
    
    (Yes, it evidently would be nice to be able to have some questions go in one form and others in the second form. This can be programmed but is not in the present version.)
  • Echo data back to user. Used for form and program debugging
• The name of the data file
• The HTML response file confirms that the data entered has been recorded, and thanks the user.

Unfortunately, I have found that Internet Assistant V 1.0Z is unreliable in producing forms. In this area, it is necessary to supplement Internet Assistant with a text editor for direct manipulation of the HTML codes, and Netscape for viewing and working with the form as it would be viewed by users.

Here are the HTML codes for a question that reads What type of help would you like (in sponsoring a Web 101 Workshop)? The codes also include the first response that reads I would like the FLS staff to offer a workshop (instead of offering it myself.

What type of help would you like?<BR>
<INPUT TYPE="RADIO" NAME="HelpType" VALUE="FLS do it">
I would like the FLS staff to offer a workshop

If the user submitted the form with this choice and the file specified as the review type, the entry in the file would read HelpType=FLS do it. the point is that whatever you as the form designer put between the quotation marks is what gets transmitted and saved in the file.

Here are the codes that specify the CGI program and the data file name and form:

<FORM ACTION="/cgi-win/fls.exe/fileit/rqstw101" METHOD="POST">

You will recognize the CGI program name, fls.exe. "fileit" specifies the file format for reading, and rqstw101 is the name of the data file to be used. The file name will be RQSTW101.TXT, and it will automatically go in the directory with the form.

The point here is that what the CGI program does with the data involves a lot of detail and deserves a lot of thought, even in such a simple case.

[Return to list of phases] || [Ask a question or make a comment]

Phase 6 - Actively responding to student information

In actively responding, the emphasis is not on filing the information from the form, but in constructing a response document that provides constructive feedback to the learner. Here the choices multiply enormously. Response documents can in principle

list corrections on a problem or essay

give the learner choices or options to pursue in solving a problem

contain a customized problem chosen from a problem bank, with unique symbols and numerical values

contain a menu with links based on the student's performance

contain customized graphics drawn automatically

One fairly obvious type of response is one that contains links to pages appropriate to the learner's performance on a problem, or that contains a response chosen on the basis of the learner's answer. Schematically,

If the answer was 1, send the first response
If the answer was 2, send the second response
Etc.

This technique is so obvious that it should be implemented. A file management problem becomes evident after some analysis. Where should the responses be stored? An obvious answer is in an HTML or text document that the CGI program can copy easily into the response document. This is much superior to, for example, coding the response into the CGI program, which would require rewriting the program for each form. Now, for a course with many such questions, there would be one file for each response to each question. The files could easily number in the hundreds.

This is the file management problem. What is capable of keeping track of so many files? The type of system designed for this is the database. Three database fields would handle this; one for the question, one for the response, and a third for the text for the response document. The instructor could search the database for the desired question and answer, edit the text.

This and other analyses convince me that databases will be important in interactive education and training using The Web.

One problem in this heavy reliance on CGI is that the present standard is inherently slow. See the page on technical issues.

We have not yet begun to work on this type of response, but it clearly at the heart of interactivity.

[Return to list of phases] || [Ask a question or make a comment]

Phase 7 - Research on learning (cognitive science)

Computers are excellent in paying attention to details and collecting large quantities of detailed information. CGI programs can collect information in the areas below, for each learner:

Documents requested

Time spent on each

Responses

Answers to problems

Number of correct and incorrect responses

As described elsewhere in Web 101, there is a wealth of information hidden in the data. The data can be used both for improving the course and for deducing the cognitive processes employed by students. Improving the course is something that we should do out of concern for doing the best that we can. And uncovering the cognitive processes used by students holds the promise of even more fundamental improvements. If students have to learn using certain cognitive methods, wouldn't it be good to know those processes so that our learning methods can develop and support these methods?

Every instructor a cognitive researcher. That is the ultimate goal here.

[Return to list of phases] || [Ask a question or make a comment]