US Hawks Hang Gliding Association

Learn to Program: BBCode

This is the first computer "language" topic in our "Learn to Program" series. This "language" is called "BBCode" and that's short for "Bulletin Board Code" which is used in lots of "bulletin board" software (like the PHPBB software of this forum). There are many variants of BBCode, and we're using the one described here: https://www.phpbb.com/community/help/bbcode.

I'll be posting lessons and "exercises" in this topic. Feel free to do the exercises and post the results at any time. Also feel free to post any questions. Mostly, have fun!!

This is a table of the tags covered so far:




Exercise 1 (Bold, Italic, Underlined):



Exercise 2 (Use of color):



Exercise 3: (Quoting)



Exercise 4: (Lists)



Exercise 5: (Numbered Lists)

Bold, Italic, Underline

BBCode is a simple language for marking up text for various presentation effects. For example, if you want to make your text appear bold, you "mark it up" with the bold tag. There are many different kinds of tags. Some are simple, and others can be pretty complex. The bold tag is one of the simplest.

To make some text appear "bold", you mark it with these tags [b] ... [/b]. Similarly, you can make text appear "italic", with these tags [i] ... [/i], and you can make text appear "underlined", with these tags [u] ... [/u].

So let's say that I wanted to list some sites that I had flown, and I wanted to make the site name bold, and the location italic, and the year underlined. Here's what that might look like:


Here's what I actually had to type to make it appear that way:


Note that these tags all come in pairs:


The "opening" tag is just the keyletter itself in square brackets ([b], [i], [u]). The "closing" tag is just like the opening tag but it has a "slash" character (/) inside the brackets ([/b], [/i], [/u]).

Exercise 1:


Note that our forum provides buttons to add markup tags to selected text. So if you want to make some text bold, you select that text and click the "B" button. That will add the [b] ... [/b] tags around your text. For this exercise, try to type the tags by hand to get familiar with the process.

I Flew Wolf's Peak California about 2000 I had a Kicking a** XC Flight. I landed in Gardnerville Nevada.

Chris McKeon wrote:I Flew Wolf's Peak California about 2000 I had a Kicking a** XC Flight. I landed in Gardnerville Nevada.

Good job Chris!!!!

Good job on the post and good job on that XC flight!!



But you forgot to make "California" italic. To make California italic, you use:

     [i]California[/i]

Give it a try in a new post to this topic.

Remember that practice makes perfect!!   

I was on gold hill launch site 12,200' in about 1976, when I watched a Hang Glider take off and head for CRESTED BUTTE, which was 88 miles away. He top landed there at 12,900'.

Craig Muhonen wrote:I was on gold hill launch site 12,200' in about 1976, when I watched a Hang Glider take off and head for CRESTED BUTTE, which was 88 miles away. He top landed there at 12,900'.

Nicely done Craig!!! You get extra credit for the use of color!!  

Text Color

Since Craig introduced color, let's take a look at how we can use color in a post.

First, let's talk about how computers represent color. As a kid, I learned how to mix colors with crayons. But crayons are really "pigments" which absorb some colors of light while reflecting others. Absorbing some colors of light is the process of subtracting certain colors from the white light that would otherwise be reflected. This is what is done when we put ink on a page. The page doesn't generate light. The page reflects light. The various pigments in the ink subtract certain colors of light from the white light that hits the page. But computer screens generate their own light. So computer colors are additive and not subtractive.

These are the three primary additive colors of light used by computer screens:



If you remember the "old" color television tubes, you may have looked at one very closely and found that the full color screen was made up of tiny red, green, and blue dots (phosphors). In other words, all computer colors can be made up with mixtures of red, green, and blue. Here are a the combinations of full strength red, green, and blue:





So those are the "full strength" colors and "full strength" combinations. But what about non-full-strength colors? How are are other mixtures represented?

That brings up the question of how to represent different amounts of different colors. As you might guess, we can represent color values with numbers. For example, you might represent the amount of "red" in a given color as a number from 0 to 99. That's pretty close to what computers use. The only difference is that computer digits go beyond 0 through 9 to include A, B, C, D, E, F. So rather than numbers going from 00 to 99, computer colors go from 00 to FF. Let's see how some of those numbers might be used to represent the 3 primary computer colors red, green, and blue:





Those are the three primary colors (red, green, blue), but they can also be combined to create other colors. These combinations can be represented as points in a "color cube* as shown here:



Each point in that cube is represented by the three numbers (coordinates) of that point. These will be the amounts of red, green, and blue. For example, the web color known as "SaddleBrown" is listed on Wikipedia as:



The colors are traditionally ordered as Red, Green, Blue (RGB), so the color "saddlebrown" is "8B4513". Here's how we can use that color for some of the text in a post:


Note that the color number (8B4513) is prefixed with "#" in the post.

Here's what that post will look like in the forum:



Remember from our previous exercises that the bold, Italic, and underline tags had an opening tag and a closing tag as shown here:



The same is true with the color tag. There will be an opening tag and a closing tag around the text that you want to color. But unlike the earlier tags, the opening tag will include the color itself. Here's the previous table with the color tag added:



You can see that it's the same pattern of an opening tag and a closing tag. But for color, the opening tag includes the color you want to see.

And speaking of the color you want to see, all colors can be represented with a "#" character followed by exactly 6 hexadecimal digits. A hexadecimal digit is one of these:

        0 1 2 3 4 5 6 7 8 9 A B C D E F

Any combination of 6 of those hex digits (2 for red, 2 for green, 2 for blue) will make a color, and you can use any color number. That gives you over 16 million possible colors to use (16,777,216 to be exact). There are also much smaller tables of named colors such as the color table at Wikipedia. Here are some samples from that table:



You can also use these named colors in your posts instead of numbers. For example, you can use these BBCode strings:



to get these post strings:



As listed in the table above, each of those named colors is equivalent to a color number, but not all color numbers have a name (remember, there are over 16 million possible color numbers!). So using numbers for colors gives you the ability to specify ANY color, but using named colors can often be more convenient.

OK, that should be enough to do the following exercise. If you have any questions, please post them. Have fun!!

Exercise 2:

Here's my submission for Exercise 2 (I made it bold to make the colors stand out):

I have flown a white Falcon with a red-orange leading edge. I've also flown a light blue Dream (with a rainbow stripe across the sail).

The rainbow stripe was a lot of work, so please don't try to replicate that unless you have a lot of time on your hands. Here's what I actually typed to get that post (without the rainbow stripe):



You can see that I made the whole thing bold with [b] and [/b].
I made the Falcon white with [color=white] and [/color].
I made the leading edge red-orange with [color=#FF4000] and [/color].
I made the Dream light blue with [color=#008FFF] and [/color].

Give it a try with the colors of your own glider or a glider that you've seen. Please label your post with "Exercise 2". Have fun!!

. . . Under line Test






Moderators Note: This post was moved from "Mentally Flying" with author's permission.