Special Content

The simplest kind of Web pages only contain text and graphics. Apart from the occasional animated GIF and links to other pages or Web, there’s very little in the way of multimedia content or user interaction. Unfortunately, the inclusion of such active content in Web pages can be tricky.

Firstly, multimedia material, in the form of movies, sound or music, employs a huge range of different file formats, many of which are proprietary systems. Worse still, the data inside such files is often compressed, requiring a suitable codec to be present on your machine.

Secondly, user interaction, which is frequently provided via Java or JavaScript, can be very dependent on your browser. In addition, the performance of Java relies on the quality of the Java Virtual Machine (JVM) that’s installed on your computer.

  Multimedia

To view multimedia content in your browser you must install the necessary browser plug-ins and ensure that they’re activated from within the browser’s Preferences window. In addition, if you need to deal with files that have unusual forms of compression, you may need to get extra codecs.

Multimedia is included in a Web page via href, object or embed tags, all of which are described in the following sections.

Using href Tags

You can easily include a multimedia file in a Web page by means of a standard link, as in this example, where the file called my_song.mid is a MIDI musical sequence:-

<a href="my_song.mid">My Song</a>

When you click on the My Song link the appropriate software springs into action. If QuickTime is used, the current page is replaced by the QuickTime controller, which lets you play the tune.

This kind of link can also be used to play a QuickTime movie, as shown here:-

<a href="my_movie.mov">My Movie</a>

Using object Tags

Although the simple links shown above work well enough they aren’t very flexible. The HTML 4.0 standard offers an alternative in the form of an object tag, which can be used as follows:-

<object data="my_movie.mov"type="video/quicktime"

    title="My Movie"width="150"height="150">

<param name="pluginspage"value="http://quicktime.apple.com/" />

<param name="autoplay"value="false" />

</object>

Unlike a simple link, the image doesn’t appear in a new window. Instead, the multimedia material, in this instance a QuickTime movie file called my_movie.mov, is played in the current window.

Note that the width and height values should match the size of the movie. You can find these measurements by opening the movie in QuickTime Player, and selecting Size under Movie ➡ Get Info. By default, our example shows the QuickTime controller, which has a height of 24 pixels. So, if your movie is 100 pixels high you should use a height value of 124.

The param tag with the pluginspage value, which indicates the Web location of the supplier of the plug-in, should always be provided, as this allows the user to quickly install the necessary software, should it be missing. You can also accommodate browsers that don’t accept the object data by adding extra text, as in:-

<object data="music.mp3"type="audio/mpeg"><em>MP3 Music File</em></object>

Using embed Tags

Unfortunately, the object tag described above isn’t supported by all browsers, so some Web sites fall back to the proprietary embed tag. Sadly, this isn’t recognised by Web page validation software, which means it can cause a perfectly good page to fail the test. The embed tag is used as follows:-

<embed src="my_movie.mov"width="150"height="150" />

This can be expanded to include extra attributes, as in:-

<embed src="my_movie.mov"width="150"height="150"

    controller="true"loop="false"autoplay="false" />

This should give exactly the same result as the example shown in the previous section. Once again, the value of the height attribute must include both the height of the controller and of the image. A MIDI musical sequence can be embedded into a page in the same way, using a line of the form:-

<embed src="my_song.mid"width="150"height="24"

    controller="true"loop="false"autoplay="true" />

with the height attribute, as shown, set to accommodate just the controller. Unfortunately, some browsers require a rather longer line, such as:-

<embed src="play_music.mov"width="150"height="24"

    controller="false"loop="false"autoplay="false"

    href="my_song.mid"target="myself" />

where play_music.mov is a special file containing a short-duration movie (ideally containing only one frame) that doesn’t employ a controller. To hear the actual music you must click on the image, which is then replaced by the standard QuickTime controller.

Background music can be included in a Web page by putting this at the start of the body section:-

<embed src="my_song.mid"hidden="true"autostart="true"loop="true" />

although recipients might prefer you to change the loop attribute and to use a short tune.

Embed Tag Attributes

The following list shows the attributes that can be included in the embed tag. Those that are shown in black should be replaced by an appropriate value.

hotspot n = "url"

This tag provides a hotspot in a QuickTime VR panorama, which points to the given URL. The value of n is the hotspot ID, as set by the QuickTime VR authoring application.

cache="true/cache/false"

