Saturday, May 24, 2008

Recent comments Feed Widget

Change in Blogger Feeds

All along, for posts and comments without titles, Blogger used the first line of the post or comment as titles in the feeds. In a typical “Feed” page element, the titles are important as these are displayed as links in an unordered list format.

Blogger did a supposed bug fix and the “title” element was no longer a post snippet for posts with no title. This affected the comments feed, since comments never had a separate title field but were appended to the posts. According to Google's Pete Hopkins, the rationale was “to balance making the Atom feed a correct representation of the post - for Atom Publishing Protocol clients - and making the feed work the best in various feed readers.”

There was a lot of unhappiness among users and developers. Other than broken comment feed widgets, it affected Firefox live bookmarks as well.

Enable Comments Feed

First, we have to ensure that Comment Feeds are enabled. Once you are logged in, go to Settings -> Site Feed and switch to “Advanced Mode”. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Save the Settings.

Image Touched Up By www.pikifx.com

Feed Page Element method

If you had followed our earlier article to insert the Comment Feed URL into the “Feed” page element, this is what you will see:-

Image Touched Up By www.pikifx.com

Do you notice the gaps in between? These are the hard returns in the comments and they are not removed in the widget, unlike previously. It doesn't look as sleek now. Compare this to what we have below.

Recent Comments Widget JavaScript

The way to work around this would be to go back to using JavaScripts. We have been slow to recommend JavaScripts because there are simply too many malicious scripts out there. Most will upload their scripts onto their external sites and provide you a code for insertion into your template. The code can look like this:-





When the page loads, the browser will visit that external site to read the script contained in the .js file. Because of the security risks in running unknown scripts, many users have configured their browsers to disable scripts and the scripts will not be read. Your readers may hence not be able to view the contents in the widget. Before inserting any of these scripts into your blog, ensure that they are from trustworthy sites. Even then, as we had pointed out in our article on Internet Security and Blogger Virus, there is nothing preventing the site owners from altering the script after sufficient people have linked to it.

We went through several of the Recent Comments scripts and they are mostly workable. Some allow you to fully customize the widget styles and provide user-friendly interface for easy selection of the options. It is difficult to know who wrote the first set of original script as almost all of them claimed to be the authors, even though some scripts looked rather identical.

What we did was to take a couple of them, and change and modify that to our unique script. Our simple Recent Comments widget will look like this.

Image Touched Up By www.pikifx.com

Labels: ,

Internet Security and Blogger Virus

The internet was abuzz with talk that Blogger.com site got hacked and was compromised. Blog owners suddenly found fake spam Posts in their Blogs which contained links to virus downloads and data mining sites. Some were faced with inexplicable web page load times and yet others noticed odd codes appearing in their templates. The natural reaction is to blame all these on the people responsible for the viral attacks, even though that might not be the case. In this article, we shall share with you some tips that we have learned on internet security and protection. This include the actions we can take to prevent or minimize the possibility of having Blogger blogs hacked or hijacked.

Is Blogger.com safe?

The article in BBC, Bloggers battered by viral storm, reported that the latest incidents were the work of a group of hackers who had been mounting attacks since January. They used spam messages posted on bogus sites or sent through email to trick users to download malicious programs. The links can sometimes be couched as Youtube links or digital greeting card links. Also, the email subjects contained informal internet jargon which led recipients to think that the mail came from their friends.

In an official response yesterday, Eric of the Blogger team had confirmed that “Blogger was not compromised. Instead, the blog posts are from bloggers whose machines were compromised by a Trojan horse. These bloggers had their mail2blogger email addresses in their computers' address books ... so when the malicious software spammed every address in their address book with its content, a copy of that email was posted to their blog.”

In short, the Blogger platform is safe and if any, the Blog owners should ensure that their own computers are checked and protected against malware. Where then does this leave us?

How the virus got into Blogs

Before we look at the preventive actions to take, we may want to know how these fake posts made their way into our Blogs. When you are logged into Blogger, you can see under Settings -> Email a “Mail-to-Blogger Address” feature. This enables you to post to your Blog by emailing the Post content to a mail-to-blogger address.



For those who have not used this feature, you can set up the address by entering a word or characters into the part in red. This will be the address to which posts can be sent.

