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. 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. Mentioned earlier in this tutorial was repetitive errors, many of which you will master fixing with a little experience. Others may require a little more time to solve as you become acquainted with some new terminology and rationales as to why there is an error, which would possibly prohibit everyone from enjoying your web site building efforts. In line Tidy With A HTML Editor Some modern day HTML editors either have Tidy built into the editor or have the ability to add tidy as the default editor. The quick tools in one of our editors include apply source formatting, upgrade to style sheets and convert to XML, all changes can be easily revert to the original coding with an undo. The convert to style sheets is particularly useful for reducing code bloat, placing all of the style elements into an in line CSS, which can later be placed in an external CSS, which further reduces code bloat. The result of which is a lean, clean page of HTML which is much easier to make any additional corrections, if necessary by folk like myself who have very poor eye sight. Hopefully our dear readers will find in this tutorial ample examples and also reasons to use Tidy, either in line, locally or both. If you are presently using a HTML editor without Tidy, then by all means consider whether your editor will support the addition of Tidy as the default editor, which is certainly the case with the six editors I currently use. Which is to try and keep up with current technology and attempt to answer questions which may be directed my way. If your HTML editor does not support Tidy and you find through on line use of Tidy to check your HTML coding and find errors, then perhaps it is time to secure another editor. But if you use an on line editor consider also that the small cost of a local editor to use on your computer (usually under one hundred dollars) will result in significant time savings and add to the enjoyment of compliant page building which will do nothing short of revolutionizing the world wide web for we little people. Author: Robert D. Lancaster, 260707 copyright |
Home
