Introducing Active Content: Listing 1-1. HTML Code For A Simple Web Page

Introducing Active Content Page 1 of 12
Introducing Active Content

What a difference one product cycle can make! Not long ago, conventional wisdom had Microsoft dead
the hands of the Internet. Today it isn't news to anyone that Microsoft has successfully recast itself as an
ally of the Internet. But what continues to amaze is the magnitude of the consequences for developers.
When Microsoft first responded to the demand for Internet development tools, products were primitive
any stretch of the imagination. In fact, Web developers joked that their favorite development tool was
"Visual Notepad." Now, however, no one is joking. The suite of tools released in Microsoft Visual
97 represents a firm commitment to the Internet, and the next generation of tools is on its way. This is a
great time to be a Web developer.
Hypertext Markup Language

Internet development over the last few years has moved from static content to dynamic content. Just a
short time ago, creating state-of-the-art Web pages required little more than mastery of Hypertext
Language, or HTML. HTML is a simple, text-based language that uses a series of tags to create a
document that can be viewed by a browser. The HTML code in Listing 1-1, for example, renders the
simple Web page shown in Figure 1-1 on the following page.
Listing 1-1. HTML code for a simple Web page.
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE">
<H2><CENTER>Welcome to My First Web Page!</CENTER></H2>
</BODY>
</HTML>
... 03/05/2002
file://C:\Documents%20and%20Settings\brandon.MOBILE-33\Local%20Settings\Temp\~hhFF92.htm
Figure 1-1. A simple Web page.
HTML is not really a language in the same sense as C++ or Microsoft Visual Basic; it's more like a
formatting syntax for documents that use escape codes. In fact, we often liken HTML coding to
Microsoft Word document by typing formatting codes directly into Notepad. You can expect very
functionality.
HTML is a poor language from a programming perspective for a variety of reasons. First, consider the
hyperlink, those underlined blue words that you click to go to another page. The hyperlink is essentially
glorified GOTO statement that provides a hard-coded jump to some location in the application. Reams
articles have been written about the GOTO statement and its evils. Hard-coded links, you see, create
unmaintainable code, and if you've written HTML code for any period of time, you already know how
hard it is to revise or reuse.
Second, HTML provides no real way to persist data throughout an application. In fact, it's difficult to
define an application on the Web. Each page represents a stateless transaction with the server, so how
you determine when an application begins and ends? Compare this with a typical client/server
where the beginning is signaled by double-clicking an icon and the ending is determined by selecting
from the File menu.
Third, HTML allows limited interactivity. Standard HTML yields static Web pages with text, images,
hyperlinks to other pages. You might hear these sites referred to as the World Wide Yellow Pages
their format is pretty much the same as that of a phone book.
Admittedly, HTML can provide some interactivity through the use of intrinsic controls, the input
you generally see in HTML forms. Simple data forms can be generated with tags such as <INPUT>.
<INPUT> tag allows creation of text boxes and check boxes as well as radio buttons and push buttons.
Listing 1-2 creates an HTML form that displays text boxes for a name, a telephone number, and an e-
address, as shown in Figure 1-2.
... 03/05/2002
Listing 1-2. Code for an HTML form.
<HTML>
<HEAD>
<TITLE>Simple HTML Form</TITLE>
</HEAD>
<FORM>
<INPUT TYPE="TEXT" NAME="txtName">Name<P>
<INPUT TYPE="TEXT" NAME="txtPhone">Phone<P>
<INPUT TYPE="TEXT" NAME="txtEMail">E-Mail<P>
</FORM>
</BODY>
</HTML>
Figure 1-2. A simple HTML form.
Forms represent the primary means of interaction in HTML. A user fills out a series of forms, which
then submitted to the back-end server. This submission process arranges the data from an HTML form
predefined format and sends it as text to an executable file on the server. The server process can then
manipulate the submitted data for the purpose of accessing a database, sending mail, or performing
other function.
HTML is created in plain text, so originally most HTML developers wrote their code directly in a text
editor such as Notepad. As time went on, companies produced graphical development tools such as
Microsoft FrontPage, which were designed to allow Web page creation without explicit knowledge of
HTML. These graphical editors allow direct manipulation of the Web page with no laborious tag
effort. Unfortunately, the strength of graphical editors is also their biggest drawback: they give
the impression that they don't have to learn HTML syntax and tags—and nothing could be further
truth. If you take one thing away from this introduction to HTML, remember this: you must know
... 03/05/2002
to be a successful Web developer. Editing a page directly in text is a skill that will allow you to create
exactly the effect you want whether or not it is directly supported by your favorite graphical editor.
is still the foundation of Internet development and will not be fully replaced anytime soon. In fact,
attempts to enhance Web page development have made a thorough knowledge of HTML even more
critical.
Client-Side Scripting
In an early effort to increase the interactivity of HTML Web pages, some developers turned to scripting,
adding code-based functionality by combining a programming language with HTML. This approach
results in a strange hybrid of code and tags that once again takes developers back to the text editor. In
scripting, the <SCRIPT> tag is introduced to define a code section in the Web page. Listing 1-3 uses
VBScript to create a "Hello, World!" example, as shown in Figure 1-3.
Listing 1-3. VBScript code for "Hello, World!"
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Developer Studio">
<META HTTP-EQUIV="Content-Type" content="text/html;
charset=iso-8859-1">
<TITLE>Yet Another Hello, World! Example</TITLE>
<SCRIPT LANGUAGE="VBScript">

