CSC 105	Grinnell College	Spring, 2005

An Algorithmic and Social Overview of Computer Science

Laboratory Exercise on Tables and Frames in html

Summary: So far, our examination of html has included labs on html basics and user data. This lab considers some additional elements of html format -- particularly the layout of materials and data.

Tables

Many Web pages contain sections in which data are organized into rows and columns. As an example, sample-table.html contains a brief table identifying five of the labs developed for use with the book, The Tao of Computing.

Within html, tables provide a convenient mechanism for organizing data within this type of structure. While many refinements are possible, the basic html tags for tables are:

Command	Meaning	Note
<table>	begin a table	Requires corresponding </table>
<tr>	begin a row within the table	Requires corresponding </tr>
<th>	begin a header field within a row of the table
<td>	begin a data field within a row of the table

In each case, some additional formatting information may be inserted within each tag. For example,

border may be included within a <table> tag to provide a box around each square of the table;
align="left" or align="center" or align="right" may be included with a <th> or <td> tag, so the data will be left justified, centered left-to-right, or right-justified within each table box; and
valign="top" may be included with a <th> or <td> tag, so that the data will begin at the top of a box rather than being centered vertically in each cell.

The directives for horizontal and vertical alignment within the <th> and <td> may be given independently; align may be specified regardless of whether valign is given, and conversely.

Display the Web page sample-table.html in your browser, save it to the public_html subdirectory of your account, set its permission code to be accessible over the Web, and check that you can view it in your browser.
The table in the original sample-table.html contains the designation
<table border>
1. Describe what happens if you remove the word border from this tag.
2. Change the table tag to read <table border width="100%">
  Describe any differences you observe.
3. Change "100%" in the previous step to "90%", and again describe what you see.
4. After experimentation, describe what "100%" or "90%" is referring to within a table tag.
5. What happens if you omit the percent sign in the previous parts?
6. What do you think width=200 means in this context?

Now look at the body tag for this sample page. The full tag reads:

<body bgcolor="#EAEAEA">

Here, bgcolor describes the "background color" for the page. The values EAEAEA give red, green, and blue values on a scale from 0 to 255, with 2 digits for red, 2 digits for green, and 2 digits for blue. Note, however, that the numbers are written in hexadecimal notation (base 16 numbers), rather than decimal numbers. In this notation, the single digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. That is, A represents the number 10, B the number 11, etc.; F represents the decimal number 15. In this notation, the values 0 through 255 (decimal) correspond to the hexadecimal numbers 00 through FF. The value "EA" corresponds to the decimal value 238.

In specifying the background color "EAEAEA", the first EA gives the intensity (238) of red for the background, the next EA gives the intensity of green, and the final EA gives the intensity for blue. Since these red, green, and blue values are equal and fairly close to the maximum 255, the background for this Web page seems almost white.

Try several different background colors, and note the appearance of the resulting page. In your experimentation, include "#00EAEA", "#EA00EA", "#EAEA00", "#FF0000", "#00FF00", and "#0000FF".
When you have finished experimenting, reset the background color to the original off-white.

html allows the color of individual table rows and table cells to be specified, again using a bgcolor modifier within a <tr>, <th>, or <td>.

Experiment with the bgcolor for tables, rows, and data elements:
1. Use a bgcolor attribute within the table to make the first row green.
2. Use bgcolor attributes within cells to make a checkerboard pattern of colors for the second, third, and fourth rows of the table.
3. What happens if you use the bgcolor attribute to specify the last row will be green, and at the same time specify the background color for the second cell in the last row will be blue?
The notes earlier in this lab discussed the valign attribute. Remove this attribute from one or two cells within sample-table.html and describe what happens.
Use the align attribute with the table headers to left justify the titles of the table.

Sometimes in defining a table, it is convenient for one cell to extend over several rows or several columns. This is accomplished by the rowspan and colspan directives within <th> and <td>. For example, the home page for Henry Walker contains a table of courses, organized by semester.

View Henry Walker's home page, and examine the table of courses. Then view the page source for this page, and scroll down to find the html table for this course display.
1. Describe how rowspan is used.
2. Various numbers (2, 3, and 4) are used with rowspan within this table of courses. Explain the role of these numbers; why is each number used in each case?
Design your own table, including data related to one of your interests. In developing your table, use some variety of colors, rowspans and/or colspans, and alignments of materials.

Frames

As we have seen, tables provide a helpful mechanism for organizing data within a Web page. Frames provide a helpful mechanism for dividing a Web page into pieces. The following example illustrates this mechanism.

