Tuesday, November 20, 2007

Italic & Bold in bbPress - HTML Text Formating Part 5

In the series I started on bbPress powered forums posts formatting, let's continue with the different tags used for that, as I said previously, most of those tags are basic HTML tags, used in all the web pages across the Internet.

First let's see the em tag, em is short for emphasis & this tag is used to make the text italic, same as the [I] tag we saw with bbCode.

The use of the em tag is simple, it has a starting part "<em>" & an ending part "</em>" (notice the forward slash "/" in the second part), both used to wrap the text we want to make italic. (we'll see an example below).


Another tag is the strong tag, this one makes the text wrapped strong or bold, it's like the [B] tag in bbCode. Same as the em tag & most of other HTML & bbCode tags, the strong tag has an opening part "<strong>" & an ending part "</strong>" to wrap the text.

Examples:

<em>This text is italic</em> & <strong>this is bold</strong>.

Will look like this in your formatted message:

This text is italic & this is bold.

You can combine the two tags to get your text italic AND bold:

<strong><em>This text is italic & bold</em></strong>.

Notice how I closed last the tag I opened first, that's very important.

Result:

This text is italic & bold.

Saturday, November 3, 2007

Display Codes in bbPress - HTML Text Formating Part 4

Let's continue what we started in this post & see more tags & markup for use in HTML & on bbPress powered forums.

The code tag is used to display codes in posts (HTML, Javascript, PHP, etc), its function is similar to the use of the [code] tag in bbCode.

There are two options to wrap the codes, the first is by using the <code> tag, & the second uses the back ticks "`", it's better to use these last because the first tag is a HTML tag, & as you'll going to use it to wrap "HTML", some conflicts may occur; in the other hand the back ticks "`" are used as special coding in bbPress forums, in fact they they are not part of HTML markup.

Let's see an example:

<code><script type="text/javascript">
<!-- alert("Hello world!"); //-->
</script></code>

(notice the forward slash "/" in the last part)

or

`<script type="text/javascript">
<!-- alert("Hello world!"); //-->
</script>`

would look:

<script type="text/javascript">
<!-- alert("Hello world!"); //-->
</script>




Now let's suppose the code you want to insert contains the <code> tag in it, that would lead to a conflict & an error in the final message, that's why it's better to use the "`" instead ... example:

<code><code><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></code></code>

Would look like this:

<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />

The second <code> tag was omitted, but if you use the back ticks instead:

`<code><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></code>`

The result would be this:

<code><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></code>