Somersault's HTML Guide: Difference between revisions

From BoyWiki
No edit summary
No edit summary
Line 1: Line 1:
__NOTOC__
==Intro==
{{box1 start}}
{{box1 start}}
<center>
<center>
Line 55: Line 59:
</ul>
</ul>
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.
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.
<p>
 
With this in mind, there are several simple rules that you can follow to make
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.
your messages stand out a bit from the rest, or to use emphasis where needed.
<b><i>Please; this document is NOT an HTML primer, it is intended only for this
<b><i>Please; this document is NOT an HTML primer, it is intended only for this
very limited application.</i></b>
very limited application.</i></b>
<p>
 
==HTML Post (Opera widget)==
==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 <b>HTML Post</b> 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.
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 <b>HTML Post</b> 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.
<p>
 
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.
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.
<p>
 


==Preparing your text==
==Preparing your text==
Line 73: Line 77:
online, or you can use an offline editor and then cut and paste. I do both,
online, or you can use an offline editor and then cut and paste. I do both,
depending on the length of the post.
depending on the length of the post.
<p>
 
==Common guidelines==
==Common guidelines==
No matter how you prepare the text, there are a few things you should know.
No matter how you prepare the text, there are a few things you should know.
Line 82: Line 86:
window size, and the line length that is appropriate for you may not be correct
window size, and the line length that is appropriate for you may not be correct
for anyone else.
for anyone else.
<p>
 
If you do attempt to do your own line breaks, either of two things will happen:
If you do attempt to do your own line breaks, either of two things will happen:


Line 112: Line 116:
checker. I mean, you DO want to seem wise and literate!
checker. I mean, you DO want to seem wise and literate!
</ol>
</ol>
<p>
 
<table border=0 cellpadding=5>
<table border=0 cellpadding=5>
<tr><td valign="top">**</td>
<tr><td valign="top">**</td>
Line 140: Line 144:
ENTER) at the end of every line. Simple editors, like Notepad, do this and are
ENTER) at the end of every line. Simple editors, like Notepad, do this and are
not suitable.
not suitable.
<p>
 
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
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>. <b>Do not use a WYSIWYG (what you see is what you get) HTML editor.</b> It will insert all the page tags
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>. <b>Do not use a WYSIWYG (what you see is what you get) HTML editor.</b> It will insert all the page tags
that the chat board script has already inserted, and that's against the rules of
that the chat board script has already inserted, and that's against the rules of
HTML.
HTML.
<p>
 
<b><i>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.</i></b>
<b><i>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.</i></b>
<p>
 
Once you've prepared your text, just select it all (ctrl-A), then copy
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
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.
chat board, just press ctrl-V (EDIT:PASTE) and you're all done.
<p>
 
<i>Note: Some of you may know that CR's are ignored by HTML, and may wonder why
<i>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
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.</i>
board converts CR's to line breaks when preparing your message.</i>
<p>
 
==Preview==
==Preview==
<p>
 