An optional parameter, that allows some browsers, such as Netscape, to store movies in a cache. Using a value of true, which is the default state, has the same effect as cache.

volume="n"

An optional parameter, where n is an integer value between 0 and 256, that sets the sound level in a standard QuickTime movie. The default value is 256.

scale="tofit/aspect/n"

An optional parameter that ensures an image fits in the box given by the height and width attributes or is fitted while retaining its aspect ratio. A value of n can be used, such as 1.5, to scale the movie’s image size, although this can degrade the quality of a QTVR panorama. The default value is 1.

pluginspage="url"

An optional parameter that defines the location of the required plug-in, should it be missing. In the case of the QuickTime plug-in this is set to http://quicktime.apple.com/.

width="n"

A required parameter, where n is the width of the image in pixels, which should be greater than 2. If set to a value that’s smaller than the width of the movie, and you haven’t used a scale value, the image is cropped. If greater than the size of the movie, the image is centred in the available space.

height="n"

A required parameter, where n is the height of the image in pixels, which should be greater than 2. Should you want to include a movie controller, you must add 24 pixels to this value. If set to a value that’s smaller than the height of the movie, and you haven’t used the scale tag, the image is cropped. If greater than the size of the movie, the image is centred in the available space.

hidden="true/false"

An optional parameter that lets you hide a movie, usually one containing only a sound track. If you enter true you don’t have to specify the width and height attributes. By default, this is set to false.

autoplay="true/false"

An optional parameter that allows a standard QuickTime movie to be played as soon as enough data has been loaded into your browser. By default, this is set to false.

controller="true/false"

An optional parameter that enables the movie controller for a standard QuickTime movie. By default, this attribute is set to true.

loop="true/false/palindrome"

An optional parameter that makes a standard QuickTime movie play as a loop. Using palindrome makes the movie play alternately forwards and backwards. By default, this is set to false.

playeveryframe="true/false"

An optional parameter that forces the browser to play every frame in a standard QuickTime movie, although this may disable the sound tracks. By default, this is set to false.

href="url"

An optional parameter that directs your browser to the given URL whenever you click on a standard QuickTime movie. Relative paths should be given in relation to the value in the src attribute.

target="_self/_top/_parent/_blank/frame_name"

An optional parameter for a standard QuickTime movie that specifies the name of a frame that’s the target of the link given by the href attribute.

pan="n"

An optional parameter that sets the initial pan angle for a QuickTime VR movie. The value of n must be an integer covering the range of 0 to 360 degrees. By default, this is set to 0.

tilt="n"

An optional parameter that sets the initial pan angle for a QuickTime VR movie. The value of n must be an integer, typically in the range of -43 to 43 degrees. By default, this is set to 0.

fov="n"

An optional parameter that sets the initial field of view angle for a QuickTime VR movie. The value of n must be an integer, typically in the range of 5 to 85 degrees. By default, it’s 0, corresponding to the maximum possible zoom.

node="n"

An optional parameter that sets the initial node for a multi-node QuickTime VR movie. The value of n must be an integer. By default, this is specified when the pano movie is created.

correction="none/partial/full"

An optional item that sets the creation for a multi-node QuickTime VR movie. By default, this attribute is set to full.

  Director and Shockwave Flash

Both of these formats are the creation of Macromedia and are widely used for multimedia purposes. A Director file, which is identified by a filename extension of .dcr, .dir or .dxr, usually contains a conventional movie. The Shockwave Flash format, formerly known as the Futuresplash, is identified by a .swf extension. As well as interactive material, Flash accommodates both moving or stationary vector-based images, requiring less space than an equivalent GIF or JPEG file.

Both kinds of documents can be used in object and embed tags in the same way as any other material. For example, here’s how an object tag can be used with a Flash file:-

<object data="flash_movie.swf"type="application/x-shockwave-flash"

    title="My Movie"width="150"height="150">

<param name="pluginspage"value="http:www.macromedia.com/" />

<param name="autoplay"value="true" />

</object>

As you can see, the type attribute has the normal MIME type code for a Flash document, which means that the Shockwave Flash plug-in is used to view the file. However, you can often use the QuickTime plug-in to open documents of this kind, as in this example:-

<object data="flash_movie.swf"type="video/quicktime"

    title="My Movie"width="150"height="150">

<param name="pluginspage"value="http://quicktime.apple.com/" />

<param name="autoplay"value="true" />

</object>

