Adding counters, forms, and other web novelties.

There are hundreds of fun things that you can add to your webpage to make it more fun, professional, or even annoying. The advanced web design class will discuss many of these things and I suggest that you enroll to learn more. You can add such things as counters, chat rooms, whiteboards, forms, shopping carts, banners, pop-up windows, live web cams, guestbooks, discussion groups, mailing lists, greeting cards, advanced graphics, sound, video, cartoons, databases, search engines, and dozens of others. Most of these things are fairly easy to add to your webpage and there are tons of resources on the Internet to help you. Many such novelties are added as easily as inserting a line of HTML code.

This page will focus on just a few of these page enhancement features - counters, forms, and sound.

Adding Counters

I am sure everyone has seen counters on webpages before. They are the graphical images that display the number of visitors that have visited that site.

Rule #1 regarding counters - don't add counters to business webpages. Who cares how many visitors you have had if you haven't sold anything?

There are two ways of adding counters to your webpage. The first is to program the counter yourself and save it in a special place on the web server. This is probably the best way because you have control over the counter and the browser doesn't have to get the counter image from another server somewhere on the Internet. However, most web hosting servers do not allow you access to this 'special place' on the server. It is called the cgi-bin, and it is a place where programs can actually run from the server. Contact the administrator of your server to see if this is an option. If it is, there are many places on the Internet that will supply you will the program and HTML code to run your own counter.

The second way of getting a counter on your page is to use somebody else's server to store the number of visits and the graphics that make up the counter. Again, you can search the Internet for several companies that will supply and run your counter. Most of these counters contain some sort of advertising. Most free counters also allow you to get additional information about the visitors to your site, such as when they came, what site they came from, how long they stayed at your site, and several other options, depending on the service. These additional services are great for monitoring the traffic to your site. They sometimes allow you to adjust your counter as well, by choosing from a number of graphics, boosting the number of visitors, or recording only certain visitors.

Rule #2 regarding counters - Don't fake the number of visitors listed on your counter.

The easiest and most reliable free counter service I have found is webtracker. Adding this counter to your site is as easy as 1, 2, 3.

  1. Register and get your counter information. This involves picking a public and private password - and that's all.
  2. Copy their line of HTML code (an IMG tag pointing to their server) and paste it into your HTML document.
  3. Save and update your page to the Internet. Test your counter to make sure it works.

Webtracker's counter looks like this -

Webtracker also allows you to go to their webpage and view statistics about the visitors to your page. If you don't like Webtracker, there are many other sites that offer similar services. Go to thefreesite.com to search for more free counter services. An excellent counter that keeps track of nearly all information about your visitors is sitemeter.com.

Adding Response Forms

Some websites add response forms to ease in contacting individuals or in ordering. Forms can be very advanced and technical, but simple forms are quite easy to create and add to your page. Some people do not like forms, because e-mail can do the same thing. Again, there are two ways to get a form on your site - maintain the form from your own server using cgi-bin, or use somebody else's server. And again, most people can only use somebody else's server.

What a web form basically does, is takes the information that was entered and sends it to the server, which organizes the information and E-mails it to a specific person. To get a form to work, you have to have access to a server that can run programs. Most users don't have access to this portion of the server, so other people let you use their servers. The best form processing server I have seen is located at www.response-o-matic.com. This company let's you use an online form generator. They ask you what kind of form you want and the form generator creates the HTML code that you add to your webpage. However, the code for the form usually needs lots of formatting to add the stuff to your form that you want. There is excellent information on their webpage about how to format the form to work for you. You can add such form objects as


check boxes
radio buttons
list boxes

The trick is assigning each form object to mean something to the server. Read the help pages at response-o-matic to get your form working the way you want it to. When people fill out the form and click send, the information in the form is e-mailed directly to you. This is a great way to get your visitors to contact you. It can also be used for sales, but most online shoppers prefer a more secure way of inserting personal information. The advanced class will cover such topics. Thefreesite.com also has links to find free form processors.

Adding Sound To Your Webpage

Rule #1 regarding sound - don't use it.

Kind of a weird rule, huh? What I mean is, don't use it unless you know your visitors want to hear it. Many people are on the Internet in places where they don't want their speakers blaring sound or music all of a sudden (i.e. work). Always give your visitors the option of playing the sound or not. Also, sound files can be very large in size, so use them carefully and at the end of your HTML document so everything else loads first.

