Web Server and Browser Basics

Just how does the Web work, anyway? We'll take a whirlwind tour of the basics, introduce the major players and review the major standards that make web interoperability possible. These aren't any less important just because they are basics.

Everyone knows what a web browser is, but not everyone is so clear on what it does! The same is true for web servers. So what do they actually do?

A web browser downloads web pages and other content from web servers. Usually this is done via Hypertext Transfer Protocol (HTTP), a mature standard maintained by the World Wide Web Consortium (W3C, www.w3c.org ). HTTP is a very simple, well-documented protocol spoken by literally thousands of applications as well as by the mainstream web browsers and servers. Typically the web browser downloads web pages written in HTML (or the newer XHTML) from the web server via HTTP. These pages contain text and hyperlinks and references to images in various formats. When the web browser encounters a reference to an image, it then downloads the image file, again via HTTP.

Rendering Web Pages to the Screen

Once the web browser has downloaded the content, the web browser renders HTML and XHTML web pages in a user -readable formhopefully, with the appearance the web designer intended! The appearance of the page can be improved using configuration settings in style sheets written to follow the Cascading Style Sheets (CSS) standard. Style sheets are typically kept in separate files from the web pages they format. An entire website can use a single style sheet for consistency and ease of updates.

Handling Form Submissions

Some web pages include forms that allow users to send information back to a website application for additional processing. The web browser renders the form, gathers up the user entries, and submits the data back to the web server. Google's search page ( www.google.com ) is the best-known example, but forms are found in nearly all web applications.

Interactivity on the Browser Side

Not all pages consist of simple, static HTML content. Some contain code, written in the JavaScript language, intended to be interpreted by the web browser. Internet Explorer also supports VBScript, but since other web browsers do not, its use is discouraged and largely avoided. If the web browser includes support for the embedded script language, the script will generate output that does chores such as generating part of the page, verifying the accuracy of form submissions without waiting for a round-trip to the web server, and so on.

Other pages contain references to files that can be downloaded and processed by embedded plug-ins . These plug-ins typically offer interactivity that is more sophisticated than simple HTML text and images, such as Flash animations and Java applets. We'll talk about these more later in this section.

Open Standards for Web Content

The best way to keep your web pages compatible with major browsers on both operating systems is to require your company's pages to be standards compliant and forbid the use of plug-ins and add-ons that are not supported on all platforms. Although this isn't a web development book, the more " buzzword compliant" you are when these discussions take place, the more influence you'll have. So it pays to know what you're talking about. The following list includes some of the more important standards you'll encounter regarding web content development today:

• HTML 3.2 The HTML 3.2 standard lacks support for style sheets and incorporates control of fonts and other layout issues directly into HTML. For those still concerned with Netscape 4.0 compatibility, HTML 3.2 remains an important fallback point. Fortunately, we can expect better from both Internet Explorer and Firefox. The Netscape 4.0 population has dwindled to less than 1 percent of the Internet community.

• HTML 4.01 This is the last official version of the HTML standard. HTML 4.01-compliant web browsers are expected to work with CSS level 1 and 2 style sheets as well. Both of the major browsers implement all elements in HTML 4.01 rather well. HTML 4.01 is a reasonable choice of standard for intranet use; however, we recommend XHTML 1.0.

• XHTML 1.0 XHTML has the same feature set as HTML 4.01, but documents must obey the more strict syntax of Extensible Markup Language (XML), a more general markup language of which XHTML is just one instance. XHTML is also a reasonable choice for intranets , since both major browsers implement the features of HTML 4.01 and accept the strict syntax required by XHTML. We recommend that you validate your intranet web pages for compliance with XHTML 1.0. Despite the change of name , XHTML is usually found in files with a .html extension.