Essentially, this is a ‘fiddle’, since the file has been given the type attribute for a QuickTime movie. This doesn’t seem to cause problems, although different plug-ins can give variations in appearance. And you can’t use this trick with all combinations of files and plug-ins, or within an embed tag.

Favicons

A favorites icon (favicon) or shortcut icon appears in the toolbar of a browser when a specific site is active. This kind of icon, originating from Windows, can also appear elsewhere, allowing you to easily return to the related site. Unlike the icons found on your computer, these images are obtained from the site itself and can’t be seen until the site has been visited.

Each favicon consists of a small image, 16 pixels square. 4-bit colour coding is used, accommodating only 16 colours. The file itself usually has the name favicon.ico and should be uploaded to the ‘root’ level of your Web server. As an option, you can also refer to it in the head area of Web pages, as in:-

<link rel="shortcut icon"type="image/x-icon"href="favicon.ico" />

In this instance, the favicon.ico file is in the same directory as the page itself. If necessary, you should replace this by a full URL of the form http://www.site_address.com/favicon.ico.

  JavaScript

JavaScript, when incorporated into a Web page, allows a page to respond to the user’s mouse clicks and can initiate sounds or pictures from within the recipient’s browser. The JavaScript language, which is a subset of Java (see below), originally appeared in the Netscape browser and is similar to Microsoft’s JScript system. Unlike full Java, it can’t use machine-specific resources such as files or serial devices, has limited access to other computers on a network and is implemented on the recipient’s computer rather than the machine that’s used as a Web server.

In common with other Web-based script systems, the programming code is normally contained within script tags. Having said this, simple instructions that only employ common scripting elements can also be used outside of a script section, as in this example:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Alert</title>

    <meta http-equiv="content-script-type" content="text/javascript" />

</head>

<body onload="window.alert('Welcome!');">

<p>

<a href="#"

    onclick="window.alert('This is a special message.');"

    onmouseover="window.status='This isn't a standard link.'; return true">

    Click here to see special message.</a>

</p>

</body>

</html>

which presents a dialogue containing Welcome! when the page is opened, and then generates a special message when you click on the text shown in the link. Note that the head section must contain the meta tag as shown, since this indicate the scripting language that’s used in the page.

Most JavaScript pages are more complex than this, containing real programming within the head or body sections of a page, or in both. In either case, this is usually in the form of:-

<script type="application/x-javascript"charset="iso-8859-1">

  <!--Script goes here-->

</script>

where the script itself is contained, as shown, in comment marks, so as to maintain compatibility with older non-JavaScript browsers. External JavaScript files can also be used, as in:-

<script src="myjava.js"type="application/x-javascript"charset="iso-8859-1">

  <!--'Fall-back' script goes here-->

</script>

where myjava.js is a text file containing the JavaScript instructions. The ‘fall-back’ script can be included if there’s a possibility of the separate file getting lost.

Here’s the head section of much more elaborate example containing four separate JavaScript functions, all of which are ‘called up’ from the body section of the document:-

<head>

<title>Dynamic Document</title>

<script type="text/javascript">

<!--

/*

    Dynamic Document

    Written by Jerry Aman, Optima System, Aug 2, 1996.

    Part of the PageSpinner distribution.

    You are free to use and modify this script,

    if the credits above are given in the source code

*/

// Function that gets hour of the day as integer

function getHourOfDay()

{

    var now = new Date();

    return(now.getHours() );

}

// Function that gets time in HH:MM format

function getTime()

{

    var now = new Date();

    var minutes = now.getMinutes();

    var divider = ":";

    if (minutes<10)

        divider = ":0";

    return( now.getHours() + divider + minutes );

}

// Function that returns 'true' if browser is running under Mac OS

function isMacintoshBrowser()

{

    return(navigator.appVersion.lastIndexOf('Mac') != -1 );

}

// Function that returns message depending on time of day

function sayHello ()

{

    document.write("It's <b>" + getTime() + "</b>, so I wish you" );

    if(getHourOfDay()<5 || getHourOfDay()>19)

        document.write(" a good night!");

    else

    {

        if ( getHourOfDay() <11)

        {

            document.write(" a good morning!");

        }

        else

        {

            document.write(" a good day!");

        }

    }

}

// -->

</script>

</head>

The matching body, shown below, generates the browser ID, the browser name, shows the time of day as a greeting and indicates if the user is running the Mac OS.

