HTML is a markup language, not a layout language. It isn't meant to present a picture to the viewer. It isn't meant to be easy to read. It is meant to be accessible. Aesthetics are not a consideration. But there are people who would like to communicate more clearly and effectively, and for us HTML is very primitive. We don't need on-screen PostScript, what we need is a more visual flavor of HTML. Until then, we have workarounds. My biggest workaround is the single-pixel clear GIF, which I use for spacing accurately around the page. This trick has its disadvantages, and I hope we won't have to use it much longer. I also have other tricks, as you will see. In the meantime, I advise people to write pages for Netscape 1.1, because it gives designers the most possibilities. If you want to write for other browsers, don't complain to me. Find someone else's tips and read them. Let's go.

Never Use the Standard HTML Constructs If you want machines to read your web pages, use things like definition lists, unordered lists, headers, etc. If you want people to read them, don't do it. They take away your typographic control. Specify your own font sizes when you want a size change. If you must use bullets, make your own bullets (I don't see much point in bullets if your vertical grouping is good). And try not to number your list items. It is hardly ever necessary. If the standard HTML constructs delivered true typographic results, I'd use them, but since typographers don't get invited to sit on the committees that make the decisions, I work around them to get what I want. E-mail alert: I have some of these stupid constructs in a few of my older pages. Don't send me a "gotcha" message. I know I do.

The Single Pixel Clear GIF The biggest trick in my tool kit is the single-pixel transparent GIF image. If you want one, get it from my my FTP directory. Because it gets cached, you can use it over and over with no performance drop. I use it for spacing all kinds of things, and you'll see it referred to several times below. I am sure there are over a thousand references to this one image in my web site. This page alone has a few hundred. I call this image "dot_clear," and I leave it in a central folder (directory) called "resources." Whenever I want to space over or down I use this construct:

Where x is the number of pixels horizontally and y is the number of pixels vertically. This essentially makes a clear rectangle of any size you can use as a spacer to move things around.

About the Bug There is only one problem with this trick! It doesn't always come across as clear, and this is a known bug in the Netscape code. It often happens that a clear pixel comes across as white (or your set background color). If you go to my Women's Hotlist, you'll probably see it. It shows up as little white dots. Why? Well, the nice people at Netscape made a decision: if Netscape is low on memory, it sacrifices transparency for the sake of displaying the whole page. The interesting thing is that reloading the page almost always fixes the problem, because a reload causes reallocation of the cache. Why can't they reallocate the cache when a new image comes in?? I have 48 megabytes of RAM, I give Netscape 12 megs, and I still see this bug. Therefore, we have to put the ubiquitous message on our pages: When in doubt, reload. It would be nice if they fixed this bug, and it would also be very nice if they would give us white space control without resorting to hacks like the single-pixel GIF. Please note that if reloading does not fix the problem, quitting Netscape and giving it more memory should.

The difference between hspace= and width= I use hspace=x rather than width=x in most situations. Here is the difference: "hspace=5" puts the single-pixel GIF down and then adds 5 pixels of guaranteed transparent space; "width=5" will turn a 1x1 GIF into a 5x5 gif. Here, let me show you, using a blue, rather than transparent 1x1 image and five pixels of adjustment: This has 5 pixels of hspace on either side. This has 25 pixels of hspace on either side. This has a width of 5 pixels. This has a width of 25 pixels. This has a width of 25 pixels and a height of 5 pixels. Using hspace is cleaner, since it doesn't actually scale the image, and it gives you twice as many pixels for each unit you specify. I am used to these "double pixel" units and find them quite useful. If you're using a single-pixel GIF, the rule is that you will get 2n+1 pixels for every unit of hspace. Occasionally, I can't get the hspace command to do anything. That is, I change "hspace=x," giving several values for x, and nothing happens. This can happen within tables, because the table engine is trying to do its own things, but I've also had to resort to "width=" when "hspace=" didn't work. It's rare, though.

Debug visually If things don't go as planned, and they rarely do on the first try, I substitute "dot_blue" or "dot_yellow" for "dot_clear." Then I see huge ugly rectangles that let me figure out and think about exactly what's going on. This trick, in addition to turning table borders on, lets me really see what my pages are doing before setting everything to transparent.

Solid Rectangles You can make a rectangle of any size using

Where dot_green.gif is a 1x1 pixel gif in green and x and y are the dimensions of the rectangle you want. Isn't it great? The green one you see here is 8 pixels wide by 44 tall. Believe it or not, I use that same single-pixel GIF to get the row of purple squares you see at the bottom of this page. Just a single pixel. Check the code, it's wild. Here's a periwinkle one that is 3x20: I have a bunch of different colored single pixel gifs in my resources folder and use them for all kinds of things.

Use it to make em-dashes One of the first things you can do is to download my single-pixel black GIF and use it to make dashes of any lengthlike em-dashes. Isn't that cool? Looks like type, doesn't it? But it's a graphic. Now there's no need to use two dashes in a row. Note: The proper way to use an em-dash is with very little white space on either end. An em-dash should be one-pixel high and wide enough to look rightdon't make them too long or you'll give it away. Here's what I just used to make the first em-dash above.

Lists I make lists by carefully controlling the size, vertical and horizontal space, and wording of the items. Look around my site for different examples to adapt to your own needs. Probably the best one is the Web Wonk page you just came from. If you make lists carefully, there's no need for bullets. You don't look around my site wondering why I don't use bullets, do you?

Set Up a Resources Folder I use a lot of directories in my site. One of them is a "resources" directory that contains all the images I use across the entire site. Notice in the examples above the reference to my clear single-pixel GIF file is prefixed by "../resources." That means that the file you're reading now is in a directory adjacent to the resources directory. If I want to use this GIF in a subdirectory one level down, I have to change the references to "../../resources," which tells HTML to "reach up" two levels, then over and down into the resources directory. Doing it this way makes sure you never have to wait for a new image to download. This Web Wonk project actually has its own resources directory, separate from my main one. I often set up a local "resources" directory that contains the images and image maps I'm working with in that specific project. I use the same name, "resources," for all these directories, but you may want to rename the local ones to keep straight which is which.

This just introduces you to the single-pixel GIF. You'll find many uses of these tricks in the columns that follow. I hope you will use these methods to refine your pages until something reasonable comes along. Go back to Web Wonk.