If you are using HTML tags it is important to preview your message before
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
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
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).
with a really dumb mistake in it (we'll leave the really dumb CONTENT to you).
<p>
 
==Overall Appearance==
==Overall Appearance==
While HTML allows you to set background colors and images, and control the use
While HTML allows you to set background colors and images, and control the use
Line 176: Line 180:
with most browsers. This means that you can't reliably set the background color
with most browsers. This means that you can't reliably set the background color
or install a background image on a message.
or install a background image on a message.
<p>
 
For example, I came across a message the other day in which the writer had used
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
white text, and had set a dark background so it could be read. Well, it didn't
Line 182: Line 186:
illegible. I had to temporarily set the browser default background to a dark
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 &#60;body&#62; tag doesn't make it right: it is NOT part of the HTML rules. Solution? Don't use light colored text.
color to be able to read the message. Just because some browsers actually respond to the second &#60;body&#62; tag doesn't make it right: it is NOT part of the HTML rules. Solution? Don't use light colored text.
<p>
 
Alternately, you can put your text in a <b>table</b> 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.
Alternately, you can put your text in a <b>table</b> 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.
<p>
 
<i><b>The use of tables is beyond the present scope of this document, but may be covered in later revisions.</b></i>
<i><b>The use of tables is beyond the present scope of this document, but may be covered in later revisions.</b></i>
<p>
<p>
Line 190: Line 194:
You can control the size, typeface and color of the text in a message. These are
You can control the size, typeface and color of the text in a message. These are
all done using the &#60;font&#62; tag. For example, the line:
all done using the &#60;font&#62; tag. For example, the line:
<p>
 
<ul>
<ul>
&#60;font size=+2 color="red"&#62;Hello there&#60;/font&#62;
&#60;font size=+2 color="red"&#62;Hello there&#60;/font&#62;
</ul>
</ul>
<p>
 
will produce the following output"
will produce the following output"
<p>
 
<ul>
<ul>
<font size=+2 color="red">Hello there</font>
<font size=+2 color="red">Hello there</font>
</ul>
</ul>
<p>
 
Note that you must always use the &#60;/font&#62; tag to close the font and
Note that you must always use the &#60;/font&#62; tag to close the font and
return to normal. Let's look at each of these in turn.
return to normal. Let's look at each of these in turn.
Line 210: Line 214:
that the default size is normally 3. Stick to the relative form in messages.
that the default size is normally 3. Stick to the relative form in messages.
Some examples:
Some examples:
<p>
 
<center>
<center>
<table border=1 cellpadding=10>
<table border=1 cellpadding=10>
Line 239: Line 243:
</tr></table>
</tr></table>
</center>
</center>
<p>
 
==Text Color==
==Text Color==
Text color can be controlled with the font command too. The syntax is
Text color can be controlled with the font command too. The syntax is
Line 248: Line 252:
blue components of the color. These are actually expressed as hexadecimal
blue components of the color. These are actually expressed as hexadecimal
numbers, but don't worry about that. Just follow the simple rules below.
numbers, but don't worry about that. Just follow the simple rules below.
<p>
 
In 256 color mode (somewhat rare these days), browsers choose colors from a limited <i>palette</i> 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.
In 256 color mode (somewhat rare these days), browsers choose colors from a limited <i>palette</i> 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.
<p>
 
So if I wanted pure red text, I'd set the color to "#FF0000". "#FFFF00" would
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
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
can come up with. For example, the orange I used at the top of this page is
"#FF6600". Here it is:
"#FF6600". Here it is:
<p>
 
<ul>
<ul>
&#60;font color="#ff6600"&#62;This is a line of orange text&#60;/font&#62;
&#60;font color="#ff6600"&#62;This is a line of orange text&#60;/font&#62;
</ul><p>
</ul>
<p>
 
gives:
gives:
<p>
 
<ul>
<ul>
<font color="#ff6600">This is a line of orange text.</font>
<font color="#ff6600">This is a line of orange text.</font>
</ul><p>
</ul>
==Typeface==
==Typeface==
This is a tricky one. Browsers allow the <i>face</i> to be specified as part of the font command. But you <b>must</b> 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):
This is a tricky one. Browsers allow the <i>face</i> to be specified as part of the font command. But you <b>must</b> 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):
Line 278: Line 282:
CAN provide a list of fonts, separated by commas, and the browser will choose
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 first one it finds on the reader's computer.
<p>
 
The examples I'm going to give MAY not show up correctly on all computers; it
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,
depends on what fonts you have installed. If I wanted to use Arial, for example,
for a short paragraph I'd do this:
for a short paragraph I'd do this:
<p>
 
<ul>
<ul>
&#60;font face="arial, helvetica, sans"&#62;This should be in Arial. If your
&#60;font face="arial, helvetica, sans"&#62;This should be in Arial. If your
Line 288: Line 292:
these it will use the default; whatever you have chosen.&#60;/font&#62;
these it will use the default; whatever you have chosen.&#60;/font&#62;
</ul>
</ul>
<p>
 
<ul>
<ul>
<font face="arial, helvetica, sans">This should be in Arial. If your computer
<font face="arial, helvetica, sans">This should be in Arial. If your computer
Line 294: Line 298:
will use the default; whatever you have chosen.</font>
will use the default; whatever you have chosen.</font>
</ul>
</ul>
<p>
 
