CSS Experiences and Resources

Ah, CSS, the supposed yin to HTML yang. I vaguely remember CSS, although I was always confused what exactly “cascading” style sheets meant. I always assumed it meant that outer tag properties apply to nested tags. Well, I was half right. It also refers to the way styles that apply to the same tags are given priority. In other words, the priorities order of inline, internal page, external, and browser styles. Luckily I have done it right by accident in the past on a website I made for my wedding.

The “meat” of CSS isn't as difficult as I thought it was. Learning the difference between class, id, tag specific, generic, and attribute specific styles was much easier this time around compared to the last few times I tried to learn. The only thing I found somewhat confusing was pseudo-classes and pseudo-element. Whoever came up with these names could have come up with something better. I also couldn't find the difference between pseudo-elements and pseudo-classes anywhere. Does anyone know?

I played with CSS for a good 2 hours after going through the W3CSchool CSS tutorial. I have a feeling the only real way to “learn” CSS is to play around with it and become familiar with the common styles used. I have already made some style changes in the blog template such as content width and I added a spiffy navigation bar. I'll be playing with the CSS for this blog the next couple of weeks so don't be surprised if it looks different each time you come here :)

That's all I have for today. Next week I will start going sharing my experiences with JavaScript. I plan to break it into two parts: Part 1 for generic client side scripting and basic JavaScript and Part 2 for intermediate/advanced JavaScript.

Resources:

· W3Schools CSS Tutorial

· Wikipedia CSS Article

· CSS Specification

· Forum focused on CSS

· CSS Examples

· CSS Reference

Howto: IIS web server on home computer

There are two software suites available to quickly setup a webserver on any pc. First one is IIS for Windows and the second is Apache for, well, practically any system. For this article, I will cover installing IIS in Windows.

IIS stands for “Internet Information Services”, which is Microsoft's implementation of a basic home web server. Just follow the following steps depending on your operating system and it you should have a webserver up and running in no time!

For Windows Vista:

1. Open up the Control Panel (Start->Control Panel)

2. Double Click Programs

3. Under Installed Programs, Click “Turn on or off Windows software”

4. A windows security window will pop up. Click Allow.

5. Look for an entry called “Internet Information Services”. Click the box next to it. You can also select/unselect sub-features if you like. The “World Wide Web” sub-feature is required for this to work.

6. Click OK.

7. Wait for the progress dialog to complete.

8. Open up a web browser and type http://localhost/ . An IIS welcome page should appear.

Source: http://learn.iis.net/page.aspx/28/installing-iis-70-on-windows-vista/

For Windows XP:

1. Go to the Control Panel ( Start->Settings->Control Panel ).

2. Double click Administrative Tools.

3. Click on Add/Remove Windows Components.

4. Look for an entry called “Internet Information Services”. Click the box next to it. You can also select/unselect sub-features if you like. The “World Wide Web” sub-feature is required for this to work.

5. Click Next.

6. Wait for IIS to install.

7. Click Finish.

9. Open up a web browser and type http://localhost/ . An IIS welcome page should appear.

Source: http://www.learnthat.com/courses/computer/windowsxp/iis/

After you have verified IIS is installed and running, look for the inetpub folder in the root directory (normally C:/inetpub ). Open up the wwwroot folder. This is the root folder for IIS webpages. Add any pages you want here.

Congratulations, you have setup your first webserver!

XHTML Validators Review, Part 2

Validome Online Validator

The Validome online validator is available at http://www.validome.org/

Licensing

The Validome validator is free to use for personal and professional use. An XML service is available for external applications to use the validator but use for commercial software is restricted.

Documentation

A simple help page is available at http://www.validome.org/lang/en/html/help . A resources page is available with listings of valid tags for several different specifications.

Features

The Validome validator provides auto-detect for doctype and character sets. It allows document checking via URL and file upload, however does not provide direct input like the W3C validator. It allows markup cleanup via HTML Tidy and you can view original markup code in the validation results page. Like the W3C validator, it does not provide batch validation.

Test

