ECTOC Conference Series Electronic Conference on
Organometallic Chemistry.
30 June - 31 July 1997

Creating Enhanced Web Pages for Chemistry and ECTOC-3

Permission to reproduce these pages has been generously been given by Steve Bachrach and the Internet Journal of Chemistry.

What is an Enhanced Web Page?

Web pages are created using HTML, a markup language that provides the ability to indicate standard page descriptions, such as paragraphs, sections, headers, subscripts, etc. The vast majority of web pages make use of just simple HTML usage, featuring images, hyperlinks, and text.

The majority of web pages written by chemists also are restricted to this simple HTML approach. Web pages written like this offer little difference from documents printed on paper, with the notable exception of the hyperlink. These standard web pages offer static images of molecules and spectra.

But the web can offer much more. Web servers can deliver all types of files, not just HTML, text, and gif or jpeg. Instead of viewing a static image of a molecule, showing a single view from one direction, wouldn't the ability to visualize a three-dimensional structure, rotate it, zoom in a particular region, be a significant enhancement of the chemical content provided in the page? Instead of reporting an NMR spectra by simply listing the chemical shifts and the multiplicity, why not deliver the entire spectra which the reader can manipulate by enlarging a particular region, rescaling, etc.? Instead of providing one or two snaphots of a trajectory, wouldn't an animation of the entire process be much more valuable? These are some examples of an enhanced web page. This technology is available today and can be easily incorporated into any and all web pages for chemists.


All files delivered by a web server have a special tag attached that indicates the type of file that is being delivered. This label is called a MIME (Multipurpose Internet Mail Exchange) type. The MIME type is composed of two parts, the first is a generic label indicating the file type, and the second part specifies the specific file format. For example, an HTML file has the MIME type text/html where the first part (text) indicates the file contains text, and the second part (html) indicates that the format is HTML. Below is a list of some other MIME types. The middle column gives the MIME type and the last column gives the usual file name extension.

File typeMIME typeFile name extension
HTMLtext/html.html, .htm
gif imageimage/gif.gif
jpeg imageimage/jpeg.jpeg, .jpg
mpeg movievideo/mpeg.mpeg, .mpg
Quicktime movievideo/quicktime.qt, .mov, .snm
portable data format (pdf)application/pdf.pdf
JavaScript fileapplication/x-javascript.js
Mac Binhex fileapplication/mac-binhex40.hqx
Rich Text Format (RTF) fileapplication/rtf.rtf

When a file is sent by a server, the server attaches the appropriate MIME type to it. When the browser receives the file, it first examines the MIME type and decides what to do with the file. If the MIME indicates a file that the browser can handle by itself, such as an HTML file or a gif image, the browser will then process the file and deliver the contents to the screen. If it can't handle the file, the browser will examine its configuration file to see if an appropriate "helper application" is available. If there is a helper application available, the browser launches the application and directs the file as input into this new application. The file is then rendered to the screen in a separate window created and managed by the helper application. For example, if an MS-Word file is delivered, the browser will launch a local copy of MS-Word and the file will come up within the Word window ready for editing. If there is no helper available, the browser will offer to save the file to the local disk.

Chemical MIME Types - the Key to Enhanced Web Pages

So how does all of this apply to chemistry? In 1994, Rzepa, Murray-Rust and Whitaker developed the idea of the chemical MIME type. These MIME types will specifiy the file formats of typical applications used by chemists. For example, the 3-dimensional molecular structure can be stored in a variety of formats, such as a GAUSSIAN input fie, an MDL MOL file, a simple xyz file, etc. X-ray crystal structures are stored in the Protein Data Bank (pdb) format or the Crystallographic Information File (cif) format. By defining a MIME type for each of these, the browser can direct the file into an appropriate program for visualizing the structure. Instead of just printing the file to the screen, the browser can launch a molecular viewer, direct the coordinate file in as input, and thereby allow the user to manipulate the structure, i.e. rotate it, change the colors, zoom in, etc. MIME types have been established for spectra as well, so that a full spectra can be loaded into a spectral viewer for manipulation by the reader. A list of some of the Chemical MIME types is given below.

Chemical MIME Types
File TypesMIME typeFile extension
Brookhaven Protein Databankchemical/x-pdb.pdb
Crystalographic Information Filechemical/x-cif.cif
Daylight Smileschemical/x-daylight-smiles.smi
Gaussian Input Filechemical/x-gaussian-input.gau
IEMBL Nucleotide Formatchemical/x-embl-dl-nucleotide.emb,.embl
Kinemage Filechemical/x-kinemagekin
Macromodel Input Filechemical/x-macromodel-input.mmd, .mmod
MDL Molfilechemical/x-mdl-molfile.mol
MDL RxnFilechemical/x-mdl-rxnfile.rxn
MDL Transportable Graphics Format (tgf)chemical/x-mdl-tgf.tgf
Mopac Input Filechemical/x-mopac-input.mop
XMol XYZchemical/

