How To Use UBB Code

HOW TO USE UBB CODE - A TUTORIAL

UBB code is not all that scary to use. the buttons below the text window for replies make it easy to do simple things, But if you learn and understand the code you can do most of it yourself and do it faster. In the examples I am going to use the {} to represent the[ ] symbols so I can type them as examples to be read. So if you want to try some of my examples just type them exactly as you see them but replace the {} symbols with the [] symbols and they will work. These are called delineators. they tell the computer when we are going to start giving it coded info instead of plain text and when we are going to stop as well. So the [ symbol in UBB code says to the computer that it should check what follows for the proper format for UBB code. If the format is correct and a valid code is used then we have just told the computer to take a specific action on what follows. The first example is an image code. the [ says to the computer to watch for a valid command, in this example it is img. Then to be formatted right we need to tell the computer we are through giving it a command and that is done with the ] symbol. so the command to tell the computer that what follows is a URL for an image is [img] but the space I just left makes it an invalid command. If it were valid we would then follow it with the URL and then the end image command which is [/img]. The entire sequence would look like this
{img}http://us.news2.yimg.com/us.yimg.com/p/cx/uc/20030111/ga/ga030111.jpg{/img}
I used the wrong brackets so it would show up as text instead of a picture which is what would have happened if I had used fully valid code.
UBB code is not case sensitive so it does not matter if you use caps or small.
UBB code starts with the [img] and ends with adding/ to the code thus [/img] so [img] says this is the start of an image url and [/img] says this is the end. most of the UBB codes work exactly like this so lets give some examples and then show what they look like
bold face
this is bold face
is coded like this
{b}this is bold face{/b}
Italics
this is italics
is coded like this
{i}this is italics{/i}
bold italics
this is bold italics
is coded like this
{b}{i}this is bold italics{/b}{/i}

To add a hotlink E-Mail address
somebody@somewhere.com
is coded like this
{email}somebody@somewhere.com{/email}
Some of the other UBB codes get a slight bit more complex but aren't all that difficult. I will cover them individually in seperate sections of this tutorial.
=================================================
Now lets work with images and links. A few of you have figured out how to put images in your signature lines on your own and I have helped a few more. Now I am going to post the process for anybody that wants to use it to do so as well. During starting or replying to a thread the buttons make it easier to do. The code for images is no harder than for boldface or italic type. However getting a valid address for a graphic or picture is slightly harder.
To post an image the first step is to find an image on the web. On the web means that it appears on an online website. When you find one you right click on it and you will see a menu. The bottom item on the menu will be "properties". Left click on it and you will open up an information box. Somewhere near the middle of that box will be an address(URL) line that will look something like this
http://www.privatevoyeur.com/banner.gif
Highlight and copy it. Then to put an image on a post you click on the image button below the text window and paste the copied line in the small window that the image button opens up. you will see an HTTP// already in this window and highlighted, do nothing but right click and paste leaving the code already there highlighted. This will get rid of it. You do not want two copies of the HTTP// code in the line. if you have any doubt check and delete the extra code. This is simple enough for a post reply but will get you nowhere for your signature line. To add the same image to your signature line you have to manually add the UBB code. There is an image start and an image stop code. The start code looks like this [img] and the stop code looks like this [/img] . You must type the start code and then paste the image URL you copied in step one and then type the image stop code. This must all be done without spaces. I will give an example using the wrong brackets{} so it won't come out as an image
{img}http://www.privatevoyeur.com/banner.gif{/img}
Had I used the [] brackets it would have looked like this

The only problem you may run into is if the image is on a secure server the UBB code can't access it and won't show the image, only a box with an x in it. The cure for this is to copy the image to a non secure site if you have your own web page or access to a site that will let you store images. You do this by saving the image to your hard drive first and then following directions for the site you are working with to upload it. This is a lot of trouble unless you really want to use the image. Another problem you can run into is the long URL name. Some sites use really long URL names to foil use in UBB code because UBB code has a character length limit. The reason they don't like it is that UBB referencing increases their bandwidth usage and costs them more to run their site. So they use several tricks to stop it. One is frequent URLname changes. Another is to use a secure server. And of course the super long URL name.
==================================================
Now to add hotlinks. Again it is easier with the buttons in the post windows. But this one has a slightly more complex format and a two step process after you copy the website address.
The first step is to go to the website you want to add a link to. And the exact page as well if it is a page within the site you want to direct someone to. You then highlight and copy the address line from your browser. It will look something like this.
http://www.privatevoyeur.com/main.html
Then you click on the URL button under the text window. Then paste the URL you copied in the small window the URL button opens up and click Ok. When you click OK another small window will open up. This window is where you type the descriptive name for the website. You can use the actual website name or anything else that strikes your fancy. For instance you can call a site featuring pictures of different breeds of cats "THE PUSSY PALLACE'. You can be accurate, creative, or cryptic. Its all up to you. Clicking OK on this second box will complete the code.
As with images this will get you nowhere if you want to put a hot link in your signature line. So lets examine how the UBB hotlink code is structured and works.
Again the first step is to go to a website and copy the URL off the address line of your browser. Then you have to use the proper UBB coding for HOTlinks. This one is a little trickier. The start code is {URL=***************} where the asterisks represent the website address you coppied from your browser address line. So the complete start code would look like this
{URL=http://www.privatevoyeur.com/main.html}
Next you have to add the descriptive text. Lets call this one "A GREAT PLACE TO SEE BEAUTIFUL SIGHTS". This would be typed right after the URL start code with no spaces. And finally you finnish it with the URL stop code [/URL]. The whole thing (again with the wrong brackets{} so you can read it) will look like this.
{url=http://www.privatevoyeur.com/main.html}A GREAT PLACE TO SEE BEAUTIFUL SIGHTS{/url}
And if I had used the [] brackets it would look like this.
A GREAT PLACE TO SEE BEAUTIFUL SIGHTS
Go ahead and slide your cursor over the words and even LEFT click on them. Don't worry it will open the referenced site in a new window and you won't leave here. When you are finished just close the new window.

As for really long links and how to use them, They still can be put in a post but they have to be corrupted so the UBB software doesn't recognize them and chop them up. One way to do this is to add asterisks to the beginning and end of the web address line as in the example below. By the way, this link is probably too old to be valid anymore and is only being used as an example.
*http://news.yahoo.com/news?tmpl=story2&cid=68&ncid=716&e=16&u=/nyt/20030111/ts_nyt/life_behind_base ment_doors__family_and_system_fail_boys*
You just don't get to use a description. But adding asterisks to the beginning and end corrupts it so it shows up as just plain text, then you just copy and paste it to a browser address line and before you click on the go button you edit out the asterisks with the back and forward arrows and the backspace key when you are positioned to the right of the asterisks
==================================================
Now we move on to the code and quote commands.

code:
,_-~~~-, _-~~-_
/ ^-_/ \_ _-~-.
| /\ , `-_/ \
| /~^\ '/ /~\ /~\ / \_ \
\_/ }/ / \ \ ,_\ }
Y / /~ /~ | Y \ |
/ | {Q) {Q) | | \_/
| \ _===_ / |
/ )--{ }--( \
/~ \_._/ ~\
/ * * Y * \
| * .: | :.* * |
\ )--__==#==__-- /
\_ \ \ \ ,/
'~_ | | } ,~'
\ {___/ /
\ ~~~ /
/\._._._./\
{ ^^^ }
~-_______-~
/ \

,_-~~~-, _-~~-_
/ ^-_/ \_ _-~-.
| /\ , `-_/ \
| /~^\ '/ /~\ /~\ / \_ \
\_/ }/ / \ \ ,_\ }
Y / /~ /~ | Y \ |
/ | {Q) {Q) | | \_/
| \ _===_ / |
/ )--{ }--( \
/~ \_._/ ~\
/ * * Y * \
| * .: | :.* * |
\ )--__==#==__-- /
\_ \ \ \ ,/
'~_ | | } ,~'
\ {___/ /
\ ~~~ /
/\._._._./\
{ ^^^ }
~-_______-~
/ \

The two sets of characters are identical and were both formatted the same. But the first was posted using the code command and the second was posted without it.
While a text graphics doggie seems like a waste of good technology it does illustrate something important. If you ever tried to copy and paste heavily formatted text with a lot of spaces, tabs, and indents, then you know the software strips most of that extra stuff off before it posts it to the thread. Yet some things need that heavy formatting to make sense. For instance if you are trying to share code in some computer languages you can't do so without deep indents. The format is
{code}
your formatted material
{/code}
An example below.

code:

FRED % our input stream FRED of XYT
X Y 2 REORDER % this makes the first coordinate X,
% the second coordinate Y,
% and the stream is now in chunks of XY.
X >npts % gets the number of points from X
Y >npts % gets the number of points from Y
2 integerarray astore % stores the two integers into an integer array
mysub % feeds the (possibly) reordered FRED into SUB
% with the parameters [ nx ny ]
LastStream % since the grids of the output stream are the
% same as the input stream, we use it as a parent
% of our output stream.
X >npts Y >npts mul % calculate the size of the output buffer
NewBuffer % create a new buffer which is filled by SUB
X Y CONTOUR % make a series of plots of the results

/mygreatsubII
{ 2 REORDER % use the two grids to REORDER the stream so
% that the two fastest varying grids are the
% grids we want to operate along.
dup % we make an extra copy of the input stream
% for NewBuffer (above we used LastStream).
mysubS new % create a new RECORD with structure mysubS
store begin % start storing data
X >npts NX % store NX
Y >npts NY % store NY
end % end storing
mysub % feeds stream to FORTRAN subroutine mysub
X >npts Y >npts mul % number of points in output buffer
NewBuffer % uses copy of input stream and npts
% to create the output buffer
(filtered by mygreatsub) addhistory
And now the hash the same computer code would look like without the code command.

FRED % our input stream FRED of XYT
X Y 2 REORDER % this makes the first coordinate X,
% the second coordinate Y,
% and the stream is now in chunks of XY.
X >npts % gets the number of points from X
Y >npts % gets the number of points from Y
2 integerarray astore % stores the two integers into an integer array
mysub % feeds the (possibly) reordered FRED into SUB
% with the parameters [ nx ny ]
LastStream % since the grids of the output stream are the
% same as the input stream, we use it as a parent
% of our output stream.
X >npts Y >npts mul % calculate the size of the output buffer
NewBuffer % create a new buffer which is filled by SUB
X Y CONTOUR % make a series of plots of the results

/mygreatsubII
{ 2 REORDER % use the two grids to REORDER the stream so
% that the two fastest varying grids are the
% grids we want to operate along.
dup % we make an extra copy of the input stream
% for NewBuffer (above we used LastStream).
mysubS new % create a new RECORD with structure mysubS
store begin % start storing data
X >npts NX % store NX
Y >npts NY % store NY
end % end storing
mysub % feeds stream to FORTRAN subroutine mysub
X >npts Y >npts mul % number of points in output buffer
NewBuffer % uses copy of input stream and npts
% to create the output buffer
(filtered by mygreatsub) addhistory

As you can see the structure has been completly destroyed by the UBB software without the code command.

==================================================

Next is the quote command. It works pretty much the same as the code command except that it doesn't preserve formatting. It is mainly used to identify and seperate quoted material from the rest of your text. The format for this one is the same as for the code command.

{quote}
your quoted material
{/quote}

And an example

As I said earlier in this tutorial

quote:

Go ahead and slide your cursor over the words and even LEFT click on them. Don't worry it will open the referenced site in a new window and you won't leave here. When you are finished just close the new window.
==================================================

And finally the three list commands. These only look complex because there are several options to use with them. their basic usage is actually very simple. They are used to create bulleted lists, but with the options you can have alphabetical or numerical lists as well. Here is the structure for the basic start command and it's options.

{list} - this one is for bulleted lists

{list=a} - This one creates an alphabetical list starting with the first item labeled "a".

{list=1} - This one creates a numerical list with the first item labeled "1".

Next is the item command. It is used to identify the start of each individual item in your list. For a bulleted list it just puts the bullet at the front of the item. However for an alphabetical or numerical list it also causes the incrementing of the Alphabetical or numerical list item identifier. It is the same for all three list command options.

{*} your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.

The list end command is also the same for all three start command options and is formatted as follows.

{/list}

So the full list formatting would look like this.

{list} or {list=A} or {list=1}
{*} your first list item.
{*} your second list item
{*} your third list item
{*} your last list item
{/list}

And now for some examples.

First a bulleted list.

your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.

Next an alphabetical list.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.

And finally the numerical list command.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.
your list item information. And it can be multiple line length data. It doesn't need to be short. In fact I am going to type a bunch of extra crap here to make a point when I copy and paste this for the actual example.

By now you should be able to do just about anything with UBB code that is allowed on the discussion boards. Good luck and good posting.

YOGI