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 many jmol-related files. First create a folder called "pdb_files" within the Jmol folder.
4. Next, create a folder called "test_pages" .
5. Download the "template.html" file and place it in the "test_pages" folder. To do this: First, Control-click and "Save Linked File to the Desktop". Then drag and drop the file in the folder.
6. Open the "template.html" file in Taco HTML Edit.
7. Now you can see what a simple web page looks like. Save this file as "test1.html". That will preserve the template file in its original state, in case you need to come back to it later. This is a useful strategy.
8. Under the "View" menu, select "Preview With Browser-> Safari". (Or just click the icon at the upper right.) Now you can see how the page is rendered by a browser.
9. This is one way to make a Jmol page for my lectures. First load a pdb file into the correct folder: "pdb_files". Then 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.
10. Place a pdb file in the folder called "pdb_files". You may use the one on your desktop 1xme, or go to the PDB to download one.
11. Now, let's examine the html code. 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 (almost).
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="800" border="1" cellspacing="2" cellpadding="4">
19. In this Table, X, the left cell, is the jmol "applet", and Y, the right cell, 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=1xme
" 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"
../../ means to go up two levels of folders. Then look for the jmol folder and the Jmolapplet.jar file in that folder.
24. A square should be specified:
width="500"
height="500"In this table the total width was specified as 800 (pixels). That leaves 300 for the text cell. For reference, 800 pixels is common for projectors, but recent computers have more pixels across the screen than 800. (My new computer has 1440)
25. The next line specifies which pdb file should be loaded (and the path to it)
<param name="load" value="../pdb_files/your file.pdb">
This means it is up one level (../) from the current folder and in a folder called "pdb_files".
Change the name to that of the pdb file you just loaded. Save the file.
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 :a;
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 ;
Open the file in a browser to see how it looks
28. Now edit the script: for example, change the color.
Save the file again. the open in the browser and see how it looks
29. To get the proper orientation of the molecule, here is one way: Use Jmol to rotate and zoom to get the proper view. Then, in the Jmol pop-up menu, select "Show-orientation" It will show you moveto information, or tranlsation/rotation information. Either one will work. I have found that this cannot be copied, however, it can be dragged and dropped into another document. Then it can be edited there. Try that. Or just re-type the x,y,z angles. One can also check zoom in this way.
30. For reference see this webpage
Comments/questions: email me
Copyright 2007, Steven B. Vik, Southern Methodist University