<body>

<h1>JavaScript Dynamic Document</h1>

<p>Browser ID: <b>

<script type="text/javascript">

    <!--

    document.write(navigator.userAgent)

    // -->

</script></b>

</p><p>

<script type="text/javascript">

    <!--

    document.write("Browser: ", navigator.appName," ",

    navigator.appVersion, ".")

    // -->

</script>

</p><p>

<script type="text/javascript">

    <!--

    sayHello()

    // -->

</script>

</p><p>

<script type="text/javascript">

    <!--

    if (isMacintoshBrowser() )

        document.write("Mac OS: Yes");

    else

        document.write("Mac OS: No")

    // -->

</script>

</p>

</body>

Fortunately, the above script section can be reduced to:-

<script type="text/javascript">

    <!--

    document.write("Browser ID: <b>", navigator.userAgent,"<\/b><p>Browser: ",

    navigator.appName," ",navigator.appVersion, ".<\/p><p>")

    sayHello()

    if (isMacintoshBrowser() )

        document.write("<\/p><p> Mac OS: Yes");

    else

        document.write("<\/p><p>Mac OS: No")

    // -->

</script>

Image Maps

Web sites often use a graphic for each link to another page or site. However, it’s also possible to create links that operate when you click on a particular part of a single image, employing a mechanism known as an image map. A server-side image map can be used, employing a script on the server machine, although most people use a client-side image map, which is faster and easier to create. Client-side maps are accommodated by browsers that support HTML 3.2 or later.

A client-side map can be created by tracing out the required area for each link using an application such as Mapper (Nisseb Software). The resultant HTML should look something like this:-

<map name="map" id="map">

    <area shape="circle" coords="284,27,26"

        href="circle_link.htm" alt="" />

    <area shape="poly" coords="123,51,158,2,194,51,123,51"

        href="triangle_link.htm" alt="" />

    <area shape="rect" coords="8,1,60,52"

        href="rect_link.htm" alt="" />

</map>

<img src="map_image.gif" usemap="#map" height="56" width="312" alt="" />

where circle_link.htm, triangle_link.htm and rect_link.htm are links activated by clicking on the circle, square and rectangle parts in the graphic in map_image.gif. Of course, you can also produce this kind of HTML by hand, if you’re so inclined.

This example sets the name attribute inside the map tag to map, which is then referred to from within the img tag. In XHTML 1.1 or higher, however, you must use the id attribute instead.

Coordinates

The horizontal (x) and vertical (y) coordinates of each area in a client-side image is given by the coords attributes. For a rectangle these are in the form of:-

coords="top-left_x, top-left_y, bottom-right_x, bottom-right_y"

where value such as top-left_x are replaced by the appropriate numbers. A circle are given as:-

coords="centre_x, centre_y, radius_x, radius_y"

and the points of a three-cornered polygon are specified clockwise round the shape using:-

coords="point 1_x, point 1_y, point 2_x, point 2_y, point 3_x, point 3_y"

The area shape can also be defined as any area outside of the other areas, as in:-

<area shape="default"href="default_link.htm"alt="" />

In this instance you don’t need to use any coords attributes.

Dynamic Fonts

Web pages are often restricted to the fonts that are available on the recipient’s computer. Dynamic fonts are different in that the required fonts, or the necessary data to create the fonts, is sent to the destination and used for viewing the current document. However, these fonts don’t remain available to the computer and can’t normally be used for other purposes.

Embedded OpenType

These fonts work with Internet Explorer 4 or higher, but not with many other browsers. Each embedded OpenType file contains a single OpenType font, is usually around 60 KB or greater in size and is identified by an .eot filename extension.

A special application, known as Web Embedding Fonts Tool or WEFT (Microsoft), is employed to convert each standard OpenType font into an .eot file and to create the required HTML code.

On opening a page that refers to such files, each .eot file is downloaded to the recipient’s machine and used to render the required characters. This means that the original fonts can be ‘pirated’ by those who view your site. The need to use a separate .eot file for each font can also slow down the display.

TrueDoc

TrueDoc fonts, as originally developed by Netscape, Bitstream and others, are used for Digital Video Broadcasting (DVB), cable-based television systems and the Internet. Unfortunately, the software created by Bitstream for generating the necessary files for the Web has been discontinued. In addition, browser support for TrueDoc is patchy, so its future on the Internet is in serious doubt.

Although supported by Netscape 4.01, these fonts don’t work in Netscape 6.x or Netscape 7.x. They also function in Internet Explorer 4 or higher, but only when used with the Windows operating system, apparently because the ActiveX control for this feature isn’t available in the Mac OS.

Several TrueDoc fonts can be kept in a single Portable Font Resource (PFR) file, which is identified by a .pfr filename extension. To create such fonts you’ll need a TrueDoc authoring program such as HexWeb Typograph (HexMac) for the Mac. This uses software known as a Character Shape Recorder (CSR) to compress the required fonts into a .pfr file.

When viewing a page, the .pfr file or files are rendered and cached in a similar way to Web images using software known as a Character Shape Player (CSP). Unlike, embedded OpenType files, however, the font itself isn’t sent to the recipient and is protected by Doc Lock technology.

Dynamic Fonts in an HTML Page

Here’s an example of how TrueDoc fonts can be included in a Web page:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

  "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">

<html>

  <head>

    <link rel="fontdef" hxburned src="test_fonts.pfr">

    <title>Test Document</title>

  </head>

<body bgcolor="#ffffff">

  <font face="trixie-plain" size="7" color="#000000">

    Here is the text.

  </font>

</body>

</html>

Note that the link tag directs the browser to a PFR file called test_fonts.pfr, which can contain one or more fonts, whilst the font tag refers to a specific font in this file by name. Unfortunately, the hxburned and src attributes are non-standard, so a page containing this would fail validation. The alternative font-size attribute, shown below, is also unique to Netscape and is again non-standard:-

<font face="trixie-plain" font-size="14" color="#000000">

Unlike the normal size attribute, this measures the font in points, so this would give 14-point text.

TrueDoc fonts can also be called up using a stylesheet, as in the following example. In this case the path to the required .pfr file, which could be a full URL, is fonts/page_fonts.pfr. This document contains both the Chianti Extra Bold font for h1 headings and Gothic 720 for the body text.

@font-face{font-family:"Chianti XBd BT";src:url(fonts/page_fonts.pfr);}

@font-face{font-family:"Gothic 720 BT";src:url(fonts/page_fonts.pfr);}

h1{font-family:"Chianti XBd BT";"arial","helvetica",sans-serif;font-weight:normal}

body{font-family:"Gothic 720 BT";"times new roman","times",serif;font-weight:normal}

The use of an embedded TrueType font can also be defined in a stylesheet, as in this example:-

@font-face{font-family:"Superfont";src:url(fonts/superfont.eot);font-weight:normal}

h1{font-family:"Superfont";"arial","helvetica",sans-serif;font-weight:normal}

If necessary, you can employ both embedded OpenType and TrueDoc fonts on the same page, although this is a bit messy, usually requiring a link tag in the HTML for the .pfr file, as in the first example above, and an .eot entry in the related stylesheet, as shown in the last example.

Dynamic Content

A Web page containing simple HTML instructions stays largely unchanged, whatever action taken by the recipient: in other words its content is static. In some situations, however, you may want the content to change according to the recipient’s actions: this is known as dynamic content, or as dynamic HTML (DHTML) when it’s created purely from within a Web page.

Although limited content of this kind can be built into a page using a Cascading Style Sheet (CSS), most Web site managers require more sophisticated mechanisms, many of which are highly technical and bristling with jargon. Fortunately, several of these systems can often be used alongside each other, providing a huge number of options for the potential site builder.

Common technologies for dynamic HTML include ActiveX, Java, JavaScript, JScript and VBScript, although only Java and JavaScript are accepted by all browsers, with the Document Object Model (DOM), as devised by the W3C, defining how the latter fit into an HTML page.

Other mechanisms operate from the Web site computer itself. These include Server Side Include (SSI), Common Gateway Interface (CGI), Java Servlet and Java Server Application Programme Interface (API) technology.

Server Side Include (SSI)

SSI technology provides basic dynamic content, although it isn’t fully standardised and gives problems with some Web servers. Each SSI item in your Web pages, also known as an included item, is stored on the server machine as an individual SSI file (identified by filename) or as a template. Anyone viewing a page that calls these files sees a normal document and is unaware that the SSIs exist. This also allows you to separate the structure from any regularly changing content.

Unlike other HTML material, you can’t see the effects of SSIs without having a server, although Mac OS X lets you observe the results locally. The Classic Mac OS comes with Persona! Web Sharing and, if you have your own server, you can create a separate area to display the results.

