Today’s Web developers go beyond the use of basic HTML. Now, they are able to select from a variety of strategies that enable their Web sites to become robust. This article begins by describing basic HTML and then overviews host programming with CGI and ASP, and client programming with JavaScript. The article continues with a discussion of advancements to the HTML language with DHTML before closing with the introduction of XML, a language that effectively replaces HTML.

Today, numerous Internet programming strategies abound—some of them more prevalent than others. This article provides an overview of the strategies that I have used in the course of my career as a Webmaster. The accompanying article by Don Denoncourt zeroes in on strategies that he has used in the course of his career as a systems programmer and more recently as the editor of AS/400 NetJava Expert (see “Programming Strategies: Applets, Servlets, Sockets, Distributed Objects, and Vendor Specific” elsewhere in this Focus section). By reading both of these articles, you will acquire a general knowledge from which you can begin to consider what programming strategies you should use in the design of your company’s Internet site.

HTML, or Hypertext Markup Language, is the meat and potatoes of today’s Internet. Even though plenty of newer technologies are available, most of the information available on the Internet today is made available through HTML files. HTML contains commands, called elements or tags (strangely similar to the AS/400 User Interface Manager, or UIM) to “mark up” text such as headings, paragraphs, lists, menus, and tables. A Web browser is able to read HTML files and present them in a fashion that is visually appealing in the form of a Web page (see Figure 1). HTML allows you spice up these Web pages with images, sound, and even video clips.

The hyper in HTML refers to tags that link a Web page to other Web pages or Internet resources. The destination of that link can be local, or it can be completely across

HTML

the world if the link contains a global address called a Uniform Resource Locator (URL). The rise of power and popularity of the Internet started from its ability to link documents that reside on various platforms spanning the globe.

One of the best things about this formatting language is that it is easy to understand, even for nonprogrammers. It can be learned by almost anyone with a few evenings to spare. The formatting tags, which are written in plain English, are interpreted by the browser. The browser, in turn, displays the output Web page. The idea is that HTML permits any kind of computer—Macs, PCs, Suns, etc.—to interpret a document in approximately the same way.

The problem with HTML files is that they are static: The content of the Web page doesn’t change. Internet applications need the ability to accept and respond to remote user input in data-entry form. The most common way to capture data is by the use of HTML forms, which give the user the ability to enter relevant data that can then be submitted back to the Web server (in a strategy similar to 5250 applications). Currently, static HTML cannot do this without the assistance of Internet programming. For a Web page to capture data from a user and then to transmit that data to the host for processing requires an additional degree of Web programming.

One method of Web programming is Common Gateway Interface (CGI). CGI is a standard for interfacing legacy host-based applications with Web servers. A CGI program is executed in real time so that it can output dynamically constructed HTML rather than the static information of basic HTML files. Using the form mail example, the Web page needs to send information to a mailer program so that it can be handled and sent off to its destination in a usable format. This is an example of a gateway, the idea behind CGI.

If you’re writing a CGI application, you use whatever flavor of computer language you prefer, whether it be C, Visual Basic, Fortran, AppleScript, Perl, etc., as long as the platform of your Web server supports them. On the AS/400, this flexibility means you can code Internet applications with your old and faithful RPG and COBOL.

One problem with CGI applications is that its “openness” allows anyone to run an executable program on your server, which can pose a serious security issue. The point is, the more sophisticated your Web site becomes, the more security becomes an issue. Most Web developers would probably agree that the future of the Internet is in database-driven Web sites. If your Web site doesn’t have database connectivity, you might already be falling behind, and CGI is the easiest way to catch up.

JavaScript

