Visitors
Tuesday 21 June 2011
Sunday 24 April 2011
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:
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:
And in a SM (Simple Machines) Forum:
$myvar = 'Hello World!';
for ($i = 0; $i < 10; $i++)
{
echo $myvar . "\n";
}
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 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.
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?
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?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:
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:
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.
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.
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:
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:
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? ;)
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:
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:
[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 justbefore 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:
[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:
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:
- American Continent
- USA
- New York
- Los Angeles
- Miami
- Mexico
- USA
- Africa
- Egypt
- Algeria
- Sudan
- Europe
- Spain
- 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:
- American Continent
- Africa
- Europe
[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 justbefore 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:
- American Continent
- USA
- Mexico
- Africa
- Egypt
- Algeria
- Sudan
- Europe
- Spain
- Switzerland
[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:
- American Continent
- USA
- New York
- Los Angeles
- Miami
- Mexico
- USA
- Africa
- Egypt
- Algeria
- Sudan
- Europe
- Spain
- Switzerland
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
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
Wednesday 6 April 2011
Subscribe to:
Posts (Atom)