HTML Tips, Tricks, and Secrets

It is fairly difficult (but not impossible) to create an exciting Web page that doesn't rely on secondary data files to achieve that certain level of coolness that we are all trying to add to our sites. After all, it is usually the cool sites that get the most notice. However, the more graphics you add to your pages, the longer it takes your pages to download.

I have found it useful to place some conceptual limits on what I do with my pages, and how heavily I rely on secondary data files in the form of graphics to spiff up my pages. At home, I have a 9600-baud modem, so it is relatively easy for me to get frustrated by the length of time it takes a page to download. Based on some very casual research I've done, it appears to me that a good limitation on total graphics for a page is around 50K. If I find that any page I am developing looks like it is crossing this threshold, I'll look very carefully at all of the graphics I am using, and try to see what I can cut or reduce in size.

But of course there are times when 50K of graphics really isn't enough to get your point across. If I really need to push more data onto a page, I will; but even then, I will put an absolute maximum cap at 100K. The only time I will go further than that is if the page really needs it, and if the user is warned ahead of time that they are going to be traveling to a page that might take some time to download.

Most, if not all, of the rest of the tips included here will be targeted at how you can jazz up your page visually, without relying too heavily on secondary data files.

I get a lot of people asking me what tool I use for authoring my pages, or others that assume I am using "xyz" tool, and ask how I got some effect using that.

There are essentially two tools I use for authoring my HTML. For the actual content of the page, I use Notepad. For the limited graphics I add, I use PaintShop Pro .

Yes, I know there are hundreds, if not thousands, of fancy HTML authoring tools on the market; some of them are even Microsoft products. The fact that I don't currently use any of them for my standard authoring is not an indication of their quality, feature set, or performance. It is just that for my needs, Notepad does the job, and it is a tool that I can be fairly certain is on any machine somebody might put beneath my fingers. And doing my HTML authoring in raw HTML means that I force myself to have a deeper understanding of what is actually going on within the pages I write.

So, does your favorite authoring tool support all of the various capabilities that I talk about on my pages? I don't know—maybe if you find a feature I use that you can't, you should contact the company that publishes your tool, and ask them when they will support it.

Okay, so maybe you already know how to make transparent GIFs. But I'm sure you also have seen how common this question is among the beginning HTML authors. So just to avoid more e-mail from people asking me how to make transparent GIFs, I'll answer the question here, and even provide some pointers to additional information.

To add transparency to a GIF file, you need to be using a tool that supports GIF89a-formatted files, and allows you to specify the color on your image to interpret as transparent. As I mentioned earlier, the graphics tool I use is PaintShop Pro ; their current version supports transparent GIF files. You set the transparancy from the Save dialog box. Just set the output file format to GIF, and click the Options button.

There are many other graphics tools that support the transparency option of GIF89a files; another popular one is LViewPro . It isn't as full featured as PaintShopPro, but it is still a very nice tool.

Notice that each of these topics is using one of three different colored bullets. While you might not realize it, all topics are using the exact same image for each bullet. In fact, I can make a bullet of any color, without incurring any extra image download. Here is a sample, using all of the named colors supported by Internet Explorer:

OK, so I guess I can't use any color. Black doesn't really work too well.

I did this by creating a very simple bullet, without any fancy anti-aliasing. I then saved this out as a GIF89a-formatted graphics file, with a transparent color being used for the actual bullet color itself, and the color surrounding the bullet set to black. When I want to use this bullet, I set it into a table cell all by itself, and set the background color of the cell to be the color I am wanting to show through as the bullet color. Take a look at the source for this page, and see for yourself how easy it is.

Internet Explorer supports the TOPMARGIN=number (as well as LEFTMARGIN) attribute of the <BODY> tag. This removes/sets the page margin that is automatically being imposed by the browser.

However, I have run into a situation in which the TOPMARGIN setting doesn't work properly, and that is if you also set a background image. I've reported this as a bug, and it is scheduled to be fixed in the final release of IE 3.0, but it is annoying, and it will still happen in IE 2.0 and the early builds of IE 3.0. Fortunately, I've figured out a workaround that you can use.

I noticed once that if an <IMG> was the first element on the page, it didn't have any problem getting snuggled up against the top margin, even with a background image set. With a little messing around, I figured out that by making the image really small, say 1x1, and then continuing on with the rest of the page like normal, I could get the page to get up against the top margin—except of course for the one pixel that was being taken up by the image. Here is some sample code that illustrates this:

<BODY TOPMARGIN=0 LEFTMARGIN=0
BACKGROUND="/workshop/author/other/STARS_16.GIF">
<IMG SRC="/workshop/author/other/CLEARset2.GIF" HEIGHT=1
WIDTH=1>
...And here would go the rest of your page code, tables, text, or
whatever...

Relatively simple and clean, and it shouldn't produce any problem on any other browser, or on the final release of IE 3.0.

How often have you wished there was a way to specify a hot link, but force it not to be underlined, regardless of how the user has their profiles set up?

Well, there actually is a way, but it doesn't come for free.

Notice that the title of this topic ("Anchor text, without an underline") is not underlined. You have underlines turned off? Well, turn them back on, and look again...

The link is set to go to itself in this case. And it is coded by setting the anchor just before defining the table cell, then turning it off again, right after the cell is defined and before the text is defined. Here is some sample code:

<A HREF="#ANCHOR"><TD BGCOLOR="#000066"></A>
Anchor Text, Without an Underline

</TD>

So what is happening is that only the cell is hot, and not the text, but the text is above the cell, so it is hot by accident.

Now, the cost, you ask? Well, for starters this doesn't work on Netscape, and it won't work on Microsoft Internet Explorer (IE) 3.0. The problem with IE 3.0 is that the "containment" model is strengthened up, and "containers" can be nested but not overlapped. Thus, because the table cell is started within the containment of the anchor, the table cell is automatically closed when the anchor is closed.

I can't take full credit for this cheat; it was worked up with help from John Knox of Avalanche, when trying to solve a design problem he had with a site he was working on.

OK, so maybe the price of that last one was too high for you. Let's try it again, but with a slightly different spin. This time, the title for this topic is heated up using a method that should work with IE 3.0, and maybe even Netscape.

This time, instead of anchoring the table cell, I'm anchoring a right-aligned transparent image. Here is the code being used:

<TD BGCOLOR="#000066">
<A HREF="#ANCHOR">
<IMG SRC="CLEAR.GIF" HEIGHT=20 WIDTH=340 ALIGN=RIGHT
BORDER=0>
</A>
Anchor Text, Without an Underline. Take 2.
</TD>

Note that this is still a "cheat," which may or may not work properly depending on how the browser you are using chooses to implement tables, images, and anchors.

The good news, however, is that as soon as Cascading Style Sheets are supported in IE 3.0, you will be able to get this effect by a fully supported feature of the browser, instead of a hack.