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).
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:
- http://math.hws.edu/eck/cs120/lab1/colors.html --- The table of hexadecimal codes for colors, which you saw in the first lab.
- http://math.hws.edu/faculty/eck.html --- Uses borderless tables for layout. This example includes a table that is nested as a <td> inside another table.
- http://math.hws.edu/dept/schedule_s02.html --- Uses two tables nested inside another table to display the Math/CS department's schedule of courses. Note the use of different background colors.
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:
- align --- Add align="center" to the <table> tag to center the table on the page. Use align="left" to place the table on the left side of the page, with text flowing around it on the right. Use align="right" to place the table at the right, with text flowing around it.
- width --- Specifies the width of the table. The value can be an integer that gives the width of the table in pixels. (For example, width="500".) It can also be given as a percentage of the page width. (For example, width="75%" for a table that fills 75% of the width of the page.) If you don't specify a width, the browser will calculate one based on the contents of the table.
- bgcolor --- The background color of the cells of the table. This can be overridden by color specifications in the <tr> and <td> tags. The color can be given as a color name, such as "red", or as a hexadecimal color specification, like those in the Web-safe color table.
- border --- Specifies the width of a border around the table, in pixels. Use border="0" for no border
- cellpadding --- Specifies extra space, in pixels, around the content of each data cell and the edge of the cell. This space has the same color as the background color of the table.
- cellspacing --- Specifies space, in pixels, between cells. In this space, the color from "behind" the table shows through. If you want absolutely nothing between the cells, you should set both cellspacing and border to 0.
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.
- bgcolor --- Sets the background color for this cell. The value can be a color name or a hexadecimal color specification.
- align --- Specify the horizontal position of the text within the cell. Possible values are: "left", "center", "right", and "justify". A value of "center", for example, puts the contents of the the cell in the center of the cell horizontally. The default value is "left".
- valign --- Specify the vertical position of the text within the cell. Possible values are: "top", "middle", and "bottom". A value of "top", for example, puts the contents of the the cell at the top of the cell. The default value is "middle". (Some browsers use "center" instead of "middle", but since this is the default value anyway, you don't have to specify it at all.)
- colspan --- Use this attribute to make a cell extend across more than one column in the table. The value of the attribute is an integer that gives the number of columns. For example, colspan="2" makes the cell extend across two columns. Don't forget that the row in which this cell appears will than have fewer <td> tags than the other rows in the table. The table in the TableDemo uses colspan and rowspan.
- rowspan --- Use this attribute to make a cell extend across more than one row in the table. The value of the attribute is an integer that gives the number of rows. For example, rows="2" makes the cell extend across two rows.
- width --- Specify the width of the cell in pixels, such as width=100, or as a percentage of the width of the table, such as width="50%". You can expect problems if you give conflicting values in different cells. I suggest that if you want to set column widths, you should do all the widths in your first row of cells.
- height --- Specify the height of the cell in pixels.
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> </td> in the HTML source code. (If you don't do this, the empty cell won't have any border.)
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:
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:email@example.com" method="POST" enctype="text/plain"> . . . --- Specify the contents of the form --- . </form>
Of course, you should replace "firstname.lastname@example.org" 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 (email@example.com), 15 February 2002