COMP1710: Laboratory 4

Tables and Forms

Objectives

In this lab, you will add a HTML table to your Xanga page, with some associated style, and then produce a nicely formatted HTML form.

Tasks

Task 1: Review Tables and Forms

Access the online lecture notes on HTML tables and forms.

It is time to start thinking more seriously about your goals for your assignment. So, to get you started, read about scope creep.

Task 2: Create a table

Add a table to your Xanga page, by adding HTML to a Xanga "Custom Module". Its structure should look like this:

The first row and the first column should be filled with header cells. There can be as many Video+pairs of explanations as you like, but there should be at least two of them.

You should do a window capture using Grab (a program in the Applications/Utilities folder showing a key moment from the video to put into the table (the image should link to the youtube URL for the video using the <a> tag).

You don't have to use youtube videos, you can shoot your own! In this case, or if you just haven't decided on the video as yet, just put in a text description, or sketches for a storyboard in the table.

You will eventually (in a later lab) modify the videos. The idea is that we have all seen videos we like parts of, which could be combined with bits from other videos. (Why? Maybe to make it more interesting somehow, to tell a different story, or ... Part of this exercise is to get you to pick something, and describe it in the table.)

Task 3: Style the table

Have a look at the description of CSS for Tables, by the W3c.

Style your table with CSS that will change and improve the look and feel of the table.

The minimum requirements are the following.

• The Caption should be set at the bottom of the table, in italics
• The borders of the cells should be visible
• The Header cells should have a different background colour from the other cells
• The table should be horizontally centred on the page (do not use the old, deprecated <CENTER> html tag).
• There should be 10% margin on both sides.
• Make at least one more change / improvement in the look of the table.

Task 4: Create a form

Have a look at Basic Forms by Ross Shannon.

Add a form that should ask for some feedback about your video table you just did.

Forms don't seem to work in Xanga Custom Modules, so please add the form to a Weblog entry.

The minimum form fields to be filled by the user of the form will be

• Personal Name and Family Name (2 text fields)
• A mark between 1 and 5 of what they think of the quality of the idea (one possible mark selected at a time, of course). The mark three should be selected by default (they have to tick their choice).
• A selection of different comments on the idea, asking questions you would like feedback on. The user should have the ability to indicate none, one or more comments on the idea from a list of 5 or more options. It should look something like this:
• A text area (4 to 6 lines) where the user will be able to enter some feedback about the idea, using their own words.
• A hidden field that will contain a value such as video project ID number (make one up :-)

The form should of course come with the usual Submit and Erase all buttons.

You will test your form with a mailto action, to yourself. Make sure that everything is working when you test it.

Task 5: Improve the appearance of the form

Since you now know how to use CSS, make the form attractive (hint: you could have the components in another table).

Note:

<form action="mailto:u1234567@anu.edu.au" method="post" ENCTYPE="text/plain">

works well to send by mail. In this case, you need the enctype attribute to make sure that all the fields will be put into the same text, otherwise, only the first field appears in your mail. (Replace u1234567 by your own ANU e-mail address.)

By the way:

<form action=http://escience.anu.edu.au/lecture/comp1710/HTML2/form.cgi method=post>

is enough to send to any CGI script.

<form action=http://escience.anu.edu.au/lecture/comp1710/HTML2/form.cgi method=post enctype=application/x-www-form-urlencoded>

will work too, but there is no need to specify the enctype for a script type submission.

Task 6: Update your learning journal/events

This task is most easily done in parallel with the other tasks.

Your learning journal talks about your thoughts about what you've learnt.

Please don't forget to create an entry for today's lab which gives a brief description of what you've done.