A.4 HTML Basics

HTML (Hyper Text Markup Language) is the language for representing hyper text, and the text style or link is represented with a specific keyword called "tag." A tag is represented with a character string placed between "<" and ">." Also, this character string is called "tag-name."

In most cases, the tag has a start and end tag, which are represented as "<tag-name>" and "</tag-name>," respectively. The character string placed between the start and end tag is significant for Web Browsers. There is a tag called "single tag," which is significant by merely representing as "<tag-name>." In addition, the tag may have one or more attributes. An attribute is mostly represented in the format of "attribute-name=attribute-value," but it may be represented in the format of only "attribute-name." A tag with attributes is represented in the format of "<tag-name attribute-name-1=attriute-value attribute-name-2>."

This appendix introduces the common tags required for describing basic HTML, and tags required for calling Web applications. For details of these tags and others, refer to books or Web pages providing an explanation of HTML.

Web Browsers being commonly used are IE (Microsoft's Internet Explorer) which defines its own tags. Therefore, all tags cannot be used for both of these Web Browsers. By the way, even the most common tags may be each interpreted differently by these browsers. In addition, the tag support range or operation depends on the actual version of the Web Browser. For details, refer to related books or Web pages.

The following explains main tags, and attributes available by the tags.

<HTML>~</HTML>: This tag indicates that that the data being sent comprises an HTML document.

<HEAD>~</HEAD>: This tag indicates the header of the HTML document. <TITLE> must be described in the header. <BASE>, <SCRIPT>, <STYLE>, <META>, <LINK>, <OBJECT>, <NEXTID>, and <ISINDEX> can be also described in the header.

<TITLE>~</TITLE>

This tag indicates the title of the HTML document. Generally, the title is not displayed on the page.<BODY>~</BODY>

This tag indicates the body of HTML text. In the body, the text style must be arranged with various tags.

Attribute name	Explanation
BGCOLOR="Color"	Specifies the background color.
BACKGROUND="URL"	Specifies the background image.
TEXT="Color"	Specifies the text color. TEXT indicates the general text, LINK does the link text, VLINK does the cached link text, and ALINK does the link text during mouse clicking.
LINK="Color"
VLINK="Color"
ALINK="Color"

<Hn>~</Hn>

This tag specifies headers such as the title of each chapter. "n" is the header level that can be specified in the range of 1 to 6, with one being the largest and boldest text.

Attribute name	Explanation
ALIGN=Position	Specifies the position where the text is to be displayed. "left," "center," or "right" can be specified as a position.

Example of use

<H1> Introduction to HTML </H1>
<H2 ALIGN=right> About HTML </H2>

Displayed result

<P>~</P>

This tag indicates a new paragraph. </P> can be omitted, but is required when specifying any optional attributes.

Attribute name	Explanation
ALIGN=Position	Specifies the displayed position. "left," "center," or "right" can be specified as a position

Example of use

<P> First paragraph
The Line feed character is not significant for HTML text.
<P> Second paragraph
When the paragraph is specified, the Line feed character is inserted, or one line is placed.  Then, the next sentence is described.
<P ALIGN=right> Third paragraph
When specifying the attribute, describe the end tag. </P>

Displayed result

<HR>

This tag draws a horizontal line.

Attribute name	Explanation
ALIGN=Position	Specifies the displayed position. "left," "center," or "right" can be specified as a position
SIZE=Height	Specifies the horizontal line height in the unit of pixels.
WIDTH=Width	Specifies the horizontal line width in the unit of pixels. For this specification, the rate (%) of the horizontal line width for the Web Browser-displayed width can be used specified.
NOSHADE	Specifies the horizontal line without three-dimensional shading.

Example of use

First horizontal line
<HR>
Second horizontal line
<HR SIZE=5 WIDTH=50% NOSHADE>
Third horizontal line
<HR ALIGN=left SIZE=8 WIDTH=20%>

Displayed result

<FORM>~</FORM>

This tag indicates an input form. Using the <INPUT> or <SELECT> tag in the form enables the input component to be allocated. When executing the action, the data input to the <INPUT> or <SELECT> tag can be passed, which can be used for executing Web applications.

Attribute name	Explanation
ACTION="Action-name"	Specifies the action to be executed when pressing the Submit button. Generally, it specifies a Web application to be executed.
METHOD=Method-name	Specifies the method for passing the data input on the form to the Web application. When the method name is GET, this value is passed to the environment value, or when it is POST, this value is passed to the standard input.
ENCTYPE="Encode type"	Specifies the encode type for data that is input or output to the script. When the file uploading function is used though it is usually an omitted attribute, "Multipart/form-data" is specified as an attribute.
TARGET=Target-name	Specifies the window (frame) where the action execution result is displayed.
NAME=Form-name	Add the name to the form. It is selected and used from the script.
onSubmit="Script"	Specifies the script to be executed when pressing the Submit button.
onReset="Script"	Specifies the script to be executed when pressing the Reset button.

Example of use

<FORM METHOD=POST ACTON="sample/action.script">
Name:<INPUT TYPE=TEXT NAME="FULLNAME1" VALUE="Your name" SIZE=30><BR>

Password:<INPUT TYPE=PASSWORD NAME="PASSWORD1" SIZE=30>

<HR>
<P>
Hobby:
<INPUT TYPE=CHECKBOX NAME="CHECK1" VALUE="Listening to music" CHECKED>Listening to music
<INPUT TYPE=CHECKBOX NAME="CHECK1" VALUE="Reading">Reading
<INPUT TYPE=CHECKBOX NAME="CHECK1" VALUE="Sports"> Sports

<P>
Sex:
<INPUT TYPE=radio NAME="RADIO1" VALUE="Male" CHECKED>Male
<INPUT TYPE=radio NAME="RADIO1" VALUE="Female">Female

<P>
Age:
<SELECT NAME="DRDLIST1">
<OPTION VALUE="10s">10 to 19 years
<OPTION VALUE="20s" SELECTED>20 to 29 years
<OPTION VALUE="30s">30 to 39 years
<OPTION VALUE="40s or later">40 years or later
</SELECT>

<P>
Occupation:<BR>
<SELECT NAME="LIST1" SIZE=3>
<OPTION VALUE="Free">Temporary worker
<OPTION VALUE="Office worker" SELECTED>Office worker
<OPTION VALUE="Public service">Public service
<OPTION VALUE="Self-employed">Self-employed
</SELECT>

<P>
Comment:<BR>
<TEXTAREA NAME="TEXTAREA1" COLS=25 ROWS=4></TEXTAREA>
<P>
<INPUT TYPE=submit VALUE="Submit">
<INPUT TYPE=reset VALUE="Reset">
</FORM>
</BODY>
</HTML>

Displayed result

<INPUT>

This tag displays various form components on the input form. The displayed component depends on the TYPE attribute.

Attribute name	Explanation
TYPE=Type-name	The displayed content depends on the type name. TEXT: Text PASSWORD: Password CHECKBOX: Checkbox RADIO: Radio button HIDDEN: Hidden area BUTTON: Button SUBMIT: Submit button RESET: Reset button FILE: File upload
NAME=Name	Specifies the form component name.

Attribute name

Explanation

TYPE=Type-name

The displayed content depends on the type name.

TEXT: Text

PASSWORD: Password

CHECKBOX: Checkbox

RADIO: Radio button

HIDDEN: Hidden area

BUTTON: Button

SUBMIT: Submit button

RESET: Reset button

FILE: File upload

NAME=Name

Specifies the form component name.

<INPUT TYPE-TEXT>

This tag is the form component for inputting the text.

Attribute name	Explanation
SIZE=Width	Specifies the input area width.
MAXLENGTH=Length	Specifies the maximum number of input characters.
onChange=Script	Specifies the script to be called when the input area is changed.
onSelect=Script	Specifies the script to be called when the character string in the input area is selected.
onFocus=Script	Specifies the script to be called when the focus is moved to the input area.
onBlur=Script	Specifies the script to be called when the focus moves out of the input area.

<INPUT TYPE=PASSWORD>: This tag is the form component for inputting the password, which is same as TYPE=TEXT except that the input characters are displayed as asterisks (*).

<INPUT TYPE=CHECKBOX>

This tag is the form component for specifying a checkbox.

Attribute name	Explanation
VALUE="Character-string"	Specifies the value to be sent when this item is checked.
CHECKED	Sets the initial state of this item to the checked state.
onClick=Script	Specifies the script to be called when this item is checked.

<INPUT TYPE=RADIO>

This tag is the form component for a radio button (also called option button in graphical programming).

Attribute name	Explanation
VALUE="Character-string"	Specifies the value to be sent when this item is checked.
CHECKED	Sets the initial state of this item to the checked state.
onClick=Script	Specifies the script to be called when this item is checked.

<INPUT TYPE=HIDDEN>

This tag is for a hidden field and is not displayed on the Web Browser. For example, this field is used for Web applications to inherit the data through Web Browsers.

Attribute name	Explanation
VALUE="Character-string"	Specifies the field value.

<INPUT TYPE=SUBMIT>

This tag executes the action specified by the ACTION attribute in the FORM tag.

Attribute name	Explanation
VALUE="Character-string"	Specifies the character string to be displayed on the button.
onClick=Script	Specifies the script to be called when this item is checked.

<INPUT TYPE=RESET>

This tag resets all input items in FORM to initial values.

Attribute name	Explanation
VALUE="Character-string"	Specifies the character string to be displayed on the button.
onClick=Script	Specifies the script to be called when this item is checked.

<INPUT TYPE=BUTTON >

This tag is used for JavaScript, so it is not displayed by Web Browsers that cannot use JavaScript (or JScript).

Attribute name	Explanation
VALUE="Character-string"	Specifies the character string to be displayed on the button.
onClick=Script	Specifies the script to be called when this item is checked.

<INPUT TYPE=FILE>

This tag is the form component to specify a file upload from the client side to the Web server side.

Example of use

<FORM METHOD=POST ACTON="sample/action.script"
      ENCTYPE="multipart/form-data">
<P>
Send file 1<INPUT TYPE="file" NAME="FILE1"><BR>
Send file 2<INPUT TYPE="file" NAME="FILE2"><BR>
<P>
<INPUT TYPE=submit VALUE="Send">
<INPUT TYPE=reset VALUE="Reset">
</FORM>

Displayed result

<TEXTAREA>~</TEXTAREA>

This tag displays the multiple-line-input field on the input form. The text between <TEXTAREA> and </TEXTAREA> is displayed in the field.

Attribute name	Explanation
NAME="Character-string"	Add the name to the field.
ROWS=n	Specifies the number of lines in the text area.
COLS=n	Specifies the number of columns in the text area.
onChange=Script	Specifies the script to be called when the input area is changed.
onSelect=Script	Specifies the script to be called when the character string in the input area is selected.
onFocus=Script	Specifies the script to be called when the focus is moved to the input area.
onBlur=Script	Specifies the script to be called when the focus moves out of the input area.

<SELECT>~</SELECT>

This tag displays the select form component on the input form.

Attribute name	Explanation
NAME="Character-string"	Add the name to the field.
SIZE=n	Specifies the number of displayed lines on the selective field.
MULTIPLE	Can select multiple options.
onChange=Script	Specifies the script to be called when the input area is changed.
onFocus=Script	Specifies the script to be called when the focus is moved to the input area.
onBlur=Script	Specifies the script to be called when the focus moves out of the input area.

<OPTION>~</OPTION>

This tag displays the select item on the SELECT tag. </OPTION> can be omitted.

Attribute name	Explanation
SELECTED	Selects the select state as the initial state.
VALUE="Character-string"	Specifies the value to be sent when this item is checked.