user.xxxxxx@blogger.com



If you have checked the “Publish” box, any message that is sent to this address will automatically get published in the Blog. If the “Publish” box is unchecked, the message will be saved and you have to log in to your Blogger account to publish it. The email subject heading will appear as the Title of the Blog Post.

Although this is a useful feature for people on the go, it is also one that can be exploited. All it takes is for anyone to post an email to this address and whatever is in that email will appear in your Blog. It is therefore imperative that this address remain secret and confidential and anybody who is not authorized to post on your Blog should not know about it.

The moment a virus takes root in your computer, it can send malicious posts to the email addresses saved in your system's address book. If the above email address is one of them, you will see the post in your Blog. Since your Blog is legitimate, your readers and friends may read the post and click some of the links thinking that you would not put harmful material on your Blog. Once they do that, their computers may inadvertently be infected with the malware and they in turn have malicious links appear in their own blogs, and the cycle continues.

Preventive Steps to ensure Blog Security

1. Scan Computer and Protect against Threats

This sounds obvious and yet there are many who do not see the need to protect their systems against viral threats. Some may find the scanning time long (stretches to an hour for a full scan) or do not have a habit of scanning their systems. Others may find it costly to pay for an anti-virus software license. Always consider the alternative – the risk of losing all your data or having to reformat your hard drive – and you would probably agree that a little effort goes a long way to ensure a peace of mind.

If you don't have an updated antivirus software installed in your computer, make it a point to scan your computer using one of the free online virus scanners, such as:-

a. Trend Micro Housecall
b. BitDefender Online Virus Scanner
c. Kaspersky Online Scanner
d. F-Secure Online Virus Scanner
e. Symantec Security Check

If you Google “online scanners”, you may see many sites which claim to provide free online virus scans. While many are authentic, there could well be a few which are not. Check them out if you'd like and stick to the tried-and-tested sites for future scans.

You can also download and install the free Google Pack and include the Norton Security Scan which eliminates viruses and the Spyware Doctor which removes spywares, adwares, trojans and keyloggers.

Another free software that we highly recommend is AVG Anti-Virus software. Go for the Free Edition. For a complete protection, install as well ZoneAlarm Firewall if you are not using your MS Windows Defender. These softwares update their programs and definitions regularly and the reviews on them have been very positive.

2. Configure Mail-to-Blogger Address

If you see a need to post to your blog via email, or think that others know your mail-to-blogger address, go back to Settings -> Email and pick/change the address into something that nobody can easily guess. Since the intent of this function is to have posts published without having to log in to Blogger, ticking the “Publish” option makes sense. After saving the Settings, go back to your email software e.g., Outlook Express, Eudora. Remove that mail-to-blogger address from the address book. By making no mention of it anywhere, even if the virus sends out mail to all the addresses in the address book, nothing will be sent to your Blog.

3. Create different email and login addresses

Out of convenience, many people stick to one name for all their logins, emails and signatures. For example, they may have these:-

blog name: myname.blogspot.com
login name: myname@gmail.com
email address given to readers: myname@gmail.com
user: myname



If people are bent on hacking your Blog, it is easy for them to figure out what your login name is and use programs to crack your password. When you create your next blog, consider assigning different names or not using your actual name:-

blog name: blogname.blogspot.com
login name: notmyname@gmail.com
email address given to readers: anothername@gmail.com
user: screenname



4. Set browser security

In Internet Explorer -> Tools -> Internet Options, set the Security level for Internet zone to Medium-High or High. Also, in the later versions, you can turn on the Automatic Website Checking feature in the Phishing Filter settings.

If you are using Firefox, go to Tools -> Add-ons and click the “Get Extensions” link. Look for a popular extension called “NoScript”. What it does is to block JavaScripts and executable files and only allows those that you trust. It makes surfing the net a lot safer, and lessens the chance of unintentionally running malicious scripts.

5. Use third party scripts with care

JavaScripts make our websites dynamic and vibrant, but malicious scripts can cause a great deal of harm. In our eagerness to place nice-looking widgets and interactivity into our sites, we sometimes overlook the fact that third party service providers are not always trustworthy. Some domains last a few days, just enough for the hijacker to place downloadable widget scripts on the sites and to back out of the domain purchase after the cooling-off period. Blogs can also list harmful scripts, some of them blindly copied from other sites while others intentionally created to trick readers.

