Some of the useful tags that we studied in the previous units are:

html	head	title	body	center
img	i	hn	p	br
sup	sub	ol	ul	dl
blockquote	font	pre	a	hr
bgsound	b	table	map	u
embed	!--	frame

In this tutorial, we will study two main tags that have had major impacts on how web design has changed from its original form to the current design methodologies. One of the new tags deal with running Java applications on the net and the other one deals with defining forms to be submitted buy users.

The APPLET tag identifies the location, class file name, and size of a Java applet. The Java programming language, developed by Sun Microsystems® is a full featured object-oriented language that allows developers to create a special type of Java application programs designed to run within the Web browsers. Most browsers enforce strict rules on how applets can use or interact with the users' computers and the network connections as a security precaution.

Applets can be used to extend the functionality of Web browser. There are many different applications from embedding audio, video, image to word processing, games, utility programs, and so on. Some of the most popular games on Internet (Chess, Backgammon, ... at Yahoo Game zone or Excite Ten) are Java applets. There are also a large number of educational applets available on the Internet in all areas of science, mathematics, engineering and so on.

To create an applet, you need to first write a Java program, and then compile it. The complied file will have a .class extension. It is this compiled file that should be referred to in the HTML document inside an applet tag. An applet is embedded with the <APPLET> tag. It has attributes for specifying the name and the location of the class file need to run the applet as well as attributes for the height and width of space available to the applet within the browser window.

The formal definition of the APPLET tag is given below:

<APPLET
  ALIGN=alignment
  ALT=alternate_text
  CODE=applet_class_file
  CODEBASE=url
  DOWNLOAD=n
  HEIGHT=pixels
  HSPACE=pixels
  NAME=applet_instance_name
  TITLE=text
  VSPACE=pixels
  WIDTH=pixels>
...
<PARAM
  NAME=attribute_name
  VALUE=value>
...
</APPLET>

Attributes

align = alignment

This required attribute specifies the alignment of the applet. The possible values of this attribute are similar to those for the IMG tag : left, center, right, top, middle, bottom. The default is left.

left	The applet is aligned to the left of surrounding text.
center	The applet is aligned to the center of surrounding text.
right	The applet is aligned to the right of surrounding text.
top	The applet is aligned to the top of surrounding text.
middle	The applet is aligned to the middle of surrounding text.
bottom	The applet is aligned to the bottom of surrounding text.

alt = text

This optional attribute specifies any text that should be displayed if the browser understands the APPLET tag but can't run Java applets.

code = applet_class_file

This required attribute gives the name of the file that contains the applet's compiled Applet subclass. This file is relative to the base URL of the applet. It cannot be absolute.

codebase = url

This optional attribute specifies the base URL of the applet -- the directory that contains the applet's code. If this attribute is not specified, then the document's URL is used.

height = pixels

This required attribute gives the initial height (in pixels) of the applet display area, not counting any windows or dialogs that the applet brings up. Note: at the current time the applet may not change its own size.

hspace = pixels

This optional attribute specifies the number of pixels on each side of the applet to be used as padding.

name = applet_instance_name

This optional attribute specifies a name for the applet instance, which makes it possible for applets on the same page to find (and communicate with) each other.

vspace = pixels

This optional attribute specifies the number of pixels above and below the applet to be used as padding.

width = pixels

This required attribute gives the initial width (in pixels) of the applet display area, not counting any windows or dialogs that the applet brings up. Note: at the current time the applet may not change its own size.

Parameters are passed to the applet with:

<PARAM NAME = name VALUE = value>

This tag is the only way to specify an applet-specific attribute. Applets access their attributes with the getParameter() method.

Applet tag requires and end tag.

Applet resources are loaded relative to the document URL. The CODEBASE= attribute is used to change this default behavior. If the CODEBASE= attribute is defined, it specifies a different location in which to find applet resources. The value can be an absolute or a relative URL. The absolute URL is used as is, without modification, and is not affected by the document's BASE element. When the CODEBASE= attribute is relative, it is relative to the document URL (or BASE tag, if defined).

Example

The following is an example of free applets that you can download from the Web. This one is downloaded from Java Boutique but you can also find this and other applets at other places. It is called Lake applet and is a very popular applet. Lake applet is developed by David Griffith.

<APPLET CODE="lake.class" WIDTH=250 HEIGHT=320>
<PARAM param name="image" value="sunset.jpg">
</APPLET>

Below is the implementation of the the Lake applet.

As you notice, Lake applet is very simple to set up. It uses only one PARAM statement and requires only one class file (Lake.class). It also requires an image that is used to create the images and the impression of the reflection of the image in a lake. Most applets however would allow for more parameters and often involve more than one class file. You need to make sure that you read the information about the set up of the applet and download all necessary files before you can successfully implement an applet in your documents. You can see a number of different Java applet implementations in my Humor pages.

The applet tag is ignored by non-Java browsers. With a browser that does not support Java the entire applet and all PARAM statements between <applet>, </applet> tags are undefined. The HTML standard simply ignores those statements. Java enabled browsers on the other hand ignore any other statement that is not included in a PARAM tag. This simple feature can be utilized to provide some content even for non-Java browsers.

FORM, INPUT, TEXTAREA, SELECT

FORM tag is among the tags that its true usage and implementation is covered in a more advanced course (Multimedia Instructional Design II). Nonetheless, a wide range of capabilities of FORM and its associated tags INPUT, SELECT, and TEXTAREA can be discussed within this course as well.

In general, <FORM> ... </FORM> tags are used to wrap the elements of a Web-based form. The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. Each interface element in the form must be defined with an appropriate tag. These tags are INPUT, SELECT, and TEXTAREA. All elements in the form must be defined between the <FORM> and </FORM> tags. As well as user input elements, the form can contain other elements such as texts, images, paragraphs, tables, and so on.

When the form is displayed in a web browser, the user can fill it out by making choices and entering text using the interface elements, and then submit the form by clicking a "Submit" button.

Several kinds of form elements can be defined using the INPUT tag, which uses the TYPE attribute to indicate the type of element, such as button, checkbox, and so on. Two other kinds of interface elements you can put in a form are selection lists and text areas. Selection lists act as menus and are defined with the SELECT tag. Multi-line text-entry fields are defined with the TEXTAREA tag.

To enable the form to process the data that the user enters, it must have a "Submit" button, which is a button defined by an INPUT tag with TYPE="SUBMIT" (there are other ways too).

Instead of starting with the formal definition of FORM tag, we begin by defining the basic formats of SELECT, INPUT and TEXTAREA tags and through use of examples illustrate different usages of these tags. The only point that you need to consider is that these tags must be within <FORM> ... </FORM> tags which we define later in this document.

INPUT

The INPUT tag defines a form element that can receive user input. The TYPE attribute determines the specific sort of form element to be created. There is a large number of attributes associated with INPUT elements. Following is an explanation of the attributes of the basic format of INPUT.

<INPUT
 TYPE=type
 ALIGN=top|middle|bottom|left|right
 CHECKED
 MAXLENGTH=n
 NAME=name
 SRC=url
 VALUE=value
 SIZE=size>

TYPE
This attribute determines which, out of possible choices, type of input element is being defined. The choices are:

hidden
checkbox
radio
text
password
submit
reset
file
image

ALIGN
Acts similar to ALIGN of the of IMG tag. It determines how the INPUT element lines up with neighboring elements on the same line within the HTML document.

CHECKED
When the TYPE of the INPUT element is checkbox or radio button, this attribute can be use to indicate that they are checked off when the form is initially loaded.

MAXLENGTH
specifies the maximum number of characters allowable in text, password, and file input elements.

NAME
It specifies the name of the input element benig defined. It is especially usefull for groups of radio buttons, of which only one item within the same form may be checked at a time.

SRC
When the INPUT elements are of the type IMAGE, SRC can provide the URL to the image location to be used as a background image. (In fact, this is another way to submit form by clicking on the image defined through method.)

VALUE
It specifies the default value of the element being defined. For SUBMIT and RESET buttons, setting the value to a text string will display that string on the button instead of the words "submit" or "reset".

SIZE
This attribute determines how wide input fields are rendered in the browser window.

There are additional attributes of the INPUT tag but they are beyond the scope of this course.

SELECT

The SELECT tag defines a selection list on an HTML form. A selection list displays a list of options from which the user can select an item. If the MULTIPLE attribute is supplied, users can select multiple options from the list at a time. If the MULTIPLE attribute is not supplied users can select only one option in the list at a time.

The SIZE attribute specifies how many options in the list are displayed at one time. For multiple-selection lists, if you do not specify the SIZE attribute, the browser displays some, maybe all, of the options. For single-selection lists, by default Navigator displays the list as a drop-down menu that initially shows only one option. The user can click the list to display the rest of the options. If you specify the SIZE attribute, the list is displayed as a scrolling list that shows the specified number of options, regardless of whether the list allows single or multiple selection.

The SELECT tag should be used between <FORM> and </FORM> tags. Use the OPTION tag to define options in the list.

When the form containing the selection list is submitted to the server, a name/value pair is sent for each selected option in the list. The basic format of SELECT tag is:

<SELECT
  NAME="selectName"
  MULTIPLE
  SIZE="listLength"
>
<OPTION...>
...
<OPTION...>
</SELECT>

MULTIPLE

specifies that multiple items can be selected. If this attribute is omitted, only one item can be selected from the list. If multiple selection is enabled, the user usually needs to hold down the Shift key to select additional items.

NAME="selectName"

specifies the name of the select element. This value is the name portion of the name/value pair sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.

SIZE="ListLength"

