Chime Tutorial Embedding Chimes content

Here you will learn the absolute basics for embedding a Chime image into a web page. This can be done on a local computer without the benefit of a web server by opening your web page directly with your web browser. If you wish to share your web page with the world, you will need to place the files for you site on a web server.

If you are going to use a web server you will need to configure the server to map the suffix ".pdb" to the MIME type "chemical/x-pdb" and the suffix ".spt" to the MIME type "application/x-spt".

To embed a Chime image into a web page you need a minimum of two files: one is the HTML document that lays out your web page, the other is the pdb file that contains the coordinates for you molecule. Both of these files should be saved as "text only" files. The first should have a file name extension of ".html" or ".htm", and the second should have the file name extension of ".pdb".

For this tutorial we will use a pdb file containing the atomic coordinates for aspartame. If you do not have this file, you can obtain it by click-pausing (right-clicking with Windows) and selecting "Save this Link as ..." from the pop-up menu that appears. Click here when you are ready to obtain the pdb file for aspartame.

For creating the HTML file you can use any text editor, such as SimpleText and TextEdit with MacOS, or WordPad or NotePad with Windows. The freeware program BBEdit Lite, from Bare Bones software, is also an excellent choice for Macintosh users. A word processor, such as Microsoft Word, can be used but you must save your files as "Text only". Open your text editor and enter the following HTML tags; these are the minimum components of all web pages. (If you are feeling really lazy, you can copy and paste the text shown below into your text editor).

Save this page as "firstshot.html" in the same location as the "aspartame.pdb" file, then try opening it with your web browser. If you have done this properly it should look like this. What do you see? Not much? That is because the page contains no content. Now let's give your page some content. Open "firstshot.html" with your text editor and edit it to include the following:

Save this page as "secondshot.html" and try opening it with your browser. If you have done this properly it should look like this. The text between the <TITLE> </TITLE> tags appears in the title bar of the browser window. Anything between the <BODY> </BODY> tags appears in the body of the browser window. The <P> tag is a paragraph return.

Now let's embed a Chime model. Open "secondshot.html" with your text editor and edit it to include the following:

Save this page as "thirdshot.html" and try opening it with your browser. If you have done this properly it should look like this.

The various components of the <EMBED> tag are called attributes. Attributes can be listed in any order. The "scr" (source) attribute is the one that embeds the Chime model in the web page and loads the coordinates for the model from the designated pdb file. The "name" attribute is optional, but it is a good idea to include it, especially if you intend to refer to Chime model later in your web page. You can name your Chime model anything you wish, but each Chime model on a page should have a unique name. There are quite a few attributes that can be used to modify the model when it loads in.

Download a complete list of Chime Embed Tag Attributes in pdf (Acrobat Reader) format.

The file will open in its own window so that you can continue viewing this site at the same time.

To add a tag that will produce a ball-and-stick model of aspartame, edit the file "thirdshot.html" to include the following: