Biol 6312
27 Mar 2018
Lesson 7: Jmol and HTML files
Download the 3-button template file 3_button_template2018.html
Links to HTML help:
Links to Jmol help:
Today we will look at the 3 button page and learn a little more about HTML.
1. Find your jmol_pages folder in the jmol folder. It should also contain a pdb_files folder and a jsmol folder.
2. Move the 3_button_template2018.html file to the jmol_pages folder
3. Open it in BlueGriffon and save it as 3_button_template2.html
4. Save it again as 3_button_template1.html
5. You may download a pdb file of your choice, or for now, or use 1cx2, or use the old one called "1xme". Make sure it is saved in the "pdb_files" folder.
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 Blue Griffon by working in the "source" mode or the "WYSIWYG" mode. The latter is easiest.
9. First select the text you wish to change. (Since the selection shows a blue color, it cannot be seen on a similarly blue background)
Then go to the drop-down menu in the upper left (Paragraph), and change to a new "Heading" number.
You may also use the pre-set "styles" that I have made: style1, style2, etc
10. To make bold face, italics, or underlined, select text and click the buttons at the left: B, I, U. (Or use the format menu at the top)
11. To make the text colored, select it, then click the left of the two colored circles (black one). This takes you to a menu to select the color for the text. To change the background of the text, click the button on the right (white circle).
12. To change the font face of selected text, go to the menu called "Variable width" and select a new font. For webpages it is best to use a standard font, such as the ones listed at the top.
13. To change the color of the page, or of the table cells, it might be easier to go to the "source" mode.
14. In the definition of the variable Info: var Info={ ...}, there is a line that says: color: "#ffffff"
This is the color of the Jmol window. It should be a light color. The color is indicated by the 6 digits eeffff. white is ffffff, light gray would be eeeeee. Black is 000000. Digits go from 0-9, then a-f. (hexadecimal). You can only see this color when the Jmol actually runs.
15. To change the background color of the page, go down a few lines to line 44, or so.
<body bgcolor="#00008"> or sometimes written: <body style="background-color: #000088;">
16. For the table, look for this line:<table width="1200" bgcolor="#ffffff" border="5" cellspacing="3" cellpadding="3">
17. For cells of the table, look for this: <td width="400" bgcolor="#efefef">
18. To make a link from 3_button_template1.html to 3_button_template2.html
Add this at the bottom of the page (just before </body>:
<a href="another_page.html">Next page</a>
14. This is a relative link. It works if the 2 files are in the same folder.
15. It is possible to link to files in other folders, using foldername/3_button_template2.html (down one level) or ../anotherfolder/3_button_template2.html (up one level).
16. It is also possible to make an absolute link, such as to the Protein DataBank:
<a href="https://www.rcsb.org" target="_blank">PDB</a>
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 (or more) different views of a single pdb file.
19. Find where in the html code the pdb file is loaded. (line 36). Update this to reflect the pdb file you will be using.
Also included is the initial state of the molecule is described. This is the way the molecule will look when the page is loaded. You can not only use coloring, but "moveto" in order to present a particular starting view.
20. The 3 buttons occur starting about line 64. Look for the "//button 1"
First example is shown:
<script type="text/javascript">
Jmol.setButtonCss(null,"style='width:16px'");
+ Jmol.jmolButton(jmolApplet0,"color structure", "")</script>
<font face="Verdana, Arial, Helvetica, sans-serif">Colored by structure</font><p></p>
21. "color structure" is where you will type your script. The second set of "" allows you to label the buttons, e.g., 1,2,3...
22. "Colored by structure" is where you will type the text that accompanies the button.
23. Assignment: Send me 2 modifed template files with 3 functioning buttons, and a pdb file that works with it. One file should link to the next. Only the first file needs active Jmol. In the first page, write a short description of what is shown for each button (3), and include the proper references. Use the 3_button_template2018 file to start from. Assignment is HW#6, linked
23. This will be due on Tuesday, April 10. If you can do this, then your final project will follow easily.
Comments/questions: email me
Copyright 2018, Steven B. Vik, Southern Methodist University