Basic HTML Code Required for Blogger
Blogging in Blogger platform required few skill sets of web programming. One of website programming language that is used in Blogger is HTML. Understanding HTML code is required for Blogger. We do not need master
this but there are some basic HTML code that can make our blogging process much easier.
In this article i want to share my learning on HTML that is related with Blogger. I read some book in HTML topics and learn the HTML in other online resource. For reference in HTML learning you can look at http://www.w3schools.com/html/.
So we need to understand HTML. Which part of HTML code that we need to understand? The purpose of learning HTML for Blogger is to make our blogging life easier. We just need the basic code of HTML code that used frequently in Blogger template and in Blog Post.
HTML is an abbreviation for HyperText Markup Language. HTML was designed to display data with focus on how data looks. XML was designed to be a software and hardware independent tool used to transport and store data, with focus on what data is. XML provides a framework for defining markup languages
The comparison between HTML and XML in www.xmlobjective.com provide better understanding of the difference bewtween HTML and XML. Please have a look on the link below:
Further Reading:
In my own language as beginner, the HTML is responsible for how the data will looks on the blog, the XML is responsible in storing data and transporting data so it can be displayed on the blog.
The data that we are talking about is the blog data. For example the blog title, blog description, blog label, blog post and any other related data. When we create a post in blogger platform, we actually inputting this data to the blogger database. The XML blogger template will convert this information to HTML (phrasing) and displayed on the blog as design.
The blogger template structure is almost the same with HTML structure. The different are located in document type declaration, definition of XML namespace, and the data storage and recall. Below is the general blogger template structure.
The Blogger template file is started with XML declaration and the rest are the same with HTML. However we can see that the <html> tag has a lot of attribute.
The <head> tag is contain the page title, the CSS Code for template customization <b:template skin>, and also the CSS code for blogger dashboard template customization <b:skin>
So this is the general structure of Blogger template. This is just general overview, i will not dive into detail of the Blogger template structure
Most of HTML code will have opening tag and closing tag. For example <html>...... </html>. However there are some code that doesn't need a closing tag like <br/>.
There are a lot of HTML element that are used in Blogger template or Blogger post. We will discuss it latter. What is the most frequent HTML code that is required by Blogger. Below is the general structure of a HTML element.
Block-level element is always start in new line and take all the width available. One of block-level element that is found very often in Blogger template or Blogger post is <div> element. It is being used to create container of the Blogger Part or element.
The application of <div> tag element is not only in Blogger Template Structure. We can also used <div> element in our Blogger post to create a section in our blog post with different format. For example to create a box for related article hyperlink in the middle of post. Below is the example. I did not create this code in Blogger post. I used "Try-It Editor" provide by www.w3schools.com. I just write the code on the left panel, click run and i can see the appearance of the code on the right side.
3. HTML in line elements <span>
The <div> create a block-level element, <span> create in line-level element. When we put something inside the <span> html element, it will not create a new line. The content inside <span> will be put inline with the previous content of the HTML element. I saw this application in mobile menu of Blogger template. Below is the example in "Try-It Editor" and also in Blogger template.
We can coppied this code to Try-It Editor and see the behavior of this code. Below is the code example.
If we change the <span> into <div>, the menu will not in one line anymore. The menu will be in 4 lines. Below is the example.
4. HTML code for creating a link
To create a link in our blog post we can click "add or remove link" button in our Blogger post editor. So we do not need understand what is the code to create link in Blogger post. However, when we want to create menu in Blogger template we need to understand how this HTML element is work.
To insert a link we need <a> element and href attribute. We can see the application in creating Blogger menu above in part 3.
5. HTML code to insert picture
Picture is important in Blogger post or Blogger template. Just like link, we can insert picture to our blogger post using HTML formatting menu available in our blogger post editor.
6. HTML code to format Headings
HTML headings are one of the most frequent HTML element that is being used by blogger. Usually we used it from the Blogger post editor. We can select a line of text and change it become heading, subheading, minor heading or just a normal line.
7. HTML code to insert quote
I really like to put some quote in important line of my blogger post. It makes the Blogger post looks prettier and also give a chance for quick reading. By quick scanning title and also the quote will helps the reader to go dive deeper into the article. To do that, all we need is just selecting the text and click "Quote" formatting tools in our Blogger Post Editor.
8. HTML code for common text formatting
Formatting text in HTML is very easy in our Blogger Post Editor. We just need to click "Bold", "Italic" or "Underline" to get the formatting text effect that we want just like in Word Processor computer software.
9. HTML code to create ordered list and un ordered list
The list is also the most common formatting that is found in almost Blogger post. Every article will have list in some other way. The Blogger menu is created in un-order list. We can create a list by clicking "Bullet list" or "Numbered list" on Blogger post editor. In creating menu inside the Blogger Template we also use this code.
10. HTML code to create table
We can create table in our blogger post to make comparison and deliver information more effective. To create table in our blogger post we need to write the code. There are no other option like the common formatting text above. That is why a Blogger should understand HTML code. In some level we need to do the "dirty" job, dive into HTML post editor and create some stuff using the HTML code.
11. HTML code to insert programming code
Inserting HTML code or other code in HTML is very easy. There are two type of HTML tag that can be used to do the job.
 |
