HTML Hints

Italic or Emphasize*

<i> or <em> --begin italicized text
</i> or </em> --end italicized text

*preferred in the HTML specification.

You <em>idiot</em>!

should show up as

You idiot!

Bold or Strong*

<b> or <strong> --begin bold text
</b> or </strong>--end bold text

Why? <strong>Because I said so, dammit!</strong>

should show up as

Why? Because I said so, dammit!

Underline

<u>--begin underlined text
</u>--end underlined text

I just read <u>The Age of Federalism</u>

should show up as

I just read The Age of Federalism

Did you just click on that title? Don't use the underline tag unless you really, really need to. People will think you are trying to make a link. Use em or strong instead.

Font faces, sizes and colors

The font tag has several attributes. Color, size, and font face are three of them. You can mix and match them in any combination. The format is the same for each:

<font attribute1="attribute1 value" attribute2="attribute2 value" attribute3="attribute3 value">text</font>

<font size="5" color="purple" face="Comic Sans MS">This will be big, purple, and in Comic Font</font>

should show up as

This will be big, purple, and in Comic Font

Or:

<font size="1">this will be very small</font>

should show up as

this will be very small

A note about font face:

The font face will only be seen by those who have the font installed on their system. This takes a lot of the fun out of the funky fonts! We're looking for volunteers to maintain a download site of commonly used fonts. Until then, Arial, Verdana, Times New Roman, Comic Sans MS, Trebuchet MS, and Courier are usually found on all systems.

WARNING: If you miss the closing quote, it does ugly things to the thread page!!!! It will look as if you have physically moved the posting window into your post. Very confusing--much different from the usual "toy" problem.

But only for a post or two, so don't panic. A grovel is appropriate.

Using White Font

The main reason to use white font is so that you can post movie "spoilers"--discussing plot elements without ruining the movie for others.

<font color="white">Verbal Quint is Keyser Soze!</font>

Lists

<ul>--starts bullet list (or unordered list, which is what the u stands for)
</ul>--ends a bullet list
<ol>--starts numbered list (ordered list, which is what the o stands for)
</ol>--ends a numbered list
<li>--identifies a list item--use between <ul></ul> or <ol></ol>

Bullet List:

<ul>
<li>Here is my first bullet</li>
<li>Second bullet</li>
</ul>

should be

• Here is my first bullet
• Second bullet

Ordered List:

<ol>
<li>Here is my first item</li>
<li>Second item</li>
</ol>

should be

1. Here is my first item
2. Second item

Tables

You have to end a row or a cell with a / tag or your table may not display correctly or at all.

The <table> tag has many attributes. A few of interest:

• Border--You can set a border to frame your table and make it look pretty. You can also border at the row and cell level, but Netscape doesn't handle it consistently (sez the IE bigot).
• bgcolor tag--you can set the background color of the table to anything you like. You can also bgcolor at the row and cell level.
• Cellpadding, cellspacing--sets the space around the inside (padding) or outside (spacing) border of the cells.

Font tags work as described above but must be used in each cell individually if you want to effect a font change.

Unless you know a great deal about tables, it's best not to get too adventurous. Here is a sample:

<table border="1" bgcolor="white">
<tr>
<td>Here is row 1, column 1</td>
<td>Here is row 1, column 2</td>
</tr>
<tr>
<td>Here is row 2, column 1</td>
<td>Here is row 2, column 2</td>
</tr>
</table>

looks like this:

White Space in Tables and Lists

The system automatically substitute breaks for each carriage return. Normally, this is exactly what you want--but it's a drag in tables and lists. Remove all carriage returns from your table and list tags. In short, the above examples should actually look like this:

<ul><li>Here is my first bullet</li><li>Second bullet</li></ul>

and this:

<table><tr><td>Here is row 1, column 1</td><td>Here is row 1, column 2</td></tr><tr><td>Here is row 2, column 1</td><td>Here is row 2, column 2</td></tr></table>

Links:

<a href="http://207.111.67.40/listthreads.asp" target="_blank">The Mote</a>

should be

The Mote

The target="_blank" part makes the link appear in a new browser window.

You can just copy the above text from <a href=, etc. and put it in the posting window. Change the URL and the linking text.

Linking to another Post:

Use the following format to link to a post in the same thread, where #### is the post number. For example, to link to post #1234, enter:

<msg num=1234>

To link to a post in a different thread, you must know the thread number. Look in the address window of your browser, and use the number after "thread=". To link to post #1234 in Movies, enter:

<msg thread=35 num=1234>

Note that there are no spaces before or after the = sign and no quotes.

Images

<img src="http://www.pictureplace.com/images/picture.jpg" width="300px">

Make sure you have a .gif or .jpg URL address. Any other URL address means the image is linked into the HTML.

If you need to find the .gif or .jpg URL on a page, just right click on the image. Select Properties (in IE) or View Info (in Netscape). A small window will appear in either case with the fully qualified URL.

Sizing the image:

If the image is huge, just resize it using the width= tag. 150px is a good starting point; 470px is the maximum width that won't mess up the margins. You don't need to use the height= tag, the browser will set the proportions accordingly.

<img src="http://img3.photobucket.com/albums/v13/demouser/1287.jpg" width="150px">

If you need a place to host your images, you can sign up for a free account at Shutterfly or Photobucket. Both are free. Instructions for Shutterfly are here. Be advised that images displayed from Shutterfly seem to disappear after a few days.

Combine Links and Images

Just substitute the image tag for text in the linking procedure.

<a href="url you want to link to here" target="_blank"><img src="image url here" width="200px"></a>

becomes

Images in Tables

This is especially neat if you want to wrap text around an image.

<table valign="top">
<tr>
<td><img src="image url here" width="200px" align="left">But make sure you have enough text to wrap around the image, otherwise the page will use the next post. No big deal. Just something to be aware of.</td>
</tr>
</table>

Looks like this:

But make sure you have enough text to wrap around the image, otherwise the page will use the next post. No big deal. Just something to be aware of.

Sounds

Hearing the same sound 20 or 30 times will quickly wear out its welcome. The post won't just give the sound once. It gives it every time any user goes into the thread, makes a post, or refreshes. Every single time, until the post disappears off the current page.

Don't use sound in a post, please. You can either link to a sound URL, or use the following method:

<EMBED SRC="http://www.sounds.com/melody.mid" autostart="false" loop="false" WIDTH=200 HEIGHT=55> </EMBED></p>

Make sure you set autostart to false! This should result in a little recorder icon that people can play. It doesn't always work; sometimes the browser doesn't have the correct plug-in or the server isn't configured for midis.

Linking to a sound will work for everyone. The local computer will play the sound in its default media player.

<a href="melody.mid">Click to hear my MIDI tune!</a>

Click to hear my MIDI tune!

Pick Up Your Toys!

The Mote's interface is pretty neat, but it is powerful. Any HTML tags you put in are included as part of the page that displays. Your mistakes are included in the code for the page. The most common mistake is to neglect to close off your HTML tags (/tag).

If you don't use the closer tag on an italicized phrase, the rest of the page will appear in italics. Or bold. Or a very large font. Or the entire page will be indented because you forgot to close off a list.

But if you forget, don't panic. Make another post with just the closing tag in it.

Better yet, preview!

Also, you can close off anyone else's tags if you are sure you know what the problem is. (In general, don't end a table for another user. Better to suffer. )

We call this "picking up your toys". If you forget to close a tag, someone might close it after you and say "Toy check" or "Toys".

Post "Mockups"

If you are the sort who always likes to see how far you can push the envelope, you might notice that you can use HTML to create an exact duplicate of a real Mote post.

Please note: It is impossible to forge a post, even though we often refer to the mockups as "forgeries" as shorthand. The system does not treat the HTML as a real post, the time display will not be consistent, and it is only the use of white font that hides the individual who actually made the post. This is not a security hole. It is easily detected as a mockup with a visual scan.

Still, it is very disconcerting for anyone to see a "post" in their name that they know they didn't make. Even if the shock only lasts for a moment or two. Please do not "mockup" posts unless you clearly identify it as such, and do not post a mockup under the name of an actual Mote Member.

Verboten HTML tags

Seriously, the worst thing that would ever happen is that the post would get deleted. Nothing dreadful. But please try to avoid the following tags, and make sure you vet any copied HTML.

• <html>
• </html>
• <body>
• </body>
• The "align" attribute with the <p> tag. (it's okay for tables and images)

There are probably others. When in doubt, err on the side of caution.