11/17/02
Currently being Updated!

COSC 330

LEARNING MODULE IV
AUTHORING COMPLEX HTML/XHTML PAGES

       This learning module is a continuation of the study, begun in LM III, of HTML and its successor, XHTML, from a practicioner's point of view. It is the SECOND of a two module presentation of HTML; in this LM IV we consider the authoring of composite pages consisting complex elements (tables, frames, forms, and server side includes) and multimedia...Note that the concise, tabulated presentation of HTML tags in the LM is intended to be an alternative to that of the textbook and Web references that complements those formats.  (See the Study Guide for this learning module.) Tell me what you think.

The Objectives of this learning module are to:

1. learn how page elements (graphics, multimedia outputs, tables, frames, forms, applets, and SSI) are incorporated into HTML documents.
2. become "familiar" with the HTML tags that implement these page elements.  This means be able to:
1. recognize all tags,
2. be able to modify their HTML code, and
3. know where to look up their syntax if necessary.
3. develop a feeling of when and how these page elements are most effectively incorporated into Web pages.

This LM follows the sequence of chapthers in Niederst, Web Design in a Nutshell, but edits out older, deprecated tags as well as most of those tags that are browser dependent.  The sequence of presentations in this learning module is as follows.   You can click on any link to jump directly to that section.

1. INSERTING PAGE ELEMENTS AND JAVASCRIPT
2. HTML FOR TABLES
3. HTML FOR FRAMES
4. HTML FOR FORMS
5. SERVERSIDE INCLUDES (SSI)

        After learning how HTML handles text in LM III, LM IV cover the rest of the elements that make up a Web page when displayed in a browser.  Most of these elements (Exceptions include scripts, audio clips, and SSI.) are external ________(1) that the browser loads, following the HTML link,  into RAM and inserts into the brower's display of the HTML document.  It is important to note that an HTML document does NOT contain anything other than formatted text, scripts, and links to external files.  It is only when a page is displayed by a browser that the page elements other than text are inserted at the link location in the displayed document.  The browser executes the "markup instructions" specified by the ______ ____(2) embedded within the text of the HTML document.  The most frequently used tags can be inserted using a  WYSIWYG authoring tool, however  the tags that can be automatically inserted (using menus and dialog boxes) depends not only the type of Browser but also on the version of the particular browser.  This browser/version dependency combined with the fact that many tags are not automatically inserted by authoring tools makes it advisable for Web developers to be familiar with all HTML tags and be able to quickly look up the syntax for inserting such tags into their documents.

SAQ 1: What are the two browsers whose differences most affect HTML design?
1. INSERTING PAGE ELEMENTS AND JAVASCRIPT (See Niederst, Chap. 9 .):

1. HTML documents are essentially _________ _____(3) documents with links.  One use of the links is to designate external files that are inserted at the link location when a browser displays the the HTML document.  Such page elements include:
1. horizontal rules (actually a simple graphic)
2. multimedia (graphic images, audio consoles, and video)
3. Java applet displays
4. Also included here are elements that do not necessarily display such as:
1. audio clips
2. JavaScript scripts, which are embedded within HTML documents,  that provide client-side programs; they are used to add interactivity and animation to a Web page.
2. The new HTML 4.0 specification has an all-purpose tag, <object>, for embedding links to objects such as images, Java applets, plug-in displays, ActiveX controls, etc.  This is supposed to supercede the following tags:
1. <applet> (deprecated in HTML 4.0) which displays,  in a definable window, the input to and output from a Java applet.
2. <embed> which inserts,  within HTML text, a link to an object (typically a multimedia file that often requires a _______(4) to activate) which will be placed at that point when the document is displayed in a browser.
3. The horizontal rule, the simplest non-text page element, is a block-level element (always creates a line break above and below).   It is typically used as a page divider separating distinct presentations.  Attributes allow the length/width, alignment, and 3D shading to be controlled.  If one desires interesting rules, GIF icons can be used instead of HTML rules.
4. Images are typically external _____, ______, or _____(5) files that are inserted, at their HTML link <img>, by the browser.
1. In additions to illustrations, images can be used as hyperlinks, spacers/dividers, for imagemaps (a graphic with "hot spots" that contain hyperlinks) as well as providing varieties of text.
2. GIF images can be animated.  Animated GIFs are not distinguishable by their file name.
3. There are currently 12 standard attributes that govern the appearance, size, alignment, downloading, use as an imagemap.  Other nonstandard attributes are recognized by particular browsers.
4. The use of images in Web pages is covered in more detail in LM V, MULTIMEDIA IN WEB PAGES and Niederst, Part III.
5. Java _______(6) are the most sophisticated way to introduce dynamics and interactivity to a Web site.  Java, a very sophisticated, moder object oriented programming language, is beyond the scope of this course. On the other hand, precoded Java applets are easily incorporated into Web pages.
1. Applets are incorporated into Web pages by "calling the programs" with the <applet> tag (deprecated in HTML 4.0 in favor of the _______(7) tag).
2. A survey of how to use Java applet technology is presented in LM VI, JAVA AND JAVASCRIPT.
6. Multimedia files requiring plug-ins (e.g. Quicktime videos, Flash animations, RealAudio sound tracks, etc.) may be incorporated into an HTML document by using the<embed> tag. (In HTML 4.0 the _______(8) tag is the recommended replacement of the <embed> tag.)
1. When a browser reads an <embed>tag, the browser matches the _____(9) type of the multimedia file (e.g. .au, .mov, .midi, etc.) with the appropriate plug-in (designated, in the browser preferences to handle such files).
1. The <embed>tag can, in addition to standard attributes, contain plug-in specific attributes for controlling the behavior of the particular player.  Examples of media-specific controls include loop, autostart, autoplay, and volume.
2. The displays of embedded objects, relative to surrounding text, resemble that of inline images.
3. The basic syntax of an embedded file is:

<embed src="url" width="144" height="60" align="center">

4. Example: playing audio file (.au) with a displayed audio console.

<embed src="someaudiofile.au" autostart="false" volume="100" width="144" height="60" controls="console" align="top">

7. The following table relates and describes the standard tags/attributes of tags associated with general page elements; tags for elements such as tables, frames, forms, and server side includes are presented in subsequent sections.

SAQ 4: Which tag must be encapsulated within other page element tags?
SAQ 5: What page element tag is recommended as a replacement for what two tags in HTML 4.0?
2. HTML FOR TABLES (See Niederst, Chap. 10.):

1. Obviously, the table feature of HTML was designed to allow the tabulation of information in a two dimesional format; however, it has also become useful for:
1. controlling text alignment, e.g. as done in the NAVIGATION PANEL of these LMs.
2. formatting pages so that they will not be distorted when displayed by a browser; again, this exemplified by the NAVIGATION PANEL.  However one must remember this contradicts an inherent feature of Web documents, that the page format is governed, primarily, by the client.  Also, the HTML 4.0 specification discourages the use of tables for page layout, preferring the use of Cascading Style Sheets with absolute positioning.
3. encapsulating features, e.g.  adding titles, citations, and other descriptions to ________(11).  This application of tables is used throughout the LMs of this course.
4. presenting multipart images in a two-dimensional grid where specific section can contain animations, rollovers, etc. (See Niederst, pp. 201-205.)
5. preserve white space.
2. The HTML 4.0 Specification for tables is much more sophisticated than the current specification.  It is designed to "bring context and structure to table data as well as to provide systems for incremental display and display on non-visual display agents (such as speech- and Braille-based browsers)."
3. Tables are easily created using WYSISYG autoring tools by selecting table creation from a menu and filling in the properties of pop-up dialog box.  The complexity of a table depends on the sophistication of the authoring tool; FrontPage and Dreamweaver can be used to design very complex tables without resorting to any HTML coding.
4. The essential building block of HTML tables is the <table> tag which must enclose all other table tags, for example:
1. Rows are created with the <tr> tag.
2. Cells are created with the  <td> (table data) tags which must be enclosed within the row tags.
3. Groups of adjacent rows can be defined using the tags: <thead>, <tbody> and <tfoot>.
4. Groups of adjacent columns can be defined using the <colgroup> tag.
5. The standard guideline for Web development, KIS, also applies to tables, which in this case is to  avoid complex tables and try to design table structures intuitively.
6. Niederst, Chap. 10 contains numerous tips, tricks, and trouble-shooting advice for tables.
7. The following table relates and describes the standard tags/attributes associated with table layout.

SAQ 7: Which of the table tags can be encapsulated within <table> and </table>?
SAQ 8: What is the difference between <thead> and <th>?
3. HTML FOR FRAMES (See Niederst, Chap.11 .):