First, let me point out that JavaScript is not Java. In fact, when Netscape first introduced a scripting language, they called it Live-Script, not JavaScript. But Netscape’s marketing department, to jump on the media frenzy surrounding Java, renamed Live- Script. Netscape’s stock rose $20 the day that “JavaScript” was announced. At any rate, whatever the name of this scripting language might be, it was designed to make some HTML-related tasks much easier. JavaScript is a small, simple, interpreted language that is much easier to learn than full-blown applications languages like RPG and Java. JavaScript, unlike CGI, runs on the client, so it has full access to the browser and knows what the user is doing. JavaScript enables page designers to access events, such as mouse clicks, and to paste together HTML, plug-ins, and Java applets.

The problem with JavaScript is that it is simple and you can only use it to perform simple tasks. JavaScript mainly is used for the creation of user interfaces that are more sophisticated than basic HTML because JavaScript can respond to user events by dynamically reformatting the presentation of a Web page.

Active Server Pages

Although CGI can be used to generate output that can be ported to a database—if you are running the Microsoft Internet Information Server (IIS) as your Web server—amuch better solution might be Active Server Pages (ASP). This is Microsoft’s latest Web-

CGI

programming strategy. ASP allows Web site developers to make their pages even more dynamic and interactive (see Figure 2). ASP is particularly useful because it means developers won’t have to abandon their current CGI programs and custom components as long as they’ll run on IIS.

For example, instructions can be included in an ASP file that will execute an existing CGI application; the application simply runs as it would have if it had been referenced directly in the browser. Yet, with ASP, the browser actually references the page that it wants, and that page is then read into memory as if it were a normal, static page. But before the Web page is transmitted back to the browser, the IIS server examines the Web page for any script that it should be handling. It then executes such a script. This script can calculate and insert values into the page or create extra text and HTML code, as required. And, because it works directly on the page while it’s loaded instead of creating a “results set” first, it gives you control over how the finished page will appear.

Once the server has finishing modifying the loaded page, it packages it up in the HTTP wrapper and sends it off to the browser. When it arrives there, it’s just text and HTML code, like a normal, static page. In this case, the browser will reference the file that is returned, but it’s a modified copy of this file (containing the results of executing any script in it) that the user sees. The process is more akin to writing an application than creating an HTML page.

One of the main reasons for using dynamic pages in a Web site is to provide database access. This access may mean simply retrieving values to display, such as a company’s list of currently available products and their latest prices. Alternatively, the site may want to collect information from the user and store this information in a database. One of the standard server components supplied with ASP is specially designed to do just that. The ActiveX Data Object (ADO) can provide full access to almost any database system for which an ODBC driver is available. ODBC allows you to use this single component with different database systems, thus simplifying the process of creating and maintaining your Web site. For example, Microsoft Access has a wizard that allows you to create an ASP page from an existing database.

Dynamic HTML

CGI, ASP, and ADO give us the tools to enable our Web site to capture and serve dynamic data, but what about making a site’s overall appearance more interesting and cutting edge? Regular HTML can’t offer much in the way of multimedia tools. There are alternatives such as Macromedia Shockwave and Flash, but there is a problem with such plug-in tools: They limit the audience of your Web page. Visitors to a Web page that uses a plug-in tool must download and install that tool on their machine before they can view the page. In order to achieve the same results from your Web page while not excluding those without the latest plug-ins, there is Dynamic HTML (DHTML).

A standard HTML document cannot specify that text and images be located at exact coordinates, on top of one another, or even that the text be displayed in a particular point size. Until now, Web authors have struggled to get browsers to display HTML content exactly the way they want it. DHTML allows content to be displayed with more design flexibility and accuracy through the use of Cascading Style Sheets (CSS). Using CSS, Web authors can define fonts, margins, and line spacing for different parts of an HTML document. In addition to these stylistic improvements, CSS allows the absolute positioning of content by specifying x and y coordinates (and even a z index, which allows different elements to overlap).

DHTML improves the functionality and interactivity of an HTML document. It also works with scripting languages, such as JavaScript and VBScript, that provide developers with more control over an HTML document. With DHTML, Web page content becomes more flexible, and text, images, and other objects can be hidden, shown, and rearranged around the page. Also, awareness of user actions is expanded, allowing keystrokes and a larger variety of mouse actions to be interpreted by scripting languages. With dynamic