The first file I tested did not have a DOCTYPE, and the validator refused to validate with a default DOCTYPE. Once I manually set the DOCTYPE in the validator options the validator worked fine with decent cleanup. However, for some reason it considered the xmlns and xml:lang attributes invalid so every file came back as invalid. I thought I was going crazy but then I checked out the W3 website and it's examples for strict XHTML files included the xmlns and xml:lang attributes. Quite strange for an XHTML validator to have such a common attribute flagged as invalid. The validator's cleanup markup option didn't work – it refused to correct any of the files I checked.

Knee Jerk Conclusion – Junk. It has an inferior feature set compared to the W3C validator, it's cleanup option didn't work, and the auto-detect for the doctype functioned poorly.

WDG online validator

The WDG online validator is available at http://htmlhelp.com/tools/validator/ .

Licensing

This validator is available only for personal/non-commercial use, according to the creative commons license.

Documentation

The WDG group provides information about common validation problems, tips, a comparison to the W3C online validator, and a list of character encodings supported.

Features

When looking at the options I assumed the WDG validator was actually an generic HTML validator because it lacked an option to specify DOCTYPE. I realized later that an auto-detect is built into the validator (more on this in the testing section). However, it does provide document checking by URL, upload, and direct input. It also provides checking for entire websites and a batch mode (for online web pages). You can also show the original markup in the results page.

Testing

This validator works well enough to detect all tag errors (such as nesting mistakes, unclosed tags, etc). However, it didn't provide warnings for things such as no specified xml language, missing charset, and no namespace. It also displayed multiple errors for simple errors such as unclosed tags. The validator was confused for the xmlns and xml:lang attributes for the file without a specificed DOCTYPE (which it assumed was transitional).