<b>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.</b>
<b>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.</b>


Line 300: Line 304:
You can place a horizontal line in your message by using the &#60;hr&#62; tag.
You can place a horizontal line in your message by using the &#60;hr&#62; tag.
You may want to put an extra ENTER above and below it to space it out a bit.
You may want to put an extra ENTER above and below it to space it out a bit.
<p>
 
<hr>
<hr>
<p>
 
==Hyperlinks==
==Hyperlinks==
You can place <i>hyperlinks</i> to other documents in your message in two ways:
You can place <i>hyperlinks</i> to other documents in your message in two ways:
<p>
 
<ol>
<ol>
<li>Use the LINK URL field, usually below the message input box.
<li>Use the LINK URL field, usually below the message input box.
<li>Build the link into the message.
<li>Build the link into the message.
</ol>
</ol>
<p>
 
To build a link into the document, use the following syntax:
To build a link into the document, use the following syntax:
<p>
 
<ul>
<ul>
&#60;a href="http://www.somersaultforums.org/guides">Somersault's Guides&#60;/a&#62;
&#60;a href="http://www.somersaultforums.org/guides">Somersault's Guides&#60;/a&#62;
Line 318: Line 322:
That will end up looking simply like <a
That will end up looking simply like <a
href="/web/20100421122022/http://www.somersaultforums.org/guides">Somersault's Guides</a> in your text.
href="/web/20100421122022/http://www.somersaultforums.org/guides">Somersault's Guides</a> in your text.
<p>
 
If you want to point to another message on the board (or anywhere else) in your
If you want to point to another message on the board (or anywhere else) in your
message, do this:
message, do this:
<p>
 
<ol>
<ol>
<li>Open another browser window (ctrl-N in most browsers).
<li>Open another browser window (ctrl-N in most browsers).
Line 331: Line 335:
<li>Press ctrl-V (EDIT:PASTE) to insert the URL where you want it.
<li>Press ctrl-V (EDIT:PASTE) to insert the URL where you want it.
</ol>
</ol>
<p>
 
Note: If you want to show someone else how a hyperlink is constructed (as I did just above), instead of actually using the &lt; and &gt; symbols, write them out as &amp;lt; and &amp;gt; instead.
Note: If you want to show someone else how a hyperlink is constructed (as I did just above), instead of actually using the &lt; and &gt; symbols, write them out as &amp;lt; and &amp;gt; instead.
<p>
 
<table border=1 width="80%" align="center" bgcolor="yellow" cellpadding="5"><tr><td>
<table border=1 width="80%" align="center" bgcolor="yellow" cellpadding="5"><tr><td>
Please, please, if you're putting a link with a long URL in your post, do <b>not</b> 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.
Please, please, if you're putting a link with a long URL in your post, do <b>not</b> 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.
Line 341: Line 345:
You can use <i>italics</i>, <b>bold-face,</b> <u>underline</u>, etc. to
You can use <i>italics</i>, <b>bold-face,</b> <u>underline</u>, etc. to
emphasize text. Here's how:
emphasize text. Here's how:
<p>
 
<center>
<center>
<table border=1 cellpadding=10>
<table border=1 cellpadding=10>
Line 364: Line 368:
</table>
</table>
</center>
</center>
<p>
 
<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>
<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>
<p>
 
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.
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.
<p>
 
==Lists==
==Lists==
Lists can be numbered (ordered) or unordered. Here's how to make them.
Lists can be numbered (ordered) or unordered. Here's how to make them.
<p>
 
Make a numbered list like this:
Make a numbered list like this:
<p>
 
<ul>
<ul>
&#60;ol&#62;
&#60;ol&#62;
Line 380: Line 384:
&#60;/ol&#62;
&#60;/ol&#62;
</ul>
</ul>
<p>
 
Which comes out as:
Which comes out as:
<p>
 
<ol>
<ol>
<li>The first rule is not to eat before swimming.
<li>The first rule is not to eat before swimming.
<li>The second rule is that the first rule is bunk.
<li>The second rule is that the first rule is bunk.
</ol>
</ol>
<p>
 
