Explanations

Anatomy of a Hyperlink

If you're new here, you may want to subscribe to my RSS feed. For additional tips and tricks that aren't published here, you may want to subscribe to vAS News. Thanks for visiting!

If you don’t consider yourself a ‘technical’ person, life online can get a little overwhelming at times. Even simple things like linking to another post or webpage from a post in your own blog can make you feel like a simpleton. Before you beat yourself up too much, let’s get one thing straight, ok? You’re not stupid because you don’t know something. You just haven’t learned it yet, ok? You have your own area of expertise, and if HTML, CSS and other web-related concepts aren’t it - so what!?!

Today we’re going to explore the basics of hyperlinks - what they are, what they do, how they do what they do, and how you can create them correctly with ease. Ready?

Ok, first - a hyperlink is a clickable entity (either text or an image) that takes you somewhere else when you click it. They are created with the <a> HTML anchor tag. The <a> tag is a tag that requires closing, and you do that with </a>. The <a> tag also has an attribute called href that you’ll need to define the destination of the click. There are other attributes that can be defined, but we’re going to stick with the basics today.

<a href="URL">clickable text</a>

The href attribute value is typically the URL you want to link to. Because the URL is a defined value, it is enclosed in double quotation marks. So, you have the <a> tag with the destination of the link defined by the href attribute, the clickable text, and the closing </a> tag - the 3 basic parts of a hyperlink.

So, let’s say you want to make the word hyperlink link to the definition of hyperlink at Wikipedia.org. Here’s the code you’d use to do it:

<a href="http://en.wikipedia.org/wiki/Hyperlink">hyperlink</a>

Now the word hyperlink is clickable, and takes you to the Wikipedia.org entry for hyperlink if you click it.

WordPress makes it easy to create hyperlinks in your posts. First, highlight the text you want to be clickable, and then click the button that looks like a chainlink. A pop-up window will open up and you just paste the URL (from the example above, just the part in blue) in the Link URL box. Click the insert button, and BAM! You’ve just created a clickable link in your post!

See how smart you are? Now you can embed affiliate links in your posts that aren’t ‘in your face’ to your readers. For example, let’s say I was recommending you get a basic HTML book called HTML 4 for the World Wide Web, Fourth Edition (Visual Quickstart Guide), here’s the code Amazon provides for me to put in my post:

<a href="http://www.amazon.com/gp/product/032127847X?ie=UTF8&tag=momsforlife04-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=032127847X">Creating a Web Page with HTML: Visual QuickProject Guide</a><img src=”http://www.assoc-amazon.com/e/ir?t=momsforlife04-20&l=as2&o=1&a=032127847X” width=”1″ height=”1″ border=”0″ alt=”" style=”border:none !important; margin:0px !important;” />

The only part I need from that is the URL in blue to follow my own directions above. All the rest is superfluous code. Here’s how it would display in my post:

I recommend Creating a Web Page with HTML: Visual QuickProject Guide for those who want to learn HTML.

And hey - really - if you want to get the book using this link, I’ll be happy to accept the change Amazon will give me for referring it to you. Not a problem!

If you enjoyed this post, make sure you subscribe to my RSS feed!

© 2008 vAssistant Services.