Posting 101 - Mastering the Basics: Text/Post Formatting Tools

[Skook]

I never directly compose in the text editor. This is a personal preference as I am never satisfied with the initial way I word my thoughts and I do tend to make lots of spelling mistakes (it’s gotten worse with computer use). So, for short posts, I will compose in Windows’ Notepad. You will find Notepad in the ‘Accessories’ file when you click the ‘Start’ button and go to ‘Programs’. I’ve placed Notepad on my Windows taskbar for quick access. For my longer posts, I compose in Word. I then copy and paste my text into the VP editor from those applications.

I’ve had some ugly and frustrating experiences with WYSIWYG editors in the past and this likely had more to do with my inexperience with Word processing apps then the editors. So, to be on the safe side, I copy and paste all my text into the editor first and then format. That being said, I’m impressed with the VP editor which accepts my Word composed posts without a hitch by removing any Word formatting rather than going berserk.

Right, let’s get started with the text formatting tools.

Bold Text:

With my text in the editor, I’ve decided I want to emphasis a sentence. First, I am going to highlight that sentence and I can do this by holding down the left mouse button and dragging the cursor across the sentence or I can “triple” click in any word within the sentence and the whole sentence will be highlighted. Note with this last method, triple clicking in single word, highlights the whole paragraph; and, in word processing, a stand-alone sentence is considered a “paragraph.” If you have two or more sentences in the paragraph, all the sentences will be highlighted when using the triple click method. If you want to highlight a single word, you “double” click in the word.

With my sentence highlighted, I click the Bold (B) tool button (#1) and as you can see in image #2 HTML coding now ‘sandwiches’ the sentence and the same would happen if I was adding Bold formatting to one word or a whole paragraph of two or more sentences.

To check my Bold formatting, I have clicked on the “Preview Post” button near the bottom of the text editor page and a “Preview” box appears (#3) above the text editor showing how this formatted text will appear when posted. I added another sentence before previewing to show contrast.

Font - Size & Colour:

To keep life simple, I tend to stick with most of the board’s default settings and that includes the text font. If you click on the black arrow in the Font box, the drop down menu shows 7 font types you can choose from; but, unless you remember you changed the font and make note of what font you changed to your posts can start looking messy. But, the option is there if your favourite font type is listed.

To change the size of text and to add colour, I am following the steps as I used above to apply Bold formatting. In image #1, you will notice that the words “white as snow” are already sandwiched between HTML code and this is because I have already highlighted them and changed the text size by clicking on the black arrow of the in the Text Size box and choosing “large” from the drop down menu. With the words that you see highlighted, I want to apply colour formatting and will click on the black arrow beside the letter “A” (I have my cursor over it which is why the button is emphasized).

In image #2, you can see the drop down menu and all the font colour choices and note that the highlighting disappears when the menu opens - don’t worry it is still there. I picked the bright red font colour and in image #3 you can see that the six words are sandwiched between code and notice the “color=#FF0000.” That #FF00000 is the “Hex” value for that colour. To understand what that means, I am sending you off to w3schools.com which it explains it nicely and while you’re there you might decide to teach yourself HTML coding or another computer language (all for free) - we all need a hobby…LOL. Learning HTML has been on my bucket list for years. (Note: HTML 5, though “still a work in progress” is “The New HTML Standard” for the ‘net and it, too, is offered on the w3schools.com site.)

I’ve completed my text formatting and will click the “Preview Post” button and check how my text looks in the “Preview” box above the text editor. In image #4, the words “white as snow” show their larger size formatting and “the lamb was sure to go” appears in red.

If you don’t like what you see, go back to the text editor and remove all the coding (on both sides of the word or words) and try something else until you like what you see in Preview.

Italic, Underline, Text Alignment Tools:

To apply the remaining text formatting tools, follow the same steps as above. Do note that you can apply more than one or all text formatting tools at the same time. You can make your word bold, italic, underlined, and red and centered in the middle of your post by clicking the appropriate tool button one after the other.

If you don’t like what you see in “Preview”, you can go back and remove the coding in the text editor box - again, remember you have to remove both coding tags (before and after the word or words).

I just did a test in the ‘Sandbox’ and typed in “Mary had a little lamb” and applied all the tool formatting options and hit “Preview Post.” Then I hit my browser back arrow until I was taken back to the point where the sentence was highlighted and all the tools applied. I then did a “right” click in the text editor box and clicked “Undo” and it removed the last applied formatting. Repeatedly clicking undo remove each tool format as they were applied until the all were gone. So that is something you can try yourself in in the ‘Sandbox.’

Inserting a Quote:

Quoting from a reliable and respected source is a one way to add credibility to any argument or viewpoint. In essay writing days before computers, you had to apply quotation marks (“”) around the quoted material, give it a superscript number and then supply a footnote at the bottom of the page citing your source.

Now, in the age of the computing, you can put the quoted material inside a “Quote box” and link back to the source if you found your supporting material on the internet. Of course, the internet is a proving to be a double-edged sword because it is also very easy to discover if you have plagiarized someone else’s work without giving credit where credit is due.

For example, we had a recent poster in the forum who was making some pretty wild statements and offered no sources to back up his claims. While reading through the text of one of his posts, a sentence stood out and I thought, “Nah, those aren’t his words” and so I copied and pasted them into Google Search and sure enough up popped the source - a process that took about 10 seconds tops. I then linked to that source in my rebuttal to his post and the he was somewhat surprised to see my response within about 5 minutes of his post. This is something to keep in mind.

In my example below, I’m going to put two sentences inside a quote box to show how this post formatting tool works. In image #1, I have already set my cursor where I want the quote to begin, I have clicked the “Insert quoted text” button and this applied the code “[quote]” at my cursor point. I then typed the quoted text (you can paste it in, too). You will notice above the post formatting tools the bracketed words in red “CLOSE TAGS” and that the quote tool is still emphasized. Both will remain so until you close the quote at its end point by clicking on the quote tool button again.

Image #2 shows that the result after clicking the tool for second time. The red text has disappeared and the HTML code is added to the end of the quote. In real use, the button would no longer be emphasized; however, I still had my cursor on it when I took the screenshot. In the Preview (#3), you can see how my text would look if posted. My two sentences are now emphasized within the desired Quote box (I cropped the image which is why the end of the box doesn’t show).

Making A List:

Adding a number or bulleted list to your post is fun and I find when I hit the Preview Post button I always say to myself, “Ooooh, that looks so cool” (what can I say, but that I am easily amused and amazed).

So in image #1, I have my cursor set where I want to insert my list and I have clicked the “Insert numbered list” post formatting button. Your browser window will darken and a pop-up box appears and you can type or paste in the first item of your list (#2). Click OK, and the box reappears empty. Add the second item (#3), click OK and keep doing this until all your list items have been entered. The box is now empty and you will notice the text “Enter a list item. Click cancel or leave blank to end the list.” So, with the box now empty you can click on a last "OK" or click “Cancel” and the pop-up disappears. You can now see in image #4, the coding that has been applied to your text. You may be thinking, “Where are the numbers?” See that code above the list “

1. ” - well, this tells you that this list will be numbered. If you were making a bulleted list the tag would display as “
   • ”. Now, click the “Preview Post” button and, voilà, there is your list. See how cool that looks! So, neat and tidy!
     
     
     
     
     Add A Hyperlink:
     
     Anyone who reads my posts knows that I use hyperlinks a lot. I use them to link to news stories to prove I am not whistling in the wind and I use them to link back to previous posts in other threads if those posts offer additional background info. I also use them to link to websites if I am discussing an RE development that has a site up and running. As I mentioned above this is another method, along with quotes, to give credibility to your post. It is a means to offer your reader the opportunity to explore additional information on a topic without having to put all that info into your post.
     
     In my example below, I am going to add a hyperlink to a Wikipedia page that gives the historical background to the nursery rhyme “Mary had a little lamb” - everything has a history and you can find it on Wikipedia…LOL.
     
     After numerous posts (understatement or what!), I have developed a system when it comes to hyperlinks. As I compose my post in Word or Notepad, I paste all my hyperlinks that I will be using below the paragraph where I plan to insert them. After copying and pasting all my text into the editor, I then go back do my text formatting and enter my hyperlinks as I move through the post. By having all those hyperlinks ready ahead of time, there are no last minute scrambling.
     
     
     
     
     In image #1, I have my post text pasted into the editor and I have already applied Italic text formatting to “Mary had a little lamb” and now I want to add the Wikipedia hyperlink. If this was your post, you would double click on “Wikipedia” to highlight it and click on the “Insert hyperlink” tool button. Image #2 shows that like the list tool you will get a darkened window and a pop-up. You copy and paste the link into the box and click “Ok” and the pop-up disappears. You can see in image #3 that the hyperlink appears in the first code tag in front of the word “Wikipedia”. While “Wikipedia” was highlighted you could also have added text formatting such a Bold or Italic and all that coding would appear around “Wikipedia” as well. When you click “Post Preview”, you will see that the word or words where you have inserted the hyperlink have turned blue - to inform the reader there is a hyperlink to another webpage. I always test my hyperlinks while in “Preview” to make sure they function properly. When clicked, a new browser tab/window should open taking you to the linked webpage.
     
     To remove or correct the hyperlink, you will have to go back to the text editor and remove all HTML coding tags; if correcting, repeat the process all again.
     
     There are other post formatting tools available that are applied along the same lines as what I have described above, so I will leave them up to you to explore. Now, off you go to the "Sandbox." Have some fun with the tools - we'll be expecting great things from you.
     
     My next tutorials will look at “images” - how to resize them and how to insert them into your posts. Coming soon, but maybe not too soon!
     
     (Note: this thread is open if anyone has any questions - and, everyone, please feel to answer any questions. Also, if anyone would like to add additional details or tips about the formatting tools, please do so)