Easy HTML Codes Every Blogger Should Know

For any blogger, it's inevitable you will run into HTML coding. It may sound scary, maybe a little confusing, but it's one of those things that will be super helpful to you if you can memorise the basics.
HTML is the language used to create web pages. A blog's template/theme is made up by a whole page of HTML coding, from the top to the bottom. If you want more control over what you add to your blog and where you want it to be, learning a few basic HTML codes is the best idea.
In Blogger, you may have seen the "HTML/Javascript" option when adding gadgets to your blog. This type of gadget is the one you need to select if you want to add a HTML code to your side bar or footer. If you're on Wordpress, a Text widget will do the same thing.
Create a new practise gadget in your side bar so you can try some of the following codes out and see what happens. If you put the coding in wrong, don't worry. Either it won't show up at all or you'll just have little - / = . / symbols floating around your side bar until you delete it. You really can't go wrong with practising :)

 IMAGE 

I always tend to upload my images to PostImage to get the direct link for my html codes. I'm a little bit trusting, as the site can go down at any time and leave me with broken images everywhere, but I just can't be bothered paying for image hosting when a site can host them for me for free :)
Upload your image to PostImage, Tinypic or Photobucket and grab the 'direct link' provided. Then simply paste it into this code:

<img src="http://imagelinkhere">

 IMAGE LINK 

This is the code you need if you want to add an image to your side bar which is linked to another page or website. Always make sure your links in coding start with the http://

<a href="http://websitelinkhere"><img src="http://imagelinkhere"></a>

 TEXT LINK 

A text link is just like the code above, but with text where the image code was.

<a href="http://websitelinkhere">Text goes here</a>

 BOLD, ITALIC & UNDERLINED TEXT 

You can change the look of text in your side bar with these easy codes:
For bold text:

<b>Bold text here</b>

For italic text:

<i>Italic text here</i>

For underlined text:

<u>Underlined text here</u>

 HOVER IMAGE LINK 

As you'll see if you hover over the social media icons in my side bar (if you're on a computer), they change as your mouse hovers over them. This works best for images that are exactly the same size, just different in colour.
With this code, make sure you leave in all the quotation marks (' and ")

<a href="http://websitelinkhere"><img src="http://firstimagelink"  onmouseover="this.src='http://hoverimagelink'" onmouseout="this.src='http://firstimagelink'" /></a>

 FONT SIZE 

You can also change the size of your font. Replace the number with a number between 1 and 6 (1 is super tiny and 6 is quite large):

<font size="4">Text goes here</font>

STARTING A NEW LINE

If you don't use this little break code, everything will end up in one straight line. One of these will start a new line, two will start a new paragraph:

<br>

 ALIGNING IN THE CENTER 

If you want something in your side bar to be centered, use these codes at the beginning and end of any HTML coding you add:

<center>Any HTML code or text here</center>

. . .
Get the hang of these codes and you'll be able to add whatever you like to your side bar or footer :) Have a practise and let me know how you go!

Follow