---

Web-based Hypermedia Courseware Development

Chapter 1: Web-based Hypermedia Coursware:
The Big Picture

Table of Contents

What You Will Learn Instructional Hypermedia: Why Have a Command of the HTML Language? HTML: Commanding versus Browsing the Web HTML: Professional Benefits HTML: Developing a Command HTML: What is It? HTML Characteristics Web-Based Hypermedia Courseware and Instructional Design A Hypermedia Instructional Design Model: The Hypertutor Model The Hypertutor Model Hypertutor Model Practice Exercises Web-based Hypermedia Courseware - Working Models Prototype Hypermedia Course Web-Page Summary References

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture

---

Web-based Hypermedia Courseware Development

Chapter 1: Web-based Hypermedia Courseware:
The Big Picture

What You Will Learn
Why Have a Command of the HTML Language? HTML: Commanding versus Browsing the Web HTML: Professional Benefits HTML: Why and How to Develop a Command What is HTML? General Characteristics Hypermedia Instructional Design Hypermedia Courseware Applications

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 1

---

Web-based Hypermedia Courseware Development

Instructional Hypermedia: Why Have a Command of the HTML Language?

HTML: Commanding versus Browsing the Web

The HyperText Markup Language (HTML) is one of the most important and influential languages in the world. HTML is the primary language of the World-Wide Web. It specifies the structure of Web documents. Typically, when you connect to a Web site, one or more HTML documents are automatically downloaded to your client computer. The HTML contained in these documents provides instructions the Web browser uses to display the documents, and to guide, tutor or provide consequences for the user. Having a command of the HTML language then takes you from just browsing the Web, or navigating the Web to commanding the Web. You have considerable power over the contingencies, and consequently the behaviors, that occur with potentially tens of millions of computers.

Assuming no prior knowledge of HTML, this hypermedia tutorial (hypertutorial) walks you through the most important and frequently used HTML elements. Elements or tags are perhaps the most prominent features of HTML. Elements are marked by tags (e.g., <B> and </B> mark the start and end of a boldface element) and may contain text, graphics, sound, "movies", or hypertext links to other resources. Literally thousands of HTML element examples take you, step by step, from the simplest to the most sophisticated instructional hypermedia courseware applications. This hypertutorial shows you how to take command of the HTML language to author powerful, flexible, highly sophisticated, and highly interactive Web-based hypermedia courseware, and how to use JavaScript for immediate feedback, scoring and email submissions of performance summaries. This sort of command of the language provides professional benefits. Some of these are listed below.

HTML: The Professional Edge
Add to your repertoire of professional skills Publish Web courseware Publish Web-based instructional systems Add Web capabilities to your presentations Increase your income Enhance your professional and personal power Enhance your personal satisfaction

HTML: Developing a Command

Having a command means being in charge. HTML editors, converters and other HTML utilities have been designed to help developers of Web materials ease the transition into the HTML working environment. But, these tools currently have limited utility for those who really want to take command of the environment to efficiently produce truly high quality, sophisticated, highly interactive and flexible Web hypermedia courseware. Such editors provide, perhaps, an easier entry into Web authoring, but are not the way to take charge of the HTML environment.

HTML editors tend to insulate you from real knowledge and understanding of HTML while providing limited access to the full power of the HTML environment. They handicap your authoring growth while impairing and limiting the quality, sophistication and effectiveness of your products.

They do so, for one thing, because HTML is evolving. The language is expanding to include new features, with new elements being added on an ongoing basis. Second, different browsers support different features of the evolving HTML standards and some add their own non-standard elements (e.g., Netscape). Consequently, a vast range of issues which must be dealt with by developers of hypermedia instructional presentations are not effectively handled by HTML editors at the present time. So, depending upon the desired level of sophistication of the product, HTML editors often (a) must be used in conjunction with other HTML authoring aids (e.g., file converters) to make up for their limitations, and (b) still require a layer of manual editing of the HTML source to really get it right for the final Web publication.

Finally, most experienced Webmasters agree that the quickest way to create new HTML documents is to modify and adapt tested, working documents, using them as templates, cutting and pasting elements as needed. It is often just faster, more efficient and more effective to simply type the tags rather than to stop and put them in with an HTML editor (Morgan, Wandling & Casselberry, 1996). Tags not supported by the editor have to be typed separately anyway. So, although an HTML editor may help a beginner quickly develop simple Web documents, it can also quickly get in the way and begin to feel like a straight jacket for the more experienced Web author. While HTML editors and converters can be useful tools, you have an edge if you really have a command of the HTML itself.

Commanding a working knowledge of HTML can save you time, increase your productivity, and improve the sophistication, interactivity and quality of your work. Developing that command does not take much time. HTML is fairly simple. On the other hand, those who ignore the Web phenomenon may be swamped in the backwash!

