Forums: User to User Help: Hints & Tips: Hyperlinks, XHTML and BBCode: A basic guide (updated 3/30/08)

 
  • Avatar of 123home123

    123home123

    [1]Jan 20, 2007
    • member since: 05/24/02
    • level: 55
    • rank: Bounty Dog
    • posts: 11,760
    Since the question of how to add hyperlinks comes up so often and I can't find a simple guide anywhere else on the forums, I'm going to start up a basic guide here. Like the Firefox thread, this thread will be limited to XHTML and BBCode functions that are useful (and permitted) for TV.com members.

    Hyperlinks: Basic information

    What is a hyperlink?
    A hyperlink is a clickable word, phrase or image that redirects the reader to another web page, web site, image or video.

    Am I allowed to create hyperlinks?
    Yes, if you are at Level 3 or higher.

    What types of hyperlinks are allowed?
    --In blogs and forums, users are generally free to post hyperlinks to most sites except those that promote illegal activity (including illegal file-trading sites).
    --On guides, users should only create hyperlinks that lead to TV.com pages or to other CNET sites. The most likely sites to be used are the CNET Entertainment sites, including GameSpot, MP3.com and MovieTome.

    Why can't I just paste in the URL instead of a hyperlink?
    Pasting in lengthy URLs causes formatting problems on blogs, blog comments, submission comments, submissions and forum posts. The URL will not wrap around the end of the line so the end of the link will appear to disappear off the right side of the visible column. Even worse, all other lines in the blog posts, blog comments and submission comments (on the submissions summary page) will run off to the right of the visible column. This is why hyperlinks should be used instead.

    Some basic XHTML tips

    --Keep it simple. If you can accomplish something with just one set of tags, then use only one set of tags. Some people tend to add multiple sets of tags when one set is sufficient.

    --Don't use the "p" tag for paragraphs. Just use the Enter button on your keyboard to add line breaks.

    Creating hyperlinks

    Creating a hyperlink is simple using XHTML. Just use the following code:

    Code:
    <a href="http://www.TV.com">TV.com home page</a>


    The code results in the following link: TV.com home page

    The URL should go inside the quotation marks. Be sure to add a final closing tag (the brackets with the forward slash and the letter "a"). And always remember to include the http:// part. Otherwise the link won't work.

    Other XHTML and BBCode

    Other XHTML and BBCode tags are mainly used for font formatting. Some examples are bold tags and italics tags.

    1) BOLD TAGS

    The HTML version of the bold tags (just the letter "b") is given in the examples on the submission forms, so I will display that here.

    Code:
    <b>Phrase in bold type</b>

    appears as Phrase in bold type.

    The "strong" tag is used in XHTML so the word "strong" would replace the letter "b" in the example above.

    2) ITALICS TAGS

    Italics tags in HTML use the letter "i":

    Code:
    <i>Phrase in italics</i>

    appears as Phrase in italics.

    The italics tag in XHTML uses "em" instead of the letter "i". Either one works on this site.

    3) THE "PRE" TAG

    Use the "pre" tag for lists and posts with unusual spacing. The "pre" tag (along with the closing "pre" tag) maintains the exact spacing that you enter. This can be useful if you are posting a list and you want to align columns of text. Normally all extra spaces are ignored automatically, causing lists to look messy. Here's an example of the usefulness of the "pre" tag:

    Atlanta  3   Nashville 2       Buffalo 5   Ottawa 2
    Detroit 4 St. Louis 1 NYR 3 NJ 2
    San Jose 5 Anaheim 4 Wash. 4 Pitt. 3

    This is a sample list of hockey scores. All of the columns line up neatly and I only had to use one set of "pre" tags. The easiest way to type up such a list is to use the Enter button and the space bar to format the list as you want it to appear. After it is complete, insert a "pre" tag at the beginning and a closing "pre" tag at the end. It's better to add the tags afterward because the presence of the tags makes it difficult to see if you have added the correct number of spaces to keep the columns aligned.

    Here is the same list without the "pre" tags:

    Atlanta 3 Nashville 2 Buffalo 5 Ottawa 2
    Detroit 4 St. Louis 1 NYR 3 NJ 2
    San Jose 5 Anaheim 4 Wash. 4 Pitt. 3


    I typed in the exact same information but the absence of the "pre" tags causes the extra spaces to be ignored.

    Here's another example of a forum thread where the "pre" tag is needed to format the list: Chart of Survivors in the Fleet.

    4) THE SPOILER TAG

    The staff added a clickable spoiler feature last year. Using the "spoiler" tag, we can add a clickable link that hides the text of a spoiler. Other users can read the text simply by clicking on the link.

    It's simple to create a clickable spoiler link. Just use the following code:

    Code:
    [spoiler]                            Text of spoiler goes here.                            [/spoiler]                           


    (Don't add the extra spaces before and after the text of the spoiler. For some reason, the system is automatically adding those spaces to this example. I'm not using the WYSIWYG Editor so I don't know why those spaces get added.)

    The code results in the following:


    ***SPOILER***

    You can use this spoiler feature on blog posts or forum posts. It's probably not needed on episode discussion threads if you are posting a spoiler from that episode. However, if you post a spoiler from a future episode, you should probably use the spoiler tag. Some users have reported that the feature does not work on the guides.

    5) THE "QUOTE" TAG

    To quote text from another message, use the BBCode "quote" tags. With BBCode, the square brackets are used to form the tag, not the sharp angled brackets.

    Code:
    [quote="User Name"]The quoted text should go here[/quote]


    This code results in the following:

    User Name wrote:
    The quoted text should go here


    Make sure that the author's name of the quoted text has quotation marks before and after. Don't forget the closing "quote" tag, which contains the forward slash mark.

    You can automatically quote another user in a forum thread by clicking on the Quick Quote or Quote button beneath their message. It that person's message is lengthy and you are only responding to one section of their forum post, you can safely delete the unnecessary sections. However, make sure you don't delete sections within sentences that could alter the meaning of the author's statement.

    You can respond to separate paragraphs by creating a quote for each of those paragraphs. Use the quote tags for a paragraph and then type in your response. Create another set of quote tags (opening and closing) for the next paragraph, and then type in your response. You can also quote two or more people in your post. Make sure you add the proper user name for each quoted passage.

    Be judicious with your use of the quote tags. Don't quote several paragraphs when a quote of one paragraph will do. You can nest quotes one inside the other, but limit your use of this. Do this only where necessary. If the multiple "quotes within a quote" get too lengthy, they take up too much screen space without adding any new statements to the thread. Try not to quote off-topic posts, and never quote messages that violate the TV.com Terms of Service. (Just report any offending messages using the reporting tool in the drop-down menu beneath the message.)
    Edited on 03/30/2008 1:56pm
    Edited 26 total times.
    You must be registered and logged in to post a message.
  • Avatar of beeftony

    beeftony

    [2]Jan 20, 2007
    • member since: 11/28/06
    • level: 29
    • rank: Volgar the Enforcer
    • posts: 1,190
    Thanks for creating this. I've received several submissions that post long URLs into the comments box, causing "issues." I've been sending people here to learn, but now I can just point them to this thread. Thank you so much.
    You must be registered and logged in to post a message.
  • Avatar of Fallout_Girl

    Fallout_Girl

    [3]Jan 24, 2007
    • member since: 12/17/05
    • level: 18
    • rank: Land Shark
    • posts: 5,116
    Would you say that XHTML is better to use than BB code?
    You must be registered and logged in to post a message.
  • Avatar of dju010

    dju010

    [4]Jan 24, 2007
    • member since: 06/17/05
    • level: 88
    • rank: Punky Brewster
    • posts: 5,715
    Fallout_Girl wrote:
    Would you say that XHTML is better to use than BB code?


    In the forums it doesn't matter, but in submissions you can only use xHTML. So once you know that, it's easy to stay with one system.
    You must be registered and logged in to post a message.
  • Avatar of 123home123

    123home123

    [5]Jan 28, 2007
    • member since: 05/24/02
    • level: 55
    • rank: Bounty Dog
    • posts: 11,760
    I've found that the "code" tag only works as BBCode. However, this isn't a big deal since there are few occasions to use the "code" tag. It's only used to show what XHTML or BBCode coding looks like. I used it in the examples in the 1st post.
    You must be registered and logged in to post a message.
  • Avatar of judog1

    judog1

    [6]Feb 1, 2007
    • member since: 05/07/05
    • level: 21
    • rank: Snagglepuss
    • posts: 4,155
    That hyper link code is suppose to work in subs right?

    Whenever I use it, it doesn't work, it says the herf attribute is not allowed.
    You must be registered and logged in to post a message.
  • Avatar of 123home123

    123home123

    [7]Feb 1, 2007
    • member since: 05/24/02
    • level: 55
    • rank: Bounty Dog
    • posts: 11,760
    What is the herf attribute? I think most attributes have been disabled.
    You must be registered and logged in to post a message.
  • Avatar of 123home123

    123home123

    [8]Feb 1, 2007
    • member since: 05/24/02
    • level: 55
    • rank: Bounty Dog
    • posts: 11,760
    I've added brief explanations about the "pre" tag (useful for creating formatted lists on blogs and forum posts) and the "spoiler" tag.
    You must be registered and logged in to post a message.
  • Avatar of judog1

    judog1

    [9]Feb 2, 2007
    • member since: 05/07/05
    • level: 21
    • rank: Snagglepuss
    • posts: 4,155
    123home123 wrote:
    What is the herf attribute? I think most attributes have been disabled.
    I don't know, but it just won't work for me.
    You must be registered and logged in to post a message.
  • Avatar of 123home123

    123home123

    [10]Feb 2, 2007
    • member since: 05/24/02
    • level: 55
    • rank: Bounty Dog
    • posts: 11,760
    I think you're misspelling the words in the tag. It's supposed to be "href" not "herf". Because the system doesn't recognize "herf" it treats it as an attribute. Check your spelling and the tag should go through.
    You must be registered and logged in to post a message.
  • Avatar of judog1

    judog1

    [11]Feb 2, 2007
    • member since: 05/07/05
    • level: 21
    • rank: Snagglepuss
    • posts: 4,155

    What a silly mistake, let me try it.

    Edit - it worked.

    Edited on 02/02/2007 5:53pm
    You must be registered and logged in to post a message.
  • Avatar of telvisnostic

    telvisnostic

    [12]Mar 17, 2007
    • member since: 06/27/05
    • level: 52
    • rank: Guzzlefish
    • posts: 25,288
    Thanks, that helps me out a bunch.
    You must be registered and logged in to post a message.
  • Avatar of alexlips

    alexlips

    [13]Mar 18, 2007
    • member since: 08/17/05
    • level: 51
    • rank: I Broke TV.com (Shatterdaymorn)
    • posts: 2,036
    Thats great. Do you know the code for a hyperlink but it opens a new window or tab rather than on the same one.
    You must be registered and logged in to post a message.
  • Avatar of telvisnostic

    telvisnostic

    [14]Mar 20, 2007
    • member since: 06/27/05
    • level: 52
    • rank: Guzzlefish
    • posts: 25,288

    This was a test to see if the hyperlink works becuase it didn't work before in another forum.

    Lockdown2007

    Edited on 03/20/2007 11:34am
    You must be registered and logged in to post a message.
  • Avatar of jekyll

    jekyll

    [15]Mar 22, 2007
    • member since: 05/24/02
    • level: 86
    • rank: Agent 86
    • posts: 6,738
    alexlips wrote:
    Thats great. Do you know the code for a hyperlink but it opens a new window or tab rather than on the same one.
    You need to add the target="_blank" attribute inside the a tag.
    You must be registered and logged in to post a message.
  • Avatar of tv_worm

    tv_worm

    [16]Mar 27, 2007
    • member since: 08/28/05
    • level: 12
    • rank: Evil Bert
    • posts: 349

    wow I've been on this site for a while without figuring out these basics but im just going to try it now:

    here


    ***SPOILER***


    Edited on 03/27/2007 12:30pm
    Edited 2 total times.
    You must be registered and logged in to post a message.
  • Avatar of Fiery_Defeat

    Fiery_Defeat

    [17]May 23, 2007
    • member since: 10/20/06
    • level: 1
    • rank: Weatherman
    • posts: 1
    If you need more help with html, just go to www.w3schools.com for more info.
    You must be registered and logged in to post a message.
  • Avatar of 123home123

    123home123

    [18]May 23, 2007
    • member since: 05/24/02
    • level: 55
    • rank: Bounty Dog
    • posts: 11,760
    That's a good site for beginners and intermediate XHTML users, though it takes a while to get through the free online courses. I've read through several of their courses myself.
    You must be registered and logged in to post a message.
  • Avatar of kikimoon01

    kikimoon01

    [19]Jul 18, 2007
    • member since: 05/16/07
    • level: 13
    • rank: Regal Beagle
    • posts: 15
    Fiery_Defeat wrote:
    If you need more help with html, just go to www.w3schools.com for more info.
    That's really a good website for me. Thank you so much, Fiery!
    You must be registered and logged in to post a message.
  • Avatar of 123home123

    123home123

    [20]Oct 22, 2007
    • member since: 05/24/02
    • level: 55
    • rank: Bounty Dog
    • posts: 11,760
    As noted elsewhere, W3 Schools is an excellent resource for learning more about HTML, XHTML, XML and many other Web-related topics. All of the courses are free and available online. The link is www.w3schools.com.

    The main CNET site also offers free, online courses, although there is a slightly different focus. CNET's Online Course Catalog doesn't go as in-depth into Web coding languages. However, it offers free courses on Web Development, Home Entertainment, Home Theaters, PC Troubleshooting, Digital Photography, and much more.

    Because of the prohibition on using the word "sty!e," I can't post the direct URL. Visit the CNET Tips & Tricks page to view the categories of courses available.
    You must be registered and logged in to post a message.