Learn HTML : Fixing errors in your template

So far we have learnt all the basic HTML tags that can be used to create templates for our survey.  One thing that we have not checked yet is to see if the HTML code we have written  will work with mrInterview. This article is all about the different ways you can validate your document and make sure that it will display correctly.

For a template to work with mrInterview it must be written with well-formed html and must be what is know as “XHTML compliant”. This means that we must always close an html tag if we have opened it or when using attributes make sure we put the values in speech marks. So now we know what we have to do , but how do we check our templates? If you are using mrStudio you have access to something called “HTML tidy” . HTML tidy , takes your template and automatically fixes up any issues it may have.  As well as fixing up issues you will find that HTML tidy will format your document differently to the way you had it. And for this reason , this is why i personally don’t like to use it. If i have my template set out in a certain way and i use HTML tidy on it, all my formatting will be gone.

So what do i use, well what i do is to rename my html document to a an XML document and then double click on it , the file will open up in your browser and should tell you where the issues are, so lets try it. Create a html document with the following code in it.

 
 
 
 
 

LOGO GOES HERE

Questions go here

Navigations buttons

Footer Information

and this code will produce

 

Now this looks ok, but lets rename the document to “Tables.xml” rather than “Tables.html” and then double click on the file. What you will see is the following,

So as you can see , your browser shows you where the error is and tries to explain what is wrong. And in this case we need speech marks around the number 2 for example

When we have made the change and saved it , we double click the file again and see what is wrong next,

This error is a little harder to understand , but if we look at our template we will see that we have not closed off one of the TD’s correctly for example.

 Footer Information

which should be

 Footer Information

So make the change, save the files and click on it again, and we get

Next we have to allow the activeX by right mouse clicking and allowing blocked content,

Then , when this is done we get

We know that our template is XHTML compliant now because if we click the + and – we can interact with  the page. How cool is that !!! so all we have to do is to rename our XML document back to an HTML document and start to put the next set of tags into it. The next set of tags are the mrInterview tags and over the next couple of weeks we will introduce you to them all.