CS8, Fall 2010

working with HTML and output files


If you want to be excused from lab on Friday Nov 12:

Then this lab is due at the time your lab starts on Friday.

You may be excused from lab on Friday Nov 12 ONLY if you submit lab07, lab08 and lab09 before your lab time starts on Friday Nov 12th. In that case, you may turn in your H11 in lecture on Tuesday 11/16. (No 2nd turnins though.)

If you don't turn in lab07/08/09 before your lab starts on Friday Nov 12:

  • Then you must attend lab on Friday Nov 12.
  • Lab 09 is due in that case on Friday Nov 19 at 5pm
  • And you may turn it in with a late penalty up through noon on Wed Nov 24.
  • H11 will accepted in lab (with personal day exemption)

If you don't turn in lab09 before lab,
and don't attend lab on Friday:

  • You get a zero on both lab09 and H11.

  • No personal day exemption—no exceptions.

Finally, please understand: being excused from lab on 11/12 is a privilege I'm offering, not a right. As far as I'm concerned, 11/12 is a normal work day at the University, and you are expected to be in class, period—as I told you a couple of weeks ago. So by offering an opportunity around that, I'm just being nice.

So don't push it.

Goals for this lab

This lab builds on the concepts of opening files, reading from files and closing files that we introduced in lab07.

In this lab, we add the concept of output files.

By the time you have completed this lab, you should be able to understand the concepts of reading from one file, and writing into another.

In particular, you'll be able to:

Step by Step Instructions

Step 0: Preliminaries

The preliminaries for this lab are similar to those for previous labs.:

Step 1: Reviewing the role of data files

In lab07, we worked with reading data from a file called students.txt.

Open up that file in IDLE (use the File/Open menu) and save a copy of that file in your cs8/lab09 directory.

Here is a reminder of the kind of data that should be in that file:


In lab07, we wrote some functions that would help us analyze this data.

In this lab, we are going to look at how we could put this data on a web page.

Step 2: Running some example code that turns a data file into a web page

Each line in the input file has the following format:


On a web page, we want this data to be in a table like this one:

data formatted as a table

We will use Python's ability to write to files (explored on Homework H11) to accomplish this.

Run the code from makeWebPageExample.py

Back at Step 1, you were supposed to copy some code from makeWebPageExample.py into a file with the same name, and save it. Now, run that file, and at the Python prompt, type this:


It should look something like this when you do it—except that instead of pconrad, you'll see your own username:

 >>> convertStudents2Table("students.txt","table.html")
 Look for the web page at this URL:

http://www.cs.ucsb.edu/~pconrad/cs8/lab09/table.html Or if working on a PC or Mac, at this one:

file:///cs/faculty/pconrad/public_html/cs8/lab09/table.html >>>

If you read the output carefully, you'll see that what happens next depends on whether you are on CSIL, or on your own PC/Mac—but either way, it involves copying a web address into a browser. When you open up that web address, you should see a table like the one shown above, but with your own data.

Note: if you completed the lab on your own PC or Mac, the web page may be at the "file" URL instead of the http URL.

Or maybe not. The code definitely works on CSIL and on Macs. I wrote the code so that it will probably work on Windows and Linux too—but since there are so many different possibilities, it is impossible for me to test them all. If you have trouble, just do the lab on CSIL. (You can do it over the internet using PuTTY or SSH---you don't have to come to CSIL in person.)

If it doesn't work, make sure you have a students.txt file in the directory where you are running IDLE. You may need to do the same troubleshooting steps listed under "what if it doesn't work" in the instructions for lab07.

Assuming it does work, though, go on to the next step.

Step 3: Making another data file and another web page

Create a another file similar to students.txt—in the same format, with first name, last name, and major separated by commas—but with different names and majors. Save it with another name, say friends.txt.

Run the convertStudents2Table function again—this time, putting in the name of your data file, e.g. "friends.txt" as the first parameter, and "friends.html" as the second parameter.

You should see another web page—this time with the new data you put in your "friends.txt" file formatted as an HTML page.

Step 4: Understanding the example code

Now, you need to look through the code in makeWebPageExample.py and try to understand how it works.

Note that you do NOT need to spend much time on the following functions—these are supplied for you to make your lives a little easier, but are not that important for you to focus on at this time:

We'll briefly introduce each of those a little later in the lab—but for the most part, you won't need to touch those.

Instead, skip on down to the definition of the function that we DO want to focus on—the one for which you typed in a function call at the Python prompt—the definition that starts like this:

def convertStudents2Table(inputFileName,outputFileName):

This function takes two strings as parameters (e.g. "students.txt" and "table.html").

The first is used as the filename in a call to open that opens an input file:

studentFile = open(inputFileName,"r")

The second is used as the last part of a filename in a call to open that opens an output file.

The first two lines below create a directory for web pages under your home directory and build up a file name (using string concatenation) that starts with ~/public_html/cs8/lab09 and ends with the value of outputFileName.

They do so using some functions I'm supplying for you that take care of the complicated stuff (looking up your home directory and your username). (You don't need to worry about the internal details of those functions.)


