Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

The Complete Idiot's Guide to Creating an HTML Web Page

Chapter 15 -- Hack to the Future: Whats Ahead for HTML and the Web

Chapter 15

Hack to the Future:
What's Ahead for HTML and the Web




CONTENTS

I love watching old film reels or reading descriptions of any World's Fair from earlier in this century. There was always an "Exhibit of the Future" that-thanks to its breathless depictions of flying cars and self-cleaning homes-now provokes lots of hindsight-induced guffaws. The problem, I think, is that predicting the future is really just a fool's errand. The pace of technological change is too great and, perhaps more importantly, the direction that change takes is too unpredictable.

That, of course, is no great impediment for the world's futurologists and forecasters. These fearless prognosticators are only too happy to wax prophetic about the state of some future union, upcoming social or cultural trends, or the Spirit of Christmas Yet-to-come.

So, hey, if everybody else is doing it, why can't I? In this chapter, I'll embark upon my own complete idiot's errand and examine what's on the HTML horizon. A disclaimer, though, is in order: The World Wide Web changes so blindingly fast, it's not possible to even guess what things might be like in a couple of years. (And if you meet anyone who thinks they know, you have my permission to hit them upside the head with this book.) So, instead, I'll just focus on a few of the "bleeding edge" technologies that are emerging as this book goes to press (early 1996). (A note to those of you reading this book in 1997 or later: Try to keep the laughter down to a dull roar.)

The Java Jive: A Piping Hot Mug of Browser-Based Programs

1996 will be the year that pages move away from the simple type-it-and-send-it world of forms and start performing the Web equivalent of singing and dancing. That is, Web pages will no longer be restricted to static displays of text and graphics, but instead will become dynamic, kinetic, and, yes, truly interactive environments. Instead of mere documents to read and look at, pages will become programs that you can manipulate and play with.

The engine that's propelling this sea change is an amazing new technology called Java that's poised to become the biggest thing on the Web since, well, the Web itself. The idea behind Java is amazingly simple, but devilishly clever: When you access a Java Web site, your browser gets not only a page containing the usual HTML suspects, but it also receives a program. The browser (assuming it can tell a Java program from a Jackson Pollock-more on this in a sec) then runs the program right on the Web page. So if the program is, say, a game of Hangman, then you'll be able to play Hangman right on the page. Now that's interactive!