1. Frames are composite tag structures that allow a Web page to be divided into multiple active, scrollable windows and governs what appears in each of these window.  To accomplish, this the <body>...</body> tag pair of a normal Web page is replaced with a <frameset>...</frameset> tag pair which encapsulate <frame>...</frame> tag pairs for each frame and the information necessary to construct and control the frames.
1. The code of each HTML frame defines the URL of the _____(15) to be displayed a particular frame window as well as the tag attributes that govern that display.
2. A particular frame can be identified as the "target" of a hyperlink, where the download file should be displayed.  By default, a linked document loads into the same frame as the link.  However, the hyperlink that generates the display may be in a different frame; this is accomplished by using the name attribute to identify a frame and then using the _____(16) attribute in the frame where the hyperlink is.  (See the simple HTML source of the two-frame pages of this learning module.)
2. Frames are controversial.
1. Advantages:
1. Frames allow the display of different Web pages in a collage of mutually exclusive, independent windows.
2. The independence of frames means one frame can scroll or update while the others remain stationary.
2. Disadvantages (Others mentioned in the text are easily overcome.):
1. Currently there is no way to track the states of a frameset, so the history of a sequence of pages is inaccessable.
2. The nonlinearity of frames means search engines are less effective.  Pages may be overlooked by search engines or may be displayed out of context of their frameset.
3. Frames may be nested, but this adds to the complexity of the page structure and complicates the job of search engines, so there should be a good reason for doing this.
4. A good way to investigate various frame layouts and their associated HTML is to investigate the framed page templates in Microsoft FrontPage.  (Simply select New|Page from the File menu and click the Frames Pages tab.
5. Microsoft implements "floating frames" with a proprietary <iframe> tag; these can only be displayed in Internet Explorer. This inline framing technique allows other HTML documents to be embedded within a host HTML document.  The <iframe>...</iframe> tag pair must be inserted within the body of the HTML document.  Microsoft suggests that the topmargin and leftmargin attributes of the <body> tag should be used to locate the frame in the browser window.
6. Frame borders are shared and border colour conflicts are automatically resolved by the browser; however, the priorities can be overridden by the HTML author.
7. Note that there is currently no CSS equivalent to frames.
8. Niederst, Chap. 11 contains numerous tips, tricks, and trouble-shooting advice for frames in pages 220+.
9. The following table relates and describes the standard tags/attributes associated with frame layout.

SAQ 10: What frame tags are used in the Web page you are viewing?
4.  FORMS (See Niederst, Chap.12 .):

1. HTML forms are formatted text containing buttons, checkboxes, blank fields, etc. that are used to interactively enter data.
1. In Web pages, information is typically entered via dialog boxes, pop-up windows whose size, location, and appearance is specified in HTML. Dialog boxes usually provide visual components called controls, (e.g.push buttons, radio buttons, check boxes, list boxes, multiline edit controls, etc.) which allow the user to interact with the Web server in a limited way.
2. Normally forms are completed before the data is sent to the server.  Sending the composite data is initiated by clicking a submit button, a special button defined by adding submit as the type of the <input...> tag.  HTML does not support server-side monitoring of user manipulation of individual controls within a form or server-side enabling/ disabling of individual controls on a form after the form has been shipped to the client browser.
See the simple example of a basic HTML form in Niederst, Figure 12-1
2. Forms, when combined with scripts (miniprograms written in JavaScript, CGI, VBScript, etc.), facilitate interaction between the user and a Web site.  On their own, forms are of limited use, but, when augmented, for example, with JavaScript or CGI scripts,  (See LM I, section 4.2.) they allow the user to input data, have it processed on the server, and, if desired, have information returned to the user or forwarded to others.
1. The data supplied to the client-side JavaScript script or server-side CGI program should be supplied withing the <form> tag.
2. When the user clicks the submit button, the data is passed to the particular script or CGI program specified by the action attribute.
3. HTML tags for controls do not include any positioning information. The controls are displayed in the Web browser's window in the order that they appear in the HTML source. So far, no WYSIWYG HTML authoring tools exist for designing of HTML forms visually on personal computers. Until these arrive, the following techniques can be used to control the spatial orientation of forms:
1. The vertical spacing between controls can be set with <br> (____ ______(18)) and <p> (________(19)) tags.
2. Controls can be grouped together using the <hr> (_________ ____(20)) tags or in-line graphics.
3. Tables can be used to precisely define the location of controls, e.g.  labels and the associated controls can be aligned as rows in a two column table.
Unfortunatly, in general, the ability to construct HTML forms that efficiently use the page area and interactively respond to the user is still severely limited in the current versions of HTML.  Of course, alternative versions of a form can be downloaded to a browser depending on what is known about the user's previous choices.
4. The primary building blocks of HTML forms are the five tags: <form>, <input>, <textarea>, <select>, and <option>. These tags, along with their attributes, are used to code all the possible controls and designate the particular server side program or script that will process the form's data.
1. The <form> tag:
3. All form-related tags must be encapsulated within <form>and </form>.
4. Any other standard HTML elements (formatted text, headings, lists, tables, etc.) can be encapsulated within the <form> and </form> tags.
5. The <form> tag has three possible attributes:
1. The action attribute's value is the URL of the server-side  program or script that is designated to process the data entered the form.
2. The method attribute has two possible value, get or post, which defines how the data will be passed to the ____________(21) program or script.
3. The enctype attribute is reserved for encrypted transactions.
6. When the a button of type submit is clicked, the data from all the controls in the form are sent as a series of controlname=controldatapairs to the program or script specified in the action attribute of the enclosing <form> tag. The exact manner in which the data is presented to the program or script depends on the method attribute of the <form> tag.
7. It is possible to create multiple forms on a single Web page, but this is discouraged. Separate pages for separate forms is recommended.
2. The <input> tag is a multipurpose tag for creating clickable buttons, check boxes, and text-entry boxes. It has ten possible attributes specified in the following table, INPUT TYPES FOR FORM TAGS.
1. The tree most important attributes are:
1. name which associates a unique developer-defined symbol with the control (This identifies particular data when it is sent to the server.),
2. type which can take on the values specified under the TYPE column in the table, INPUT TYPES FOR FORM TAGS, and
3. value which allows the programmer to define a default value for the control.
2. Any user-oriented label for the text-entry box occurs outside the <input> tag, using ordinary HTML text coding procedures.
3. The tag pair, <textarea> and </textarea>is used to create a multiline text-entry box.  It can also delimit the default text to appear within the box.
4. The tag pair, <select>...</select> is used to build menus or a list of choices.
5. The tag pair, <option>...</option> supplies the text for the individual elements of <select> menus.
5. Unfortunately the display of forms  may vary between browsers, therefore developing forms that function effectively in all browsers requires experimentation.
6. The Class Message Board in the Navigation Panel is a nice, simple example of the use of forms with interactivity provided by JavaScript.  Access the board, click Post Now!, and then, right click in the frame and select View Frame Source from the pop-up dialog box.

1. The <input> tag currently has _____(24) possible types, depending on the value specified for type in the syntax <input type=type>. The possible types are specified in the following table.
2. A nice pictorial illustration of the appearance of these types is given in Niederst, Table 12-2, pp 243. (Although the browsers depected are not the latest, the  illustration effectively depicts the differences in the input types.)

SAQ 12 : What is the functional difference between a radio button and checkbox?
5. SERVER-SIDE INCLUDES (SSI) (See Niederst, Chap. 13.):
 

1. A SSI (server-side include) is a statement returning a variable value that a Web server inserts into a specified location in an HTML file before it is downloaded to a browser.  The syntax of an SSI statement is:

 
<!--#element attribute="value" -->
where the SSI element is a function available on the server that returns an output derived from the value of its attribute,  e.g.
 
<!--#echo var="DATE_GMT" -->
will tell the server to insert the current date in Greenwich Mean Time.  DATE_GMT is an example of a standard UNIX environment variable whose value is maintained by the operating system so that it can be used by a server program.  Such variable provide the distinct advantage of curreny.
2. Obviously, the characteristics of the SSI inherently depend on the particular _________(25) of the Web server
3. When an HTTP request is received, the server parses the specified HTML file and executes the SSI statements, including their output at the statement location.  (Parsing means to breaks a program into is basic instructions.)
4. Access to this variables is obtained from the server administrator. A Web page that contains SSI statements is often distinguished by the administrator with a htmlf or shtml suffixes, but this is not necessary.
5. SSI function like CGI scripts in that they are processed on the server (rather than the client, like __________ and _________(26) normally are) and are thus independent of the browser and O.S. of the client.
1. SSI are simple to learn and implement; however, they are much more limited than than the flexible CGI programs.
2. SSI may be combined with CGI scripts to optimize the power of server-side programming.
6. XSSI (eXtended SSI), available on Apache servers of Version 1.2 or higher, provide
1. a more extensive set of commands,
2. for the definition of new variables, and
3. selection control structures (if/else) enabling decisions to be made by the XSSI instructions.
7. In order to utilize SSI, one must ask the server administrator which environment variables are available.   The administrator needs to configure the server to provide SSI.

 
 
 

SSI VARIABLES
(USED BY SSI INSTRUCTION, TYPICALLY THE ECHO COMMAND)

VARIABLE	DESCRIPTION
DATE_GMT	specifies the Greenwich Mean Time that is maintained by the server.
DATE_LOCAL	specifies the current date, local time
DOCUMENT_NAME	specifies the name of the current file
DOCUMENT_URI	specifies the URL of the current file
LAST_MODIFIED	specifies the time and date of the last modification of the current file
QUERY_STRING_UNESCAPED	contains an undecoded query string, typically for accessing a CGI script

8. For a good SSI Tutorial (Linked from www.leoville.com, Leo LaPort's site.) see http://www.useforesite.com/tut_ssi.shtml