Using HTML in Chat Board Messages

This document has been prepared as a response to inquiries about using HTML on chat boards, particularly BoyChat, MetaBoyChat and other similar boards.

Contents

Note: Click on the hand to return to the Contents from anywhere in the document.

Introduction
   Pad-O-Rama
Preparing your text
   Common guidelines
   Don't Lose It!
   Composing offline
   Preview
Overall appearance
   Background
   Text
      Text size
      Text color
      Typeface
   Horizontal lines
Hyperlinks
Emphasis
Lists
Centering and Indenting
   Centering
   Indenting
Formatted text
Summary

Introduction

HTML (HyperText Markup Language) allows some fairly complex text formatting. When you view a message or response on a chat board, you are viewing an HTML document. HTML "tags" control how the message will look on your screen. That said, it's important to note that the message will look a little different on each individual's screen, because:

• The default font (both typeface and size) are set at the whim of the reader.
• The screen size is also set at the whim of the reader.
• The default background color or image can be set by the reader.
• The reader can choose to over-ride backgrounds and colors set by the document.
• The colors for links and followed links, and whether or not they are underlined, can be set by the reader.
• Different browsers interpret HTML differently.

With this in mind, there are several simple rules that you can follow to make your messages stand out a bit from the rest, or to use emphasis where needed. Please; this document is NOT an HTML primer, it is intended only for this very limited application.

Pad-O-Rama

It can be found at Downseek, but it's probably available elsewhere.

Preparing your text

Common guidelines

No matter how you prepare the text, there are a few things you should know. First of all, just type your text normally without pressing ENTER needlessly. You do NOT have to break your text up into lines; that's the job of the browser. Indeed, you MUST not break your text up into lines (unless you're writing a poem, for example). Why? Because everyone will use a different font size and window size, and the line length that is appropriate for you may not be correct for anyone else.

If you do attempt to do your own line breaks, either of two things will happen:

• The lines will be too short, and will all appear at the left side of the reader's screen.
• The lines will be too long, and the automatic breaks will be followed by your manual one; this gives alternating long and short lines that are very hard to read.

1. Never press ENTER until you are at the end of a paragraph, then press ENTER twice. This will leave a blank line between paragraphs.**
2. Always put a space after periods, commas, colons and semicolons. Not only does this make it easier to read, it also allows the automatic line break mechanism to work properly. If you don't, two words with a period between them are treated as one long word.
3. Capitalize the first letter of a sentence, and capitalize the pronoun I. No point in displaying your illiteracy for the world!
4. If spelling is a problem for you, compose offline and use your spell checker. I mean, you DO want to seem wise and literate!

Don't Lose It!

1. The browser crashes, and clears the text.
2. You press PREVIEW, then go BACK to post, and there's nothing there.
3. You press PREVIEW, and forget you haven't posted.

Composing offline

If you're using Windows, Wordpad works fine. So do Microsoft Word, and TextPad (with soft returns selected). You can also use a raw HTML editor to make it easier to put in tags. These are readily available on freeware sites such as Freeware Home. Do not use a WYSIWYG (what you see is what you get) HTML editor. It will insert all the page tags that the chat board script has already inserted, and that's against the rules of HTML.

Important: If you use an editor such as Word, you should turn off "smart quotes" in Options. The characters used for "smart quotes" are not correctly interpreted by all browsers or in all fonts.

Once you've prepared your text, just select it all (ctrl-A), then copy it (ctrl-C or EDIT:COPY). Once you are online and in the text entry box on the chat board, just press ctrl-V (EDIT:PASTE) and you're all done.

Note: Some of you may know that CR's are ignored by HTML, and may wonder why you can't use them with impunity. This is because the script file of the chat board converts CR's to line breaks when preparing your message.

Preview

If you are using HTML tags it is important to preview your message before posting it (if your chat board allows this). This will allow you to spot errors and fix them before you suffer the embarrassment and horror of posting a message with a really dumb mistake in it (we'll leave the really dumb CONTENT to you).

Overall Appearance

Background

For example, I came across a message the other day in which the writer had used white text, and had set a dark background so it could be read. Well, it didn't work. I ended up with white text on a white (default) background, and it was illegible. I had to temporarily set the browser default background to a dark color to be able to read the message. Just because some browsers actually respond to the second <body> tag doesn't make it right: it is NOT part of the HTML rules. Solution? Don't use light colored text.

Text

You can control the size, typeface and color of the text in a message. These are all done using the <font> tag. For example, the line:

<font size=+2 color="red">Hello there</font>

will produce the following output"

Hello there

Note that you must always use the </font> tag to close the font and return to normal. Let's look at each of these in turn.

Text size

Text Color

Text color can be controlled with the font command too. The syntax is <font color="cccc> where cccc is the color specification. cccc may be a color name (keep it SIMPLE); most browsers (not all) will recognize names like green, red, blue, light green, etc. It may also be a numeric color, in the form #RRGGBB where RR, GG and BB are the red, green and blue components of the color. These are actually expressed as hexadecimal numbers, but don't worry about that. Just follow the simple rules below.

In 256 color mode (somewhat rare these days), browsers choose colors from a limited palette which restricts the numbers you can use in the RRGGBB format. (Note: although this doesn't apply if the viewer is using hicolor or true color, it's always best to program for the lowest common denominator.) The rule is really simple; you should always choose RR, GG and BB from the following numbers: 00, 33, 66, 99, CC and FF, where 00 is the darkest (black) and FF is the brightest (pure color). If you use other numbers the browser will pick the closest from the list I just gave.

So if I wanted pure red text, I'd set the color to "#FF0000". "#FFFF00" would give red + green = yellow text, and so on. Play with these and see just what you can come up with. For example, the orange I used at the top of this page is "#FF6600". Here it is:

<font color="#ff6600">This is a line of orange text</font>

gives:

This is a line of orange text.

Typeface

This is a tricky one. Browsers allow the face to be specified as part of the font command. But you must remember one thing; you can specify any typeface you want, but unless the person viewing your post has the same face on his computer, it won't work and he'll just see the default. Obviously if you want it to work for a majority of users, you should choose typefaces that most people have installed. These include (for PCs):

• Times New Roman (usually the default for most browsers)
• Arial
• Courier New
• Comic Sans MS

The examples I'm going to give MAY not show up correctly on all machines; it depends on what fonts you have installed. If I wanted to use Arial, for example, for a short paragraph I'd do this:

<font face="arial, helvetica, sans">This should be in Arial. If your machine doesn't have arial it will be in helvetica or sans. If it has none of these it will use the default; whatever you have chosen.</font>

This should be in Arial. If your machine doesn't have arial it will be in helvetica or sans. If it has none of these it will use the default; whatever you have chosen.

Warning! The Microsoft "Webdings" font doesn't work at all in some browsers, even if it is installed on the computer being used to view the chat board. For this reason it's advisable not to use this font in posts.

Horizontal Lines

You can place a horizontal line in your message by using the <hr> tag. You may want to put an extra ENTER above and below it to space it out a bit.

Hyperlinks

You can place hyperlinks to other documents in your message in two ways:

1. Use the LINK URL field, usually below the message input box.
2. Build the link into the message.

To build a link into the document, use the following syntax:

<a href="http://www.somersaultforums.org/guides">Somersault's Guides</a>

If you want to point to another message on the board (or anywhere else) in your message, do this:

1. Open another browser window (ctrl-N in most browsers).
2. Using the second window, find the message you want to point to.
3. Highlight the URL of the message (in the Location box at the top of your browser window.
4. Press ctrl-C to copy this URL.
5. Close the second browser window (if you want).
6. Press ctrl-V (EDIT:PASTE) to insert the URL where you want it.

Note: If you want to show someone else how a hyperlink is constructed (as I did just above), instead of actually using the < and > symbols, write them out as &lt; and &gt; instead.

Emphasis

You can use italics, bold-face, underline, etc. to emphasize text. Here's how:

Note: Some users have asked me to note that many people do not like blinking text ("the most despised tag in HTML"). Just thought I'd let you know.

If you don't see the above text blink, blinking may be disabled in your browser, or your browser (e.g. Opera) may not support that tag.

Lists

Lists can be numbered (ordered) or unordered. Here's how to make them.

Make a numbered list like this:

<ol> <li>The first rule is not to eat before swimming.
<li>The second rule is that the first rule is bunk. </ol>

Which comes out as:

1. The first rule is not to eat before swimming.
2. The second rule is that the first rule is bunk.

The <ol> and <li> are placed on the same line to avoid extra CR's, which the script turns into blank lines.

Note that the <li> tag is a list item. Make an unordered list like this:

<ul> <li>Boys
<li>Girls </ul>

Which comes out as:

• Boys
• Girls

Note: To maintain correct line spacing when using lists on a chat board:

• Do not leave a blank line before the <ul> tag, and
• When closing put the </ul> tag on the SAME LINE as the last list item, and continue the text on the same line again.

Otherwise you'll end up with double spacing above and below the list.

Centering and Indenting

Centering

You can center text by using the <center> tag. Do not follow this tag with ENTER because the script will put extra line breaks in your text if you do. So:

<center>This is centered</center>

will give

Don't forget to close this tag with </center> or everything following it on the board (or at least in your message) may end up centered.

Indenting

You can't indent text by using spaces. HTML browsers ignore spaces except as word breaks. HTML provides a special tag for indenting: <blockquote>. All you have to do is to surround your indented text with these tags.

<blockquote> Think, when you talk of horses, of the patter of their hooves on the gravel of a country lane. What kind of machine can ever replace such magnificent beasts?

But the machine age has come, and the quiet neighing of a faithful friend is to be replaced forever by the raucous clatter of the "horseless carriage". </blockquote>

Will produce:

Think, when you talk of horses, of the patter of their hooves on the gravel of a country lane. What kind of machine can ever replace such magnificent beasts?

But the machine age has come, and the quiet neighing of a faithful friend is to be replaced forever by the raucous clatter of the "horseless carriage".

An alternative method that works well is to simply use an unordered list with no list item tags. Watch:

<ul> This is an indented paragraph. Only a short one because I can't think of much to say. Oh, did you hear the one about the Irishman and the dog? Too bad, neither did I. </ul>

gives

This is an indented paragraph. Only a short one because I can't think of much to say. Oh, did you hear the one about the Irishman and the dog? Too bad, neither did I.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This paragraph will show up with the first line indented if your browser supports the &nbsp; character. If not, you will see five &nbsp;'s at the beginning of the first line. Remember that it is the other guy's browser that does the interpreting, not yours.

should result in

     This paragraph will show up with the first line indented if your browser supports the &nbsp; character. If not, you will see five &nbsp;'s at the beginning of the first line. Remember that it is the other guy's browser that does the interpreting, not yours.

Formatted Text

Sometimes you will want to use manually formatted text. For example, if you are quoting something or need a short list. But if you try to line things up in a message, it won't work as you expect. For example, if I were to type:

To fix this we will need:
- a rubber ball
   i. to fill the hole
   ii. to play with afterwards

To fix this we will need:

- a rubber ball
i. to fill the hole
ii. to play with afterwards

Some of you may know that the HTML tag <pre> is normally used to do this. Alas, if you try to use it in posts, all the lines will come out double spaced (because the persnickity script puts in a line break every time you press Enter).

The solution is to set a fixed pitch font (Courier New is the usual one) and use non-breaking spaces where you want to indent, as shown here:

<font face="courier, courier new">To fix this we will need:

- a rubber ball
&nbsp;&nbsp;&nbsp;i. to fill the hole
&nbsp;&nbsp;&nbsp;ii. to play with afterwards
</font>

and it will come exactly as you want. The font tag should be on the same line as the start of the text or you will get an extra blank line that you don't expect.

Note: The use of both "Courier" and "Courier New" accommodates non-Windows viewers who don't have the Courier New font installed.

Summary

Don't try to use any of the following tags in a message:

• <body>
• <head>
• <html>

Also note that many chat boards may disallow other tags, like

• <img ...>

Make sure you always close tags. If you forget to close an <i> with an </i>, all the rest of the text in your message (and maybe even the board in some cases) will be italicized.

The only tags you do not need to close* are:

• <p>**
• <br>**
• <li>
• <hr>

* Actually, the HTML standard requires all tags to be closed, but most authors, authoring programs and browsers don't close the ones listed.

** Note that the use of these tags is discouraged in messages, the script inserts them automatically as required.