Here’s the body of an example HTML page that refers to three separate files:-

<body>

    <!-#include file="navig.htm"->

    <!-#include file="top.htm"->

    <!-#include file="main.htm"->

</body>

The contents of the navig.htm SSI file could be:-

<table width="100%"border="0">

    <tr valign="middle">

        <td align="left">Back</td>

        <td align="right">Forward</td>

    </tr>

</table>

In this instance the SSI filename ends in .htm, although other extensions, such as .htf are used. In any event, although the SSI file contains HTML, it doesn’t have the normal html, head, and body tags. It’s worth noting that further SSI files can also be called up from within a ‘parent’ SSI file.

Other ‘includes’ can be added to an HTML file to give a link to the last site you visited, as in:-

<a href="<!-#echo var="HTTP_REFERER"->">Last page</a>

or to indicate the current date and time, as in:-

<!-#echo var="DATE_LOCAL"->

The format of the latter can be modified by preceding it with:-

<!-#config timefmt="x"->

where x is actually a combination of codes, as shown in the following table:-

CodeDisplay CodeDisplay
%TTime (24-hour clock) %mMonth number
%rTime (12-hour clock) %BMonth name
%HHour (24-hour clock) %dDay of month
%IHour (12-hour clock) %yYear without century
%MMinute %YYear with century
%SSecond %ADay of week name
%PAM or PM   

Hence, the lines

<!-#config timefmt="%A, %B %d, %Y"->

Date: <!-#echo var="DATE_LOCAL"->

generate a date of the following form:-

Date: Monday, February 04, 2002

SSIs can also be used to indicate the size of a file prior to downloading, as in:-

<!-#fsize file="the_file.zip"->

To get the result in bytes you should precede this line with:-

<!-#config sizefmt="bytes"->

but to see the size in KB you should use:-

<!-#config sizefmt="abbrev"->

The following example gives the filename followed by Download (567k) for a 567 KB file:-

<!-#config sizefmt="abbrev"->

