CPSC 120: Principles of Computer Science, Spring 2002

Lab 5: More About Web Pages


IN THIS LAB, we take a break from The Most Complex Machine to spend more time learning about Web pages. You should already know the basics of HTML from Lab #1. If you haven't already done it, you should read about HTML in Section 6.2 of my on-line Java textbook.

The only exercise for this lab is to construct a Web page that meets two criteria: It must use an HTML <table> and it must use an HTML <form>. For full credit, the way you use them should not be too simple. How to do this is explained below. I will look at your page on Thursday, February 21 or later. I should be able to find it at the web address http://math.hws.edu/~username/form.html (with "username" replaced by your own user name).

HTML Tables

An HTML table displays items in neat rows and columns. They are often used to neatly lay out the elements in a form or different parts of a page. Fundamentally, tables are a simple idea. A table is created using the <table>...</table> element. Inside this element are the rows of the table. Each row is created using the <tr>...</tr> element (where "tr" stands for "table row"). Inside a <tr> element are the individual items that go in the cells of the table. Each item is created with a <td>...</td> element (where "td" stands for "table data"). You can put anything at all inside a <td> element: simple text, paragraphs, lists, images, even another table. So, the outline of the HTML code to create a table looks like this: 

      <table>

         <tr>
            <td> ... </td>
            <td> ... </td>
               .
               .
         </tr>

         <tr>
            <td> ... </td>
            <td> ... </td>
               .
               .
         </tr>
         
           .
           .
           .

      </table>

Here, for example, is a very simple table and the HTML source code that creates it:

<table border=1>
   <tr>
      <td>(Row 1, Column 1)</td>
      <td>(Row 1, Column 2)</td>
      <td>(Row 1, Column 3)</td>
   </tr>
   <tr>
      <td>(Row 2, Column 1)</td>
      <td>(Row 2, Column 2)</td>
      <td>(Row 2, Column 3)</td>
   </tr>
</table>
(Row 1, Column 1) (Row 1, Column 2) (Row 1, Column 3)
(Row 2, Column 1) (Row 2, Column 2) (Row 2, Column 3)

The "border=1" attribute on the <table> tag adds the thin border around the table. There are a lot of optional attributes that you can apply to the <table>, <tr>, and <td> tags. Some of the more useful options are listed below.

You might want to look at some pages that use tables. You can use your browser's "View Source" command to see the HTML source code of these examples, or of any page on the Web. Here are three of my examples:



Options for the <table> Tag

There are several useful attributes that can be used in the table tag. You can see some of the more common attributes demonstrated on my TableDemo page at http://math.hws.edu/eck/cs120/s02/lab5/tabledemo.php. Attributes include:



Options for the <tr> Tag

Options specified in a <tr> tag affect all the cells in the row. The most useful attributes are align, valign, and bgcolor, which simply set the default values for these attributes for all the <td> tags in the row. See the next section for their meaning.


Options for the <td> Tag

The options in a <td> tag affect just one cell in the table, except for width and height, which can have implied effects on other cells in the same column or row.

One final note on cells: It's generally not a good idea to have cells that don't contain any data at all. If you want an empty cell, put a non-breaking space in the <td>. This would look like <td>&nbsp;</td> in the HTML source code. (If you don't do this, the empty cell won't have any border.)

HTML Forms

HTML forms are one way of making interactive Web pages. The user can enter data in the form and press a Submit button. The Web browser takes the user's data and does something with it. Here is a form that is configured to send email to me. The form is laid out using a table. You can see the code that produced this form by looking at the HTML source code for this page. You will get a warning message when you click the "Click Here To Submit" button, and it will only work if you have configured email in your browser. You can go ahead and try it if you want:

Please enter your name:
What year are you in?
Check the subjects you like: Math History Sociology
Enter your comments here:

An HTML form is created using the <form> tag. A form that sends its data as email can be created with HTML commands such as this:

       <form action="mailto:eck@math.hws.edu" method="POST" enctype="text/plain">
            .
            .
            .   --- Specify the contents of the form ---
            .
       </form>

Of course, you should replace "eck@math.hws.edu" with your own email address in the action attribute. (Sending form data by email is not very usual, but it's all we can do for now. In the next Web publishing lab, we will look at an alternative.)

The contents of the form can be any HTML elements, including paragraphs, headlines, images, and links. However, the most important things in a form are the user input elements such as text input boxes and buttons. There are several HTML tags that can be used to create these input items. For example:

          <input type=text name=submitter size=20>

If you include this tag in your HTML source, a one-line text input box will appear on the Web page. The specified name is sent along with the data when the user clicks the form's submit button. The size specifies the number of characters that can be displayed in the input box. You can create a submit button with

          <input type=submit value="Click Here to Submit">

The value specifies the text that will appear on the button. And a check box can be made using an <input> tag with type=checkbox:

          <input type=checkbox name=Math>

This just creates a small square box that the user can check. If you want any text next to the box, you have to add the text to the source code:

          <input type=checkbox name=Math>Math

To make a box where the user can enter multiple lines of text, you should use the <textarea> tag. This tag needs a closing tag, </textarea>. (If you put text between the open and closing tag, that text will be placed in the text box when the page is loaded.) The <textarea> tag can specify the number of rows and the number of columns of characters that the text box should display:

          <textarea name=comments rows=6 cols=30></textarea>

Finally, the sample form has a pop-up menu. Such menus are created using the <select> tag, and each menu item is specified with an <option> tag. The menu in the above form was created using the following HTML source code:

          <select name=year>
             <option>--No Response--
             <option>First Year
             <option>Sophomore
             <option>Junior
             <option>Senior
          </select>

The page that you create for this lab should include a form that will email its data to you. The form should include several different types of input elements. You might make a form that conducts a survey of some sort, for example.

--David Eck (eck@hws.edu), 15 February 2002