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

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. :)

How to Setup Your Forum Signature - Basics

Many forums allow users to add signatures to their profiles, those signatures then appear automatically in the end each of their posts.

You can use bbCode to put anything in your signature, plain text, links, images, etc. you must be careful of the rules of each forum, almost all limit the number of the different items in signatures to avoid spam or abuse.

No difference between bbCode use in posts or in signature, so first, for the formatting, I will refer you to the previous, & second, in the next post, will talk about where to locate signatures editors in the different kinds of forums.

Basic content edition lessons:

Basics: How Does bbCode Work?; How to Correctly Insert Tags.

Formatting of text: Bold / Italic / Underline; Colors; Fonts; Size; Alignment.

Inserting Live Links: Regular Links; e-Mails.

Insertion of Images: Part 1; Part 2; Part 3; Clickable Images; Alignment.

Others: Checkout the sidebar on the right.

Where to go to edit your signature?

That depends on the type of forum you're in, for the four most popular, see instructions here:

Edit Signature in Different Kinds of Forums

If you can't find there, post your questions as a comment to this post :)

Post Clickable Thumbnails Using ImageShack

I talked yesterday about a nice way to post thumbnails or previews of pictures in your forums posts to avoid the trouble that large images would cause if displayed directly in posts.

See the post here: How to Post Pictures Clickable Thumbnails on Forums

However that methods require some knowledge in images edition. That's why, let's see today a less complicated method.

First you need to upload your image to ImageShack.us, it's easy:

• Click HERE to go to ImageShack site
• You'll see three radio buttons to choose from: "image", "url", "video", choose "image".
• There's a "Choose..." button, click on it, browse your hard drive to locate your image then click "ok"
• If you don't already have an account with ImageShack, you'll be invited to enter your e-Mail address, enter a valid one so that you get your own account that is going to be very useful in the future
• You'll see also two boxes to check: "resize image?" & "remove size/resolution bar from thumbnail?" do not check any of them
• Last step: click the "host it" button to start upload process.

When the upload is finished you'll be presented to a page in which there are four HTML & BB codes one under each other, what interest us is the second one, the one titled "Thumbnail for forums (1)". (Not "Thumbnail for forums (2)"!!)

As an example, I uplaoded an image, & here's it's bbCode provided by ImageShack:

