html tricks & tips

Graphics

1. How do you make a "column" on a page as a background image?
-- Column Envy in Cleveland

Answer: The secret is in the image: you don't actually have to make a vertical bar. Instead, make a long horizontal image with the left pixels colored and the right pixels transparent or white and use this as the background image, as in this example. When the image is tiled onto the page, it appears as a vertical bar with blank space to the right. Note that there is another vertical bar to the right of the white space; you need to make the white space in the image big enough for most monitors.

2. The column looks neat, but how do you make a grid as a background image?
-- Gridless in Georgia

Answer: Again, the secret is in the image: you don't actually have to make a grid to cover the whole page. Instead, make a single square and then this will be tiled throughout as the background image, as in this example. When the image is tiled onto the page, it appears as an infinite grid (extends as far as the user makes his or her browser).

3. Sometimes I see images on web pages that seem "transparent." Am I going insane, or is there a way to make images appear transparent?
-- Seeing Things in Harvey, Michigan

Answer: The trick is in making the graphic transparent. For example, the GIF allows the background color of this page to "show through." The way to do this is to obtain a graphics program that does this, or visit this TransWeb Transparent GIF Service.

4. I want to make a colored line that stretches across the browser display window. I don't want a fixed line! I don't want just a stupid black and white line--I can do that with

---

. I want a genuine, stretchy line of color!
-- Fussy in Falmouth, Massachusetts

Answer: Ok, ok, calm down. The trick is to use a graphic with the Width attribute of the IMG element set to a %. Just look at this example and enjoy. Note: I bet the day will come when there will be a Color attribute on the HR elmement! (and a Style = "dotted | dashed | smileys ..." attribute).

URLS

1. I think I'm going to go insane. There's no tilde (~) key on my keyboard, and many URLs have tildes in them. How am I ever going to access those resources?
-- Clueless in Seattle

Answer: No need to get committed yet. You can use the escape code sequences to substitute for any character in a URL. You use a % sign followed by the hexadecimal ASCII code for the symbol. For a tilde, this is %7E.

2. I'm tired of typing in http://www.blah.com/ everytime I want to access the blah web site. Is there some way I can reduce what I have to type?
-- Exhuasted in Escondido

Answer: Yes. Try accessing the URL by just typing www.blah.com in your Web browser's address window. By default, many browser brands will pre-pend the http:// to your request. Note that this shortcut won't work when writing out a URL in HTML, in other words, don't try any funny tricks like this:

This ain't gonna work

I'm very concerned about you--typing seven characters on a keyboard makes you "tired"? Your extreme fatigue may be a sign of chronic depression. Please see the American Psychological Association's Web site at helping.apa.org and get in touch with a qualified professional!

Animations

1. I'm tired of the same boring, static images appear on my home pages. How can I spice them up?
-- Jaded in Jackson

Answer: You seem "tired" and "bored" with your "home pages"? As a first step, I suggest you get out more and perhaps try to get a bit more perspective. If not, there's a technique of animating GIF files that is a good way to get animations on your pages like this: moving image of a book. Exciting, no?
december.com