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