For instance, you may come across an application that you like and are given a code to place into your template. This code typically contains a link to a file ending with .js extension. When your Blog page is loaded, this script is retrieved from the site where the file is stored and it runs in the background. Some prudent Blog owners do take the trouble to go through the script language and ascertain that there is nothing wrong with it. However, because the file is hosted in that provider's server, if they should decide to change it later and throw in something extra, you would have unknowingly introduced that into your Blog.

For the same reason, we have cautioned readers against downloading ready-made and customized templates from unknown or untested sources. Since not all of us are technical experts, we may not notice an undesirable script hidden somewhere in the template. Hence, for our guides such as the three columns template guides, we prefer to show you how to DIY and customize your own template. In this way, you know what goes into it and can easily reverse the change in future.

6. Watch what we say or write

We thought we should add this. Many of these people either do it for the challenge or out of spite. Just as wearing skimpy clothes invites unnecessary attention and opening our door invites thieves, words and actions can give hackers the excuse to compromise your site. Observe basic courtesy and net etiquette. Be modest about your site. Every site can be the target of hijacks, including ours; no site is invulnerable.

What to do if Blog is hacked?

Despite all the security and preventive steps, if the day should come when the Blog contents disappear, the first thing to do is to scan the computer for viruses and malware. Do not login to your email or other accounts since this might open up more doors for the virus. Once the system is completely scanned and rendered safe, you may login to your Dashboard and view the Settings. Take note of the information that has been altered.

It is also possible that you are unable to login because the password has been changed, or that the Blog and Blog Posts are deleted. Write to the Blogger Support Team using another email account. Give them as much details as possible and allow them time to investigate the cause. Since Google servers would have backed up our data, it should be possible for them to reinstate your Blog upon proof of ownership.

Where the contents cannot be entirely retrieved, you may have to re-create the Blog. In moments like this, you would appreciate the importance of keeping backups of the template source codes and saving copies of the articles you have written.

Labels:

Hyperlinks and Image Links

(Note: Search the bold words in this post using google search box and find some interesting to your blog or site)
In this article, we shall address the common queries on how to configure links such that they open in a new window when clicked, the HTML code for visitors to link to your blog, the various hyperlink HTML tags and attributes, etc.

A hypertext link or text link is a piece of text which when clicked will bring you to a section of a webpage, another webpage or an electronic document. If it is an icon or image that can be clicked, it is called a hypergraphic link or image link. For simplicity, both can be referred to as hyperlinks or links.

Text Links

To create a hypertext or text link, the HTML code is this:-(ADD < and > before and after the following )

a href="URL" target="_blank" title="TITLE">Text
Text

Allow me to explain:-

1. In HTML, the (anchor) tag is used to create an anchor to link from. It should always be closed with the tag.

2. HREF is an acronym for Hypertext REFerence and specifies the page to link to or the place that you want your readers to be taken to. This place that we are talking about can be a webpage, image, sound file, video file, or document. Replace URL in the above code with the location of the webpage, file or document. If it is anything other than a webpage, you will have to upload it onto a server and obtain the URL of that uploaded file.

3. You can read about using free hosts like Google Page Creator and Google Groups to upload your files. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the file, take note of the URL of the file and insert that into the above code.

4. The target attribute tells the browser to open the link in a new browser window or new tab. If you want the readers to view the link in the same browser window, remove target="_blank" from the code.

5. The title attribute can be used for any page element, e.g. links, tables and images. Give your link a TITLE. In most browsers, when you hover your mouse over the link, the title will pop up. It is useful to insert this title as it is believed that search engine spiders read these words.

6. Text shown between the open and close of the anchor tag is what readers will see as the hyperlink. You can insert any character or words into the Text. In normal blog settings, these will either be underlined, or have a different color from the main text so that people can tell that they are clickable links.

To see how it is put together, this code:-(ADD < and > before and after the following )

a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank" title="Quotes for Blogs">Famous Motivational and Inspirational Quotes


will give you this line:-

