Somersault's HTML Guide
This page was a sub-page of Somersault's Tech Forum. It was last updated on June 9, 2009 and is presented here as a useful guide to using HTML on web-boards. Somersault was a long time participant on BoyChat and well known within the boylove community.
This page last updated June 9, 2009
This document has been prepared as a response to inquiries about using HTML on chat boards, particularly Somersault's Lounge, Tech Forum and other similar boards.
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:
This last can be very important in some cases, though the HTML used by the chatboards is quite simple and will be correctly interpreted by all modern browsers.
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.
HTML Post (Opera widget)
Since Pad-O-Rama, previously recommended on this page, no longer seems to be available, there's an alternative you can use (if you use the Opera browser). It's called HTML Post and is designed expressly for generating forum-compatible HTML posts. While it doesn't support all the tags shown in this document, it does the basic ones and is very easy to use.
You'll need to be using Opera 9.whatever, which you can find at Opera and once you've installed this (very nice) browser, you can use the menu item to find widgets, and click and install HTML Post.
Preparing your text
Two options here; you can work directly in the input message box while you are online, or you can use an offline editor and then cut and paste. I do both, depending on the length of the post.
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:
Don't Lose It!
From time to time you'll see howls on the chat board from people who have spent ages composing a message, then lost it. This seems to happen in several ways:
The only trick here is to choose a suitable editor. You want to use one that does NOT automatically put CR's (carriage returns; what you get when you press ENTER) at the end of every line. Simple editors, like Notepad, do this and are not suitable.
If you're using Windows, Wordpad works fine. So do Microsoft Word, and TextPad (with soft returns selected). Notepad2 is also excellent, but there are many other "raw text" editors to choose from. 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.
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).
While HTML allows you to set background colors and images, and control the use of fonts, you are quite limited in chat board messages.
The background color or background image used is defined in the HTML <body> tag. According to the rules you can only have one body tag in a document. Since the chat board script already has put the mandatory body tag in your document, you can not add another one. If you do, it won't cause an error (HTML never causes fatal errors); it will simply be ignored with most browsers. This means that you can't reliably set the background color or install a background image on a message.
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.
Alternately, you can put your text in a table and set the background color to whatever you like. Beware, though; the use of tables in forum posts is tricky, and you are likely to end up with a lot of vertical blank space at the top of your message. If this happens, use a raw text editor and delete all the Enter characters within the table cells.
The use of tables is beyond the present scope of this document, but may be covered in later revisions.
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:
Size can be controlled with the <font size=...> tag. Size can be absolute (1,2,3,4,5) or relative to the default size (+1, +2, -1, -2 etc.). Note that the default size is normally 3. Stick to the relative form in messages. Some examples:
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:
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):
The examples I'm going to give MAY not show up correctly on all computers; it depends on what fonts you have installed. If I wanted to use Arial, for example, for a short paragraph I'd do this:
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.
You can place hyperlinks to other documents in your message in two ways:
Archive.org link: Somersault's Guides
That will end up looking simply like Somersault's Guides in your text.
If you want to point to another message on the board (or anywhere else) in your message, do this:
You can use italics, bold-face, underline, etc. to emphasize text. Here's how:
<blink>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.</blink>
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 can be numbered (ordered) or unordered. Here's how to make them.
Make a numbered list like this:
Note that the <li> tag is a list item. Make an unordered list like this:
Centering and Indenting
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:
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.
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>
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>
There is no official mechanism in HTML for indenting the first line of a paragraph. If you must do this it can be done by using non-breaking spaces. Warning: the non-breaking space tag is not understood by all browsers and may show up as &nbsp; instead of a space.
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
It will come out as:
To fix this we will need:
- a rubber ball
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
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.
Don't try to use any of the following tags in a message:
Also note that many chat boards may disallow other tags, like
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:
Comments? Send email to Somersault
or go to Somersault's Tech Forum.