You are here

Home

Developing Web Pages for Teaching, Part II- Creating Web Pages, Part II- Introduction

Author(s): 

Scott Van Bramer
Department of Chemistry, Widener University
Chester, PA 19013

Abstract: 

The first article in this series, Developing Web Pages for Teaching, Part I -Introduction, discussed the basics of what a web page can do and what might beuseful. This second article talks about the details of how you actually create a webpage and put it out there for the world to see. There are lots of different ways to dothis, and there are lots more details than I can present here. This is simply a startingpoint to get you moving. It is based upon my experience teaching other faculty how towrite web pages. Many of the details will be different for your computer system, butthere should be enough information here that you can at least talk to the technicalexperts at your school to get upand running. Good luck.

Developing Web Pages for Teaching, Part I - Introduction

About This Article

This set of web pages were originally developed by Scott Van Bramer for a faculty development workshop at Widener University. They have been modified reorganized and expanded for the CCCE Newsletter.

 

The Web has quickly become a powerful tool for undergraduate education and its use has rapidly expanded. Many faculty are struggling with how to use this tool for teaching. This question includes both what to do and how to do it. The web becomes a much more effective teaching tool when faculty can develop web pages for their courses. This set of articles will help you decide what to do and how you want to do it.

What to put on the Web

The first question to ask yourself is "What am I going to use this for?" Your answer to this question will influence how you organize and create your web pages. Although the possibilities are overwhelming, don't be daunted. As you gain experience you can try new features. Begin with something simple. Suggestions about where to start and how to organize things include:

  1. Syllabus. This is a great starting point. Students can always get a new copy of the syllabus if they loose it; students considering the course can get a better idea of what it is about; and you can get an easy start at making web pages.
  2. Course Schedule. This is even more useful for students. Since you can easily make changes during the semester it is useful for you. As with the syllabus, this could simply be handed out on paper but it takes advantage of some features of the web. It is easy to update and you can include links to resources on the web.
  3. Links to Web Sites. As you start to use the web as a resource you need a way to point students to useful sites. There is an overwhelming amount of material available in any subject and it is difficult for students to sort through all this to find useful information. If you want your students to use the web, it must be easy and convenient for them to find information. Students are pragmatic, remember this. Long lists of web sites are easy to put together, but they will not be much help. Organize things so students can quickly find what is useful for them. Since this will change during the semester you need to find a way to organize things. Including links in the course schedule will organize them so students know when something is useful.
  4. Lecture Notes. This project is considerably more involved. Although your students will find it very useful, realize that it is a lot of work. You will have to judge for yourself if this is worthwhile. For my introductory classes this has been a rewarding effort.
  5. Supplemental material. This may be anything that is useful for your students, including old exams, solutions to problem sets and handouts. Use your imagination. The more useful the course web site is, the more the students will use it. Your site needs to have a "critical mass" so that students take the time to use it as a resource. The more you use it, the more the students will use it. If you want your students to use this resource you have to make it useful to them.
  6. Files. You are not restricted to using HTML (HyperText Markup Language) documents that display as regular web pages. There are many other methods for presenting information. With the web you can also display:

     

    1. Adobe Acrobat (pdf files). This is a file format for electronic publishing. It is especially useful if you have a computer document that you want to present as is, so that your students see it exactly as you would print it. Your students will need the acrobat reader, which is free, and you will need acrobat, which is not free. Both are available from Adobe.
    2. Video and Audio. These files are very large and do not work well with a modem connection. However, on the local network they are fine. There are several different formats that are widely used. The Spring 2001 CONFCHEM "Lecture Demonstrations in Chemistry on the World Wide Web" shows how this can be useful.
    3. Lots More. There are lots more possibilities. You can use any computer file, including; spreadsheets, wordprocessing documents, Powerpoint presentations, database files, anything that may be useful. If the students computer is properly configured the web browser will open the file in the correct application. There are lots of possibilities, but it may take some time and experimentation to get everything working.
  7. More. For lots more examples of what can be done using the web in class see Using Netscape as a Presentation Manager. Paper presented at: ChemConf '97 Summer On-Line Conference on Chemical Education June 1 to August 1, 1997.

     

Style Comments for Web Pages

