Lab6

Computer Science 111; October 12, 2006

Lab #6 = Homework #6

The purpose of today's lab (and homework) is to introduce you to web page construction, with the twist that you will write a python program that generates a tailored web page for the user.

Part 1. First, you will create a simple web page and go through all of the steps to "publish" it in your account on beowulf. Then you will learn how to use python to create a page. The language that browsers can interpret is called html, or hyper-text markup language.

Copy the following html commands into a file called lab6.html:

<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>

<H2>A web page with an image</H2>
<IMG SRC="taz.gif" WIDTH=130 HEIGHT=130>The Tasmanian Devil</img>
</body>
</html>

You need to have the file "taz.gif" in your directory; type
```
getcopy taz.gif
```
Now copy both the html and gif files into your public_html subdirectory by typing
```
cp lab6.html public_html/lab6.html
cp taz.gif   public_html/taz.gif
```
and make sure they are accessible to all web users by typing
```
chmod a+r public_html/*.*
```
Open a Web Browser and check that you have successfully published your file. Type in the URL http://cs.smith.edu/~111a-xx/lab6.html - where xx are the letters in your course account.
Don't forget the tilda (~) character. The file should load from beowulf. If you have problems at this point, ask a lab assistant for help. When you see the file, if you look at the browser's locator, you'll see that is says http://maven.smith.edu with maven instead of cs. Our cs web server is actually called maven, and cs is just an alias.
If you like creating web pages, consider taking csc102/105. It is a sequence of two half courses. 102 is How the Internet Works and is offered in both spring and fall. 105 is Interactive Web Documents and is offered in the spring.

Part 2. Now you will write a python program called lab6.py, that creates a similar html file, called lab6user.html. This program asks the user which image to display.
This time, create the python file directly in your public_html subdirectory. To do this, type

cd public_html

where cd stands for change directory. Then do what you usually do: emacs lab6.py, etc.

Your python file will open lab6user.html in write mode.

In other words, type
```
        myhtmlfile = open("lab6user.html","w")
```
and make sure you use write ("w") mode.
Then write strings that are html tags to the file. You can use all your usual tools such as the write function, and string manipulation.
Make sure that each html tag appears on its own line in the file. Using the newline character, "\n" is useful here.
For example
```
        myhtmlfile.write("" + "\n")
```
Try getting your program first to write the simple html file above before adding the other parts described below. The <img ...> tag is a little tricky, because the double quotes are necessary for the html img tag, to tell it the filename of the image. There are two solutions: You can use single quotes for the whole string, and so will pass the write() function this string as a paramter:
```
'<IMG SRC="taz.gif" WIDTH=130 HEIGHT=130>The Tasmanian Devil</img>'
```
or you can use double quotes for the whole string and use the special double quote character \":
```
"<IMG SRC=\"taz.gif\" WIDTH=130 HEIGHT=130>The Tasmanian Devil</img>"
```
When you are done editing, have run python, and python has created your lab6user.html file, it will already be in the right directory (public_html). Don't forget to
```
chmod a+r lab6user.html
```
Next, change your program to let the user choose from three images. You can find three images from the web, or you can use three of mine:
1. getcopy Darth.gif
2. getcopy Franklin.gif
3. getcopy taz.gif
Using pythons' raw_input() function, you'll ask the user to choose one, for example:
```
    choice = raw_input("Which one (Darth, Franklin, or taz)? ")
```
You should be careful in case the user doesn't capitalize one of them, and also, make the third one the default so your program generates an html file with an image on it no matter what. Use string concatenation(+) to create the string that contains the image filename.
Instead of the line
```
<IMG SRC="taz.gif" WIDTH=130 HEIGHT=130>The Tasmanian Devil</img>
```
- you will replace "taz.gif" with whatever the user requested, and use string concatenation(+) to create this string.
- You will make up a heading to go with each of your three gif images and concatenate the one that goes with the image the user has chosen.
- If the user does not choose any of the images, then show the third image as a default.

Part 3. After you have everything working so far, go to this page: http://www.cwru.edu/help/introHTML/toc.html, an introduction to HTML.

You will see some of the commands we used. Go under number 4. Lists. Follow the instructions and make your python program generate a list of three features for the image the user has chosen. You can choose either an ordered list or an unordered list.
For example, my list for Darth might be:
- Likes Black
- Carries a light saber
- Speaks gruffly

Part 4. Extra Credit After all of the above is working, add two function definitions.

Function 1: Call this function htmlOpening(). It takes in the file variable as its only parameter and writes the html tags
```
<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>
```
to the file. Then you will call this function in your main function definition in the place where you want these tags to be written to your file.
Function 2: Call this function htmlClosing(). Very similar to Function 1, it takes in the file variable as its only parameter and writes the html tags
```
</body>
</html>
```
to the file. Then you will call this function in your main function definition in the place where you want these tags to be written to your file.

This lab is this week's homework. When you are done with it, by midnight Wednesday October 18.
submit homework6 lab6.py
Also! make sure to submit the three gif images, for example:
submit homework6 Darth.gif
Don't forget to use sftp to make sure that each partner has a copy of the files.