Previously, we saw some basic structural layout of the Blogger blog and some basics of the coding involved in it. Today’s mission will be for purely the HTML part to the basic level.
Mission 2: In the previous mission we never saw a pictorial level of the HTML template structure. I’ve created one for you guys to get the basic level of picture in your mind how the template HTML code on the whole looks. The HTML template structure is divided into 3 sections basically.
PREVIOUS MISSON – Misson 1 – Understanding the Blogger Layout
NEXT MISSON – Mission 3 – Understanding Blogger CSS coding
Note: We are still using the “Simple Template” from Blogger for reference.
You see it in action here.
A Pictorial Representation Of The Blogger Template HTML:
 |
| Click image to enlarge |
Explanation of Each Section
SECTION 1: This is the start of HTML template code also called as the “Header” of the template HTML or any HTML structure in general, which starts with a <?xml version=”1.0″ encoding=”UTF-8″ ?> tag and <html> tag.
It is not just Blogger but any other HTML page needs a compulsory <html> tag to begin with. <xml> tag is used because Blogger template needs to be exported as an xml template file.
This section also contains instruction to the search engines which are called as Meta tags. Meta tags helps you to declare the search descriptions and search titles. SEO part is handled here.
You also have the title tags.
SECTION 2: This section is an extension of the SECTION 1 where the template skin variables and decorations start. You have the optional Blogger template name, designer and URL.
The variable definitions are nothing but the reusable items in your template.
Important – This is where the CSS styling codes go in.
Eg: You want to use the same font styles again and again in your template code, instead of declaring for each instance, you can declare just once in this section.
SECTION 3: This section contains the browser viewable tags and items. This is indicated by the start of the <body> tag and it is ended by the </body> tag. So, what ever you declare between them will appear in your page output.
The most important sections are 1 and 2 where most of the codings go in.
Section 3 may be required to add certain elements like social media buttons if that can’t be added using the normal “Add widget” methods.
Hope you will enjoy the upcoming tutorials as well. Hope you enjoyed this. Stay tuned for more.
The post Structure of Blogger HTML Template | Mission 2 appeared first on iTechColumn.