[URL=http://img339.imageshack.us/my.php?image=c7cl7.jpg]
[IMG]http://img339.imageshack.us/img339/1311/c7cl7.th.jpg[/IMG][/URL]

The code above is not correct because there's a line-break in it, I posted it in two lines, because it would break my blog layout if displayed in one line, your code should be in one line.

I won't explain what exactly mean the tags & other URLs in the code, if you want to know, it is very similar to what we saw in the 1st lesson: How to Post Clickable Thumbnails on Forums.

So what rest now, is just to go & paste your code in your forum message, the result will be this:

How to Post Pictures Clickable Thumbnails on Forums

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.

If you're not familiar with images in bbCode, read images lesson in three parts: Part 1, Part 2 & Part 3.

Sometimes posting big images into your posts presents a problem, because large pictures are hard to load & often deform forums layouts & reduce their usability.

In the end of my post on Images Display Part 3, I talked about an alternative which is the use of [url] tags instead of [img] tag, this way only a link to the image & not the image itself is displayed in your final message.

In this lesson, let's talk about an other option: "Thumbnails".

Thumbnails are small previews of images, linked to the original full size pictures, that means, that instead of posting the original large image, you post a thumbnail or preview, on which users can click to see a new page open with the full sized image displayed on it.

If you are familiar with images edition, you can create your own thumbnails. All you need is to create a reduced size copy of an image, upload both to an images host & code them using bbCode, let's see an example:

Below is the URL of my original picture hosted on PhotoBucket (I made it clickable to let you see how it looks like):

http://i228.photobucket.com/albums/ee88/learn-bbcode/C7.jpg

& this is the link to an image which size is 30% of the original:

http://i228.photobucket.com/albums/ee88/learn-bbcode/C7-thumbnail.jpg

Now, we will follow the same steps we followed when we made a linked clickable image:

As we want to display the preview in the forum message, we first have to wrap it with [img] tag:

[img]http://i228.photobucket.com/albums/ee88/learn-bbcode/
C7-thumbnail.jpg[/img]

(don't have a line-break in your code, keep it in the same line!)

Result:



Now, to link to the original full sized picture, we have to wrap the code above with [url] tag, & to add an option to it which is the link to our picture:

[url=http://i228.photobucket.com/albums/ee88/learn-bbcode/C7.jpg]
[img]http://i228.photobucket.com/albums/ee88/learn-bbcode/
C7-thumbnail.jpg[/img][/url]

(again, the code has two line-breaks because of limitations in this bog's layout, but keep yours in one line)

To verify the result, click on the thumbnail below:




That's it! If your not familiar with images edition though, we'll see in the next lesson an easier way to post thumbnails: Post Clickable Thumbnails Using ImageShack :)

How to Quote Messages of Other Posters - bbCode Basics

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.

The quote feature allows you to display in your post, a previous post, a part of it or any block of text, the quoted text will usually be shown in a frame in your final post to differentiate it from your own words.

The tag for quoting is [quote]. Now in the popular forums, you just need to click on a button to quote a previous post, or to copy then paste the quoted message or paragraph to he field in which you type your post, to select that text, then to click a button to make it between the starting tag [quote] & the end tag [/quote].

However, my aim here is to let you know how exactly tag work so that you can manually insert them without editors & also to customize them for your needs, as the automated systems have only basic plain usability.

Let's first do a simple quote, then use an option for more advanced quoting:

1. Example on a simple quote:

Nothing we don't already know about correct tags insertion:

[quote]This part is a quoted text.[/quote]
This part is not.

Will most likely look in your final post:

Quote:

This part is a quoted text.

This part is not.

2. Advanced quoting using options:

There are some options available in some forums scripts & not in others, but there's one common option, the one that let you specify the poster / author of the quoted text. This option is added as we add other options we already saw, i.e in the starting tag after the tag code & an "=" sign, the option itself will be the name of the poster / author of the quoted text (in fact you can type anything as the option).

Example:

[quote=Sandy]This is what wrote Sandy.[/quote]
This is my reply to it.

Will look in your final post depending on the forum you participate in:

Quote:

Originally Posted by Sandy This is what wrote Sandy.

This is my reply to it.

or:

QUOTE(Sandy)

This is what wrote Sandy.

This is my reply to it.

or:

Quote from: Sandy

This is what wrote Sandy.

This is my reply to it.

etc.

Note: Since I stated this blog, phpBB based forums are making me some troubles as they don't include some useful features in bbCode, or have some special codings.

If the advanced tutorial above doesn't work, maybe the forum in which you tried it on is a phpBB based forum (to be sure see: What Kind of Forum are You Using?), in this case, you have to wrap the option with quotation marks "".

Example:

[quote="Sandy"]This is what wrote Sandy.[/quote]
This is my reply to it.

Result:

Sandy wrote:

This is what wrote Sandy.

Any questions? drop a comment! :)

Advanced Use of Lists - Sub-Lists / Under-Lists Creation

We already talked about the basic posting of lists in two lessons: How to Create Simple Bulleted Lists & How to Post Advanced Ordered Lists.

Let's talk now about more advanced use of lists in bbCode. You are not limited in posting plain lists, you can combine tags with different option to get some advanced lists with sub-lists under them.

This might be a bit complicated, you may make some errors while creating your list, & may have to preview your messages before you publish them to check if all is correct. All the popular forums allow posts previews, so don't hesitate to use this feature to make sure you're posting a well formated message, or just for testing, why not? ;)

Let's see step by step how to make sub-lists:

As an example, we will create a list with main titles numbered using capital Roman digits, under them, lists with titles numbered using Arabic digits, and finally, a sub-sub-list that is alphabetic with lowercase letters.

Here's what we'll going to get in the end of this tutorial:

1. American Continent
   
   1. USA
      
      1. New York
      2. Los Angeles
      3. Miami
   2. Mexico
2. Africa
   
   1. Egypt
   2. Algeria
   3. Sudan
3. Europe
   
   1. Spain
   2. Switzerland

As we saw, unless with Simple Machines Lists, all others are made using two tags: the [list] tag & the [*] tag, let's first type the code for our main list containing continents, we will use the I option for it:

[list=I]
[*]American Continent
[*]Africa
[*]Europe
[/list]

Result:

1. American Continent
2. Africa
3. Europe

Nothing we don't already know till now, now, let's insert the code for the sub-lists of countries, there are countries under each continent, so we are going to add an under-list under each continent name, using the option 1 this time:

[list=I]
[*]American Continent
[list=1]
[*]USA
[*]Mexico
[/list]
[*]Africa
[list=1]
[*]Egypt
[*]Algeria
[*]Sudan
[/list]
[*]Europe
[list=1]
[*]Spain
[*]Switzerland
[/list]
[/list]

Notice how the first & second lists we added, had their starting tag [list] inserted just after the continent name it should be under, and their end tag [/list] put just before the next continent.

For the list under Europe, and as it's the last one, the end tag was inserted before the end tag of the main list of continents.

Result:

1. American Continent
   
   1. USA
      
   2. Mexico
2. Africa
   
   1. Egypt
   2. Algeria
   3. Sudan
3. Europe
   
   1. Spain
   2. Switzerland

Now, under USA, we have a list of cities ordered alphabetical, for that, we have to insert cities list with the option a (for lower-case letters), under the list of American countries, exactly between the [*]USA code & the [*]Mexico code:

[list=I]
[*]American Continent
[list=1]
[*]USA
[list=a]
[*]New York
[*]Los Angeles
[*]Miami
[/list]
[*]Mexico
[/list]
[*]Africa
[list=1]
[*]Egypt
[*]Algeria
[*]Sudan
[/list]
[*]Europe
[list=1]
[*]Spain
[*]Switzerland
[/list]
[/list]

We already saw the result, this:

1. American Continent
   
   1. USA
      
      1. New York
      2. Los Angeles
      3. Miami
   2. Mexico
2. Africa
   
   1. Egypt
   2. Algeria
   3. Sudan
3. Europe
   
   1. Spain
   2. Switzerland

Any questions? As always, drop a comment! :)

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

