Example of objects in documents

All loose elements in a web-page can be seen as an object: pictures, forms, texts, tables, fields, applets, sounds, videos, etc. In object oriented programming systems (OOPS), as HTML is, such elements are called objects if they are defined as objects in HTML-code and if it is clear from which class the object is. If an object is defined in the programming source the programmer gives that new object a unique name. The name we called a property. After execution in a browser the object also automatically gets an unique number: 0, 1, 2 etc. At that moment the object officially is called an instance. An instance is an unique object with a name and with other properties. All the properties are inherited from a regular or pro-programmed class.

What do you see here: pictures, texts, objects, elements, applets or instances?

All these elements are objects or beter: instances of a certain class. There are 2 instances of the class image; 5 instances of the class form; and 2 instances of the class chart. Alle these elements, objects or instances has 'programmed' properties as showed in the source, such as yyyyy, 10, a and Applet 2. If properties are not programmed by the programmer (or not 'filled in' or not 'declared'), they are not in use; or that instance or that class has not such property. The properties can be declared by giving them values, textstrings, names, names of a file, and so on.

On this page you see three paragraphs: images, forms and applets. On the bottom of the page you see a paragraph with all kind of properties the browser can observe and HTML can handle.

Images / pictures:

Here you see 4 images or pictures. Some of them have an strange size, some of them has a strange position.

The source to declare an image is as follows:

<IMG SRC='icon.gif'>
<IMG SRC='icon.gif' HEIGHT='80' WIDTH='80'>
<IMG SRC='icon.gif' HEIGHT='80' WIDTH='80' HSPACE='20' VSPACE='20'>
<IMG SRC='icon.gif' BORDER=2 HSPACE='10' VSPACE='10'>

You see 4 pictures of the class image (IMG). The source (SRC) of all the pictures is (here) a bitmapped picture from the file named 'icon.gif'. Picture 2, 3 and 4 have some properties: HEIGHT, WIDTH, HSPACE, VSPACE and/or BORDER. Picture 3 have some space around the original picture. Picture 4 has a black line around himself. That is prepared by the property HSPACE, VSPACE either BORDER. The value of BORDER is 2 [pixels]. The value of horizontal and vertical space is both 20 [pixels]. The browser can read this information and presentate that all together on the screen.

Forms and fields:

Here you see 3 forms with fields or elements. One form have 3 fields; one two; and the last one has 4 fields. Sometimes fields are called elements. We prefer the name field.

The source is as follows:

<FORM NAME='formA1'>
  <INPUT TYPE='text' NAME='a' VALUE='xxxx' SIZE='10'>
  <INPUT TYPE='text' NAME='b' VALUE='yyyyy' SIZE='10'>
  <INPUT TYPE='text' NAME='c' VALUE='yyyyy' SIZE='10'>
</FORM>

<FORM NAME='formA2'>
  <INPUT TYPE='text' NAME='p1' VALUE='a' SIZE='10'>
  <INPUT TYPE='text' NAME='p2' VALUE='7634' SIZE='10'>
</FORM>

<FORM NAME='formA3'>
  <INPUT TYPE='text' NAME='p1' VALUE='a' SIZE='5'>
  <INPUT TYPE='text' NAME='p2' VALUE='a' SIZE='5'>
  <INPUT TYPE='text' NAME='x' VALUE='aa' SIZE='10'>
  <INPUT TYPE='text' NAME='y' VALUE='aaa' SIZE='20'>
</FORM>

You see 5 fields in 3 forms of the class form. The names of the forms are: formA1, formA2 and formA3. The first form has 3 fields with the names a, b and c. The other fields are p1 and p2 (in the second and third form) and x and y (in de last form only).
The fields are all of type texts (text). Sometimes a field can be a button, then you defined this on an other way (botton). The fields have a length 5, 10 or 20 and a default value a, aa, aaa, xxxx or yyyyy and so on (SIZE and VALUE).

Applets:

Here you see 2 objects. Officially said as: two instances of the same class.

The source to declare the applets, is as follows:

<APPLET 
   CODE='Chart.class' 
   NAME='Diagram1'
   WIDTH=250
   HEIGHT=50>

 <PARAM NAME=title VALUE='Staafdiagram'>
 <PARAM NAME=columns VALUE='1'>
 <PARAM NAME=orientation VALUE='horizontal'>
 <PARAM NAME=scale VALUE='5'>

 <PARAM NAME=c1 VALUE='10'>
 <PARAM NAME=c1_color VALUE='red'>
 <PARAM NAME=c1_label VALUE='a'>
 <PARAM NAME=c1_style VALUE='solid'>

</APPLET>

<APPLET 
   CODE='Chart.class' 
   NAME='Diagram2'
   WIDTH=250
   HEIGHT=70>

 <PARAM NAME=title VALUE='Staafdiagram'>
 <PARAM NAME=columns VALUE='2'>
 <PARAM NAME=orientation VALUE='horizontal'>
 <PARAM NAME=scale VALUE='5'>

 <PARAM NAME=c1 VALUE='10'>
 <PARAM NAME=c1_color VALUE='yellow'>
 <PARAM NAME=c1_label VALUE='a'>
 <PARAM NAME=c1_style VALUE='solid'>

 <PARAM NAME=c2 VALUE='20'>
 <PARAM NAME=c2_color VALUE='blue'>
 <PARAM NAME=c2_label VALUE='b'>
 <PARAM NAME=c2_style VALUE='solid'>

</APPLET>

You see 2 pictures of the class applet. We call them 'applets'. They aren't normal bitmapped pictures but generated by programmed code. The code of this applet comes from the file 'Chart.class' (CODE). The name of the applets are Diagram1 and Diagram2 (NAME). The other properties of these applets are WIDTH and HEIGHT. In the applets some other objects are declared: so called parameters (PARAM). The parameters can have names and values (NAME and VALUE). .... with the names c1, c2, c3, c4, until a maximum. Because applets can contain a lot of parameters (PARAM), which can be programmed which a value, a textstring or something else. Such parameters are defined in the applet; and are named by NAME, as columns, orientation, scale, c1, c2_color and c2_label. The parameters are situated between the tags <APPLET> and </APPLET> and just below the most important ones.

Some object generates events and some objects are be open to events. Events are based on methods and fuctions.
For methods and functions you need a serie of JavaScript-statements; bestween the tags <SCRIPT> and </SCRIPT>. Objects and properties mostly programmed, defined and filled in the HTML-statements; between the tags <BODY> and </BODY>.

Enschede, 18 jan 2001; updated jan, 20, 2003