Graphic by Keith Ohlfs

CS111, Wellesley College, Fall 1997 Problem Set 1 Due: Thursday, September 18

[CS111 Home Page] [Syllabus] [Students] [Lecture Notes] [Assignments] [Programs] [Documentation] [Software Installation] [FAQ] [CS Dept.] [CWIS]

Ink Incorporated, an ink and dye company, is experiencing a crisis. Last week, Paige D. Zeiner, the company's sole HTML programmer, left for a higher-paying job at a Wall Street investment firm. And this week, when their file server crashed, the only copy of their web page file was irretrievably lost. A search of Paige's old cubicle turned up only a hardcopy printout of the company web page and a few notes that Paige wrote about HTML.

You have been hired by Ink Inc. to re-implement their web page based on the hardcopy printout and Paige's HTML notes. A scanned-in image of the hardcopy printout appears at the end of this document; Paige's notes appear below. The president of the company likes Paige's original web page design and wants you to copy her design as closely as possible, without making any stylistic changes.

It is worth noting that Paige's web page did not include any images or links. In addition to simple text formating and lists, the only HTML features it made use of were tables and fill-in-the-blank forms. Everything you need to know about these features is explained in Paige's notes below.

Turn in your completed file (named <your-user-name>-ink.html)by uploading it to your ps1 drop folder on Nike.

Tables: A table with k rows and n columns is specified as follows (the notation (i,j) means the datum in the table cell at row i and column j):

<table table-attributes>
<tr><td datum-attributes>(1,1)</td> ... <td datum-attributes>(1,n)</td></tr>
... rows 2 through k-1 go here ...
<tr><td datum-attributes>(k,1)</td> ... <td datum-attributes>(k,n)</td></tr>
</table>

Use the special token &nbsp; as the contents of an empty table cell.

table-attributes include:

• border=number : Width of the border, in pixels. Omit or set to 0 if border not wanted.
• cellspacing=number : Width of space separating the cells of a table

datum-attributes include:

• align=spec: Horizontal alignment of datum in cell. spec is one of left, center, right.
• valign=spec. Vertical alignment of datum in cell. spec is one of top, middle, bottom.
• width=number. Width of the cell. number is pixels, or percent of table width if ends in %
• height=number. Height of the cell. number is pixels, or percent of table height if ends in %
• bgcolor=color. Background color of the cell.

Forms: Enclose fill-in-the-blank forms between the tags <form> and </form>. Anywhere between these tags, specify a fill-in-the-blank input rectangle via <input type=text size=n>, where n is the width of the rectangle in number of characters. Arbitrary additional HTML formatting can be done within a form. Don't worry about how a form is actually processed; the systems folks at Ink Inc. can take care of that.