Using HTML Tags to Format Text - Part 1

Let's in this post try to see how to use HTML markup for posts formatting on bbPress based forums, as we talk about HTML, the things we will see are not meant only to be used on bbPress, but in any situation that requires the use of HTML.

Let's start!

Like bbCode (derived from HTML), HTML is composed of tags that wrap the text, tags are composed of:

1. Lower than sign "<" & greater than sign ">" (have the same use that have the "[" & "]" brackets in bbCode)

2. A value added to the < & > signs to make each tag different from others & with a unique function. In the previous lesson we saw the values: a, blockquote, br, code, em, strong, ul, ol & li.

3. Then almost any tag has an opening part & an ending part, same as what we saw with bbCode tags. Example: em is a value that makes the text italic, to use it as a tag, we need to wrap the text we want italic with <em> in the beginning & </em> in the end. Notice the "/" (forward slash) in the ending part.

Next will start seeing the use of each tag: Part 2 - a - Live Clickable Links

Basic HTML Markup for bbPress Powered Boards

bbPress is another developer of forums softwares, bbPress boards are simple and practical, you can go & see bbPress Support Forums as an example of how forums based on that script look like.

Unlike other popular softwares, bbPress doesn't use bbCode to format text in posts, instead, it uses basic HTML coding. Let's see in this post what are those markups, they may be useful in other boards too & in some other situations, you might have guessed that HTML is much more widely used that bbCode which is restricted to some forums, HTML is the universal language of the Internet & you will for sure be confronted in situations in which you have to use some basic HTML coding while browsing the web and doing diverse stuff.

1st how to know you're on a bbPress powered forum?

As we saw with other forums, croll down a page on the forum to see "Powered By bbPress" in the bottom.

When you're about to post a message on a bbPress based board, under the field in which you need to type your message you see the following message:

Allowed markup: a blockquote br code em strong ul ol li.
Put code in between `backticks`.

a - used to insert live links (or URLs) - equivalent of the [url] tag in bbCode

blockquote - for quoting test - equivalent of the [quote] tag in bbCode

br - for line-breaks - no need to it in bbCode

code / ` - to wrap codes - equivalent of the [code] tag in bbCode

em - for italic text - equivalent of the [I] tag in bbCode

strong - for bold text - equivalent of the [B] tag in bbCode

ul / ol / li - for unordered lists - equivalent of the [list] / [*] tag in bbCode

In the next post I will start explaining how to insert each for formatting posts, just a hint: instead of the [ & ] brackets used in bbCode, in HTML & so in bbPress < & > are used.

Let's start: HTML Tags to Format Text - Part 1

Special Coding Tags: HTML, PHP, Etc.

Besides the [code] tag (seen & explained in the previous lesson), there are other more specialized tags for codes but they are not used the same way by the different forums softwares or not used at all in some.

The [html] tag for example allows you to insert boxes containing HTML & to perform HTML syntax highlighting, but it only works in vBulletin & IP.Board powered forums.

In a SMF board it won't have any effect, & in a phpBB board it leads to an error in coding (non supported tag). If you're not sure what software your community uses read: What Kind of Forum are You Using?

Example:

[html]
<img src="image.gif" alt="image" />

<a href="testing.html" target="_blank">Testing</a>
[/html]

The colors you see in the code inside the box, were inserted automatically just by wrapping the code with [html] tag. They highlight HTML syntax.


HTML Code:

<img src="image.gif" alt="image" />

<a href="testing.html" target="_blank">Testing</a>

Another specialized coding tag: [php] tag. In a vBulletin based forum it will work same way [html] does but highliting PHP syntax. In a SMF forum it highlights syntax without creating a box or converting fonts, while in IP.Board and phpBB the tag is not supported & leads to an error if used.

Example:

[php]
$myvar = 'Hello World!';
for ($i = 0; $i < 10; $i++)
{
echo $myvar . "\n";
}
[/php]

Will look in a vBulletin Forum:

PHP Code:

$myvar = 'Hello World!';
for ($i = 0; $i < 10; $i++)
{
echo $myvar . "\n";
}

And in a SM (Simple Machines) Forum:

$myvar = 'Hello World!';
for ($i = 0; $i < 10; $i++)
{
echo $myvar . "\n";
}

Insert Codes into Your Posts

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

You can insert HTML, PHP, Javascript codes, etc into special boxes using bbCode, the text inserted in the code box will be converted to a fixed-width (monospace) font, & ensures that nothing from the code is lost when you submit your message.

The tag for code is [code]. Its use is not different from the use of other tags we saw, it should wrap the code you want to be in the box.

Example:

Let's wrap an example of Javascript code:

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

Here's the result you would get:

Code:

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

Insert Your Smilies in Posts

You can insert your own smilies in your messages from your hard disk or other forums. You would like to do that, if the forum do not have some emoticons that fit certain occasions or if it doesn't contain smilies at all.

In fact graphic smilies are just small pictures, if they are associated with some special codes in the forum (":)" or ":(" for example) they get shown in posts by typing those codes. But if they don't have those codes, they still can be inserted same way as images, i.e. using the [img] tag.

Steps to post external smilies:

First, you need a hyper-link for your smiley, if it's already on the Internet (on another forum for example), it has already a hyper-link that you could copy to later put in your post; if the image (smiley) is on your computer, upload it to an images host to get a link for it. We already saw the two methods in detail when we talked about images. See this: Methods to Get Images Links.

Now that you have the URL (hyper-link) for your smiley, you just have to wrap the link with the [img] tag & you're done (for more details see: Intro on [img] tag & Hyper-links).

Example:

I uploaded a smiley to PhotoBucket, and here's its hyper-link:

http://i228.photobucket.com/albums/ee88/learn-bbcode/smile.gif

Now let's wrap it with the [img] tag:

[img]http://i228.photobucket.com/albums/ee88/learn-bbcode/smile.gif[/img]

Once you have that code you can insert it anywhere in your message, it's much longer than usual smiles codes but the result is the same:

Hi! [img]http://i228.photobucket.com/albums/ee88/learn-bbcode/smile.gif[/img] Howdy?

Would look:

Hi! Howdy?