htmlFileName = webDirectory() + "/" + outputFileName

htmlFile = open(htmlFileName,"w")

Now, we have both an input file and an output file to work with.

The first thing we do is write the "header" to the HTML output file.

This is done via these lines:

htmlFile.write(webPageHeader("Table of Students"))

We then have code which writes out the body of the page which contains an H1 heading, and table.

To make sense of the code, you'll need a bit of an overview of how HTML tables work:

For more information on HTML Tables, see: http://www.w3schools.com/html/html_tables.asp

So, we see in the code, some lines that write the first part of the body to the output file:

htmlFile.write(webPageHeader("Table of Students"))
htmlFile.write("<h1>Table of Students</h1>\n")
htmlFile.write("<table border='1'>\n")
# Write the table header
htmlFile.write("<tr><th>First Name</th><th>Last Name</th><th>Major</th></tr>\n")

Then, there is a loop that reads every line from the file:

# process every line in the file---and for each one
# write a line to the html for the web page

for line in studentFile:

What do we do for each line? We split it into a list of items, and then print those items, formatted as a row in an HTML table, like this:

   # Convert this line into a list
   lineAsAList = line.strip().split(",")

   # Pull out the first name, last name and major
   fname = lineAsAList[0].strip()
   lname = lineAsAList[1].strip()
   major = lineAsAList[2].strip()

   # Write one line to the table

   htmlFile.write("" +
                  "" + fname + "" +
                  "" + lname + "" +
                  "" + major + "" +

Only after the entire loop is finished, we write the end of the table, the end of the HTML file, and then close up the files:


# close the intput file and the output file

There is then a little more code that prints out some messages for the user, telling them where to look for the web page. The output is something the user can copy/paste into the web address bar of their browser to find the file on the web.

Once you think you understand what is going on, you are ready for the challenge of this week's lab.


Step 5: Write a program that formats weather data into a web page

The file sb2009weather.csv is a file that contains actual weather data for Santa Barbara for every day during the 2009.

Look over this file. Here are the first few lines:


Each line contains these values, separated by commas:

Your job: write a program that reads all the data from this file, and formats it as a web page, so that it looks like this:

sb weather as an HTML table

You can use the makeWebPageExample.py as a starting point—but be sure to make appropriate changes:

Your code should work by providing a function that you can call like this:


You may want to save a small version of your file—say just the first few lines—to a file called "test.csv" and use that when testing.

When your function can turn any weather file into one like the one shown above, then you are almost done with lab09!

Step 6: Copy the files for your lab to your pair partner's account and run them there also

To get full credit on this lab, both partners (or all three partners) need to be showing the web page under their account.

So, before submitting via "turnin", make sure that for both (or all three partners), you can see the web page at:


To do that, you need to:

Note: if you completed the lab on your own PC or Mac, it is important to run the files on CSIL at least once before doing the turnin step, so that the web pages are in place on CSIL.

Step 7: Final Submission

But before submitting, do your final inspection—look over the rubric, make sure everything looks ok.

Then submit using:

turnin lab09@cs8 lab09

Evaluation and Grading Rubric (150 pts)


This lab follows the practice introduced in lab07 where:

Lab09 grading rubric:

Due Date: See large box at top of file.

Copyright 2010, Phillip T. Conrad, CS Dept, UC Santa Barbara. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.