University of Missouri at Rolla
Faculty Workshop on Using the Web in Courses

 Web Resources in College Courses
Randy M. Brooks, Ph.D.


Web Resources in College Courses

In this session of the workshop, you will learn about the basic building blocks of web pages and how they are connected by hypertext links. You will also learn how to create a web resources page on a topic of your choice, which may be used to help guide students to web sites or information relevant to one of your courses. You will learn how to use the web and internet as an "Intranet" to provide means of online discussions, questions and development in a course. You will conclude by considering additional means using the web as an "electronic space" for your future courses. Consider the range of web page designs, which range from simple to complex.

All web pages may be classified within a continuum of entertainment versus information value (with a corresponding continuum of passive versus interactive involvement by users). The overall goal is to establish an appropriate balance of entertainment and information value for the web site. The web site needs to be interesting and attractive, yet also provide desired information.

Range of Example Web Sites:

Simple Text Only

 Balance of Graphics
And Text

Highly Interactive
Entertainment Site: TWISTER

Conservative Logo & Text

 Graphical
Information Site

All the Gimmicks
But No Content


This workshop is designed for beginners or moderately experienced web users with some experience seeking information and building basic pages, but you will move quickly from the role of information seeker to information provider as you prepare a web page of resources for your students.


 Elements of a Web Page

 Organizing Hypertext Links

How Browsers Process HTML 

Creating a Web Resources Page

Providing Interaction

Using Graphics

 Possible Course Pages

Advanced Java Interaction

 Faculty Web Page Templates


Elements of a Web Page

(1) Browser window with user controlled graphical user interface.
scroll bars
window resizing
navigational controls (forward, previous, go, bookmarks)
downloading any element (source, information, graphics, background)
printing
 
(2) Background Space & Graphic Design Effects
background color
horizontal rules
table borders
graphic bullets, bars, navigational icons
icons
 
(3) Graphics
high contrast GIF graphic files
photographic JPEG graphic files
graphics as buttons
graphics as web maps
graphics as backgrounds
display text graphics
 
(4) Text Elements
paragraphs
column justification (right, left, centered)
headings
list formats
text emphasis devices such as bold, italics and text color
tables
 
(5) Hypertext Links
links to remote URLs
links within a web page
defining linking conventions (color, underlining, visited links change color)
mailto links
 
(6) Special Web Elements (may require cgi, Java or special browsers)
buttons
response fields
frames
sound players
QuickTime movie players

back to top


How Browsers Process HTML

What is HTML? HTML is a markup language which provides a simple, universal language for all web browsers to use in order to format information on the computer screen. It allows the user to control display preferences on his or her own computer screen (font choice, font size, window size, monitor resolution), without altering the content of the html file itself. In other words, the browser software "interprets" the html script and displays text, graphics and tables according to universal markup tags. The tags remain constant, but the browsers display the information according to the user's settings.

Do you really need to know it? With a good web page editor, you may not need to know html in depth. However, when it comes to tweaking display problems or quickly editing links to graphics or other files, you may need to know enough html to de-bug a file. The most important reason for knowing some html is simply to understand how browsers will process your files, so that when a display goes haywire, you will know how to fix it.

Basically, browsers process html, one line at a time, looking for an opening markup tag such as <Title> and a closing markup tag </Title> so that it knows that a certain display command is complete. All html files are essentially text only files with links to graphics and other files, so they may be created in any word processor. As text only files, they download quickly across the internet (it is the graphics that slow down the process). So for a fast loading strategy, provide some text before graphics and the reader will have something to read while waiting for graphics to catch up. Or use no graphics (not very interesting) and your site will zip out to users.

HTML Guides and Tutorials:

 NCSA--A Beginner's Guide to HTML

 HTML Crash Course for Educators

Doctor HTML v5 

 HTML Design Guide Main Page

  

Fact Sheet: W3C Issues HTML 3.2 as a Recommendation 

back to top


Organizing Hypertext Links

The most basic principle of web design is to always provide context before detail. Users need to know where they are and what they are looking at before processing large chunks of information. Users also like to have an idea about where links will take them before going to the link.

Therefore, one of the immediate signs of a well designed web page is that it is clearly labeled with titles and brief overview statements about what you can expect to find within the site. Links are also labeled clearly so that they give users an idea of what they will discover at the other end of the link. Instead of merely providing a list of links, users need organized links with brief explanations or descriptions of where the links take you.

Research on cognitive overload suggests that people can handled only a limited amount of information before they experience cognitive dissonance. Most of us are limited to about seven items in short term memory, before we become disoriented about the list. Therefore, you need to provide only small amounts of information at a time on the screen, if you want to keep the user oriented and comfortable navigating through the lists you provide.

Categorizing your information into short lists with clear headings will help the user immensely.

Organizing Bookmarks

Bookmarks can be gathered as you search the web, but they are added to the list in the order of your search. The natural chronology of your search might be a good organizing principle if you want to recreate the exact order of places you went, but it is more likely that you will want to re-organize those sites by logical or hierarchical categories. To do this, you need to learn how to create folders (or subdirectories) within your browser. In Netscape Communicator, you choose "Bookmarks" under the "Communicator" menu.

Let me demonstrate how to organize bookmarks by changing the order of bookmarks collected or by creating new folders with descriptive labels.

Consider categories of links that will be most useful to your students, as they begin their search for resources on the web. The links and categories you provide first are assumed to be the most important. The links that are buried in the context of other information are assumed to be "extra information," and the links that are highlighted with lots of white space are assumed to be especially important, valuable links.

back to top


Creating a Web Resources Pages

Bookmarks can be saved as separate HTML files and then easily adapted by a web editor into a web resources page. I will demonstrate how to save bookmark files and convert them into a web page.

