HTML Formatting Instructions for Posts

On several occasions, members have asked how to enhance their posts and make them look like the fancy blog topics that Bob and Ted do such a great job with.

This forum topic covers the basic concepts behind HTML and how it’s power can be used to make posting comments and forums look more appealing.

1. Basic Editing Concepts

1.1 Understanding the comment editor

The comment editor used to enter forum topics and comments is a simple web-based form that stores the text that you type into it and submits it to be added to posting database.

When the content is submitted, the code is scanned for HTML instructions called tags, attributes and elements, which are denoted by the special characters ‘<’ and ‘>’. If these instructions are found, they are interpreted and the text is rendered accordingly on the screen. Only a small subset of the entire HTML is supported by the comment editor.

1.2 HTML basics

HTML instructions are represented by opening and closing tags <opening tag>text here</closing tag>. The closing tag is typically the same as the opening tag; only a forward slash character prefixes it. The text between the tags is modified based upon the instruction when it is rendered. For example to make a line of text boldface, the text you would enter would be:

<b>I want this text to be bold</b>

Additional HTML tags will be discussed later.

1.3 Find a simple text editor

Believe it or not, this topic was authored using the built in Windows text editor, Notepad. The reason why I choose to use it is that it does not embed any hidden custom formatting or bookkeeping information within the files. For complicated posts with many HTML features, I typically use it to write the content of my post then copy and paste the content into the comment editor.You may also preview the post by saving it to a file with an .html extension, then opening it in IE or Firefox.If all the tags are properly entered, your post should be displayed as expected.

2. Text Formatting

2.1 Aligning Text

Carriage returns are not interpreted in HTML. To start a new paragraph, the <p> and </p> tags are used. Everything contained within the tags are considered a single paragraph. The spacing between paragraphs is automatically determined by the browser. An optional identifier align= may specified that tells how the paragraph should be aligned, such as left, center or right. For example, <p align="center"> Here is my paragraph text</p> will be displayed as

Here is my paragraph text

other examples are:

Here is a left justified paragraph

Here is a right justified paragraph

2.2 Boldface Text

To make any text bolded, embed it between the <b> and </b> tags.

This is an example of some bolded text, and it doesn't even need to be an entire paragraph!

2.3 Italic Text

To make any text italicized, embed it between the <i> and </i> tags.

This is an example of some italicized text, and it doesn't even need to be an entire paragraph!

2.4 Blockquote Text

A quoted block of text is indicated by a gray background, with a border and indented on both sides. This block of special text is embedded between <blockquote> and </blockquote>

This is an example of a quoted block of text. This is an example of a quoted block of text. This is an example of a quoted block of text. This is an example of a quoted block of text. This is an example of a quoted block of text. This is an example of a quoted block of text. This is an example of a quoted block of text.

2.5 Outline Text

An ordered list is a sequence of indented items prefixed by a number. An unordered list is indicated by the <ol> and </ol> tags. In between the <ol> and </ol> are a series of list items embedded in <li> and </li> tags. For example, this HTML code:

<ol>
 <li>This is item 1</li>
 <li>This is item 2</li>
 <li>This is item 3</li>
</ol>

produced the following list:

1. This is item 1
2. This is item 2
3. This is item 3

Bulleted Lists

An unordered list is a sequence of indented items prefixed by a bullet. An unordered list is indicated by the <ul> and </ul> tags. Just like in an ordered list, each item in the list is indicated by the <li> and </li> tags. The following is an example of an unordered list.

• This is item 1
• This is item 2
• This is item 3

3. Table Data

Entering tabular data is pretty complicated. Four different HTML tags are needed to create one. The first tag <table>table commands</table> tells the browser that the commands enclosed represent a single table. The second tag <tr>row data</tr> inserts a new table row. The third tag <th>header label</th> sets the column header to the specified header label. The final tag, <td>table data</td> inserts a value into the table. Below is an example of a three by three table of data:

<table border="1" >
  <tr>
   <th>President</th>
   <th>IQ</th>
   <th>Relative Intelligence</th>
  </tr>
  <tr>
   <td>Ronald Reagan</td>
   <td>74</td>
   <td>Coco the Chimp</td>
  </tr>
  <tr>
   <td>George W. Bush</td>
   <td>10</td>
   <td>Marine deepwater sponge</td>
  </tr>
</table>

This table data yields the following table:

4. Using Links

References to another website are automatically interpreted by the comment editor and made a hyperlink (i.e. clickable). There are times however when you may want the link text different then the link URL. This is done using the anchor tag with a target link. The syntax for a hyperlink is <a href="target URL">link text to display</a>. Below is an example of link named Necco, Goddess of Thunder, that when clicked, takes your browser to www.neccogoddessofthunder.com:

<a href="http://www.neccogoddessofthunder.com">Necco, Goddess of Thunder</a>

which when rendered, looks like: Necco, Goddess of Thunder

5. Embedding Images

Embedding images on the blog is probably the most difficult task. Democrats.com does not allow embedding of images from external sources, therefore any images that you wish to appear in a post must be uplinked to your image gallery first. Once there, they can be referenced using the HTML image tag <img src="image URL"/>. This will display the image in its original size at the current location in the text. To resize the image, you can specify the image width and height attributes like this: <img src="image URL" width="width in pixels" height="height in pixels"/>.

The hardest part of this whole process is figuring out the URL of the image in your gallery. I've found that the easiest way to do it is to use your browser and navigate to the image in your gallery that you want to display in your post. Right-click on the image and select "Copy image location" (this menu item is from Firefox, IE might be different). This places the link into your paste buffer. Paste this location into the URL field of the HTML image tag. An example of an image from my gallery is shown below using the following HTML:

<img src="http://democrats.com/images/947ce5df0ca0c6475b1d23d9ce666e4e-2462_640x480.jpg" width="80" height="80"/>

6. Posting Your Work

Ok, you're almost there. You've edited a well thought and researched jewel of blogging wisdom, now it's time to unleash it on the cyberworld.

Open the text file if you've saved it in a Notepad text file, select all of the text and copy it to the paste buffer. Go back to your browser and paste it into the comment editor. IMPORTANT: click "Preview Comment", not "Post Comment" just yet. Preview will show you exactly what your post will look like before it's actually submitted. Verify that it's correct, and then submit it. That's all there is to it!

Hope this helps everyone. Let me know of any other tips or tricks that you know and I'll add them. And by all means, if something is incorrect here, let me know. Happy posting!

Golfmonkey