XHTML/CSS Part five - Validation
By now, you should be writing pages and you have probably already learned how easy it is to make mistakes. Even the most experienced webmasters still make typo's! So here we will look at how we write pages and how we can check them.
First of all, I must warn you to stay clear of so-called HTML editors. The "What you see is what you get" types just don't give good code. They should really be called "What you see on your computer isn't what I see on my computer." Furthermore, they can be described as "What you see is all you get" because you cannot change anything. You should also avoid word processors and even a few graphics programs that claim to be able to save in HTML. Why? Because they write bloated code which repeats over and over again, giving you enormous file sizes. Also the code is fixed to one version of HTML, often an old version at that, and doesn't give you complete styling options. Worse still, many write code for Microsoft's Internet Explorer only which is a totally non-standard browser.
The only tool you need is a common text editor!
Internet Explorer is quite amazing in many ways. It has an uncanny ability to display pages no matter how badly written the code may be. Therefore, you must try your code in another browser as well. The browsers that are absolutely necessary for testing are Internet Explorer version 5 which ships with Windows98, Mozilla Firefox and at least one other standards compliant browser. Optionally, you could also test in Opera. The reasons are as follows. IE5 lacks some of the abilities found in later versions but is still widely used. Mozilla Firefox is known to display fonts slightly smaller than other browsers.
You should also use both Windows and a Linux system to ensure that your pages display correctly. Linux can be on a "LiveCD" if you do not wish to install it permanently.
Just because a browser shows your page, it doesn't mean that your code is technically correct! We have to check it. The equivalent of the 'Supreme Court' on the Internet is the World Wide Web Consortium. (http://www.w3c.org) Their validator is the ultimate resource for checking pages and you even get to display their famous validated images if your page passes. Actually there are two validators - one for the HTML and one for the CSS. Here are the links:
http://jigsaw.w3.org/css-validator/
Jumping to the Internet each time isn't always convenient so there is an application called 'Tidy' that will check your pages on your own computer whenever you wish. Get the details here:
http://tidy.sourceforge.net and follow the links to the binaries for your operating system.
At the time of writing this, there were several versions of Tidy for Windows and unfortunately the latest version didn't work. Also, the zips didn't include any instructions! I found an older package called "optimize.zip" that does contain the explainations for the configuration files. There was a version called "gui_tidy_windows.zip" that seems to be an "optimize" copy with a different layout, but you will wish that you had a bigger monitor or a horizontal scroll wheel on your mouse for both of these programs! It amazes me how a product which works perfectly has to be continuously modified in updated versions until it reaches the state of unworkability!
The version that I use is called "TidyGUI version 1.1.5" but I don't know if it is still available. You will have to search for it. So, you may have to download and try several packages, but each is quite small!
If enough people have problems obtaining a working version of Tidy, then I'll consider putting a working version for download on this site.
The validation process in tidyGUI.exe is not very obvious, so I'll explain it a little here. (The filenames are different in each version and the button names and layout vary, but this will give you the general idea.) First of all, you must choose the file to validate. Then click on "Tidy!". It will almost always report "no warning or errors were found" because it has automatically fixed any errors already! If you then click on "Show output", you will see the Tidy version of the file which you can compare with the original. It will often be different. Only when you save the file from Tidy will your original file be written over. You can check this yourself by purposely leaving off a closing tag in a paragraph for example. Tidy will report "no warning or errors were found" but will have inserted the missing tag. Tidy sometimes does things that you didn't want, or didn't expect, so save your file under a new name each time. Tidy has quite a lot of configuration options which you will have to set or unset according to your own requirements. Only when you are sure that Tidy works as you want it to, can you save files under the original names.
How good is Tidy? Pretty damn good! If Tidy passes your page, then you can be almost certain that the w3c validator will also pass it.
Tidy will also change the Doctype automatically. Although we started off this series with a 'Strict' form of XHTML, we will find that Tidy will often change it to 'Transitional'. The reasons are not necessarily obvious even to an experienced writer, but it is a correct change. The specifications of both forms of XHTML, and indeed all versions of HTML, can also be found on the www.w3.org site.
Tidy and the validation services are absolutely free and available to all. There is absolutely no excuse for producing a badly written webpage. If you take this path, you will be far ahead of the "What you see is what you get" crowd.
One more thing to understand is a strange effect of using FTP to put the pages on a server. The file size as seen on your computer can suddenly becomes less after putting it on the server. What happened? Did the file get corrupted? No, it is simply that your computer running a Windows operating system uses both a carriage return and a linefeed, whereas the server, most likely running Linux or BSD, uses just a carriage return at the end of each line. We therefore see a loss of bytes that is equal to the number of lines in your file. This is quite normal, but you can always revalidate direct from the server if you are not convinced.
For many beginners, a working example is always preferable. So the next part in this series is just that. It is a typical layout of a web page that you can use as a template for your own designs. I have coloured it so that you can see where each div is easily and also find it in the source code according to colour. If you study the source code, then everything should become more understandable. Pay special attention to where each div closes. Even if you happen to be colour blind, the source is commented for your better understanding. Yes! You'll find out how to use comments!
As an exercise, try making the Header in the next page deeper. Figure out what you have to do to move all the other divs downwards.