Experimental forum for "Technology" discussions (computers, cameras, etc).

Learn to Program: BBCode

Postby Bob Kuczewski » Thu Sep 02, 2021 12:23 am

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:






FeatureExampleOpening tagClosing tagResult
Bold[b]Cape Kiwanda[/b][b][/b]Cape Kiwanda
Italic[i]Oregon[/i][i][/i]Oregon
Underline[u]1978[/u][u][/u]1978
Color[color=#FF0000]Glider[/color][color=#FF0000][/color]Glider
Quote[quote="Bob"]Hello![/quote][quote="Bob"][/quote]
Bob wrote:Hello!


Exercise 1 (Bold, Italic, Underlined):

Post a few sentences (at least 2) describing sites that you've flown or visited or would like to fly or visit. For each site, make the site name bold, make the location (city, state, etc) italic, and underline the year that you flew or visited (past, present, or future).


Exercise 2 (Use of color):

Make a post to this topic that describes a few gliders (or airplanes or cars) that you've seen or owned. Use a few appropriate colors in the description.


Exercise 3: (Quoting)

Post a famous quote to this topic and include the name of the person who said it (or wrote it) in the quote tag. Also post a second famous quote to this topic without any name in the quote tag.
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 7045
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Re: Learn to Program: BBCode - Bold, Italic, Underline

Postby Bob Kuczewski » Thu Sep 02, 2021 12:33 am

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:

I first flew Cape Kiwanda Oregon in 1978. I first flew Dockweiler California in 2004.

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

I first flew [b]Cape Kiwanda[/b] [i]Oregon[/i] in [u]1978[/u]. I first flew [b]Dockweiler[/b] [i]California[/i] in [u]2004[/u].

Note that these tags all come in pairs:

[b]Cape Kiwanda[/b]
[i]Oregon[/i]
[u]1978[/u]
[b]Dockweiler[/b]
[i]California[/i]
[u]2004[/u]

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:

Post a few sentences (at least 2) describing sites that you've flown or visited or would like to fly or visit. For each site, make the site name bold, make the location (city, state, etc) italic, and underline the year that you flew or visited (past, present, or future).

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.
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 7045
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Re: Mentally Flying.

Postby Chris McKeon » Thu Sep 02, 2021 9:42 am

I Flew Wolf's Peak California about 2000 I had a Kicking a** XC Flight. I landed in Gardnerville Nevada.
Chris McKeon
User avatar
Contributor
Contributor
 
Posts: 143
Joined: Wed Jul 31, 2013 7:46 pm

Re: Mentally Flying.

Postby Bob Kuczewski » Thu Sep 02, 2021 10:13 am

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!!

:clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap:

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!!    :)
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 7045
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Re: Learn to Program: BBCode

Postby Craig Muhonen » Fri Sep 03, 2021 2:41 pm

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'.
"grow brave by reflection". And invincible with written words.
Craig Muhonen
User avatar
Contributor
Contributor
 
Posts: 389
Joined: Tue Nov 05, 2019 9:58 pm
Location: The Canyons of the Ancients

Re: Learn to Program: BBCode

Postby Bob Kuczewski » Fri Sep 03, 2021 9:37 pm

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!!   :thumbup:

:clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap: :clap:
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 7045
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Re: Learn to Program: BBCode

Postby Bob Kuczewski » Fri Sep 03, 2021 9:49 pm

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:

Red
Green
Blue


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:

Red + Green makes Yellow
Green + Blue
makes Cyan
Blue + Red
makes Magenta
Red + Green + Blue
makes White


Additive_Colors.png
Mixing of full-strength Red, Green, Blue to get Yellow, Magenta, Cyan, and White
Additive_Colors.png (9.26 KiB) Viewed 62 times


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:

 00  11  22  33  44  55  66  77  88  99  AA  BB  CC  DD  EE  FF 

 00  11  22  33  44  55  66  77  88  99  AA  BB  CC  DD  EE  FF 

 00  11  22  33  44  55  66  77  88  99  AA  BB  CC  DD  EE  FF 


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:

Color_Cube.png
Every displayable color is represented as a point in the color cube
Color_Cube.png (46.5 KiB) Viewed 62 times


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:

   SaddleBrown     =      8B red    +    45 green    +    13 blue   


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:

I had a great landing in the [color=#8B4513]muddy water[/color]
by the shore.

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

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

I had a great landing in the muddy water by the shore.


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




ExampleOpening tagClosing tagResult
[b]Cape Kiwanda[/b][b][/b]Cape Kiwanda
[i]Oregon[/i][i][/i]Oregon
[u]1978[/u][u][/u]1978


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:






ExampleOpening tagClosing tagResult
[b]Cape Kiwanda[/b][b][/b]Cape Kiwanda
[i]Oregon[/i][i][/i]Oregon
[u]1978[/u][u][/u]1978
[color=#8B4513]muddy water[/color][color=#8B4513][/color]muddy water


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 use.

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. There are also tables of named colors such as the color table at Wikipedia. Here are some samples from that table:


































Color NameHex NumberColor
HotPinkFF69B4        
LightPinkFFB6C1        
DarkRed8B0000        
RedFF0000        
SalmonFA8072        
OrangeFFA500        
GoldFFD700        
YellowFFFF00        
LightYellowFFFFE0        
SaddleBrown8B4513        
ChocolateD2691E        
TanD2B48C        
BlanchedAlmondFFEBCD        
Green008000        
DarkGreen006400        
OliveDrab6B8E23        
Chartreuse7FFF00        
Teal008080        
Cyan00FFFF        
Aquamarine7FFFD4        
Blue0000FF        
LightSkyBlue87CEFA        
Navy000080        
Purple800080        
MagentaFF00FF        
PlumDDA0DD        
LavenderE6E6FA        
BeigeF5F5DC        
IvoryFFFFF0        
WhiteFFFFFF        
Black000000        
SlateGray708090        
LightGrayD3D3D3        


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

[color=Red]Red[/color]
[color=Green]Green[/color]
[color=Blue]Blue[[/color]
[color=HotPink]HotPink[/color]
[color=Orange]Orange[/color]
[color=Aquamarine]Aquamarine[/color]
[color=LightSkyBlue]LightSkyBlue[/color]
[color=Plum]Plum[/color]
[color=SaddleBrown]SaddleBrown[/color]


to get these post strings:

Red
Green
Blue
HotPink
Orange
Aquamarine
LightSkyBlue
Plum
SaddleBrown


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

Make a post to this topic that describes a few gliders (or airplanes or cars) that you've seen or owned. Use a few appropriate colors in the description.
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 7045
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Re: Learn to Program: BBCode

Postby Bob Kuczewski » Sat Sep 11, 2021 7:19 am

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

[b]I have flown a [color=white]white Falcon[/color] with a [color=#FF4000]red-orange leading edge[/color]. I've also flown a [color=#008FFF]light blue Dream[/color].[/b]


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!!
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 7045
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Re: Mentally Flying.

Postby Chris McKeon » Sat Sep 11, 2021 5:30 pm

ABC






Moderators Note: This post was moved from "Mentally Flying" with author's permission.
Chris McKeon
User avatar
Contributor
Contributor
 
Posts: 143
Joined: Wed Jul 31, 2013 7:46 pm

Re: Mentally Flying.

Postby Chris McKeon » Sat Sep 11, 2021 5:37 pm

. . . Under line Test






Moderators Note: This post was moved from "Mentally Flying" with author's permission.
Chris McKeon
User avatar
Contributor
Contributor
 
Posts: 143
Joined: Wed Jul 31, 2013 7:46 pm

Next
Forum Statistics

Who is online

Users browsing this forum: No registered users and 1 guest

Options

Return to Technology Forum