![[UWEC Web]](../../../Media/smuwec.gif)
Embedding Jmol into Web Pages Using a Simple Text Editor
Part I - Cutting your teeth!
Background
For the past couple of weeks we have been learning to use Jmol as a standalone application. Now we will begin to see how it can be used to display interactive, 3-dimensional models of moleucles from web pages. In addition to providing the same capabilities to the user as the standalone version, the web-based version of Jmol allows the author of a web page the guide a visitor to their page through the information they wish to convey the visitor. As an example, below is a link to a simple web page that uses Jmol to provide and answer key to the Jmol assignment, which you handed in as part of Lab 3.
- Take a couple of minutes to examine this web page. It uses radio buttons and popup menus to send command scripts to the embedded Jmol image.
Like the standalone version of Jmol, you can right-click (control-click) on the image to obtain a popup menu, which you can use to issue your own commands to the Jmol image, including the command which opens a Rasmol Script Console window. This completely opens up control of the Jmol image to the a visitor to the web pape.
- Open up the Rasmol Script Console window for the Jmol image shown in in the webpage containing the Lab 3's Jmol Assignment Answer Key. Pick one off the structures from the popup menu and use to Rasmol Script Console window to execute the commands that will render the protein as a cartoon colored according to secondary structure and render the ligand as a spacefiled model using vander Waals radii and colored according to atom type.
One of the goals of this lab is to get you to the point where you can recreate the Lab's Jmol Assignment Answer Key webpage. However, before you can start learning how to embed a Jmol image into a web page, you must first learn how to write a web page. At first we will do this using a simple text editor, such as BBEdit or TextEdit on the Mac, or NotePad on the Windows PC. To create webpapes with these editors you must enter the html code directly. HTML stands for hypertext markup language. Instead of laying out a web page directly, HTML describes to the web browser how it should lay out the page. HTML is totally text based, which makes it easy to transfer from a server to client over to network. The downside of using HTML is that different browsers may interpret these instructions differently. To see how this works, let's look at the HTML code that is being used to lay out the page you are currently viewing.
- Right-click on this page and select "View Source" from the popup window. A separate window should open to show you the HMTL code that was used to instruct your browser how the layout this page.
Later we will use high-end web authoring tools, such as GoLive or Dreamweaver, to create web pages. these tools use a graphical front end that shields the author from having to confront the HTML code that is behind the scenes, however, obtaining a basic understanding of HTML is a good thing, even when using these high-end authoring tools.
To view web pages over the web you need to put them on a web server. The URL that is entered into the address field at the top of a web browser is path used to get to the web page on the web. For example, the URL for this page is
http://www.chem.uwec.edu/Chem406_F06/Pages/labs/Lab5/lab_5.html
The "http://" part tells the browser to interpret what it receives from the server as an HTML document; http stands for "hypertext transfer protocol". The next part is the name of the web server: "www.chem.uwec.edu". And the last part is the directory path to the file that should be downloaded and interpreted by the browser: "/Chem406_F06/Pages/labs/Lab5/lab_5.html". HTML files should always have the extention "html" or "htm". For the labs wereh you are creating and viewing web pages, you should mount and use a directory that I have created for each of you. The directory is named "username_www" where username is your username. See Lab 1 if you have forgotten how to mount directories. To carry out these instructions, use username_www instead of username_X. The difference between the username_www and the username_X directories is that the username_www directory is being servered by the www.chem.uwec.edu webserver; anything that you place in this directory can potentially be accessed from a web browser, anywhere in the world. When using a web browser, the URL to this directory is
http://www.chem.uwec.edu/Students/username_www/filename.html
- Mount your username_www directory.
Assignment
- This tutorial will lead through the process of creating and publishing a website using a simple text editor.
- Work through Embedding Jmol tutorial
- This tutorial will teach you how to embed 3-dimensional, interactive models of molecules into websites. You should also use your username_www directory for working through this tutorial.
