W3C standards

We are going to start with the basics: the Web's history. Every webmaster should know how old the Web is and a bit of its story.
It's not only a question of culture, it will also help you to understand this appendix. Read carefully, and you won't seem so stupid when you chat with other webmasters

• It all started in the early 70's , during a meeting in a printing works of the Canadian government. William Tunnicliffe offered to separate the information (text) from the presentation.
  Already at the time, when Internet was used by few privileged people, there was already talk of the separation of the contents (now called xHTML) from the design (which became CSS).
  The process is accelerated in 1978, as a group of people get together to create a varied "standard computer language".
• In 1986, SGML was born. It stands for Standard Generalized Markup Language. Yes it's a powerful language, but it's too complicated. To tell you the truth, its documentation had 1290 pages! Enough to discourage most people from using it... SGML will never have any success.
• In 1991, Tim Berners-Lee invented the World Wide Web (or WWW). In order to created the first webpages, Tim Berners-Lee create the HTML language which found its inspiration in SGML (it wasn't completely useless ). Moreover, the HTML (or HyperText Markup Language) is free. (thanks Tim!).
  
  
  
  Tim Berners-Lee
  
  
• Two years later, one of the first free browsers appeared: it's called Mozaïc and works on both Mac and PC. Between 1993 and 1994, the number of Websites pass from 500 to 10 000, a huge growth.
  Already, the Web seems to have a promising future.
• It's in Europe that things go fastest. The web is growing very fast, and there is nobody to supervise its evolution. This evolution musn't get out of hand, and we have to work together to ensure the web's evolution (and HTML's of course!)
• In 1994, Tim Berners-Lee, the Web's inventor, creates the W3C (or World Wide Web Consortium) and becomes its director.
  The W3C is an organisation which aims at supervising the Web's evolution: they must stop big societies from slowing down this evolution for commercial reasons.
  The W3C will also propose new versions of HTML, again to help the evolution of the Web.
  
  
  
  Logo of W3C
  
  
• It's interesting to note that right from the beginning (1997), many French people were working for W3C. But, gradually, Universities all over the world contribute to W3C, like the Japanese.
• In 2003, several organisations work for W3C. There are about 450 members.
  The ERCIM (European Research Consortium for Informatics and Mathematics) replaces the INRIA (French institute) in the W3C 's management.
  ERCIM is in France too, at Sophia Antipolis (near Nice) and will bring more fame and importance to W3C, of which many Webmasters (who think they are "professionals") are still not aware.

As you can see, in this story a lot of people took care of the good development of the Web, and fought to ensure it didn't become dependant of a large international company.
Nowadays (and more than ever), the W3C must protect the Web's future. We will now have a look at what the W3C did precisely on the HTML language and why, today, we talk about standards with xHTML and CSS.

As I told you in my little story, Tim Berners-Lee created the first version of HTML at the beginning of the web.
In fact, as for any other software, HTML has evolved throughout many versions:

• HTML 1.0: it is the very first version created by Tim Berners-Lee in 1991.
• HTML 2.0: the second version appeared in 1994 and ended in 1996 with the arrival of HTML 3.0. It is this version which will establish the foundations for the upcoming HTML versions. The rules and the setting of this version are established by the W3C (whilst the first version was created by a single man).
• HTML 3.0: appeared in 1996, this new version adds several new features to the language such as tables, applets, scripts, positioning text around images, etc.
• HTML 4.0: it is one of the last versions of HTML (the very last one being a slightly modified version, the HTML 4.01). It appears for the first time in 1998, and brings frames (which divides a web page in several sections), more complex tables, forms improvements, etc. But mainly, this version allows for the first time ever the use of cascading style sheets, our famous CSS !
• XHTML 1.0: in the beginning of 2000, the W3C decides to put an end to this wonderfull mess that had became HTML language. In fact, throughout its evolution, HTML tags were "invented" by Netscape and Internet Explorer (from Microsoft) browsers. Some of those tags would work on one browser, but not the other >< They decided to stop developing HTML to create a new one. XHTML (Extensible HyperText Markup Language) then became the standard: this language must work the same on every browsers, and no new tags as long as W3C hasn't approved it! In concrete terms, compared to HTML there are very few differences, but the language is more "strict": you're not allowed to do as many mistakes as in HTML. This does mean it is harder to use, it is just a habit to get.
In the website designing tutorial from Newbies Paradise that you are currently reading, I only talk about XHTML, since it is the language we have to use nowadays. So I taught you good habits since the beginning, which will make you create your websites much more easily. Those who started off by learning HTML sometimes have bad old habits.

