Handy HTML Hints

Part 1: HTML 4.0

HTML is a language that one aquires, I certainly never actually sat through a lesson on it, nor had I read a war and peace sized book on the subject, I started my journey into HTML with a 15 page extract from a HTML for dummies book I received free with a magazine. It only listed 30 or so HTML commands, but it was more than enough for me to get started designing some awful, awful websites (I was never a good art / design student).

Making text wrap around pictures

Often when I include a picture in a page, I want the text to be indented around the picture, avoiding a ugly whitespace area. By default, html will only put the first line of a paragraph level with the bottom of the picture, and then wrap the rest of the text underneath it, for small pictures, this means there is a huge white area immediately to the left/right of the picture. Quite ugly and difficult to read. The solution, is after the text to to put a BR tag, aligning the text to one side. For instance, if your image is on the left, <BR CLEAR="LEFT"> will align the text around the image. This does not work in all browsers, but it does in most.

Anchor commands

Ever been to a webpage, where a table of contents at the top takes you directly to the relevant text in the same page and wondered how they do it? Its actually quite a simple trick to do. wherever you want the links to go in your page, you create a <a name="anchor1"></a> anchor point, and then use <a href="#anchor1">Anchor 1</a> to reference it.

Creating bulleted and numbered lists

The easiest way to create a list, is to start with a <ul> tag, then surround each point with <li></li> and end the list with </ul>
Sample:

• This is the first line
• This is the second line.
• This is the third line, it is quite long, so I can demonstrate how using the <ul> tags can format lists with long arguments in them, just as well as short lines. Allowing for you rich people with 21 inch flatscreen monitors, this line should have wrapped by now, so quick look at the indentation. What do you mean it hasn’t wrapped, it should have by now. What resolution are you running?

But what about numbering my list I hear you say, fear not, just change the <ul> to <ol>
Sample:

1. This is the first line
2. This is the second line.
3. This is the third line, it is quite long, so I can demonstrate how using the <ol> tags can format lists with long arguments in them, just as well as short lines. Like bulleted lists, numbered lists will wrap to the same place as the first letter in each line. Still hasn’t wrapped huh? Why don’t you donate your monitor to me, and I will trade you for my 12" monitor, I’m sure it will wrap on that.

Bulleted lists are quite ugly, and very standard, perhaps you want to use your own images to indent your list. Not to worry, the definition list tag is here to help, your list needs to be surrounded by the <DL> and </DL>, and each item is surrounded by the <DD> and </DD> commands. You then need to source your image, before the text, you do this in the normal way, (aka <img src="path/to/images/image.jpg">) The only problem with this method, is that if a line of text wraps, it indents to below the image above, not the first letter of text.

Including the subject in a mailto link

Most sites inlcude a link to email the webmaster or enquiries. To make spotting these emails easier, it is nice if they all have the same subject, to do this create your mailto link like this <a href="mailto:me@myaddress.com?subject=question about your site">email me</a> Easy huh.

Including some special characters in your site

You have probably noticed reading this article that I often include html source in the middle of a page, and it is not rendered into hyperlinks etc. This is because I use the HTML code to display the < and > symbols, I can also use it to display ©, ® and lots of other accented letters and symbols. There are too many codes to list them all, but the common ones I use are;

&lt; which is <
&gt; which is >
&copy; which is ©
&reg; which is ®

For a more complete list of codes, have a look at the appendix

Resource Links:

• http://homepages.westminster.org.uk/it_new/faq/accents.html