HTML Tricks and Tips
Richard Goodwin lets�you into some of the deper secrets of the web designer.
No doubt a lot of you have already dabbled in HTML - the markup language of web pages - in an effort to put up your own Web site. And, so long as you take it slowly at first, you've probably found that it's quite easy to get a working site up and running.
However, it's one thing to get a site that just about hangs together, and quite another to get a desirable piece of Internet real estate. In this article I hope to show you a few tricks and tips to help you add a little polish to your site.
Header tricks
One thing that a lot of people have problems with is getting their site on to a search engine, preferably near the top of the list; this is where you have to employ those unseen control tags known as meta tags, and a little cunning.
In the header section of your HTML - that is, the bits between <head> and </head>, right near the <title> - you first need two new tags. These both seem at first sight to be very similar:
<meta name="description" content="...">
<meta name="keywords" content="...">
The name attribute is a fairly accurate description of the function of these tags. The description one is a short, plain text report of your page or website, for instance 'Cool Download Stuff - the RISC OS download site!'. Keywords, on the other hand, is just a list of words to describe the site, so for our hypothetical download site you might use 'download, RISC OS'. Notice that I'm separating the words and phrases using commas - strictly speaking you don't need to do this as most search engines can cope with just a list of words, but then RISC OS would be seperated into its two individual words rather than be kept together as a phrase.
Now you've added these two tags, you need to look into relevance - making everything tie in together will help you score more highly with search engines. So for instance, have very similar page titles, meta tags and headlines - sometimes even the address of the site - will make your site look more likely to be about what it says it's about, and so get a better score when a search engine is indexing your site.
Listing one - using meta tags to describe your site
<html><head>
<title>HTML Tricks and Tips</title>
<meta name="description" content="HTML Tricks and Tips">
<meta name="keywords" content="HTML, tricks, tips">
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>HTML Tricks and Tips</h1>
Finally for this section, a few words on what not to do - if you try to cram lots of irrelevant keywords into the meta tags, or pad the bottom of your page with 'invisible' keywords (for instance, putting white text on a white background with words that you think a search engine might like) your site may be be penalised. As the Web grows, search engines have to be more and more choosy about which sites they can index - this might be as low as 18% of the Web - and as these tricks are often used by porn sites anyone found using these tricks will be penalised. Keep descriptions and keyword lists short, and anyone looking for the information you have will be able to find you more easily.
Text tips
In pretty much every browser your care to mention - Fresco, Netscape Navigator and Microsoft Internet Explorer to name but a few - there's a small "bug" in rendering small text that can be quite annoying. When I say small text, this is of course a relative term; anything smaller than the default size, or the size you're switching back to, will cause the small text bug. Consider this:
Listing 2: do try this at home kids for your very own text rendering bug
<font size=1>
If this text is allowed to flow over several lines,
for instance if you encase it inside a table cell
or there's a lot of text on a small screen,
then the last line will seem to float away from
the rest of the text as it's printed much lower.
</font>
The problem is that, when you switch off the smaller size (size 1 in this case) the browser automatically goes back to the default size, or whatever size it was using before - the default usually being size 3. Even if there's no text between the </font> and your next line break, the browser assumes that there's a notional piece of larger text on the end of the line, and so assumes it has to print this larger text, which is taller than the preceding text and so pushes the line down.
The solution is quite simple; put a line break - <br> - before the closing </font>. The small text is no longer on the same line as the text after the </font> and so will happily rejoin the rest of the paragraph. This should also be used with the <small>...</small> tag.
Image tips and tricks
Good-looking images can make or break a site - after all, a picture paints a thousand words - and so getting these right can be quite important. It's very easy to get an image displayed...
<img src="mypic.gif">
...but there's so much more you can do to get them working for you. In the example above, there are three elements missing that you should always use to display images - the alt attribute, and the width and height sizing attributes. Although you might not see the need for these tags if you can get the image to display without them, they are important, but for different reasons.
The alt attribute is a fallback for when things are not at their best; if our image can't be displayed, perhaps because the person viewing the site is getting a very slow connection speed, or because there's an error in your HTML, then it's good to have a small piece of plain text describing what should be there, even if it's only a single word. However, if you consider someone not using a 'proper' browser, then the alt tag is absolutely vital. This doesn't just include someone using Lynx, the text-only browser found on UNIX systems for which lack of an alt description is incovenient, but also browsers used by blind and partially-sighted people which read the page to them.
If this is not enough to convince you, a trip to the W3C website (the consortium that writes the standards for the Internet - www.w3c.org) shows work being done on voice browsers for things like telephone services. Do you really want to miss out on all these potential audiences just for the sake of one small attribute? Keep the text simple though, as PC browsers tend to show the alt data in a sort of pop-up help window when you move over images.
The size attributes on the other hand are for helping out your all-singing graphical browsers render the page quickly and correctly. By specifying the height and width of the image right from the outset the browser can reserve the right amount of space for it without having to download the image first. As browsers these days render the page as soon as part of it has been downloaded you'll often see the page flickering as text is written onto it, only to be shoved around time and again as the images start to download and the browser realises there isn't enough room to fit it in. Things will go a lot smoother if you instead using something a little more like this:
Listing 3: a better formed image tag
<img src="mypic.gif" alt="Picture of my dog" width="200" height="150">
So now you've got your images displaying as quickly and smoothly as possible - but how about adding a little more style? Most proper browsers these days will allow you to have text flowing around graphics - Fresco and Webster XL both cope very well, as of course do browsers on other platforms - and it's very easy to set up.
All you really need is to set the alignment of the image using the align attribute - align="left" to get the image on the left, and of course align="right" to have the image on the right. Simple! You should always put these images before the paragraph of text that's to flow around them, even if the image is supposed to be on the right, so that the browser has a chance to sort out where all the elements should go.
A nice way to use this might be to have a big 'drop cap' - the huge capital letter you sometimes see at the start of a chapter or section in a book or magazine. Align it to the left, have the text follow straight on afterwards, and it makes an instant drop cap - and even if the browser doesn't support image alignment in this way the text will usually be aligned to the bottom of the image instead, so it's still perfectly readable. Don't forget the alt attribute though, just in case:
Listing 4: drop that cap
<img src="letters/t.gif" alt="T" width="25" height="50" align="left">his is
a piece of demonstration code for doing drop caps using image alignment.
The initial T is done as a graphic, with the text following straight on.
On the other hand, if you're using an illustration that doesn't want to be so tightly pushed against the text, there's a couple more attributes that you might consider - hspace and vspace, which give you a little horizontal and vertical padding space respectively. For instance
Listing 5: an image with text flowing around it; the image is linked to a larger version
<a href="screenshot.gif"><img src="thumbnail.gif" alt="My desktop"
width="150" height="100" align="right" hspace="5" vspace="5"></a>
I'm quite proud of my desktop, so here's a picture of it; if you
click on the small thumbnail it's linked to a full-sized version.
And just in case you want to make sure the text stops flowing around the image - at the end of the paragraph for instance - you can clear the alignment. This is done by using the tag <br clear="xxx">, where xxx is either left, right or all. This last clears alignments set on both sides of the text, and is a sort of catch-all, so I use this version all the time instead of the other two as it's easier to remember.
Linking tips
I've just got space for one more tip, so here's a little speed tip; consider the following two URLs:
- http://www.riscworld.com/issues
- http://www.riscworld.com/issues/
They both go to the same place, right? Wrong. The second one asks the Web server to send the default page for the directory pages, which is served straight away. The first, however, is slower and causes more internet traffic, both of which can make the links on your site more sluggish, especially if the connection is slow - either the person viewing the site has a slow machine or modem, or the Web server is overloaded. Without the final slash (/) what actually happens is that the browser is requesting a file called issues; the server doesn't have a file of that name (it's a directory) and sends a response back to the browser software to say as much. The browser has to try all over again, asking instead for the default page for that directory.
You might think that this doesn't amount to much, but if your site becomes popular then you'll want it to serve pages as quickly as possible. You could of course give a fully qualified URL - in our example this might be http://www.riscworld.com/issues/index.html - but if you advertise this and then get into more advanced Web pages such as SSI and PHP3, the default page might then change name to index.shtml or index.php and then all your advertising and newsgroup postings saying 'come visit my website' will have been for nothing, and you'll have to start again.
Richard Goodwin
