Note: This is an out-of-date but somewhat useful section of How Do They Do That With HTML?. This document is slowly being replaced by spiffy new ones, which are available from the front page.

ACCESS COUNTERS

Counters are usually either CGI scripts or C programs which generate GIF files. But they aren't too difficult to have on your page.

How to do it

Method 1: See if there's a counter program on your system already

Check with your system administrator about the availability of a local counter for your page. If you're lucky, there's a counter program set up for you to use, and your sysadmin can tell you how to set your page up for it.

Method 2: STEAL IT!

You can make a new counter for yourself using someone elses counter program. This way, you don't have to install a program on your system, just bum someone elses!

If I could give you a list of counters to steal, I would.. but in order to give all counters an equal chance at being stolen, you'll have to find your own. It's easy, though:

1. Find a web page with a counter
2. Do a View->Source
3. Find out the URL for the counter, and see where the unique identifier is (it should be somewhere after a "?" or a "/", and it might contain some part of the persons/pages name)
4. Replace the unique identifier with your name/last name/whatever and stick it at the bottom of your web page.
5. Cross your fingers, load up your page, and have a look!

Although stealing a counter is easier than setting one up yourself, a stolen counter might not work tomorrow.

Method 3: Install a counter program.

Installing a counter program is probably the best solution if your access provider doesn't have one already. You'll need the ability to install a CGI script on your server, or use a server-side include, depending on which counter program you want to use. Below is a list of some of the counter programs out there.

Related Links

Here are some free, public counter sites:
  • BeSeen.com is pretty cool. They have free counters, message boards, guest books, and other tasty trinkets.
  • The Counter gives good statistics as well.. even little graphs and stuff. The button that you put on your web page includes a small hit counter as well.
  • FastCounter is a counter service provided by the LinkExchange people. You'll end up with a counter and a link to LinkExchange.
  • Pagecount provides a free counter with statistics. The catch? The counter graphics includes an advertisement. It's your call.

Here are some counter programs out there that you can install on your system:

STATISTICS

Looking for statistics on your web page? You may be able to get them locally; ask your system administrator for more information, or check your local support web pages. If you know you can't do that, there are other options. Here are a cople places that provide full statistics for free or pay:

QUICK COLUMNS

Netscape 3.0 and above supports a new tag which allows for newspaper-style columns. This tag is fairly easy to use, too. Simply put <MULTICOL> tags around the text you want to put in multiple columns. You must pick the number of columns you want using the COLS attribute, and can optionally choose the spacing between columns (in pixels) using the GUTTER attribute. For example, the following would yield two-column text with a 5 pixel gutter:

<MULTICOL COLS=2 GUTTER=5>

The COLS attribute is required, while the GUTTER defaults to 10 pixels. Also, the exact width of columns can not by specified, and there's no way to say "End the current column here." Why not? The COLS tag is designed so that the columns are aligned properly no matter how wide your web browser is. If you need something more flexible, use an invisible (BORDER=0) table instead of columns.

BACK BUTTON

Some pages tell what the last page you looked at was, or even have a link to it. How? Each time you pull up a web page, your browser tells the server at the other end where you came from. A CGI script is called which gets that information from the server and prints it on the page. NCSA has a good example of a CGI script which shows the referring page, as well as other information. CGI is a bit too complicated to describe here, but NCSA's CGI Overview page can tell you more about using CGI, and Yahoo has a bunch of links to CGI-related pages.

DYNAMIC MENUS

If you're using Netscape, you may have noticed that the menu on the left is dynamic: when you move your mouse over an item, it glows. Setting up a menu like this takes more time than a typical imagemap because you have to make two of everything (the "off" version and the "on" version), but it adds a nice spice to any page.

How to do it:

Method 1: JavaScript Dynamic Menu

In case you're wondering, I used JavaScript for the dynamic menu at left.

There are some advantages and disadvantages to using JavaScript for dynamic menus. First, the menu will work on any web browser. If you use a web browser that doesn't support JavaScript, the menu will still show up and work without any special effects. Second, it's faster than most other methods. The main disadvantage is that it's not supported by Microsoft Internet Explorer 3.0. Again, the menu still shows up, but it can't be dynamic.

The process of making a JavaScript dynamic menu is fairly simple. You create the "on" and "off" graphics for each item in your menu, making sure both graphics are always the same dimensions. Then, all you need is the actual JavaScript code for the menu. If you know C or C++ and you're feeling a little adventurous, you can write it yourself. Rather than reinventing the wheel, though, I recommend taking a look at Dynamic Images and Menus, a JavaScript "Tip Of the Week" at webreference.com. This page provides you with the code and instructions you need. Just plug in the names of your graphic files, and you're set!

Method 2: Java Dynamic Menu

