What is This All About?

When you participate on forums discussions, sometimes to type plain text would make it, but often, you need to make your posts more interesting: to add styles, change fonts, play with colors, insert links or to display images ...

In web development, HTML is used for all that, but in forums posts, a simplified code inspired from it allows users to format text, that code's called the "bbCode".

This blog will help you easily understand & use bbCode. Have Fun!!! :)

ps: don't hesitate to post a comment for any help needed or a suggestion, or just to say hi! :)

Friday, December 7, 2007

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

0 comments: