You should understand basic HTML. Even if you create your posts in a visual editor (where everything looks like it would to your reader) sometimes you have to add a code in manually and you need to know some basic HTML. I don’t know why but some people get scared when it comes to HTML. I’ll try to make it easier to remember.

HTML is a language. It’s a computer language. I won’t bore you with what it stands for, I’m only going to tell you things that will help you understand some basic HTML commands. Just know that if you can understand basic HTML is a way you can communicate with your computer.

Understand Basic HTML

Text in purple is your main takeaways.

Adding Images

This is a code for adding an image into a blog post. I will then break it down so you understand WHY it looks like that and what will help you remember it.

Okay let’s start with the <. You will notice it ends in > as well. All HTML code must be between < and >. Why? To contain it so that the computer knows where it starts and ends. <HTML> okay?
Next is img src which stands for image source. If you are adding a photo, you need to tell the computer where to get the photo from right? So we use img src.
Next is =. You’ll see = a lot in the line above. = connects what is before and after it. Just like in math 2+2=4. So img src= what? A url to the image. Image Source=the image source!
Actually it would be more accurate to say image source=”image source” because you’ll notice all the ‘answers’ are in quotations. Just another way to contain something.
The long string of text that’s next is the actual location of an image on this blog. I uploaded the image and then copied the link it gave me and pasted it into the HTML. Don’t forget the end quote!

I could just use this and it would show the image:

But I added some extra HTML to clarify a few things or add a few things.

border=”0″ tells the computer that the image is to have NO border. I could change the 0 to a different number to make the border bigger.
alt stands for alternative. What happens when a computer can’t show an image for some reason? It defaults to the alternative text that has been specified in the HTML. If you don’t specify anything then it won’t show anything except a blank space. Not good.
alt”Biannual Blogathon Bash” means that if the image won’t show, the words Biannual Blogathon Bash will. This is good for SEO as well (Search Engine Optimization)

RELATED POST: 5 SEO Tips to Make It Easier (to understand)

Finally everything is completed with the >

Adding a Link

Remember some of the rules from above because they still apply.

All HTML must go between < and >
ABC=”ABC” e.g. Img src=(the source of the image) or border=(number of the border)

This is the HTML for a link.

href stands for hyperlink reference. A hyperlink is the long version of the word link. So <a linkreference=”URL”>. That is too long so we use <a href=”URL”> right? Make sense? Make sure your link is between the quotations and contains the http:// part.
So what is the </a> part? It just closes the link so that the computer knows you are done talking about links.
Another rule in HTML is that when something is opened you must close it. So to bold for example a word I use <b>BOLD ME</b>. I opened the b for bold so I closed it with the / and then the same b. Italics is <i>ITALICS</i>. So when we do a link, we open <a href=”link”> so we close </a>

Just like with the images, we can add more to the link to give it more details or information.

means that the link will open in a new window instead of the one it’s already in. Target means where should the link open and _blank means open a blank, new window.
If you make money or get products from a post, your link to that company is supposed to be a nofollow link. To do that, you add rel=”nofollow” into the link the same way.

RELATED POST: The Easiest Dofollow vs. Nofollow explanation

Adding an Image with a Link

Finally I want to show you how to make an image link to a URL.

You’ll notice that the two codes are exactly the same as above basic ones but the image is between the <a href> code and the </a> code. The image must be in the middle so that the link applies to the image.

There is more HTML codes than that of course, but those are the two basic ones and the ones that you will encounter the most. Plus hey, you learned how to bold and italicize too!

That’s how to understand basic HTML.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

momssmallvictories

Sunday 24th of January 2016

Well I tried posting the answer and I suspect that when I did, the coding all changed when I posted it. So I took a screenshot of my answer in my goals blog post. .

ve3smu

Saturday 23rd of January 2016

I'm not sure exactly what we are supposed to post here but is this right? <img scr="http://www.blog.com/images/image.jpg">

Kathleen Bailey

That's right for an image yes. Seems no one remember to add the link part.

Friday 22nd of January 2016

Don't forget to link it!