It is now the future of the web, and it will allow us to create websites viewable on all kinds of PDA, multimedia cell phones and other portable devices that will for sure become more numerous in future.

Can you imagine if there were 35 different formats for audio CD's? Your CD drive could probably read some, but not all... what a mess it would be. Well, it's the same for XHTML: people gathered and agreed on how a web page should work. At the end, everyone is getting out of this winning: you (the webmaster) and them (the visitors).
Creating a standard allows to make sure everyone speaks and understands the same language. It's always by creating standards (and not only in computing) that we manage to make things evolve together

What about CSS?

The CSS's story begins in 1996. We got back to the idea given by the man I told you about in the beginning of this appendices (William Tunnicliffe): we must separate the content from the layout. Doing this brings numerous advantages: the website design will be easier to update, pages will be faster to load, it will be easy to suggest many designs, etc.

• CSS 1 : Since 1996, the first CSS version is available. It settles the foundations of this language which allows to design our web page, as for colours, margins, fonts, etc.
• CSS 2: Released in 1999, this new version adds a lot of new interesting features. We can now use absolute positioning, pseudo-formats :before and :after etc etc.

CSS 2 dates from 1999, and yet some browsers (Internet Explorer, not to name it) still hasn't implanted it properly. It has to be said that fully managing CSS isn't a simple thing, there are always at least bugs. The matter is that we, website developer, are the one who pay for that, because we always must be careful about the differences between browsers.

