Using Tidy In Line Or Locally

The purpose of this tutorial is to present a clear and convincing example of how to use a combination of modern tools at our disposal in our efforts to build web pages which are W3C and WAI compliant, while not having to experience a steep learning curve Microsoft Word Tutorial.

About Tidy

Take a reasonably well formed web page and Tidy will work wonders; a web page which is filled with proprietary code and Tidy may do the unexpected; and saving an existing page is always preferable, unless you can undo the undesirable changes. If you are fully prepared to begin the process, knowing that you only have to fear, fear itself, let us begin with a download of Firefox with tidy in line (built in).

A very special thank you to Dave Raggett, whose initial version of Tidy, led to the versions as we know and use today.

Step One: Download Options

The most comprehensive library of Tidy builds are found at SorceForge.Tidy comes in different flavors like for PHP, Java and so forth. We selected the HTML version for this demonstration which allows for a local install and when you are off line to use this tool for pages stored on your local computer.

Although as we will explain later, other versions of Tidy allow for on line validation and browser in line use of Tidy.

After your download of Tidy for use on your local computer, you can browse for a web page you may wish to inspect for correctness. Select a local HTML file, activate the tidy button and a list of errors and warnings is then displayed. Show output will be the cleaned up code by Tidy, which may possibly not be all errors and warnings corrected.

In our configuration settings for the local Tidy, we elected to omit the border for graphics since in our XHTML coding, similar elements are controlled by an external CSS. An example is taken from this web page prior to publication or validation. The revised code the border of zero is omitted, since the default is zero anyway this would have resulted in code bloat. Also a forward slash is placed before the close of the img src, which is required in XHTML.

Since most users will find that they make repetitive errors, by having a hard copy of the original and revised code, these documents can be compared and errors can be avoided in future coding efforts. Tidy has helped us learn good coding techniques.

On line Tidy Validations-Cut and Paste and Other Options Too!

The flexibility of using tidy on line is either by correcting a web page which we already have on line, a cut and paste from what has been created by hand from almost any source, or by uploading a web page file which is on our local computer.

I will not get into all of the particulars except to note that output can be either strict, loose or transitional by selecting clean, then the doc type or converted to another flavor or HTML like XHTML or XML along with being an output which is pretty printed. I love the option to include the line number for using my yellow marker on the original and revised output as a learning tool.

In line Tidy With A Browser

An easy download is that of Firefox with Tidy in line. Other options are also available like any compliant browser configured with Tidy as the HTML editor, but those options are beyond the scope of this tutorial. Once you have tried out a browser with tidy, perhaps you may wish to consider incorporating Tidy with a present browser in use. But for ease in determination of coding errors while on line or off line by selecting the file, then open file from your local computer and the Firefox browser provides everything you require for W3C and WAI validation.

Now that you have downloaded Firefox with Tidy in line and elected to show the icon and text, select a page on the Internet. We choose the Google home page and found no coding errors, but some warnings. Now let us take a look at what Tidy tells us.

We right clicked the bottom of our Firefox browser bar and the window to your left is shown. Selecting the page source, provides us with a quick glance as to what is in store as we attempt to render our web pages free of coding bloat, so far has been relatively painless and no steep learning curve to process a new found skill which with the help of Tidy will enable us to render compliant HTML coding of many flavors and help those who are less fortunate than ourselves, enjoy what we have created.

In the example from the page source of the page we viewed, there is no attempt to explain any of the warnings, but only use what is displayed to acquaint you with what you will find with you new found friend as a journey is begun.

In page source what you will find are the coding errors by line number. Remember the pretty print mentioned earlier in this tutorial? Now you know why I love it. Hard copy the original page being viewed and get out your yellow marker for a learning experience, which is not steep and gentle, dear reader.

When you have selected page source. The help section refers to line one and as you select other lines a help section for that line is also shown. Help is more than just the cause. Help includes solutions, examples and references to W3C and WAI and for the most part are very intuitive and easy to understand.