Web Based Instruction

Creating A Web Based Lesson

John B Wasson

Introduction

In a previous article (Wasson, 2005) we discussed how the instructor of a web based course of instruction, could use HTML, the HyperText Markup Language, to create a course homepage on the internet. This course homepage would contain links to the individual lessons, which in turn would be the primary vehicle to carry the content for the course of instruction. Using the analogy of a traditional book as the course of instruction, the book cover, table of contents, and preface, would be the course homepage while the online lessons would be chapters of the book. The book, of course, would be a hypertext and would be read or accessed on a personal computer, running a program called a web browser. Web browsers in common use today include Internet Explorer, Safari, the AOL browser which incorporates Netscape, and Firefox. Your students, currently, and increasingly in the future, might access your course, and the internet through devices other than a personal computer. Such devices could include a cell phone or other Blackberry device, a handheld computer or PDA (personal digital assistant), a Sony Playstation, an iPod, or a set top digital device connected to a home entertainment system. The primary target device for your course of instruction is probably the laptop or notebook computer with a wireless connection to the internet.

All of these student access devices must be kept in mind as you design effective and accessible web based instruction. Another aspect of accessibility is the extent to which a student with a visual or auditory limitation or a person with limited motor control can access your course of study on the internet.

Before we consider the individual web based lesson let’s review the channels of communication from instructor to student which can provide a model or at least a preface to the way we present lessons on the web. We will also want to look at opportunities for students to present information to the instructor and to ask questions about lesson content. We might also want to look at web based opportunities for students to communicate with one another while engaged in taking a course on the internet.

In a previous article we discussed the instructor-to-student channels of communication that might be utilized by an instructor preparing web based instruction (Wasson, 2003).

The Audio Channel