Knee-Jerk Conclusion – Decent alternative to the W3C validator for single static pages. However, the batch checking for online web pages and websites is awesome (assuming it works, I didn't test this) for currently deployed sites.

SimpleTidy

SimpleTidy is a free application for download at http://www.tsnetsoft.com/software.htm

Licensing

Available for personal/non-commercial use. The license is available at http://www.tsnetsoft.com/license.htm .There are also commercial versions available at a cost.

Documentation

No online documentation is available, only contact information for support. Strangely enough, there is no built in help in the application either.

Features

SimpleTidy is, well, simple. It gives options to cleanup single files or run a batch cleanup on a folder (with an option for subfolders). You can view errors for single files after cleanup in the User Interface.

Testing

Since this application is focused on cleanup rather than validation it only displays errors when cleanup has problems. It does not state the validation errors in the original documents. Also, there is no way for specifying the DOCTYPE to use for the cleanup. I would imagine these features are avaiable in the paid versions of the application. Otherwise, the cleanup worked correctly for the transitional DOCTYPE.

Knee-Jerk Conclusion – Don't use if you want to use the strict DOCTYPE. It might be worth a look at the paid versions of the application.

Conclusion

The W3C online validator was far and away the best online validator for single, static web pages. Avoid the Validome validator and use the WDG validator for deployed sites. If you choose to use one of the offline validators, use SimpleTidy if you want basic cleanup functionality. Otherwise, use HTMLTidy for more advanced options (some configuration required).

XHTML Validators Review, Part 1

OK, OK, I know I promised a post including reviews for all 5 XHTML validators but I realized pretty quickly that the post would be extremely long if I included all 5 so I broke it into 2 parts. The first post today will include a review of the W3C online validator and the HTML Tidy application.

W3C Markup Validation Service

The W3C markup Validation service is an online validator available on the W3C website.

Licensing

From what I can tell, this service is free to use for any web page. However, using a validated icon on a web page requires the page be previously validated by this service. Information about the icon licensing can be found on the validator help page.

Documentation

The validator has supporting User Guide and FAQ/help pages.

Features

The W3C validator can handle 3 different ways of inputting HTML documents for validation. You can check an online document via URI, upload a file, or directly enter a page markup in the service page. However, this service does not provide batch validation. Other options include Automatic character encoding and document type detection, markup cleanup (via HTML Tidy), and validation for error pages.

Test

The W3C validator did rather well in validating the test files. It detected all errors (or at least, gave warnings) for each test file. The markup correction was correct each time and allows the user to view the source right about the corrected markup. There were some annoyances though. Every time the validator ran, it would the file name field. While this wasn't that big of a deal, it was rather confusing to have a “Revalidate” button that didn't automatically re-validate the file previously validated. Also, the tidy option reset every time no code was cleaned up in the previous validation check. The validator also gave multiple error messages for each error, which more of less made the error messages useless without the built in markup cleanup. Other things to note is the validator assumes the DOCTYPE is transitional if you don't specify or it can't detect the type, so make sure to specify if you want your documents validated using the frameset or strict DOCTYPES.

Knee Jerk Conclusion – Use the W3C validator for single, static web pages. Otherwise, find something that has a batch execution option.

HTML Tidy

HTML Tidy isn't per se an XHTML validator. Rather, it is a library/command prompt application that cleans up XHTML markup of files. It can be found at http://tidy.sourceforge.net/.

Licensing

HTML Tidy is an open source project so it's free to use on both personal and commercial pages. The license is listed on the project website.

Documentation

HTML Tidy has plenty of documentation including an overview by Dave Raggett, a quick reference guide, user manual, an API, and a FAQ.

Features

It lacks a built in interface but there is one user interface available. Also, if you just run the command prompt version on a file, all results will be output to the command prompt which isn't quite useful. Luckily there are plenty of run options available such as specifying doctype, outputting errors and warnings to another file, and automatically updating the HTML file's contents to the cleaned up code. Tidy can also be run with a configuration file with custom tailored settings.

Testing

I decided not to use available user interface for the tests. This made it somewhat difficult to run the tests immediately, but after checking out the documentation I setup a batch file to run HTML Tidy on all of the test files at once. It assumed transitional DOCTYPE also, so I ran tidy with the DOCTYPE setting set a strict. The cleanup was the same as the W3C validator (as expected since HTML tidy is used for the W3C validator). I wasn't quite sure if the files were validated with the transitional or strict DOCTYPE because the files DOCTYPE in the files stayed as strict but the error output files said “Info: Document content looks like XHTML 1.0 Transitional”.

Knee Jerk Conclusion – I would recommend using this for web development projects with custom configuration in a build script rather than for manually for single pages.

Well thats it for today, tune in tomorrow for part 2, which will include reviews of the Validone, WDG, and SimpleTidy validators and a final comparison between all 5.

XTHML Experiences and Resources

Prior to studying XHTML this week I had a vague idea of what XHTML is. I knew it was some combination of HTML and XML, but besides that I knew nothing. Strangely, XHTML was never covered in my high school class, probably because we only used Dreamweaver.

Once I started learning the differences between XHTML and HTML I became very interested in using it rather than standard HTML. I have run into standardization problems in college and work (primarily serialization) projects. So when I read about the three different DTD's I was all for the strict version. At first I had a difficult time finding differences between the transitional and strict DTDS besides the generic description of “Use the transitional DOCTYPE when you want to still use HTML's presentational features” for transitional and “Use the strict DOCTYPE when you want really clean markup, free of presentational clutter ”. So, I Googled it of course. I found quite a few descriptions of what exactly the above statements mean-

• Discussion in a web forum
• Detailed list of differences
• strict vs transitional with XTHML overview

Once I started changing my test site pages to XHTML I started wondering how to make sure I was actually writing up valid XHTML code. That's when I started looking up XHTML validators. Luckily, there is a plethora of validators available for free. I tried a few,fixed some errors, and marveled at the perfection that is my XHTML code...well, not really, that's pretty pathetic if I had, but I digress. This leads me into my product review for Monday. I will be covering the following XHTML validators:

• W3 online validator
• HTML Tidy program validator
• Validone online validator
• WDG online validator
• SimpleTidy pogram validator

Tune in Monday for my pros/cons and comparison of the 5 validators, and throughout the week for my new posts, including a howto on Wednesday and my CSS experiences on Thursday.

Resources:

• W3Schools XHTML tutorial
• Wikipedia article
• General XHTML information
• XHTML workgroup information
• Decent Reference for XHTML