specifies the number of options visible when the form is displayed. If the list contains more options than specified by size, the list is displayed with scrollbars.

OPTION

The OPTION tag specifies an option in a selection list. Use the OPTION tag inside a SELECTION tag. When the form containing the selection list is submitted to the server, a name/value pair is sent for each selected option in the list. The value portion of an option is the value of the VALUE attribute, if it has one, otherwise, it is the text that follows the <OPTION> tag.

Syntax

<OPTION
  VALUE="optionValue"
  SELECTED
>
...
</OPTION>

VALUE="OptionValue"

specifies a value that is returned to the server when the option is selected and the form is submitted. When no VALUE attribute is present, the value returned is the same as the text following the <OPTION> tag.

SELECTED

specifies that the option is selected by default.

TEXTAREA

The TEXTAREA tag defines a multi-line input field on an HTML form. A text area field lets the user enter words, phrases, or numbers.

You can defines the number of characters per line the text area can accommodate without scrolling by supplying the COLS attribute. You can specify that the number of lines that can appear without scrolling by supplying the ROWS attribute.

Scrollbars appear in the text area if the text in the text area element exceeds the number of specified columns or rows. TEXTAREA has the following format:

<TEXTAREA
  COLS="columns"
  NAME="name"
  ROWS=" rows"
  WRAP="OFF"|"HARD"|"SOFT"
>
textToDisplay
</TEXTAREA>

COLS="columns"

defines the width (number of characters per line) the text area can accommodate without scrolling.

NAME="name"

specifies the name of the text area element. This value is the name portion of the name/value pair sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.

ROWS="rows"

defines the number of lines (number of rows) the text area can accommodate without scrolling.

WRAP

specifies whether lines longer than the text area's column width wrap to the next line. The value of WRAP can be one of the following:

• OFF disables word wrap. Text the user types is displayed with the exact line breaks that the user types. If the user explicitly inserts a line break, however, the break is included as part of the text area's value. The user has to scroll horizontally to see the ends of lines that do not fit in the text area element.
• HARD causes word wrap, and the line breaks are included when the form is submitted. The text wraps inside the text area element, and that the user does not need to scroll horizontally.
• SOFT causes word wrap, but the line breaks are not included when the form is submitted.

It is now time to look at the FORM tag.

FORM

The action invoked when the user clicks a "Submit" button is defined by the ACTION attribute of the FORM tag. The value of the ACTION attribute is usually a URL that points to a CGI program. A CGI program runs on a a server, processes arguments sent by the form, and returns data to the browser. The value of the form's METHOD attribute also affects the way the CGI program is invoked. Forms can also send their contents to a mailto: URL as well, or even have their contents handled by browser-specific scripting languages such as JavaScript. It is beyond the scope of this tutorial to provide details of CGI programming, but hundreds of books and tutorials on the Web are available on the subject. We will look some applications of Javascripts using forms later in this course.

It is important to remember that a document can have multiple forms, but forms cannot be nested -- you cannot have a form within a form. The basic FORM tag has the following format:

<FORM
 ACTION=url
 METHOD=get|post>
...
...
</FORM>

ACTION
specifies where FORM data should be sent once the user is done entering the information.

METHOD
defines which of two communications methods will be used to submit the data from the form to the resource listed in the ACTION attribute; these two methods are GET andPOST. Information passed from a form to an ACTION using theGET method will pass their data along as part of the URL, while data passed according to the POST method will be placed on the standard input (STDIN), for whatever resource is listed in the ACTION attribute to read in.

---

1. Study the instructional materials and practice the use the above tags in an HTML document. Verify that your document is valid and correct by saving your document into an html file such as work.html and then try to look at it using your browser. (This can be done off-line)
   
2. Search the Java related sites and find at least one educational applet related to the course you are designing and incorporate it into your course design pages.  Find another applet related to incorporating sounds into a document.  Use it in your course design pages. Find one more related to images (albums, tickers, etc.) and incorporate it into your course design pages.  Finally find 40 links to sites about Java Applets and introduce them in your course Web page.  Create brief explanations about the the contents of those pages.
3. Practice and use the form tag by creating a a questionnaire for student evaluation form, a copy of which is placed in AEDC Lab (Schaefer 103), in your pages and link it to your index.html file.

4. Re-design the same questionnaire and improve it such that all different tags (INPUT, SELECT, TEXTAREA and most of their variations) are used in the form that you are generating.  Your hard copy submission should provide explanation about re-designed elements.

5. Use the form tag to develop at least two practice tests for the students in the course you are designing.  The test should be designed for 30-45 minutes and must have the endorsement of your faculty sponsor as to be a legitimate test.
6. Create a new tutorial for a subject in the course you are designing.  If you can not think of any, use a topic in Operations Research or Simulation (when compared to your previous tutorial from assignment 5, this one should exhibit more professionalism).
7. This assignment is due Thursday April 15th at 5:00pm.