Overall, remember that creating a web page in XHTML and CSS is simple (let's say from 7 to 77 years-old :p). The only annoying this, even when you are experienced, is to get to create web pages which works well on every recent browsers (Firefox, Opera, Konqueror, Safari...) AND on Internet Explorer, which is a specific case.

For the last part of that chapter, we'll stop chatting and get back to technical stuff.
The goal of what I've been telling you since the beginning of the chapter was first to teach you about the Web's history, but it was also to sensitize you about that matter of validity...

Remember: W3C has set norms. They have to be respected, in order to make sure that all websites "speak the same language".

The W3C website (www.w3.org) features a tool that is called "Validator" (frightening, right? )
The validator is some sort of a program that will analyze your source code and tell you whether it is written properly or if it contains mistakes.

There are two different validators:

• An (x)HTML validator.
• A CSS validator.

We'll learn how to use both, by beginning with the xHTML one.
Be aware that the xHTML validator will probably notice several mistakes on your web page. So don't worry, it's your first time anyway
However, the CSS validator will cause less trouble. Mistakes are rarer in CSS than in xHTML.

The xHTML Validator

Let's start with the big part of it, okay

First, put that page in your bookmarks, it's the adress of the validator: http://validator.w3.org/.
Those who have downloaded the "Web Developer" plugin for Firefox can also directly check their page through a specific menu.

The page you're looking at is quite simple. It features two ways of validating:

• Whether you validate an xHTML page that already is on the Web. In this case, you just have to indicate the URL of the page (for instance: "http://www.mysite.com/page.html").
• Or you haven't published your pages on the Web yet (they are thus still on your hard drive). Then you have the possibility to send the page directly to the validator so it can check it.

The result will be the same, whether you choose the first way or the second.

If everything goes fine (you're definitely lucky ), you shall see the following message:



The site will propose you to put that sticky on your website to show that your pages respect the norms, and that you thus respect the established rules.
That is no obligation at all, if you find that too ugly, just don't put it

Of course, if your website contains more than one page (which is very very frequent ^^), all of them will have to be tested.

This is the usual reaction of the beginner who realizes that his page which he thought perfect actually wasn't

First, remember that: It is not because your web page is displayed properly that it doesn't contain any error.
Your web page can be quite nice and though contain a bunch of errors.

I kept reminding you: if you claim that your web page speaks "xHTML 1.0", it has to speak it correctly for everyone to understand it. You must know that browsers "try" not to display errors when they occur so the internaute doesn't get disturbed, but some browsers may not display the page properly!

Having a valid web page thus means that you can sleep peacefuly for you know that you respect the rules.
Moreover, and it has been confirmed, a well-built web page is to have a better place in the Google search results, which will bring you...more visitors!

I won't list every possible errors, it would be way too long to quote. However, I'll give you a list of the most frequent ones. You will probably recognize some of the ones you may have done and you'll be able to correct them.

• First of all, even if it seems obvious and I've already told you about it, you must remember: the names of your tags and attributes have to be in lowercase letters. However, the value of an attribute can contain uppercases:
  <tag attribute="Value of the attribute">
• Alone tags, like the line break "br" and the image tag "img" must necessary contain a slash (/) at the end: <br />
  Note that the space between "br" and the slash is optional, but since W3C adsvises us to put it, as a gentle little boy I do what they say
• All your texts must be inside paragraph tags. It is forbidden to put text directly inside the <body></body> tags without putting first the famous <p></p> tags.
  This is also true for line breaks <br /> and images <img />: all these tags have to be between <p></p> tags!
  It is an extremly frequent error among beginners. This is an example of what must not be done:
  
  Code: HTML

  1 2 3 4 5 6 7 8 9 10 11 12

  <p>This is a text put correctly inside a paragraph.<br /> The "br" tags must be inside a paragraph, remember.</p> This is a text outside a paragraph. It is forbidden.<br /> It is the same for line breaks ("br") and images too. <img src="stuff.png" alt="It's some stuff" /> <p>This text is once again in a paragraph tag, everything's fine.<br /> Remember that images have to be inside a paragraph too.</p> <p><img src="stuff.png" alt="It's some stuff" /> (This image is correctly put inside a paragraph)</p>

  
  
• All your images must have an "alt" attribute which indicates what the image contains:
  <img src="photo.jpg" alt="A photo of me" />
  If your image happens to be purely decorative (you cannot find a description), you are allowed not to put anything for the "alt" attribute, like here:
  <img src="deco.png" alt="" />
• Your tags must be closed in the right order. Let me show you what mustn't be done:
  <p>Important <em>text</p></em>
  Now, here is the right way to proceed:
  <p>Important <em>text</em></p>
  Do remember this scheme, many beginners make that mistake.
• If your links contain some &amp; (it is the case of websites using PHP), you must type the &amp;amp; code instead, so your browser doesn't get confused. Here's the wrong example:
  <a href="http://www.site.com/?day=15&amp;month=10&amp;year=2000">
  Here's the right one, I just replaced the &amp; by &amp;amp;:
  <a href="http://www.site.com/?day=15&amp;amp;month=10&amp;amp;year=2000">
• Eventually make sure that you did use xHTML tags and not old HTML ones. If you've only use the tags of this course, you won't have any problem. If you've used stranger tags (like <marquee>) or obsolete ones (like the old <frame>), your page will contain mistakes.
  The validator will tell you "Element stuff undefined" or "There is no attribute stuff"

The CSS Validator

Now chill out, it'll be way faster

First of all, here's the URL of the CSS validator to add to your bookmarks:
http://jigsaw.w3.org/css-validator/

You must precise the adress of the CSS file you want to validate. As for xHTML pages, you can also send your CSS file directly from your hard drive.
Also note that, as for xHTML files, if you have several CSS files to validate, you must submit all of them.

You have to know that it is necessary to first use the xHTML validator, correct your mistakes and then pass on to the CSS files.
The CSS validator will probably not load at all if there are still xHTML errors.

So, usually CSS validation is really piece of cake (you can't say the same about the xHTML one, right :p).
To find errors, you must have really fully mistaken somewhere or you must have used unofficial CSS properties. Here are the few rare mistakes you may have made:

• You've forgotten to put a semicolon at the end of a CSS property line (;). If your CSS properties do not end with one, your file is unreadable.
• You've forgotten to give a standard font name at the end of the font-family property. Not good:
  font-family:Arial, "Trebuchet MS", Impact;
  Good: font-family:Arial, "Trebuchet MS", Impact, sans-serif;
• You've used an unofficial CSS property. It's the case of Microsoft which has created CSS properties for Internet Explorer only in its private corner.
  Among these invented properties, let us quote scrollbar-face-colour and so on (colour of the scrollbar) and filters like filter:glow(). These properties being unofficial, you must not use them on your website.

You've succeded in making valid CSS files? Congrats! (It wasn't that hard :p)
You can put the opposite "CSS Valid" logo to show that your style sheets do respect the norms. Once again, you're fully allowed to use your own if you find that one ugly, or even put nothing if it does not fit the design of your website.