Famous Motivational and Inspirational Quotes

Hover your mouse over the link to see the title. Clicking it will open the page in a new browser window or new tab. If you are interested to do something like the scrolling text in the header of this Famous Quotes blog, you may refer to the article Scrolling Text - Marquee HTML Code.

Link to Section

If you have a long article, you may want to allow people to 'jump' to specific sections of the page so that they need not scroll a lot to locate the section they want. It can be done by using the anchor tag with name attributes.

This is best explained through an example. I have inserted this tag in the later part of this article:-(ADD < and > before and after the following )

a name="demo">Email Links
Email Links

The name within the code need not be called “demo”. You can call it anything you want - “top”, “bottom”, “label”, whatever.

Next, I create a hyperlink for you to click to go straight to that section.

The HTML code for the hyperlink is this:-(ADD < and > before and after the following )

a href="URL#demo">Click here to go to Email Links
Click here to go to Email Links

You can type whatever text you want within the above anchor tag. The URL is the URL of your post. To obtain this URL, you will have to save your post and refresh your page. With the URL, go back to yur post to edit it by inserting the URL of your post. Using the above code, this is what you will see and if you click it, you will jump to that section.

Click here to go to Email Links

To give you another example, I shall now use the simple “top” and “bottom” tags which you can use for your Blog. Before you click anything, here are the HTML codes:-

a name="top">Click here to go to bottom
Click here to go to bottom

a name="bottom">Click here to go to top
Click here to go to top

You can now click this to go to the bottom of this page and click that link again to come back to this segment.

Click here to go to bottom

Email Links

If you would like to have a link for people to click and send you an email, you can use the following code:-

a href="mailto:EMAIL ADDRESS">Email Author
Email Author

Your EMAIL ADDRESS will have to be inserted into the code. This will open up the reader's Outlook Express or other default email software with your email address automatically inserted as the addressee. However, if the reader is using Gmail, Yahoo mail, Hotmail or other web-based email, he will have to log in to his account and type in your email address.

How to insert text link HTML code

You can insert the HTML code either in your posts or through a Page Element. The quick method of inserting a hyperlink is through the Blogger inbuilt tool. Look for an icon that looks like this shown in the picture below. Block the text that you want to create a link from and click that icon. Type in the URL that you want to link to and it is done.

Image Touched Up By www.pikifx.com

If you want this link to open in a new window and have a title, manually type in the title and target attributes. Check that you are in the “Edit HTML” mode and not “Compose” mode when you insert the attributes.

Image Touched Up By www.pikifx.com

Should you want the link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

If you have a number of links that you want to put on your sidebar, you may also choose “Link List” when you “Add a Page Element”. Note however that you will not be able to insert the other attributes. I shall cover in a separate article the tweaks that can be done to the template to change the attributes to the link list.

Labels: ,

Alert Message and Dialog Box

You can display an alert message box to give a special announcement, provide information, or warn the readers before they view the full contents of your site. The pop up box will contain your message and have an “OK” button for viewers to proceed, or a prompt or cancel button to redirect readers to another site. We can further customize our Blog by asking for the reader's name and inserting this input automatically into a welcome message. This tutorial will show you how the JavaScript for these alert and dialog boxes can be inserted into your Blog.

Do note that because JavaScript programs run the moment the page is loaded, many users may, for security measures, set their browsers to disable JavaScripts. Also, too many of these scripts may make your page slow to load. Insert this only if you think it appropriate or useful. Since these are system dialog windows, they may look different in different browsers and operating systems.

Alert Box with OK button

You can have a serious message for sites with adult contents:-

Image Touched Up By www.pikifx.com

Or a light-hearted humorous message just for the fun of it:-

Image Touched Up By www.pikifx.com

To create an alert message box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. Paste the code shown below:-






Substitute the words in red with the message that you want to have displayed when users view your Blog. The words in green are the alternative text which will be displayed if the users have turned off their JavaScript functions.

Alert Box with Confirmation button

Although free speech is the order for the day, as authors of Blogs, we should be sensitive to the ethics and morality concerns of the people all over the world. If the Blog contains contents that are explicit or unsuitable for a select group of people, give the readers a choice not to proceed to read your Blog. The JavaScript for this alert box shows two buttons – “OK” and “Cancel” – which the readers can select. If their option is to “Cancel”, they will be redirected to a safe site. For this example, we have used Google's site as the safe landing page.

