Introduction to Bioinformatics

Prep readings:

• Text: Class notes
• Files: See below for each section.

In this assignment, we wish to:

• learn how to create and use clickable image maps in HTML
• learn how to create and process forms using HTML and Perl

For this section, you will need the following files:

• clickable.html
• head.html
• tail.html

In this example, the file clickable.html is an HTML page containing an image of mouse. Clicking near the head of the mouse loads the head.html page. Alternatively, clicking near the tail of the mouse loads the tail.html page.

To use these files with your own project, replace the image with your own. The image should be related to your term project in some way. Use Paint (or similar image display tool) to locate the coordinates of the top left and bottom right corners of rectangles in the image that cover the areas you would like to be able to click on. In HTML, they need to specified as COORDS="x1,y1,x2,y2". The point x1,y1 is the upper left corner (relative to the upper left corner of the entire image), while the point x2,y2 is the lower right corner. (In the HTML format, the x values are for the horizontal direction, while the y values are for the vertical direction.)

For example, when using Paint with the mouse image provided, you would follow these steps to select rectangles:

1. Right click on the mouse image, and select "Save Picture As." (Make a note of where you save the mouse.jpg file.)
2. Start up Paint. (This program is usually located off of the Programs-Accessories list in Windows.)
3. In Paint, do File-Open and locate the mouse.jpg file.
4. Expand the Paint window so you can see the bottom toolbar that displays pixel locations when you click on various parts of the image.
5. Click on various points in the image and note how the pixel location changes in the bottom part of the Paint tool.

1. Save the image you have found in your bioinformatics folder on your I: drive.
2. Save the three files above (clickable.html, head.html, tail.html) into the same directory. The filename for clickable.html will not change, but you are free to change the names of the other two .html files to filenames that have meaning for your image.
3. Determine areas of significance in the image, and use Paint to determine the coordinates of those regions.
4. In clickable.html, replace the image file name with the full URL path to the copy of the image on your I: drive.
5. Insert the coordinates you found using Paint in the clickable.html file, in the lines containing COORDS tag. On these same lines, indicate the .html file to load when the user clicks within that region. (This would be your new name for head.html or tail.html, etc.)
6. Include a caption and reference indicating the source of your image in your clickable.html file. Similarly, include meaningful information in your other .html files that means something relative to where the user had clicked on the image.
7. Include a link to your clickable.html file on your course Webpage, near the heading, "Lab: Practice with Clickable Images and Forms in HTML."
8. E-mail me when you have completed these steps.

For this section, you will need the following files:

• sample-form.html
• process-form.cgi

In this example, the file sample-form.html is an HTML page which shows various types of questions that you can use on forms, such as pull-down menus, checkboxes, and text input areas. Note in this file that each question has a variable name associated with it, such as Q1, Q2, Q3a, Q3b, Q3c, and Q4. The file process-form.cgi is a Perl program that processes the form results. In this example, the choices the user selected are displayed on a page along with an image. Experiment with the form and submit it several times to confirm that the page displayed after submitting the form accurately reflects your responses. What happens if you leave a question blank?

Now, to use these files with your own project, follow these steps:

1. Save out sample-form.html and process-form.cgi to the bioinformatics folder on your I: drive.
2. Edit the question content in sample-form.html and modify the variable names so they have meaningful names. Think of questions that are similar to the types of queries (questions) users might ask of your term project topic area.
3. Next, edit process-form.cgi and make the variable names agree with any changes you made in sample-form.html.
4. Use your browser to make sure the form in the sample-form.html file displays correctly.
5. Next, to test your .cgi file, you will need to e-mail both files to me. I will upload your .cgi file to an appropriate location and e-mail you back an updated .html file to reflect this.
6. After receiving an e-mail back from me and making the changes indicated, include a link to your sample-form.html file on your course homepage, near the heading, "Lab: Practice with Clickable Images and Forms in HTML."
7. Follow your new link and test your form to make sure the results are as expected.