What follows is the aggregation of the old HTML Help docs from the RedState 2 days. In time it will be updated for the current RedState version 4 era.

Basic HTML for RedStaters

Or: So you’ve decided to use an image…

Greetings, Red State writer! If you’re reading this document, you’ve looked at the features in the Filtered HTML formatting option, and have decided instead to use full HTML features in your post. Here is how to do it.

A warning before I begin, though: HTML is cold and unforgiving, causing terrible errors to the whole page if you make a single letter mistake. Every slash, every quote, every greater-than and less-than sign is important. Please preview before posting when using HTML. And try to use Firefox when posting, because it will help you catch errors more easily.

Boldface: To emphasize text in bold, write it like this:

<strong>Text to be made bold here</strong>

Italics: To emphasize text in italics, write it like this:

<em>Text to be italicized here</em>

Monospace: To format text in a monospaced face, write it like this:

<code>Text to be monospaced here</code>

A note on using multiple features at once: strong, em, and other elements cannot be overlapped. So you can’t do this:

<strong>This text is bold <em> This text is bold and italic </strong> This text is italic </em>

They can be nested though. You can place an em entirely inside a strong, or a strong entirely inside an em. And the same goes for links and all other HTML. So this works:

<strong>This text is bold <em> This text is bold and italic </em></strong><em> This text is italic </em>

Blockquotes: To mark a group of text as a large quote, write it like this:

<blockquote>Place as many paragraphs, images, or other material as you want in here, as a quote. Even other quotes should work.</blockquote>

Links: To add a link to another webpage, write it like this:

<a href="http://your.full.link.here/etc">Descriptive text to put as link text here; don't just say "Click here"</a>

Images: To add an image, write it like this:

<img src="http://your.full.link.here/etc" alt="Descriptive text here"/>

Writing special symbols: You may notice that <, >, &, " have meaning in HTML. How then does one write these symbols for display in HTML? The answer is to use what is called an entity.

Every letter, number, or symbol that can be represented on the computer has an HTML entity. Most things can be written directly, though, so for ordinary text you don't have to use them. But when you need them, just write the entity out in place of the symbol you want. Here is a list of useful entities:

  • &trade; gives ™
  • &amp; gives &
  • &lt; gives <
  • &gt; gives >
  • &quot; gives "

Using these you can even give HTML examples, as I have here, without having to give clunky instructions like "remove the spaces."

More tips will be added as help is requested on them.

Advanced HTML for RedStaters

To do the fancy one-off tricks, you have to use one-off style instructions.

There comes a time in the use of HTML that you can't do any more using basic logical markup. To do the fancy one-off tricks, you have to use one-off style instructions.

And rather than bore people with any more introduction, I'll get right to it. To do a pullout quote as featured in this diary, do this:

<div style="float: right; width: 50%; font-size: larger; margin: 1em">Text to be pulled out here</div>

Note that you can also float an image on the side, like this:

<div style="float: left; margin: 1em"><img src="Image location here" alt="Image description here"/></div>

Just make sure the image isn't too wide to make it work nicely.

The key here is the use of Cascading Style Sheets instructions (that bit in the quotes after style=) to do things that aren't done automatically. As long as you separate the instructions in the quotes with semicolons, as done in my examples, the sky's the limit as to how you can customize things. It doesn't end with the pullouts, either. You can make a sarcastic comment strike out some text like so:

<span style="text-decoration: line-through">Text to be struck out here</span>

Other CSS instructions include borders (border: 1px solid red; obviously more useful for paragraphs and pullouts than ordinary text spans), underlines (text-decoration: underline), colors (color: white; background-color: black); subscript, superscript, and font sizes (font-size: smaller; vertical-align: sub (or super in place of sub)).

These are tools that can be very unpleasant to read if used badly. And worse, if your HTML messes up, a slip-up using these style instructions can make the rest of the page illegible. Please preview and test in a standards-compliant piece of software like Firefox if you're unsure of whether you did things right!

Update: A note on colors: you're not constrained to basic names like red or blue. Instead of using those words, you can use any 24-bit RGB color code by writing it in the format #RRGGBB, where RR, GG, and BB are hexadecimal values.

If that went over your head, have no fear. Just use your favorite paint program to pick an arbitrary color, and chances are it'll be able to give you the HTML/CSS code for it. I know Gimp does.

HTML Tables for RedStaters

Tables are the most overused and misused feature of HTML across the Internet, but there are times when they are useful to Red Staters. We deal in polls and other lists of figures often enough for HTML tables to be necessary, in fact. So please, use tables when appropriate, but use them sparingly. Never use the following information for anything but an array of information. Never use it to make things look pretty even though they don't belong in a table.

To make a table in HTML, one creates rows of cells. It's that simple. Here is a very basic table:

1 2 3
Alice Bob Carol

Here is how the table is constructed. First, begin the table element:

<table>

Then, begin a row:

<table>
<tr>

Next, begin adding cells of table data that belong to that row:

<table>
<tr><td>1</td><td>2</td><td>3</td>

Finish the row when all the data for that row is added:

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>

Repeat the previous three steps for each additional row of data:

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Alice</td><td>Bob</td><td>Carol</td></tr>

Finally, end the table itself after adding the last row:

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Alice</td><td>Bob</td><td>Carol</td></tr>
</table>

Some readers are already objecting. "Hey! I've seen you do tables much fancier than that! Tell us how to do those tables!" I will, immediately in fact, however one has to know the basics before one can add the frills. Frill number one: headers. When a cell is actually a header and not an element of data, use the th element instead of td:

<table>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>Alice</td><td>Bob</td><td>Carol</td></tr>
</table>

In Red State's standard style, our table now looks like this:

1 2 3
Alice Bob Carol

Frill number two: Colors and borders. The same CSS style options available to text paragraphs and spans are also available for table cells:

<table style="margin-bottom: 1em; padding: 2px; border: 1px solid black; text-align: center;">
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>Alice</td><td style="background-color: #400000; color: white;">Bob</td><td>Carol</td></tr>
</table>

Which now makes our table look like this:

1 2 3
Alice Bob Carol

Frill number three: cells that span more than one row or column. Use colspan and rowspan attributes to accomplish this. Note that they don't go in the style, but are separate. This is a quickie example that should be clear with a little study:

<table style="margin-bottom: 1em;">
<tr><td/><th>Vis Numar</th><th>Markos Moulitsas</th><th>Mary Landrieu</th></tr>
<tr><th>Party</th><td style="text-align: center; background-color: #ffefef; color: black;" colspan="3">Democratic</td></tr>
<tr><th>Organization</th><td rowspan="2" style="background-color: black; color: white;">The Stars</td><td>Daily Kos</td><td>US Senate</td></tr>
<tr><th>Guidance</th><td>Hate</td><td>Voters</td></tr>
</table>

Vis Numar Markos Moulitsas Mary Landrieu
Party Democratic
Organization The Stars Daily Kos US Senate
Guidance Hate Voters

And remember: please preview before posting any tables. Broken table HTML is far more destructive to further comments on the site, than any other kind of broken HTML. Be careful!

Side note: I actually used the margin-bottom: 1em; style for every table in this example, because Red State's standard style neglects to give tables a bottom margin, making the following text run right up against it.