blogging

When I first started blogging I didn't know how to do anything more than write and publish a post. When I wanted to put a button on my sidebar, and there wasn't code that I could just copy and paste, I had to ask my husband for help.

But before long I learned some of the basics of HTML so I could link things up without any help, and knowing just that little bit about HTML made a tremendous difference in the freedom I had with my blog.

So, if you're like I was as a newbie blogger, and you don't know much about HTML, I'd like to show you how to link text and graphics in your posts and sidebars.

How to Create a Text Link

Let's start with clickable text. In most blogging software, you can create links automatically in the editor, but I'm going to show you how to write this code from scratch, which you have to do if you want to link text in a sidebar.

Take a look at the linked text here: Happy to be at Home. If you were to click the link, it would take you to Happy to be at Home.net. Here's the code that makes that possible.

<a href="http://happytobeathome.net">Happy to be at Home</a>

Now let's look at each part of the code. Notice that there are three sections to the code above.

1. <a href="http://happytobeathome.net">
2. Happy to be at Home
3. </a>

The first tag — the one that begins with <a href — defines where your browser will send you when you click on the link. Notice that the complete URL for the destination is enclosed in quotes.

Now take a look at the last tag — </a>. This is the closing tag. Everything that comes between the opening <a href tag and the </a> is what becomes "clickable." In my example, what comes between the opening and closing tags is the text Happy to be at Home.

It's that simple.

So just remember the following tips when writing text link code:

Writing Text Link Code

The Opening Tag

1. Begin the opening tag with <a href=
2. Type your destination URL in between quotes (") with no spaces.
3. End the opening tag with a >

The Clickable Text

After the complete opening tag, type what you want to be clickable (in other words, the text that you want your readers to be able to click).

The Closing Tag

Type </a> at the end of the text you want to be made clickable. If you leave this out, then everything after your opening tag will become a link, and that's not a pretty sight!

How to Create an Image Link

Now let's say you want to make an image clickable, instead of just text, such as when you want to put a button in your sidebar. This requires only one change to the link code I described above.

You still have the opening tag (the <a href= part) and the closing tag (</a>). The only difference in an image is what comes in between those tags.

Look at the code for the clickable button below. Notice the tag in blue is what is different from a basic text link code.

<a href="http://happytobeathome.net"><img src="http://happytobeathome.net/wp-content/uploads/2008/05/happyhomebutton.jpg" /></a>

Since I wanted to make an image clickable, I just put the code for the image in between the <a href and the </a> tag.

The abbreviation img src means image source — or basically where the browser pulls the image from. In this case, the graphic is hosted at the URL in between the quotes — http://happytobeathome.net/wp-content/uploads/2008/05/happyhomebutton.jpg. This could easily just have been a Photobucket account or my own blog media library. Wherever the image is located, I have to put the entire URL in between quotes.

So as you can see, making an image clickable is just about as easy as making a text link.

Writing Image Link Code

The Opening Tag

Start with <a href="the URL for where you want the link to click to…with no spaces">

The Clickable Image

Type the code for your image like this, paying attention carefully to the spacing: <img src="put the complete URL where your image is stored here…with no spaces" /> (Don't forget to end this img src tag with a />, although if you do forget the /, the code will still work.)

The Closing Tag

End the code with the </a> tag.

Bonus Code Tips

Forcing the link to open in a new window

If you want the browser to open a new window/tab when the link is clicked (so your reader doesn't have to leave your site), you just insert the following code in into the <a href tag. See the code in blue below.

<a href="http://happytobeathome.net" target="_blank" >

Changing the size of the image

If your image is too wide for your sidebar, you can adjust the horizontal width by inserting a piece of code into the img src tag. See the code in blue below.

<img src="http://happytobeathome.net/wp-content/uploads/2008/05/happyhomebutton.jpg" width="150" />

Make sure you only make the image smaller, not larger, or you'll lose quality and the image will appear pixellated. Also, if there is a height= that is already specified, you can simply remove the height= part so that only the width= is specified (the height is adjusted proportionally). You can also adjust the size of images in your posts this way; just insert the width="number of pixels" code into the img src tag in the position shown above.

{ 7 comments }