eScience Lectures Notes : HTML : Tables and Forms
Slide 1 : 1/29: From New Media to The Web
COMP1710 Tools for New Media and Web
HTML: Tables and Forms
then 'n'ext or 'b'ack
Slide 2 : ToC : HTML : Tables and Forms
Table of Contents (29 slides) for the presentation :
HTML : Tables and Forms
Slide 3 : 3/29: HTML: Tables and Forms
In this session: HTML: Tables and Forms
-
Tables: Used to be used for Layout of the Page
-
Still necessary for fast and dirty layout (should be replaced by CSS)
or for content that should go into a table (export from spreadsheet)
-
Forms: The main source of feedback from the user
-
When interaction goes beyond chosing between a list of possible
links
Slide 4 : 4/29: The Table Element
The Table Element
Each table tag pair <table></table>
can hold any number of table rows
Each table row tag pair <tr></tr>
can hold any number of table data items
Each table data tag pair <td></td>
can hold text, images, and other HTML elements
A special sort of table data tag pair holds headings <th></th>
A table element may contain a caption <caption></caption>
Slide 5 : 5/29: The Table Element: Example
The Table Element: Example
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
|
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
Cheat:
border="1"
|
Slide 6 : 6/29: The Table Element: Example
The Table Element: Example
<table>
<caption>3x3 table</caption>
<col id="col1"><col id="col2"><col id="col3">
<tr>
<th>Header 1</th>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<th>Header 2</th>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>cell 7</td >
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
|
3x3 table
| Header 1 |
Cell 1 |
Cell 2 |
| Header 2 |
Cell 3 |
Cell 4 |
| cell 7 |
Cell 5 |
Cell 6 |
Cheat:
border="1"
|
Slide 7 : 7/29: Table Cells
Table Cells
A table cell is another name for a table data element
Table cells can be distinguished by their own background colors, type fonts,
alignments, etc
The way to do it properly is of course to use CSS!
Create a td or th rule
There used to be other ways, with special attributes
Eg.:
table {
border: thin black solid;
border: inset 2pt;
border-collapse: separate;
}
td { border: inset 2pt; }
Slide 8 : 8/29: colspan and rowspan
colspan and rowspan
colspan and rowspan are table data attributes that are used to create irregular
tables
A table cell can be extended horizontally with the colspan attribute
A table cell can be extended vertically with the rowspan attribute
Slide 9 : 9/29: colspan and rowspan
colspan and rowspan
<table>
<tr>
<th rowspan="2">Header 1</th>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>cell 7</td >
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
|
| Header 1 |
Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
| cell 7 |
Cell 5 |
Cell 6 |
Cheat:
border="1" |
Slide 10 : 10/29: colspan and rowspan
colspan and rowspan
<table>
<tr>
<th rowspan="2">Header 1</th>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td colspan="3">cell 7</td >
</tr>
</table>
|
| Header 1 |
Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
| cell 7 |
Cheat:
border="1" |
Slide 11 : 11/29: Example of a Table without CSS
Example: a Table without CSS
| Data table template, e.g., software list |
| Program |
Platform |
Version |
Support Level |
| Adobe Acrobat |
Mac & PC |
5.0 or higher |
2 |
| Adobe Illustrator |
Mac & PC |
8.0 or higher |
3 |
| Adobe Imageready |
Mac & PC |
2 or higher |
3 |
| Adobe Pagemaker |
Mac & PC |
6.5 |
3 |
| Adobe Photoshop |
Mac & PC |
5.5 or higher |
1 |
| Adobe Reader |
Mac & PC |
5.0 or higher |
2 |
| Aladdin Stuffit Expander |
Mac |
6.5.1 or higher |
2 |
Slide 12 : 12/29: Example of a Table with CSS
Example: a Table with CSS
| Data table template, e.g., software list |
| Program |
Platform |
Version |
Support Level |
| Adobe Acrobat |
Mac & PC |
5.0 or higher |
2 |
| Adobe Illustrator |
Mac & PC |
8.0 or higher |
3 |
| Adobe Imageready |
Mac & PC |
2 or higher |
3 |
| Adobe Pagemaker |
Mac & PC |
6.5 |
3 |
| Adobe Photoshop |
Mac & PC |
5.5 or higher |
1 |
| Adobe Reader |
Mac & PC |
5.0 or higher |
2 |
| Aladdin Stuffit Expander |
Mac |
6.5.1 or higher |
2 |
Slide 13 : 13/29: One vs. Many
One vs. Many
If you have one very large table, try to break it up into a sequence of smaller
tables that can be stacked vertically on a Web page
Browsers have to download the contents of an entire table before any of the
table can be viewed
Multiple tables will be displayed incrementally so the user will be able to
see the first part of your page while the rest of the page is still downloading
Slide 14 : 14/29: From Table to CSS Layout
From Table to CSS Layout
More tags ...
<COLGROUP SPAN=3></COLGROUP>
defines a group of columns in the table and allows you to set properties of
those columns.
<THEAD ...>, <TBODY ...> , <TFOOT ...>
<THEAD ...>, <TBODY ...>, and <TFOOT ...> establish groups
of rows.
<THEAD ...> indicates that a group of rows are the header rows at the
top of the table. <TBODY ...> indicates that a group of rows are body
rows. <TFOOT ...> indicates that a group of rows are the footer rows at
the bottom of the table.
Slide 15 : 15/29: Current model One way communication
Current web model: One way communication
Limited Interaction
Information is prepared for publication
It is placed on a web site
It is viewed by people using a web browser
If we do nothing else than basic HTML, People surfing the web site cannot
communicate any information back to the web site
Only Interaction: choice of link to click on
Slide 16 : 16/29: Basic, but minimal Feedback: Mail
Basic, but minimal Feedback: Mail
URI Mailto
<a href="mailto:uStudID@anu.edu.au">Your
Name</a>
Should be on all your web pages
prepare the filtering of your mail
More detail: http://redvip.homelinux.net/varios/mailto.html
N.B.: http://www.isolani.co.uk/articles/mailto.html
Slide 17 : 17/29: Issues with Mail
Issues with Mail
Requires the browser's mail client to be configured with the user's identity,
email address, and mail servers.
If no address is configured, the mail client may not work
If the wrong address is configured, the recipient of the message may reply
to this wrong address, leaving three unhappy people: the original sender, the
original recipient, and the owner of the wrong address
Big problem where you have public access computers
The feedback is not structured
There is no automatic feedback (response) to the feedback (could be done indeed, but
more complex)
Slide 18 : 18/29: Mail vs Forms
Mail vs Forms
Filling out a form is easier than composing a message from scratch, and likely
to be more accurate and complete
Forms are more easily processed than messages in prose
Mailto links: for the occasional unstructured communication, not planned
feedback.
Forms: if you expect lot of messages and/or require specific information
Mail: When people work from their configured environment, they don't want
to fill in a form to send a little question to the webmaster!
Slide 19 : 19/29: Web Forms
Web Forms
Allow a web site to collect data in a structured manner
The web browser renders the form, collects the user's input, and transmits
the information to the web server
The method to be used for transmitting the information back to the server
is specified in the HTML tag that defined the form.
mailto: the information is send by mail
-
easy to set up
-
same issue as with mail feedback
GET or POST: The information is transmitted to the web server and passed
to a specified program for processing
-
better integration with the database system
-
need to develop the script that processes the data
-
GET: the data is encoded within the URL
- -
If the processing of a form is idempotent (i.e. it has no lasting observable
effect on the state of the world), then the form method should be GET. Many
database searches have no visible side-effects and make ideal applications
of query forms.
- -
If the service associated with the processing of a form has side effects
(for example, modification of a database or subscription to a service),
the method should be POST.
See: http://www.cs.tut.fi/~jkorpela/forms/methods.html
for more on the difference between GET / POST
Slide 20 : 20/29: Simple Form
Simple Form
<form enctype="text/plain"
action="mailto:pvk@vuylsteker.net">
Type something here:
<input type="text" name="some_text"
size="30" maxlength="50">
<hr>
Finally, you need to submit it:
<input type="submit" value="Send it">
or
<input type="reset" value="Clear">
</form>
Slide 21 : 21/29: Forms: Radio buttons
Different types of input
Forms: Radio buttons
<input type="radio" name="choices"
value="choice1" checked>
<input type="radio" name="choices"
value="choice2">
Slide 22 : 22/29: Forms: Checkboxes
Forms: Checkboxes
Multiple boxes can be selected at the same time.
<input type="checkbox" name="choices"
value="choice1">
<input type="checkbox" name="choices"
value="choice1" checked>
Slide 23 : 23/29: Forms: different types of input
Forms: different types of input
password: a single line of text which is not echoed on the screen
hidden: an element which the user never sees, but which is passed back to
the server
Handy to use the same script in different contexts: the hidden value is
then the parameter of the script. Could be used to simulate sessions also.
<input type="password" name="passwd"
size="30" maxlength="50">
<input type="hidden" name="param"
value="black">
Slide 24 : 24/29: Forms: files
Forms: files
<input type="file" name="YourPicture">
Slide 25 : 25/29: Forms: selection
Forms: selection
<select name="popUpMenu" size="1">
<option value="nothingSelected"
selected>Please Choose</option>
<option value="vanille">Vanilla
</option>
<option value="chocolat">Chocolate
</option>
<option value="fraise">Strawberry
</option>
</select>
Slide 26 : 26/29: Interaction
Interaction: Common Gateway Interface (CGI)
Why?
Need for dynamic Web sites
update of the information on the web site required "on the fly" (i.e. dynamically)
e.g. News, Meteorology
need some real interaction with the user: dealing with the forms filled in by
the user
e.g. the obvious one: a search engine
CGI is a standard specifying a means for external programs to interface with
information servers
When the web server runs a CGI program, it collects the program's output and
returns it to the web browser. Thus, the browser receives information which
has been dynamically generated.
Slide 27 : 27/29: The Mechanics of CGI
The Mechanics of CGI
The user clicks on a link (or the submit button of a form)
The web browser sends a HTTP request, including the URL of the selected link
In the context of form submission, the data is tranferred either through the
URL or during the communication exchange
http://127.0.0.1/cgi-bin/form.pl
http://allforms.mailjol.net/
The web server determines that the request should be handled by running a
CGI program.
Often restricted to a particular directory (cgi-bin) or have a cgi, pl, or asp
suffix
The CGI program may be written in any language. Perl (.pl) used to be popular
because it is good for manipulating text
For more on cgi scripts: http://cgi.resourceindex.com/
Slide 28 : 28/29: The Mechanics of CGI
The Mechanics of CGI
The web server runs the CGI program and collects the output
The output is sent to the web browser. Usually it is formatted (by the CGI
program) as a web page which is displayed just like any other.
N.B.: PHP will let you do the same sort of thing, but is not a CGI
For more: see last lectures in COMP1710, and COMP2720
Slide 29 : ToC : HTML : Tables and Forms
Table of Contents (29 slides) for the presentation :
HTML : Tables and Forms