| Basic HTML Code Required For Blogger |
Understanding HTML code is required for Blogger
In this article i want to share my learning on HTML that is related with Blogger. I read some book in HTML topics and learn the HTML in other online resource. For reference in HTML learning you can look at http://www.w3schools.com/html/.
Short story about HTML
In short HTML is a mark-up language. The latest version is HTML 5. It consist some standard code that can format text both the layout and style. Just imagine Microsoft Word, we can format text in Microsoft Word as we want to be displayed in computer or in printed document. HTML language will mark-up the text so it can be displayed as we want.Why do Blogger need to understand HTML?
When we started Blogger at the first time, we never imagine that latter on we will require to understand HTML or other web programming language. So why do we need to understand HTML code? As blogger we need to go to "Edit HTML" section in our blogger template sometime. There are several occasion that is mandatory for blogger to go dive on "Edit HTML"- Creating menu in our blog
- Minor editing blogger template
- Copy the script of Google AdSense, Google Analytic
- Creating blogger template from scratch
So we need to understand HTML. Which part of HTML code that we need to understand? The purpose of learning HTML for Blogger is to make our blogging life easier. We just need the basic code of HTML code that used frequently in Blogger template and in Blog Post.
 |
| Edit HTML option in Blogger Dashboard Theme Setting |
There are some basic HTML code that required by Blogger to make our blogging life much easier.
General structure of HTML File
In General a HTML document consist of<!DOCTYPE..>, <html> , <head>, <body> tag. Below is the general structure of a HTML document.
<!DOCTYPE HTML> <html> <head>....</head> <body>...</body> </html>In general every HTML document are build with the same structure as above. Below is the explanation
<!DOCTYPE HTML>: Document declaration to let the browser know that our document is HTML document<html>tag : This is the standard structure tag of html document. It will be started with <html> tag and ended with</html>tag<head>.... </head>: We put title tag, skin, CSS code, Java Script code<body>... </body>: Everything inside this tag is visible to our blog reader
The blogger template structure
The blogger template is a XML document. When we download a blogger template, we will get XML file. XML stands fro Extended Mark-Up language. What is the difference between these two language? Quoted from Google Search i found this definitionHTML is an abbreviation for HyperText Markup Language. HTML was designed to display data with focus on how data looks. XML was designed to be a software and hardware independent tool used to transport and store data, with focus on what data is. XML provides a framework for defining markup languages
The comparison between HTML and XML in www.xmlobjective.com provide better understanding of the difference bewtween HTML and XML. Please have a look on the link below:
Further Reading:
In my own language as beginner, the HTML is responsible for how the data will looks on the blog, the XML is responsible in storing data and transporting data so it can be displayed on the blog.
The data that we are talking about is the blog data. For example the blog title, blog description, blog label, blog post and any other related data. When we create a post in blogger platform, we actually inputting this data to the blogger database. The XML blogger template will convert this information to HTML (phrasing) and displayed on the blog as design.
The blogger template structure is almost the same with HTML structure. The different are located in document type declaration, definition of XML namespace, and the data storage and recall. Below is the general blogger template structure.
 |
