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.

• Most plug-ins let you view material from within the browser window itself, often as an element within the parent page. Unfortunately, some file formats require a special viewing application. This is usually launched automatically and shows the content after a short delay.
• The QuickTime plug-in, as well as the associated applications and other files, lets you view and listen to a huge number of multimedia formats in both the Mac OS and in Windows.
• Plug-ins for the Classic Mac OS are kept in the Internet Plug-ins folder, inside the System Folder. Additional codecs for QuickTime must go in the QuickTime Extensions folder, inside the Extensions folder, again in the System Folder. To view Shockwave Director content you’ll also need the Macromedia folder and files in the Extensions folder.

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:-

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:-

• When preparing a movie for use on the Web with QuickTime Player you should select the Make movie self contained and Playable on non-Apple computers options.

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:-

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:-

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:-

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

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:-

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

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:-

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.

Director and Shockwave Flash

Both of these formats are the creation of Macromedia and have been widely used in the past for multimedia purposes, although they’re outdated and should never be used in a modern website.

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:-

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:-

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.

• To avoid complications, the Flash files associated with an HTML page are usually best placed in the same folder as the page itself.
• Authoring applications such as Dreamweaver insert object, embed and param tags into pages that refer to Director or Flash files. Unfortunately, browsers use the object and embed tags to recognise other things. For example, Netscape uses embed for movies or other ‘plug-in’ media whilst Internet Explorer uses the object tag for ActiveX controls.

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:-

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.

• JavaScript can be used on any type of computer, assuming the necessary software has been installed. It rarely slows down a recipient’s browser, except when there’s a coding fault.
• As with all executable code, JavaScript can compromise security or convey a virus.

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:-

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:-

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:-

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.

• The script tag can include an extra language attribute, which can be used specify a particular version of JavaScript. Unfortunately, this is deprecated and can cause validation to fail.

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:-

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.

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

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:-

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:-

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

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

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

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.

• Browsers that don’t support dynamic fonts can display the pages that contain them, although default fonts or alternatives suggested in the Web pages are used for presentation.
• Dynamic fonts aren’t usually available on 680x0-based Macs.
• You may need to enable dynamic fonts in your browser. For example, in Netscape you must choose Appearance ➡ Fonts in the Preferences window and click on Use document specified fonts including Dynamic Fonts.

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.

• A PostScript Type 1 font can’t be converted into an .eot file.

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.

• Not all fonts are approved for embedding in a .pfr file.
• A .pfr file is usually smaller than the equivalent .eot file or files.
• The use of a single .pfr file for several fonts makes this format particularly efficient.

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.

• System administrators should note the following for .pfr files:-
  • MIME Type: application/font-tdpfr
  • Gopher Type for Windows NT server: 5:REG_SZ:
  • Entire key: application/font-tdpfr,pfr,5:REG_SZ:

Dynamic Fonts in an HTML Page

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

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:-

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.

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

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.

• Microsoft are responsible for some of these technologies, including ActiveX, formerly known as Object Linked Embedding (OLE) Controls, JScript, a variation of the JavaScript language, and VBScript, which has the full name of Visual Basic Scripting Edition.

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.

• HTML files whose content is modified by a server prior to downloading, including those referring to SSIs, are often identified by a filename extension of .shtml or .shtm.

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

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

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:-

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

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

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

Hence, the two lines

generate a date of the following form:-

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

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

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

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

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.

• To use CGI you must have a CGI-enabled Web server.

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:-

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.

• CGI scripts can pose a risk to the security of data and are not allowed by some ISPs.
• You can create scripts yourself, although most people obtain them ready-made.
• Enhanced CGI provides extra features, although it may not work on all servers.

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.

• The filename extension used for a CGI script is set by your server and needn’t relate to the language used in its creation. For example, a script made using Perl may have an extension or .pl or the universal .cgi extension. Similarly an AppleScript applet may use .acgi or .cgi.

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.

• You may find that enabling Java slows down your browser application. If this is a problem, and you don’t really need Java, you can simply disable it in the browser.
• Unlike JavaScript, the full version of Java has access to all of your machine’s resources, posing a greater threat to security and an increased risk of of damage from a virus.

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.

• Older versions of MRJ don’t work with some online banking services.

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.

• In the Classic Mac you must have the MRJ Libraries folder in the Extensions folder, inside the System Folder.

Incorporating Java in a Page

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

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:-

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:-

References

ATPM, article by Andrew Ladd

HexWeb Typograph manual, HexMac Software Systems, 1997

©Ray White 2004, 2021.