• ECMAScript-262 The web browser programming language referred to as both JavaScript and JScript has been standardized under the lesser-known name ECMAScript. Both browsers offer reasonably faithful implementations of this standard. In this chapter we'll refer to the language by the better-known name JavaScript. JavaScript can be embedded directly into web pages. JavaScript is typically used for tasks such as validating the user's data entry to "save a round-trip" to the web server. The user can wait for the browser to talk to the server, submit their phone number, and get back a complaint explaining that they left out a digit many tedious seconds later or JavaScript code in the browser can detect that missing digit right away, pop up a warning, and save the user some trouble. Today, thanks to the Document Object Model (DOM) that we'll discuss next , JavaScript can also be used to create full-fledged interactive user interfaces like Google's gmail service that allow the user to do quite a bit of work without waiting to talk to the web server.

• Document Object Model (DOM), Levels 1 and 2 The ECMAScript-262 standard covers the JavaScript language itself. But ECMAScript-262 says nothing about how JavaScript code should interact with the web browser. The Document Object Model fills this gap by specifying exactly how code written in a browser scripting language (practically speaking, JavaScript or, on Internet Explorer only, VBScript) can carry out tasks such as inserting new XHTML elements into the page or checking the user's entries in a form. Both browsers support all of DOM level 1 and most of the newer DOM level 2 specification.

• Graphics Interchange Format (GIF) GIF is a long-established image format universally supported by web browsers. It's limited to 256 colors and appropriate for line art and other non-photographic, non-photorealistic images only. GIF also supports simple animation. GIF images are usually kept in files with a .gif extension. At one time the free availability of GIF was threatened by patent issues, but the relevant patents have now expired .

• Portable Network Graphics (PNG) Intended as a replacement for GIF, PNG was originally intended to avoid an intellectual property problem with GIF. The relevant patents have since expired, but PNG also supports "true color." That means there is no 256- color limitation on PNG images. However, PNG does not support animation. PNG files normally have a .png extension.

• Joint Photographic Experts Group (JPEG) JPEG is another long-established, widely supported format. It is a lossy format intended for photographs and other photorealistic images. By discarding less important information about the picture, JPEG is able to reproduce a photograph with a drastically smaller file size than PNG or GIF. However, this means that JPEG files should never be saved, reopened, and saved again during image editing. JPEG is only intended for final publication. That makes it ideal for websites . JPEG files are often found with both .jpg and .jpeg extensions.

  Warning 

  In 2002, a company called Forgent announced its acquisition of a patent relating to the JPEG format. Forgent has since levied license fees from or brought claims against a number of larger technology firms. This has led the ISO standardization committee to threaten to withdraw the JPEG standard because ISO standards must be royalty free. The JPEG Committee has called for submissions of "prior art" that may or may not invalidate this patent. To date, Forgent has not expressed interest in pursuing claims against individual websites that use JPEG-format files. The good news for the rest of us is that the patent expires in two years .

• Standard Vector Graphics (SVG) A newly emerging web standard, SVG offers an open alternative to Macromedia's Flash animation format. Unlike GIF, JPEG, and PNG, SVG describes graphics as a collection of geometric shapes . That means the graphics continue to look smooth even as you zoom in closer to them. Combined with JavaScript, SVG should one day be a full-fledged open replacement for Flash. SVG uses an open, XML-based file format and relies on JavaScript to add Flash-like interactivity. For now, though, SVG is one to watch, not one to rely upon. SVG support is not yet standard in either major web browser.

Ideally, web pages and other web content should comply fully with these standards. When they do, both browsers can support them without the hassles of reverse engineering.

Plug-Ins and Helper Applications for Special Content

The web browser also allows plug-ins and helper applications to handle file types it does not support directly. Examples of such file types include Macromedia's Flash and Shockwave animations, Sun's Java applets, and Adobe's Portable Document Format (PDF) printable documents and forms. Embedded audio and video file types are often handled by Microsoft's Windows Media Player or by RealNetworks's RealPlayer.

The distinction between plug-ins and helper applications is simple enough: If the content is embedded directly into the body of a web page, it's displayed by a plug-in. If the content is downloaded by the web browser but presented separately by an independent application with its own user interface, it's a helper application.

And plug-ins and helper applications are exactly where we are most likely to run into trouble on the browser side of the interoperability equation.