The &#60;ol&#62; and &#60;li&#62; are placed on the same line to avoid extra CR's, which the script turns into blank lines.
The &#60;ol&#62; and &#60;li&#62; are placed on the same line to avoid extra CR's, which the script turns into blank lines.
<p>
 
Note that the &#60;li&#62; tag is a <i>list item</i>. Make an unordered list
Note that the &#60;li&#62; tag is a <i>list item</i>. Make an unordered list
like this:
like this:
<p>
 
<ul>
<ul>
&#60;ul&#62;
&#60;ul&#62;
Line 399: Line 403:
&#60;/ul&#62;
&#60;/ul&#62;
</ul>
</ul>
<p>
 
Which comes out as:
Which comes out as:
<p>
 
<ul>
<ul>
<li>Boys
<li>Boys
<li>Girls
<li>Girls
</ul>
</ul>
<p>
 
Note: To maintain correct line spacing when using lists on a chat board:
Note: To maintain correct line spacing when using lists on a chat board:
<p><ul>
<ul>
<li>Do not leave a blank line before the &lt;ul&gt; tag, and
<li>Do not leave a blank line before the &lt;ul&gt; tag, and


<li>When closing put the &lt;/ul&gt; tag on the SAME LINE as the last list item, and continue the text on the same line again.
<li>When closing put the &lt;/ul&gt; tag on the SAME LINE as the last list item, and continue the text on the same line again.
</ul>
</ul>
<p>
 
Otherwise you'll end up with double spacing above and below the list.
Otherwise you'll end up with double spacing above and below the list.


Line 421: Line 425:
with ENTER because the script will put extra line breaks in your text if you do.
with ENTER because the script will put extra line breaks in your text if you do.
So:
So:
<p>
 
<ul>
<ul>
&#60;center&#62;This is centered&#60;/center&#62;
&#60;center&#62;This is centered&#60;/center&#62;
</ul>
</ul>
<p>
 
will give
will give
<p>
 
<center>This is centered</center>
<center>This is centered</center>
<p>
 
Don't forget to close this tag with &#60;/center&#62; or everything following it
Don't forget to close this tag with &#60;/center&#62; or everything following it
on the board (or at least in your message) may end up centered.
on the board (or at least in your message) may end up centered.
<p>
 
===Indenting===
===Indenting===
You can't indent text by using spaces. HTML browsers ignore spaces except as
You can't indent text by using spaces. HTML browsers ignore spaces except as
word breaks. HTML provides a special tag for indenting: &#60;blockquote&#62;. All you have to do is to surround your indented text with these tags.
word breaks. HTML provides a special tag for indenting: &#60;blockquote&#62;. All you have to do is to surround your indented text with these tags.
<p>
 
&#60;blockquote&#62;
&#60;blockquote&#62;
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?
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?
<p>
 
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".
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".
&#60;/blockquote&#62;
&#60;/blockquote&#62;
<p>
 
Will produce:
Will produce:
<p>
 
<blockquote>
<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?
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?
<p>
 
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".
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>
</blockquote>
<p>
 
An alternative method that works well is to simply use an unordered list with no list item tags. Watch:
An alternative method that works well is to simply use an unordered list with no list item tags. Watch:
<p>
 
&#60;ul&#62;
&#60;ul&#62;
This is an indented paragraph. Only a short one because I can't think of much to
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.
say. Oh, did you hear the one about the Irishman and the dog? Too bad, neither did I.
&#60;/ul&#62;
&#60;/ul&#62;
<p>
 
gives
gives
<p>
 
<ul>
<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.
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>
</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. <b>Warning: the non-breaking space tag is not understood by all browsers and may show up as &#38nbsp; instead of a space.</b>
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. <b>Warning: the non-breaking space tag is not understood by all browsers and may show up as &#38nbsp; instead of a space.</b>
<p>
 
<ul>
<ul>
&#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 <b>other guy's</b> browser that does the interpreting, not yours.
&#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 <b>other guy's</b> browser that does the interpreting, not yours.
</ul>
</ul>
<p>
 
should result in
should result in
<p>
 