creation of content, a Web page can be created and displayed without reloading or redrawing a document. Although the ability to create content “on the fly” existed before DHTML, it required the entire document or frame to be redrawn. DHTML has no such requirement. For example, with DHTML, stock quotes can be tabulated and displayed as they change.

DHTML also takes into account how important database connectivity is. Closely related to the dynamic creation of content is data binding, a feature supported by Internet Explorer 4.0 through CSS properties. Data binding allows the server and the client to be connected. The data in a database can be bound to tables or form elements in an HTML document. Information from a database can be displayed in a table that’s automatically generated, and then that data can be dynamically updated or sorted—through a script—without redrawing the page.

One thing to watch out for is that DHTML has two drastically different implementations: Netscape’s version, and Microsoft’s version. DHTML elements that work on Netscape Navigator will probably not work on Internet Explorer, or at least, not in the way that you intended.

HTML is no longer the only game in town. Now, there is a new specification called eXtensible Markup Language (XML). Both XML and HTML are subsets of Standard Generalized Markup Language (SGML), a system for organizing and tagging elements of a document that was developed and standardized by the International Organization for Standardization (ISO) in 1986. The Web industry at large is only now beginning to discover the limitations of the HTML incarnation of SGML. SGML, for instance, has a number of sophisticated features that HTML does not: extensibility, structure, and validation. XML, unlike HTML, was designed to retain the powerful extensibility of SGML. But XML, like HTML, was also designed to be simple. As a result, XML is vastly easier to learn and implement than SGML.

The extensible part of XML comes into play when an organization (such as a trade association) decides to specify an industry-specific set of descriptive markup tags. These tags don’t say how to format the document, nor do they say what to do when people click on the tag.

In fact, XML is really a meta-language for describing markup languages. In other words, XML provides a facility to define tags and the structural relationships between them. The power of XML manifests itself when you show a document on, for example, a big monitor or, for that matter, a tiny cell phone. A different set of rules is defined to apply to the monitor display of the document versus the cell phone display of that same document. XML effectively “decouples” the document from its presentation. This decoupling certainly doesn’t make documentation presentation any easier, but it does make it far more powerful.

After an organization defines a set of industry-specific XML tags, they are published in what is known as a document type definition (DTD). One DTD could describe a lot of different documents. You could almost compare DTDs with SQL database schemas. You could, in fact, say that DTDs are schemas for documents.

More Strategies

The strategies in this article are clearly not the only Internet programming strategies. They are, however, strategies that are extremely popular and in heavy use today. Even XML, which has only recently been introduced, is already being used by many companies. Why? Because it provides a solution to requirements that HTML didn’t deliver.

Being aware of the requirements for Internet applications programming, discovering the strategies that meet those requirements, and then producing a powerful Web site is what my job as Webmaster is all about. So, too, will it be a part of your job as legacy applications are becoming more and more integrated with the Internet.

XML

Static HTML

Web Browser

Web Browser

HTML Page Requests HTML Page

HTTP Web Server

HTTP Web Server

Static HTML

Figure 1: HTML files reside on the platform of your Web server and are dynamically downloaded to browsers upon a user’s request

Request Page

HTTP Encoding

Client

Server

Active Server Pages

Add the HTTP Wrapper

Active Server Pages

VB Script or Java Script

Dynamic Page

VB Script or Java Script

Disk

Disk

HTTP Decoding

HTTP Decoding

Figure 2: Active Server Pages generates dynamic, interactive Web pages

Also Read

Open Source Starter Guide for IBM i Developers: Language Basics

Open Source Starter Guide for IBM i Developers: Ruby and IBM i, An Introduction

Open Source Starter Guide for IBM i Developers: i Object!