UT Bullet Web-based Hypermedia Courseware Development

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


Table of Contents

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 1 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

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

What You Will Learn
Red Bullet Why Learn HTML?

    Cyan Bullet HTML: Commanding versus Navigating the Web
      Cyan Bullet HTML: Professional Benefits
    Cyan Bullet HTML: Why and How to Take Command

Red Bullet What is HTML? General Characteristics

Red Bullet Hypermedia Instructional Design

Red Bullet Hypermedia Courseware You Can Do

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 1 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Instructional Hypermedia: Why Learn HTML?

HTML: Commanding vs. Navigating 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. 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 your Web browser uses to display the documents, and to guide, tutor or provide consequences for the user. So, having a command of the HTML language can take you from just browsing or navigating the Web to commanding the Web, giving you a professional edge. As an HTML author you have considerable power over the contingencies, and consequently the behaviors, that may occur with potentially tens of millions of computers.

Why Learn HTML?
Practice
Exercise: 		Practice Exercise 1.1:
HTML literacy is especially valuable to an educator because HTML:

No response
is relatively simple
is the language of the Web
is a scripting language
takes you from browsing to commanding the Web
provides a professional edge

Assuming no prior knowledge of HTML, this hypermedia tutorial (hypertutorial) walks you through the most important and frequently used HTML elements. Literally thousands of HTML element examples take you, step by step, from the simplest to the most sophisticated instructional hypermedia courseware applications.

Elements and 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). Elements may contain text, graphics, sound, "movies", or hypertext links to other resources.

Why Learn HTML?
Practice
Exercise: 		Practice Exercise 1.2:
Elements begin and end with:

No response
elements
attributes
tags
spacing
documents

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 HTML/JavaScript environment provides professional benefits, some of which are listed below.

HTML: The Professional Edge
Red Bullet Add to your repertoire of professional skills
Red Bullet Publish Web courseware
Red Bullet Publish Web-based instructional systems
Red Bullet Add Web capabilities to your presentations
Red Bullet Increase your income
Red Bullet Enhance your professional and personal power
Red Bullet Enhance your personal satisfaction
Why Learn HTML?
Practice
Exercise: 		Practice Exercise 1.3:
Check any professional benefits of HTML literacy listed below.

No response
Web-based presentations
Web courseware
Personal satisfaction
Increased income
Web-based instructional systems

HTML: Putting You in Charge

Command means being in charge. HTML editors, converters and other HTML authoring tools and 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. HTML Web authoring tools provide, perhaps, an easier entry into Web authoring, but are not the way to take charge of the HTML environment. Many Web authors agree that, at present, these tools are simply not worth the trouble it takes to learn or use them (Stout, 1996).

For one thing, 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 partially 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 HTML editor 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 (Morgan, Wandling & Casselberry, 1996). 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. 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. So for now, the smart Web developer needs to understand the HTML, not just to tweak the final product, but also to implement immediately what the HTML editors cannot yet do (Harris & Kidder, 1996).

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 superior control, power and flexibility, and a professional edge.

Why Learn HTML?
Practice
Exercise: 		Practice Exercise 1.4:
Check any 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 UT Bullet
UT Bullet 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 or HTML document.

HTML Characteristics
    Red Bullet HTML documents consist of elements. Elements are 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.

    Red Bullet 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.

    Red Bullet Elements have a logical structure. Elements 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>.

    Red Bullet 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.

    Red Bullet Display formats are set by 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.

Why Learn HTML?
Practice
Exercise: 		Practice Exercise 1.5:
Check any boxes below indicating characteristics of HTML.

No response
Elements may have attributes.
Documents are made up of elements.
Documents may employ JavaScript.
HTML contains loops and conditional elements.
Elements have a logical structure

Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 3 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Web-Based Hypermedia Courseware and Instructional Design

The fact that display formats are controlled by the browser 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.6:
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.7:
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 UT Bullet
UT Bullet 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 instructional systems 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
Diagram of Hypertutor Model
Hypertutor Model:
Five Factors

    Red Bullet Learner Control
    Red Bullet Presentation
    Red Bullet Practice
    Red Bullet Feedback
    Red Bullet 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.8:
Choose the option below that best summarizes the value of the Hypertutor Model for hypermedia instructional design?



Hypertutor Model
Practice
Exercise: 		Practice Exercise 1.9:
Responding to questions embedded in an instructional sequence is an instance of which feature of the Hypertutor Model for hypermedia instructional design?



Hypertutor Model
Practice
Exercise: 		Practice Exercise 1.10:
Hints after an incorrect response to a question during instruction is an instance of which feature of the Hypertutor Model for hypermedia instructional design?



Hypertutor Model
Practice
Exercise: 		Practice Exercise 1.11:
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?



Hypertutor Model
Practice
Exercise: 		Practice Exercise 1.12:
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?



Hypertutor Model
Practice
Exercise: 		Practice Exercise 1.13:
Words and pictures presented during instruction are typically an instance of which feature of the Hypertutor Model for hypermedia instructional design?



Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 5 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Web-based Hypermedia Courseware - Working Models

The prototype, hypermedia, course Web page below provides a good overview, along with the present hypertutorial chapter as a whole, 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 and School of Allied Health Sciences home pages, 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 Internet 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 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Prototype Hypermedia Course Web-Page

The University of Texas - Houston Health Science Center
UT LOGO School of Allied Health Sciences
AHS4312 - Introduction to Statistics in Allied Health

(2.5 hours/week lecture/discussion, 1.5 hours/week laboratory)
3 Semester Credits

Course Catalog Description

An introductory course which provides the student the opportunity to learn and apply the fundamentals of descriptive and inferential statistical analysis. This course includes the study of frequency distributions, measures of central tendency, variance, hypothesis testing, correlation and experimental design issues. The student will have the opportunity to learn to compute t-tests, analysis of variance, chi-square tests of significance and other parametric and nonparametric statistical tests. Grades are based on class assignments and unit tests.

Prerequisites: College Algebra

Course Resources

Course Relevant Databases/Libraries (Require network connection.)

cwj - 1/12/97.
Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 7 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

Summary

This chapter illustrates how taking command of the HTML language can take you from browsing or navigating 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 the general characteristics of HTML. You learned the professional and personal benefits to be gained from having a command of HTML. You were introduced to 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, including the present hypertutorial chapter as a whole, that you could use as templates and adapt for your own repertoire as you continue your work.

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


Copyright © 1997 Craig Johnson
Comments:
cjohnson@acad1.sahs.uth.tmc.edu
Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 8 UT Bullet
UT Bullet Web-based Hypermedia Courseware Development

References

  1. Harris, H., & Kidder, G. Official HTML Publishing for Netscape. Research Triangle Park, NC: Netscape Press, 1996,
  2. Johnson, C. W., & Grover, P. A. Hypertutor Therapy for Interactive Instruction. Educational Technology, 1993, 33(1), 5-16.
  3. Morgan, M., Wandling, J. & Casselberry, R. Webmaster Expert Solutions. Indianapolis, IN: Que, 1996.
  4. Stout, R. The World Wide Web Complete Reference. Berkeley, CA: McGraw-Hill, 1996.
Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 9 UT Bullet

Presentation Practice Feedback Multiple Examples Multiple Questions Learning Resources Learner Control