<ul>
<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This paragraph will show up with the first line indented if your browser supports the &amp;nbsp; character. If not, you will see five &amp;nbsp;'s at the beginning of the first line. Remember that it is the <b>other guy's</b> browser that does the interpreting, not yours.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This paragraph will show up with the first line indented if your browser supports the &amp;nbsp; character. If not, you will see five &amp;nbsp;'s at the beginning of the first line. Remember that it is the <b>other guy's</b> browser that does the interpreting, not yours.
</ul>
</ul>
<p>
 
==Formatted Text==
==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:
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:
Line 484: Line 488:
</pre>
</pre>
It will come out as:
It will come out as:
<p>
 
To fix this we will need:
To fix this we will need:
<p>
 
- a rubber ball<br>
- a rubber ball<br>
   i. to fill the hole<br>
   i. to fill the hole<br>
   ii. to play with afterwards<br>
   ii. to play with afterwards<br>
<p>
 
Some of you may know that the HTML tag &#60;pre&#62; 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).
Some of you may know that the HTML tag &#60;pre&#62; 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).
<p>
 
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:
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:
<p>
 
&#60;font face="courier, courier new"&#62;To fix this we will need:
&#60;font face="courier, courier new"&#62;To fix this we will need:
<p>
 
- a rubber ball<br>
- a rubber ball<br>
&amp;nbsp;&amp;nbsp;&amp;nbsp;i. to fill the hole<br>
&amp;nbsp;&amp;nbsp;&amp;nbsp;i. to fill the hole<br>
&amp;nbsp;&amp;nbsp;&amp;nbsp;ii. to play with afterwards<br>
&amp;nbsp;&amp;nbsp;&amp;nbsp;ii. to play with afterwards<br>
&#60;/font&#62;
&#60;/font&#62;
<p>
 
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.
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.
<p>
 
Note: The use of both "Courier" and "Courier New" accommodates non-Windows viewers who don't have the Courier New font installed.
Note: The use of both "Courier" and "Courier New" accommodates non-Windows viewers who don't have the Courier New font installed.
<p>
 


==Summary==
==Summary==
Don't try to use any of the following tags in a message:
Don't try to use any of the following tags in a message:
<p>
 
<ul>
<ul>
<li>&#60;body&#62;
<li>&#60;body&#62;
Line 515: Line 519:
<li>&#60;html&#62;
<li>&#60;html&#62;
</ul>
</ul>
<p>
 
Also note that many chat boards may disallow other tags, like
Also note that many chat boards may disallow other tags, like
<p>
 
<ul>
<ul>
<li>&#60;img ...&#62;
<li>&#60;img ...&#62;
</ul>
</ul>
<p>
 
Make sure you always close tags. If you forget to close an &#60;i&#62; with an
Make sure you always close tags. If you forget to close an &#60;i&#62; with an
&#60;/i&#62;, all the rest of the text in your message (and maybe even the board
&#60;/i&#62;, all the rest of the text in your message (and maybe even the board
in some cases) will be italicized.
in some cases) will be italicized.
<p>
 
The only tags you do not need to close* are:
The only tags you do not need to close* are:
<p>
 
<ul>
<ul>
<li>&#60;p&#62;**
<li>&#60;p&#62;**
Line 534: Line 538:
<li>&#60;hr&#62;
<li>&#60;hr&#62;
</ul>
</ul>
<p>
 
* Actually, the HTML standard requires all tags to be closed, but most authors, authoring programs and browsers don't close the ones listed.
* Actually, the HTML standard requires all tags to be closed, but most authors, authoring programs and browsers don't close the ones listed.
<p>
 
** Note that the use of these tags is discouraged in messages, the script inserts them automatically as required.
** Note that the use of these tags is discouraged in messages, the script inserts them automatically as required.


<hr>
<hr>
<p>
 
<center>
<center>
<i>Comments? Send email to <a href="mailto:somersault@somersaultforums.org">Somersault</a></i>
<i>Comments? Send email to <a href="mailto:somersault@somersaultforums.org">Somersault</a></i>

Revision as of 13:31, 13 January 2014

Intro


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:

  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!
** 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:

  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.

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.

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

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:

MarkupResult
<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

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

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.

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:

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:

  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.

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.

Emphasis

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

MarkupResult
<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.

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

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.

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.

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.

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

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.


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.

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