5 Loaves & 2 Fishes

I don't believe I used the word "funky" just to get an alliterative title. Be that as it may, here's how to pretty up your posts.

Just like on a word processor, formatting can be done using the buttons at the top of the work area. Here they are:


Here is Golden Rule No. 1: You can only change what you highlight.

Got it? Here it is again: You can only change what you highlight.

So if I want to make a word bold I first of all highlight it, like this:


then I click the B button:


and the BBCode tags are added:


Hint: it's easier to highlight something if you click at its beginning with your mouse, hold down the Ctrl key then click at its end, especially if it's a long passage you want to format.

And you can see the result above.

In the same way you can make text italic, underline it and/or centre it, and also change its size using the drop-down menu on the right:


Always use the Preview button to check on what your post will look like before you commit to posting it. I'll explain the other buttons once you've digested this little lot.

Finally, please use this topic, kindly started by Agnes, to practise these skills.

Thanks "Funky" Binary Bill.

Get down with your bad self.

The "funky" preview button is my friend. I highly recommend using it.

Richard.

It's possible to combine the formatting, for example to make something Bold AND underlined, like this.

First, you highlight the words:

Attachment: bu1.gif [ 1.53 KiB | Viewed 566 times ]

then you click the B button to put in the embolden tags. Now you must highlight the text again:

Attachment: bu2.gif [ 1.61 KiB | Viewed 567 times ]

then click the u button:

Attachment: bu3.gif [ 1.49 KiB | Viewed 566 times ]

Please make sure the tags are properly nested, as shown in the images. The following is wrong, for example:

Code: [b][u]like this[/b][/u].

It's a LIFO system - last in, first out! So the [/u] must come before the [/b], and not as shown.

To complete this section, you alter the colour of the text by highlighting it then clicking one of the squares in the colour swatch on the right of the composing area. Again, you can combine effects by highlighting and clicking successive buttons:

The quick brown fox jumped over the lazy dog.

The above sentence was entechnicolorised, emboldenitalicised and positively and negatively magnified using a combination of the buttons we've covered - B, i, u, Font size and Font colour. Feel free to practise, and hearken to that wise man, Richard, when he talks about the Preview button!

Note I doubt that anybody here still uses Internet Explorer, but in case there should be the odd one or two you will be interested to know that you don't have to keep highlighting the text after pressing a button. Just highlight it the first time (IE will remember the text is highlighted) then click away on as many effect buttons as you like. This only applies to Internet Explorer, as far as I know - but a Mac user may like to tell us how Safari behaves.

The next button after the formatting buttons is the Quote button. This is used to place text in a quotation box, with or without the name of the person being quoted. For example, if I wanted to quote a passage of Scripture, I would go to the source (click the Search Bible link at the top of the page if you don't have Bible software on your own computer) and copy the text. Then I would paste it here and highlight it, like so:

Attachment: quote.jpg [ 23.87 KiB | Viewed 520 times ]

then press the Quote button to get the tags in:

[quote}And further, my son, take note of this: of the making of books there is no end, and much learning is a weariness to the flesh.[/quote]

This will display as:


That's the basic quotation method. Please note that the quotation must have a [quote} tag at the beginning and a [/quote] tag at the end, and that each tag must have a [ at the beginning and a ] at the end (I've had to use { and } here and there to prevent the tag's being acted upon, or "parsed" to use the technical term).

We can enhance this basic quotation by including the name of the person quoted, and this is done by placing ="source" in the opening tag, like this:

{quote="The Preacher"]And further, my son, take note of this: of the making of books there is no end, and much learning is a weariness to the flesh.[/quote]

which displays as

If we are feeling frivolous, we can even do this:

{quote="The Preacher, in one of his more gloomy moods,"]And further, my son, take note of this: of the making of books there is no end, and much learning is a weariness to the flesh.[/quote]

which displays as:


nodrog is a great exponent of this.

NB (and NB well) - you would NOT use this Quote button to quote a post from earlier in a topic. To do that, you use the button at the bottom right of the actual post you wish to quote.

The Code button is a speciality one, and I doubt whether most of you would ever use it. It's to stop BBCode and other code like HTML and php being executed. Here's how it works:

Consider the sentence The Code button is a speciality one ... You'll see that the word Code is emboldened and all the text is blue. That's done by using the [b} and [color} tags that we've covered already. The software doesn't display those tags, it does what they say.

Now if I highlight the text and click the Code button, this is what I'll get:

[code}[color=#0000FF}The [b}Code[/b] button is a speciality one ...[/color][/code]
and this displays as



So by using the Code display I can show BBCode without it's actually being translated.

What's 'BB'?

BB stands for Bulletin Board, and bulletin boards were the early computing precursors of today's forums. So BBCode is short for Bulletin Board Code.

To get a nicely-formatted Web page like this one we use a language called HTML. In HTML you use "tags" to get the effects you want. For example, to get text in bold you would use a <strong> tag or a <b> tag. Now if we let people use HTML on our Web pages, there's a security risk in that naughty people could use advanced HTML to disrupt the site. So BBCode was invented to allow people to format text in the same way as in HTML, but without using actual HTML and making the forum vulnerable to hacking.

C[color=#BF0080]athy baby is testing to see how this all works with just one highlighting maneuver. [/color]

I don't see how you can individualize the sentence without highlighting the individual sections. I don't get any of this.

I couldn't do the Hupo thing. I hate computers, I hate technology. I hate that my brain can't understand things most people can.

You can't, and I'm sorry I gave the impression that you could. You have the right of it - if you're going to format individual sections then each section must be highlighted and formatted separately.

Here's an example:


which displays as:
The quick brown fox jumped over the lazy dog.

The word jumped has 3 successive formats applied to it - colour red, huge size and emboldened. This word would have to be highlighted individually and the successive formats applied.

The point I tried to make was that if you are using Firefox then you must highlight the section each time then click a formatting button, but Internet Explorer will remember what you've highlighted so you can click the formatting buttons directly, one after the other.

So in the case of jumped:

• In Firefox I would
  • highlight jumped and click the red button to get [color=#FF0000}jumped[/color], then
  • highlight [color=#FF0000}jumped[/color] and click Font size: Huge to get [size=200}[color=#FF0000}jumped[/color][/size], then
  • highlight [size=200}[color=#FF0000}jumped[/color][/size] and click B to get [b}[size=200}[color=#FF0000}jumped[/color][/size][/b].
  
  
• In Internet Explorer I would highlight jumped just once then click the red, size and bold buttons successively.

Please note I've used a } instead of a ] only to get the BBCodes displayed so we can see 'em and prevent them being translated into actual formatting..

Our next funky formatting feature is the unordered list. An unordered list is simply a list of items displayed in a neat column indented from the left margin and with each item preceded by a bullet point. Here's an example:

• A list item
• Another list item
• Yet another list item
• Final list item

and this is how you do it:

First, write out your list

Next, at the beginning of each line put an asterisk in brackets. Do this by clicking the [*] button provided:

Attachment: itembutton.gif [ 18.35 KiB | Viewed 288 times ]

Lastly, highlight the whole shooting match then click the List button:


And that's all there is to it. As a refinement, you can have lists within lists, like this:

• A list item
  
  • A list item under a list item
  • Another list item under a list item
• Another list item
• Yet another list item
• Final list item

And you get that by typing the following:


Neat! Unordered lists are very useful for presenting things like recipes. So if anyone would like to practise using some disgusting chocolate confection, please do.

FRENCH CHOCOLATES (Chocolate Ecstasy)

• 8 squares unsweetened chocolate
• 4 ounces German sweet chocolate
• 1 can sweetened condensed milk (15 ounces)
• 1 cup crushed nuts

Melt chocolates together in saucepan over very low heat, stirring constantly until smooth.

Add condensed milk and mix until smooth and well blended. Cool a few
minutes.

Shape into balls, using about 1 tsp. for each. Roll in nuts.

Makes about 6 dozen.

Don't even read it. It's disgusting.

If I'd done this tutorial a little earlier, it may have helped Abby with her quiz over here. Yes, having done the unordered list we're now going on to the ordered list. Do you need a list of items in rank order, 1-10, A-Z, or whatever (like Abby's list over here)? Then the ordered list is for you!

Here, as always, is an example:

1. A list item
2. Another list item
3. Yet another list item
4. Penultimate list item
5. Final list item

and this is how you do it:

First, write out your list as before

Next, at the beginning of each line put an asterisk in brackets, [*], using the special [*] button:

Attachment: itembutton.gif [ 18.35 KiB | Viewed 288 times ]

Nearly there! Now highlight the whole shooting match and click the List= button:

Attachment: orderedlist.gif [ 18.3 KiB | Viewed 289 times ]

Just one more step and it's finished. You now have to decide what to order the list by:

• If you want to order by Arabic numbers, type 1 after the = sign, i.e. {list=1]
• If you want to order by capital Roman numbers, type I after the = sign, i.e. {list=I]
• If you want to order by lower-case Roman numbers, type i after the = sign, i.e. {list=i]
• If you want to order by capital letters, type A after the = sign, i.e. {list=A]
• If you want to order by lower-case letters, type a after the = sign, i.e. {list=a]

Here's an example using lower-case Roman numbers:



which displays as:

1. A list item
2. Another list item
3. Yet another list item
4. Penultimate list item
5. Final list item

As with unordered lists, you can have lists within lists and you can mix the types, like this:

1. A list item
   
   1. A list item under a list item
   2. Another list item under a list item
2. Another list item
3. Yet another list item
4. Penultimate list item
5. Final list item

And you get that by entering the following:

seems easier to me just to type.
1. blah
2. blah blah
3. blah blah forget the first blah

Yes. Remember, this is about formatting, not content. The advantages of using the List format are:

• The list is automatically indented from the left margin.
• The list item markers are all automatically justified to the right and the list items themselves are all automatically justified to the left. This is apparent when you have many list items, and when items are lengthy pieces of text that spill over onto several lines.

Compare these two lists:

i. Item 1
ii. Item 2
iiii. Item 3
iv. Item 4
v. Item 5
vi. Item 6
vii. Item 7
viii. Item 8
ix. Item 9
x. Item 10

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7
8. Item 8
9. Item 9
10. Item 10

and these two:

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam gravida, mi a vulputate elementum, pede lectus vehicula risus, quis auctor velit orci non quam. Nulla facilisi. Nam consectetuer elit. Integer ullamcorper erat vel sem.

2. Aenean scelerisque, lectus et dapibus bibendum, pede tellus consectetuer nunc, vel bibendum erat nibh a magna. In nibh ante, vehicula ut, lobortis a, adipiscing ut, eros. Aenean egestas consequat leo. Aenean at ante.

3. Donec quis ipsum varius felis commodo fermentum. Etiam orci. Integer sem sapien, egestas feugiat, fermentum ut, interdum et, lectus. Pellentesque consectetuer porttitor nisi. Nullam dignissim. Suspendisse fringilla varius diam.

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam gravida, mi a vulputate elementum, pede lectus vehicula risus, quis auctor velit orci non quam. Nulla facilisi. Nam consectetuer elit. Integer ullamcorper erat vel sem.
   
2. Aenean scelerisque, lectus et dapibus bibendum, pede tellus consectetuer nunc, vel bibendum erat nibh a magna. In nibh ante, vehicula ut, lobortis a, adipiscing ut, eros. Aenean egestas consequat leo. Aenean at ante.
   
3. Donec quis ipsum varius felis commodo fermentum. Etiam orci. Integer sem sapien, egestas feugiat, fermentum ut, interdum et, lectus. Pellentesque consectetuer porttitor nisi. Nullam dignissim. Suspendisse fringilla varius diam.

Which looks better?

Working along the line, the next button we come to is the Img button. Adding an image to a post can, as they say, save a thousand words. First, the heavy stuff:

Images have an owner just like every car you pass in the street has an owner. You wouldn't dream of taking a car you liked the look of and driving it away (I hope!) Likewise, you mustn't grab any image you see and post it here. You can only legally post images that belong to you, or that the owner has given you (personally) permission to use, or that the owner has said is publicly available. All this is known as "copyright". You can post images of which you have the copyright, or the copyright holder has given permission, or the copyright holder has given up the copyright and put the image in the public domain.

OK, assuming you have an image to display - how do you do it? There are actually 2 ways, so I'll split this over two posts and do the first one here. What goes between the Img tags is a Web address, and the abbreviation for "Web address" is URL (don't ask), so that's what I'll use from now on. Yes, a photograph in your hand is no good; an image on your computer is no good; an image on a friend's computer is no good. The only good image is one that's been put on the Web.

So your first step should be to find an image hosting site. There are several available, including Imageshack, tinypic, ImageHosting and Photobucket. You choose.

Having chosen your image host you should follow their instructions for uploading your image onto the Web. Once there, the image hosting site will give you the URL of the image and you should copy it. If all else fails:

• Get your image displayed on screen on the host's Website.
• Point to your image with the mouse and right click.
• From the pop-up menu choose the Copy Image Location option (Firefox) or Copy image address (Opera). If you're using Internet Explorer it's more complicated (when will they ever learn?) - choose Properties from the menu, highlight the URL, hold down the Ctrl key then press the C key.

Once you have the URL copied, simply paste it into your post composition screen, highlight it then click the Img button. You'll end up with something like this:

Code:

[img]http://i26.tinypic.com/293xdfk.gif[/img]

That's it! You'll find that the image hosting site will often add [IMG] tags for you, saving you that final step.

Summary:

• To post an image use the {img][/img] tags.
• What goes between the tags is a URL, e.g. {img]http://www.whereyourimageis.com/randomcharacters.jpg[/img]
• To get a URL, upload your image to a hosting site.

On we go to the next button, the URL button:

Attachment: urlbutton.gif [ 9.03 KiB | Viewed 214 times ]

URL stands for "Uniform Resource Locator", but it's being replaced by URI - "Uniform Resource Indicator". In either event, it simply means "Web address"; you know - the old http:// stuff.

Actually, you don't need the button at all. If you type a Web address like this:

http://www.theporpoisedivinglife.com/

or even like this:

www.theporpoisedivinglife.com/

it will turn into a hyperlink automatically. Tip - the target will open in the Forum window; to open in a new window or tab, right click the link and choose the appropriate option.

The good news is that an extremely long URL, like this:



will automatically be enshortenified (or "truncated"), like this:

http://www.amazon.co.uk/Kydd-Stockwin/d ... 665&sr=1-5

So why use the URL button if it's not strictly necessary? Answer - to disguise the URL and make it part of the normal sentence structure. For example, look at the following paragraph:

One of the books of nautical fiction I would recommend is Kydd, by Julian Stockwin, because Thomas Kydd is a young wigmaker who is pressed into the Royal Navy. As he learns the ropes (literally!) aboard ship - so do you.

See how that very long Amazon URL has disappeared? See how the URL is hidden and the paragraph reads smoothly and without interruption? This is how it's done:


So the basic rule is [url=http://thingy.com ]link text[/url ].

As always, it's possible to combine BBCode tags to give pleasing effects. For example, in the early days of the Interwebnetspace all hyperlinks were blue and underlined, like this:

... I would recommend is Kydd, by Julian Stockwin, because ...

You get that retro look as follows:


You simply add the underline and colour tags as shown.

Lastly, e-mail addresses are also turned into hyperlinks: uk@5loaves2fishes.net, but you need an e-mail client like Thunderbird, Outlook or Outlook Express to take advantage of the facility. If you use Warmmail or Yeehah!mail - you're dished.

And it's even possible to hide an e-mail address: contact me. Here's the secret:


And again,


will get you contact me.

The last button in the top row is the Flash button. When I first saw this, a new feature in the new software, I thought it was for making the text flash. But no, it doesn't do that. This button is for playing what are called Flash files. Flash files have the extension swf e.g. filename.swf, and swf stands for ShockWave Flash. It's a format that is very popular for presenting movies in Web pages.

To use the flash button, you need a .swf file somewhere on the InterWebNetSpace, then you embed the URL in the flash tags in a similar way to images. The big difference is you must supply 2 numbers, the first specifying the height and the second the width of the animation, like this:


You can adjust the numbers by trial and error to get a satisfactory size (much use of the Preview button, perhaps). Here's an example:

and this is what you get:



You will need to right click on the image and choose "Play".

How do you find these 'flash' programs? And if you get it in an email, how do you find the url?

Good question with no easy answer. Sometimes they find you, in e-mails for example, or you stumble across them on a Website. I have to say at this point that some of the "flash" files are not so flash at all (bit of humour for the Brits there; not sure if the Jonathans, Kiwis et al will twig it).
It's exactly like posting images on the Forum - they have to be domiciled on the InterWebNetSpace somewhere. With images it's easy, with sites like Photobucket and such. But other types of files, like .swf's ("swiffs") are a bit more tricky. In my case I just wander around the mansion that is 5L&2F looking in the display cabinets, opening drawers, peeking into cupboards and so on until I find a likely spot. Sometimes I can shift the remains of Gideon's cheese and ham sandwich, or James the Mad's spare belaying pins or put Richard's week-old socks in the laundry. In fact, now I come to think about it, putting Richard's week-old socks in the laundry frees up more megabytes than you can shake a stick at. But I digress. If you get a .swf in an e-mail you detach it to your HDD, then upload it to the InterWebNetSpace somewhere and that will give you its URL.

Think photobucket will take it?

I have a google web page that will take uploads, like music, videos. Maybe I can upload it there. (if I ever find one)

I can probably just drag and drop it to my desk top just like I do pictures if I find one and upload it to my google web page.