COMP1710 : Laboratory 4, version 1.1

1. Objectives Tables and Forms

In this lab, you will create two HTML tables, with some associated style, and then two forms with two different actions to manage their content.

2. Tasks

2.0 Task0

This lab uses some material from 2005 comp1710 textbook, more precisely, the chapter 3 of the book "Design for New Media / Interaction Design for Multimedia and the Web", by Lon Barfield / Pearson - Addison Welsey, as you will use some of its content too fill the table. Because it is not this year textbook anymore, you will be able to read the part I am referring to here.

Make sure you have read all the online lecture notes, and especially, the one about HTML tables and forms.

As usual now, create a directory named LABn_Uxxxxxxx  where you will put today's work. Include an index.html file that will link to the 3 html pages you will create. There should be a link to that page in all the pages you will create. There should be your name and a mailto link to your email at the bottom of all your pages. Eventually, there should be a linked CSS file, the same for all your pages.

2.1 Task1 : Create a table

Create an HTML page that will contain your 2 tables. The first one's structure should looks like this :

Make sure you enter data related to the subject of the table (GAS). The first row and the first column should be filled with header cells. GAS is about the type of task you may want to go trough before starting a web site. You may find some reference to that method on the web, or present another acronymin a similar way.

2.2 Task2 : Style the table

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

Design/Dressing of the previous table.

You will propose a 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 italic
• 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 centre on the page (do not use the old, deprecated <CENTER> html tag).
  There should be 10% margin on both side.
• Note that the first two columns are not very large : they leave room for the third one.
• Make your table look different from other students ones.

2.3 Task3 : Create a form

Have a look at "Basic Forms" by Ross Shannon

Create a page with a form that should ask for some feedback about a product of your choice.

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

• First Name and Name (2 text fields)
• A mark between 1 and 5 of what they think of the quality of the product (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 quality of the product. The user should have the ability to indicate none, one or more comments on the products quality from a list of 5 options.
• A selection of places where the user has been able to get information from the product (multiple selection possible). It should looks like something like this :
• A text area (4 to 6 lines) where the user will be able to enter some general feedback about the product.
• A hidden field that will code the IDnumber of  the product

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

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

You will then submit your work with the action of the form being a POST submission to the following CGI script :

http://pingu.anu.edu.au:8080/cgi-bin/form.pl

Since you now know how to use CSS, so make that form attractive.

NB. :

<form action="mailto:pvk@vuylsteker.net" method="post" ENCTYPE="text/plain">

works well to send by mail. In that 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.

<form action="http://pingu.anu.edu.au:8080/cgi-bin/form.pl" method="post">

is enough to send to any CGI script.

<form action="http://pingu.anu.edu.au:8080/cgi-bin/form.pl" 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

2.4 Task 4 : Create a table of your choice

Find some interesting content that would benefit from being displayed within a table.

Put it in a table of your choice (it should be more than 7 cells table).

Apply some original CSS to that table.

3. Conclusion

After this 4th lab, you should have enough of plain HTML, and be ready to start working with other types of media, starting from next week.

4. Extra work

Up to you, discuss with your tutor!

5. Summary to get 3 marks for this lab session

• Create a directory which name is LABn_Uxxxxxxx where n is the number of the Lab and xxxxxxx is your student id.
• Within that directory, put the deliverables describe for this lab (see above)
• Zip that directory and its contents. ( If everything is working well, the name of the zip file should be LABn_Uxxxxxxx.zip where xxxxxxx is your ... )
• Send an email to both Pascal.Vuylsteker@anu.edu.au and to your tutor such that
  • The "Subject" of  the email start with "COMP1710_LABn_Uxxxxxxx" (without the double quotes, all uppercase, with underscores, and where xxx... !)
  • The content of the mail is
    • Some polite greetings, like "G'Day Mate, here is my first lab submission. I'm sure She'll be Right !" or anything more classical. (Is this still you first lab submission? :-)
    • The previously created zip file

Notes

• Make sure that your 'From' address is either the official ANU address (uxxxxxxx@anu.edu.au or FirstName.Surname@anu.edu.au) or start with FirstName.Surname@
• Send an email to yourself first if you want to check that everything is all-right.
  Always CC the email to yourself and check that you are able to properly unzip the attached file.
• Marking scheme
  • If you manage to send properly (Subject, greeting, zip file attached ...) an email and if the zip contain something related to the present lab, you get one mark.
  • If you do most of the work and send it properly, you get 2 marks.
  • If you do EVERYTHING properly and send it properly, you'll get up to 3 marks for this lab.
  • To be valid, the submission should be send the very latest on Sunday at 23:55 after the end the Laboratory in which you are enrolled. But you should never wait till the last minute !