<a href="the_file.zip"> Download</a> (<!-#fsize file="the_file.zip"->)

Enhanced SSI

The above examples demonstrate how basic dynamic content can be provided, although enhanced SSI gives greater control. Typically, this form of SSI employs Microsoft’s Active Server Page (ASP) technology or the Hypertext Pre-processor (PHP) language. The latter looks similar to HTML, but uses special XML tags of the form <?…?> to contain the scripting elements.

Common Gateway Interface (CGI)

As the name implies, CGI provides a gateway between the various kinds of information stored on your server computer and the recipient of your pages. Unlike SSI, which can only present material via standard Web pages, CGI can also handle non-HTML data, including text, audio and multimedia files, all of which are identified by normal filename extensions or standard MIME file headers.

As with SSIs, the ‘active’ part of the process is on the server machine and is not contained in the Web pages. Instead, the required CGI script is ‘called-up’ from within the HTML document. Each script adds extra features to your site, such as a counter recording the number of visitors, a ‘guest book’ that callers can use to enter their comments or a mechanism to search your site for a particular word.

Here, for example, is a link that looks up the meaning of the word gestalt in Webster’s Dictionary:-

<a href="http://www.fwi.uva.nl/htbin/webster.cgi?gestalt">Meaning of gestalt</a>

Note that the URL of the script file is left of the ?, whilst the data passed to the script, in this case gestalt, is on the right.

Languages

CGI scripts can be written in any language, including C, C++, Fortran, Perl (Practical Extraction and Reporting Language), TCL, Unix shell, Visual Basic and AppleScript.

Any source code files for scripts that are created using a programming language, such as C, C++, Fortran or Visual Basic, must go in the folder on your server called cgi-src. Any such script that has been compiled, so as to create an application suitable for running on your server’s operating system, should be placed in the folder called cgi-bin. In addition, any script originally created using a scripting language, such as Perl, TCL, Unix shell and AppleScript, none of which require compilation, should be placed directly in the cgi-bin folder.

Alternatives to CGI

Several systems are used in place of CGI scripts. These include Microsoft’s Active Server Page (ASP) technology, as well as JSP (see below). ASP.NET is a variation of ASP based on .NET, a selection of server-based services available to virtually any Web browser on any computer platform. It employs the .NET Framework class library, as used for building Web-based applications.

Some sites use ColdFusion to provide Web access to databases and other information. This application employs ColdFusion Markup Language (CFML) to transfer requests from the Web to ColdFusion, a typical HTML entry being of the form …index.cfm?site=maritime.

Java

Java is a cross-platform programming language developed by Sun Microsystems. Any machine that’s used for running Java applications must be equipped with special software package known as the Java Virtual Machine (JVM), which creates a virtual computer compatible with Java applications.

Ideally, the JVM should conform to the specification of the Java Development Kit (JDK), as devised by Sun Microsystems. It’s also important to note that Java applications can be used on both a Web server computer and on the computer that’s used by the recipient of a Web page.

The Java Virtual Machine

The virtual machine translates Java instructions into a form that’s understood by your particular computer. Although this makes the language incredibly versatile, especially for operation over the Web, it does require fast hardware. By its nature, Java doesn’t execute anything directly. Instead, all instructions are translated into code, and that takes time. Modern forms of JVM use Just in Time (JIT) technology, which translates each instruction, runs the code and retains it for a time in case it’s required again. This avoids any need for a second translation, so speeding up the process.

Older versions of Internet Explorer on the Classic Mac OS use either Microsoft’s own MS Virtual Machine (with JIT) or Apple’s Mac OS Runtime for Java (MRJ). The original MS VM was faster than MRJ, although the modern form of the latter, which has its own JIT technology, is a vast improvement. As a bonus, MRJ comes with Apple’s Applet Runner application. Fortunately, things have now become much simpler, since modern versions of Explorer can only work with MRJ. Netscape Navigator 4.0 uses its own JIT technology, although this is slower than MRJ 2.0.

To use Java with your browser you should ensure that your computer has the necessary files, and, in the case of Netscape, that all of the appropriate folders and files are included with the application. If not already enabled you should also check that the appropriate JVM is activated in the browser.

Incorporating Java in a Page

Ideally, Java content should be included in a Web page using an object tag, as in:-

<object classid="DrawTest.class"codetype="application/java"

    width="400"height="400"></object>

<a href="DrawTest.java">The source.</a>

where DrawTest.class, containing Java code and known as a class file, is at the same level as the page itself. Note that the reference to such a filename is case-sensitive, so you may prefer to use lowercase names throughout. This example also lets the user read the contents of the appropriate Java source file, which in this instance is called DrawTest.java, although this file isn’t actually needed to make the code work, since this exists in compiled form in DrawTest.class. The name of the source file isn’t normally case-sensitive, although some systems, such as Unix, make a distinction.

Unfortunately, some browsers don’t yet support the modern object tag shown above, so you may have to use the deprecated applet tag, as shown here:-

<applet code="DrawTest.class"

    width="400"height="400"></applet>

<a href="DrawTest.java">The source.</a>

In more complicated Java examples the object or applet element can also contain param tags that convey values for extra attributes, as in this example:-

<object classid="Chart.class"width="251"height="125">

    <param name="c2_color"value="green" />

    <param name="c2_label"value="Q2" />

</object>

Java Server Page (JSP) Technology

Although strictly outside the scope of this article, JSP must be mentioned, as the content of a JSP file is basically HTML. Also known as the Java Servlet application programming interface (API), JSP gives control over the appearance or content of a page before it’s sent from the server.

A JSP file is normally identified by a .jsp filename extension. It contains static data in the form of HTML, SVG, WML or XML text, plus dynamic content in the form of JSP elements, such as:-

<jsp:xxx…/>

where xxx includes the name of a servlet file, which has a .java filename extension. These servlet files must be in a specific directory on the server, although the .jsp files can go anywhere.

Java Server Application Programme Interface (API)

This is a more advanced mechanism that allows different application programming interfaces (APIs) to be added to your server machine, along with the JSP and Java servlets described above. The most common APIs are the Java Transaction API (JTA) and Java Message Service (JMS), the files of which have a .jta and .jms filename extensions respectively.

Modern sites often use a server based on Java 2 Platform, Enterprise Edition (J2EE), such as JRun J2EE Server (Macromedia). The J2EE standard also supports Enterprise Java Beans (EJB). Lesser versions of the Java 2 standard include Java 2 Platform, Standard Edition (J2SE) and Java 2 Platform, Micro Edition (J2ME).

References

ATPM, article by Andrew Ladd

HexWeb Typograph manual, HexMac Software Systems, 1997

©Ray White 2004.