Tech Notes

Charles E. Oyibo
Web · E-mail

[DHTML = HTML 4.0 + CSS + DOM + JavaScript (or another scripting language.]

JAVA

• Developed by Sun Microsystems;
• Designed to be cross-platform and device independent;
• Powerful, full featured object-oriented programming language;
• End-browser creates an environment (called JAVA Virtual Machine) on which JAVA applets run; (applets are mini applications created with the JAVA programming language. They are separately compiled programs with the file extension of .class. They are downloaded with the HTML page through the use of the <APPLET> tag.
  • The <APPLET> element designates the JAVA applet. Rather than containing the code necessary to perfrom a task, the <APPLET> element contains a reference to the code neeed to perform the task.
  • <PARAM> is a sub-element of the <APPLET> tag, which passes values to the applet that affect the operation of the program
  • Attributes of <APPLET> include CODEBASE, WIDTH, and HEIGHT. Attributes of <PARAM> include NAME, and VALUE.

JavaSript

• Developed by Netscape
• Programming language that allows scripting of events, objects, and actions to create Internet applications
• Uses two elements: <SCRIPT>...</SCRIPT> and <!--the comment-->
  • <SCRIPT> lets the browser know the type of script it is and its LANGUAGE attribute
  • The <!--comment--> tag encloses the actual JavaScript code so that browsers will ignore the code if they don't support scripting
  • While JAVA applets are compiled programs that are downloaded from the Web server to the browser and run inside the browser, JavaScript is embedded in the HTML page and interpreted at the client when the page is loaded.

ActiveX Objects & VBScript

• ActiveX controls/components are added to the HTML pages using the <OBJECT> element
• Like with the <APPLET> element, <PARAM> is a sub-element of <OBJECT> that controls the way the ActiveX control functions
• ActiveX controls are compiled programs derived from the OLE (Object Linking and Embedding standard. There are a large number of controls available from Microsoft and other vendors.
• Unlive JAVA applets that have to be downloaded everytime they are needed by the client, ActiveX controls are downloaded only once. The controls integrate with the operating system making their execution extremely fast, and their display characteristics sharp and crisp. As a result, ActiveX controls are very helpful for Internet applications such as graphing.
• The disadvantage of ActiveX controls is their lack of portability compared to JAVA applets that will run on any platform.
• ActiveX controls are created in C++ or Visual Basic
• <OBJECT> attributes include:
  • ClassID. The ClassID for and ActiveX control is placed in the (system) registry when a control is installed. There are a number of tools that can be used to retrieve this value:
    • Registry Editor (RegEdit). This tool is used to change settings in the system registry. It can also be used to view and copy the ClassID for an object
    • OLE Viewer. This utility is installed with the Win 32 Software Development Kit (SDK). You can select the Copy HTML <OBJECT> Tag to Clipboard command from the Object menu to copy the tag and the ClassID to the clipboard
    • ActiveX Control Insertion Device. This utility can build the <OBJECT> tag and copy if to the clipboard
  • ID
  • CodeBase. HTML authors can set the CODEBASE attribute to point to one of three file types which are typically supplied by the developer of the control:
    • Portable Executable File: a single executable file, such as an .ocx file or DLL, that is downloaded, installed, and registered by the browser;
    • .CAB (Cabinet) File: which contains one or more files all of which are downloaded together in a compressed cabinet
    • .INF file, which specified various file that need to be downloaded and set up for the .OCX to run
  • Name
  • Width, Height, Align, HSpace, VSpace

VBScript

• Developed by Microsoft
• Programming language that allows scripting of events, objects, and actions to create Internet applications
• Uses two elements: <SCRIPT>...</SCRIPT> and <!--the comment-->
  • <SCRIPT> lets the browser know the type of script it is and its LANGUAGE attribute
  • The <!--comment--> tag encloses the actual VBScript code so that browsers will ignore the code if they don't support scripting
  • Like JavaScript, VBScript is embedded in the HTML page and interpreted at the client when the page is loaded, and activated by an event like pressing a button. VBScript can also be used in the creation of Active Server Pages (ASP) for developers using Microsoft's Internet Information Server (IIS) as their Web server platform. (Note that VBScript is currently not supported in Netscape Navigator).

Special Elements

Meta Elements

1. Client Pull & Page Animation. Here, the HTML page has a META element inside the HEAD element that instructs the browser to refresh the view of that page. Other attributes of the REFRESH instruction specify the time interval and the URLs to be used. In this way, a series of pages can be presented without the user requesting the new pages to be loaded
2. Description
3. Keywords
4. Author
5. Company
6. Copyright
7. et cetera

Adding Sound to an HTML page

• The browser first downloads the audio file, and then starts the player software
• Depending on the browser that the client is using, the EMBED element or the BGSOUND element will be supported:
• The <EMBED>...</EMBED> element:
• is used to place audio on a Web page
• is supported by Netscape Navigator, and some ActiveX extensions to Internet Explorer
• has the following attributes:
  • SRC. Defines the URL of the sound file
  • CONTROLS. Provides a choice of several controls including Console, Small Console, Play Button, etc.
  • AUTOSTART. When set to True, the sound will start once the sound file is downloaded
  • HIDDEN. Hides the control when set to True; the default is false
  • LOOP. Defines how many times the sound file will play
  • VOLUME. Sets the default volume when playing first starts
  • HEIGHT, WIDTH, etc.
• supports .wav or .au audio files, or .mid midi files
• The <BGSOUND>...</BGSOUND> element:
  • is used to place background audio on a page
  • is supported by Internet Explorer
  • has the following attributes
    • SRC. Defines the URL of the sound file
    • LOOP. Defines how many times the sound file will play
    • DELAY. Defines the delay between loops
    • TITLE. The text that describes the sound
  • supports .wav or .au audio files, or .mid midi files

Animation Elements

<MARQUEE>...<MARQUEE>. Defines text that is displayed in an animated region of the browser.

Attributes:

• WIDTH, HEIGHT
• LOOP. How many times the text will travel through the space
• BGCOLOR
• BEHAVIOR. Defines how the text should move in the marquee
• SCROLLDELAY. Sets the number of milliseconds before refresh

Note that the MARQUEE element is currently supported only by Internet Explorer. Navigator just displays the text between the MARQUEE tags.

<BLINK>...</BLINK>

• Supported by Navigator
• Causes text to blink
• Note: Use the BLINK element cautiously as the (effect of) the element could potentially be annoying.

Cascading Style Sheets

selector {property: value; property: value; ... }

There are two parts to any style rule:

• A Selector that identifies an HTML element or group of elements
• A declaration of the style properties (in curly brackets, {...}) to be applied to the selector.

There are three ways to apply styles sheets to an HTML document:

1. Inline Styles: Adds a style attribute to a specific instance of an element using the following syntax:

<ELEMENT STYLE="property: value; property: value; ..."> ... </ELEMENT>

2. Embedded Syle Sheets: Defines a style block (delimited by the <STYLE>...</STYLE> tags), which is placed in the HEAD section of the document:

<HEAD>
<TITLE>...</TITLE>
<STYLE TYPE="text/css"><!--
...
--></STYLE>
</HEAD>

Note that the embedded style sheet is enclosed within an HTML comment (<!--...-->). This is done in order for the content to be ignored by non-css browsers, but still interpreted by css-compliant browsers.

3. Linked Style Sheets

• A separate file (with extension .css) is created in a text editor; this text file contains the style information to be applied to an HTML document
• The style sheet is linked to the HTML document using the LINK element in the HEAD of the document:
  <LINK HREF="URL" REL="stylesheet" TYPE="text/css">.

Classes

Use classes if you: (1) expect to have formatting variations for different instances of a single element, or, (2) would like to have different elements share the same format.

In HTML document:

<H2 CLASS="sales">Style associated with the sales class is applied to the text enclosed within these H2 tags<H2>

In CSS document:

<STYLE><!--
.sales {color: #000000;
        text-decoration:         underline;
}
--></STYLE>

Notice that the selector (sales) begins with a period (.), which is the required syntax for class names as selectors.

ID

In general, while Class names are usually given to grounps of element instances sharing some common functions or format (relative importance, context, etc.), ID is used to identify one specific instance of an element. Style rules selected by an ID attribute are declared using the pound sign (#) to precede the selector:

<STYLE><!--
#mainhead {color: red}
--></STYLE>

Note that while many elements can have the same CLASS attribute value, only one element in any document can have a particular ID attribute value.

DIV & SPAN

• Are used almost exclusively as containers for CSS properties
• DIV defines a block consisting of text and HTML tags and separates this block from surrounding content by line breaks
• SPAN is an inline element which flows in with surrounding text

Cascading & Inheritance

• CSS cascades from general to specific, and from top to bottom. The order of speficity from least to greatest is:
  • linked style sheets
  • imported/embedded style sheets
  • inline style sheets

Last Updated: Monday March 28, 2005 11:15 PM
Charles E. Oyibo
Web · E-mail