The Java dynamic menu is one alternative. It will work with Internet Explorer 3.0, and you provide a standard imagemap for browsers without Java support. A Java dynamic menu typically works a lot like an imagemap: it uses one "on" image, one "off" image, and a list of clickable areas within the image. This way, if you have a menu with 30 items, you don't need 60 graphics files. The only disadvantage of the Java dynamic menu is that it's always a lot slower than the JavaScript equivalent. At the end of this section, I've provided links to a few different Java dynamic menu classes.

Method 3: Macromedia Flash

Macromedia Flash is "the standard for interactive vector based graphics and animation for the web." It's built into Internet Explorer 3.0 and some distributions on Netscape. It allows for more than a basic dynamic menu--you can create animated menus and graphics with it. Flash is a creation of Macromedia Software. The plug-in to view Flash content can be downloaded from their page, but in order to create dynamic menus using Flash, you have to pay for the software. There's a trial version of Flash available for download; unfortunately, this method of dynamic menus will end up costing you money, but it can look really great if you do it right.

Related Links

Here are some good examples of dymanic menus:
  • IQuest Internet has a JavaScript-based dynamic menu on the left side of their main page. Looks nice!
  • Check out an example of Flash at E3 Direktiv.
  • The Simpsons web page doesn't have any dymanic menus (as far as I could tell), but has a lot of animations created with Flash. Pretty neat.

As promised, here are some Java-based dynamic menu applets:

  • DinkMap™ is an applet I almost used for this web page. It uses a standard imagemap style with the additional option of embedded sounds.
  • Webreference.com has a very nice and simple applet which uses an active and inactive image for each menu item. It also allows for embedded sounds.
  • Gamelan's Imagemap directory lists all current imagemap applets. Have fun!

DYNAMIC DOCUMENTS

Dynamic documents were added to Netscape in version 1.1N so that people could put the HTML equivalent of "In 5 seconds, load this URL" on a page, or make an animation which loads and displays itself frame by frame without any action by the user. Dynamic documents are easy to use, and have been used to do some really amazing stuff.

How to do it:

Method 1: Client Pull

A client pull allows the server to tell the browser to load a certain document in a certain number of seconds. For example:

<HTML><META HTTP-EQUIV="Refresh" CONTENT=1>
<HEAD><TITLE>Client Pull Example</TITLE>
<BODY>
<H1>Client Pull Example</H1>
This document will reload itself once every second.
</BODY></HTML>

The line <META HTTP-EQUIV="Refresh" CONTENT=1> tells the browser to request the page again in 1 second. Some sites use this type of client pull to refresh a document such as stock quotes or a video camera pointed at a city street.

Client pulls can also load a different document in a predefined number of seconds. For example:

<HTML><META HTTP-EQUIV="Refresh" CONTENT="5; URL=http://tashian.com/carl/~carl/index.html">
<HEAD><TITLE>Now Loading...</TITLE>
<BODY>
This example will send you to Carl's home page in 5 seconds.
</BODY></HTML>

Changing CONTENT=1 to CONTENT="5; URL=<my URL>" makes it go somewhere else once the time has elapsed.

Method 2: Server Push

A server push is more difficult since it envolves keeping a constant connection open between the client and the server, and having the server "push" data to the client to display, such as an animation, as a series of .gif files.

Server push is a bit too complicated to breifly describe here, so I'll refer you to the many links listed below. I personally recommend Netscape's An Exploration of Dynamic Documents.

Related Links

Here are some good links to pages about dynamic documents:

Dynamic Docmuent explanations:

  • The most cutting-edgest animationest page on the Web has examples and a full explanation of server push..
  • Netscape's Dynamic Documents page explains both "client pull" and "server push."

EASY BROWSER DETECTION

Why should you have to use a script to determine what browser someone is using? You don't. You can use a simple client pull on your main page to decide whether you get the Netscape/IE enhanced version of the page or the regular version.

How to do it:

Here's an example:

<HTML>
<META HTTP-EQUIV="Refresh" CONTENT="3; URL=nindex.html">
<HEAD>
<TITLE>Detecting your browser...</TITLE>
</HEAD>
<BODY>
<H2>We're detecting your browser now...</H2>
If you're using Netscape or Microsoft Internet Explorer, the enhanced version of this page will
automatically load. If not,
<A HREF="tindex.html">
CLICK HERE</A>
When people without Netscape or IE come in, they'll click on "CLICK HERE" and get the regular version of your page. When people with Netscape/IE get to this page, they are automatically advanced to the Netscape/IE enhanced version.

BACKGROUND SOUNDS

Background sound and music load and play by themselves after a page and its graphics are loaded. There are at least two methods for playing sound and music from within a web page. JavaScript also has an interface for embedded audio.

How to do it:

Method 1: The <EMBED> tag

The <EMBED> tag is a powerful feature of Netcsape Navigator 3.0. It allows for easy, built-in playing of WAV, AIFF, AU, and MIDI audio files as well as QuickTime movies, AVI files (under Windows 95 and NT), and VRML files. EMBED has a lot of options, but here are some of the ones you'll most likely be using:

<EMBED SRC="filename" width=144 height=74> will put a small sound player on the web page. It has play, stop, and pause buttons as well as a volume control. The width and height can be changed, but if you make it smaller than 144x74, it will start to cut off some of the controls.

The above <EMBED> command is the most basic one. If we take it one step further, we can get <EMBED> to automatically play the sound, and not show up on the page at all: <EMBED SRC="filename" hidden=true autostart=true> will play the sound file once and not show up on the page.

The EMBED command works on both Netscape Navigator 3.0 and above as well as Microsoft Internet Explorer 3.0 and above.

Method 2: Client Pull

You can also add a background sound using a simple client pull. Check this out:

<META HTTP-EQUIV="Refresh" CONTENT="1; URL=mysound.wav">

1 second after the page itself has loaded, the sound will load and play. It doesn't have to be a WAV file..just remember that the sound you pick will be played back on a variety of computers, so it should be in a sound format that can be played back on most computers. Although this "background sound" method isn't used much (in fact, I've only seen it in use once before), it has definite potential.

A side note on client pull: This is probably the trick I get the most e-mail about. A lot of people can't seem to get it working! In nine out of ten cases, though, the problem is on the client side. Make sure you have a working sound player set up as a helper application, and make sure your web browser supports client pulls. This trick does work.

Related Links:

HTTP COOKIES

The HTTP cookie seems to be one of the best kept secrets of Netscape. It's still experimental. As far as I can tell, they haven't announced it anywhere-- it was just suddenly supported by the browser. An HTTP cookie is a way to save information on the CLIENT side. Ever wonder how the Netscape Store works? Even if you leave the store, go to a completely different web site for a while, and come back, your shopping cart holds its items! Items in the shopping cart will stay there until they expire. This is a great example of the HTTP cookie.

How it works:

When Netscape's site wants to save information in your browser, it sends a command to your browser (which you don't see) in the following format:

Set-Cookie: NAME=VALUE; expires=DATE; path=PATH; domain=DOMAIN; secure

So, for the shopping basket, Netscape might send:

Set-Cookie: basket=128 426 234; expires=Wednesday, 09-Nov-99 23:12:40 GMT; path=/cgi-bin/basket_view; domain=merchant.netscape.com; secure

The variable "basket" is then set in your browser to equal "128 426 234," a list of item numbers you've requested; Whenever you go back to the basket viewer URL "http://merchant.netscape.com/cgi-bin/basket_view" before the expiration date, your browser sends this:

Cookie: basket=128 426 234

This lets the store know what items you're interested in so it can recreate your shopping basket.

HTTP Cookies are very powerful, but they require the use of CGI scripts or JavaScript. If you've got the guts to try it, take a look at the "Preliminary Specification" on Persistant Client-State HTTP Cookies. There's a lot more information on HTTP cookies there. Good luck, and let me know of any cool applications you've made with HTTP cookies!

TABLES & FRAMES

Tables and frames are two very nice additions to the Netscape Navigator, but are fairly complex. Unfortunately, they are beyond the scope of this document. I won't leave you stranded, though! For frames, take a look at Frames: An Introduction and Targeting Windows from Netscape (these are the document I used to create the frames on this page). If you want something that covers it all, Using Frames, Chapter 10 of HTML: The Definitive Guide, gives an excellent explanation of frames and their use. For tables, check out Netscape's Tables in Netscape 1.1 page. It has all the info you need to create tables of any kind.

A side note on frames: Even though I don't have much here about frames, I do have the answer to the most commonly asked frames question: How do you get frames to go away when linking to the outside world? Here's the answer: <BASE TARGET="_top">. It's that easy. Just put that tag near the top of your document. Want a more detailed explanation? Read Targeting Windows!

Another side note on frames: I've gotten many e-mails about the invisible frame border on this web page. Notice that you can scroll the right side of the page while the left stays constant, yet there's no visible border. Here's the <frameset> code from my index.html file:

<frameset cols="125,*" border=no frameborder=0 framespacing=0 bordercolor=#ffffff>
<frame src="f-left.html" marginwidth=0 marginheight=0 scrolling=no noresize border=no bordercolor=#FFFFFF>
<frame src="f-right.html" border=no bordercolor=#ffffff name="content">
</frameset>

The first thing you might ask is: Why are there so many "border=no" tags? I had to add tags everywhere in order to guarantee support for most browsers. Remember, you can never have too many extra tags. If the browser doesn't recognize them, they're ignored. The important tags here are border=no, frameborder=0, framespacing=0, and in the case of the left side, scrolling=no.

The second thing you might ask is: How did you get the gradient from black to white? That is a background graphic. It's 127 pixels across and 1 pixel high. (take a look). The graphic was made to fit just perfectly in the 125 pixel frame so that the white end was right at the edge.


© 1995-97 Carl Tashian {carl-htmlguide@tashian.com}
Last Update: November 23, 1997