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.
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
embed tags, all of which are described in the following sections.
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:-
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
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
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 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:-
height attribute, as shown, set to accommodate just the controller. Unfortunately, some browsers require a rather longer line, such as:-
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
although recipients might prefer you to change the
loop attribute and to use a short tune.
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.
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.
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
An optional parameter, where
n is an integer value between
256, that sets the sound level in a standard QuickTime movie. The default value is
An optional parameter that ensures an image fits in the box given by the
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
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
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.
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.
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
height attributes. By default, this is set to
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
An optional parameter that enables the movie controller for a standard QuickTime movie. By default, this attribute is set to
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
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
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
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
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
360 degrees. By default, this is set to
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 degrees. By default, this is set to
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
85 degrees. By default, it’s
0, corresponding to the maximum possible zoom.
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.
An optional item that sets the creation for a multi-node QuickTime VR movie. By default, this attribute is set to
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
.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
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
paramtags into pages that refer to Director or Flash files. Unfortunately, browsers use the
embedtags to recognise other things. For example, Netscape uses
embedfor movies or other ‘plug-in’ media whilst Internet Explorer uses the
objecttag for ActiveX controls.
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
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
Click here to see special
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.
body sections of a page, or in both. In either case, this is usually in the form of:-
＜!--Script goes here--＞＜/script＞
scripttag can include an extra
body section of the document:-
Written by Jerry Aman,
// Function that gets hour
var now = new Date();
// Function that gets time
var now = new Date();
var divider = ":";
divider = ":0";
// Function that returns
// Function that returns
function sayHello ()
if ( getHourOfDay() ＜11)
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.
＜p＞Browser ID: ＜b＞
if (isMacintoshBrowser() )
document.write("Mac OS: Yes");
document.write("Mac OS: No")
Fortunately, the above
script section can be reduced to:-
if (isMacintoshBrowser() )
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"＞
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.
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
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.
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 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
.pfrfile is usually smaller than the equivalent
.eotfile or files.
.pfrfile 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.
Here’s an example of how TrueDoc fonts can be included in a Web page:-
＜!DOCTYPE HTML PUBLIC
Here is the text.
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
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
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.
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.
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.
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:-
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
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:-
x is actually a combination of codes, as shown in the following table:-
|%T||Time (24-hour clock)|
|%r||Time (12-hour clock)|
|%H||Hour (24-hour clock)|
|%I||Hour (12-hour clock)|
|%P||AM or PM|
|%d||Day of month|
|%y||Year without century|
|%Y||Year with century|
|%A||Day of week name|
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:-
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.
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:-
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 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
.plor the universal
.cgiextension. Similarly an AppleScript applet may use
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
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 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.
Ideally, Java content should be included in a Web page using an
object tag, as in:-
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
applet element can also contain
param tags that convey values for extra attributes, as in this example:-
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:-
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.
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
.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).
ATPM, article by Andrew Ladd
HexWeb Typograph manual, HexMac Software Systems, 1997
©Ray White 2004, 2021.