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

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.

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

How to Make an e-Mail Address Clickable - 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.

If an e-Mail address is clickable, a click on it would by default, in most of browsers, open a box from your default e-Mail client (Outlook Express, Thunderbird or any other) to let you compose a message for the address you clicked on.

For linking to an e-Mail you have two option:

1. To use the [url] Tag:

We learned about linking to web pages using the [url] tag here: Instructions on Inserting Live Links.

You can use the same instructions to link to e-Mails, the only difference is that the address have to be preceded by this code: "mailto:"

Examples:

[url]mailto:johndoe@mail.com[/url] - johndoe@mail.com

[url=mailto:johndoe@mail.com]Send a mesage to John Doe[/url] - Send a mesage to John Doe

2. Linking to e-Mails using [email] tag:

This tag was made especially for e-Mails links, using it you won't need to add the "mailto:" code.

The [email] tag then, works the same way the [url] tag works for Hyperlinks as seen HERE.

Examples:

[email]johndoe@mail.com[/email] - johndoe@mail.com

[email=johndoe@mail.com]Send a mesage to John Doe[/email] - Send a mesage to John Doe

Instructions on Inserting Live Links - 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.

By "live links", I mean links in which you can click to go to a different page or website.

Now, in most of forums, you just paste your Hyperlink or URL, submit the message and it's automatically converted to a clickable link, but anyways, let's see how to do that manually + some more very useful options.

The tag for links is this:

[url]

Let's use this blog URL "http://learn-bbcode.blogspot.com/" as an example, the code will be:

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

Result:

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

No problem till now, but what if you want a part of your text being clickable? Something like "Click Here" or ''Go Here" or just a name of a site or anything else?

For that you have to add an option, here, the option will be the Hyperlink itself, & the tags will wrap the text you want to be clickable.

Now, as an example, I'll use my blog title "Learn Forums bbCode Secrets" & its URL of course:

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

Will look in your final message:

Learn Forums bbCode Secrets

Next lesson: How to Link to an e-Mail Address