Validating HTML via File Upload (http://validator.w3.org)
For this example we will validate the DNN-Blue skin that comes as standard with DotNetNuke.
Select the HTML file for the DNN-Blue skin and upload it to the validator.
If you upload the HTML file of the skin, you will find that it displays 13 errors, and most of these errors are related to:
No Character Encoding Found! Falling back to UTF-8
These errors occur because the validator is expecting to read a complete html page, the skin is just a section of our page, so for these testing purposes we will add some code to the skin so that the validator can read the skin as a complete html page.
No DOCTYPE found! Attempting validation with XHTML 1.0 Transitional.
In order to do this, we will view a dotnetnuke page and copy some of the source code and paste it into our document.
All we need to do is add these tags to the top of our skin, which are used in the default version of a dotnetnuke page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
and these tags to the end of the skin:
Validating the skin
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"/>
You can view the edits to the DNN-blue skin in the download section at the end of this tutorial.
If we now upload this skin, the results provide 1 error:
1. Error Line 15 column 28: there is no attribute "RUNAT".
<TD id="ControlPanel" runat="server" class="contentpane" valign="top" align="cen
This is the code for inserting modules into the page. The “runat server” part will not appear within the code when we actually use the skin because DotNetNuke uses that code to place a content pane in the table cell, so we do not need to worry about that error.
If you view the coding best practices article, you will see I recommend that you implement writing code to XHTML standards to get into good practices, in the event that you may wish to create pure CSS layout skins in the future.
If you wish to test your skin to a higher validation standard, all you need to do is change the doc type code that we inserted to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
This version of the DNN Blue skin is also included in the download section at the end of this tutorial.
If we upload this version of the skin, you will see that there are 71 Validation errors. – Quite a big difference.
The main problem that is causing these errors is that the tags in XHTML code needs to be written in lowercase. To fix these problems, you can do this very quickly within Visual Web Developer by going to the Edit menu, and selecting Format Document.
If you upload this version to the validator, you will see that there are now just 5 errors.
The explanation of this error provided by VWD is:
- The first is caused by the “runat” attribute, which we do not need to be concerned about.
- The rest of the errors are caused by the ‘nowrap’ attribute within the tables.
Attribute 'nowrap' is considered outdated. A newer construct is recommended.
This is because the XHTML recommendation is that you completely separate the content from the layout and work with CSS layouts, therefore you would specify these ‘outdated’ features within the actual CSS.
This is nothing to worry about for your table designs, the main feature we are discussing here is to ensure that your code is well formed and error free.
NOTE: Remember, do not include the additional code that we added to validate your skin within your actual skin file. If you install this version to DotNetNuke it will cause errors.