Last Updated:

Web-programming | Client-side | server-side programming

Web-programming

HTML language. 

In recent years, developments for the Web have evolved from static pages to dynamic information systems. Some time ago, the creation of modern Web pages required almost nothing but perfect knowledge of the Hypertext Markup Language (HTML). HTML is a simple word processing language; in this language, a set of tags creates a document that can be viewed by a special Web browser. For example, the HTML in Listing 1.1 creates a simple Web page.

Code Listing 1.1. The source code of 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>

HTML is not a programming language in the sense of C++ or Visual Basic; it is more like formatting documents using control sequences. HTML coding is often compared to creating a document in Microsoft Word format by stuffing formatting codes directly into Notepad. Obviously, the functionality of this is extremely small.

For many reasons, HTML is a poor language in terms of programming. First, let's take hyperlinks – those underlined and blue-highlighted words that you click to go to another page. A hyperlink is essentially a refined GOTO transition operator that navigates to a hard-coded location in your application. A lot of articles have been written about the GOTO operator and its shortcomings. Hard-coded links generate code that is very difficult to maintain, and if you've ever written HTML, you know how difficult it is to reuse and modify it.

Second, HTML does not provide any real way to save data while the application is running. And anyway, in this case, it is difficult to even talk about an application on the Web. When each page is a stateless transaction with a server, how can you even determine where an application starts and ends? Compare this to a typical client-server application, which is indicated by double-clicking an icon on the desktop and the end by selecting Exitfrom the File menu.

Third, HTML has very limited interoperability. Standard HTML is content with static Web pages with text, images and links to other pages. Such sites are called World Wide Yellow Pages, as their format is very similar to the pages of a phone book.

Of course, HTML provides some interactivity through built-in controls, the very input fields that are typically present in HTML forms. You can create simple forms, for example, by using the <INPUT> tags. The <INPUT> tag allows text boxes, check boxes, radio buttons, and buttons. Listing 1.2 defines an HTML form that contains input text fields for name, phone number, and email address.

Code Listing 1.2. The code for the HTML form.

<HTML><HEAD><TITLE>Simple HTML Form</TITLE></HEAD>

<B0DY BGCOLOR="WHITE">

<FORM>

<INPUT TYPE="TEXT" NAME="txtName">Name<P>

<INPUT TYPE="TEXT" NAME="txtPhone">Phone<P>

<INPUT TYPE="TEXT" NAME="txtEMail">Email address<P>

</FORM></BODY></HTML>

Forms are the simplest means of interacting with HTML. The user fills out a series of forms, which are then sent to the server. In the process of sending, the data is converted into some predetermined format and sent in text form to the executable file of the server. After that, the process on the server can use the received data, for example, to access databases, send a mail message or perform other functions.

HTML is plain text, so initially most developers wrote their programs directly in text editors like Notepad. Over time, a number of firms have offered graphical development tools, such as Microsoft FrontPage, which make it possible to create Web pages without explicitly knowing HTML. These image editors allow you to directly layout Web pages without the hassle of tagging. Unfortunately, the power of such image editors turns into a serious drawback: developers have the impression that they do not need to study the syntax and tags of HTML – and yet it is difficult to come up with anything more distant from the truth than this statement. If you don't even learn anything more from this brief introduction to HTML, then remember at least this: to be a true Web developer, you must know HTML. The skills of editing the page directly in the form of source text will allow you to achieve the desired effect regardless of whether your favorite graphic editor supports it.

Client-side programming.

In their first attempts to increase the interactivity of HTML Web pages, developers turned to scripting, adding functionality by combining the programming language with HTML. The result is often a strange hybrid of code and tags, forcing developers to return to text editors. You have introduced a special <SCRIPT> tag that defines a section of code on a Web page. The code in Listing 1.3 uses VBScript to create an example that displays the greeting "Hello, World!".

Code Listing 1.3. VBScript code that outputs "Hello, World!".

<HTML><HEAD>

<META HTTP-EQUIV="Content-Type content=text/html, charset=windows-1251">

<TITLE>Yet Another Hello, World! Example</TITLE>

<SCRIPT LANGUAGE="VBScript”> <!--

Sub cmdClickMe_OnClick()

MsgBox "Hello, World!"

End Sub

-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR= WHITE >

<FORM>

<INPUT TYPE= BUTTON NAME= cmdClickMe VALUE="Click Me!” >

</FORM></BODY></HTML>

VBScript is a scripting language based on Visual Basic for Applications (VBA), a popular language used, for example, in Microsoft Office 97. VBScript is not the full version of VBA, but rather a subset of it that retains many of the key features of VBA, but at the same time does not implement those that would make it too cumbersome and insecure. For example, VBScript does not support data types: all variables are declared as a Variant.

Like its older sibling, VBA, the VBScript language is event-driven. This means that the code you write is executed in response to an event resulting from user interaction with the graphical user interface (GUI). In our case, the GUI is a Web page. So, in the example above, when a user interacts with a GUI by clicking a "Click Me!" button, this action raises the OnClick event. This event, in turn, is handled by VBScript code organized as an event-handling routine. The names of these procedures are in the form ControlNameControlName_EventName, which are arbitrary combinations of control and event names.

Although scenarios represent a step forward in the development of interactivity, they also have certain limitations. For example, not all viewers recognize and process scripts, and those that do use different languages. This is mainly the case with Netscape Navigator, which does not recognize VBScript but works with JavaScript, a scripting language originally developed for Netscape Navigator. JavaScript is very similar in functionality to VBScript, but the syntax of these languages varies greatly. Unlike VBScript, JavaScript does not support the concept of event-handling procedures. All procedures in JavaScript are functions that are called using event attributes located in an HTML tag. The JavaScript version of the previous VBScript example is shown in Listing 1.4.

Code Listing 1.4. JavaScript code that outputs "Hello, World!".

<HTML><HEAD>

<META HTTP-EQUIV="Content-Type" content="text/html;charset=windows-1251">

<TITLE>JavaScript Hello, World! Example</TITLE>

<SCRIPT LANGUAGE="JavaScript"> <!--

function clickme() {

alert("Hello, World!");

return true; }

-->

</SCRIPT>

</HEAD><BODY BGCOLOR="WHITE">

<FORM>

<INPUT TYPE="BUTTON" NAME="cmdClickMe"

VALUE="ClickMe!" OnClick="var rtn=clickme();" >

</FORM> </BODY> </HTML>

The bad thing is not only that script support varies from viewer to viewer, but also that scripts do not provide all the advanced functionality that programmers expect from the language. Scripts provide a subset of the language capabilities that developers typically use: the basic structures and operators—loops and branches. In fact, scripts are only suitable for checking the correctness of the entered data before sending the form to the server.

As scripts are added to the capabilities of viewers, the complexity of the client platform increases. It is also obvious that since there is no universal scripting language, all the much-touted advantages of web platform independence are lost. For many Webmasters and developers, the constant war between viewers for market supremacy creates the need to maintain two versions of the Web site: for Microsoft Internet Explorer and for Netscape Navigator.

ActiveX components. 

As browsing software technology has improved, platform dependency has increased, with ActiveX components, a COM-based technology, Microsoft's Component Object Model. ActiveX components range from fancy controls such as spinners to non-visual components that provide access to databases or e-mail. Such components make pages in Internet Explorer more functional and attractive, but practically useless in an environment that does not support ActiveX, such as Netscape Navigator.

You add an ActiveX component to a Web page by using the <OBJECT> tag, which uniquely identifies the component for the viewer. The following code uses the <OBJECT> tag to place an ActiveX label control on the Web page.

<OBJECT ID="Label1" WIDTH=291 HEIGHT=41 CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"

CODEBASE="http://www.microsoft.com/activex/controls/FM20.DLL">

<PARAM NAME="ForeColor" VALUE="65408">

<PARAM NAME="VariousPropertyBits" VALUE="276824091">

<PARAM NAME="Caption" VALUE="Click me!" >

<PARAM NAME="Size" VALUE="7691;1094">

<PARAM NAME="SpecialEffect" VALUE="1">

<PARAM NAME="FontEffects" VALUE="1073741827">

<PARAM NAME="FontHeight" VALUE="480">

<PARAM NAME="FontCharSet" VALUE="204">

<PARAM NAME="ParagraphAlign" VALUE="3">

<PARAM NAME="FontWeight" VALUE="700">

</OBJECT>

GUID values in any operating system are stored in the registry, a centralized database that is responsible for maintaining information about the software objects used by applications. When Internet Explorer encounters the <OBJECT> tag, it accesses the registry and looks for a GUID that matches the value of the CLASSID attribute. When such a GUID is found, additional information is selected from the registry to help you locate the file that corresponds to the ActiveX control.

In the <OBJECT> tag, you can identify several key components that determine how an ActiveX component will be placed on a page. The ID attribute specifies the name of the control through which all of its properties, methods, and events can be accessed from the script text.

A CLASSID is an alphanumeric code that uniquely identifies a given ActiveX component from all others. This code, known as the Globally Unique Identifier (GUID), is no longer used by any ActiveX component. Using a GUID, Internet Explorer uniquely identifies the required component and creates it on the page. If the desired ActiveX control is not present on the client machine, Internet Explorer accesses the CODEBASE attribute for information about where the activeX control is located on the server. Following this information, the files for this control are downloaded from the server and the control is installed on the client machine. Now Internet Explorer is free to work with it.

