How to create hyperlinks and linked text on these forums

Dogtag

Hi folks,

I've seen a lot of non-functioning URLs posted in these forums so I thought some people may be unaware of how to make them into "live" links. For those of you who may have been wondering how to do that, here are some pointers.

First, make sure that either Html or BBCode is selected, in the Format comments as at the bottom of the page where you type your post. HTML and BBCode handle links differently, so I'll explain each one separately. But first, a word about their similarities. To skip explanations and just see the syntax to use, you can jump to the summary at the end of this post.

Both HTML and BBCode are markup languages. That is, they consist of start and end "tags" that you place around text to format it. For example, to create bold text, you would do this:

In HTML, you would use the start tag and the closing tag as follows:
bold text normal text

In BBCode, you would use the [b] start tag and the [/b] closing tag:
[b]bold text[/b] normal text

In both cases, the text between the start and closing tags will display in boldface:
bold text normal text

In both HTML and BBCode, closing tags are typically the same as start tags but include a slash "/" before the tag name. There are exceptions but that is the general rule.

Some forums don't allow HTML, which is why BBCode was developed. Also, BBCode tends to be simpler and more limited than HTML. Here in the ProFantasy forums, however, it really just comes down to personal preference.

HTML

The link tag in HTML is called the anchor tag, which is written as linked text. However, in HTML, we need to add additional information, such as where we want to jump when a user clicks the link. Extra information that you add to an HTML tag is called an attribute. There are several different attributes for different HTML tags, but the main one we want to concern ourselves with is the href, or hypertext reference, attribute.

Attribute content is enclosed in double quotes. In the case of the href attribute, we want to include the full URL of our target. For example:

The word ProFantasy in this sentence is a link to the ProFantasy site home page, http://www.profantasy.com. Here's how it looks in my post:

The word ProFantasy in this sentence is a link to the ProFantasy site home page, http://www.profantasy.com.

The format for using the anchor tag in HTML is:  text to link

You can link the actual URL itself by using the URL as, both, the href and the linked text. For example, I could have written:

The URL for ProFantasy is http://www.profantasy.com, which looks like this in my post:

The URL for ProFantasy is http://www.profantasy.com.

BBCode

The link tag in BBCode is called the URL tag, which is written as [url]linked text[/url]. However, there are some real differences when using the URL tag in BBCode.

At a basic level, you can just enclose a URL in the [url] tags to make it live. For example:

To make http://www.profantasy.com a live link, I could simply write it as follows:

[url]http://www.profantasy.com[/url]

But if I wanted to link non-URL text, I have to use a slightly different format.

To make the word ProFantasy a live link in BBCode, I would write it as:

To make the word [url=http://www.profantasy.com]ProFantasy[/url] a live link...    NOTE: I didn't need quotes around the URL in BBCode.

So, there are two formats for the [url] tag, depending on what you want to display:
To display a live URL in BBCode, use the format:  [url]http://some.url[/url]
To link non-URL text in BBCode, use the format:  [url=http://some.url]text to link[/url]

So, in summary,

HTML anchor tag
text to link

BBCode URL tag
[url]http://some.url[/url] links and displays a URL in BBCode
[url=http://some.url]text to link[/url] links non-URL text in BBCode (hides the actual URL)

For more info on using HTML in general, visit w3schools.com. They have very easy-to-understand instructions and nifty way to let you experiment with HTML (and other) code right there on their site.

For more on BBCode, visit BBCode.org. Some sites have slightly different "flavors" of BBCode but this site does a very nice job of providing samples of typical BBCode.

I hope that helps,
~Dogtag

anomiecoalition

gonna jump the gun and thank you posting this info in advance

Dogtag

You're welcome. I hope folks find it useful.

Cheers,
~Dogtag

Joachim de Ravenbel

OMG! Thanks a lot, I'm always looking at old posts to remember how to...
Hope this gets sticky!

Ralf

Stickied.

Clercon

Thanks a lot for this!