I wanted to talk today about something that may seem super easy for some, but I constantly see others struggling with when creating their blogs.
I want to talk about how to create an image link.
Those who are experienced in HTML need not read any further.
I’m dedicating this one to all of you beautiful newbs… because many years ago I was one of you as well.
Probably one of the most basic things you can learn when you dive into the world of HTML is how to create image links.
That is, adding a link to an image or photo.
Or in other words, an image that (when clicked) sends you to a specific URL.
My goal is to have you memorize this, not just copy and paste a code.
You will never learn anything by copying and pasting!
I’ll do my best to explain what each part of the code does so that you actually know how it functions as well.
Here is a standard image link code:
<a href="http://www.yoururl.com"><img src="http://www.yoururl.com/image.jpg"></a>
Let’s break it down.
The first part (blue) of your code is your link code. HTML links are always wrapped in an <a href> element.
Always, whether it be a text or image link.
Make a mental note right now that <a href> means “link”.
With a lot of HTML, you will have your element, followed by the action. In this case, the element is a link (<a href>) and the action is the destination (your URL).
The second part (green) of that element is just telling the <a href> (link) where you want it to go to.
Since <a href> simply won’t work on its own, we need to set its destination. Basically, the link = (equals) “your URL”.
Got it?
Links should always start with http:// as that is their true URL.
If you forget this part and just start it with “www“, you’ll quickly realize that your link does not direct to your URL but rather tries to open that URL within the page you are on by adding it to the end of your current URL.
The third part of the code is your image code.
You should have your image ready and uploaded somewhere, like Photobucket or through your own blog if that is an option.
<img src> means “image source“.
In other words, the source of your image.
Easy, right?
Just like the link element, your code is simply asking you where your image is located.
Enter the URL of your image in the fourth part of the code, in between quotation marks as shown.
So now, your image destination = your image URL.
Finally, the last part of the code is your closing element.
The </a> closes the link, plain and simple. It’s calling upon the “a” from “a href” and telling it to stop.
It means that after your image, nothing else should be linked.
If you leave this open, all other elements on your page following this code would be linked as well.
The thing to remember in HTML is to always close your code.
Practice this on your blogs or websites.
Try writing it out instead of copying and pasting.
How to open the link in a new window
One other quick example I wanted to show was how to open your link in a new window/tab.
Sometimes you want to keep visitors on your website instead of directing them completely away from your content.
Here is what that code looks like:
<a href="http://www.yoururl.com" target="_blank"><img src="http://www.yoururl.com/image.jpg"></a>
All I added here was a simple link target within the same link code.
Target means just that, where you would like to target your link to. See how the quotations separate each action?
They are still contained within the image link (<a href>) but now you’re telling it to do something extra.
“_blank” is standard HTML talk for opening in a blank (aka NEW) window.
The ALT Attribute
Finally, let’s talk about the ALT attribute.
The Alt attribute should be added to the ending of your image code to specify alternate text in case the image cannot be displayed.
It also helps your images appear in search engine image search results.
Here is how you add the Alt attribute below:
<a href="http://www.yoururl.com" target="_blank"><img src="http://www.yoururl.com/image.jpg" alt="Description of Image"></a>
Your Alt text can be whatever you like, but should describe the image.
Things kinda make sense now, don’t they?
It’s all about how you associate what you may consider a crazy computer language with normal terms.
When you think about it like that, it starts to click.
If you have any questions or want to let me know what else you would like to see me cover, ask in the comments below!
