Jmol-HTML Lesson

Fourth exercise: Jmol and HTML files

Look for the Jmol folder in the Dock of the iMac (at the far right)

1. Click the icon to open this folder.

2. Do not rearrange the files in this folder. This file structure is essential.

3. There are 10 jmol-related files, a folder for pdb files, a folder for script files, and a folder for test pages.

4. Open the "test_pages" folder. Inside are 3 files and one application, "Taco HTML Editor".

5. Drag the "template.html" file onto the "Taco HTML Editor".

6. Now you can see the HTML code.

7. Under the "View" menu, select "Preview With Browser-> Safari". Now you can see how the page is rendered by a browser.

8. This is how I make a Jmol page for my lectures. I first load the pdb file into the correct folder: "pdb_files". Then I edit the "template .html" page to use that pdb file. Taco HTML Editor (free for MacOSX) is nice because it allows easy opening in a browser to check how it looks. Any text editor will work, but it will be necessary to manually open the "template.html" file in the browser.

9. Editing the "template.html" file: First save it under a new name, e.g. "test1.html".

10. But before we edit this file, let's examine the html code.

11. Lines that begin with exclamation marks "!" are for comments-they are not displayed by the browser.

12. The second line has the <html> tag. This identifies the file as an HTML file. Look at the last line. It has the corresponding closing tag </html>. So everything between will be defined by this tag. This format works for all tags.

13. Within the <head></head> tags are the <title></title> tags. The title is displayed at the top of any webpage. The title of this page is "Jmol-HTML Lesson".

14. Also in this <head></head> is a path to the java script file called "Jmol.js". This allows buttons and other special items to be incorporated into the page.

15. Next is the <body></body> tag. Here one can code the background color: bgcolor="#6666cc">

16. Next is a script file to initialize Jmol: <script>jmolInitialize("jmol");</script>

17. Next is a Table, which is a little complicated to understand. This is a Table that has 1 row and 2 columns. It is specified in this way:

<table>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</table>

Where "X" and "Y" are the text or items in the table cells.

18. This Table has other formatting information: width="600" border="1" cellspacing="2" cellpadding="4">

19. In this Table, X is the jmol "applet", and Y is the text describing it.

20. In the Y cell are references to the PubMed entry and the Protein DataBank file.

21. These use the <a></a> tags to reference a URL:

<a href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?cmd=Retrieve&db=PubMed&dopt=Abstract&list_uids=9063881" target="_blank">PubMed</a>

<a href="http://www.rcsb.org/pdb/cgi/explore.cgi?pid=225161108156639&page=0&pdbId=1OJ6" target="_blank">PDB</a>

22. Any URL can be linked in this way. The target="_blank" will cause the page to open in a new window.

23. In the first cell is the applet tag for Jmol. It identifies the type of applet, and the path to it:

name="jmol" code="JmolApplet"

archive="../../jmol/JmolApplet.jar"

24. A square should be specified:

width="400"
height="400"

In this table the total width was specified as 600 (pixels). That leaves 200 for the text cell. For reference, 800 pixels is common for projectors, but recent computers have more pixels across the screen than 800.

25. The next line specifies which pdb file should be loaded (and the path to it)

<param name="load" value="../pdb_files/1aqt.pdb">

This means it is up one level (../) and in a folder called "pdb_files"

26. The next lines specify the background color of the box, and the progress bar

<param name="bgcolor" value="#afd7ff">
<param name="progressbar" value="true">
<param name="progressmessage" value="Downloading JmolApplet ...">
<param name="boxbgcolor" value="#afd7ff">
<param name="boxfgcolor" value="#000000">
<param name="progresscolor" value="#ff0000">

27. Finally, the script for the pdb file.

<param name="script"
value="wireframe off;
cpk off;
cartoons;
select protein;
color group;
zoom 100;
rotate x 111;
rotate y 28;
rotate z 150;
set spin y 10;
delay 5;
spin on"/>

Each item must be closed with a semicolon ;

28. Now edit the script: change to

color red;

Save the file again. the open in the browser and see how it looks

29. In general, RasMol commands you have learned will work.

30. For reference see this webpage

Comments/questions: email me

Last modified 3/20/05