</SCRIPT>
</HEAD>
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdClickMe" VALUE="Click Me!">
</FORM>
</BODY>
</HTML>
... 03/05/2002
Figure 1-3. "Hello, World!" created using VBScript.
VBScript is a scripting language based on Microsoft's popular Visual Basic for Applications (VBA), a
language found in products such as Microsoft's Office 97. VBScript is not a complete version of VBA
rather a subset that keeps many of the key features of VBA while removing features that might make
language unnecessarily bulky or unsafe. For example, VBScript does not support data types—every
variable defined is a Variant.
Like its big brother, VBA, VBScript is an event-driven language. This means that the code you write
executed in response to an event, a user interaction with a graphical user interface, or GUI. For our
purposes, the GUI is the Web page. So, in the example above, when the user interacts with the GUI by
clicking the Click Me! button, the action fires the OnClick event. This event is mapped to the
code by way of an event-handling subroutine. A subroutine is named ControlName_EventName for
control and event combination. The only caveat here is that some events can also be generated by the
browser itself. For example, when a Web page completes a load into the browser, the
event fires, independent of any user interaction with the page.
Although scripting represents an advancement in interactivity, it has its limitations. For example, not
browsers recognize scripting. Among those that do, not all use the same language. Chief among these is
Netscape Navigator 3.0, which does not recognize VBScript but instead recognizes JavaScript, a
language originally created for Netscape Navigator. JavaScript is similar in function to VBScript but is
very different in syntax. Unlike VBScript, JavaScript does not support the concept of an event-
subroutine. All routines in JavaScript are functions, which are called by virtue of event attributes that
reside in the HTML tag. Listing 1-4 is the JavaScript version of the previous VBScript example.
Listing 1-4. JavaScript code for "Hello, World!"
<HTML>
<HEAD>
... 03/05/2002

<TITLE>JavaScript Hello, World! Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdClickMe"
VALUE="Click Me!" OnClick="var rtn=clickme();">
</FORM>
</BODY>
</HTML>
Not only does support for scripting vary by browser, but scripting does not provide the mature
functionality programmers expect in a language. Scripting offers a subset of the language features
developers normally use, a subset that limits structures and operators to fundamental looping and
making. In fact, scripting alone is generally useful only for performing client-side data validation prior
submitting the form to a server.
Once scripting is added to the mix, platform complications abound. Obviously, if a scripting language is
not universal, it cannot be adequately deployed on the Internet, and consequently all of the advertised
advantages of platform independence on the Web come to nothing. For many Webmasters and
the constant battle between browsers for market share has resulted in the need to maintain three versions
of each Web site: one for Microsoft Internet Explorer, one for Netscape Navigator, and one for old
browsers such as Mosaic that can't understand any of the new technology.
ActiveX Components
As browser technology improved, additional platform dependence was introduced through ActiveX
components, a technology based on Microsoft's Component Object Model (COM). ActiveX components
range in style from fancy controls such as spinners and sliders to nonvisual components that allow data
access or e-mail capability. These components make pages in Internet Explorer both attractive and
functional but are nearly useless in environments that don't support ActiveX, such as Netscape
An ActiveX component is added to a Web page through the <OBJECT> tag, which uniquely identifies
component to the browser. The following code uses an <OBJECT> tag to add an ActiveX label control
the Web page shown in Figure 1-4 on the following page:
... 03/05/2002
<OBJECT ID="IeLabel3" WIDTH=148 HEIGHT=40

CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://www.microsoft.com/activex/controls/ielabel.ocx">
<PARAM NAME="_ExtentX" VALUE="3916">
<PARAM NAME="_ExtentY" VALUE="1058">
<PARAM NAME="Caption" VALUE="Label3">
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4">
<PARAM NAME="Mode" VALUE="1">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="BackColor" VALUE="#C0C0C0">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="12">

