Congratulations. You've got HTML under your belt, and you're ready to graduate from the school of Web publishing and enter the real world of Web development. The World Wide Web of the past was simply a way to present information, and browsing wasn't too different from sitting in a lecture hall, watching a blackboard, or staring at an overhead projector screen. But today's Web surfer is looking for interactive, animated sites that change with each viewer and each viewing.
To achieve that level of interactivity, this chapter introduces a number of ways you can go beyond passive text and graphics into the dynamic world of modern Web site development.
It would take a book many times the length of this one to teach you all the scripting and programming languages that can be used to create interactive programs for the Web. However, you can easily learn the HTML to incorporate prewritten programs into your Web pages. To Do: Reading this chapter will give you enough information to decide what types of programs or scripts might be best for your Web site. If you decide to take the leap into actually using some (or even creating your own) on your pages, you should look to the following resources:
Until very recently, there were only two ways to enhance the functionality of a Web browser. You could write and place programs on the Web server computer to manipulate documents as they were sent out, or you could write and install programs on the user's computer to manipulate or display documents as they were received.
You can still do both of these things, and they may still be the most powerful and flexible means of enhancing Web pages. Unfortunately, both involve a high level of expertise in traditional programming languages (such as C++) and knowledge of Internet transfer protocols and operating system architecture. If you're not fortunate enough to already be an experienced UNIX or Windows programmer, as well as something of a Net guru, you're not going to start cranking out cool Web applications tomorrow (or the next day, or the next...).
On the server side, simplified scripting languages like Perl can flatten the learning curve quite a bit. Many people who don't consider themselves real programmers can hack out a Common Gateway Interface (CGI) script to process Web forms or feed animations to a Web page without too many false starts. With visual programming tools such as Visual Basic, you can learn to produce a respectable client-side helper application fairly quickly as well.
But there is an easier way, and because this chapter is intended to take you on the fast track to Web development, I have to recommend that you avoid the old ways until you run into something that you just can't accomplish any other way.
Before dashing into the inside lane, though, I do need to tell you about one very new way to enhance the Web that is not any easier than the old ways. It is, however, even more powerful when used well. I'm referring to Netscape Navigator plug-ins, which are custom applications designed especially to extend Netscape's capabilities. The Live3D, LiveAudio, and LiveVideo capabilities that are built in to Netscape Navigator 3.0 are actually accomplished through plug-ins, for example.
You're probably familiar with some of the more popular plug-ins, such as Shockwave and Acrobat. Because these programs (which are usually written in C++) have direct access to both the client computer's operating system and Netscape's data stream, they are usually faster, more user-friendly, and more efficient than any other program you can create. They can draw directly to the Netscape window, making their output seem as though it were embedded into a Web page, or they can process invisibly in the background.
All this power comes at a price, however. The user must manually download and install your plug-in, and you must write a completely separate plug-in for every operating system you want to support. And woe betide you if your plug-in is distributed with a bug in it. Because plug-ins run at the machine level, they can easily crash Netscape and/or the user's computer if they malfunction.
Therefore, developing plug-ins is not for the faint of heart. Yet the lure of power has seduced many a programmer before, and if you can call yourself a "programmer" without blushing, you too may find it well worth the effort. All in all, writing and debugging a plug-in is still considerably less daunting than developing a full-blown business application.
Suppose you just want your Web order form to add up totals automatically when customers check off which products they want. This is not rocket science. Implementing it shouldn't be either. You don't want to learn UNIX or C++ or the Windows 95 Applications Program-ming Interface. You don't want to compile and install half a dozen extra files on your Web server, or ask the user to download your handy-dandy calculator application. You just want to add up some numbers. Or maybe you just want to change a graphic depending on the user's preferences, or the day of the week, or whatever. Or maybe you want to tell a random joke every time somebody logs on to your home page. Until now, there really was no simple way to do these simple things.
JavaScript gives you a way. OK, so it's still programming. But it's the kind of programming you can learn in an afternoon, or in an hour if you've fooled around with BASIC or Excel macros before. It's programming for the rest of us. JavaScripts go right into the HTML of your Web pages, wherever you want something intelligent to happen. For example, the code to add up an order form might look like Figure 20.1.
Figure
20.1. JavaScript allows you to include
simple programming directly in an HTML document.
Though the code in Figure 20.1 is unrealistically simple for any real company's order
form (most companies would like at least the address and phone number of the person
placing the order), it is a completely functional JavaScript-enhanced Web page. Figure
20.2 demonstrates what the form would look like after a user entered the number 3
in the left box. The number 75 in the right box is computed automatically.
Figure 20.2. The JavaScript in Figure 20.1 produces this form, which adds up the total based on the number of widgets you enter.
Even if you don't immediately understand the exact syntax of each JavaScript statement, it should be obvious that it is much easier to learn than any other way to accomplish the same thing. Most programmers could probably customize and expand the page in Figure 20.1 quite a bit without knowing anything whatsoever about JavaScript. What's more, this page works on any server and any JavaScript-enabled browser on any operating system.
Even if you don't do programming at all, you may find a JavaScript that can be incorporated into a Web page of your own with little or no modification. Use Figure 20.1 as a guide for placing the JavaScript elements where they should go; generally, functions go in the <HEAD> area, preceded by <SCRIPT LANGUAGE="JavaScript">, and followed by </SCRIPT>. The parts of the script that actually carry out the actions when the page is loaded go in the <BODY> part of the page, but still need to be set aside with the <SCRIPT> tag. Sections of script that respond to specific form entries go in the <INPUT> tag, with special attributes such as ONCURSOR.
Time Saver: For maximum compatibility with older Web browsers, you can put the old comment tag <!- just after the <SCRIPT> tag, and put -> just before </SCRIPT>. This will hide the script from any browser too old to recognize the <SCRIPT> tag.
You can also put JavaScript into a separate file by putting the name of that file in a SRC attribute within the <SCRIPT> tag, like this:
<SCRIPT LANGUAGE="JavaScript" SRC="bingo.htm"></SCRIPT>
This is especially handy when you are using a script that someone else wrote and you don't want it cluttering up your HTML. Some parts of the script, such as JavaScript attributes of form <INPUT> tags, may still have to go in your HTML document, however.
Just A Minute: Note that Netscape and Microsoft have slightly different--and often incompatible--implementations of JavaScript (Microsoft officially calls theirs Jscript). The Web sites at http://home.netscape.com and http://www.microsoft.com are the best place to find out about the exact differences. You'll also find links to JavaScript learning resources at http://www.mcp.com/sams/books/235-8/hotlist.htm.
JavaScript does have its drawbacks and limitations. For any high-volume data or image-processing work, it would be too slow. Complex applications of any kind are poorly suited for inclusion in HTML pages. There are only so many lines of code you want to wade through to see the Web page itself.
When you outgrow JavaScript, does that mean you'll need to return to server-side scripting or applications programming? No. JavaScript is just the baby sister of a more robust and powerful language called Java. Like JavaScript, Java is especially designed for the Web. And like JavaScript scripts, Java programs install and run automatically whenever a Web page is loaded. However, unlike JavaScript, Java programs are compiled into a more compact and efficient form (called bytecodes) and stored in a separate file from the Web pages that may call them.
Java also includes a complete graphics drawing library, security features, strong type check-ing, and other professional-level programming amenities that serious developers need. The biggest limiting factor with Java mini-applications (called applets) is that they must be small enough so that downloading them won't delay the display of a Web page by an intolerable amount. Fortunately, Java applets are extremely compact in their compiled form and are often considerably smaller than the images on a typical Web page.
Best of all, the syntax of Java is nearly identical to JavaScript, so you can cut your teeth on JavaScript and easily move to Java when you need or want to.
You'll find many ready-to-use Java applets on the Web, and Figure 20.3 shows how to include one in a Web page. The following HTML inserts a Java applet named RnbText.class (which must be placed in the same directory as the Web page) with the <APPLET> tag. This applet makes some text wiggle like a wave while rainbow colors flow through it, as shown in Figure 20.4.
<APPLET CODE="RnbText.class" WIDTH=580 HEIGHT=50> <PARAM NAME="text" VALUE="H a w a ii's C o m p u t e r N e w s"> </APPLET>
The WIDTH and HEIGHT attributes do just what you'd expect them to--specify the dimensions of the region on the Web page that will contain the applet's output. The <PARAM> tag is used to supply any information that the specific applet needs to do its thing. The NAME identifies what information you're supplying to the applet, and VALUE is the actual information itself. In this example, the applet is designed to display some text, so you have to tell it what text to display.
Every applet will require different settings for the NAME and VALUE attributes, and most applets require more than one <PARAM> tag to set all their options. Whoever created the applet will tell you (usually in some kind of readme.txt or other documentation file) what NAME attributes you need to include, and what sort of information to put in the VALUE attributes for each NAME.
Note that in Figure 20.3, the same applet is used twice on the page. This is quite efficient, because it will only need to be downloaded once, and the Web browser will then create two copies of it automatically. Figure 20.4 shows a still snapshot of the resulting animated Web page.
Figure 20.3. Java applets are pre-written programs that you place on your Web page with the <APPLET> tag.
Just A Minute: In the near future, the standard tag for inserting a Java applet on a Web page will change from <APPLET> to <OBJECT>. You'll read more about that change in Chapter 24, "Preparing for the Future of HTML."
Figure 20.4. The <APPLET> tags in Figure 20.3 insert a pro-gram to draw wiggly, colorful animated text on the page.
For quite some time, Microsoft Windows has included a feature called object linking and embedding (OLE), which allows all or part of one program to be embedded in a document that you are working on with another program. For example, you can use OLE to put a spreadsheet in a word processing document.
When the Internet explosion rocked the world in the mid-90's, Microsoft adapted their OLE technology to work with HTML pages online and renamed it ActiveX. Everybody likes to invent their own jargon, so ActiveX programs are called controls rather than applets.
Though ActiveX is touted as the main competitor of Java, it actually isn't a specific programming language. It's a standard for making programs written in any language conform to the same protocols, so that neither you, the Web page author, nor the people who view your pages need to be aware of what language the control was written in. It just works, whether the programmer used VisualBasic, VBScript (a simplified version of VisualBasic), C++, or even Java.
It's not surprising that support for the Microsoft ActiveX protocol is built into Microsoft Internet Explorer 3.0. For users of Netscape Navigator 2.0 and 3.0 to be able to see ActiveX controls, they need to download and install a plug-in from Ncompass Labs (http://www.ncompasslabs.com).
Just A Minute: Version 4.0 of Netscape Navigator hasn't been released as of this date, but Netscape is promising that it will have some limited support for ActiveX built-in. Note, however, that ActiveX controls will still only work on Windows and Macintosh computers. Also, ActiveX controls must be separately compiled for each different operating system.
Because ActiveX is the newest of the technologies discussed in this chapter, you must use the new <OBJECT> tag to insert it into a page.
As Figure 20.5 shows, an ActiveX <OBJECT> tag looks rather bizarre. Here's the relevant HTML from that page:
<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="cntrl"> <PARAM NAME="ALXPATH" REF VALUE="cntrl.alx"> </OBJECT>
The bizarre part is the CLASSID attribute, which must include a unique identifier for the specific ActiveX control you are including. If you use an automated program such as Microsoft's ActiveX Control Pad to create your ActiveX pages, it will figure out this magic number for you. Otherwise, you'll need to consult the documentation that came with the ActiveX control to find the correct CLASSID.
As if the long string of gibberish in CLASSID wasn't enough, the ID attribute must include another unique identifier, but this time you get to make it up. You can use any label you want for ID, as long as you don't use the same label for another ActiveX control in the same document. (ID is used for identifying the control in any scripts you might add to the page.)
Time Saver: If you are something of a whiz with Windows, you can look in the Windows class registry for the CLSID in HKEY_CLASSES_ROOT. If the previous sentence makes no sense to you, you'll need to rely on the person who wrote the ActiveX control (or an automated Web page authoring tool) to tell you the correct CLASSID.
The <PARAM> tags work the same with <OBJECT> as discussed earlier in this chapter with the <APPLET> tag. It provides settings and options specific to the particular ActiveX control you are placing on the Web page, with NAME identifying the type of information, and VALUE giving the information itself. In the example from Figure 20.5, the REF attribute indicates that the <PARAM> tag is specifying the location of the ActiveX control itself. No other <PARAM> parameters are needed by this particular control.
Notice that nothing in the HTML itself gives any clue as to what the ActiveX control
on that page actually looks like or does. Only when you view the page, as in Figure
20.6, do you see that it is a nifty little program to mix custom colors by combining
red, green, and blue brightness settings.
Figure
20.5. The <OBJECT> tag
on this page embeds an ActiveX control.
Figure 20.6. The ActiveX control on this page is a program for mixing custom colors, though you wouldn't know it by looking at the HTML in Figure 20.5.
Neither Figure 20.5 nor Figure 20.6 reveal what language the person who created the ActiveX control used to write it. If you opened the cntrl.alx file itself, you'd see that Ken Cox used a version of VisualBasic specifically designed for Web page use, called VBScript. I'll spare you the rather lengthy source code listing here, but you can find this and other controls by Ken Cox at
http://www.rose.com/~kencox/index.html
Coffee Break: This and the previous chapter have introduced a whirlwind of different options for adding cutting-edge multimedia and programming to your Web site. For an example of how to use multimedia and interactive elements with discretion (and, in some cases, "gee-whiz" abandon), meet the latest incarnation of the 24-Hour HTML Café at
You may find it difficult to distinguish the custom programming from the more traditional animation and HTML tricks, which is exactly as it should be in a well-balanced, integrated site. Always try to leave your audience free to experience the content of the site, rather than trying to awe them with your high-tech prowess. (Okay, okay, so there's just a little too much high-tech prowess visible at the HTML Café. That's okay in a site that's trying to teach HTML, but try to show a little more restraint than I did, and stick to only one or two types of interactive media!)
This chapter has given you a brief outline of the three types of interactive programming that are easiest to add to your Web site: JavaScript, Java applets, and ActiveX controls. It also discussed the difference between these technologies and more traditional server-side scripting and Netscape plug-ins.
You didn't get enough technical stuff in this short chapter to write your own programs and scripts, but you did learn the basic HTML to insert prewritten ones into your Web pages.
Table 20.1 summarizes the tags covered in this chapter.
Table 20.1. HTML tags and attributes covered in Chapter 20.
| Tag | Attribute | Function |
| <!-- ... --> |
|
The old way to create comments. Can also be used to hide JavaScript from browsers that do not support it. |
| <SCRIPT> |
|
An interpreted script program. |
|
|
LANGUAGE="..." | Currently only JAVASCRIPT is supported by Netscape. Both JAVASCRIPT and VBSCRIPT are supported by Microsoft. |
|
|
SRC="..." | Specifies the URL of a file that includes the script program. |
| <APPLET> |
|
Inserts a self-running Java applet. |
|
|
CLASS="..." | The name of the applet. |
|
|
SRC="..." | The URL of the directory where the compiled applet can be found (should end in a slash / as in "http://mysite/myapplets/"). Do not include the actual applet name, which is specified with the CLASS attribute. |
|
|
ALIGN="..." | Indicates how the applet should be aligned with any text that follows it. Current values are TOP, MIDDLE, and BOTTOM. |
|
|
WIDTH="..." | The width of the applet output area in pixels. |
|
|
HEIGHT="..." | The height of the applet output area in pixels. |
| <PARAM> |
|
Program-specific parameters. (Always occurs within <APPLET> or <OBJECT> tags.) |
|
|
NAME="..." | The type of information being given to the applet or ActiveX control. |
|
|
VALUE="..." | The actual information to be given to the applet or ActiveX control. |
| <OBJECT> |
|
Inserts images, videos, Java applets, or ActiveX OLE controls into a document (see Chapter 24). |
Just a Minute: In addition to the standard <APPLET> attributes in Table 20.1, you can specify applet-specific attributes to be interpreted by the Java applet itself.