| General Structure Of Blogger Template |
The Blogger template file is started with XML declaration and the rest are the same with HTML. However we can see that the <html> tag has a lot of attribute.
The <head> tag is contain the page title, the CSS Code for template customization <b:template skin>, and also the CSS code for blogger dashboard template customization <b:skin>
So this is the general structure of Blogger template. This is just general overview, i will not dive into detail of the Blogger template structure
<?xml version="1.0" encoding="UTF-8" ?> <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.2.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> * Page Title * Meta Tag Discription * Google AdSense syndication script * Google Analytic syndication script * CSS (internal and external) * Script * Etc ....</head> <body> * Header * Blog Post * Side Bar * Footer * Google AdSense Code * Etc ...</body> </html>
Basic Concept of HTML for Blogger: Understanding HTML Element
So we know the general structure of an HTML file and XML file of Blogger template. As we can see the HTML code always start with opening tag and ended with closing tag. The code inside the opening and closing tag are called HTML element. In the example above at least we have already known about <html> element, <head> element, <body> element.Most of HTML code will have opening tag and closing tag. For example <html>...... </html>. However there are some code that doesn't need a closing tag like <br/>.
There are a lot of HTML element that are used in Blogger template or Blogger post. We will discuss it latter. What is the most frequent HTML code that is required by Blogger. Below is the general structure of a HTML element.
<opening tag element>Content Of The Elements</closing tag element>
Basic Concept of HTML for Blogger: Understanding HTML attribute
In the example of Blogger template structure we can see that the <html> tag are followed by a lot of code like b:css='false' b:defaultwidgetversion='2'. Those code are the HTML attribute. The HTML attribute explain more about the HTML element. It always specified in the opening tag.
Understanding HTML attribute is very important. The common attribute that is used in very often in Blogger post or Blogger template is the class attribute, id attribute, href attribute, src attribute, alt attribute, width attribute, style attribute and many more. The important thing is we need to understand that this attribute give further explanation about the HTML tag.
Below is the structure of a HTML tag with its attribute.
Understanding HTML attribute is very important. The common attribute that is used in very often in Blogger post or Blogger template is the class attribute, id attribute, href attribute, src attribute, alt attribute, width attribute, style attribute and many more. The important thing is we need to understand that this attribute give further explanation about the HTML tag.
Below is the structure of a HTML tag with its attribute.
<tag attribute1="attributename1" attribute2="attributename2">HTML Tag Element Content </tag>
How to create comment in HTML
Comment is very important in programming. We need a way to put some text in our code that is ignored as part of executable code. We need comment to give more information to the programmer or the user about the intention of the code that has been written. In HTML or in XML blogger template, the comment is started with <!--, and ended with -- >.
<!-- Put Your Comment Here -->
We can also use the comment to disable certain part of our code. It is better to disable it that delete it. If we need those code again, we can enable the code by removing the comment tag.
 |
