formatting text and inserting pics in WSB forum posts

Home Forums Open Discussion formatting text and inserting pics in WSB forum posts

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #605460

    redblack
    Participant

    many posters have asked about text formatting (e.g. bold and italic). to do that, you have to format the text by “enclosing” it with special tags. the tags are simple bits of computer code that tell WSB how you want special text to be displayed. the tags are opened and then closed.

    for example, typing <strong>bold text</strong> will display

    bold text.

    the formatting is opened with the <strong> tag, then closed with the </strong> tag.

    this is important: open tags will format all text below it until they are closed. be sure to close your tags! (nothing will break, but no one wants to read 2,000 words of bold text, does he?)

    pictures and clickable links are slightly different, but they both use tags to define where their targets are located on the internet.

    so without further ado…

    .

    BOLD TEXT TAGS<strong></strong>

    if you want to display

    hello, sailor.

    .

    you type this:

    <strong>hello, sailor.</strong>

    .

    .

    ITALICIZED TEXT TAGS<em></em>

    if you want to display

    you have found a lantern.

    .

    you type:

    <em>you have found a lantern.</em>

    .

    .

    the two tags can be combined, but remember to open and close both sets of tags.

    .

    BOLD AND ITALIC

    if you want to display

    you have been eaten by a grue!

    .

    you type:

    <strong><em>you have been eaten by a grue!</em></strong>

    .

    .

    THE BLOCK QUOTE BOX<blockquote></blockquote>

    ever seen posters put quoted text into a light blue box? ever wondered how to do it? it’s easy.

    remember to cite your sources when appropriate.

    .

    .

    if you want to display this:

    .

    the red cross’s peggy dyer has said that they’ve raised a lot of money so far for victims of hurricane sandy:

    Our preliminary results of nearly $23 million raised are an extraordinary example of how the American people pull together in times of disaster. Their generous donations will go directly to those in need, and we urge the public to continue to give.

    http://www.usatoday.com/story/life/2012/11/04/sandy-telethon-raises-23-million/1680513/

    we should all be proud.

    .

    .

    you would type this:

    .

    the red cross’s peggy dyer has said that they’ve raised a lot of money so far for victims of hurricane sandy:

    <blockquote>Our preliminary results of nearly $23 million raised are an extraordinary example of how the American people pull together in times of disaster. Their generous donations will go directly to those in need, and we urge the public to continue to give.</blockquote>

    http://www.usatoday.com/story/life/2012/11/04/sandy-telethon-raises-23-million/1680513/

    we should all be proud.

    .

    .

    INSERTING IMAGES INTO POSTS<img src="" />

    insert your image’s location between the quotes in the tag above. note that this tag does not have to be closed.

    images displayed in posts are not stored on WSB’s servers. so in order to display an image in your posts, you have to know where it is on the internet and insert a link to that picture.

    if you want to display your own images, they must be accessible on the internet. sites like http://www.flickr.com and http://www.photobucket.com allow you to host images on their sites for free. you just have to sign up, create an account, and upload your pictures there. then you can link to them.

    remember copyright and fair use laws! if you don’t own and/or host the image on your own server, check to see if the owner has given his permission for you to display it on a third party’s web site (i.e. WSB forums.) generally, sites like i can has cheezburger (the one with funny kitty pictures) and wikipedia have lax or open fair use laws. however, google images, for example, mostly link to copyrighted images. (i might be overly cautious since internet content is largely believed (wrongly) to be public domain. but better safe than sorry.)

    also be mindful that images over 600 pixels wide will extend beyond the borders of the display area on WSB forums and usually “interfere” with the tile ads on the right. 600 x 400 or smaller is a good size for images. (again, nothing will break, but users with slower connection speeds will have trouble displaying larger high-resolution pictures from a third party’s site.)

    .

    if you want to display

    .

    you would type:

    <img src="http://i165.photobucket.com/albums/u68/RukiasLight/Kittens.jpg" />

    .

    INSERTING CLICKABLE LINKS INTO YOUR POSTS <a href=""></a>

    you can also put links in your posts that appear as highlighted words, like i did above with i can has cheezburger.

    insert your link between the quotes in the tag above; the text to be highlighted goes between the opening and closing tags.

    .

    if you want to display

    hey guys! check out i can has cheezburger! kitteh!

    .

    you would type:

    hey guys! check out <a href="http://icanhas.cheezburger.com/">i can has cheezburger</a> ! kitteh!

    .

    i hope this helps and it isn’t too hard to read. i’m trying to make the world a better place, but, well… you know what “they” say about no good deed going unpunished.

    good luck, and post here if you have any questions.

    #776513

    Kevin
    Participant

    Red Black, Thank you for that great instructional post! Great examples!

    #776514

    miws
    Participant

    Yes, redblack, what Kevin said!

    As you know, I know basic HTML, but what I was unaware of is the ability to post the actual tags, with the <> brackets, and have them visible in the tutorial, without using spaces between the brackets and code .

    Mike

    #776515

    Ken
    Participant

    Test to see if you can use the code tag to display the code tag… well it seems I cannot do it this early in the morning…

    #776516

    redblack
    Participant

    mike and ken: i did a bit of digging in geek forums on this yesterday. you can use the <code> tag, but when you go back to edit, bbcode has turned it into tick marks. so i just use tick marks (same key as the tilde; upper left corner of the keyboard) to enclose the code, and it displays.

    but i broke the first rule of putting content on the internet: i didn’t check my work with another browser. so that last section might look a bit screwy in other people’s browsers.

    but, yeah. you guys obviously understand the importance of providing copy’n’pastable content in the post. DP has provided these instructions before, but he used an image to get the code to display, so it wasn’t copyable to the clipboard.

    and evidently bbcode likes to turn close-quotation marks into ASCII.

    i’ll screw around with it and repost the last 2 sections later, so as not to provide false information and potentially get sued or beaten up or whatever.

    #776517

    JanS
    Participant

    So….English. for us dummies who have no idea what bbcode or tilde or other foreign language you spoke in post #5

    Thanx

    #776518

    365Stairs
    Participant

    “TECH SUPPORT!!!!!!”

    From…”Vanilla Sky”

    Now…had I been paying attention above…I would have been able to do lots of cool new things with my words!

    But I had difficultly paying attention in school…most of the time…

    Fingers crossed…

    #776519

    365Stairs
    Participant

    Just a thought..Redblack worked hard on this explanation…perhaps a “Sticky” version in a condensed list?

    What you can do = COMMAND

    Copy and pasting commands is a lot easier than learning alien languages!

    THANK YOU!!

    #776520

    redblack
    Participant

    365: my pleasure. :)

    like i said, i gotta clean up that last section. i just don’t have the attention span right now.

    jan: bbcode is the comment/blog software on TR’s servers that “runs” the forums – or at least defines how it works.

    tilde is the squiggly romantic language symbol: ~

    it’s on most american keyboards at the upper left, next to the number 1. gotta hit [shift] to get a tilde. if you don’t hit [shift], you get a tick mark.

    capiche?

    but this is all geeky “inside baseball” stuff.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.