How to Post Advanced Ordered Lists - bbCode Basics

We learned in the previous lesson about the basic use of the [list] tag: How to Create Simple Bulleted Lists.

Now let's go more advanced using options to create ordered lists in bbCode for posts in forums discussions.

The options to use with the list tag are five:

1 - For a numbered list.

A - For an alphabetic with capital letters list.

a - For an alphabetic with lowercase letters list.

I - For a numbered with capital Roman numeral list.

i - For a numbered with small Roman numeral list.

Let's see examples for options 1, A & I:

1 Option - numeral list:

[list=1]
[*]List item.
[*]Another list item.
[*]And another one.
[/list]

Result:

1. List item.
2. Another list item.
3. And another one.

A Option - alphabetic with capital letters list:

[list=A]
[*]List item.
[*]Another list item.
[*]And another one.
[/list]

Result:

1. List item.
2. Another list item.
3. And another one.

I Option - numeral with capital Roman numeral list:

[list=I]
[*]List item.
[*]Another list item.
[*]And another one.
[/list]

Result:

1. List item.
2. Another list item.
3. And another one.

Note: If the instructions above don't work for you, you might be posting on a Simple Machines script based forum (to be sure read this: What Kind of Forum are You Using?), see spacial instructions on posting lists here: Posting Items Lists in Simple Machines Forums.

How to Create Simple Bulleted Lists - bbCode Basics

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.

Let's talk about making lists in forums posts using bbCode, lists can be ordered or unordered, in this lesson will talk about the simplest kind: unordered or bulleted lists.

They are simple because they don't require an option, but only two tags:

