How to understand, make and use an html image link code



Hello! Today I wanted to do something I haven't posted about in a while - blog design help. I thought about all the different customisations and CSS codes and what-not, but then I realised, one of the simplest things - is not so simple. These days when you search how to make a blog button (which is just an image link) it comes up with fancy things that are all a bit mind boggling to me. People don't know that, it is really simple. SO today I'm going to focus on helping you understand the HTML of making an image link.

Here is our code.

<a href="YOUR BLOG URL"><img src="YOUR IMAGE URL"></a>

I have coloured it so that now I can explain each part.
By the way, that little code is ALL you need to make an image link. Simple, right?

So, here is a break-down of what each part means in simple language!


The PINK code basically means 'link to'.

The BLUE code basically means 'image source'.

The HIGHLIGHTED YELLOW code is where you put the link to your blog/site.

The HIGHLIGHTED GREEN code is where you put the URL to your image.


S O . . .
To expand:

- The <a href> code is an element, which by itself will not work, so it needs an 'action' which is your link. Keep on thinking, a href means link, a href means link, A HREF MEANS LINK!!!! This code (</a>) also needs to go at the end to close the link. The 'a' is taken from 'a href' to tell it to stop with the / added. If you don't close it, all other elements on your page will be linked too - oops! You might like to think of the code as a box - which has to close. So you open the box at the start of the code, but you have to close the box again at the end of the code. Thats why there is pink code at the start and end.


- Your URL  is basically telling the <a href> code to be directed, so thats why there is an = equals to set it to its destination. So in normal terms - <link is "URL"> get it?
AND always always make sure your URL starts with 'http://' otherwise the link will not work.


- The <img src> code is simply asking where your image is located, like the <a href> code. So in normal terms - image destination = image URL. And because this is inside the link code, it does not need to be 'closed' like the a href code.


- The IMAGE URL is the destination of your image. You will need to put your image on an online image host website, such as photo bucket and copy the 'direct' URL. Again, always make sure it starts with http:// and this time, ends in the format of your image, for example - .jpg/ or .png/



Notes //
- Every URL or note or text (if you are doing a text link) that is not part of the actual HTML code is put in speech marks. e.g. "http://www.alittlebirdyblog.com"

- Every symbol or letter in the code is important. One of the reasons it might not be working for you is if you missed out a tiny symbol - it makes a world of difference.


So, now try writing this out. If you don't copy and paste it you are more likely to learn it!
BUT if you still find this confusing feel free to copy the code and simply put the URLS in! You will learn over time so don't feel pressured and confused! It really is simple so you can learn when you like!

The point of this was mainly for you beginner bloggers - so lots of love - and I just want you to know that you don't need crazy code - its simple!

I hope I was able to help - comment below if it did and also comment any questions you have!
Chloe x