Blogging Help:: How To Add Links To Text And Pictures With HTML

HTML can be a very scary thing, especially for a new blogger. And while it’s not imperative that you learn HTML since Blogger, WordPress and other blogging software have WYSIWYG blog post editors, I still think that every blogger should at least know the basics, like how to add a link to text or an image using HTML.

For example, what if you want to add a linked image on your sidebar? In both Blogger and WordPress, there are simple widgets that will allow you to do that with no HTML knowledge, but those widgets limit how you can arrange the photos since each photo is its own widget, and individual widgets are generally stacked on top of each other.

So, a major step towards having complete control over the arrangement of your sidebar items is to learn how to link text and images using HTML. Once you start to learn the basics of HTML, you’ll see that HTML isn’t just a bunch of random code. It’s actually very structured and very logical. In fact, I prefer to write my posts in HTML rather than using the WYSIWYG editor. I find that I have much more control over the way my posts look when I write them in HTML…and I like to have full control. :)

So we’ll start with links today. I’ll start with a basic link, and then add in some more advanced options.

How to add a basic text link using HTML

We’re all familiar with text links in a blog post. We see them in every post we read. They look like this…

Have you seen my tiny condo kitchen makeover? It took me two years, but I finally got it finished!

So now let’s take a look at the basic minimum code necessary to turn the words “tiny condo kitchen makeover” into a link. That code looks like this…

<a href=”http://www.addicted2decorating.com/before-and-after-small-kitchen-makeover.html”>tiny condo kitchen makeover</a>

That doesn’t look too scary, does it?  Now I’ll show you in a different way.  This is the basic structure for every single text link..

<a href=”http://www.url-of-site-you-are-linking-to.com”>words that you want linked</a>

Here’s a bit of info to help this all make sense:

  • all of the code to create a link must be enclosed between the < > brackets, and it must be placed immediately before the link or image that you want to link;
  • immediately after the text or image that you want linked, you must place the </a> code to indicate that the link ends.
  • the linked text that shows on a blog post or web page is often referred to as anchor text or a hyperlink;
  • the “a” in the <a code stands for “anchor”.
  • the “href” stands for “hypertext reference”.
  • immediately after “href” you must use the equals sign, and then place the url to the page to which you’re linking inside quotation marks.

I’ll give you one more example of a sentence with three links.

 Last fall, I made a wreath out of cardstock paper, a decoupaged candle holder, and some miniature pumpkin vases.

And here’s what the HTML looks like for that sentence…

 Last fall, I made a <a href=”http://www.addicted2decorating.com/my-10-diy-fall-wreath-and-an-x-acto-knife-giveaway.html”>wreath out of cardstock paper</a>, a <a href=”http://www.addicted2decorating.com/cheap-easy-fall-decor-decoupaged-vasecandle-holder.html”>decoupaged candle holder</a>, and some <a href=”http://www.addicted2decorating.com/mini-pumpkin-vases%e2%80%94one-idea-five-ways.html”>miniature pumpkin vases</a>.

 How to add a link to a photo using HTML

The HTML for a linked image is almost the same as the HTML for linked text.  The only difference is that instead of text, you have to include the URL for the image that you want linked.

Before you can add a linked image to your blog (e.g., on your sidebar), you first have to upload that picture to an online host.  If you blog on WordPress, simply upload the picture to your Media Library.  After uploading the image, you’ll need the URL for that image.  The URL for an image should end in .jpg, .png, .gif, or any other photo file format.  A picture file won’t ever have a .html ending.  On WordPress, you can get this info from the field called File URL after you upload the picture.

So here is an example of a linked image…

And here’s the code that creates that link…

<a href=”http://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”http://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a>

As you can see, there is a code there for a photo file instead of text.  Much like the HTML needed to create the link, the HTML needed to make the photo appear must be enclosed in the < > brackets.  The code starts with img src, which means image source, and then the actual URL for the image follows, enclosed in quotation marks.

That is the very basic HTML to create a linked image.  That’s not difficult at all, right?

How to center a linked image

If you’re adding a linked image to your sidebar, chances are that you’ll want that picture centered in your sidebar. That’s really quite simple. All you need to do is add a bit of code to the beginning and to the end of the code for the linked image. That code looks like this…

<center>Add code for linked image here</center>

So added to a linked image, that code would look like this…

<center><a href=”http://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”http://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>

Now I’ll share three more important attributes that you need to be familiar with and know how to use…

How to make the link open in a new browser tab

If you’re linking to another website or blog, it’s a good practice to make those links open up in a new tab in the browser.  That way, you can link to helpful information on other sites, while also keeping your visitors on your site even when they click the link.  In other words, you never want to intentionally send visitors away from your site to another site.

So telling the browser to open the link in a new tab requires just a small snippet of code after the <a link code.  That code looks like this…

target=”_blank”

So if we add that to the code above, the whole thing looks like this…

<center><a target=”_blank” href=”http://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”http://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>

