1. Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames

2. Introduction Tables – Present information Forms – Collect information from visitor Meta elements Frames – Display multiple documents in the browser

3. 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

4. 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

5. 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

6. 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)

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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