Introduction

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

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>