<PARAM NAME="FontItalic" VALUE="0">
<PARAM NAME="FontBold" VALUE="0">
<PARAM NAME="FontUnderline" VALUE="0">
<PARAM NAME="FontStrikeout" VALUE="0">
<PARAM NAME="TopPoints" VALUE="0">
<PARAM NAME="BotPoints" VALUE="0">
</OBJECT>
Figure 1-4. An ActiveX label control displayed on a Web page.
The <OBJECT> tag consists of several key parts that determine how an ActiveX component is
on the page. The ID attribute names the control. Once named, the control can be accessed through
scripting code, and all the properties, events, and methods of the control are available to the page.
Perhaps the least understood attributes are CLSID and CODEBASE. CLSID is an alphanumeric serial
number that uniquely represents an ActiveX component among all others. This serial number, known
Globally Unique Identifier, or GUID, is not used by any other ActiveX component. Internet Explorer
the GUID to locate the ActiveX component and create it in the page.
... 03/05/2002
GUID numbers are tracked on any operating system through the registry, a centralized database that is
responsible for maintaining information about software objects used by applications. When Internet
Explorer encounters an <OBJECT> tag, it goes to the registry and matches the CLSID attribute with
GUID. When the GUID is located, the registry provides additional information that locates the file for
ActiveX control. Figure 15 shows one of the registry entries for the Calendar ActiveX control, as
with the Registry Editor.
Figure 1-5. Registry entry for the Calendar ActiveX control.
If the ActiveX control is not on the client machine, Internet Explorer uses the CODEBASE attribute to
locate the ActiveX control on the server. The files for the control are downloaded via the CODEBASE
attribute, and the ActiveX component is installed on the client machine. Once installed, Internet
can use the control.
Accessing ActiveX components via the <OBJECT> tag is not restricted to controls. An <OBJECT>
can activate any ActiveX component. This includes components you create with languages such as
Basic, J++, C++, and Microsoft FoxPro. In fact, you can easily extend the functionality afforded to the
client by writing your own ActiveX components and downloading the components to the browser.
Supplying data to any component is accomplished with the <PARAM> tag. The <PARAM> tag uses
attributes NAME and VALUE to pass initial property value information to the ActiveX component
it is first created in the Web page. After the initial values are set, the properties can easily be changed
run time by using scripting calls.
ActiveX Documents
With the release of the latest version of Visual Basic, developers acquired another set of tools for
dynamic content. Visual Basic 5.0 supports the creation of ActiveX controls as well as a new project
known as ActiveX documents. ActiveX documents are software objects that can be downloaded and run
... 03/05/2002
inside an ActiveX container such as Internet Explorer. ActiveX documents allow Visual Basic
to immediately leverage their expertise in Visual Basic to create applications for the Internet.
ActiveX documents provide access to most of the key features of Visual Basic in a downloadable
Java
And don't forget about Java! This language has gained popularity quickly and is supported by both
Internet Explorer and Netscape Navigator. Applets created in Java with a tool such as Microsoft Visual
J++ are very similar to ActiveX components: they are self-contained, downloadable chunks of content
can be rendered in a Web page. And like ActiveX components, applets get their own special tag. The
<APPLET> tag tells a browser to download Java code and run it. The following code runs an applet in a
Web page:
<APPLET CODE="DBLBULB.CLASS" HEIGHT=35 WIDTH=26>

</APPLET>
The CODE attribute of the <APPLET> tag identifies the source code of the Java applet in much the
way that the CODEBASE attribute identifies the source for an ActiveX component. Applets can also
<PARAM> tags that specify initial values. In many ways, applets are the functional equivalent of
controls. In fact, scripting languages can access the public functions in applets just as they can access the
methods of ActiveX components.
Dynamic HTML
Well, platform considerations are not getting any less complicated for Web developers. With the
introduction of Internet Explorer version 4.0, Microsoft added a new twist to client-side functionality:
Dynamic HTML, which allows tags to be programmatically changed through scripting. This is
powerful. Consider the code in Listing 1-5, which uses VBScript to detect when the mouse is over some
text on the Web page and then changes the text color and size.
Listing 1-5. Dynamic HTML.
<HTML>
<HEAD>
<TITLE>Dynamic HTML</TITLE>
<SCRIPT LANGUAGE="VBScript">