Access to ActiveX components through the <OBJECT tag> is not limited to controls. This tag can activate an arbitrary ActiveX component, including components that can be written in Visual Basic, C++, and Microsoft FoxPro. In essence, you can easily extend the functionality available to the client by writing your own ActiveX components and loading them into the viewer. Keep in mind, however, that By default, Internet Explorer does not download or execute components that are digitally signed by the developer.

The final provisioning of a component with data occurs through the <PARAM> tag, which has the NAME and VALUE attributes that specify the initial values of the component's properties when it is first created in a Web page. Once the initial values are set, the property values are easily changed at run time from the script text.

<SCRIPT LANGUAGE="VBScript"><!--

Sub Label1_DblClick(Cancel)

Label1.Font.Weight=24

Label1.Caption="Click again!"

end sub

Sub Label1_Click()

Label1.AutoSize = false

Label1.Font.Weight = 30

Label1.Caption="Two more times!!!!!"

Label1.SpecialEffect=1

end sub

-->

</SCRIPT>

ActiveX documents. 

Visual Basic, starting with version 5.0, allows you to create ActiveX documents in addition to ActiveX controls. ActiveX documents are software objects that can be loaded and run inside an ActiveX container, such as Internet Explorer. ActiveX documents enable Visual Basic developers to immediately apply their Visual Basic expertise to creating applications for the Web. Most importantly, ActiveX documents provide access to most of the key features of Visual Basic in a downloadable format.

Java. 

Let's not forget about Java! This language quickly gained popularity, and it is supported by both Internet Explorer and Netscape Navigator. Applets developed in Java using tools such as Microsoft J++ resemble ActiveX components in many ways: they are self-contained, loadable fragments of a Web page. Like ActiveX components, applets have their own special tag, <APPLET>, which instructs the viewer to download Java code and execute it. The following code executes the applet on the Web page:

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

The CODE attribute of the <APPLET> tag identifies the source code of a Java applet in much the same way that the CODEBASE attribute defines the source for an ActiveX component. Applets can also have <PARAM tags> that specify initial values. In many cases, applets are functional equivalents of ActiveX controls. If anything, scripting languages can access the open functions of applets in the same way that they access the methods of ActiveX components.

Dynamic HTML.

Yes, the differences between the platforms do not make life easier for Web developers. In Internet Explorer 4.0, Microsoft added another feature to the client functionality, Dynamic HTML, which allows you to programmatically change tags through scripts. This is an extraordinarily powerful tool. The code in Listing 1.5 uses VBScript to detect when the mouse pointer is on top of a portion of the text in a Web page and changes the size and color of the text.

Code Listing 1.5. Dynamic HTML.

<HTML><HEAD>

<META HTTP-EQUIV="Content-Type"content="text/html;charset=windows-1251">

<TITLE>Dynamic HTML</TITLE>

<SCRIPT LANGUAGE="VBScript">

Function MyFont_OnMouseOver()

MyFont.Color = "Red"

MyFont.Size = "5"

End Function

Function MyFont_OnMouseOut()

MyFont.Color = "Blue"

MyFont.Size = "4"

End Function

</SCRIPT> </HEAD>

<BODY BGCOLOR="WHITE">

<FONT ID="MyFont" FACE="ARIAL" SIZE="4" COLOR="BLUE">

Hey, point here with the mouse!

</BODY></HTML>

Dynamic HTML defines a set of events that can be associated with HTML tags. This extends the VBScript paradigm of event-driven behavior to all elements of the Web page—HTML tags, ActiveX controls; even the viewer itself has certain events. If you still have doubts about the need for deep knowledge of HTML to effectively create Web pages, then the previous example should convince you. In it, the text in VBScript dynamically changes the COLOR and SIZE attributes of the <FONT> tag when certain mouse actions are detected. You can't write code like this without knowing exactly what the <FONT> tag is, and without understanding the meaning of the COLOR and SIZE attributes. So goodbye, image editors!

Dynamic HTML significantly increases the power of the Web client and its interactivity, not only due to the dynamic style of manipulation, but also by other means. So, he knows how to arrange elements on a Web page. You can, for example, change the image by simply changing the attributes of the <IMG> tag. To change the content of the page, you can also add or remove tags. Finally, Internet Explorer 4.0 supports data binding to form fields. This means that data from a database on the server can be directly linked to a form field in the Web viewer, and thus will be instantly edited and updated. All of this makes Dynamic HTML a powerful tool worthy of your attention. But don't forget one important thing: Dynamic HTML is currently only available for Internet Explorer.

Server-side programming.

Another landmark technology is server-side scripting technology, an example of which is Active Server Page (ASP). This technology allows you to create gorgeous, platform-agnostic Web pages that can be viewed by any viewer. Or, if you want to take full advantage of platform-specific technologies such as Dynamic HTML, you can create ASP pages that can communicate directly with Internet Explorer.

