Outline
IS400: Development of Business Applications on the Internet
Fall 2004
Instructor: Dr. Boris Jukic
Table, Forms, Metatags
and Frames
Introduction

Tables
–

Forms
–


Present information
Collect information from visitor
Meta elements
Frames
–
Display multiple documents in the browser
Basic XHTML Tables


Organize data into rows and columns
– Not only for data that is typically presented in a table form
– It is often used in borderless form for achieving the orderly
and consistent organization of the splash page content
Element table : defines the entire table
– Attribute border
 Specifies the table’s border width in pixels
– Attribute summary (not visible)
 Describes the table’s contents
– Attribute caption
 Describes the table’s content and helps text-based
browsers interpret table data
Basic XHTML Tables: other table
elements

Element colgroup



Groups all the column formatting information for a subset of table
columns
Especially useful when the number of columns is large
Element col: specifies formatting attributes and number of
columns to which they apply
–
Attribute span
 Determines how many columns the col element formats
 The value of span specifies the number of columns relative to the
number of previous col element in the colgroup. See
example:
http://www.clarkson.edu/~bjukic/IS400/examples/ch05/tableColSpanExample.html
–
format attributes such as align or style can be applied to more
than one column at a time
Basic XHTML Tables: other table
elements




Element thead : defines the head section of a table
– Contains header information such as column names
tr element (defines an individual table row
tbody element: defines the body of the table
Data cells are defined with a td element
– No predetermined table structure in XHTML
– Flexible number of cells per row
– Flexible row height and column width of each individual cell
– Attributes rowspan and colspan specify the number of
rows or columns occupied by a cell
– Row definition is implicit, see the row definition example:
http://www.clarkson.edu/~bjukic/IS400/examples/ch05/tableRowDefinition.html
Basic XHTML Forms



Form elements are essential for any interactive (two-way) Web
application
Forms collect data from a user
Data is handled by a server side application such as
–
–
–

CGI scripts written in Perl, C or other common server side language
Applications written in ASP.NET programming platform supported by MS
that uses VB, C++, C# or other MS.NET language
Scripts written in specialized embedded web programming languages,
such as php
Forms contain both visual and non-visual components (hidden inputs
specified by the document author)
Basic XHTML Forms

Element: form
–
–
Attribute method
 Specifies how the form’s data is sent to Web server
 method = “post”
– Appends form data to the browser request, submitted data
hidden form the user
 method = “get”
– Appends form data directly to the end of the URL, submitted
data visible to the user
Attribute action
 Specifies the location of a script that will take the user input,
process it and produce a response
input element

Element input defines an interactive element of the
form that can collect user input, such as textbox,
radio button, check box, etc.
–
Attribute type can specify the kind of input element to be
used

If the value of the type attribute is “hidden” then the input
element specifies the name and value of the information
specified by page author that will be passed to the server. See
example:
http://www.codeave.com/html/hidden.htm
Types of input element
-
Text element: creates a textbox
-
-
–
size attribute: number of visible characters
maxlength attribute: maximum size of user’s text input in characters
password element: textbox with masked input text
Checkbox element
 Enable users to select from a set of options that are NOT
mutually exclusive
 For mutually exclusive options use element that defines radio
buttons
Radio element
 Only one option can be checked
Types of input element: buttons
Buttons
-
submit element
- Button for submitting the form contents
-
reset element
- Button that resets all element attributes to initial values
-
button element
- Generic button: no predetermined behavior. Action is
determined typically by a client side script
XHTML Forms: input elements

Common attributes for input types
–
–
–
name: identifies user input associated with a particular input
element
value: identifies the value of user input, such as a typed text, or
checking of a particular box
See example:
http://www.clarkson.edu/~bjukic/IS400/examples/ch05/form2.html
XHTML Forms: other controls

Element textarea
Inserts a multiline text box
– Attribute rows specifies the number of rows
– Attribute cols specifies the number columns
Element label
No user input accepted
Provides textual description of other controls
–


Drop Down List (Menu)
–
–
select element
 Provides a drop-down list of items
option element
 Defines values of items in the drop-down list
 Attribute selected
–
Specifies which item initially is displayed as the selected item
meta Elements

The meta element can be used to identify properties of a document
(e.g., author, expiration date, a list of keywords, etc.) and assign
values to those properties.
– Attribute name
 Identifies the type of meta element. For example:
– name = “keywords” may be used to provide search
engines with a list of words that describe a page
– name = “description” may provide a description of a
site
– Attribute content

Identifies actual value of a particular meta element. One possible use:
– Values of these attributes may be used by a search engine to
catalog and classify a page
Metadata Profiles


Meta elements are potentially most useful if they follow a certain
predetermined set of standards for name and value attributes.
Different interest communities may adopt a set of names and their
values to be used in classifying web content of interest to that
community: for example e-tailing, publishing, museums etc. This
predetermined set of standards is called a profile.
See an example of a metadata profile for publishing:
http://www.eddept.wa.edu.au/cmis/cat/meta.htm#dc
–

The profile attribute of the head XHTML element may specify the
location of a meta data profile.
–
See an example of a code that uses a metadata profile reference:
http://www.w3.org/TR/REC-html40/struct/global.html#profiles
Frames

Allow browser display more than one document simultaneously
–
Very useful when distinguishing the more permanent content (company logo, basic
navigation etc.) from the more dynamic one
–
Element frameset
 Attribute cols
– Specifies the frameset’s column layout in absolute or relative terms
 Element frame
– Specifies the documents that will be loaded
 “local” name is specified using the name attribute
 Same value of the name attribute needs to be used in the
constituent documents (navigation bar, for example)
– Attribute src
 Specifies URL of the document to display in the frame
 See example:
http://www.clarkson.edu/~bjukic/IS400/examples/ch05/index.html