Fifth exercise: Jmol and HTML files (part 2)

Download the 3-button template file 3buttons_template.html

Links to HTML help:

1. W3schools
2. HTMLGoodies
3. HTML code tutorial
4. Barebones
5. Dave Raggett

Links to Jmol help:

1. Jmol Homepage
2. Scripting Documentation
3. Demonstration pages
4. Colors!

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. Move the 3buttons_template.html file to the test_pages folder

3. Open it in Taco HTML Edit and save it as 3buttons_template2.html

4. Save it again as 3buttons_template1.html

5. You may download a pdb file of your choice, or use the old one called "1xme".

6. You will need a pdb file other than 1xme to complete the homework assignment.

7. Now try several things:

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 3buttons_template1.html to 3buttons_template2.html

Add this at the bottom of the page:

<a href="3buttons_template2.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, using foldername/filename.html or ../anotherfolder/anotherfile.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 features of the 3 button template page

18. This page is able to present 3 different views of a single pdb file.

19. Find where in the html code the pdb file is loaded. Look for 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. Try modifying some of the button scripts.

22. Assignment: Send me a folder (your name) containing a template file and a pdb file that works with it. (Use the file structure on your computer's Jmol folder). In the page, write a short description of what is shown, and include the proper references. Use the 3buttons template. (You may use my drop box ITS#12852 via the local network on a Mac.)

23. This will be due in 2 weeks, on April 16. If you can do this, then your final project will follow easily.