The technical part of the conversion is very simple, with URL addresses (external links) already established as part of the bookmarks. The difficult part is re-designing the titles, headings and explanations and value of the information to be found in the bookmarks. Create a guide to the bookmarks (now hypertext links) so that your users will be able to find the information most needed.

In the workshop we will complete this conversion process in a step by step process of developing a bookmarks guide to the web page. We will also look behind the scene of the web editor, to gain an understanding of the underlying scripting of the HTML code. This is important not for its own sake but in order to do trouble shooting with graphics or other problems that may occur.

back to top


Providing Interaction

As your students use your web resources web page, they may discover mistakes or want to make suggestions for improving your page. Provide means of interaction, so that they can enter into the ongoing development process of making the web resources page as up-to-date and complete as possible.

You may simply add email function to your web page through a simple "mailto:youremailaddress" link somewhere on the web page. Or you may want to add a submit information field, in which students could make additions to the web site itself. Or you may simply wish to show the students how to update the web page, and have them find new URLs, new bookmarks to add to the site.

Interaction is not merely a critical response; it is a creative, co-productive response to the existing page. Through collaboration the page can take on a dynamic, living quality as it changes on a regular basis.

Keep in mind that as you add dynamic elements, such as a "site of the week" or "new resources" sections, you want to continue to provide the best of your static information as well. Just as people seek out the new, they also desire the stability of knowing where they are and where they can return to "safe bases" of old information again and again. Don't change the entire design of your site, merely plan for places and ways to maintain freshness or new elements as well.

Advanced web page techniques for interaction require Java scripting or CGI links to databases and other resources. Some excellent work has been done using Java applets for Physics demonstrations and "virtual" labs in sciences and engineering. Two faculty who have collaborated on several interactive physics applets are Wolfgang Christian and Gregor Novak. See their WebPhysics pages and Cockpit Physics projects.

Another advanced Java interaction teaching site for freshman Engineering at John Hopkins University http://www.jhu.edu/~virtlab was recently discussed in the October 10, 1997 issue of the Chronicle of Higher Education (page 25A). The applets allow students to conduct lab experiments on the web, such as building a bridge to certain specifications or programing a robotic arm.

back to top


Using Graphics

Graphics are not adornment. They are never merely for entertainment value. Graphics have the power to grab all of the attention away from text, so they must be used carefully to lead the reader into essential information. All graphics contain an illusion of motion which may be exploited by the designer to lead the user's eyes to key points. For example, any photograph of a person will suggest that he or she is looking or moving in a certain direction. Readers will follow the implied direction to see what the person in photograph is looking at or where the person plans to go.

On the other hand, sometimes graphics are the information being provided, in which case they need to be featured, front and center, with clear titles and labels. In these cases, the text needs to prepare the viewer to understand the graphic.

Animated graphics create a great deal of attention but rarely allow the viewer to move on to other information, so unless the animation is the most significant point of the page, I would avoid using it.

Graphics also have the potential to reduce your page into a waiting game, especially for users who are coming to your page through a modem. Therefore you must learn to reduce the memory (and number of colors being used) if you want your pages to load quickly. A neat graphic is not neat if the user had to wait two or three minutes for it to load. And if the graphic turns out to be a frivolous decoration instead of essential element of the page, the user will resent the waste of time.

In the workshop I will provide some basic tips for keeping graphics low in memory and valuable in design function.

back to top


Possible Course Web Pages

We will conclude the workshop by brainstorming about different possible home pages for courses. We will examine sample course pages on the web and consider how useful or distracting the samples probably are for students in the course. We will also touch upon the use of the web as a student presentation tool (where the student creates a report including web resources) for other students to use.

The range of possible course web pages will move from information resources to interactive development projects. The range will be intuitively connected to a variety of approaches to teaching: presentation, active learning, problem solving, individualized testing, collaborative development, academic topics, public issues and service learning.

Webizing a course often means creating a web site for a course which provides information to your students throughout the semester. You can put your syllabus on the web site, with links to full descriptions of various assignments and class schedule. If you include dynamic information which changes on a regular basis, your students will get in the habit of checking the class web site for announcements, assignments and other learning opportunities.

The web site can provide a directory to the students in your course. This makes it easy for you and your students to communicate with each other. The directory might take the form of email addresses or links to each student's own web site. The web site also becomes a place for collaboration; groups of students may work on a common document or project through the web. For example, students may create a web site for a local children's museum.

You may want to prepare presentations using a web page to link to examples on the web or to other resources. Such a presentation may be given during a class, with the opportunity for students to return to web site for review or closer consideration on their own whenever they wish. Student presentations can likewise be designed and presented on the web for groups or individuals.

Access to web resources related to your course can also be provided through the class web site. These resources may include your own academic research (essays, workshops, speeches or publications) often indexed in your vita or someone else's bibliography including web links. Students may want to create annotated web-bibliographies of resources.

The web is an excellent way to bring accountability to student learning through student publishing such as the project by young children at North Carolina Community Fourth Grade Digital Connection. Student research and subsequent web reports can be published on the web for other students and the general web public to enjoy, appreciate or respond to. Student performance is "on the line" and will have consequences when it is public. Therefore, I also encourage students to provide introductions and commentaries on their work, usually in the form of a web portfolio in which students explain their goals, purposes and constraints of their portfolio examples. Here is another example of another web portfolio.

back to top


Rolla Faculty Course Web Pages

back to top


course web page templates:

online syllabus template

presentation template

course schedule template

course assignments guidelines

web portfolio template

academic vita

back to top


This site is maintained by Dr. Randy Brooks, Director of the Writing Major, English, Millikin University.
Last modified December 2, 1997. Contact: rbrooks@mail.millikin.edu