Ads 468x60px

Pages

Thursday, May 18, 2006

Blogger template tutorial: Components

The Blogger template comprises 3 main components - the cascading style sheet (CSS), Hypertext Markup Language (HTML) and the Blogger tags. Components of the template will be illustrated by examples from the Blogger Minima template by Douglas Bowman.

Hypertext Markup Language

A HTML file contains markup tags which tell a Web browser how to display a Webpage. The first tag in a HTML file is <html> which tells the browser that this is the start of a HTML document. The last tag of a HTML file is </html> which tells the browser that this is the end of the HTML document. With a few exceptions, HTML tags always occurs in pair, an opening tag and a closing tag. An example of HTML tags which does not occur in pair is the line break tag <br />.

The information between the <head> tag and the </head> tags is header information. Header information is not displayed in the browser window. The cascading style sheet is contained within the <head> tag and the </head> tags.

The information between the <body> and </body> tags is the information that will be displayed in your browser. <div id="header"> signals the start of the information that will be displayed in the header. <!-- and --> are comments tags and text and tags contained within the comments tags are not acted upon, and is only for the purpose of making the HTML clear to the people reading the HTML document. <!-- Begin #content --> tells readers that this section is the start of the content section, <!-- Begin #main --> the beginning of the main column and <!-- Begin #sidebar --> the beginning of the sidebar.

It is a good idea to have a basic knowledge of HTML. To learn HTML online, go to HTML Tutorial.

Cascading Style sheet (CSS)

The cascading style sheet controls the overall style and layout of the web page (how HTML elements are displayed). It is placed in between the <head> and the </head> tags in the beginning part of the template and is bounded by the <style type="text/css"> and </style> tags. */ and /* surround things meant as comments (information). It is only meant for the person reading the template and is not acted upon by the browser. The CSS syntax is made up of a selector, a property and a value in the following syntax: selector {property: value;}. For example, in the Minima template: body{background: #fff;} means that the background color of the blog is white (#fff is the hexadecimal code for white). If you change it to body{background: red;}, the background color will change to red.

For an examples of modification of the CSS, refer to How to change the width of the content column and the sidebar, How to make an image as a background for your blog. To learn more about CSS, go to CSS Tutorial.

Blogger template tags

When you submit a post to Blogger, it gets saved into their database. When you open a page from your blog, this is when Blogger tags come into play. Blogger tags tell their blog publishing program which information to fetch from the database and put on the web page.

There are 2 main types of Blogger tags: item-level tags and page-level tags. Item-level tags are those tags that have the $ sign in them, such as <$BlogItemAuthor$>. The tags get the actual information from Blogger's database and put it on the web. <$BlogItemAuthor$>, for example, display the blog author's name.

Page-level Blogger tags deal with the design and structure of a page. They tell item-level tags when and where they have to perform. For example,

<BloggerArchives>
<$BloggerArchiveURL$>
<$BloggerArchiveName$>
</BloggerArchives>

commands that this is where the browser have to display Archive URL and the Archive Name.

To see an example of the placing of Blogger tags when the information from Blogger database is not fetched from the servers, see example

For a complete list of Blogger template tags, go to Template tag list.

This site may help you understand further: Blogger Template Anatomy

Related posts:
Adding content via the template
Blogger template tutorial: 3 column template
Blogger Beta: 3 column template

Books from Amazon

Publishing a Blog with Blogger : Visual QuickProject Guide

Essential Blogging : Selecting and Using Weblog Tools

NEWER POST    OLDER POST

0 comments:

Post a Comment