Useful Tools for validating HTML, CSS and Accessibility

Useful Tools for validating HTML, CSS and AccessibilityWho doesn’t know the situation when you release a website and within a short time you get complaints of users with browser X who say that xyz doesn’t work on the page.

These days there are many browsers out there and of course you can test your page on them if you have the time. Even then there is the chance you missed one or two and then you are back at zero. Also, it is possible that a design doesn’t allow users with a disability to use the page.

So what to do?

First of all it is a good advise to use valid HTML and CSS. Also make sure you don’t abuse JavaScript, Flash and Gifs. If you are reading this article, I assume I don’t have to tell you about these things…

But how can you validate your HTML, CSS and Accessibility?

Well, I will tell you which tools I’m using to validate my websites. These tools are not perfect, but if you use them properly you make sure that they cover each others weakness and leaving you with a valid website at the end. Also, there are some things you can’t validate by using a tool. You need to know the guidelines for HTML, CSS and Accessibility (WCAG) Weiterlesen

Web Standards and Accessibility Guidelines used in a Blog?

Web 3 ConsortiumThe majority of the Internet users should have heard about the World Wide Web Consortium or better known as W3C.
The W3C is the main international standards organization for the World Wide Web (W3). It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the W3.

Or as Michael Martin from ProBlogDesign.com described it in his article „Does Valid Code Help Your Blog?“:

The W3C is the internet’s daddy. They created HTML, CSS, and dozens of other specifications that govern the use of the technologies that makes the internet thrive today. Valid code is code which meets their guidelines, and can be tested in a validator, such as the HTML and CSS ones.

I don’t want to discuss if using valid code should be used in a blog or if it is actually helpful for a blog. To be honest, I had it in mind, but somehow ProBlogDesign.com beat me to it, which is actually helpful because I can skip this part 😉

To sum Michael Martin’s article up I dare to say that it is useful to use valid code, or better: Web Standards, in a blog.
His reasons are all great, but I have to add one more reason why you should use Web Standards: chances are higher that your blog is accessible by all humans, especially those with disabilities.

Less known among the Internet users is the Web Accessibility Initiative (WAI) of the W3C. Although some webmaster and „webcoder“ know and follow the Web Content Accessibility Guidelines (WCAG) put together by the staff of the WAI there are way more webmaster / „webcoder“ who are not following these guidelines. Weiterlesen

HTML Tutorial 103: Design with tables and CSS

HTML - HyperText Markup LanguageYou know how to write a valid XHTML document, however, the page is still not as nice looking as ruelicke.net or google.com or any other website out there.

What I teach you today is not how to create a professional website, but it is the basic design method any web programmer started with.
It is the old school table, but I add Cascading Style Sheets (CSS) to the table to get it a nice look.

But before you can start, you need to have an idea how you want to structure your page. The best thing to do is to grab a piece of paper and make a draft. As example I made a draft in a graphic program, although I prefer the paper method:
Draft for a page

Weiterlesen

HTML Tutorial 102: Tags and Validation

HTML - HyperText Markup LanguageSo, you got the idea how the basic HTML page is build? If not, read the HTML Tutorial 101: Basics before you continue 🙂

Ok, so you think your page got already some interesting content…but I bet the layout is…uhm…let’s say boring…white background and black text…depending on the server default…so, the good news is there are tags which allow you to manipulate how a page is displayed.

Maybe you think there has to be a bad news if I only mention the good news above. Well, there are two bad news:
to write valid XHTML code you need to
1. learn some CSS (=Cascading Style Sheet) and
2. define the DTD (=DocTypeDefinition).

Before you start searching my blog (or the web) for a CSS tutorial you should know that I will cover some basic CSS knowledge in this tutorial and write some CSS Tutorials at a later date.

Now, after you calmed down, let’s go on with this tutorial:

Update: Because of the recent update of the W3C validator I’m introducing here, I had to expand the tutorial and added a couple more things at the bottom of the tutorial. Weiterlesen

HTML Tutorial 101: Basics

HTML - HyperText Markup LanguageRequirements for the HTML Tutorials:
– a good freeware HTML editor or at least Notepad (not recommended though)
– a place to upload your files, although you can also test your HTML pages on your PC
—————————————–

What is HTML?
HTML stands for HyperText Markup Language and it is the code which is used to create the websites you see.

Since HTML4.01 is less used these days, I will only talk about XHTML1.0 from now on. For a HTML4.01 Tutorial I can only advise you to visit the W3Schools website

So…then what is XHTML?
Basically it is like HTML4.01 although the „X“ stands for „EXtensible“.
XHTML is the latest HTML standard and consists of HTML4.01 which was reformulated in XML.

Hey, I know HTML4.01 and I love it! Why should I use XHTML?
My personal opinion:
XHTML is the future of webcoding and it is easier to write valid HTML code. I’m sure you know the famous info texts on older webpages, stating „Optimized for IE“ or any other browser. You have less problems to write valid code as all current browsers treat XHTML the same way.
No more „browser-optimizing“!
Even better, XHTML is backwards compatible, meaning the page is displayed the same in IE7 and IE5 or older.

So switch to XHTML, it is really easy 🙂

Well, what are the basics you should know about XHTML. Let me explain it two ways: Weiterlesen