You don't have to work with HTML authoring long before you build a collection of design tips and programming tricks that you find yourself using over and over again. Because I have been getting a lot of e-mail from people asking about how I did various things, what my opinions are on other things, and a rather varied set of additional topics, I thought I'd try to address at least some of those questions here.While there might not always be much of a difference between a Tip, Trick, or Secret, I'll try to appropriately categorize the following items through the use of the bullet color in front of each item.
-Robert Hess
|
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 farther 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. | |||||||||||||||||||
|
It has been my experience that this is a common problem with amateur authors who are simply trying to be creative, but I have even run into a few professionally authored sites that have this problem. The obvious solution to this is simply "don't do that," but there are times when a background image really does add a certain visual feeling to the page. For instance, take the lead-in page for this set of pages. It has a background image that is a rather bold set of stars. The stars are big and bold enough to obscure the content if any of them collided with the text. But notice that none of them do--except at the bottom of my page where my name and contact information appear. The way I achieved this was by, obviously, setting the background to be the star field that you see; but less obvious is that I set all of the content within a "black" table. In this particular example, with this type of background image, this works quite well. Without specifically looking for it, the reader might not even notice that the stars were being hidden. Obviously, for a more complex background, it might not be possible to hide the transition. Take a fancy marble background, for instance; you really couldn't set the background of the content to a solid color without making what you were doing obvious. What you want to do in this case is try to select a color that represents the major color in the marble, so that it doesn't look out of place. | |||||||||||||||||||
|
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. | |||||||||||||||||||
|
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
There are many other graphics tools that support the transparency option of GIF89a files; another
popular one is
LViewPro | |||||||||||||||||||
|
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. | |||||||||||||||||||
|
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/roberth/set2/STARS_16.GIF">Relatively simple and clean, and it shouldn't produce any problem on any other browser, or on the final release of IE 3.0. | |||||||||||||||||||
|
No, this isn't an undocumented value for the SIZE attribute of the FONT tag, but it is a little trick I discovered one day on how to select in a very small font. If you took a look at the code, you will see something like this: <FONT SIZE=1><TT>very small font</TT></FONT>So what I am doing is utilizing the fact that when Microsoft Internet Explorer comes across the TT tag, it drops the font size down by one size, even if it is already at a size of "1." Since the exact interpretation of the TT tag is left to the discretion of the browser, this is a trick that may not work on other browsers, and it is not guaranteed to work on future versions of Internet Explorer. But if you are wanting the smallest font size possible, this would be a good way to achieve it.
| |||||||||||||||||||
|
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>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. | |||||||||||||||||||
|
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">Note that this is still a "cheat," that 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. | |||||||||||||||||||
| Windows on the Internet |