| Disable Code Using comment tag |
12 Basic HTML code being used in Blogger
1. HTML Structure element
HTML structure element are the basic element that needed for Blogger. There are document type declaration, html element, head element and body element.
As explain above, we put information about our blog like title, meta description, CSS style, script inside the <head> tag.
All the visible part of our blog is put inside the <body> tag. The header, sidebar, post body area, Ad-Sense Code and other visible part.
By understand the structure of HTML, it will make our Blogging process easier. We know if we want to change the Blogger template or just copy paste the code into Blogger post or Blogger template to enhance our Blog appearance or feature.
HTML structure element are the basic element that needed for Blogger. There are document type declaration, html element, head element and body element.
As explain above, we put information about our blog like title, meta description, CSS style, script inside the <head> tag.
All the visible part of our blog is put inside the <body> tag. The header, sidebar, post body area, Ad-Sense Code and other visible part.
By understand the structure of HTML, it will make our Blogging process easier. We know if we want to change the Blogger template or just copy paste the code into Blogger post or Blogger template to enhance our Blog appearance or feature.
<!DOCTYPE HTML> <html> <head>....</head> <body>...</body> </html>
2. HTML Block Level Element <div>
Block-level element is always start in new line and take all the width available. One of block-level element that is found very often in Blogger template or Blogger post is <div> element. It is being used to create container of the Blogger Part or element.
 |
| Example of Block-Level Element <div> in Blogger Template Structure |
The application of <div> tag element is not only in Blogger Template Structure. We can also used <div> element in our Blogger post to create a section in our blog post with different format. For example to create a box for related article hyperlink in the middle of post. Below is the example. I did not create this code in Blogger post. I used "Try-It Editor" provide by www.w3schools.com. I just write the code on the left panel, click run and i can see the appearance of the code on the right side.
 |
| Application of div element in blogger post |
3. HTML in line elements <span>
The <div> create a block-level element, <span> create in line-level element. When we put something inside the <span> html element, it will not create a new line. The content inside <span> will be put inline with the previous content of the HTML element. I saw this application in mobile menu of Blogger template. Below is the example in "Try-It Editor" and also in Blogger template.
 |
| The use of <span> in Blogger Template |
<!-- mobile navigation menu start --> <div id='mobile-nav'> <span><a href='https://www.bloggerbegins.com/search/label/Blogger%20Guide'>Blogger Guide</a></span> · <span><a href='https://www.bloggerbegins.com/search/label/Why%20Blogger'>Why Blogger</a></span> · <span><a href='https://www.bloggerbegins.com/search/label/Blogger%20Template'>Blogger Template</a></span> · <span><a href='https://www.bloggerbegins.com/search/label/Google%20Adsense'>Google AdSense</a></span> </div> <!-- mobile navigation menu end -->
If we change the <span> into <div>, the menu will not in one line anymore. The menu will be in 4 lines. Below is the example.
4. HTML code for creating a link
To create a link in our blog post we can click "add or remove link" button in our Blogger post editor. So we do not need understand what is the code to create link in Blogger post. However, when we want to create menu in Blogger template we need to understand how this HTML element is work.
 |