These Java programs (or applets, as they're sometimes called) are written using the Java programming language developed by Sun Microsystems. Here are a few advantages that Java programs have over traditional software:

What You Need for Java

So what do you need to start sipping some of this Java? Well, for starters you need a computer capable of handling Java. When this book went to press, Java had been implemented for three operating systems: Windows 95, Windows NT, and SPARC Solaris (a UNIX operating system). Plans were in the cards to bring Java to Macintosh computers in early 1996. Sun has no plans to implement Java on Windows 3.1, OS/2, Amiga, NeXT, or Linux systems, but they've made the Java code available to others who might want to bring Java to these machines.

The other ingredient you need for a good cup of Java is a Web browser that knows what to do with any Java program that comes its way. Although I expect that any browser that wants to survive will become "Java-enabled" eventually, at the moment there are only two browsers that do Java:

Netscape Navigator 2.0-This is the latest release of Netscape, and it handles Java applets seamlessly. You can get a copy from the Netscape Web site:

http://home.netscape.com/

HotJava-This is a Web browser developed by Sun, the inventors of Java. You can grab it from the Java Web page:

http://java.sun.com/

Some Java Examples

Java is already the talk of the Web, but it will become huge for one simple reason: there's really no limit to the kinds of things you can do with Java programs. In these early stages of the Java revolution, many of the examples you see are simple because the programmers have just constructed quick-and-dirty programs. Animations, crude games, clocks, and calculators are the extent of the Java universe at the moment. However, it's only a matter of time before these basic applications give way to full-blown software packages: word processors, spreadsheets, real-time stock quotes and portfolio management, high-end games, and much more.

Until that day comes, however, we have to content ourselves with the basic Java programs currently available. That's not to say I'm disappointed by the present crop of Java doohickeys. Far from it. This Java jazz is such a radical departure from typical Web content that interacting with even the humblest applet is a revelation. So, in that spirit, let's visit a few sites that boast some Java functionality.

The best place to start is a Web site called Gamelan, which serves as the Web's unofficial "directory and registry of Java resources." Gamelan boasts hundreds of Java programs, arranged in many different categories, including Animation, Finance, Games, and Special Effects. Here's the URL:


http://www.gamelan.com/

Our first example is a Java version of the classic arcade game Breakout. The picture below shows a game in progress. You can get to this program directly by using the following URL:


http://www.cee.hw.ac.uk/~calum/java/breakout.html

The Breakout arcade game, Java-style.

I think one of the most common Java applications you'll see is real-time updating of information, especially stock quotes, sports scores, and late-breaking news. For example, the c|net Web site features a Java program that displays a "ticker-tape" style news feed at the top of the page (see the figure below). To check it out, head to the following site:


http://www.cnet.com/

The c|net Web page uses a Java program to display a ticker-tape news feed.

There are also applets that come with the HotJava browser (including, yes, a game of Hangman), and you can find more programs at the Netscape and Java Web sites:

Netscape:

http://home.netscape.com/comprod/products/navigator/version_2.0/java_applets/index.html

Java:

http://java.sun.com/applets/index.html

VRML: Another HTML Dimension

Java may currently be the apple of the Web's eye, but there's another technology on the horizon that promises an equally radical change in the way we approach the Web: VRML. VRML (which is pronounced vermal by the cognoscenti) stands for Virtual Reality Modeling Language.

Virtual Reality?! You mean I have to surf the Web wearing funny gloves and ridiculous-looking headgear?

Happily, no, that's not what VRML is all about. The VR part of VRML indicates that VRML Web sites are 3-D "worlds" that you "enter" using a VRML-enhanced browser. You can then use your mouse to "move" around this world in any direction. For example, consider a Web-based shopping mall. With a page made up of standard HTML codes, you'd probably see a few links that would take you to one store or another. If it's a shopping mall based on VRML, however, you can "walk" through the mall, examine the storefronts, and then saunter through the door of a store that looks interesting.

This sounds miraculous, and when you first try it, you can't believe you're actually doing what you're doing. But, as with Java, the underlying principle behind VRML is quite simple. Just as HTML is, in essence, a set of instructions that tells a browser how to display a document, VRML is a set of instructions that tells a browser how to create and navigate a three-dimensional world. These instructions are interpreted by a renderer, which is either a separate program or incorporated into the browser. The renderer takes the VRML instructions, uses them to build the 3-D world, and allows you to move anywhere-left and right, up and down, in and out-through this world.

VRML Browsers

To try out VRML you need to have the proper software that knows how to accept and render VRML worlds. This software comes in two flavors:

Plug-ins-These are VRML applications that fully integrate themselves with an existing browser. For example, Paper Software's WebFX "plugs in" to Netscape 2.0 and so becomes a seamless part of the browser. (See "A Look at What's New in Netscape 2.0" to learn more about plug-ins.) To learn more about WebFX and to get your mitts on a copy, head for the following URL:

http://www.paperinc.com/

Stand-alone programs-These are separate VRML programs that are also full-fledged Web browsers in their own right. An example of a stand-alone VRML program is Caligari's Fountain, which you can get from the following locale:

http://www.caligari.com/

To stay up-to-date on the latest happenings in the VRML browser world, keep an eye peeled on the VRML browsers page of Stroud's Consummate Winsock Applications site. Here's the full URL:


http://cwsapps.texas.net/vrml.html

Over, Under, Sideways, Down: Some VRML Worlds

Talking about VRML is like talking about sex: the biggest thrills don't happen until you actually get down to brass tacks and start doing it. So, now that I've piqued your interest, let's break out of boring, old 2-D cyberspace and check out some radical 3-D VRML worlds.

We'll begin our tour at the WebFX home page, which has a list of cool VRML sites at the following URL:


http://www.paperinc.com/wrls.html

There are dozens of VRML sites on this list, and any one of them is a fine way to experience the rush of VRML flying. For example, select the VRSOMA site to travel through a virtual city. Here's the URL, and the picture below shows the opening scene:


http://www.hyperion.com/planet9/worlds/vrsoma.wrl

VRSOMA: a virtual city suitable for strolling.

Some VRML sites actually let you create a VRML world on the fly (so to speak). One of my favorites is the Virtual Jack-O-Lantern at the following URL:


http://www.chaco.com/~glenn/jack.cg:

You select a few options that govern the size and shape of the Jack-O-Lantern's eyes, nose, mouth, and stem, and then your Halloween pumpkin is carved up for you in a few seconds. You're then free to zoom around your creation. The picture below shows how things look from inside a Jack-O-Lantern. Scary!

The view from inside a virtual Jack-O-Lantern.

The number of VRML sites is growing rapidly, so there'll be no lack of worlds in which to do the "Sister Bertrille" thing (for you youngsters in the crowd, she was TV's Flying Nun way back when). Here are a few other general VRML sites that you can check out for the latest and greatest:

The Web Gate to VR:

http://Web.Actwin.Com:80/NewType/vr/vrml/index.htm

Protein Man's Top Ten VRML sites:

http://www.virtpark.com/theme/proteinman/home.wrl

Yahoo's VRML Index:

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Virtual_Reality_Modeling_Language__VRML_/

A Look at What's New in Netscape 2.0

You saw back in Chapter 10, "Fooling Around with the Netscape Extensions," that the Netscape browser leads the pack in implementing new HTML innovations. Now, with the release of version 2.0, Netscape is once again ahead of the HTML curve.

Netscape 2.0 sports all kinds of new features, including support for Java programs (as described earlier), an integrated and full-featured e-mail program, and a built-in newsreader. But there are also plenty of what-will-they-think-of-next goodies for Web weavers. The next few sections take you through the highlights.

Divide and Conquer: Frames

One of the keys to a successful Web site is to make it easy for surfers to surf your pages. This means, usually, including links at the top of the page (and sometimes at the bottom) that take the reader back to your home page or to other pages at your site. This convenience is defeated, however, if the links disappear once someone has scrolled down the page.

Wouldn't it be nice to have a "toolbar" of links that always stays visible? Well, with Netscape's new frames, you can. Frames work by dividing up a Web page into rectangular areas that contain separate chunks of text, graphics, and HTML. In other words, you can use frames to divide a single Web page into two or more separate pages. So, for example, you could have a small frame at the top of the screen that contains your navigation links, and then a second frame that displays the content. The reader can scroll through the content frame all she likes, and the navigation links remain handily in place, just like a toolbar.

Creating toolbars is only the beginning of what you can do with links. They're perfect for keeping a logo onscreen or an advertisement; you can use them for a table of contents, banners, help information, or whatever you like.

Let's check out an example: the product info page for Netscape 2.0 itself. Here's the address:


http://home.netscape.com/comprod/products/navigator/version_2.0/index.html

The following figure shows the screen you'll see. Notice how the content area is split into two sections: the bottom section shows a few navigation icons that you can click on; when you do, the results appear in the top section. For example, clicking on the Frames icon takes you to a new page that explains how frames work. As you can see below, the upper frame displays the new content while the lower frame remains the same.

A Web page with two frames.

When you select the Frames icon, the upper frame displays a new page.

Power On Demand: Plug-Ins

Back in the old days (a couple of years ago!), Web browsers could only handle text and a few graphics. But with the multimedia boom of the past few years continuing apace, Web authors wanted to bring better bells and whistles to their creations. So while browsers weren't sophisticated enough to handle, say, sound and video files, most of them were at least smart enough to pass the buck. That is, the browser let you designate "helper applications" that would play the sound or run the video for you.