These are of course, just my opinions. My hope is that they cause you to think about your reader and how they interact with your web pages. If you do this, it will be time well spent.

  1. ORGANIZE, ORGANIZE, ORGANIZE. If your student's can't find what they want in a few minutes with a couple clicks of the mouse they will not bother. You need a clear, logical, and consistent structure to help them find what they want.
  2. Keep each web page short and to the point. Scrolling to read long web pages is tedious. Scrolling through a web page is boring. Long web pages take more time to load. Break long documents into short pieces if you want students to read it on the screen. If you want them to print it out, make one longer document.
  3. KISS (Keep it Simple S-----). There is an extraordinary array of formatting features available for web pages. But overwhelming your audience with features may not help them. It is unlikely you can compete with professional web development teams hired by the entertainment companies. Don't try, instead provide information and resources to your students.
    1. Don't use the blink tag or animated gifs (graphics image file) just to be cute. Did you ever look at a web page and say to yourself, "that flashing text really makes this easier to read" or "that flashing spinning smiley face is much more effective than a bullet"?
    2. Don't specify the font. If the viewer does not have that font, they will not be able to read your page.
    3. Don't underline text. People expect links to display as underlined text, if you use an underline they will try and click on it. When nothing happens, they'll be frustrated.
    4. Don't use blue or purple text. People expect links to be in blue or purple (the default settings). If you use these colors for text, they will try and click on it. When nothing happens, they'll be frustrated.
    5. Don't change the colors of links. Once again, people expect certain colors to indicate links, if you change this, you will confuse your readers.
    6. Don't specify the background and text colors. You may really like reading yellow text on an orange background, but others may not be so thrilled with the combination. If you like yellow text on an orange background, setup your browser to display everything that way but don't impose your color scheme on others. In addition to being difficult to read and ugly, specifying colors can also cause problems with printing. For example, if you specify white text on a black background, only a technically savvy user will be able to print your document. If you use color text, users with color printers may not be pleased when they use an entire cartridge of green to print your document. There is a reason publishers use black text on white paper. It works.
  4. Think about what the web is good at, and focus on that. The web is a rich source of visual material. It is also a quick and efficient method for presenting text (although long passages are difficult to read on the computer screen and will be printed by most users). Audio and video are also possible, but keep bandwidth limitations in mind. Just because you can videotape your entire lecture and put it on the web, does not mean a student will view it from home. Try and keep video and audio clips under a minute in length. If they are longer, they will take too much time to download and won't hold your students interest.
  5. Give up the desire for precise layout control. Keep your layout design simple. Don't try to set everything so that the spacing is perfect on your computer. It will show up differently on another computer and when it is printed. The simpler the formatting, the more portable the presentation is. One of the underlining principals of HTML is that it is that you don't try and specify exactly how everything will look. There are too many variables in screen size, color, computers, and browsers for this to work well. Instead HTML lets you specify when something is important or very important. Then the browser decides what to do with that. You decide if something should be one size bigger or 2 sizes bigger. Do not specify the size, let the browser decide what that means. Give up control, it is an illusion. If you need precise page layout, don't use HTML. If you need precise page layout use Adobe Acrobat, it is intended for that purpose.

    Some common mistakes include:

    1. Using spaces for formatting. Because tabs, indents, columns, and right justifications are not available in HTML, many people try to design pages using spaces. Don't try it, the page will look different on every computer. Often with terrible results. You can accomplish some of these features with careful use of tables, but if you don't do it right it will create a mess. If you want your web page to look like a newsletter, you and your readers will probably be disappointed. If you want this level of control, make acrobat documents and put them on the web.
    2. Using hard returns for line wrapping. Just like a word processor, let the computer control the line wrap. This lets the browser adjust the lines to display properly on different size monitors and when printed. You don't have control over the margins and the page breaks on a web page, so don't try. If you need that level of layout control, look into using Acrobat documents.
    3. Page layout control. If you want to carefully control the layout of a page, learn how to use tables. It is more work than you may want, but it does provide control, flexibility, and robust page layout.
    4. Page display. Remember that the page will display differently on different size monitors and also when printed. Take a look at your web page on a 14" monitor and on a printer to verify that it works well under these conditions.
  6. Additional Information
    1. A Beginners Guide to HTML from NCSA
    2. Hypertext Style guide from WWW3 This guide has many useful suggestions about writing "good" HTML.
    3. Composing Good HTML This is a more advanced and detailed discussion about writing HTML documents. This is highly recommended for anyone who has started writing HTML and is ready for some more detail. It also offers comments on common mistakes.
    4. The Yale Style Manual
    5. HTML Terrorist's Handbook This is a humorous and useful listing of things to avoid. Unless.....

       

Basic HTML Features for Web Pages

This is a very brief introduction on HTML written by Scott Van Bramer at Widener University. You do not have to know HTML to write web pages. But if you understand the basic features of HTML, you understand how web pages work. This will help you avoid many problems as you learn to create web pages. Be aware that not all browsers recognize all HTML tags. Each company has added tags that are not a part of the standard HTML to add features to their browser. You should take a look at your pages with several different browsers to be certain that your viewers will not encounter any problems.

About HTML Tags

HTML is a markup language that tells a browser what to do. The markup tags are placed within < and > symbols. The browser looks for these symbols and uses them as instructions. Most tags include two parts. For example <B>BOLD</B> is displayed by a browser as BOLD. The <B> tag begins the bold and the </B> tag turns the bold off. HTML tags are not case sensitive. <B></B> is equivalent to <b></b>. To see how specific effects are produced, view the HTML source for this document.

Basic HTML Tags

<HTML> </HTML>
This indicates the beginning and the end of the HTML markup code. If these are not present, some browsers may display the entire document as text. The <HTML> tag should be the first thing in the document and the </HTML> tag should be the last element.

 

<HEAD> </HEAD>
These tags indicate which part of the document contains the header information. Information between these tags is not displayed by the browser.

 

