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

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?

How to Post Graphic Smilies in Forums

The majority of today's forums using bbCode have their own graphic smilies that can be posted in messages.

I can't tell you what are the codes for smilies because of a simple fact that each forum has its own codes, but they shouldn't be difficult to add to your posts using advanced automated editors. Usually, you can see images of available smilies on those editors, to insert one into the message you're typing, you just click on its image & the code is inserted. There's maybe a link to a page containing more smileys & their codes. When you finish your posting & submit, smilies codes will be converted to graphic smilies.

The difference between the codes for smileys & others we saw previously, is that they don't contain tags. Smiles codes can be anything chosen by the forum administration, for example, a smiling face, could have the code ":)" or ":smile:", etc; a sad smile could have as code ":(" or ":sad:", etc. As I said it all depends on the community you post in, when you use the codes few times you'll most likely remember them & be able to type them manually in your messages.

Example:

Let's say the smiley has the code :smile: in the forum you're part of, if you type this:

Hello! Nice to be here! :smile:

The final message will look:

Hello! Nice to be here!

In the next post I'll tell you how to post smilies that are not present in the forum

What Kind of Forum are You Using?

In general bbCode works the same in any forum, but there are some little differences from which I already mentioned some in previous posts. (some variants in tags insertion, non support of some tags or support for extra tags)

I pointed differences between the four most used forums softwares which are vBulletin, phpBB, IP.Board & Simple Machine.

Rest a question: how to know which script of forum is used in the board you are part of?

That's pretty simple, ordinarily, all you need to do is to scroll down to the footer of forum looking for a text similar to this:

Powered by *Forum Developer*

*Forum Developer* is replaced with the name of the developer of the software, so if it's a vBulletin forum, it would be: "Powered by vBulletin"; same for phpBB & IP.Board, "Powered by phpBB" & "Powered by IP.Board" respectively.

On a Simple Machine powered forum you should see "Powered by SMF".

Edit Signature in Different Kinds of Forums

After the intro on forums signatures, let's see where to go to edit signature in the different types of forums, we'll see the four most popular ones, but first there are two general notes:

• This post doesn't explain how to insert bbCode for signatures but only location & instructions on signature editors, if you want to learn the codes I refer you to read this: How to Setup Your Forum Signature - Basics.


• If you're not sure what software uses the forum you're part of see: What Kind of Forum are You Using?
  


• If the instructions below doesn't work for you, it might be because signatures are disabled in the forum you participate in, so check the rules of that forum.

1. On vBulletin based forums:

On vBulletin forums, you have first to login of course, locate the User CP (User Conrol Panel) link, should be easily seen (usually just beneath the forum header). Click on the link to get to your control panel, usually on your left you should see a list of links among them an Edit Signature link. Click on it & you'll be presented to an editor like the one for posts, you can edit your signature, preview it if you wish (clicking the Preview Signature button), then when satisfied click on Save Signature button to save your changes.

2. Edition in IP.Board based boards:

If the forum you participate in is IP.Board based, login first then locate the My Controls link, click on it. Now, locate the Edit Signature link, usually in a list on the left of the page, click on it & you should be able to see the commands to edit signature, after you complete edition & click on the Update my Signature button, you can see then a sample of your signature, if you're not satisfied, you can edit again.

3. Locating signature editor on phpBB based forums:

In a phpBB powered board, first login in by entering your forum user-name & pass-word, then you should be able to see a link named Profile, (generally just beneath the forum header among other links), click on the Profile link, you'll be taken to a page in which you can change different preferences.

Once there, there are two possibilities: You may find the field in which you can edit signature in that same page, or you may see another Profile link on your left, if so, click on it to get to another page & edit your signature.

Most likely there won't be tools to automate tags insertion nor the option to preview your signature look. A trick that might help is that instead of typing all the codes manually in the signature field, go to start a new message in the forum, edit your signature in the box for posts & preview it as much as you like, when your satisfied, copy the codes to the signature field. (once you get your code, you can cancel the post you editing)

The final step after entering your code into the box for signature, would be to save changes, usually you'll find a button named Submit in the bottom of page, click on it.

4. Simple Machines forums:

In a Simple Machines forum, & once you're logged in, look for the Profile link (in a menu under the header usually), click on it & you'll be taken to the page in which you can edit some preferences, locate a link named Forum Profile Information (usually on the left) & click on it.

Now you can see a field in which you can enter signature codes. Like in phpBB forums, there's no advanced editor or an option to preview signature, so I'll repeat the tip I gave for phpBB:

Instead of typing all the codes manually in the signature field, go to start a new message in the forum, edit your signature in the box for posts & preview it as much as you like, when your satisfied, copy the codes to the signature field. (once you get your code, you can cancel the message)

Any questions? Just post a comment. :)