Adding sound is very similar to adding an image - you create a reference to a sound file, which then can be played from the browser. Sound files must be in the .wav, .midi, or .au file format to work in any web browser. Some computers will also recognize .mpg or .mp3 file formats. The most common are .wav files. You can create or record your own .wav files using a microphone and Sound Recorder which comes with Windows95.

There are three ways to get the sound to play from your webpage.

OPTION 1 - external sound
The first is to add a link directly to the sound file. When the link is clicked, the user's computer will open the file in a helper application - usually Window's Media Player for Windows and Sound Player for Macs. Netscape will usually play the sound directly from the browser. To do this, just create a normal link to the sound file like this.

<A HREF="sound.wav">Listen.</A>

would display

Listen.

Click on the link to hear the sound. IE users will have to select "Open file from its current location." Netscape will open a small sound window that will then play the sound. Remember, the sound file may have a different extension. You can link to sounds anywhere on the Internet in this way, but the user must click on the link for the sound to be played. The link can also be a graphic. This is probably the best way to add sound because it will work with both IE and Netscape.

OPTION 2 - internal sound
The second way is to used for playing sound in NETSCAPE ONLY AND NEWER VERSIONS OF IE!!! Netscape includes a small program, called a plug-in, that allows sound to be played directly from the browser. The tag to add sound to your web-page is -

<EMBED SRC="sound.wav">

You can customize this sound in many ways. First, you can add a sound control with the CONTROLS="form" attribute. You must also specify a WIDTH and HEIGHT for each control. The CONTROLS attribute is optional, but is needed to start the sounds. The options are CONTROLS=

"console" WIDTH="145" HEIGHT="60"
"smallconsole" WIDTH="145" HEIGHT="15"
"playbutton" WIDTH="35" HEIGHT="40"

Here is an example of "console":

<EMBED SRC="sound.wav" CONTROLS="console" WIDTH="145" HEIGHT="60">

would display

You can click on the play button to listen to the sound. Right click to save. You should also add the following attributes:

AUTOSTART="true" or "false" - true will automatically start the sound playing. If set to true, you need no CONTROL, but the user will not be able to then stop the sound. ALWAYS SET TO FALSE!

LOOP="n" or "true" - n equals the number of times you want the sound to repeat. The value "true" will cause it to repeat until the visitor either leaves or clicks a stop or pause button.

ALIGN="left" or "right" - used to align the controls.

HINT: Newer versions of IE will recognize the <EMBED> tag, but the console does not display the same as in Netscape. If you leave out the HEIGHT and WIDTH attributes, it will display fine, but then it looks weird in Netscape. THE BEST BET FOR ALL BROWSERS IS TO USE OPTION 1 ABOVE. THE TAG ABOVE, WITH CONTROLS="CONSOLE" WILL ALSO WORK OK, BUT SET AUTOSTART TO FALSE OR IE WILL AUTOMATICALLY PLAY IT.

OPTION 3 - background sound
The third way to play sound is as a background sound. This is used for playing background sounds in IE ONLY. This way is not recommended because the viewer has no control over the sound. The tag looks like the following:

<BGSOUND SRC="sound.wav">

You can add the LOOP="n" to specify the number of times the sound repeats. LOOP="infinite" will repeat the sound until the visitor leaves the page.

HINT: Try to put the sound tag towards that bottom of your HTML document, so the rest of the page can load, before the browser begins downloading larger sound files.

Embedding Video
If your visitor's computers are equipped, you can play video directly in their browsers by embedding a video file. The video must be in the .avi or .mov file format. The tag would look like this:

<EMBER SRC="movie.avi" WIDTH="w" HEIGHT="h">

WIDTH and HEIGHT are the sizes of the video window that will be displayed. The possible attributes are AUTOSTART="true" to automatically start the video, LOOP="true" to have the movie loop continuously, and ALIGN="direction" to align the video window either left or right.


A few fun things I have found to put on your webpage and to make it better.

Web Site Garage - tune-up your webpage. This free service checks every aspect of your site to make sure it is running smoothly. An excellent service!!!

groupboard.com - add a chat program and draw pictures with others over the Internet on your webpage.

javagoodies.com - add fun java stuff to your page.

thefreesite.com - tons of free stuff to use on your page.

gifcruncher.com - reduce the size and download time of your web graphics over the Internet.

clipart.com - find 1000's of free graphics.

guestbook.mycomputer.com - add a guestbook to your page.

download.com - download nearly any program on the planet.

Well folks, that's all! If you have any ?'s, be sure to e-mail. Have fun!