Implementing Chemical MIME types

For MIME types to be utilized requires the server and browser be properly configured to recognize these additional formats. All servers have a configuration file for assigning MIME types to files. Usually, servers identify the file type through the file name extension and then look up the appropriate MIME to attach to that type of file. All that is necessary then is to add the chemical MIME types and the associated file name extensions to the MIME configuration file.

Browsers need also be configured by indicating the appropriate "helper application" that will properly handle each new MIME type. This is done using the browser settings itself.

For Netscape Navigator, you access this information through the Options Menu, General Preferences. In the General Preferences Window, select the Helpers tab. Displayed for your are all the built-in MIME types and the program that will handle each of them. Click on the New... button to add a chemical MIME type. In this window, make sure to enter the appropriate MIME type and suffix (file name extension) and then in the Handle By section you can select the appropriate application by browsing your disk. A similar procedure is followed using Internet Explorer.

Helper Applications

Below is a list of some helper applications that can be used to visualize chemical data.

ProductPlatformsURLFile Formats
Accord Internet Chemistry ViewerMac and PowerMac,
Windows 3.1, 95 and NT Accord's native format, MDL MOL, MDL Rxnfile, MDL Sketchfile, Daylight SMILES, and SMD
CS ChemOffice NetMac
Windows CS ChemDraw, CS Chem3D, MDL MOL, Brookhaven PDB
JCAMPDX.EXEWindows 95 and NT
Windows 3.1,
MDL ChimeMac and PowerMac,
Windows 3.1, 95 and NT, SGI MDL MOL, Brookhaven PDB, IEMBL Nucleotide Format, XMol XYZ, Gaussian Input, Rasmol Script, Mopac Input, Chemical Structure Markup Language, MDL Transportable Graphics, MDL RxnFile
MDL ISIS/DrawMac and PowerMac,
Windows 3.1, 95 and NT MDL MOL, MDL TGF, MDL RXN
MSI WebLab ViewerPowerMac,
Windows 95 and NT
Version 1.1 for Mac and Windows 3.1 PDB, MDL MOL, Insight II CAR and MDF, Cambridge CSD, Quanta MSF, Sybyl MOL2, Cerius2 MSI, Catalyst CPD, XMol XYZ, ISIS/Draw Sketch
RasMolMac and PowerMac,
Windows 3.1 and NT,
VAX/VMS XMol XYZ, Brookhaven PDB, MDL MOL, Alchemy, Charmm
XMolUNIX X11, Chemlab, Gaussian Input, Gaussian Output, Molsim, Mopac (Archive, Cartesian Input, Internal Input), Mopac Output, PDB, and XMol XYZ

Creating Chemical Enhanced Pages

In this section we will detail how to author a web page that includes enhancements that make use of the chemical MIME type. The specific example will detail how to incorporate a 3-dimension structure of a molecule into a document so that the reader can manipulate the structure in her own visualizer of choice. The following section will discuss the use of the Chime plug-in module and how to employ it in creating enhanced documents.

Incorporation of molecular coordinates into documents that a reader can then manipulate has been termed a hyperactive molecule. The advantages of this approach are clear. Below is a 2-D representation and a static picture of the crystal structure of octamethyluranocene. The hydrogen atoms have been removed for clarity.

If this is the only image provided, the reader will be left with a number of unaswered questions, such as are the rings parallel to each other, are they eclipsed or staggered, do the methyl groups lie in the plane of the cyclooctatetryl rings or do they bend upwards or downwards? The author might provide a couple of more images to help answer these questions:

The above images have been provided simply as images using the HTML tag:

<IMG SRC="uran.gif">

How can we turn this static representaion into an interactive tool? Instead of simply providing the picture, we must provide the coordinates of the molecule. Coordinates can be saved in a variety of file formats; each author should provide coordinates in a convenient form, but also one that has an established MIME type, such as any of the formats listed in the table above. In this example, the uranocene molecule has been saved in the xyz format. The web server has been properly configure to attach the chemical/x-xyz MIME type to the file.

A standard way to provide coordinates within a chemical document is to place a static image within the page, chosing the most appropriate orientation. Then make this image a hyperlink to the coordinate file. When a reader clicks on the image, the coordinate file is tramitted to the browser, and the browser will launch the appropriate molecular visualization program. The image below is actually a hyperlink to the molecular coordinates, and selecting it will start this whole process.

The above image is a link to the coordinates

The HTML code used to create this image and link is:

<a href=""> <img src="uran.gif"> </a>

In the next section, we discuss how to embed hyperactive molecules within a web page, thereby avoiding the use of an external helper application, using the plug-in module Chime.

On to Chime instructions

© Steven M. Bachrach and Internet Journal of Chemistry