<!-- created: 5/9/96 6:05:51 PM -->
Any text within <!-- and --> is not displayed. This is just for comments.

 

<TITLE> </TITLE>
These tags indicate the title of the document. This is displayed at the top of the browser window, used for identifying bookmarks, and by search engines. The title should be short and descriptive. This tag is important for making a user friendly document that people can easily find.

 

<BODY> </BODY>
The body tag indicates the information to be displayed by the browser.

 

Document Layout Tags

Several different codes are available to help with basic document layout. These include:

  1. Headers. <H#> </H#> Where # is any number between 1 (the largest header) and 6 (the smallest header). Examples are given below.

    <H1>First Heading</H1>

    First Heading

    <H2>Second Heading</H2>

    Second Heading

    <H3>Third Heading</H3>

    Third Heading

    <H4>Fourth Heading</H4>

    Fourth Heading

    <H5>Fifth Heading</H5>

    Fifth Heading

    <H6>Sixth Heading</H6>

    Sixth Heading
  2. Breaks <br>. This tag forces a carriage return in the browser. This is an important consideration in layout because browsers DO NOT pay attention to a regular line feed. Normally a browser will control the line wrap to fit the screen or the printed page. Since there are lots of different screen and printer sizes, you should not include breaks in a paragraph. The <br> tag is equivalent to the "enter" key.

     

    1. For example if your HTML document looks like this:

      A set of lines in an HTML document
      that look like they are divided into three
      lines of text.

    2. Will be displayed by the browser as:

      A set of lines in an HTML document that look like they are divided into three lines of text.

       

    3. To avoid this the HTML should look like this:

      A set of lines in an HTML document<br>
      that look like they are divided into three<br>
      lines of text.

       

    4. Will be displayed by the browser as:

      A set of lines in an HTML document
      that look like they are divided into three
      lines of text.

       

  3. Paragraph <p>. This tag is used to define a paragraph. Text within a paragraph is wrapped by the browser and the end of the paragraph is double spaced. This tag may be used two different ways. You may simply place a <p> tag at the end of a paragraph. Or you may place the paragraph within a set of <p> </p> tags.

     

  4. <CENTER>Center Text</CENTER>

     

    Center Text

     

  5. Horizontal Rule <hr>. This tag places a line across the screen and is very useful for breaking up documents. This is especially important for making a document easy to read on a computer screen. Although a page of text on paper is just fine for reading, it is very difficult to read a page of text on a computer screen. Headers and horizontal rules break a document into small easy to read pieces.

     

Text Formatting Tags

The following HTML codes are available for controlling the appearance of text.

 

<B>This text is Bold</B>
This text is Bold

 

<I>This text is italic</I>
This text is italic

 

This text is<SUP> superscript</SUP>
This text is superscript

 

This text is <SUB>subscript</SUB>
This text is subscript

 

<EM>This text has emphasis </EM>
This text has emphasis (Browser dependent, but usually displayed as italic).

 

<STRONG>This text has strong emphasis</STRONG>
This text has strong emphasis (Browser dependent, but usually displayed as bold).

 

<FONT SIZE="+2" COLOR="GRAY" FACE="TIMES NEW ROMAN, ARIAL">It is possible to specify many different features of a font </FONT>
It is possible to specify many different features of a font. Here the font size is increased by 2 points; the color is specified as gray; the font name is Times New Roman (Arial is the alternate). Some of these features can cause problems in a document. Specifying a font can cause unpredictable results if a computer does not have that font. Specifying a color can cause problems with printing. For example:

 

"<FONT COLOR="#FFFFFF">White text like this </FONT>" will not print or display on many browsers.
"White text like this " will not print or display on many browsers.

 

List Tags

These are used to make a series of points for structures similar to an outline. The list consists of several different tags. There are three common types of lists.

 

Ordered List

The first is the ordered list, which is used as an outline where the points are numbered. The list has three basic tags.

  1. <OL> The beginning of the ordered list.
  2. <LI> The list item for each item in the list.
  3. </OL> The end of the ordered list.

Here is the code for an example.

<OL> The beginning of the ordered list.
<LI> The first item for the list.
<LI> The second item for the list.
</OL> The end of the ordered list.

That will display as:

 

  1. The beginning of the ordered list.

The end of the ordered list.

You can nest subpoints and specify the symbol used for each sublevel by adding the "TYPE" specification. For example.

<ol>
<LI> This is a main point
<ol TYPE=A> 
<LI>This is a subpoint
<ol TYPE=a> 
<LI>This is a sub subpoint
<ol TYPE=I>
<LI>This is a sub subpoint
<ol TYPE=i>
<LI>This is a sub subpoint
</OL>
</OL>
</OL>
</OL>
</OL>

  1. This is a main point
    1. This is a subpoint
      1. This is a sub subpoint
        1. This is a sub subpoint
          1. This is a sub subpoint

 

Unordered List

The unordered list is for items in no specific order. It is formatted like an ordered list, but the list items are displayed with bullets rather than sequentially. As with ordered lists the labels may be specified.

Date: 
10/01/02 to 10/04/02
2002 Fall Newsletter