Quick Introduction to HTML
Plugins and Embedded Objects
Overview
Many web pages have dynamic content that behaves in very complex ways that are beyond the capabilities of Dynamic HTML. Typically, such content is in the form of an embedded object that is handled by a browser plugin. A browser plugin is a package of computer files that can be added to the browser to give it different capabilities.
While these objects are not properly part of HTML, references to them are embedded in web page using HTML, which has special tags just for this purpose.
Before you invest in plugin technologies for your web page, consider that doing so will make the page unusable on many systems. By definition, these technologies require software that are not part of the browser, and which may not be installed on your user’s machine. Furthermore, the user may have an older version of the plugin which might not have the capabilities you want.
Common uses of browser plugins are:
- on-line games
- very flashy, interactive, dynamic page content
- interactive visualization of graphical data
This page will not teach you how to create such plugin objects (which involves bona fide computer programming). It is intended to familiarize you with some of the concepts and technologies involved, and with the strengths and weaknesses of some of the technologies.
Object and MIME type
The HTML tags responsible for embedding objects in web pages have changed a lot since the beginning of the web. In a sense, images are embedded objects, and they were always a part of HTML. Several new types arose, with some confusion about the corresponding tags. Since HTML 4 there has been a standard way to embed objects in web pages, and this is now widely supported, and preferred.
The next kind of embedded object was the applet, which
is usually a Java program that runs on the user’s computer when
they view the page that embeds the applet. To embed a Java
applet in a web page, you use the <applet>, with
attributes that explain where to get the binary file for the applet,
and how to run it. See below for details.
By this point, it had become obvious that a general mechanism was
needed to embed such objects. Netscape supported an
<embed> tag for this purpose. One still sees
pages on the web that use this tag, and several browsers support it.
Since HTML 4, the standard tag used to embed an object in a web
page is the <object> tag. It is very flexible,
and unfortunately, has a complicated set of attributes.
Some of the attributes specify the MIME type of the data
included by the object, so that the browser can determing how to
deal with it. For instance, the MIME type of Scalable Vector
Graphics (SVG) is image/svg+xml. To include SVG in
a web page, one indicates the SVG file name and this type:
<object data="diode.svg" type="image/svg+xml" width="256" height="280" alt="illustration of diode" />
How the browser handles this, depends on the browser. Recent versions of Mozilla-based browsers, such as Firefox, handle SVG natively. Other browsers may require a browser plugin to handle the image.
Browser plugins
Adobe (prev. Macromedia) Flash
Probably the most common browser plugin technology today is Adobe’s Flash. It is a audio-visual environment that allows a designer to precisely coordinate the movement of graphics with the playing of sound, as well as handle input from the user.
The browser plugin for Flash is called Adobe Flash Player; it can be downloaded for free from Adobe’s web site. It is available for Microsoft Windows, Apple MacOS, and Linux, as well as other flavors of Unix.
The development environment needed to make a new Flash object is commercial and costs some money. To use it, you don’t have to be exactly a computer programmer, but it does take some study and experience.
Scalable Vector Graphics
SVG is the long-awaited web standard means of including “vector graphics” into web pages. In vector graphics, the parts of the image are described as objects, e.g. lines, circles, curves, with colors, textures, etc, as opposed to being described pixel-by-pixel as in pixmap images such as GIF, JPEG.
For certain applications, primarily line drawings, vector graphics have huge advantages over pixmaps. For one thing, they can be scaled to any size without losing their sharpness. Also, they can encode some kinds of data much more compactly than a pixmap can.
As of this writing, some modern browsers support SVG natively, while others require a browser plug-in.
Sun Microsystems Java
Java is a full-blown computer applications programming language, together with a platform-independent environment (called a virtual machine or VM) within which Java programs run. This makes it a very flexible tool for making interactive web content.
The Java plugin and "runtime environment" (JRE) are widely available, and can be freely downloaded from Sun’s web site.
Anybody can put an existing Java applet in a web page. All the tools required to make a new Java applet can be found in freely available Java development kits (JDK). However, to make a Java applet with new capabilities, somebody has to be a computer programmer.
A Java object in a web page is called an applet. An applet resides in a rectangle of fixed size in the body of the document.
It should be pointed out that the use of Java is not restricted to web page applets: Java applications can run independently of a web browser.
Security restrictions
Java has full networking and file system capabilities built in, but in an applet these capabilities are severely limited for security reasons. The most important limitations are that an applet
- cannot read or write to the user’s file system
- can communicate over the Internet only with the site from which the applet was downloaded
The reason for these limitations is easy to understand, considering the context. An applet could be hiding in any web page, so if you accidentally hit one while you’re browsing, you don’t want it to have access to your hard disk. Also, you don’t want it to begin transmitting information from your computer to everyplace on the Internet.
Java Applets in HTML
To put an applet in a web page, you need two things:
- a file (or files) containing the Java binary for the applet
- a tag in your web page referring to the Java binary.
Java binaries can come in a couple of forms, as multiple .class files or as a single .jar (Java archive) file. A Java archive file is a convenient way of packaging multiple class files; because of this it is the preferred way of packaging an applet.
<applet code="org.smith.MyApplet" archive="appletname.jar"
width="640" height="480"
alt="The Applet won’t work because you don’t have Java">
<param name="nameA" value="valueA" />
.
.
.
</applet>
The attribute archive="appletname.jar" must
specify the jar file which contains the Java code of the applet. This
file must be on the same site as the web page file, and is typically
in the same directory.
The attribute code tells Java
where within the archive file to find the code that is to be executed.
(It is possible for one jar file to contain several different applets.)
The attributes height and width are in pixels,
and they are mandatory: an applet cannot set its graphical size.
The alt attribute is of course a courtesy to users who don’t
have a Java plugin installed; in such a case its value is displayed in
place of the applet.
Between the applet begin and end tags may be multiple param
tags. These are specific to the applet in question, and may be used to
specify some initial behavior of the applet.
JavaScript / Java
It is possible for other objects in the web page to communicate with a Java applet. This capability is something that must be already built into the applet. It can be used to provide, for example, a means by which a web page designer can customize the user interface of the applet without re-writing the Java code.
To permit a Java applet access to JavaScript, you should add
the attribute MAYSCRIPT to the applet tag.
To refer to an applet from within JavaScript, the attribute
id="theAppletID" needs to be added to the
applet tag. JavaScript will refer to the applet by means of the
id value.