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 :

Table structure

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.

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

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

Notes