About This Article

This article is part of a series of web pages on Developing Web Pages for Teaching. They 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 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 be useful. The second article, Developing Web Pages for Teaching, Part II - Creating Web Pages, talks about the details of how you actually create a web page and put it out there for the world to see. This article introduces the basics of tables, frames, images, javascript, and embedded items. The details will be different for your computer system, but there should be enough information here that you can at least talk to the technical experts at your school to get up and running. Good luck.

Tables

Tables are one of the most useful tools for controlling the layout of a web page. In a web page a table does not have to be a data table, instead it is a way to organize page layout. You can use it for traditional data tables, but it is much more flexible than this. Be warned, however, that the apperance of a table can vary dramatically depending upon the viewers browser and monitor settings. I caution you not to try and specify an exacting page layout that makes everything perfect on your computer. If you do, it will probably come out terribly on another. Give up some of the control and let the browser make some of the decisions. It may not look perfect, but it will usually be pretty good.

Basic Tags

  1. Table Tag. This tag marks the beginning and the end of the table. This table is 60% the width of the browser window each cell will have a border (these specifications are optional).
    2. <TABLE WIDTH=60% BORDER></TABLE>

  2. Caption. This tag marks the beginning and end of a caption at the top of the table.
    3. <CAPTION ALIGN=top>Table Caption</CAPTION>

  3. Row. This tag marks the beginning and end of each row in the table.
    4. <TR></TR>

  4. Header. This tag is used for column or row headers. Text in the header is centered in the cell and displayed in a bold font.
    5. <TH></TH>

  5. Data. The data tag is used to mark the start and stop of each cell in the table. The data may be anything that can be displayed in a browser. Including text, images, and links.
    6. <TD></TD>

Example

This table is created using the HTML shown below.

Table Caption
Top Col 1 Top Col 2 Top Col 3
data 1a data 2a data 3a
data 1b data 2b data 3b
data 1c data 2c data 3c

<TABLE WIDTH=60% ALIGN=center BORDER>
<CAPTION ALIGN=top>
Table Caption</CAPTION>
<TR>
<TH>Top Col 1</TH>
<TH>Top Col 2</TH>
<TH>Top Col 3</TH>
</TR>
<TR>
<TD>data 1a</TD>
<TD>data 2a</TD>
<TD>data 3a</TD>
</TR>
<TR>
<TD>data 1b</TD>
<TD>data 2b</TD>
<TD>data 3b</TD>
</TR>
<TR>
<TD>data 1c</TD>
<TD>data 2c</TD>
<TD>data 3c</TD>
</TR>
</TABLE>

Features

Useful Features for the Data Tag. Add these elements to a data tag as needed.

ALIGN= setting .
setting specifies how information is aligned within the cell. Options include left, right, center, justify. Default is left.

VALIGN=setting.
setting specifies the vertical alignment of information within a cell. Options include top, middle, bottom or baseline.

COLSPAN=#.
# specifies how many columns the data cell spans. A data cell with COLSPAN=2 would be two columns wide.

ROWSPAN=#.
# specifies how many rows the data cell spans. A data cell with ROWSPAN=2 would be two rows high..

WIDTH=#.
Specifies the width of the cell. This may be in pixels (ie: 150) or in percentages (ie: 20%). Pixels works well for images but the actual size of the cell will depend upon the resolution and size of the monitor. Percentages work well for text since the size will be proportional to the screen size.

BGCOLOR=setting
setting may be the name of a color or a hexadecimal number in the format rrggbb. Where rr specifies the amount of red, gg specifies the amount of green, and bb specifies the amount of blue. Selecting colors is a bit difficult and it is easiest to do with a program that generates the color codes.

Generating and editing tables

  1. Netscape will generate tables. You specify the number of columns and rows. Then the outline of the table is generated and you can enter the data for each cell. You may add rows or columns easily and have good control over format and style for each cell, row, or column. Editing is much like editing a table in Word. Use the drop down menues or right click.

  2. HTML Editors usually include a table generator. You specify format features and enter data in a set of cells. Then the program generates all the table codes. Additional editing is done by hand. This may be a bit tedious, but it provides complete control. These can often input an ASCII delimited file to quickly build data tables.

  3. Word processors that export HTML are capable of generating tables. However, they do not provide much control of the layout. If you like the format they produce, they are very easy to use. In general they over specify the details of the table and produce HTML that only looks good on a specific browser and computer combination.

