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

When it comes to making a good looking page, there are two things you need: a little creativity and good software tools. I can't help you on the creativity part (heck, I don't even have much of that), but I can help you with the good tools. This section is here to provide you with some basic tricks and places to find the tools you'll need to get started.

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.

While transparent GIFs look great when used properly, they can be difficult to create and are limited to 256 colors. A good alternative is a plain color background. This page, for example, uses a simple white background (easy to read) and has graphics with white backgrounds (easy to make).

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 need a graphics conversion program such as Paint Shop Pro. If you don't want to find a graphics program, or just want a quick solution, read on for the easy way out.

When making a GIF file transparent, you 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. Unfortunately, you can only have one transparent color in a transparent GIF. Shadows and fading are nearly impossible, so you should only use an image that has a hard edge. I've seen a lot of pages where people try to make a shadowed GIF transparent, and the results are often very, very ugly.

If you want an easy way out, you can simply go to MIT SIPB's TransWeb, a service that will let you provide a GIF file and choose a background color. It will spit out a transparent version of your file.

Truthfully, I've never used a transparent GIF. I just make sure the background color of the page matches the background color of the image, and I'm all set!

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 Netscape 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! You can list as many fonts as you like..your web browser will just go through the list until it sees a font that is on your system.

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. Don't pick a font that people aren't likely to have! If you want to use a special font for a title, you might consider making a graphic of the text you need (see below).

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>

Other Options

So, you want a look that is more unique than HTML's <FONT> tag can offer? I don't blame you. Sometimes it's necessary to make text in a cooler looking font. The menu on the left side of this page is a good example. It consists of graphics of text ("Awards", "Mail Us!", etc.) created with Adobe Photoshop. In order to create these graphics, all you really need is a good graphics program and some nice fonts installed on your system. So, I offer you:

Places to Find Killer Fonts

I've searched far and wide on the web for fonts...to make things easier on you, here's what I've come up with:
  • Feast your eyes on the typefaces at Fonthead Design. Ethan Dunham offers some of the best fonts I've seen. He has a few free fonts, but most of his fonts are sold. If you're big into web design, I think it's well worth the investment.
  • Chank Diesel runs Chankstore, which has some excellent free fonts in both Windows and Macintosh format. He adds a new free font almost once a week. Chank also sells the best fonts he makes (for very reasonable prices, considering their quality).
  • I can't leave out The Internet Font Archive. They are the original font archive and have a big collection. Most of the fonts you'll find here aren't too unique, but their listing is comprehensive.
  • Pretty much every type foundry on the Internet is listed in either Yahoo's Fonts directory or at typeindex.com. The ones I've listed above are just a couple of my favorites.

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.
  • In addition to some very creative HTML, Word e-zine uses lots of animated GIFs. Take a look.
  • Splotchy's Home Page has a cool transparent GIF animation on it, along with some very experiemental stuff.
  • There's an entire Yahoo category for Animated GIFs.

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! These three pieces of software are the best kept secrets of professional web designers. With these 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 The Pixel Foundry as a good starting point.

Most graphics made for web pages have at least some text in them, and a lot of graphics are solely text. As stated above in Make the Most of Fonts, you can't display regular text in any font you want; the font must be a standard font. When web designers want to use special, cooler looking fonts for a header, they simply make a graphic of the text they need.

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 shareware graphics editor that costs around $69. Though it's not on the same level as Photoshop, Paint Shop Pro does offer an impressive set of features for the price.

© 1995-97 Carl Tashian {carl@tashian.com}
Last Update: July 12, 1998