How to add a title attribute to a link

Have you ever noticed those little tags that pop up when you hover your mouse over certain linked information?  They look like this…

See the little tag that says “Rooms designed by Kristi”?  That pops up when you hover your mouse over the “My Room Makeovers” picture at the top of my blog.  That’s called a title attribute, and it’s a great way to add additional information for your readers.

Adding a title attribute to your link is quite easy, and simply requires the addition of a bit of info after the <a tag.  It’ll look like this…

<center><a title=”Learn how to make a framed gravy boat succulent planter” target=”_blank” href=”http://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”http://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>

Of course, you can write anything you want in the title attribute.  Just include any information you think would be helpful for your readers to see when they hover their mouse pointer over the link.

Make a link “no follow”

Since this isn’t a lesson on search engine optimization, I won’t go into detail on how links affect your website.  Suffice it to say that the way in which you link to other sites is very important in the eyes of Google.  You can read more about linking on Google webmaster tools.

The bottom line is that if you have received any type of compensation for a link, whether it’s a paid text link, a button advertisement in your sidebar, a sponsored post, a post that you’re writing to review free product that you’ve received, etc., then those links have to be “no follow” links to be in accordance with Google’s webmasters guidelines.

In order to make a link “no follow”, you need to add a simple snippet of code to the link that looks like this…

rel=”nofollow”

So if we add that to the previous linked image code, it’ll look like this…

<center><a title=”Learn how to make a framed gravy boat succulent planter” rel=”nofollow” target=”_blank” href=”http://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”http://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>

 

Once it’s all broken down into sections, it doesn’t looks quite as scary, right?  And of course, the key to understanding it is to practice!

SUBSCRIBE HERE!
Enter your name and email below to receive:

New posts delivered to your inbox * Giveaways exclusive to subscribers
Exclusive behind-the-scenes videos * Additional DIY tips
The occasional DIY project, just for subscribers
A plate of warm, freshly baked cookies

(Okay, probably not that last one.)  :)

Comments

  1. says

    Okay, I’ll admit HTML scares me. But you had me at “complete control” LOL. I might talk myself into using more of it rather than letting other programs do the work. Thanks for the helpful post.

  2. says

    Thanks for explaining what those seemingly haphazard groupings of letters mean, Kristi. I’m sure it’ll take me awhile to get the hang of it, but this certainly makes it all make a little more sense. Baby steps for me, baby steps. :)

  3. says

    Kristi, thank you so much for posting all of this and for trying to break it down so that even the less technical bloggers might understand. I am starting with just trying to make my other ad a “no follow”. Is there a way to check to see if I’ve succeeded? Even with your amazing diections, I’m not sure I put the no follow code in the right place. Yep, I’m THAT slow! Thanks again. laurie

  4. says

    Thanks for sharing this! I’ve learned a couple of things since I started blogging, but I do like to know the technical/specifics of why I’m doing what I’m doing (for example, what the code I’m using actually means) because it really does make it much more simple to use. I’ll definitely be checking out your other helpful posts! :)

  5. says

    Thank you! I always wondered how to make a link within the text in a page. Following your instructions I was able to create them. John

  6. says

    Coding HTML is not my strong point. However, following your instructions I think that I will be able to make some change that I wanted to do but I didn’t know how!
    Thank you

  7. says

    Hi, I have just started blogging and am still trying to set up my blog. I have downloaded some images for my links to facebook, pinterest etc but cant seem to get the image links I need to do this. I have tried photobucket but my images come up with “sorry person has moved or deleted image. What could I be doing wrong and where else can I get the url links I need.
    Please help

  8. says

    Hi, i actualy discovered this site looking for home decor ideas, and i must say your blog has great content! However my comment is not about home decor but about html and learning. More than a year ago i built a small webapp(hobby project) to help web designers and myself (originaly) learning and experimenting with small snippets of html5, css3 and javascript in the fastest and easiest way possible, w ithout leaving the web browser. But its only today, after reading this post, that i realised that this small tool might be useful for non technical people too, to learn the basics of html, the easy way. So here it is, and maybe you or some of your readers who need to learn the basics of html will find it useful: http://html5snippet.net go ahead, type some html and press the play button (or use ctrl+enter as shortcut) to see the result.
    Please note that the website is written itself in html5 so it requires a modern browser(up to date browser, ie9+ or latest version of any browser will basicly always give you best user experience: google chrome, firefox, safari, opera)
    Thanks :)

  9. says

    Kristi, I can’t tell you how helpful a post this was. Thank you so much for taking the time to spell it out for us step by step.

    I’m attempting to use affiliate links as of late and am having the hardest time. The text links I’m using leave me with huge spaces between the link and either the image or the text after it). Any advice?

    Cheers!
    Shannon
    http://www.brasshoney.blogspot.com

  10. Jackie says

    Hello I am working on blogger and would like to hyperlink an image that I am taking from my website. So a different source to blogger. Any advice on how I can do this?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

«
»