This works reasonably well, but surfers started clamoring for Swiss army knife-type browsers: programs that could handle any type of content right out of the box. That hasn't happened yet, but Netscape 2.0 takes a large leap in that direction with its new plug-in feature. A plug-in is a software program that fully integrates itself with Netscape. A good example is the WebFX VRML browser I mentioned in the last section. When you "plug" WebFX into Netscape, you gain the ability to view and manipulate VRML worlds. Everything happens right inside the Netscape window, so the added functionality of WebFX is completely seamless. Here's the URL of the Netscape page that discusses plug-ins:


http://home.netscape.com/comprod/products/navigator/version_2.0/plugins/index.html

As I write this, WebFX is the only plug-in available, but there are many more in the works that should be out soon. Here's a sample:

Adobe Acrobat-This plug-in will allow Netscape to display Acrobat's PDF (Portable Document Format) files. PDF files enable you to combine fonts, colors, and graphics much more easily than you can in HTML.
Macromedia Director-This plug-in gives Netscape the ability to read and display multimedia presentations produced with the Macromedia Director software. This program lets you create documents that contain movies, animation, sound, and more.
QuickTime-This plug-in enables you to play QuickTime video files directly from the Netscape window.

Java for the Masses: JavaScript

Java is a welcome addition to the Web authoring tool chest, but its appeal is limited to hardcore programming types who live for all-night coding sessions fueled by pizza and Jolt cola. For the rest of us, Netscape has developed a scaled-down version of Java called JavaScript. Yes, it's still programming, but it's a bit more accessible to non-geeks.

JavaScript code goes right inside the Web page, just like HTML tags. When a Netscape 2.0 browser accesses the page, the JavaScript code is executed and the program does its thing. For example, the program might check the time of day and display an appropriate welcome message. Or you could embed a calculator right on the page. There's no limit to the kinds of things you can do. If you'd like to know more about it, head for the following page:


http://home.netscape.com/comprod/products/navigator/version_2.0/script/index.html

Thar's Gold in Them Thar Pages: Netscape Gold

With the release of Navigator 2.0, Netscape is making its bid to become the all-purpose, "everything but the kitchen sink but wait until you see what we have in store for version 3," Swiss army knife of the Internet. Besides being one of the best Web browsers around, Netscape 2.0 is also stuffed with an e-mail program, a Usenet newsreader, and the ability to handle most other Net services, including FTP and Gopher. And, as you saw in the last section, you can even stick in a few extra utensils by taking advantage of plug-ins such as WebFX.

But that wasn't enough for the Web's resident greedy-guts. Oh no. They shouted "Give us more! Give us more!" so the eager-to-please souls at Netscape obliged by bringing out Netscape Navigator Gold. This version of Navigator has the same great features as the regular version, but it also includes the ability to edit HTML documents right in the browser! Cool? Way.

