Tabes, Forms, Meta Elements and Frames (Powerpoint)
Download
Report
Transcript Tabes, Forms, Meta Elements and Frames (Powerpoint)
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