Friday 24 May 2013

Validation

As is specified in the brief, I took all the HTML and CSS documents I have made and put them through W3C's validation testing:


This site allows you to upload your HTML and CSS to it's servers where it reads every line of code and reports back any errors. You can then go back and fix the errors leaving you with a W3C certified correct page of HTML and CSS. This is immensely helpful and the CSS check even gives you a piece of code you can use to place a W3C certified badge at the bottom of your page. I ran the tests all in a row and fixed my pages accordingly so they comply to the guidelines.


Page 1:

Index.html:


Style.css:


This page was fairly simple. The issues I had applied to almost all the pages I tested. They were that I hadn't used "alt" values within my images which is bad for accessibility and I had mixed up my class's and id's. I got it the wrong way round and thought id's could be used as many times as you want but classes can only be used once. I simply had to go back through adding in "alt" values and swapping some of my id's for classes. One other thing was that some of the embed code vimeo gave me was a little off so I just had to tidy that up as well.

In the CSS it was only 2 warnings. The first was that one of the pseudo classes I had specified wasn't correct and so I had to change "::selection" to "::-webkit-selection" and also just delete some redundant padding on my footer.


Page 2:

Impact.html:


Page_2.css:


On the second page the issues were exactly the same as on the first. The missing "alt" tags, confused id's/classes and untidy iframe tags.


Page 3:

Animals.html:


Page_3.css:


This page was an absolute nightmare. I had used about 4 id's to specify each image of which there are about 13. I also hadn't put alt tags in any of my images. This took ages to fix going through by hand and replacing everything. My tables also (whilst not errors and merely warnings) were incorrect as well as I hadn't 2 columns in the first row for stylistic reasons. I added it anyway as it looked quite good in the end. along with this the CSS was a little messy too. Luckily that didn't take very long to fix it was just the HTML. 

Conclusion:

Doing this validation was a good thing. In the least it has helped me understand my code a little better and learn some very valuable lessons. I now know some professional techniques which I can apply and just how to understand the language a little more comprehensively. Luckily the first two pages didn't need much work at all. Needless to say I will definitely be adding alt tags to every image and getting my id's and classes the right way round for ever more.

No comments:

Post a Comment

Blog Archive