Image Touched Up By www.pikifx.com

To insert the alert dialog box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. Paste the code shown below:-





Your message appears in the red portion. Enter your Blog URL in the blue colored part of the code. This is where your visitors will go to if they click “OK”. In the orange part, enter the URL of the place to redirect your visitors to should they click “Cancel”.

Alert Box with Prompt field

Another type of dialog box prompts the user to enter some information. For instance, the prompt box can ask the reader for his name and use that to customize the web page. Be reminded that many browsers are configured to disable scripts that ask for information. Have fun customizing your Blog but don't make this a key aspect of the contents. For example, if you have a story that keeps mentioning the name of the reader, the parts where the name should be will appear “null”.

In Template -> Page Elements -> Add a Page Element we add a HTML/JavaScript and paste the following code:-





The question can be changed. The user will be prompted to enter something in the dialog box. He can of course leave it blank and press “OK” or click “Cancel”.

Image Touched Up By www.pikifx.com

Below this JavaScript, in your main body, add another HTML/JavaScript page element. This time, you can type in this:-

Welcome back ! Feel free to look around. If you like what you read, mention us in your post or link to this site. Hope to see you again



This is what will appear in your Blog, based on the input that the reader keys in.

Image Touched Up By www.pikifx.com

Change the wordings to suit you and wherever you want the reader's name mentioned, add the script (shown in red). Try to phrase the wordings such that if the user enters nothing and clicks “OK”, the blank space is not obvious. A prompt dialog box like this adds a personal touch to your Blog.

Labels: ,

AdSense Code in Blogger Post Body

One of the known tips for improving the performance of your Google AdSense ads is knowing where to place the ads. In this guide, we shall discuss the modification you can make to your Blog template to have your Google AdSense ads appear between your post title and post body, or between your post body and post footer. Also, we shall have the AdSense ads appear on every individual post.

Choosing a best placement for your AdSense ads will attract more attention; attention leads to clicks; and clicks bring you AdSense revenue. Easier said. While people may have theories on where the ideal AdSense spot ought to be, there is really no standard answer because it depends very much on your Blog's layout, contents, theme, etc. If you have been following the changes made to our Blog, you would agree that we are no guru at this. We had merely placed the ads where they fit aesthetically and not where they will get the most attention. Nevertheless, if you would accept our two cents' worth of opinion, try to put yourself in the minds of your readers. Ask questions like why readers visit your Blog, which section of the Blog are they most interested in, and whether placing an ad at a particular area will distract, annoy or please them.

Many people believe that having AdSense ads just before or after the Blog posts will best optimize their performance. For the purposes of this article and to give you an idea how it would look, we have inserted the AdSense code into our template to have the ads appear immediately below the article and before the post footer. If you think you would like to do the same for your Blog, the following are the steps you should take.

Update: A section on Using Blogger Feature to insert the AdSense Ads after every post.

Using Blogger Feature

If you merely want an Ad to appear after every post or every few posts, use this Google feature instead. Go to Template -> Page Elements and you see in your layout the heading “Blog Posts”. Click the “Edit” link at the bottom right corner. You will see this screen.

Image Touched Up By www.pikifx.com

We assume you have a Google AdSense account. If you don't, you can create one using the same login through your Google account. You will be assigned a Publisher identity number which shall appear in all your AdSense codes.

Tick the “Show Ads Between Posts.” You can select whether to show ads after every post or after several posts. In accordance with AdSense TOC, a maximum of 3 Ads will be displayed. Choose the ad format and color scheme. Save the changes and refresh your Blog to see the Ads.

While using this Blogger feature is simple and easy, you may want more control over the position of the Ads. For example, you may want it between the title and posts rather than after the posts. The following guide will show you how you can do that.

More Ad locations

Log in to your Google AdSense account.

Image Touched Up By www.pikifx.com

Go to AdSense Setup -> Products and choose “AdSense for Content”.

