Ordered & Unordered Lists - Basics - HTML Text Formating Part 6

The good things all come to an end, & the talk about HTML markup in bbPress powered forums is coming to its end with this post then the second part of it presenting how to create lists ...

As I said before & I'm repeating (because I know some of you would read some posts & not the others), HTML tags don't serve only in bbPress forums but are used by web devolopers / masters / designers all over the Internet unlike bbCode used only in some forums & whose tags are inspired from HTML.

Will finish with the tags used to create lists & they are three:

ul - for simple unordered lists

ol - for ordered numeral lists

li - short for "list item" which means that this tag wraps & designates the items in the lists (ordered or unordered).

These tags have similar use we already saw of [list] & [*] tags in bbCode.

As usual it's all about "wrapping", each of the three tags has an opening & an ending part: opening: <tag> - ending: </tag>, notice how the ending part has an extra character "/".

You'll have to wrap each element in your "future list" with <li> ...
</li>, then according to what type of list you want to use (ordered or not), you wrap all the items with <ol> ... </ol> or <ul> ... </ul>

Examples:

First an unordered list:

<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>

or even in one line:

<ul><li>Item One</li><li>Item One</li><li>Item One</li></ul>

Will be this in the final message:

• Item One
• Item Two
• Item Three

Now an ordered list using the <ol> tag:

<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>

The result is:

1. Item One
2. Item Two
3. Item Three

Rest some advanced tricks to create sub-lists, we'll see that next :)

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.

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>

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

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".

Posting Items Lists in Simple Machines Forums

Note: This lesson is about lists in Simple Machines based forums only. For regular help on lists insertions in bbCode, see: How to Create Simple Lists & How to Post Advanced Ordered Lists.

Not sure if your posts are on a Simple Machines powered board? See: What Kind of Forum are You Using?

In the forums based on Simple Machines script & software, posting lists is different from the other most popular ones.

First, ordered lists & the use of option with the [list] tag are not supported, so you can only post simple unordered lists.

Second, by default, a new tag [li] is used instead of the [*] tag for the items (or elements) in the lists, although [*] tag if used will give you the same result.

Let's see an example:

[list]
[li]List item.
[li]Another list item.
[li]And another one.
[/list]

Result in final post:

• List item.
• Another list item.
• And another one.

And the final difference in Simple Machines, is an addition: You can choose the symbols for your items by changing the default [li] tag. Those symbols can be a Disk, Circle or Square.

To make simple, let's see them all in an example:

[list]
[li]default - disc
[*]disc using [*] tag
[@]disc using [@] tag
[o]circle using [o] tag
[O]circle using [O] tag
[0]circle using [0] tag
[+]square using [+] tag
[x]square using [x] tag
[#]square using [#] tag
[/list]

Result:

• default - disc
• disc using [*] tag
• disc using [@] tag
• circle using [o] tag
• circle using [O] tag
• circle using [0] tag
• square using [+] tag
• square using [x] tag
• square using [#] tag