Doo-dads

Adding Sound
Counters
CSS Formatting

Adding Sound

This is really easy.

Sound files are added as links. Like an image or background, they must be uploaded to the server and stored there. .mp3 and .wav are common file types.

Simply type:

<A HREF="filename.wav">listen to my audio file</A>

The words "listen to my audio file" will appear as a link; when clicked, the viewer's computer will open a media player and begin to play the recording.

There is also a way to make the music play automatically when your page is opened, but this is RUDE, so I've never learned the details.

Counters

Counters keep track of the number of "hits" your page receives. One fairly easy way to get a counter on your page (and they can be quite complicated) is to go to The Ultimate Counter Site (or any of a slew of alternatives). They give away counters & clocks, but advertise their name on your counter.

A cautionary note: scads of companies offer free counters -- why? One possibility is that it allows them to track the IP addresses of the people who visit your site - information that could perhaps be sold to someone else, like a catalog company. I don't want to have anything to do with the erosion of privacy, so I recommend adapting the code below for yourself and pasting it into your HTML. This counter is hosted by MIT - it isn't particularly aesthetic, and you have to muck about in the code, but it is probably not as close to the Big Brother as some of the other options.

This is a copy of the information at http://www.mit.edu/doc/counter-howto.html. Use the code (in red) to add a counter to your page

The SIPB Counter Scripts

SIPB provides two counter scripts. One is the traditional, ever increasing counter script. The other is averages the number of hits you receive over time and reports number of hits per day.

This document explains how to use the counters in your own web pages. The SIPB counter is a script that can report how many requests (some people call them hits) have been made to a particular home page. It can be useful to determine which pages are more popular and to give you that nice rush when it jumps to two digits.
How to use the counters:

1. Write your page.

You should first have an already established home page. Counters are much more useful on completed pages. It's not considered overly useful to place a counter on a page that just says 'under construction'.

2. Choose a unique identifier.

Next, choose an identifier that will uniquely name your counter image. If you have just one counter, we recommend your username as the identifier.

3. Place the inlined counter image in your page.

Finally, place the following code in your HTML document (where username is your username). If you want to use the average-hits-per-day counter instead of the normal counter use /cgi/perday/username in place of /cgi/counter/username, as below.



This page has been accessed at least
<a href="http://www.mit.edu/doc/counter-howto.html"><img
src="http://www.mit.edu/cgi/counter/username" alt="several"></a>
times since the counter was last reset,

or January 29, 1996,
 whichever is more recent.

This will create an image showing the number of times the image has been retrieved. Note that you can use any key instead of your username in order to have multiple counters on other pages. Howewer, you almost certainly want to make sure your counter's name is unique, so that multiple people don't increment the same counter. (I suggest that you note this in an HTML comment on your page, so other people who copy the section from your page don't use the same name and increment *your* counter every time someone accesses *their* page.) Since any non-special character should be legal in the identifier, one way to help ensure this is to use your lockername and the path from there to your page in the countername.

CSS Text Formatting

Links

To get rid of underlining on your links, insert

<STYLE TYPE="text/css">

into the head of your HTML document. In context, the tags look like this:

<HTML>
<HEAD>
<TITLE>page1</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>....

This command tells the browser to omit link underlines for all text marked as division "nounderline." To use the specification on your page, enclose the body text you wish to alter in the <DIV> tags:

<DIV class="nounderline">... </DIV>

Line Spacing

To make your text double-spaced or space-and-a-half, insert the following into the head

<STYLE TYPE="text/css">
P { line-height: 150% }
</STYLE>

You have just specified the characteristics for the <P> (paragraph) tag. Every time you format text using the <P> tag, it will be 1.5-spaced. To double-space your text, substitute 200% for 150%

You can also specify the font for the entire page. San-serifs, for some reason, read particularly well online.

Fonts

To specify the font-family for the entire page

<STYLE TYPE="text/css">
P { font-family: "New Century Schoolbook", Times, serif }
</STYLE>

Name 1 or 2 specific fonts you prefer, such as New Century Schoolbook, followed by the default family

The font families are

serif (e.g., Times)
sans-serif (e.g., Arial or Helvetica)
cursive (e.g., Zapf-Chancery)
fantasy (e.g., Western)
monospace (e.g., Courier)

To use multiple attributes for a single tag, separate the attributes with a semi-colon. Thus, incorporating all of the css specifications above looks like this

<HTML>
<HEAD>
<TITLE>page1</TITLE>
<STYLE TYPE="text/css">

P { line-height: 150%; font-family: "Tahoma", Verdana, Arial, sans-serif }
</STYLE>
</HEAD>
<BODY>....

For more css attributes, see The Web Design Group's page.