Once you have real command of the language you can edit your HTML files with almost any text editor or word processor, including those on Unix servers with non-graphics environments. You are not limited to one or a few HTML editing tools. You can take command of the development environments, as well as the language, giving you increased control, power and flexibility.

A Real Command of the HTML Language: Why?
Practice Exercise:	Practice Exercise 1.1: Check all boxes below indicating why it is valuable for courseware developers to command a working knowledge of HTML. No response HTML Editor limitations Expanding HTML features Commanding the Web Many development environments Provides a development edge

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 2

---

Web-based Hypermedia Courseware Development

HTML: What is It?

An HTML document is simply a standard text document saved in standard ASCII text file format which, along with the standard text, includes HTML tags or elements that Web browsers use as codes to determine how to display the document. Such a file is often referred to as an HTML file.

HTML Characteristics

HTML documents consist of elements marked by start and end tags like <I>...</I> where the "..." represents any text. More generally elements have the format <TAGNAME> [text] </TAGNAME>, where "TAGNAME" represents the name of any HTML tag. Empty elements, like <HR> which produces a horizontal rule or line require no end tags. Elements may have attributes. Attributes apply certain characteristics to the element. For example, the "BGCOLOR" attribute of the <BODY> tag specifies the background color of the document. The tag or element names or attribute names may be typed in upper or lower case. Elements have a logical structure and may be nested, so one element may be placed or embedded within another in many cases as in <TAG1>... <TAG2>... </TAG2>... </TAG1>, but elements may not be overlapped as in <TAG1>... <TAG2>... </TAG1>... </TAG2>. Spacing is irrelevant unless included within quotes. Blank lines, spaces and larger blank areas, etc. will not affect the format of the document when viewed in the browser. Absolute browser display positioning of text, graphics and other HTML elements cannot ordinarily be specified by the HTML author. Element positioning within a display may be specified only in a more relative sense. At this time, window size, font face, display size and resolution, absolute font size, font colors, and other display characteristics are set by the browser, not the author of the HTML document. A good rule of thumb is to view display issues in a relative rather than an absolute sense The relative approach is typically more likely to produce the intended results.

Any word processor or text editor which can save files in the standard ASCII file format can be used to create or edit HTML files. On the other hand, as previously stated, many specialized HTML editors, designed specifically to ease the development of HTML documents as well as HTML converters, designed to translate various file formats (e.g., Word Perfect, Microsoft Word, etc.) into HTML can also be used to create HTML files.

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 3

---

Web-based Hypermedia Courseware Development

Web-Based Hypermedia Courseware and Instructional Design

The last characteristic above points-up a special consideration for instructional design related to Web courseware development that has particularly important implications. The point is that at this time, the Web author has less control over the display format of Web pages than might be desired. For example, if you want to occupy a whole screen with a particular display, part of the question concerns how this can be accomplished when screens have display resolutions of 640 by 480, 800 by 600 and 1028 by 764 among others - and at the same time font size, font color, and so forth are under the control of the client. Such issues create special problems for the implementation of frame-based computer-instructional sequences which typically are paged rather than scrolled.

These considerations must be addressed in any courseware application intended for a wide audience where hardware configurations are not under the control of the Web author. While there are various ways of approaching the issue, some trivial in nature, one of the better approaches is to design Web pages attending to display elements in a relative rather than absolute sense. You will see how the "Tables" feature of HTML 3 can help to accomplish this in a later chapter.

Instructional Design and HTML
Practice Exercise:	Practice Exercise 1.2: Which one of the following characteristics of HTML must be addressed as you design the format of your Web pages? No response Documents consist of elements Elements may have attributes Elements have a logical structure Spacing is generally irrelevant Display formats are not absolute
	Practice Exercise 1.3: Is it typically better for the Web-based hypermedia courseware author to view screen display design from the perspective of a relative or an absolute orientation? No response Relative Absolute

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 4

---

Web-based Hypermedia Courseware Development

A Hypermedia Instructional Design Model: The Hypertutor Model

Web browsers introduce profound instructional hypermedia capabilities because they combine multimedia capabilities with hypertext linking to a broad range of Internet based resources. In addition, "forms" capabilities allow a higher order interactivity along with automated scoring and email-based storage of results when implemented with the JavaScript or Java languages.

This unique and powerful combination of instructional tools necessitates a comprehensive instructional design model. Following review of the instructional and educational psychology literature, the author and P.A. Grover have developed such a model. That model (Johnson & Grover, 1993) provides a general organizing framework for hypermedia courseware design. It is called the Hypertutor Model) The present hypertutorial implements many features of the Hypertutor Model. Click on the features of the Hypertutor Model Clickable Imagemap below or see Chapter 4 for more information.

Hypertutor Model Clickable Imagemap
Hypertutor Model: Five Factors	Learner Control Presentation Practice Feedback Elaborative Learning Resources

The research literature shows (see for a brief review Johnson & Grover, 1993) that superior implementation of each factor in the model results in superior instructional outcomes. According to the Hypertutor model, Web-based hypermedia instruction can be best implemented in an environment which encourages the active learner with a high degree of learner control, while at the same time providing a default pathway for the learner. The model is particularly appropriate for Web-based instruction because not only can the presentation, practice, feedback and learner control features be executed in a superior fashion, but hyperlink access makes a broad range of learning resources almost instantly accessible. Consequently, Web-based hypermedia courseware can be expected to be more effective as it more effectively executes the five features of the Hypertutor Model.

---

Hypertutor Model
Practice Exercise:	Practice Exercise 1.4: Choose the option below that best summarizes the value of the Hypertutor Model for hypermedia instructional design? No Response Includes five factors Identifies important features Provides default pathway Provides organizing framework

---

Hypertutor Model
Practice Exercise:	Practice Exercise 1.5: Responding to questions embedded in an instructional sequence is an instance of which feature of the Hypertutor Model for hypermedia instructional design? No Response Learner Control Presentation Practice Feedback Learning Resources

---

Hypertutor Model
Practice Exercise:	Practice Exercise 1.6: Hints after an incorrect response to a question during instruction is an instance of which feature of the Hypertutor Model for hypermedia instructional design? No Response Learner Control Presentation Practice Feedback Learning Resources

---

Hypertutor Model
Practice Exercise:	Practice Exercise 1.7: A hypertext glossary accessed by clicking on the term in question is an instance of which feature of the Hypertutor Model for hypermedia instructional design? No Response Learner Control Presentation Practice Feedback Learning Resources

---

Hypertutor Model
Practice Exercise:	Practice Exercise 1.8: Ability to follow a default path through instruction as well as choosing to pursue a chain of hypertext links for elaboration on an issue of particular interest is an instance of which feature of the Hypertutor Model for hypermedia instructional design? No Response Learner Control Presentation Practice Feedback Learning Resources

---

Hypertutor Model
Practice Exercise:	Practice Exercise 1.9: Words and pictures presented during instruction are typically an instance of which feature of the Hypertutor Model for hypermedia instructional design? No Response Learner Control Presentation Practice Feedback Learning Resources

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 5

---

Web-based Hypermedia Courseware Development

Web-based Hypermedia Courseware - Working Models

The prototype, hypermedia, course Web page below provides a good overview of the broad range of courseware development skills you will have when you are done with this hypertutorial. Among the features of the Web page are links to the University of Texas - Houston Health Science Center home page and the School of Allied Health Science, a course catalog description, links to a course syllabus, lecture notes, course newsgroup, on line instruction; a sample quiz, a sample practice exercise including feedback, and a sample interactive frame-based computer-assisted instruction (CAI) sequence with relative positioning. The quiz, practice exercise and CAI all include automated scoring and emailing of results to the instructor and make use of the "forms" capabilities available with HTML and JavaScript. A course instructor biography page with sound and graphics is featured as well as access to a variety of instructionally relevant databases. Keep in mind that links to external resources (e.g., databases) require an Internet connection.

Try out now the features of the prototype Web page. Keep in mind that unless you have an Internet connection, links to outside resources (as in the database and library list) cannot be accomplished. Especially be sure to try the sample quiz, the practice exercises and CAI/CBT instruction. Respond to the questions. Notice the immediate feedback on practice exercises and the frame-based CAI/CBT example. Where appropriate, press buttons for feedback, to show your score, and to emulate emailing results to the instructor. In other words, try out everything.

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 6

---

Web-based Hypermedia Courseware Development

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 7

---

Web-based Hypermedia Courseware Development

Summary

This chapter illustrates how taking command of the HTML language can take you from browsing the Web to commanding the Web. The chapter provides a preview of what's to come. It shows what you will be able to do, given attainment of hypertutorial goals and objectives. You now have actual experience with the kinds of courseware you could produce after diligent work with this hypertutorial. You learned about the general characteristics of HTML. You learned about the professional and personal benefits to be gained from having a command of HTML. You learned about the Hypertutor Model for design of hypermedia instructional systems. The working examples of Web-based hypermedia applications encouraged you to explore a wide range of courseware applications that you could use as templates and adapt for your own repertoire as you continue your work with this hypertutorial.

End Chapter 1: Web-based Hypermedia Courseware Development: The Big Picture

Copyright © 1996 Craig Johnson
Comments:

[email protected]

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 8

---

Web-based Hypermedia Courseware Development

References

1. Johnson, C. W., & Grover, P. A. Hypertutor Therapy for Interactive Instruction. Educational Technology, 1993, 33(1), 5-16.
2. Morgan, M., Wandling, J. & Casselberry, R. Webmster Expert Solutions. Indianapolis, IN: Que, 1996.

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 9

---