</SCRIPT>
</HEAD>
<FONT ID="MyFont" FACE="ARIAL" SIZE="4" COLOR="BLUE">
Hey, put your mouse here!
</BODY>
</HTML>
Dynamic HTML defines a series of events that can be associated with HTML tags. This expands the
event-driven paradigm of VBScript to include every element in the page—HTML tags, ActiveX
and even the browser itself have events. If you had any lingering doubt that you needed a thorough
knowledge of HTML to effectively create Web pages, the preceding example should convince you. In
example, the VBScript code dynamically changes the COLOR and SIZE attributes of the <FONT> tag
when mouse activity is detected. You cannot write this code unless you know exactly what the <FONT>
tag is and understand its COLOR and SIZE attributes. So long, graphical editors!
Dynamic HTML adds a wealth of power and interactivity to the Web client not only through dynamic
style manipulation but through other features as well. Dynamic HTML understands how to position
elements on the Web page. You can, for example, translate an image by changing the attributes of a
simple <IMG> tag. You can also add or delete tags from the page to create changing content. Finally,
Internet Explorer 4.0 also supports the data binding of form fields. This means that a database on the
server can be wired directly to a form field on the browser for rapid updates and edits. All of this makes
Dynamic HTML a powerful tool worthy of your time. This book dedicates a significant number of pages
to understanding and using Dynamic HTML, but remember one thing: Dynamic HTML is currently
available only to Internet Explorer 4.0, despite Microsoft's efforts to create it as an open standard.
Active Server Pages

Another milestone technology—one discussed extensively in this book—is Active Server Pages, or
In many ways, ASP is the most exciting of all the new Internet technologies because it allows you to
create great, platform-independent content that can be used in any browser. Or, if you want to take
maximum advantage of platform-specific technologies such as Dynamic HTML, you can create ASP
pages that speak directly to Internet Explorer 4.0.
At its most fundamental, ASP is scripting done on the server. This scripting code is evaluated
when the page is requested, and the resulting HTML is passed to the calling browser. Consider the code
Listing 1-6, which uses ASP to generate six successive lines of text that get increasingly larger.
Listing 1-6. An ASP Web page.
<%@SCRIPT LANGUAGE="VBSCRIPT"%>
<HTML>
<HEAD>
... 03/05/2002
<TITLE>ASP Example</TITLE>
</HEAD>
<%For x = 1 to 6%>
<FONT FACE="ARIAL" SIZE=<%=x%>>
ActiveX Is Cool!
</FONT>
<P>
<%Next%>
</BODY>
</HTML>
The sample code includes a <SCRIPT> tag, but notice that percent signs appear inside the brackets. This
syntax indicates that the code is to be executed on the server before the page is downloaded to the client.
In fact, notice the percent signs that surround all the code in the page. This code is all evaluated before
browser receives the page. The resulting HTML code looks like this:
<HTML>
<HEAD>
<TITLE>ASP Example</TITLE>
</HEAD>
<FONT FACE="ARIAL" SIZE=1>

ActiveX Is Cool!
</FONT>
<P>

ActiveX Is Cool!
</FONT>
<P>

ActiveX Is Cool!
</FONT>
<P>

ActiveX Is Cool!
</FONT>
<P>

ActiveX Is Cool!
</FONT>
<P>
... 03/05/2002
ActiveX Is Cool!
</FONT>
<P>
</BODY>
</HTML>
In the resulting HTML lies the beauty of Active Server Pages. ASP output can be limited strictly to
HTML—understandable by any browser! This makes ASP an ideal choice for applications that must run
on the Internet, where any browser can view a page. ASP is not limited to the lowest common
denominator, however, and you can freely add client script, ActiveX controls, and Dynamic HTML to
output of ASP. ASP pages are therefore as flexible as you want them to be.
... 03/05/2002

Introducing Active Content: Listing 1-1. HTML Code For A Simple Web Page

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Introducing Active Content: Listing 1-1. HTML Code For A Simple Web Page

Hochgeladen von

Copyright:

Verfügbare Formate

Introducing Active Content Page 1 of 12

Introducing Active Content

Hypertext Markup Language

Listing 1-1. HTML code for a simple Web page.

Figure 1-1. A simple Web page.

Listing 1-2. Code for an HTML form.

Figure 1-2. A simple HTML form.

Listing 1-3. VBScript code for "Hello, World!"

Figure 1-3. "Hello, World!" created using VBScript.

Listing 1-4. JavaScript code for "Hello, World!"

<META NAME="GENERATOR" Content="Microsoft Developer Studio">

<OBJECT ID="IeLabel3" WIDTH=148 HEIGHT=40

<PARAM NAME="FontSize" VALUE="12">

Figure 1-4. An ActiveX label control displayed on a Web page.

Figure 1-5. Registry entry for the Calendar ActiveX control.

<APPLET CODE="DBLBULB.CLASS" HEIGHT=35 WIDTH=26>

Listing 1-5. Dynamic HTML.

Active Server Pages

Listing 1-6. An ASP Web page.

<FONT FACE="ARIAL" SIZE=1>

<FONT FACE="ARIAL" SIZE=2>

<FONT FACE="ARIAL" SIZE=3>

<FONT FACE="ARIAL" SIZE=4>

<FONT FACE="ARIAL" SIZE=5>

<FONT FACE="ARIAL" SIZE=6>

Das könnte Ihnen auch gefallen