Fifth exercise: Jmol and HTML files (part 2)
Download the template/jmol files sit zip
Links to HTML help:
Links to Jmol help:
Today we will look at the 3 button page and learn a little more about HTML.
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 Edit".
5. Drag the "template.html" file onto the "Taco HTML Edit".
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. Font size can be changed in several different ways. Try this:
<font size="+1">Your text here.</font>
That makes the text one step larger. You can use "+2" to get larger, or "-1" to get smaller.
9. To make bold face enclose the text in <b></b>
10. To make the text italics, enclose in <i></i>
11. To make the text colored red:
<font color="red">Your word</font>
for nonstandard colors use the code: #ff0000 (see the Colors link above)
12. To make a link from your_page_1.html to your_page_2.html
Add this at the bottom of the page:
<a href="your_page_2.html">Next page</a>
13. This is a relative link. It indicates that the 2 files are in the same folder.
14. It is possible to link to files in other folders, such as the pdb files in the "template.html".
15. It is also possible to make an absolute link, such as to the Protein DataBank:
<a href="http://www.rcsb.org/pdb/" target="_blank">PDB</a>
16. In the previous line, the target="_blank" will make the link open in a new browser page.
17. Now let's look at the 3 button template page
18. This page is able to present 3 different views of a single pdb file.
19. Find where the pdb file is loaded. It is in the <applet> tag
20. The 3 buttons are described earlier in the page. This is javascript, and is found in a <script> tag. The text in red specifies the Jmol script.
<script>
function Button1() {
document.jmol.script('cpk off; ...; set spin z 5; spin on');
}
function Button2() {
document.jmol.script('cpk off; ...; spin off');
}
function Button3() {
document.jmol.script('select protein; cpk 80% ');
}
</script>
21. Save this template under another name. Then try modifying some of the button scripts.
22. Assignment: Send me a "template_x.html" file and a pdb file that works. In the page, write a short description of what is shown, and include the proper references.
23. This will be due in 2 weeks, on April 11. If you can do this, then your final project will easily follow.
Comments/questions: email me
Copyright 2005, Steven B. Vik, Southern Methodist University