Tag: html

How to Understand Basic HTML

How to Understand Basic HTML

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

How to 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.

Understanding Basic HTML Example

  1. 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?
  2. 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.
  3. 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!
  4. 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.
  5. 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:

Understanding Basic HTML ExampleBut I added some extra HTML to clarify a few things or add a few things.

  1. 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.
  2. 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.
  3. 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.

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

This is the HTML for a link.

Understanding Basic HTML Example

  1. 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.
  2. So what is the </a> part? It just closes the link so that the computer knows you are done talking about links.
  3. 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.

  1. Understanding Basic HTML Examplemeans 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.
  2. 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.Understanding Basic HTML Example

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.

Understanding Basic HTML ExampleYou’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.

Continue Reading

The Easiest Nofollow vs Dofollow Explanation

Nofollow and dofollow: What’s the difference?

Nofollow and dofollow links look the same to the regular person. The html coding just tells Google not to use a nofollow link when deciding things like Pagerank.

PageRank is an algorithm used by Google Search to rank websites in their search engine results.  PageRank is a way of measuring the importance of website pages. – Wikipedia

If you are linking to a site Google assumes you like it and gives that site more “link juice” because your site linked to it. The more sites that link to it, the more popular it must be.  That is why backlinks are so important.

Backlinks, also known as incoming links, inbound links, inlinks, and inward links, are incoming links to a website or web page – Wikipedia

If you link to a site because you were paid to do so or received product (for a review) or because it could make you money (affiliate links) then Google doesn’t want that to count towards their rankings because it wouldn’t be accurate. If lots of people link to a site because they were paid to do so, it might make that site look more popular than it really is.

So you use the nofollow code to tell Google you were paid for the link, so please don’t use it when determining rankings. You do that by adding a little piece of code into the html of your website.

Quick HTML Lesson (skip to next section if you know basic HTML)

If you aren’t familiar with html, when you put a link into your blog, it looks something like this in html:

<a href=”http://www.website.com”>Text you want linked here</a>

Sometimes there are other pieces of code included like this one:

target=”_blank”

Those pieces of code would have to be between the < and > in order to work:

<a href=”http://www.website.com” target=”_blank”>Text you want linked here</a>

 

Adding Nofollow Code

A link by default is a dofollow link, without adding or taking anything away. If you want a link to be nofollow, you have to add this code in:

rel=”nofollow”

So a link that is nofollow would look like this:

<a href=”http://www.website.com” rel=”nofollow”>Text you want linked here</a>

Again it will look the same on the blog, it’s just in the html that it’s different.

Remember you want a balance of dofollow and nofollow links but as per Google’s Webmaster Guidelines, all paid links (including product and affiliates) must be nofollow.

That’s the very basics of dofollow vs nofollow. I hope that clears things up.

Continue Reading