Next, select “Ad unit” and follow their instructions on picking the size of ad, color combination, and so on, right till the end when they automatically generate a HTML code for you. Copy this code and paste it into Microsoft Notepad. (If you are a WinXP user, click the Start button at the bottom left corner of your screen. Under All Programs -> Accessories, you should see the MS Notepad icon.)

Image Touched Up By www.pikifx.com

Change the AdSense code

This heading may sound misleading. We are not at all altering the code but converting some of the characters to character entities. We have to parse the AdSense code so that it can be included into your Blog template. This is not against AdSense rules because after the code is inserted into the template, when you view the source code of the template, you should see the exact same AdSense code that Google has generated for you. Indeed, if it is anything different, it means that you have not parsed it correctly and should review the code again. Parsing the code essentially involves replacing the following HTML characters:-

< with <
> with >
" with "

Your final Google AdSense Code should look something like this:-

<script type="text/javascript"><!--
google_ad_client = "pub-0000000000000000";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as&amp;quot;;
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "000000";
google_color_text = "000000";
google_color_url = "000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



Insert code into template

Login to your Dashboard. Go to Template -> Edit HTML and click the box next to “Expand Widget Templates”.

Image Touched Up By www.pikifx.com

Block copy the entire HTML code for your site that you presently have and save it in a separate text file in MS Notepad. You can also click the "Download Template" link to backup the template. This is one of the two necessary steps whenever you want to change the template. The second step is to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Now search for post.body through your browser's search function (Ctrl+F for Firefox and IE). You should see these lines:-








If you want the AdSense ads to appear between the post title and post body, add the following code above the orange lines. If you want the AdSense ads to appear immediately after every individual post, add the following code below the orange lines. The code to add is:-


AdSense Code




The AdSense Code is the one you have amended above in MS Notepad. Do NOT save the template, but click the Preview button to see if you like the placement of the AdSense ads.

Do you want to have the AdSense code on the left of your text as shown in this screenshot?

Image Touched Up By www.pikifx.com

Choose the smallest AdSense format like 125x125. Insert the AdSense code here:-



AdSense Code








If you want the Ads on the right of the text, like this:-

Image Touched Up By www.pikifx.com

Insert the code as follows:-



AdSense Code








Set the AdSense ad margins

If your AdSense ads are too close to the edge, you may set a margin in the style tag. To give you an idea how wide the margin should be, you can see the sample in our other Business Fables blog where the left margin is set to 30px. The code used was:-


AdSense Code




Should you want to align the AdSense ad to your text, you can specify a margin or padding around the entire AdSense code. The code you can use is:-


AdSense Code




The first number 5px is for the top margin, 10px is for the right margin, 15px for the bottom margin, and 20px for the left margin. You should of course change these values to suit your template.

Preview the template and if you are satisfied, save the template and refresh your Blog to see the new positions of your AdSense ads.

Labels: , ,

DIFFERENCE - HTML and XHTML

When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.

XML, HTML and XHTML

We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-





The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?

Basic Rules of XHTML

1. Codes to be in lowercase

Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-

Tips for New Bloggers



but this:-

Tips for New Bloggers



If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “Tips for New Bloggers”, can be in the uppercase, lowercase, or mixed case.

2. Attribute values to be in quotation marks

All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-



Text Link







Instead, they should be written as such:-





3. Container elements must have closing tags

This is not correct:-

A paragraph.



In XHTML, there must be a closing tag with a forward slash (/) at the end:-

A paragraph.





Examples of the many non-empty elements that have opening and corresponding closing tags are:-

    ...

  • ...

  • ...

    ...


    ...

    ...
    ...

    ...

    ...



    4. Standalone elements to be closed

    Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-













    Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-













    The second way is to add a corresponding closing tag like this:-


    ...

    ...
    ...
    ...

    ...
    ...
    ...



    5. Elements to be properly nested

    This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-

    ...




    It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-

    ...




    6. Document to have only one root element

    In the XHTML document, you will see that except for the document type declaration, all the codes are nested between and . This is the root element and all other elements or sub elements are in between. The document structure will look like this:-


    ...
    ...




    7. Attribute minimization is not allowed

    In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our Add Text Box and Textarea article, the textarea code is not this:-





    but this:-





    XHTML Character Entities

    Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.

    " "
    & &
    < <
    > >


    The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.