A Web Development Primer | WebReference

A Web Development Primer

A Web Development Primer

By Ahmad Permessur.

You've learned HTML, and you're good with graphics. You have a lot of content, and people are coming to your site. You have it all, right?

Well, not exactly.

When the World Wide Web first became popular, HTML was the only language programmers could use to create Web pages. They soon learned that HTML had some major limitations. Although HTML presented the user with a "page" of information, the Web page and the user had a limited amount of interaction; the experience was like reading the front page of a newspaper on a computer monitor. Now most computer users, whether they use Windows, Macintosh, UNIX, or a combination of the three, are accustomed to graphical applications that provide interaction. They're used to clicking buttons, entering values into text boxes, and choosing from menus. In fact, the only way to get useful work done with a computer is to interact with it. The first generation of Web pages provided information to the users, but the users couldn't interact with the Web the way they could with their word processors. If users wanted to interact with their Web pages, they had to send the data to the server, which contained all the "smarts." The server sent its results back to the Web page. This interaction required a great deal of extra time, effort, and overhead, and the user interface was very constrained compared to other popular applications.

Fortunately, the builders of the Internet and the World Wide Web recognized these limitations. They soon realized that if the user was denied the capability to interact with the Web page, the Web itself would become little more than a collection of information, much like a library full of books. Although that collection is very useful, users demand more from their computers than a duplication of what they could find elsewhere.

The capabilities of HTML began to grow and become more powerful. Soon, designers began to realize that they needed more than just HTML to make the Internet accessible and useful to the masses. Corporations that wanted to develop enterprise solutions or explore the profit potential of the Internet also began to pressure designers to give them something more.

The Internet is basically a client and server environment, with 3 components to the medium:

  • Client side technologies

  • Server side technologies

  • Networks

Each will be discussed in turn in this article. So when you're ready, grab a cup of coffee and carry on reading!

Client Side Technologies

Client side technologies are those that are interpreted (executed) by the user's browser. When you type a website's address in your web browser, the latter will make a request to the web server where your HTML files are stored, and the HTML file is sent to the browser for viewing. The different technologies that are included in the HTML page (such as CSS and JavaScript) are all executed on the client browser. A limitation of client-side programming is that it is hard to tell what browser/platform is being used, and it might turn out that some of the client-side technologies are not supported (or not fully supported) by the browser, with the result that your web page(s) might not display properly. The section that follows will take you on a quick tour to discover the major client-side technologies.

CSS (Cascading Style Sheets)

To understand CSS, it's worth recalling the main purpose of HTML. The latter was originally designed as a structural language, but with time and updates, HTML has been used as a tool for presentation, making use of fonts, colors and other visual elements. These days the purpose of CSS is to restore HTML to its original structural language. In other words, cascading style sheets are a new way of formatting your page layout, text, fonts, images, and almost anything that controls the look and feel of your web page. It is included either in-line with the HTML file or linked as a separate file which can then be used by different HTML files. The advantage of separating the structure and look is that web pages can be tailored for different users, browsers, and platform and an obvious benefit is that updating becomes easier.

Let's take a quick example at a usage of CSS. Suppose you want all your <H1> tags to have a 10-point Verdana font. Instead of defining every all your <H1> tags in your page with these preferences, you can just use CSS:

CSS usage goes far beyond that. CSS is capable of spacing out the content of a page down to the very last pixel... it can do the same when sizing text, giving you complete control over the look and feel of your page. In fact, CSS will replace some older HTML tags in future browser versions.

JavaScript

JavaScript is a scripting language developed by Netscape and supported as Jscript in Microsoft Internet Explorer. The language was turned to ECMAScript, as a cross-platform Internet standard for scripting, but we still use the most commonly recognised JavaScript name. JavaScript should not be confused with Java. Despite similarities in their names, these 2 languages are completely different from each other.

JavaScript is a core web technology that every designer is encouraged to understand well. It was born out of desire to let HTML authors write scripts directly in their documents. JavaScript brings programming power within the reach of everyone familiar with HTML.

JavaScript borrows its syntax from C/C++ and those familiar with C will feel right at home. Those without any programming experience will find that JavaScript is not the easiest language in the world to learn but it's a far cry from having to learn a programming language such as Java or C.

JavaScript is interpreted on the client-side (on the user’s browser), and is shipped in every platform-specific version of Netscape Navigator 2 and Internet Explorer 4. It can be used to enhance web pages in many ways, such as validating forms, adding user interactivity, processing data or controlling multiple frames. It handles events for the various HTML elements, an example of which is allowing buttons to have OnClick event handlers. While most people find use of JavaScript to be client-side only, JavaScript can also be used in servers and authoring tools.

VBScript

Microsoft's Visual Basic Script (VBScript) offers the functions of a programming language and the simplicity of a technology streamlined for the Web. With VBScript, you can bring your Web pages to life with real-time interaction; there's no more waiting for a server to respond to button clicks and mouse movements. A click of a button gets an instant reaction, and the movement of the mouse over an object brings the object to life.

When you enhance your Web pages with VBScript, you insert scripts directly into your pages. Since VBScript is a subset of Microsoft's Visual Basic, your scripts resemble programs written in Visual Basic. If you aren't a programmer, don't worry. The wonderful thing about VBScript is that it's a very simple programming language to learn and to use. Many Web publishers who aren't programmers use VBScript to enhance their Web pages.

Like most basic programming languages, VBScript is an interpreted language, which is both good news and bad news. The good news is that you don't need to compile your scripts as you would with a program written in C or C++. Your scripts are directly interpreted, line-by-line, when they're executed in the user's browser. The bad news is that before anyone can run your scripts, he or she needs a VBScript interpreter, which is part of the standard Internet Explorer browser package. It's installed automatically when you install Internet Explorer

DHTML

DHTML (or Dynamic HyperText Markup Language), is a collection of coding languages such as HTML, CSS and JavaScript. It allows a web site developer to build dynamic abilities into what would normally be a static web page. What this means is that a web page may be changed after it has been loaded using DHTML. This provides a basis for many useful capabilities, and can make web pages interactive, or feel more alive. The major browsers that support DHTML are the fourth and fifth generation versions of Microsoft Internet Explorer and Netscape Navigator.


Created: March 27, 2003
Revised: July 29, 2005

URL: http://webreference.com/programming/ap1/1