How Do They Do That With HTML?


I often come across a web page and say, "Wow..How did they do that?" Most of these "neato" pages utilize the many extensions (and sometimes bugs) of the Netscape Navigator, but there is still a lot that can be done to dazzle those who don't use Netscape. The greatest looking pages push HTML to its ever-diminishing limits. I have seen bits and pieces of information about the tips and tricks of HTML, but no comprehensive listing of all of them. So, I'm making an attempt here. This document goes from the simplest tricks at the top to the bizarre, difficult, and experimental ones toward the bottom. If I've missed anything in between, let me know. Note: This document doesn't cover JavaScript or Java. Howver many of the tips mentioned here can be improved using JavaScript>


Table of Contents

The tips and tricks in this document cover:

BACKGROUNDS & COLORS

The simplest, yet possibly most effective spice to add to a page is a nice background. I very rarely write a page using simple web-page gray as the background color.

How to do it

<BODY BACKGROUND="filename"> is all you need.. It's nice to also add an ending </BODY> at the end of the file, as well.

<BODY BGCOLOR="#RRGGBB"> allows you to set the color of the background to something specific.

<BODY TEXT="#RRGGBB"> sets the color of all normal text within the document.

<BODY LINK="#RRGGBB" VLINK="#RRGGBB" ALINK="#RRGGBB"> sets the color of all other text in the document. LINK is just a regular, never before visited link, VLINK is a previously viewed link, and ALINK is an active link ("The color when you click on it"). Any or all of these three options can be omitted, of course.

RR, GG, and BB are two-digit hex numbers (00-FF) representing the amount of red, green, and blue in a particular color. Since it would be too difficult to have a good defined list of color names, hex numbers are used as well, so you get to invent your own colors. "#FFFFFF" represents white and "#000000" is black.

Can't get background colors working?

If you can't get the background color working, make sure you're following "The Background Rule." This rule states that your page must have the following format or backgrounds may not work:

<HTML>
<HEAD>
<TITLE>My Title</TITLE>
Any other heading information goes here
</HEAD>
<BODY (and background/bgcolor info if you wish)>
The document body goes here...
</BODY>
</HTML>
As long as all of those tags are in the right place, you'll be fine.

Related Links

There are many few different places to get good background files and color information for Netscape:

TRANSPARENT AND INTERLACED GIFS

Transparent GIFs are graphics which have a transparent background. Instead of seeing a particular color in the background of a graphic, you see the background color/picture for the page. Knowledge Adventure Online has transparent GIFs all over their front page.

Interlaced GIFs are graphics which improve in quality as they are loaded, rather than loading from top to bottom. Check out Discovery Online's web page. They use interlaced GIFs for most of their larger graphics.

How to do it

Making a GIF transparent or interlaced is fairly simple. You will probably need graphics conversion software such as Paint Shop Pro. If you're interested in the latest information on transparent and interlaced GIFs and related software, take a look at The Transparent/Interlaced GIF Resource Page.

When making a GIF file transparent, all you have to do is select a background color. That background color is then given a special "background color" tag within the file, and when Netscape sees it, it makes all occurances of that color transparent. As far as I know, you can only have one transparent color in a GIF.

MAKE THE MOST OF FONTS

Fonts are a very important part of any web page. If you're using Netscape, you've probably noticed how much better a page can look if it has a good choice of font sizes & styles.

How to do it

The <FONT> tag is very powerful. With it, you can change the size or color of the font at any time. <FONT SIZE=(+ or - size)> will increase or decrease the size of the current font. For this page, I use all caps for headers, but increase the size of the first letter of every word by 2:

<H3><FONT SIZE=+2>M</FONT>AKE
<FONT SIZE=+2>T</FONT>HE
<FONT SIZE=+2>M</FONT>OST 
<FONT SIZE=+2>O</FONT>F
<FONT SIZE=+2>F</FONT>ONTS</H3>

Personally, I think an all caps/big first letters style makes any titles look great. Experiment with the <FONT> tag and see what happens. Take a look at Compass Records for another good example.

