BlogWritingCourse

Blogging PreCourse and Blogging101


Archive for May, 2009

How To Code A Hyperlink

May 07, 2009 By: TopsyTechie Category: blogging, html, learning to blog No Comments →

The web is becoming more and more user-friendly for bloggers with "technical deficits."  Programs like Windows Live Writer can make your blog posts look downright complex without knowing a single line of code.  But there are a few instances when being able to use html comes in downright handy.hyperlink

One of the most common of these scenarios is when you want to create a hyperlink.  Granted, linking to another website or blog is often as easy as clicking on that cute little chain link button.   If you can use a basic WYSIWYG editor, you can definitely create a hyperlink. (For more info on WYSIWYG, check out our free blogging pre-course.)

However occasionally, you need to create a link the “old fashioned way” - - with some good ole’ html code.  This might be necessary for posting a link in a blog comment window, for posting in a forum that doesn’t offer WYSIWYG, or for creating a widget for your sidebar that links to another location on the web. 

Coding a hyperlink is actually pretty easy if you break down and understand the reasoning behind each section of code. We have broken it down for you below with each part in a different color.

  1. In red is the part of the code that calls a web page -
    <a href="http://www.blogwritingcourse.com">Great Blogging Course </a>
  2. In blue is the address you want to link to. This address must always start with http:// -
    <a href="http://www.blogwritingcourse.com">Great Blogging Course </a>
  3. In green are the words you want the user to click on. (These words are called the anchor text) -
    <a href="http://www.blogwritingcourse.com">Great Blogging Course </a>

That code that will give you this link - Great Blogging Course

<a href="http://www.blogwritingcourse.com">Great Blogging Course </a>

The red part will always stay the same. The blue and green sections are inputted and changed by you.


Now, let’s customize it for you.

  1. Copy the colorful code above.
  2. Get to an HTML editor (blog post in HTML mode - HTML widget, something like that) and paste in the code.
  3. Now put the address of a site you want to link to in place of - http://www.blogwritingcourse.com
  4. Now put in the text you want people to click on in place of - Great Blogging Course
  5. Now save whatever you were editing to see how it worked.
  6. Click on your link and see where it takes you!

+ Info you don’t need, but you may want! +

Spaces should remain just as you see them between the two sets of letters. The string of code broken down is much like a sentence. The < symbol opens your sentence. "a href" means something like "hypertext reference" (This is debatable, but it essentially means, " go to this address " ). You always put quotation marks in front of and behind the URL you are linking to and then you add what might be like a comma.> followed by your anchor text, and then you end it with your end punctuation, </a>.

So, you’ve said, "Go to this URL, when these words are clicked."