The audio channel has been a long time provider of educational content to the distant learner. Educational radio provided an opportunity for an instructor/broadcaster to reach a widespread audience of students. We can also place audio files directly on our web page, which the student can activate by clicking an icon. An audio component can also make our lesson page accessible to a learner with limited vision. A software program, WordRead (http://www.wordread.com), provides a way to convert the text on a web page to spoken language. When used on a PC, the student goes to a web page with a web browser, chooses Select All from the browser’s Edit menu (or uses the keyboard equivalent Control-A), copies the selected text by choosing Copy from the Edit menu (or uses the keyboard equivalent Control-C), and activates the WordRead program. WordRead will read all words on the webpage using a synthesized (computer based) voice. The Macintosh has similar software, VoiceOver, built into the most recent operating system (OS X Version 10.4). Audio podcasting is another way to present instructional information to prospective learners via the audio channel. A podcast is an individual and independently produced radio show which is downloaded from the internet and replayed at the convenience of the learner. Podcasts on many topics are made available, free of charge, by the iTunes store from Apple. The downloaded audio program is stored on the subscribers computer with the use of the iTunes program also available free of charge from Apple. iTunes runs on either a Macintosh computer or a windows based machine (PC).

The Visual Channel

We have also called this the visual/graphic channel. In this mode of communication the student reads textual material on a web page and looks at related graphics. This channel is the primary way in which most current web based instruction is delivered. This is also the mode you will wish to concentrate on first as you build your course of instruction on the internet. Start with this format and then later add, audio or video elements to your page as needed. This channel has the lowest bandwidth of the first three modes we are discussing (audio, visual, and video channels) and should make your course content available to all learners including those who have a dial-up connection to the internet.

I have prepared a demonstration lesson using each of the three learning channels. At the end of the lesson there is a link to a description of the size of all files used by the demonstration lesson. You can find the lesson at http://www.wassons.com/ed602lesson5/ The original form of this lesson, presented basically through the visual channel, can be found at http://www.mnstate.edu/wasson/ed602lesson5.htm

The two completely web based courses I have designed and conducted successfully for a number of years through the Continuing Studies Department at Minnesota State University Moorhead basically utilize this visual/graphic channel of communication. This is also the starting modality you may wish to utilize as you put up your first course of study on the internet. The first course I set up was Ed 602 Statistics for Educational Research, you can find the homepage for this course at http://www.mnstate.edu/wasson/ed602.htm and look it over if you wish to. The second course I developed, primarily using the visual/graphic channel is Ed 603 Educational Research which you can find at http://www.mnstate.edu/wasson/ed603/ if you wish to look at it.

You can see a number of online courses that also utilize primarily the visual/graphic channel of communication. At Barnes and Noble University which you can find by going to the Barnes and Noble website at http://www.barnesandnoble.com/ where you can click on the B&N UNIVERSITY tab which will take you to a list of the courses available. Click on one of the courses featured. You might wish to enroll in a course (it’s free) and explore in more detail how the course is set up. You might also get some good ideas about features you may wish to include in your own course.

The Video Channel

In the video channel of communication we have, of course, audio, images, and motion. Instructional videos have long been the mainstay of distance learning. Frequently, on-campus courses are conducted in studio/classroom facilities set up for on site and remote viewing video conferencing modality. In fact each of the sites available for a video based course of this type might be a studio/classroom. Any of the sites could then be the originating site for the course. A typical video classroom would be fitted with a camera pointed at the instructor and another camera pointed at the class. The instructor can select which feed goes out to the satellite sites; camera on instructor, camera on students, or presentation camera (projected overhead transparencies, slides, or prepared video segments). Large television sets in the classroom present an image for the outgoing feed from the classroom and for the cameras on the students of the remote classrooms. I found one weakness in this situation. There should be an additional television set at the back of the room (or just above and in front of the instructor) so that the instructor is aware of the feed going out from the classroom, without turning around and looking at the monitor which the students are looking at (placed behind the instructor or out of site of the instructor on the front panes of the podium desk). This setup, as already mentioned would allow any of the sites to serve as the instructional site. I was once teaching such a course and had been away from the University for the day. When it came time to teach the course, I just went to the nearest satellite site and conducted the class from there. Anyone who has used this synchronous video instructional mode is aware of the immense number of cooperating technologies that need to be in place for the system to work well. I must admit that over 50% of the time something went wrong, leaving some sites unable to receive the course feed. Murphy’s law certainly seemed to be alive and well in this mode of instruction. Any possible thing that could go wrong did so at one time or another. One way to get around system failure, was to prepare backup video recordings of classroom output. This in turn led to the use of the tapes for asynchronous video instruction.

Asynchronous video instruction could also be provided by preparing a video with the instructor in a studio or video taped in the classroom when the regular class was being conducted. Superb instructional material at the high school and college level is available through the courses provided by The Teaching Company. They also distribute audio tape versions of some of their courses.

Another source of online instructional material can be found at http://www.lynda.com where instruction for using many computer programs can be found. These courses, presented primarily through the video mode, are available on the web and also as CDs. Although the courses at Lynda.com are online by subscription or on CDs which can be purchased, the courses have some lessons available online free. You can look at these lessons to see how this type of online course is conducted.

I have prepared video components for one lesson of my online, web based course, Ed 602 Statistics for Educational Research, 2 credits. I prepared 5 mini instructional videos, 1 for each topic of Lesson 5. Measures of Central Tendancy. These mini video based lessons can be seen as components of the demonstration lesson at http://www.wassons.com/ed602lesson5/

The Graphic Text Channel

By the graphic text channel I am referring to graphic text material the student is expected to use for a course of study that does not primarily come from the internet, although it could. I am thinking here of a text or other printed materials that provide part of a course of study. Of course these materials might be available on the internet as downloadable pdf files. The student would then print out the materials and read them, or could read them online with a web browser.

Characteristics Of An Online Lesson

The online lesson, in some ways, is like a chapter in a book. However it is a richly implemented chapter of a book with the possibility of multimedia presentation and also can incorporate interaction with the learner.

In a previous article (Wasson, 2003) we considered a template for a lesson plan. In that template we blocked out the components of an individual online lesson. In that article we suggested that each individual lesson template could contain the following elements.

1. Title

2. List of topics (with in page links to the topics)

3. Text assignment

4. Topics in the lesson (with links if on another page)

5. Assignment (with link to)

6. Lesson Quiz (with link to)

7. Instructor Mailto:

8. Link to next lesson

9. Link back to previous lesson

10. Link to course homepage

Now let us write a first draft of this template in HTML code. We can save this template as LessonTemplate.html and then use it to prepare our individual lessons. After we have created the individual lesson from the template we could save it as, for example, Ed602Lesson5.html.

Looking at the template written in html, will also give us a chance to review the HTML tags we introduced in an earlier article (Wasson, 2005).

HTML Code For a Web Based Course Individual Lesson Template

<html>

<head>

<title>Lesson X. Title of Lesson</title>

</head>

<body>

<h1><center>Lesson X. Title of Lesson</center></h1>

<p>Lesson X will consist of the following topics:</p>

<ul>

<li><h3>Text Assignment for Lesson X</h3></li>

<li><h3>Topic 1</h3></li>

<li><h3>Topic 2</h3></li>

<li><h3>Topic 3</h3></li>

<li><h3>Topic 4</h3></li>

<li><h3>Topic 5</h3></li>

<li><h3>Lesson X Assignment</h3></li>

<li><h3>Lesson X Quiz</h3></li>

</ul>

<h2>Text Assignment for Lesson X</h2>

<h2>Topic 1</h2>

<h2>Topic 2</h2>

<h2>Topic 3</h2>

<h2>Topic 4</h2>

<h2>Topic 5</h2>

<h2>Lesson X Assignment</h2>

<h2> Lesson X Quiz</h2>

<p>If you have any questions or concerns about this lesson please send email to the course instructor.</p>

<h3><center>Go To Previous Lesson</center></h3>

<h3><center>Go To Next Lesson</center></h3>

<h3><center>Return To Course Homepage</center></h3>

</body>

</html>

If this html text document were saved as LessonTemplate.html and viewed in a web browser, it would appear as shown in Figure 1.

Figure 1. Lesson template as seen with an internet browser.

Looking through the html code for this lesson template we can see the html tags we have learned to use thus far:

<html> and </html> to form the outer limits of our entire html document.

<head> and </head> to delimit header material that is not directly seen in a browser when viewing the html document.

<title> and </title> to delimit the title of our document. This title is not seen in the browser when viewing the web page, but does appear in the title bar of the browser. This title is also used by some search engines on the internet.

<body> and </body> which surround all of the material that is shown when the web page is viewed in a browser.

<p> and </p> to delimit a paragraph of text, or other material.

<h1> and </h1> to delimit headings of the largest font size. The designators h2 through h6 would be used for successively smaller sizes of headings.

<center> and </center> are used to center the object they surround on the web page.

<ul> and </ul> to delimit an unordered list. An unordered list is not numbered but each item will appear in a bulleted list.

<li> and </li> surround or delimit the individual items in the unordered list or in an ordered list.

<ol> and </ol> surround an ordered list. The items in an ordered list are numbered, in the order in which that are entered into the document. If you move an item in the list, the items are renumbered accordingly when presented. Let’s take our html template and modify it to present Lesson 5 - Measures of Central Tendancy, one of the lessons in our online course of instruction, Ed 602 – Statistics for Educational Research.

HTML code for an outline of Ed 602, Lesson 5

<html>

<head>

<title>Lesson 5. Measures of Central Tendancy</title>

</head>

<body>

<h1><center>Lesson 5. Measures of Central Tendancy </ center></h1>

<p>Lesson 5 will consist of the following topics:</p>

<ul>

<li><h3>Text Assignment for Lesson 5</h3></li>

<li><h3>Measures of Central Tendency</h3></li>

<li><h3>Mean for a Population</h3></li>

<li><h3>Finding the Mean for Scores in a Frequency Distribution</h3></li>

<li><h3>Mean for a Sample</h3></li>

<li><h3>Effect of Distribution Shape on Measures of Central Tendency</h3></li>

<li><h3>Calculating the Mean with the Excel Spreadsheet Program</h3></li>

<li><h3>Lesson 5 Assignment</h3></li>

<li><h3>Lesson 5 Quiz</h3></li>

</ul>

<h2>Text Assignment for Lesson 5</h2>

<h2>Measures of Central Tendency</h2>

<h2>Mean for a Population</h2>

<h2>Finding the Mean for Scores in a Frequency Distribution</h2>

<h2>Mean for a Sample</h2>

<h2>Effect of Distribution Shape on Measures of Central Tendency</h2>

<h2>Calculating the Mean with the Excel Spreadsheet Program</h2>

<h2>Lesson 5 Assignment</h2>

<h2>Lesson 5 Quiz</h2>

<p>If you have any questions or concerns about this lesson please send email to the course instructor.</p>

<h3><center>Go To Previous Lesson</center></h3>

<h3><center>Go To Next Lesson</center></h3>

<h3><center>Return To Course Homepage</center></h3>

</body>

</html>

We have now set up the backbone for our course of study. If we were to look at this html code in a web browser it would look like Figure 2.

Figure 2. Lesson outline as seen with a browser.

Developing internal and external document links in HTML

Before we get into the nuts and bolts of developing excellent online instructional modules, or at least look at the characteristics of such modules, we must look at a new HTML tag. That is the way we can link web pages to other web pages and link web elements to other elements on the same page. In our document, two of our topics, Effect of Distribution Shape on Measures of Central Tendency and Calculating the Mean with the Excel Spreadsheet Program, will appear on web pages external to the lesson 5 main page. We need to create links from these two headings to their respective web pages.

Here is the html code, which will make the title Effect of Distribution Shape on Measures of Central Tendancy into a clickable title which will take the viewer to a new web page, “ed602distshape.htm.” The name of the new page is ed602distshape.htm. Here is the code.

<a href=”ed602distshape.htm”><h2> Effect of Distribution Shape on Measures of Central Tendency </h2></a>

The opening and closing html tags for this code segment are <a href=”address”> and </a>

The address can be relative or absolute. A relative address, as we have used above, tells the viewer to go to the file ed602distshape.htm, which is in the same folder as the page we are currently working on. Let’s say for example we have our other pages in a folder called “OtherPages.” Note that the folder name does not end in .html, as it is a folder not a file (web page). In this case our address would be “/OtherPages/ed602distshape.htm.”

And the full expression would be:

<a href=”/OtherPages/ed602distshape.htm”><h2> Effect of Distribution Shape on Measures of Central Tendency </h2></a>

The two forms we have used so far are “relative” addresses. That is they direct the viewer to the target page in reference to the current page.

We can also use an absolute address, which gives the full address of the target page. For example the original ed602distshape.htm has this address (or URL).

http://www.mnstate.edu/wasson/distshape.htm

URL, incidentally, stands for Uniform Resource Locator and is the way web pages are addressed on the internet. Our full expression now with the absolute address is:

<a href=”http://www.mnstate.edu/wasson/distshape.htm”>

<h2>Effect of Distribution Shape on Measures of Central Tendency</h2>

</a>

I have separated the three components of the link so you can see the opening tag, <a href=” http://www.mnstate.edu/wasson/distshape.htm”>, the closing tag, </a>,

and between these two tags the only part of the code that will be seen by the viewer on the web page, <h2> Effect of Distribution Shape on Measures of Central Tendency </h2>. As you realize the viewer will not see the tags <h2> and </h2>, but they will determine the font size in which the title is printed.

The html code for “Calculating the Mean with the Excel Spreadsheet Program,” which will also be on a separate web page is as follows:

<a href=”ed602calcmeanss.htm”><h2>Calculating the Mean with the Excel Spreadsheet Program</h2></a>

We will also have the Lesson 5 Assignment and the Lesson 5 Quiz on separate pages, named “ed602assign5.htm” and “ed602quiz5.htm” respectively. If we were to code all four of these references to external pages by the relative method, our html code for the end of our web page would be:

HTML code for last part of the web page

<a href=”ed602distshape.htm”><h2>Effect of Distribution Shape on Measures of Central Tendency</h2></a>

<a href=”ed602 calcmeanss.htm”><h2>Calculating the Mean with the Excel Spreadsheet Program</h2></a>

<a href=”ed602assign5.htm”><h2>Lesson 5 Assignment</h2></a>

<a href=”ed602quiz5.htm”><h2>Lesson 5 Quiz</h2></a>

<p>If you have any questions or concerns about this lesson please send email to the course instructor.</p>

<h3><center>Go To Previous Lesson</center></h3>

<h3><center>Go To Next Lesson</center></h3>

<h3><center>Return To Course Homepage</center></h3>

</body>

</html>

In the HTML code segment, I have also included, but not completed, the links at the end of the web page to the previous lesson, the next lesson, and to the course homepage. As before, I have put the HTML tags in bold face, to help identify them. This has no effect on how they are read in the browser. Notice in the link statements that the name of the target page is enclosed by quotation marks. The words of the link that are seen are not enclosed in quotation marks.

As you build the code for your web page, it is important to save your work and to frequently test it in a browser. You can simply open your browser, select Open File… from the File menu, and then navigate to the web page you are working on, select the file, and click the Open button. When doing addresses such as we are doing here, it would be a good idea to write the code for one address and then test it to see if it works. Once you have it working properly in the browser you can then go back to your html document and copy and paste to provide a format for your remaining link statements.

If we were to look at the code we have written above in a browser it would look like Figure 3.

Figure 3. HTML code featuring links to

Other pages seen in a browser.

Topics covered and within page links to the lesson content associated with each topic

There is another type of HTML link we would like to use and that is a link within the web page itself. At the beginning of the lesson we have listed all of the topics that appear in that lesson. The user might wish to move from an item in the topic list to that item. We can help the viewer do that by making the topic headings into links to the respective topics. Before we can do that we have to create targets for the links at the individual topics. In HTML parlance these are called target fragments. There are two ways to create target fragments, the id method and the name method. We will use the name method to create target fragments for 7 of our 9 topic headings. We will delay the other two which are references to other pages.

Original HTML code for topic headings

<h2>Text Assignment for Lesson 5</h2>

<h2>Measures of Central Tendency</h2>

<h2>Mean for a Population</h2>

<h2>Finding the Mean for Scores in a Frequency Distribution</h2>

<h2>Mean for a Sample</h2>

HTML code for topic headings with embedded target fragments

<h2><a name=”Text Assignment for Lesson 5”>Text Assignment for Lesson 5</h2>

<h2><a name=”Measures of Central Tendency”>Measures of Central Tendency</h2>

<h2><a name=”Mean for a Population”>Mean for a Population </h2>

<h2><a name=”Finding the Mean for Scores in a Frequency Distribution”> Finding the Mean for Scores in a Frequency Distribution </h2>

<h2><a name=”Mean for a Sample”> Mean for a Sample </h2>

By comparing the original HTML code for the topic headings above with the topic headings after we have embedded the target fragments we can see that in the first heading we added the following segment

<a name=”Text Assignment for Lesson 5”>

between <h2> and The title

Now how do we add the target fragment to a header which is already a link to an external web page. We have four headers in our Lesson 5 page which are links to external pages.

The current HTML code for those four headers is

<a href=”ed602distshape.htm”><h2>Effect of Distribution Shape on Measures of Central Tendency</h2></a>

<a href=”ed602 calcmeanss.htm”><h2>Calculating the Mean with the Excel Spreadsheet Program</h2></a>

<a href=”ed602assign5.htm”><h2>Lesson 5 Assignment</h2></a>

<a href=”ed602quiz5.htm”><h2>Lesson 5 Quiz</h2></a>

If we add the target fragments to each of these target headers we would have the following HTML code

<a href=”ed602distshape.htm” name=”Effect of Distribution Shape on Measures of Central Tendency”><h2>Effect of Distribution Shape on Measures of Central Tendency</h2></a>

<a href=”ed602 calcmeanss.htm” name=”Calculating the Mean with the Excel Spreadsheet Program”><h2>Calculating the Mean with the Excel Spreadsheet Program</h2></a>

<a href=”ed602assign5.htm” name=”Lesson 5 Assignment”><h2>Lesson 5 Assignment</h2></a>

<a href=”ed602quiz5.htm” name=”Lesson 5 Quiz”><h2>Lesson 5 Quiz</h2></a>

We have now added the target fragments to each of our target headers. Now we need to go back and put links in our lesson topics so that each topic links to its corresponding heading.

The current html code for our list of topics is

<ul>

<li><h3>Text Assignment for Lesson 5</h3></li>

<li><h3>Measures of Central Tendency</h3></li>

<li><h3>Mean for a Population</h3></li>

<li><h3>Finding the Mean for Scores in a Frequency Distribution</h3></li>

<li><h3>Mean for a Sample</h3></li>

<li><h3>Effect of Distribution Shape on Measures of Central Tendency</h3></li>

<li><h3>Calculating the Mean with the Excel Spreadsheet Program</h3></li>

<li><h3>Lesson 5 Assignment</h3></li>

<li><h3>Lesson 5 Quiz</h3></li>

</ul>

To make each one into a link to the fragment header target we must add

<a href=”name of web page#name of target”> where name of the web page is the web page of the target (in this case the same page) and name of target for which we have used the name of the topic (or heading). If we added this code to each target, right after the <li> tag we would have the following html code:

<ul>

<li><a href=”ed602lesson5.htm# Text Assignment for Lesson 5”><h3>Text Assignment for Lesson 5</h3></li>

<li><a href=”ed602lesson5.htm # Measures of Central Tendency”><h3>Measures of Central Tendency</h3></li>

<li><a href=”ed602lesson5.htm # Mean for a Population”><h3>Mean for a Population</h3></li>

<li><a href=”ed602lesson5.htm # Finding the Mean for Scores in a Frequency Distribution”><h3>Finding the Mean for Scores in a Frequency Distribution</h3></li>

<li><a href=”ed602lesson5.htm # Mean for a Sample”><h3>Mean for a Sample</h3></li>

<li><a href=”ed602lesson5.htm # Effect of Distribution Shape on Measures of Central Tendency”><h3>Effect of Distribution Shape on Measures of Central Tendency</h3></li>

<li><a href=”ed602lesson5.htm # Calculating the Mean with the Excel Spreadsheet Program”><h3>Calculating the Mean with the Excel Spreadsheet Program</h3></li>

<li><a href=”ed602lesson5.htm # Lesson 5 Assignment”><h3>Lesson 5 Assignment</h3></li>

<li><a href=”ed602lesson5.htm # Lesson 5 Quiz”><h3>Lesson 5 Quiz</h3></li>

</ul>

After we have made these changes to our Lesson 5 skeleton page we would have the following code.

HTML code for an outline of Ed 602, Lesson 5, with internal and external links

<html>

<head>

<title>Lesson 5. Measures of Central Tendancy</title>

</head>

<body>

<h1><center>Lesson 5. Measures of Central Tendancy</center></h1>

<p>Lesson 5 will consist of the following topics:</p>

<ul>

<li><a href=”ed602lesson5.htm# Text Assignment for Lesson 5”><h3>Text Assignment for Lesson 5</h3></li>

<li><a href=”ed602lesson5.htm # Measures of Central Tendency”><h3>Measures of Central Tendency</h3></li>

<li><a href=”ed602lesson5.htm # Mean for a Population”><h3>Mean for a Population</h3></li>

<li><a href=”ed602lesson5.htm # Finding the Mean for Scores in a Frequency Distribution”><h3>Finding the Mean for Scores in a Frequency Distribution</h3></li>

<li><a href=”ed602lesson5.htm # Mean for a Sample”><h3>Mean for a Sample</h3></li>

<li><a href=”ed602lesson5.htm # Effect of Distribution Shape on Measures of Central Tendency”><h3>Effect of Distribution Shape on Measures of Central Tendency</h3></li>

<li><a href=”ed602lesson5.htm # Calculating the Mean with the Excel Spreadsheet Program”><h3>Calculating the Mean with the Excel Spreadsheet Program</h3></li>

<li><a href=”ed602lesson5.htm # Lesson 5 Assignment”><h3>Lesson 5 Assignment</h3></li>

<li><a href=”ed602lesson5.htm # Lesson 5 Quiz”><h3>Lesson 5 Quiz</h3></li>

</ul>

<h2><a name=”Text Assignment for Lesson 5”>Text Assignment for Lesson 5</h2>

<h2><a name=”Measures of Central Tendency”> Measures of Central Tendency </h2>

<h2><a name=”Mean for a Population”>Mean for a Population</h2>

<h2><a name=”Finding the Mean for Scores in a Frequency Distribution”> Finding the Mean for Scores in a Frequency Distribution </h2>

<h2><a name=”Mean for a Sample”> Mean for a Sample </h2>

<h2>Effect of Distribution Shape on Measures of Central Tendency</h2>

<h2>Calculating the Mean with the Excel Spreadsheet Program</h2>

<h2>Lesson 5 Assignment</h2>

<h2>Lesson 5 Quiz</h2>

<p>If you have any questions or concerns about this lesson please send email to the course instructor.</p>

<h3><center>Go To Previous Lesson</center></h3>

<h3><center>Go To Next Lesson</center></h3>

<h3><center>Return To Course Homepage</center></h3>

</body>

</html>

Outline Of Ed 602, Lesson 5, With Internal

And External Links, As Seen In A Browser

Now we have the outline for our online lesson well laid out. We have not put in the links to the previous page, the next lesson, and the course home page at the bottom of the lesson page, but we can do that later. We also need to add an HTML Mailto: link near that bottom of the page where it says “If you have any questions or concerns about this lesson please send email to the course instructor.” Now let’s get on with the job of adding the individual online topics.

The Nature of Online Instruction

How do I know if I am reaching my students if I can not see them? This is probably a red herring as we frequently can’t tell if we are reaching students when they are sitting in the lecture room with us. In spite of this, how can we best prepare effective online instruction? This in turn rests on the more general question of how do we provide or contribute to effective instruction in general. The research on the qualities of effective teachers provides us with some insight into the quest for effective instruction.

Steve Yelon in his Powerful Principles of Instruction (Yelon, 1996) suggests that the excellent teachers he observed in his research on effective instruction had four common attributes.

“First, we found that excellent teachers are concerned about their subject matter. They believe with a religious fervor in what they teach. As one teacher expressed it. ‘It is in the students’ benefit to know this content. It is imperative for their well being that they know this.’ What did he teach? The history of South America during World War II! He was so enthusiastic that by the time I was finished with the interview. I wanted to study the history of South America During World War II.

Second, excellent teachers are concerned about their students. Although some have large classes where you might think it difficult to reach all students, these teachers want all of their students to learn. They also believe that their students are capable of learning.

Third, excellent teachers like the job of teaching. Excellent teachers enjoy passing on what they know to students and derive pleasure from seeing novices become experts. They enjoy the process of analyzing, planning, creating, delivering, and improving their instruction. It is fun for them. They integrate play with their teaching. I believe that this attitude is likely to lead to teaching that is beautiful, elegant, poetic, and touching.

Finally, excellent teachers put into practice ten powerful instructional principles. They apply what they know about motivation, learning, and transfer to make their instruction effective.” (Yelon, 1996, pages 2-3).

Yelon then devotes the rest of his book to describing ten powerful instructional principles. We will not go into all of these principles now but will save that for a later article in which we can discuss Yelon’s 10 powerful instructional principles and try to apply them to online web-based instruction.

Let’s look at his first three qualities of effective teachers. I must admit that these qualities were easily observed in all of the teachers I have viewed and listened to on the learning companies video taped courses.

I am assuming that you, the prospective online teacher, share these qualities so let’s reiterate them. The first is great concern over the content they (you) are teaching. You would only be tempted to put a course on the internet that you are intimately familiar with, that you love the content of, and that you feel contains knowledge that is of the greatest importance to your students. It takes a great amount of work to prepare a course for the internet and you will only be motivated to extend this effort towards subject matter you know backwards and forwards, that you love to teach about, and that you feel is extremely important to students.

Your enthusiasm and love of your content is probably most apparent in a video tape of your instruction but can also be glimpsed in the way you write about this content in the visual/graphic mode of instruction. Writing for the internet is more like writing email, than it is like writing a formal letter or a book. Writing for the internet should be informal, almost colloquial.

Go ahead and start developing your online lesson. Take a course of study that you know well and enjoy teaching. Take one that you would like to seen made available to students on the internet. You don’t have to start with the first lesson in your course. Start breaking ground with a unit or lesson that you have some interest in developing further. You have have the current materials you use to teach the course. You probably have notes you use as you teach the lesson, or just have ready in case you forget what the next topic is. You may also have overhead transparancies that you use in class. Some of these you will be making into graphical images you can use in your web lesson.

In the sample lesson I have been using to illustrate some of the points in this article, Ed 602 Lesson 5 Measures of Central Tendancy, I immediately ran into the necessity of including graphics in the web based lessons. In this unit I had to use graphics to show formulas and even individual statistical symbols which are not found in the character set of a word processor.

In my particular case, I had to use another program, Equation Editor, to prepare the formulas and symbols for the graphics. Equation Editor comes packaged with the word processing programs Word and with AppleWorks. I had already used the program to prepare formulas and symbols to use on the overhead transparencies I used in class. So to some extent, I had already prepared the graphical images I needed for the online course. Then I needed to insert these images into the htnl code for my web page. I also used graphic images created from a spreadsheet program to illustrate how the spreadsheet could be used to organize data and to calculate various statistics. These graphics could be created by a program that took screen shots of a computer screen while running a spreadsheet. Both the Macintosh computer and the PC computer running windows have some facility within the operating system to make graphics from the screen. I used a program callerd Snapz Pro X from Ambrosia Software. It can take a screenshot of any part of the screen you wish it to and save it as a jpeg image. It can also be used to make a QuickTime movie of the screen as you demonstrate how to do something on the computer. The movie can also record the audio of you explaining what you are doing.

We can discuss this further in a bit. But for now let’s look at how we can bring graphics into our web page.

Using Graphics In Your Online Lesson

There are two kind of grahical elements used on a web page, inline images and external images. Inline images, in someways are just like another character you type onto the page. If you add additional text to the page before the graphic it is pushed ahead of the text you are adding just like the text would. If you delete some text before the inline image, it moves to the left just as text would. There are controls (tags) in html that you can use to further control the inline image.

I found inline images essential to include characters and formulas on a web page. In the demo lesson I needed to show the formula for the mean of a population and the mean of a sample. I also needed to use a graphic for individual characters such as an X with a bar above it, the Greek letter mu, and summation symbol (an upper case Greek sigma). Figure 4 shows a segment from a web page, showing the effect I would like to get. We will now discuss what html code we need to get this effect.

Figure 4. Segment of a web page showing graphical images.

HTML Code to produce images show on Figure 4

<p>The statistical formula for the mean for a population is:</p>

This of course is the first line shown in Figure 4 and is delimited by the <p> and </p> delimiters.

<img src=”popmean.gif” >

This shows us the tags used to present an inline graphic of the form <img src=”imagename”>. Images tend to be gif or jpeg images. The formula we are presenting here was a gif image and its name was popmean.gif. This is a relative reference (rather than an absolute web address) to the image which in in the same folder as the web page we are on.

<p>where</p>

Gives us the word “where” on the page.

<p><img align=”middle” src=”spm.gif”> the Greek letter mu, is the symbol for the population mean.</p>

This line has the img tag but it is followed by an attribute, align=”middle”, which has the effect of having the graphic placed in the middle of the line with respect to the text. We could use align=”top” which aligns the top of the image with the top of the text line, and align=”bottom” which aligns the bottom of the graphic with the bottom of the text. This attribute then is followed by src and the name of the graphic file, spm.gif.

<p><img align=”middle” src=”ssum.gif”> is the summation sign and means that we should sum up what ever appears after the summation sign</p>

Again we are using the img tag, the align attribute and the src tag to show the graphic symbol followed by a line of text.

<p><img align=”middle” src=”sx.gif”> is the symbol for an

individual score, and</p>

Shows the graphic symbol X followed by text.

<p><img align=”middle” src=”spn.gif”> upper case N, is the

symbol for the total number of scores in a population.</p>

Shows the graphic symbol N followed by descriptive text.

<p>In English then, the formula for the mean for a population says sum up all of the individual scores (<img align=”middle” src=”sumx.gif” >) and divide that sum by the number of scores

(<img align=”middle” src=”spn.gif”>).</p>scores in a population.</P>

In this last line we are stating the formula for the mean for a population. We have symbols introduced throughout the sentence in parenthases and within these parenthases we have inserted an inline graphic to illustrate the symbol. When this html code is viewed in a browser it appears as in Figure 4.

HTML has a another tag that will replace the graphic in a web page with a textual description of that graphic. Originally this was so that persons using browsers without graphic capability could still view the essence of the web page. This is done with the alt tag which is another attribute such as align, that we can insert into the code after the src tag (just like align was). If added to the line of code that introduced the formula for the mean it would appear as follows:

<p><img src=”popmean.gif” alt=”[mu = summation X divided by N]”></p>

Note that we have added the attribute alt after the attribute src and that the attribute causes the text [mu = summation X divided by N] to be displayed in case the browser is unable to display the graphic.

Here is what the code for the web page segment we have displayed in Figure 4 would look like with the alt attribute added to every graphic.

HTML Code with alt attribute added to produce images show on Figure 4

<p>The statistical formula for the mean for a population is:</p>

<p><img src=”popmean.gif” alt=”[mu = summation X divided by N]”></p>

<p>where</p>

<p><img align=”middle” src=”spm.gif” alt=”[SYMBOL: mu]”> the Greek letter mu, is the symbol for the population mean</P>

<p><img align=”middle” src=”ssum.gif” alt=”[SYMBOL: sigma, the summation sign”> is the summation sign and means that we should sum up what ever appears after the summation sign</p>

<P><img align=”middle” src=”sx.gif” alt=”[SYMBOL: X]”> is the symbol for an individual score, and</p>

<p><img align=”middle” src=”spn.gif” alt=”[SYMBOL: N]”> upper case N, is the symbol for the total number of scores in a population.</p>

<p>In English then, the formula for the mean for a population says sum up all of the individual scores (<img align=”middle” src=”sumx.gif” alt=”[SYMBOL: summation X]”> ) and divide that sum by the number of scores (<img align=”middle” src=”spn.gif” alt=”[SYMBOL: N]”>).</p>

When this code is displayed in a browser it looks like the display in Figure 4. In other words there is no difference in the display as long as the display is showing graphics. However if the browser has graphics shut off, It will display the alt text.

You can shut off the graphics from the browser display for Internet Explorer running on a PC as follows:

Go to the Tools menu of Internet Explorer and select Internet Options. In Internet Options click on the Advanced tab. Scroll down to the item that says “Show Pictures” and click on it to deselect it. Click OK and you should be ready to display web pages without the graphics. To turn off graphics in Internet Explorer on the Macintosh, Select Preferences in the Explorer menu. Click on Web Content and then click on Show pictures to deselect it. Click on OK . You will find that the web page loads a lot faster and this is why some people keep the images turned off.

If you look at the same code we saw in Figure 4 it will now appear as in Figure 5.

Figure 5. Segment of a web page showing alt text.

You now should have the tools you need to develop an online lesson in the visual/graphic mode. Don’t worry about the Lesson Assignment and Lesson Quiz yet. These are aspects of building interactivity into your web page and that is the topic we will concentrate on in our next article.

You might also wish to consult a text on HTML programming if you run into some difficulties as start to put your course of study on the internet. Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days by Laura LeMay is an excellent and easy to follow guide. Actually any HTML text by Laura LeMay will get you up and going in HTML quickly and easily. A more complete coverage of the topic, and a reference I always find useful is HTML & XHTML: The Definitive Guide by Chuck Musciano and Bill Kennedy.

References

LeMay, Laura. (2001). Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days. Sams Publishing.

Musciano, Chuck, & Kennedy, Bill (2000). HTML & XHTML: The Definitive Guide. O’Reilly & Associates.

Wasson, John B. (2005). Web based instruction: Creating a course homepage on the internet. Practical Update 8(4), pages 17-48.

Wasson, John B. (2003). A communications model for putting a course of study on the internet. Practical Update, 7(3), pages 21-35.

Yelon, Stephen L. (1996). Powerful Principles of Instruction. Longman, pages 2-3.