| HTML formatting menu in Blogger Post Editor |
5. HTML code to insert picture
Picture is important in Blogger post or Blogger template. Just like link, we can insert picture to our blogger post using HTML formatting menu available in our blogger post editor.
6. HTML code to format Headings
HTML headings are one of the most frequent HTML element that is being used by blogger. Usually we used it from the Blogger post editor. We can select a line of text and change it become heading, subheading, minor heading or just a normal line.
7. HTML code to insert quote
I really like to put some quote in important line of my blogger post. It makes the Blogger post looks prettier and also give a chance for quick reading. By quick scanning title and also the quote will helps the reader to go dive deeper into the article. To do that, all we need is just selecting the text and click "Quote" formatting tools in our Blogger Post Editor.
8. HTML code for common text formatting
Formatting text in HTML is very easy in our Blogger Post Editor. We just need to click "Bold", "Italic" or "Underline" to get the formatting text effect that we want just like in Word Processor computer software.
9. HTML code to create ordered list and un ordered list
The list is also the most common formatting that is found in almost Blogger post. Every article will have list in some other way. The Blogger menu is created in un-order list. We can create a list by clicking "Bullet list" or "Numbered list" on Blogger post editor. In creating menu inside the Blogger Template we also use this code.
10. HTML code to create table
We can create table in our blogger post to make comparison and deliver information more effective. To create table in our blogger post we need to write the code. There are no other option like the common formatting text above. That is why a Blogger should understand HTML code. In some level we need to do the "dirty" job, dive into HTML post editor and create some stuff using the HTML code.
11. HTML code to insert programming code
Inserting HTML code or other code in HTML is very easy. There are two type of HTML tag that can be used to do the job.
- <pre>....</pre>
- <code>...</code>
Everything inside those tag will be displayed as the code line in our blogger post. The <pre> tag is for block-element and <code> in for in-line element. Just like <div> and <span>
12. Style attribute and introduction to CSS for Blogger
Style attribute is very important in Blogger Template or in Blogger post. We used style attribute to format the text as we want. Change the color of the background, change the font type and size and other element formatting that is available. We can do the style inside the tag element every blog post, or we can put it as external CSS (Cascading Style Sheet) that can be used in entire of the Blogger post.
So how we can practice HTML code for Blogger? Blogger has two post editor mode. Normally we use "compose" editor that has a lot of formatting text menu and give almost what you will see in the browser appearance. Blogger also offers HTM editor for the Blog Post. Try to switch HTML editor mode after you finished your writing and examine the code. We can try to use HTML post editor and write our article in HTML.
The other tips for learning HTML is using the Try-It editor provided by www.w3schools.com. It has online HTML editor on the left side and the preview pane on the right side. We can see how the HTML code works by comparing the code and the result side to side.
Reading HTML or XML code is also an activity that can be used to enhance our understanding about HTML or XML. We can use code programming text editor that can display the code in number and color. There are several application that can be used. For Windows program, i like to user Notepad++ to read XML or HTML code. The different color help us understanding the code better.
If you want to read HTML or XML code on the go, you can find Android application that can displayed the code beautifully in colorized mode. I use Jota Text Editor to read HTML or XML on the go in my smartphone.
Read also:
Hope it helps and happy blogging.
Read :
12. Style attribute and introduction to CSS for Blogger
Style attribute is very important in Blogger Template or in Blogger post. We used style attribute to format the text as we want. Change the color of the background, change the font type and size and other element formatting that is available. We can do the style inside the tag element every blog post, or we can put it as external CSS (Cascading Style Sheet) that can be used in entire of the Blogger post.
Tips : Learning HTML Code for Blogger
Learning HTML is like learning to ride a bike. It seems hard at the beginner, and it will be getting easier and fun when we starting understand. HTML is also a practical skill, so we have to try and try writing the code. Reading this blog post is not enough. This article only gives the overall picture of basic HTML that is required by Blogger to make our Blogger life easier.So how we can practice HTML code for Blogger? Blogger has two post editor mode. Normally we use "compose" editor that has a lot of formatting text menu and give almost what you will see in the browser appearance. Blogger also offers HTM editor for the Blog Post. Try to switch HTML editor mode after you finished your writing and examine the code. We can try to use HTML post editor and write our article in HTML.
The other tips for learning HTML is using the Try-It editor provided by www.w3schools.com. It has online HTML editor on the left side and the preview pane on the right side. We can see how the HTML code works by comparing the code and the result side to side.
Reading HTML or XML code is also an activity that can be used to enhance our understanding about HTML or XML. We can use code programming text editor that can display the code in number and color. There are several application that can be used. For Windows program, i like to user Notepad++ to read XML or HTML code. The different color help us understanding the code better.
If you want to read HTML or XML code on the go, you can find Android application that can displayed the code beautifully in colorized mode. I use Jota Text Editor to read HTML or XML on the go in my smartphone.
Read also:
Conclusion : Basic HTML Code Required for Blogger
So what do you think? Do you need to understand HTML in your Blogging activities? Don't worry it is a lot easier in really than you think. Please share your thought, comment, your experience in the comment section below.Hope it helps and happy blogging.
Read :
Post a Comment for "Basic HTML Code Required for Blogger"