Artist At Large

Home Improvement

by Kenny Greenberg

There are a host of features you can use to embellish your basic home page.

Last month, we looked at the basic structure of the Web home page and explored the simple programming language that turns a document into a hypertext page. Hypertext Markup Language (HTML) is the set of special tags that allows you to dictate effects such as bolding and italics on a Web page (for detailed information on HTML, see http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html), and, most importantly, it can mark a phrase that becomes a selectable or clickable spot on your page linked to another document or application. But HTML can do much more. A host of desktop publishing features--such as lists, bullets, underlines, and formatted tables, to name a few--are avai lable.

Most anyone with a standard Unix shell account can write HTML (it's a simple ASCII text file with some special symbols) and then test it with Lynx or another non-graphical browser. To fully appreciate the impact of graphical presentation, a graphical brow ser, such as SlipKnot from your shell account or any of the various browsers such as Mosaic or Netscape from a SLIP/PPP or direct connection, is preferred. To write a world-browsable home page, you must either have an account on a system that offers Web s pace to its users or have a server of your own connected to the Net.

Take Me Home

Let's first look at the most basic form of presentation on a Web home page. Suppose I want to create a résumé that has a bit more than the usual brief listing of accomplishments. I could, for example, use HTML to place tags around my job tit le at Widgets Inc., and if the reader chooses to click on that phrase, a new page would appear with a more detailed description of my role as head of the Widgets department of gizmo research.

The statement in HTML might look something like this: <A HREF="My_Resume/Widgets/Gizmo.html"> Gizmo Research</A>, where "Gizmo Research" is the clickable phrase. Of course, I would create still more hypertext tags on this page that linked to o ther documents. The reader could click on Gizmo Products and a list of Gizmo products and the company's walloping financial success would follow. Clicking back to the résumé home page, the reader would be free to make choices as to what area and what level might be interesting to try next. Thus, the résumé is clear and succinct, yet beneath its surface is a wealth of information.

Now let's say you're a clothing designer and would like to display pictures of your work on your home page. The IMG SRC tag allows you to place an image in your document. The HTML statement would be: <IMG SRC="Fall_Coat.gif" ALIGN="top"ALT="Image of a Fall Coat">.

The image file, generally a GIF file, can be either an inline image or an external one. An inline image is a graphic that is actually on the page. There are choices as to where the image is placed and whether surrounding text is aligned with the image's t op, middle, or bottom. A graphical browser such as Mosaic is necessary to view the image, and, thus, an additional tag, Alt=, is provided. It allows the name of the image to be displayed by non-graphical browsers or browsers where graphics are turned off.

External images can exist in one of many formats and can be downloaded by a non-graphical browser. A graphical browser uses an external program such as lview (or any graphic-viewing package you configure) to view the image.

The images discussed above are passive. It is possible to have more fun and add more interest with active or clickable images. By using the IMG SRC tag with a standard URL (Uniform Resource Locator or the address of the link to which you are pointing), th e image takes the place of a hypertext-highlighted phrase and acts as the trigger to the link. In HTML this would simply be: Click here<AHREF="Fall/Coats/Describe.html"><IMG SRC="icon.gif">.

Active images can be small, low-resolution, minimal-color thumbnail images. Rather than inflicting several 200K or more of graphical files on the reader, a simpler low-overhead preview catalog is displayed. Each thumbnail might only occupy 5K or 10K, maki ng your presentation far more tolerable to the reader.

Another nice feature of HTML active-image processing is the mappable image. Here, one large image has several active zones within it, which act as independent hypertext links. Once you know the coordinates that define the size of the image, it is possible to specify rectangles, circles, or polygons at particular locations and of particular size on the image. In effect, you are transparently superimposing these shapes onto the image. Clicking on the active invisible shapes triggers the hypertext action.

Movies in MPEG, AVI, and QuickTime format can be served by HTML as well. Movie files are played by a browser in much the same way as external images; the main difference is the huge size of digital movies. A non-graphical Web browser will download a movie file and a graphical browser will call an external movie-player program to display it. In both cases, you must have the proper player for the file format (see "Files Come in Flavors," March IW) on your system.

When you select a movie, the player software--QuickTime, for example--pops up over the browsing application. You then click on the play button to view the video. It is possible to play the movie again and again or save it for future play. You must then re turn to the browser.

To link to a movie file in HTML, simply reference it by path and name just as you would link to any other file. Sound files (generally in .au format, although any format is acceptable as long as the proper player on the other end is available) are called up by the hypertext link in exactly the same way.

Putting all of the above together, you begin to see that a sophisticated presentation can be created simply.

Keep in mind that an HTML file is merely a text file with special markers before and after any point in the text that you wish to place your link. The link is nothing more than the name of another text, graphic, sound, or movie file on your system or on a remote system to which you connect via a proper Internet address.

If you have advanced skills, the file can even be an executable program written in any number of languages, including shell scripts. When you add images, movies, and sounds to your home-page documents, they become user-directed and, therefore, truly inter active multimedia presentations.

Better Browsing

There's an extra bonus in all of this. Most browsers intended for Internet surfing can display HTML pages offline as well. By simply telling the browser that you are loading a local page, it will look on your own computer's directories for the requested f iles. With the exception of files or applications that are on remote hosts (FTP, telnet, etc.), the exact directory structure that exists on the Web server machine or account can be duplicated on your own box.

It is not even necessary to convert the Unix forward slash to a DOS backslash; even references to remote files or services are escaped from gracefully. The beauty of this feature is not only that you can pretest presentations that you intend to place onli ne and that your preview is at the full speed of your machine's processor rather than the modem connection speed, but that it's also possible to create presentations for offline viewing. My experience has shown that although this method lacks pizzazz and effects such as flying titles that you might find in advanced presentation software, it is nonetheless a quick, easy, and reliable way to create fairly universally viewable presentations that will run on any platform.

What I like best about this method of creating interactive presentations is their instant portability to the Internet. The presentation you create locally will run globally.

Very recently, I've begun to work with forms. HTML includes a protocol for creating fill-out forms with selection boxes, radio buttons, and other nifty features. The forms are displayed to the user who has proper browsing software; they are filled in and sent back to the server for processing. Before my e-mail box gets crammed with requests for how this is done, let me warn you that although creating a form is simple, processing them definitely is not. I mention forms as an example of the many features a vailable to the HTML author.

The next version of HTML will bring new features as well as enhancements for existing ones. With a bit of patience and careful reading of the documentation and examples found online, you can begin to put together professional presentations for pleasure an d business. Although there are software packages emerging that are designed to do all this work for you, you most likely will achieve a far greater understanding--and therefore better abilities--if you try to learn HTML manually now.

Kenny Greenberg (kgreenb@panix.com) is a neon artist and owner of Krypton Neon in Long Island City, N.Y.

Copyright (c) 1995 by Mecklermedia Corporation. All rights reserved. Material may not be reproduced or distributed in any form without permission.