Additional Information

  1. HTML 4.1 Specifications, Tables. These are the standards for Tables based upon HTML 4.1. It details all the tags and variables that may be used. Other tags may be browser specific and may not display properly on all browsers.
  2. Beginners Guide to HTML This is a great place to start. Highly recommended reading for anyone starting to write 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 they are ready for some more detail and to find out what they are doing that is not so good.

Frames

Frames are very useful for producing web pages that are easy to navigate. However, they are a bit complex to develop. With a set of templates, this is much easier. The basic layout is that you use a set of individual HTML documents to generate the frame set. The first HTML document specifies how the window will be divided (horizontal or vertical) and the number and size of each frame. This first document then specifies the name of the document to place in each frame. Frames may be nested and linked in a variety of ways to provide very useful navigation features. The best way to learn how this can be useful is to look at some frame sites. This is also a good way to learn how frames can cause problems.

Basic Tags.

  1. Base Target. This tag provides a default link to place new documents in the "top" window. Without this, you may accidently create nested frames. This tag should be included in any HTML page used with frames.
    2. <base target=_top>

  2. The following HTML generates a page with two horizontal frames. Top frame is 30% of area and displays file "header.html". Bottom frame is 70% and displays file "about.html".

    3. <FRAMESET ROWS=30,70>
    <FRAME SRC="header.html" NAME=Top>
    <FRAME SRC="bottom.html" NAME=Bottom>
    </FRAMESET>

  3. The following HTML generate a page with two vertical frames. Left frame is 100 points wide, right frame fills remaining space.

    4. <FRAMESET COLS=100,*>
    <FRAME SRC="left.html" NAME=left>
    <FRAME SRC="right.html" NAME=right>
    </FRAMESET>

  4. No Frames. These tags are for browsers that do not support frames. Any information between these tags is ignored by a frames capable browser. Use these to provide access to users without new browsers.

    5. <NOFRAMES> </NOFRAMES>

Frames Templates

These HTML documents may be used as a templates to develop a set of frames. Copy and paste the HTML code from the table below into an HTML editor for use. You can click on the link to see how it works, and you can right click on the link to save the file.
  1. Horizontal Frame Set
    1. Main. This file sets up the frames.

      2. <title>Template for a set of horizontal frames</title>

      <!-- Sets default target for any link to the "_top" window. Any link without a specified target will load into the full window. This prevents accidental nesting of frames -->

      <base target=_top>

      <FRAMESET ROWS=30,70>

      <!-- Define the frameset. As rows dividing the available space 30:70. Changing these numbers will change the relative size of the frame. You may specify more than two rows. -->

      <!-- Defining the document to place in each of the frames. The NAME, defines the name of the frame for future reference. -->

      <FRAME SRC="top.html" NAME=Top>

      <FRAME SRC="bottom_1.html" NAME="Bottom">

      </FRAMESET>



      <!-- The NOFRAMES part of the document is ignored by frames capable browsers. Browsers that can not view frames will see any information in this tag. Use this to provide access to users with old browsers. -->

      <NOFRAMES>

      This document is designed to view with a frames capable browser. If you see this, you should seriously consider upgrading your web browser. You may view the individual frames using the links below.

      <ul>

      <li><A HREF="top.html">Link to top frame</A>

      <li><A HREF="bottom.html">Link to bottom frame</A>

      </ul>

      </NOFRAMES>

    2. Top. This file is placed in the top frame.

      3. <title>Contents of Top Frame</title>

      <base target=_top>

      <H2 ALIGN=center>Contents of Top Frame</H2>

      This HTML document may be designed like any other HTML document. It is displayed in the top frame. It is possible to update other frames using links to new documents or to specific locations in the current document. Like Bottom Document 1, spot <A HREF="bottom_1.html#A" TARGET="Bottom">A</A> or <A HREF="bottom_1.html#B" TARGET="Bottom">B</A>. Or you can load a different document in the bottom Like Document <A HREF="bottom_2.html" TARGET="Bottom">Bottom 2</A>

    3. Bottom 1. This file is placed in the bottom frame.

      4. <title>This is the HTML document for the bottom frame</title>

      <base target=_top>



      <H3>This is the HTML document for the bottom frame</H3>

      This document may contain any HTML code. It is displayed in the bottom frame.<P>

      You may specify names for different locations in the document.<P>



      For example this is spot <A NAME="A">A</A> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR>

      This is part <A NAME="B">B</A> (it is located further down the page)

    4. Bottom 2. This file may be placed in the bottom frame with the appropriate link from the top.

      5. <title>This is the HTML document for the bottom frame</title>

      <base target=_top>



      <H3>This is a different HTML document that is loaded in the bottom frame</H3>

  2. Vertical
    1. Main

      2. <title>bottom frame</title>

      <base target=_top>

      <FRAMESET COLS=400,*>

      <FRAME SRC="left.html" NAME=Left>

      <FRAME SRC="right.html" NAME=Right>

      </FRAMESET>

    2. Left

      3. <title>Contents</title>

      <base target=_top>



      This HTML document may be designed like any other HTML document. It is displayed in the left frame. It is possible to update other frames using links to new documents or to specific locations in the current document. Like Right document, spot <A HREF="right.html#A" TARGET="Right">A</A> or <A HREF="right.html#B" TARGET="Right">B</A>.

    3. Right

      4. <HTML>

      <HEAD>

      <TITLE>1</TITLE>

      </HEAD>

      <BODY>

      This document is displayed in the right frame.

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      This is location <A NAME="A">A</A>

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      This is location <A NAME="B">B</A>

      </BODY>

      </HTML>

Additional Information

  1. Frames Tutorial If you are really getting into this, learn about one of the latest HTML features and make really fancy pages. Note this is a Netscape extension that is not supported by all browsers. It has some significant advantages, but it is not easy and there are many pitfalls.

  2. HTML 4.1 Specifications, Frames. These are the standards for Tables based upon HTML 4.1. It details all the tags and variables that may be used. Other tags may be browser specific and may not display properly on all browsers.
  3. Generating Frames. The easiest way to generate frames is by using a set of templates. To get frames to do what you want, you will probably need to edit some HTML code by hand.

Images

Basics of Images

There are several different ways that images may be used with web pages. Most browsers can view two different types of graphics files. The GIF (Graphical Image Format) file format works best for line art and small images. This file type preserves sharp lines and gets excellent compression when there are large spaces with the same color. The gif image below is inserted with the following HTML code:
<IMG SRC="h_int_d.gif" ALT="Proton NMR Spectrum of citronellal" WIDTH=545 HEIGHT=322>

Proton NMR Spectrum of citronellal

Notice that the HTML code specifies the width and height of the image. This allows the browser to format the rest of the web page while the image downloads. If the image size is not specified the browser must wait to render the rest of the document. The ALT command in the tag specifies text to displayed until the graphic downloads. It is also important for readers with limited vision who rely upon a text to voice program to hear a web page.

The JPEG (Joint Photographic Experts Group) file format works best for photographs and color images. Some resolution is lost for line art (lines are not as crisp) but file size for photographs is dramatically reduced. This compression works by using shades of color to reduce the file size.

<IMG SRC="sey98h.jpg" ALT="Taking a sextant reading " WIDTH=301 HEIGHT=198>

Taking a sextant reading

Because images files can be large, spend some time editing the graphic so that it is as small as practical and use as much compression as you can. If you really need to use a high resolution image it is good form to include a thumbnail in the web page. This small image is a link to the full size image. Interested readers can then download the high resolution figure.

Image Maps

This is an extremely useful feature for teaching. Images can be used for links. By using an image map, it is possible to specify different links to different parts of an image. One example for how this could be used is a web page where selecting a different section of an NMR spectrum brings up a discussion of that peak. There are lots of possibilities to how this could be used.

The first step is to find an image and then map out the areas of interest. The maps are created by pixel in the image. Some web page creation software includes features to help with this. Doing it by hand is VERY tedious. An example of an image map is given below.

  1. NMR Interpretation Example


    2. <map name="isobutanol">
    <area alt="3.4 ppm doublet" coords="12,125,59,257" href="3_4_ppm.html">
    <area alt="2.6 ppm singlet" coords="169,170,218,254" href="2_6_ppm.html">
    <area alt="1.7 ppm multiplet" coords="332,211,379,253" href="1_7_ppm.html">
    <area alt="1.7 ppm multiplet zoom" shape="circle" coords="346,125,71" href="1_7_ppm_zoom.html">
    <area alt="0.9 ppm doublet" shape="poly" coords="506,254,541,254,540,5,504,3,497,188" href="0_9_ppm.html">
    <area alt="isobutanol proton NMR" shape="default" href="imagemap1.html">
    </map>
    <img src="ib_01_0a.jpg" width="559" height="300" border="0" usemap="#isobutanol">

  2. Tags
    3. Define map
    <MAP NAME="isobutanol"></MAP>

    define a rectangle
    <area alt="3.4 ppm doublet" coords="12,125,59,257" href="3_4_ppm.html">

    Define a circle
    <area alt="1.7 ppm multiplet zoom" shape="circle" coords="346,125,71" href="1_7_ppm_zoom.html">
    Define a polygon
    <area alt="0.9 ppm doublet" shape="poly" coords="506,254,541,254,540,5,504,3,497,188" href="0_9_ppm.html">
    Define the default link
    <area alt="isobutanol proton NMR" shape="default" href="imagemap1.html">
    Image (specifies file, image size, and map)
    <img src="ib_01_0a.jpg" width="559" height="300" border="0" usemap="#isobutanol">

Embedded Plug-in objects

The EMBED tag is used to place an object that requires a plug-in into a web page. There are several different uses of this in chemistry. But the most common is to include a molecular structure for CHIME. The most useful feature is that the embed tag lets you pass commands to the plug-in. This allows you to open a structure in CHIME and set the display parameters. For example the tag below:

<embed src="sf6.pdb" TYPE="chemical/x-pdb" width="400" height="300" spinx=60 spinfps=10 startspin=yes spinZ=10 spinX=30 spinY=30 display3D=ball&stick>

Will display as:

For a comlete listing of the embed tag options with CHIME see the MDL CHIME web page.

For more on the embed tag, see Netscape Embed Tag

Scripts

Scripts are programming languages that allow user interaction with a web page. One way to do this is with CGI scripts. CGI is a protocol that allows a web browser to submit information to a server. The server then runs a script using this information. Most commonly the script sends an e-mail or returns a web page to the browser. Pearl is a programming language that is frequently used to with CGI scripts. The idea here is that cgi scripts can make web pages respond to a user input.

Javascripts are similar, but they actually run in the browser. Javascript is different than Java (a programming language that is much more complex). Javascripts let you do lots of useful things for teaching chemistry. One of the most common applications is to generate problem sets using random numbers and for online testing. Some of the features are a bit primitive, but there is lots of potential. Before diving in, be forwarned that javascripts are browser dependent. IE, Netscape, and Opera have all implemented slightly different versions of javascript.

The best way I know to write Javascript is to find something similar and modify it for your use. If you really want to learn Javascript, it is beyond what this article can accomplish. This is just a starter.

To see what a javascript can do, take a look at some of George Wigers online Lecture Help Pages with Solutions. These are designed to use with Netscape.

Go to your favorite search engine and search for "javascript library", "cgi" or "pearl script" to find lots of examples and information.

Look at the program hot potato. This program creates scripts for online quizzes and more.

This page is maintained by
Scott Van Bramer
Department of Chemistry
Widener University
Chester, PA 19013

Please send any comments, corrections, or suggestions to svanbram@science.widener.edu.

This page has been accessed times since 1/1/97.
Last Updated 1/1/97