XHTML To HTML: Blogger Template Conversion

what if you needed to keep the same design of your blog and only remove the Dynamic objects like widgets. This could easily be achieved by carefully converting the XHTML format of code structure to Basic HTML 4.0 File. This will enable you to even embed or add a PHP or ASP.net code inside the Cloned BlogSpot design in HTML format. A live example is our Contact page with a PHP contact Form. It is not possible to add PHP inside blogger templates because no direct access to web hosting ftp account is available so far. When you visit our contact page, you will feel like you are still in BlogSpot template environment but in reality its only a Cloned HTML design of the original template. The steps today are interesting and fun to try. Make sure you have a webhosting to try today's tutorial. We are using hostgator as our blog web host to host all our files and resources.
This is our new series and would be fun sharing all the new development tips.
XHTML To HTML
Part1: XHTML To HTML: Blogger Template Conversion
Part2: In Progress...
Part3:

Purpose of This Tutorial

Purpose: XHTML is composed of XML and HTML 4. In this series we will learn to remove the XML portion of code and leave HTML 4 alone. Thus we will be able to create a static HTML Clone of a blogger template.

Download and Study your Template

  1. Go To Blogger > Templates
  2. click Backup/restore
  3. Download your template
  4. Right click the downloaded xml file and choose "Open with > wordPad"
Study the template:
Every webpage has the following concrete HTML structure. Only the DOCTYPE element would differ in different platforms.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head> 

</head>

<body>
</body>

</html>
A webpage consist of 4 important sections
  1. The DOCTYPE defines the type and version of web language being used in the page. In Blogger & also wordpress the type is defined as XHTML and version as 1.0. The only difference is that wordpress uses transitional XHTML while Blogger uses the strict unforgivable version.Blogger doctype looks like this. You will find it at the top of your downloaded file.
<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  1. The bolded part is the declaration for XML so that custom tags created using xml could be identified by the compiler. You wont find the bolded part in Wordpress blogs instead you will find the PHP opening tags.
  2. The html tag enclosed both the head and body tags
  3. The head tag is where you add all your stylesheets (CSS) , scripts (JavaScript, jquery etc.) and meta tags (for SEO & platform compatibility purposes). Code inside head tags are visible to browsers only and not visible on webpage to visitors.
  4. The body tag contains your main content. This is the area where you add your Blog header, navigation, post section, sidebars and footer. Code inside body tag is visible on webpage. Any thing you add here will appear on your site and visitors will be able to see it.
Now if you open the downloaded XML file you will observe that the template has the same core HTML structure as we discussed above. Press CTRL + F to find the tags.
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)