Basic HTML in Blogger

Another simple snippet on using HTML when creating blog posts.



See, most of us bloggers have a frustrating time using the Compose menu while creating or editing our blog posts. When we shift blogspot image thumbnails, they lose their links and you cannot click on it to see the enlarged picture. When we try to align text or change their sizes, they just won't do shit!




What is HTML?
Now HTML stands for HyperText Markup Language, doesn't really matter but just to let you know. This language can be written on Notepad, or any text editor. It is one of the easiest and basic languages for webpage development. It is used for the layout and structure of a webpage.




HTML Concepts
Let me explain the concept of HTML first.





1. < > indicates a HTML tag.
Note: Replace the ( ) with < >

(HTML), (body), (div) and so on indicate that it is a HTML tag, which means it is a HTML code. Inside this tag is where your code will be written.




2. All tags must be closed.
All tags opened like (HTML) or (div), must be closed with a matching tag like this, (/HTML) or (/div). Treat your HTML tags like inverted commas. This is an example.




<div> <-- This is the open tag. Insert your content here. </div> <-- This is the closing tag.






How to Use in Blogger?
So how do you apply it while editing your blog posts? We will use both Compose and Edit HTML tabs so that it becomes simpler for us. So let us look at how to use it in different situations listed below.




1. Shifting Image without Breaking the Link
a) First, go to Compose and click Upload Image.


b) After uploading your image, you will see the image at the top of your post.


c) Switch to Edit HTML and find for the (img) code. It will start with something like...


(img src="http://yourimagelink.com/image.jpg")


This is the starting of your HTML code that adds the image in. It ends with the (/a) tag (known as Anchor), which is the end of your whole image code.


d) Select from the start to the end of this code and Cut it. Go to where you want to put the image and paste it there.




2. Aligning Text or Image
To align, all you need is to add (div) tag as the starting point before the image code. Depending on your alignment (center, left or right), type the tag like this. Note that it is also closed at the end.



<div align="center"> [Image Code Goes Here!] </div> <div align="left"> [Image Code Goes Here!] </div> <div align="right"> [Image Code Goes Here!] </div>






3. Changing Text Size and Colour
Some of the time you will have problems with this when you change the text size and keep altering it till it's all messed up and the text just won't show in the correct size. To change this, you need to look for this code.




<span style="COLOR: rgb(Your Colour Number)"> <-- The text colour code. Your Text. </span> <span style="FONT SIZE: 100%"> <-- The font size code. Your Text. </span>.



If there are three colour numbers, which would probably have the word RGB there, it means that the colours are measured through Red, Green and Blue. Imagine mixing these colours, and you have to set the intensity of each colour so that you can get the colour you want. The minimum value is 0 and the maximum value is 255.


For font size, using the percentage is better has it is based on your default font size (different templates might have different font sizes) and so on. You can also try using numbers instead of percentages to experiment the correct font size you want.





4. Problems with Line Breaks
Sometimes you might experience problems when you put in line breaks. When you click Preview, they just don't show it correctly, the spacings are all wrong. So what you can do is... insert this code.




<br/>



This does not need a closing tag as it is closed within itself already. This tag is basically a line break. Insert more of these to put in more line breaks.






Closure
That's about it. These 4 situations are the most common problems faced by bloggers who do not know HTML. I hope this guide would help you in creating better posts!




Love,
Nicholas.