The Web page sample-frames.html provides a framework for several recent html pages discussed in this course. Following a common Web format, sample-frames.html organizes several pages by placing an index of pages on the left and showing the pages themselves on the right.

The right page begins with a general title, and a Next link leads to the "Sample Form", largely as described in the recent lab on forms.
Within the "Sample Form" page, a Previous link leads back to the general title, while a Next link leads to "Another Form", also as described in the recent lab on forms.
Within the "Another Form" page, a Previous link leads back to the "Sample Form", and the Next link leads to the "Sample html Table" described earlier in this lab.
The Previous link from the "Sample html Table" moves back to "Another Form".

Altogether, several pages on the right are linked together, and the left column of sample-frames.html provides an index.

Experiment with sample-frames.html.
1. Check the "Previous" and "Next" links on each page, noting how they work.
2. When moving from one page to the next, describe what, if anything, happens within the index on the left.
3. Check that the links in the index do indeed change the right panel to the relevant pages.
Since the sample frames draw from several pages, copy the entire group to your "public_html/105" subdirectory using a terminal window.
1. Move to your "public_html/105" subdirectory
2. Copy the files by using the command:
```
cp ~walker/public_html/fluency-book/labs/sample-frames* .
```
  Here, the asterisk * matches all character strings, so sample-frames* matches all file names that begin with sample-frames
3. Set the permission codes of these files, so all may be viewed in your browser.

The overall structure for this material is provided by sample-frames.html. In particular, a frameset indicates the page will consist of 2 columns, one covering 20% of the page width, and the second covering the remaining 80%.

View the page source for this page within an editor.
1. What happens if you change cols="20%, 80%, *" to cols="30%, 70%, *" or to cols="20%, 60%, *"?
2. What happens if you change cols="20%, 80%, *" to rows="20%, 80%, *"?
What happens if you change cols="20%, 80%, *" to rows="20%, 35%, 35%, *" or to cols="20%, 60%, *" and add a new line
```
    <frame name="lab" src="/~walker/fluency-book/labs/html-tables-frames.shtml">
```
within the frameset section?

Within a frameset section, note that each frame is given a name. Now, look at the first title index page in your editor: sample-frames-index-title.html

How is this page structured? That is, describe the mechanism(s) used to indicate the phrases "Title", "Forms Examples", and "Table Example".
When you are viewing the title page on the right, the corresponding sample-frames-index-title.html is displayed on the left panel. How does sample-frames-index-title.html highlight the "Title" section in the overall page?

When you click on "Table Example", the right page moves to another page. This is accomplished in two parts: "Table Example" is a link to "sample-frames-table.html", and the target of this link is the "materials" frame defined originally.

Go back to the title page in your browser. Then, within sample-frames-index-title.html,
1. Change the reference from "sample-frames-table.html" to browser-basics.html, reload the browser, test the index link for the "Table Example", and describe what happens.
2. Maintaining the previous change to browser-basics.html, change target="materials" to target="index" (in the same reference as browser-basics.html). Then reload, test, and observe as in the previous step.
3. Make some tentative conclusions regarding the meaning of the "target" field?

In this material, each right-hand page specifies what index page should be displayed, so the highlighting in the index matches the page displayed on the right.

Load sample-frames-table.html into your editor, and note the body tag. The onload attribute indications an action to be performed whenever this page is loaded. In this case, top refers to the overall frameset, and index refers to the frame with the name "index". The statement
```
   onload="top.index.location='sample-frames-index-table.html';"
```
specifies that the URL location to be used in the index frame should be set to sample-frames-index-table.html as soon as sample-frames-table.html is loaded.
Change sample-frames-index-table.html to browser-basics.html in sample-frames-table.html, reload your browser, and explain what happens.
Use an editor to work with sample-frames-index-title.html, and change the link for "Forms Examples" to another name -- that is, consider misspelling the link corresponding with "Forms Examples".
Now reload the form to the title page in your browser, and click on "Forms Examples". Describe what happens when a reference within a form is misspelled.

Work To Be Turned In

Copies of the file sample-table.html for steps 4, 6, 8
Explanations for steps 2-5, 7-8, 11-17

This laboratory exercise coordinates with Chapter 11 of Walker, Henry M., The Tao of Computing: A Down-to-earth Approach to Computer Fluency, Jones and Bartlett, 2005.

created April 5, 2004
last revised April 5, 2005