eScience Lectures Notes : HTML : Tables and Forms

Slide 1 : 1/30 : From New Media to The Web (index.en.html)

COMP1710 Tools for New Media and Web

HTML : Tables and Forms

Click here to start or press 's'tart or 'i',

then 'n'ext or 'b'ack

Click here for the 't'able of Content

Slide 2 : ToC : HTML : Tables and Forms (tableOfContent.en.html)

Table of Contents (30 slides) for the presentation :

HTML : Tables and Forms

• Slide 1 : From New Media to The Web
• Slide 2 : ToC : HTML : Tables and Forms
• Slide 3 : HTML : Tables and Forms
• Slide 4 : The Table Element
• Slide 5 : The Table Element : Example
• Slide 6 : The Table Element : Example
• Slide 7 : Table Cells
• Slide 8 : colspan and rowspan
• Slide 9 : colspan and rowspan
• Slide 10 : colspan and rowspan
• Slide 11 : Example of a Table without CSS
• Slide 12 : Example of a Table with CSS
• Slide 13 : One vs. Many
• Slide 14 : From Table to CSS Layout
• Slide 15 : More tags
• Slide 16 : Current model One way communication
• Slide 17 : Basic, but minimal Feedback : Mail
• Slide 18 : Issues with Mail
• Slide 19 : Mail Vs Forms
• Slide 20 : Web Forms
• Slide 21 : Simple Form
• Slide 22 : Forms : Radio buttons
• Slide 23 : Forms : Checkboxes
• Slide 24 : Forms : different types of input
• Slide 25 : Forms : files
• Slide 26 : Forms : selection
• Slide 27 : Interaction
• Slide 28 : The Mechanics of CGI
• Slide 29 : The Mechanics of CGI
• Slide 30 : The Mechanics of CGI

Slide 3 : 3/30 : HTML : Tables and Forms (intro.en.html)

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)

  •  Deprecated : See CSS !

• Forms : The main source of feedback from the user

• When interaction goes beyond chosing between a list of possible links

Slide 4 : 4/30 : The Table Element (table1.en.html)

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/30 : The Table Element : Example (table2Minimal.en.html)

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>
	

Slide 6 : 6/30 : The Table Element : Example (table2.en.html)

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>
	

Slide 7 : 7/30 : Table Cells (table3Cells.en.html)

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/30 : colspan and rowspan (table4Span.en.html)

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/30 : colspan and rowspan (table4Span2.en.html)

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>
	

Slide 10 : 10/30 : colspan and rowspan (table4Span3.en.html)

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>
	

Slide 11 : 11/30 : Example of a Table without CSS (tableCSSexSans.en.html)

Example : a Table without CSS

Source : http://www.bowdoin.edu/templates/tables.html

Slide 12 : 12/30 : Example of a Table with CSS (tableCSSexamples.en.html)

Example : a Table with CSS

Source : http://www.bowdoin.edu/templates/tables.html

Slide 13 : 13/30 : One vs. Many (tableOneVsMany.en.html)

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/30 : From Table to CSS Layout (tableToCSS.en.html)

From Table to CSS Layout

Source : Web Page Reconstruction with CSS

Before : with table : http://www.digital-web.com/extras/reconstruction_with_css/before/index.html

After : with CSS : http://www.digital-web.com/extras/reconstruction_with_css/after/index.html

Slide 15 : 15/30 : More tags (tableMore.en.html)

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.

For More : http://www.w3.org/TR/html4/struct/tables.html

Slide 16 : 16/30 : Current model One way communication (oneWayCom.en.html)

Current 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 17 : 17/30 : Basic, but minimal Feedback : Mail (mailto.en.html)

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

"mailto:ID@anu.edu.au?CC=pvk@vuylsteker.net&BCC=james@anu.au&Subject=COMP1710%20LAB9&Body=Hello%2C%20here%20is%20the%20lab%20work%20..."

More detail : http://developer.netscape.com/viewsource/husted_mailto/mailto.html

N.B. : http://www.isolani.co.uk/articles/mailto.html

Slide 18 : 18/30 : Issues with Mail (mailto2.en.html)

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 19 : 19/30 : Mail Vs Forms (mailtoVsForm.en.html)

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 20 : 20/30 : Web Forms (webForm.en.html)

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 21 : 21/30 : Simple Form (formSimple.en.html)

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 22 : 22/30 : Forms : Radio buttons (formRadio.en.html)

Different types of input

Forms : Radio buttons

<input type="radio" name="choices"
     value="choice1" checked>
<input type="radio" name="choices"
     value="choice2">

Slide 23 : 23/30 : Forms : Checkboxes (formCheckBoxes.en.html)

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 24 : 24/30 : Forms : different types of input (formInput.en.html)

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 25 : 25/30 : Forms : files (formFile.en.html)

Forms : files

<input type="file" name="YourPicture">

Slide 26 : 26/30 : Forms : selection (formSelect.en.html)

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 27 : 27/30 : Interaction (interaction.en.html)

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 basic 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 28 : 28/30 : The Mechanics of CGI (cgi0.en.html)

The Mechanics of CGI

<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

For more on cgi script : http://cgi.resourceindex.com/

Slide 29 : 29/30 : The Mechanics of CGI (cgi.en.html)

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 script : http://cgi.resourceindex.com/

Slide 30 : 30/30 : The Mechanics of CGI (cgi2.en.html)

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 : Last lectures in COMP1710, and COMP2720