Unfortunately, as this book went to press Netscape Gold wasn't ready for prime-time, which means I can't discuss any of its features in any depth. But rather than simply ignoring this handy new technology, this section gives you a sneak preview of what Navigator Gold is all about and then you can try it out for yourself when the Netscape folks finally release it. (Keep your browser's eye peeled on the Netscape home page---http://home.netscape.com/-for announcements about the availability of Netscape Gold.)

When you load Netscape Gold, you'll see the usual Netscape screen. Hmm. No gold bars or trimmings; no gold-plated toolbar buttons; just the same ol', same ol', apparently. That's because you're looking at the browser part of Netscape. Recall that Netscape is now more like a Swiss army Knife, so getting to the "Gold" part means you have to "pull out" a different tool. Specifically, you have to start the Netscape Editor by pulling down the File menu and selecting the Edit Document command. Ah, that's more like it. You should now see the Netscape Editor window, with some new HTML-related toolbars and menus.

How Netscape Gold Works

When you're playing around with the Netscape Editor, bear in mind that you won't be working with HTML tags directly. Rather, you type in your document text and then use the editor's menu commands and toolbar buttons to "format" the text. This formatting is the same as adding tags, but the Netscape Editor doesn't display the HTML nuts and bolts. Instead, it just shows you what your text will look like in a browser (or, more accurately, in a Netscape browser). In other words, the Netscape Editor is a WYSIWYG display. (WYSIWYG stands for What You See Is What You Get, although some pessimistic wags prefer When You See It, Won't You Gag?) Here are the basic steps you'll follow for each document:

  1. Type in your document text.
  2. If you want to format some text, select the text you want to work with; if you're inserting an HTML object such as a link or an image, position the editor's cursor where you want the object to appear.
  3. Choose the appropriate menu command or toolbar button.
  4. Save the file from time to time.
  5. Repeat steps 1-4 until you're done.

Here's a quick rundown of how the Netscape Editor handles various HTML knickknacks:

Paragraphs  Remember way back in Chapter 4 "Laying the Foundation: The Basic Structure of a Web Page," when I told you about the <P> tag? At the time, I mentioned that pressing Enter to start a new paragraph didn't work in HTML because you had to use the <P> tag, instead. Well, you can forget all that because, in the Netscape Editor, pressing Enter really does start a new paragraph. No, Netscape hasn't rewritten the HTML specifications (although, with all those darned Netscape extensions, it sometimes seems that way). Instead, pressing Enter in the Netscape Editor adds a <P> tag behind the scenes. With the WYSIWYG stuff, all you see is the result: a new paragraph.
Character Formatting  The Netscape Editor is loaded for bear with all kinds of character formatting options (most of which I droned on and on about back in Chapter 5 "From Buck-Naked to Beautiful: Dressing Up Your Page"). Again, you apply these formats just as you would with a regular word processor:
Headings  In the Netscape Editor, headings are styles that you apply to a paragraph. When you apply a style for, say, an <H1> heading, the paragraph font changes to that of an <H1> heading, just like that!
Lists   If you need to add a list to your document (be it a bulleted, numbered, or definition list), the Netscape Editor can cope. (I took you through all this list lunacy back in Chapter 6 "A Fistful of List Grist for Your Web Page Mill.") The idea is that, using styles again, you first insert the list container (in the HTML world, this means <UL> and </UL> for a bulleted list; <OL> and </OL> for a numbered list; and <DL> and </DL> for a definition list), and then you format individual items as list items (the <LI> tag) in a bulleted or numbered list. If you're dealing with a definition list, you format the items as terms (the <DT> tag) and definitions (the <DD> tag)
Images  Looking to add an image or two in order to give your page some added oomph? (I gave you the big picture on images in Chapter 8 "A Picture Is Worth a Thousand Clicks: Working with Images.") In the Netscape Editor, an image is an object with various properties (the name of the graphics file, the alignment, the size, and so on). The Netscape Editor makes it easy to insert an image by displaying a single dialog box that lets you fill in all of these properties.
Links  Back in Chapter 7 "Making the Jump to Hyperspace: Adding Links," I showed you how to add some dynamism to your documents by inserting hypertext links. If you always have trouble remembering the proper syntax for the <A> tag, fret no more because the Netscape Editor makes it easy. In fact, there are two methods to use: you can create new links from scratch, or you can insert links from your Netscape Bookmarks. Inserting links from scratch is similar to inserting links: a dialog box appears that lays out all your choices in front of you. Just fill in things like the URL, the link text, and so on, and the link is added without any fuss. An even easier method uses your Bookmarks window. Using your mouse, you just drag a bookmark from the list and drop it on the Web page. The Netscape Editor creates the link automatically.

As you can see, Netscape Gold's editor ushers in a new era of easy-as-pie Web engineering by hiding all that HTML foofaraw. Your brain will be, I'm sure, eternally grateful.

The Least You Need to Know

In this chapter, we pulled out our crystal ball and gazed into the future of HTML. Just in case you weren't paying attention, here's a quick look at what happened: