Blockquote & Line Break Markups - HTML Text Formating Part 3

In this third part on bbPress posts formatting based on HTML, I will continue with the use of HTML markups & tags,

blockquote tag - quoting text

The <blockquote> tag has the same use that has the [quote] tag in bbCode, it formats the text wrapped by it so that it appears different from the rest of the post; that's usually done to let the reader know the text formatted that way is taken from another post or any other place (a "quoted" text).

The use of the tag is as simple as wrapping the text needed to appear quoted, so that this:

Einstein said:
<blockquote>Everything should be made as simple as possible, but not simpler.</blockquote>

Looks similar to this:

Einstein said:

Everything should be made as simple as possible, but not simpler.

br tag for line-break

In most of cases you won't need the <br> tag, it has no equivalent in bbCode & in HTML it serves to set line breaks in text (going to the next line), in the forums using bbCode you don't need a tag to go to the next line but only to hit "Enter" in your keyboard, in bbPress it's the same & the <br> tag is optional, only in some rare cases you would be driven to use it.

Anyways, here's how it works: the <br> is a unusual tag as it doesn't need to wrap any text & doesn't have an opening & closing parts, only one part that closes itself, like this: <br />, notice the space then the forward slash "/" in the end.

Example:

This part is in the first line<br />and this in the second.

Would look:

This part is in the first line
and this in the second.

Live Clickable Links - HTML Text Formating Part 2

We saw an intro on posts coding in bbPress powered boards here: Basic HTML Markup for bbPress

Then we started learning about the coding in the first part: HTML to Format Text Part 1

From this part we will start learning the use of tags one by one.

Let's start with the first value: the "a", it's for creating live clickable links in bbPress forums & in HTML in general, it would be the equivalent of the [url] tag we saw in bbCode.

The [url] tag as we saw, has a simple & an advanced use, but the <a> tag is used in one & only way.

The tag has to include the target URL & to wrap the text meant to be clickable, let's see an example in two steps, to make it simple, we'll link the word Google to to google.com

First, we'll wrap the word with the <a> tag (notice how the tag wraps the word & the forward slash "/" in the 2nd part):

<a>Google</a>

Not hard to guess that the browser who is going to decipher the code won't be able to link the word to anything as we didn't tell it to which address (or URL) to link, the link should be added in the starting tag after a href= code & between two quotation marks ", here's how it should look like:

<a href="http://www.google.com/">Google</a>

The final result would be:

Google

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";
}