The <TT> tag changes the font to Courier (if you haven't altered your browser settings otherwise). C|Net Online often uses <TT> with <H1> to give it a nice typewriter look.

The <TT> tag will work with almost every web browser. If you want to try something that is much cooler, but specific to Netscape 3.0b5+ and Microsoft Internet Explorer 2.0+, try the <FONT FACE> tag. With the FACE attribute, you can specify a list of desired fonts for viewing text. For example:

<FONT FACE="Arial, Geneva">This will be displayed in Arial or Geneva</FONT>

If Arial isn't available on your system, Geneva will be used instead! I think this one of the best new features of Netscape and Internet Explorer.

Note: Remember that your audience is using a variety of computer systems. A combination like "Arial, Geneva" for the <FONT FACE> tag is good since Arial is generally available on PCs, while Geneva is a Macintosh font.

Want to change the color of certain words? The <FONT> tag has an option for COLOR. The colors work the same as colors on the <BODY> tag. Here are some examples:

<FONT COLOR="#FF0000">Red</FONT>
<FONT COLOR="#00FF00">
Green</FONT>
<FONT COLOR="#0000FF">
Blue</FONT>

You can also give a color name! Things like this work fine:

<FONT COLOR="Yellow">Yellow</FONT>
<FONT COLOR="Purple">
Purple</FONT>

GIF ANIMATION!

Want a good, short animation on your page, but don't want to deal with server pushes or complicated Java programs? Since the release of Netscape 2.0, GIF animation has taken the web by storm. Animation is part of the original GIF89a standard written in (you guessed it) 1989. Here are some of the features of GIF animations:
  • GIF animations are smaller
  • They're faster
  • They're much easier to use than server push animations. You don't have to have any special server access, and no configuration is necessary.. it's all in one file
  • Even if your browser doesn't support animated GIFs, you'll still see the first frame of any GIF animation!
Netscape is starting to incorporate the more obscure features defined in the
GIF89a specification.

Related Links

  • GIF Animation on the WWW is a great source of information on GIF animations. They have links to all the software tools you need to make 'em, a gallery of GIF animations, and answers to almost any question you might have about GIF animation.
  • Splotchy's Home Page has a cool transparent GIF animation on it, along with some very experiemental stuff.

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:

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. If not, try out the Internet Audit Bureau. They have a free statistics service (this page uses it), and a "Pro" version that you can pay for (for "better reliability" and more features). Speaking of reliability, IAB has become less and less reliable over the past few months. If you know of a good, reliable, and free statistics site (other than the local logs), let me know!

AWESOME GRAPHICS

Some pages just have awesome graphics (like this one). I'm not saying that you can't have a great looking page with no graphics; content does matter (some people seem to forget this). Anyway, how do people make great graphics? Here are the tools of the trade; there are versions for both Windows and Macintosh:

That's it! With those three tools, you'll be making graphics like the pros in no time. If you've got Photoshop and Kai's Power Tools, I highly recommend Kai's Power Tips and Tricks.

I often get e-mail from people saying "...but Adobe Photoshop costs 5 gazillion dollars...isn't there anything else I can use?" Well, some folks swear by Paint Shop Pro, a $69 shareware graphics editor. Though it's not on the same level as Photoshop, Paint Shop Pro does offer an impressive set of features considering its price.

QUICK COLUMNS

Netscape 3.0 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.

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.

MOZILLA ICON

(Netscape for X-Windows ONLY)

It's amazing what you can find if you look through the source of the home pages of people who work at Netscape Communications. The URLs about:jwz and about:mozilla both turn your Netscape logo animation into a hidden version. Pretty cool!

I recently found a second hidden logo when I pulled up Robert Lundemo Aas' home page. I think he has to have a "/jwz/" in his URL, or the trick will not work.

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://www.nashville.net/~carl/index.html" TARGET="_top">
<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.. as well as a couple examples:

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."

Dynamic Document examples:

  • Word uses server push for animations on many of their pages.
  • Feet cam uses client pull to reload itself every 5 minutes.
  • Inverted Worlds Test Pages have examples of server push, and a piece of software called webvid that they use for their server pushes.
  • Universiti Kebangsaan Malaysia uses a server push to animate their main title graphic.

EASY BROWSER DETECTION

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

How to do it:

Here's an example:

<HTML>
<META HTTP-EQUIV="Refresh" CONTENT="3; URL=http://www.nashville.net/~carl/htmlguide/nindex.html" TARGET="_top">
<HEAD>
<TITLE>Detecting your browser...</TITLE>
</HEAD>
<BODY>
<H2>We're detecting your browser now...</H2>
If you're using Netscape, the Netscape enhanced version of this page will
automatically load. If not, <A HREF="http://www.nashville.net/~carl/htmlguide/index.html" TARGET="_top">CLICK HERE</A>
When people without Netscape come in, they'll click on "CLICK HERE" and get the regular version of your page. When people with Netscape get to this page, they are automatically advanced to the Netscape enhanced version.

BACKGROUND SOUNDS

Background sounds are sounds which load and play by themselves after the page/graphics are loaded.

How to do it:

You can add a background sound very easily using a simple client push. 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: How do you get sounds to play without any window coming or without having to hit the "play" button first? It all depends on what sound player you're using. Some sound players will play a sound immediately and not show any window at all..others give you control (play, stop, rewind, fast forward, etc) but require that you press "play" to start any sound.

Another side note: 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.

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 TARGET="_top"" 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!

NB* You will notice that throughout this document I have inserted the tag (TARGET="_top")quot; at the end of an outside link.. What this does is to tell the browser to close the current programme before going on to the next. So if for instance there was music embedded on your pages it would not follow you to other homepage(s) you intended to visit.. if that were to happen then you could end up crashing your system not to mention creating a great deal of problems for other internet explorers.

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 from Netscape (this is the document I used to create the framed version of this page). Targeted windows are also important in the creation of frames. If you're making framed web pages, read Targeting Windows. 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="_parent">. It's that easy. Just put that tag near the top of your document. Want a more detailed explanation? Read Targeting Windows!


© 1996 [OWEN SHAW]
Last Update: January 17, 1997

RETURN TO MAIN PAGE