Images are very important on a blog or website. You really want to bring your readers in and capture their attention, and beautiful stunning images can do and say a lot about the content on your site.
What we will talk about today is how to host your images and code your images right into your HTML. We are going to be talking about linking up your images, so that when someone clicks on one, it will take them to where you want them to go, and lots of other fun stuff.
Coding Images In HTML
<img> To code images we are going to use the image tag. The image tag defines an image in HTML. There are 3 important steps to follow to ensure they are coded correctly.
3 Steps to Coding Images:
You can go in through your media manager in WordPress and upload the image there. You can start a new test post and upload the image into your post, this will add it to the media collection for your site, and then you can get the URL for the image to add to the link.
2—Copy the URL for the image. After you load the image in, you will be given a URL to where it is hosted. COPY that URL. So wherever you chose to host the image, you just need to get the URL for that image. You will need that to put into the link between the quotations.
3—Create your <img> tag Just using the URL to the image is not enough. You have to add the URL to the <img> code.
Here is how we do it. This is our image tag:
So now I have a couple of things that I want you to take note of.
Note: The <img> tag is empty, which means that it contains attributes only, and has no closing tag. If you take a look at how many brackets there are in here, there are only two. There is one at the very beginning and then one at the end.
Normally we would have four brackets within a tag. We would have the opening and closing tag. But for this <img> tag, everything is located within the one set of brackets.
Now, the second note.
Note: You need to use the src for your <img> tag. SRC stands for “source.” The value of the src attribute is the URL of the image you want to display.
You can set the image to link to another page. How? By combining the LINKING and IMAGE codes!
Here’s how. First we are going to start off with our linking tag.
Then after this we want to add our image source, or img src code.
So this is the full opening and closing of our entire URL image code. And then right at the end we have to close our linking because our linking; our <a href, has that closing bracket in it. See below:
So this is the full code now showing our image, and a link. When somebody clicks on our image, on a website, it will take them to the URL we entered between the quotation marks.
Other Things You Can Do With The Image Tag
There are a few other things that you can do with the <img> tag. We can add in some SEO stuff, we can add in some titles and ALT text. We can also add in some CSS styling.
We can change height & width of the image, as well as adding borders. There are lots of fun stuff that we can actually do. But all of that will be discussed in another article. Because I really want to keep things simple here to get you started.
Ok It’s your turn
Go load in an image, start playing around with this, jot down the code as I explained above, and give it a try. I know it might look a little bit scary and intimidating at first, but just break it down, do it slowly, practice it a couple of times, and it will become crystal clear. And you will start totally understanding it and getting this HTML. Because I know you can do it. It’s really is easy once you figure it out and you learn these codes.
This is the last article in the series of “Learning HTML Code.” Join us for our next series of articles starting with “Learning CSS Code Part 1-Writing With CSS.”
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017