At its core, ASP is a script that runs on an IIS server. This code runs dynamically when the page is requested, and the resulting HTML text is sent to the viewer. See how the code in Listing 1.6 uses ASP to create six consecutive lines of text typed in an ever-increasing font.

Code Listing 1.6. A Web page with ASP.

<SCRIPT LANGUAGE="VBSCRIPT"></SCRIPT>

<HTML><HEAD>

<META HTTP-EQUIV="Content-Type" content="text/html;charset=windows-1251">

<TITLE> ASP Example</TITLE>

</HEAD>

<BODY BGCOLOR="WHITE">

<%For x = 1 to 6%>

<FONT FACE="ARIAL" SIZE=<%=X%>>ActiveX is cool!</FONT><P>

<%Next%>

</BODY> </HTML>

The <SCRIPT> tag is present in the example text, although it is not required, but notice that a percent sign appears inside the parentheses. This syntax means that the code must be executed on the server before the page can be sent to the client. Note also that percent signs surround all the code snippets on a given page, which means that all of it runs before the viewer receives the page. The resulting HTML text looks like this:

<HTML><HEAD>

<META HTTP-EQUIV="Content-Type" content="text/html;charset=windows-1251">

<TITLE>ASP Example</TITLE></HEAD>

<BODY BGCOLOR="WHITE">

<FONT FACE="ARIAL" SIZE=1>ActiveX is cool!</FONT>

<P><FONT FACE="ARIAL" SIZE=2>ActiveX is cool!</FONT>

<P><FONT FACE="ARIAL" SIZE=3>ActiveX is cool!</FONT>

<P><FONT FACE="ARIAL" SIZE=4>ActiveX is cool!</FONT>

<P><FONT FACE="ARIAL" SIZE=5>ActiveX is cool!</FONT>

<P><FONT FACE="ARIAL" SIZE=6>ActiveX is cool!</FONT>

<P></BODY></HTML>

The resulting HTML hides the beauty of ASP. The resulting page can contain pure HTML, understandable to any viewer! This makes ASP ideal for applications that need to run on the Internet, where any viewer can work with the page. However, ASP is not limited to a minimal common denominator, and you can add client script, ActiveX controls, and Dynamic HTML controls to the resulting page. Thus, ASP is flexible as much as you want it to be.

Server-side scripting languages also include the well-known Perl and PHP languages. Unlike ASP, they are compatible with almost any Web server, including IIS (PWS), which by default only supports ASP (IIS - immediately after installation, PWS - after installing the free ASP.EXE module). There is, however, a Java package Instant ASP from ChillySoft, which allows you to program in ASP and under other Web servers, but it is commercial. At the same time, the very popular free cross-platform Apache web server has Perl and PHP interpreters in its kit. These interpreters exist in Versions for Windows and UNIX-compatible operating systems, so they can also be considered platform-independent. In general, the choice of a server scripting language is due to the configuration of the customer's web server, since, even with the skills of configuring web servers, it is sometimes impossible to get to the server on which the customer's site is located.

Within the framework of this course, server-side scripting languages ASP, Perl, PHP will be considered.

Programming tools and technologies.

The minimum set of tools of a web-programmer is a text editor and a browser for which the site is optimized. When using server-side scripts, a web server is also required, preferably the same as the customer's. Avoid debugging scripts on the client server - your mistakes can cause it to hang, and you do not always have the rights and the ability to restart it! It is best to install a web server on a workstation or home computer and connect the desired interpreter to it. It should be borne in mind, however, that the functionality of web-servers and interpreters under different operating systems (Windows and UNIX) is often different.

As for the editor, you can use both the standard "Notepad" or the built-in editor of the FAR file manager (preferably with the Colorer plugin for highlighting tags and operators), and any specialized WYSIWYG (What You See Is What You Get) HTML editor. However, among their variety, there is practically no one that supports ALL server scripting languages AT THE SAME TIME, although support for client languages is usually present. In addition, often these editors convert Russian letters into their codes, which significantly complicates subsequent editing. Here's a small list.

Undoubtedly, the most powerful, albeit cumbersome, ASP programming tool is Microsoft Visual InterDev, which is included with Microsoft Visual Studio. When integrated with the MSDN Help system, it allows you to quickly get help with any operator, function, or object. You can also preview both in the editor window and in the default browser, as well as step-by-step debugging.

For perl programming, NetObject Fusion, which has extensive reference for this language, is perhaps best suited. PHP support can boast of a fairly large number of editors: both small EditPlus, HTML-Kit, PHPEd and UltraEdit, and a rather cumbersome HomeSite. It is not intended to make a detailed review of them, those who wish can visit the section of HTML-editors on the http://tucows.com.

As for programming technologies, all modern scripting languages support both classical procedural and object-oriented, although to varying degrees. In any of these languages, you can use built-in and external objects, their methods and properties, but you can create a full-fledged own class only in C-like languages: Perl and PHP.