The [list] tag: Wraps the entire list & doing that designates its limits.

The [*] tag: Inserted on the left of each item in the list. I have to specify that unlike other tags, this one has not an ending part & doesn't wrap the element or item.

Example:

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

Result in your final message:

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

As a final note, I want to add that in some kinds of forums, you could simply type the elements you want to add to a list, each one in a line, select them all, click on a button in a provided bbCode Editor & all the tags are inserted automatically, rest then simply to publish your post.

But what if an element in the list was composed of 2 or more lines?

In this case you have two options:

1. To insert the tags manually (a [*] before any item starts).
2. To use the editor then modify it to fit the result needed.

Example of elements going on several lines:

[list]
[*]List item, 1st line.
2nd line.
[*]Another list item.
[*]And another one, 1st line.
2nd line.
3rd line.
[/list]

Result:

• List item, 1st line.
  2nd line.
• Another list item.
• And another one, 1st line.
  2nd line.
  3rd line.

Second lesson: Advanced Ordered Lists Posting.

Note: If the instructions above don't work for you, you might be posting on a Simple Machines script based forum, see spacial instructions on posting lists here: Posting Items Lists in Simple Machines Forums. For any help needed, please post a comment. :)

In Which Order Should Tags Be Inserted - Part 2: Link & Color Tags

I talked in the previous post about tags insertions, how to do it correctly & the restriction with the [img] tag, as it should always be the closest to the element (image URL) it wraps, see: In Which Order Should Tags Be Inserted - Part 1.

Let's talk now about restriction concerning the [url] & [color] tags:

1. [url] tag when wrapping a link without the use of an option:

To learn everything about [url] tag, check this post: Insertion of Live Links.

To do simple, & to get what I mean by [url] tag used with an option, see the example below (the link in red is the option):

