Internet and Web:
Hints, Tips and Links

HTML Tips and Tricks

Layout tips:

One of the things many dislike about HTML is its adaptability. The same page can be different depending on who is looking, and how their browser is set. Some people may not even be looking at the web page, they might be listening on a phone or voice browser. HTML was, and is, designed to create an interface wherein widely varying systems can communicate to each other. It is not, and never was, designed to make a page look like an ad from a glossy magazine. Some of us love that, some of us hate it, the majority work with what they have. What we have is very little true layout control or "look" control. HTML is not a good thing for control freaks. It is designed to let people communicate, not to look pretty. Most of us try to make it look at least reasonably nice, despite that. (For those who are involved in "The Debate" between HTML purists and graphic designers, I'm in the middle - I shoot flames from both ends - I want it to look ok, and be readable by anyone.)

I think one of the most frustrating things in HTML, for those who are think they need a page "design", is the problem with layout. There is no good way to do columns or even to indent a paragraph. Most people do want at least some control over where things are located on the page. For instance, if you want to put pictures on the right and the text in a column on the left. None of the html positioning commands for images will allow you to put pictures and text next to each other in two "boxes". This isn't that much of a problem if you have just one picture. but what if you have four or five pictures and you want them on the right, with the story on the left (or the other way around)? Can't be done. You do a <BR clear=all> in order to make the pictures stack up on top of each other, and that, of course, also causes the text to break. So then you must split your text, which will end up wrapping around the bottom of the pictures unless someone is using exactly the right font and font size (which is partly how the much-misused "font" tag came about).

And it's not just images, what if you want newspaper-style columns? Or a list of links down the right or left. Tables were designed for tabular data, the sort of thing you get in a spreadsheet. They were not meant to be used for page layout. But they are the best way to do it, at least until CSS positioning is properly supported. The other way is to badly misuse frames, please don't. I'll get on my knees on this one, frames improperly used can cause a lot of trouble - especially if they are a specific size, and set not to scroll. I've often been unable to read more than the left 2/3 of a page in frames.

By all means, misuse your tables, only do it very carefully. Try to make your tables logically organized. If you ignore tables completely in this page, my header is still at the top, the page text is next, the links below that, and the contact and copyright on the bottom. Admittedly it isn't pretty, but it is readable. And understandable, even in a voice browser. I try not to use nested tables, because they make it almost impossible to break up the page logically. Almost all browsers now support tables, so they are not the problem they once were, but keep in mind that one of those people on the voice (maybe blind or maybe telephone) browser may just be the rich client you were looking for!

No matter what you do, or how you do it, someone with a browser like Opera, or even MSIE or Netscape, can override your preferences. I use Opera in preference to either major browser, and sometimes, just for fun, I tell it to ignore tables. Ahem! Will you control freaks please march immediately to a counselor, the rest of you may continue to listen. The best thing to do is to work with HTML. Or maybe play with it.It really is wonderful, if you can accept the fact that it's biggest and best attribute is the ability to adapt to all situations.


Layout tricks:

To keep a link list from wrapping around without using absolute text sizes and column sizes - The table cell for my links looks like this: <TD valign=top nowrap>. That keeps the links at the top when I have a long page, and keeps each link on one line.

If you want indented paragraphs, or other spacing absolutes, you can do several things. The best is to use CSS, the next best is to put something like &nbsp;&nbsp;&nbsp;&nbsp; right after the <P> tag. The &nbsp; means a non-breaking space, and most browsers will pay attention to it. Don't use a "spacer gif", some people recommend making a 1 pixel by 1 pixel transparent gif and inserting that. I've used a couple of browsers that insist on trying to show a box for the gif, the result is pretty bad. The last option of course, is to just live with the browser default.

The <HR> tag is good for breaking a page into sections, without using tables with borders. You can also use an image, such as the following, but be sure to do a <br clear="all> to be safe.

 

 

 

 

 

 


Comments and suggestions are greatly appreciated, spam is not. I am now using a CGI form which forwards to my mail instead of directly posting my address. I'd love to hear from you. If you send me your e-mail, I will do my best to reply; if you don't, I'll at least read what you have to say.
Copyright ©2000 Kathy Kinsley
This page was last Updated: 31 July, 2000