Somersault's HTML Guide

Using HTML in Chat Board Messages 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. <a name="contents">Contents</a> Note: Click on the hand <img src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"> to return to the Contents from anywhere in the document. <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#Introduction">Introduction</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#pado">HTML Post (Opera widget)</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#prepare">Preparing your text</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#common">Common guidelines</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#lose">Don't Lose It!</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#composing">Composing offline</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#preview">Preview</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#appearance">Overall appearance</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#background">Background</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#text">Text</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#size">Text size</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#color">Text color</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#typeface">Typeface</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#lines">Horizontal lines</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#links">Hyperlinks</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#emphasis">Emphasis</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#lists">Lists</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#cent-indent">Centering and Indenting</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#center">Centering</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#indent">Indenting</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#format">Formatted text</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#summary">Summary</a> 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. 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 <a href="/web/20100421122022/http://www.opera.com/">Opera</a> 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. 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. Here are some other rules that will make your text look professional and easy to read: Never press ENTER until you are at the end of a paragraph, then press ENTER twice. This will leave a blank line between paragraphs.** 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. Capitalize the first letter of a sentence, and capitalize the pronoun I. No point in displaying your illiteracy for the world! If spelling is a problem for you, compose offline and use your spell checker. I mean, you DO want to seem wise and literate! ** This ONLY works on chat boards. Normally, HTML completely ignores "new line" (i.e. Enter) characters. However, the chat board script converts these to <br> tags which are not ignored by browsers. 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 browser crashes, and clears the text. You press PREVIEW, then go BACK to post, and there's nothing there. You press PREVIEW, and forget you haven't posted. The solution is simple; as soon as you finish your text, before you do anything else, select all the text (ctrl-A in Windows), then copy it to the clipboard (ctrl-C in Windows). If you lose everything, just paste it back into the text entry field. Composing offline 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 <a href="/web/20100421122022/http://www.freewarehome.com/index.html">Freeware Home</a>. 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 While HTML allows you to set background colors and images, and control the use of fonts, you are quite limited in chat board messages. Background 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. <a name="text">Text</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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. <a name="size">Text size</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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: Markup Result <font size=1>Testing size 1</font> Testing size 1 <font size=2>Testing size 2</font> Testing size 2 <font size=3>Testing size 3</font> Testing size 3 <font size=4>Testing size 4</font> Testing size 4 <font size=5>Testing size 5</font> Testing size 5 <font size=-1>Testing size -1</font> Testing size -1 <font size=+1>Testing size +1</font> Testing size +1 <a name="color">Text Color</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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. <a name="typeface">Typeface</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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 There are many others, of course, but you take your chances if you use them. You CAN provide a list of fonts, separated by commas, and the browser will choose the first one it finds on the reader's computer. 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: <font face="arial, helvetica, sans">This should be in Arial. If your computer 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 computer 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. <a name="lines">Horizontal Lines</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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. <a name="links">Hyperlinks</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> You can place hyperlinks to other documents in your message in two ways: Use the LINK URL field, usually below the message input box. 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> That will end up looking simply like <a href="/web/20100421122022/http://www.somersaultforums.org/guides">Somersault's Guides</a> in your text. If you want to point to another message on the board (or anywhere else) in your message, do this: Open another browser window (ctrl-N in most browsers). Using the second window, find the message you want to point to. Highlight the URL of the message (in the Location box at the top of your browser window. Press ctrl-C to copy this URL. Close the second browser window (if you want). 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. Please, please, if you're putting a link with a long URL in your post, do not include the URL as the text to be displayed! Use a short description, instead. Since URLs don't include spaces, if they're longer than the reader's screen width, some browsers will widen the entire post to match the maximum length. The poor reader then has to scroll left-right left-right to read your post. If I come across such a post, I don't even bother reading it. <a name="emphasis">Emphasis</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> You can use italics, bold-face, underline, etc. to emphasize text. Here's how: Markup Result <i>Italicized text</i> Italicized text <b>Bold text</b> Bold text <u>Underlined text</u> Underlined text <s>Strikethrough text</s> Strikethrough text <b><i>Bold italics</i></b> Bold italics <blink>Blinking text</blink> <blink>Blinking text</blink> <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. <a name="lists">Lists</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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: The first rule is not to eat before swimming. 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. <a name="cent-indent">Centering and Indenting</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> <a name="center">Centering</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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 This is centered 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. <a name="indent">Indenting</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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. 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 &#38nbsp; instead of a space. &#38nbsp;&#38nbsp;&#38nbsp;&#38nbsp;&#38nbsp;This paragraph will show up with the first line indented if your browser supports the &#38nbsp; character. If not, you will see five &#38nbsp;'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. <a name="format">Formatted Text</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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 It will come out as: 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. <a name="summary">Summary</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/chat.htm#contents"><img border=0 src="/web/20100421122022im_/http://somersaultforums.org/guides/handup.gif"></a> 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. Comments? Send email to <a href="mailto:somersault@somersaultforums.org">Somersault</a> or go to <a href="/web/20100421122022/http://somersaultforums.org/techforum">Somersault's Tech Forum.</a> <a href="/web/20100421122022/http://somersaultforums.org/guides/index.html">Go back to the index page</a>.

External links

Internet Archive's Wayback Machine has copies online