[url=http://learn-bbcode.blogspot.com/]Learn Forums bbCode Secrets[/url]

Final look:

Learn Forums bbCode Secrets

While a [url] tag used without an option looks like this:

[url]http://learn-bbcode.blogspot.com/[/url]

Final look:

http://learn-bbcode.blogspot.com/

In the second example, & always when [url] tag wraps directly a link without use of option, & if you want to combine it with other tags, [url] tag must be the closest to the hyper-link it wraps, or else an error would occur in your final message.

Example:

[b][url]http://learn-bbcode.blogspot.com/[/url][/b] - Right

[url][b]http://learn-bbcode.blogspot.com/[/b][/url] - Wrong

2. [url] tag when used with an option:

a. [img] tag has to be closer to the image link:

I talked in detail about that in: In what order to insert tags - part 1.

b. [color] tag closer to the text wrapped:

Often, the use of options with [url] tag is made to be able to wrap text & make it clickable, i.e. linked to web-pages or sites, if additionally you want to give that text a spacial color, you need to use [color] tag (read about this tag here: How to Change Colors).

To be sure that your color will appear after you submit your post, the color tag have to be closer to the text wrapped than the [url] tag.

Example:

[url=http://learn-bbcode.blogspot.com/][color=red]Learn Forums bbCode Secrets[/color][/url] - Right

[color=red][url=http://learn-bbcode.blogspot.com/]Learn Forums bbCode Secrets[/url][/color] - Wrong

With the exception of the cases above, tags work fine when combined with [url] tag no matter in which order they are inserted.

In Which Order Should Tags Be Inserted - Part 1: Image Tag

In general tags can be inserted in any order as long as you respect the golden rule stating: "the tag opened first should be closed last".

In other terms, if two or more tags are used to format some text, there must be a tag that wrap this text, then another tag wrap both text & the previous tag & so on, finally we'll get a code composed of initial text & tags wrapping it. Then if you look at this code from left to right you'll see it starting with the starting part of some tag, & ending with the ending part of that same tag. Does this make sense? If not here's a previous detailed lesson with examples & all:

Generally if you respect that, it doesn't matter in which order tags come & wrap text, but there are some exceptions, they concern [img], [url] & [color] tags, in this lesson we'll talk about [img] tag:

[img] tag must always be the closest to the picture link!

We saw an example about that in the previous lesson:

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center] - Right

[img][center]http://www.google.com/intl/en_ALL/images/logo.gif[/center][/img] - Wrong

[img] tag has always to be in direct contact with the image it wraps or else an error happens in your final message.

We'll see later that [url] tag has a similar restriction, but even this last can't be closer to the picture link than [img] tag:

Example: (There shouldn't be a line-break in your code!)

Right:

[url=http://google.com/][img]http://www.google.com/intl/en_ALL/
images/logo.gif[/img][/url]

Wrong:

[img][url=http://google.com/]http://www.google.com/intl/en_ALL/
images/logo.gif[/url][/img]

How to Change Images Alignment in Posts

Let's go for more ways to format posts & see how to align pictures.

Images are in most of forums aligned by default on the left side, to change that you need to use one of three tags we already saw in a previous lesson, the [left], [center] & [right] tags, see their use with text here: How to Change Text Alignment.

To summarize, you use one of those tags at once to wrap your text (or image as we'll see):

[left] for left alignment, [center] to center an element & [right] to align an element on the right.

The use of those tags with images is not different than the use for text, you just need to combine them with the [img] tag (learn more about how to combine tags here: How to Correctly Insert Tags).

Examples:

Again let's use Google Logo image as an example:

http://www.google.com/intl/en_ALL/images/logo.gif

Wrap it with the [img] tag:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

Then according to if you want the image on the left, center or the right, wrap the whole with [left], [center] or [right] tags respectively:

[left][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/left]

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center]

[right][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/right]

That's all :)

Notes:

1. As with Fonts Change, unfortunately the guys from phpBB seem to think it useless to let users change text or images alignment, let's hope they fix that soon. With other popular forums platforms text alignment works fine: vBulletin, IP.Board & Simple Machines. To know if your posts are on a phpBB powered forum, see: What Kind of Forum are You Using?

2. When you combine tags, most of time, it doesn't matter in which order you insert them as long as the ones you open first are closed last & so on.

However, when you combine [img] tag with other tags, it must the closest to the image URL it wraps (i.e. directly in contact with it) or else you get an error ..

Example:

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center] - Right

[img][center]http://www.google.com/intl/en_ALL/images/logo.gif[/center][/img] - Wrong

How to Make Images Clickable - bbCode Basics

This is very useful in forums allowing their users to advertise their sites or businesses, as they can display banners in their posts or signatures, & link those images to their sites.

To make a picture clickable, you need two tags we already saw, the [url] tag (learn about it here: How to Insert Live Links) & the [img] tag we saw in detail in three lessons starting from this one: How to Insert Images in Posts - Part 1.

We learned also previously that two or more tags can be combined provided that the tag started first ends last (read more about that here: How to Correctly Insert Tags).


Now that you know all that, you may have guessed at least partly how to post a linked (or clickabl)e image. Here are the steps needed:

1. The use of [img] tag:

Wrap the image link with the [img] tag, let's use again Google Logo image (see it also HERE then HERE) as an example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

Result:

2. The use of [url] tag:

OK! Now that we have our image link wrapped, we need to wrap the whole (link + tag) with the [url] tag & add the link we want to link the image to as an option.

Let's use Google.com (http://google.com/) as an example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

to: (There shouldn't be a line-break in your code!)

[url=http://google.com/][img]http://www.google.com/intl/en_ALL/
images/logo.gif[/img][/url]

and finally:



Any questions? Please post a comment :)

Final Steps & How to Link to an Image - Display Image Part 3 - bbCode Basics

We saw an Intro on [img] tag in lesson one & How to find the links for pictures in lesson two.

Let's now use the tag & link to at last display our image, then will see how to post the link to an image without displaying it in post.

Final steps to display your images:

Once you get your Hyper-link / URL / Address, with one of the methods above, rest to wrap it with the [img] tag:

Example:

Let's use our Google Logo link as an example:

http://www.google.com/intl/en_ALL/images/logo.gif

Wrap it with the tag:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

The result is:

Alternative to the use of [img] tag for posting images:

Some times you just want to link to an image without displaying it, maybe it's too big or would make he thread in which you post hard to load or to read comfortably.

To do that, simply use [url] tag instead of [img] tag, images URLs don't differ at all from other web-pages URLs while applying [url] tag to them, so to know all the ways regarding the use of the [url] tag, go to this lesson: Instructions on Inserting Live Links.

Methods to Get Images Links - Display Image Part 2 - bbCode Basics

After the Intro on [img] tag & Hyper-links, now let's see in detail the two methods for getting the Hyper-links / URLs / Addresses for images:

1. How to get the link for an image published on the web?

Let's use Google Logo as an example:

Go to Google.com & right-click on the Logo ..

Now, if you use Internet Explorer browser, click on Proprties in the menu, in the box that will popup, you'll see the link for the Logo that you'll have to copy, in our example, the link should be similar to this:

http://www.google.com/intl/en_ALL/images/logo.gif

If your browser is Opera or Firefox (click to see why Firefox is recommended), once you right-click on the Logo, you'll see in the menu an option to "copy image address", click on it & the image will automatically be copied to the clipboard, then you just paste it using "Ctrl + v" into your message.

However, this method of linking directly to images hosted on other sites (Google.com in our examples), is not recommended, as it consumes resources from those site, & in some cases you simply won't get your image displayed. Fortunately we have another option :) Here it is:

2. Hosting your images (uploading to the Internet):

There are many sites that offer images hosting, the most popular are ImageShack & PhotoBucket.

Once you register for free with them, those photos hosts allow you to upload images from your computer to them then give you the links to post safely in your forums entries.

They even give you links wrapped with bbCode tags so that you have only to copy & paste into your posts.

How to host images you find on the Internet?

For that you have to download the pictures to your PC first, then to upload to your image host.

Next: Part 3 - Final Steps to Insert Images + How to Link to an Image without Displaying it in Post.

How to Insert Images in Forums Posts - Intro - bbCode Basics

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.

The ability of inserting pictures into your messages is a very nice and useful feature in bbCode, images can be displayed without the need to upload them to the site in which you post, here I must precise that only few forums allow pictures & files uploads, except for avatars maybe ..

To display an image you need two things: the tag [img] and the URL or Hyper-link of the image ..

1. How to use the [img] tag?

In a way it's similar to the use of the [url] tag, you need to wrap the URL or Hyper-link of the image.

You must know, that as each web-page or site has its own unique URL, also any image or file published in the web has a unique Hyper-link.

2. How to get images Hyper-links?

There are two methods depending on if the picture is from Internet or a personal photo on your computer .. in the first case you can use the original link of the picture, in the 2nd case, you must host your image (i.e. upload it to an "Images Host").

The two methods in detail in the second lesson: Methods to Get Images Links - Display Image Part 2.

How to Change Text Alignment - bbCode Basics

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.

Most of time, the text in forums discussions is aligned on the left, but you can change the alignment in your posts, for decoration, when submitting in some language that's written from right to left, or for any other reason.

There are three tags for text alignment:

[left] - Text left aligned.

[center] - Text centered.

[right] - Text right aligned.

The tags are applied to text as with other tags, they have to wrap the part of your text you want to change the alignment (read How to Correctly Insert Tags).

Examples:

[left]This text is left-aligned.[/left]

[center]This text is centered.[/center]

[right]This text is right-aligned.[/right]

In order, the three lines above will look in your final message:

This text is left-aligned.

This text is centered.

This text is right-aligned.

What to add? Hmm ..

1. That it's useless to combine two or all three alignment tags, that would only help to get an undesired result (more about combining tags HERE).

2. As with Fonts Change, the guys from phpBB think it's useless to let users align text as they wish, let's hope they fix that soon. With other popular forums platforms text alignment works fine: vBulletin, IP.Board & Simple Machines.

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

4. Click here to know how to align pictures.