Euro PC Solutions Blog

HTML / CSS – W3C & The Web Standards

This chapter might sound like it’s pointless but it is really important.
I’ll warn you straight away : you won’t learn how to make any super dynamic flashing effects, but you will learn about the history of the web.

Why do we use XHTML nowadays instead of HTML ? Why have we decided to separate the content (XHTML) from the style (CSS) ?
Why do we say that some sites are valid whereas others aren’t ?

And what about your site… is it valid ?

The History Of The Web

We’ll start by the basics : the web’s history. Webmasters should know a bit about the web, when it was created and its history.
It’s not only general culture, but it will also allow you to understand what follows in this chapter.

• Everything started at the beginning of the 70′s, during a meeting at the Canadian government. A certain William Tunnicliffe suggested separating the content of the information (the text) from the way in which it was shown. Already back then, although the Internet was reserved for a few privileged people, they had the idea of separating the content (which has now become XHTML) from the style (which is now known as CSS).

• Things started to speed up in 1978, people started to meet up to create a standard language that could evolve.

• In 1986, the SGML was created. This is the abbreviation of Standard Generalized Markup Language. This language was powerful but too complicated. To keep things short, the documentation had 1290 pages ! It never managed to attract the public because of its complexity and never had any major glory

• In 1991, Tim Berners-Lee invented the World Wide Web (abbreviated to WWW). To create the first web pages, Tim Berners-Lee created the HTML language which was slightly based on SGML (so it did have a use after all ).
  HTML (abbreviation of HyperText Markup Language is distributed for free (thanks Tim !)

  

• 2 years later, one of the first free browsers was created : it was called Mozaic and it worked on Mac as well as PC.
  Between 1993 and 1994, the number of websites grew from 500 to 10 000. The web already seemed to have a great future.

• Things started to gather pace in Europe. The web started to boom, and there wasn’t really an organisation in place to monitor its evolution. Somebody needed to make sure that things weren’t being done haphazardly, people needed to work together to ensure a good evolution of the web (and of HTML !).

• In 1994, Tim Berners-Lee, the one who created the Web, created the W3C (abbreviation of World Wide Web Consortium. He became its director.
  The W3C is an organisation with the mission of monitoring the evolution of the web : they needed to stop certain large companies from trying to slow down the evolution of the Web for commercial reasons. The W3C also had the task of designing new versions of HTML, so that the Web could evolve.

  

• In 2003 about 450 people worked for the W3C.

As you can see, right through its history the Web has been carefully developed, to stop it from becoming a toy for large businesses.
Still today (more now than ever), the W3C has the task of ensuring the correct development of the Web. We will see what it did with the HTML language, and why nowadays the standards are XHTML and CSS.

From HTML To XHTML

As I said above, right from the start of the Web, Tim Berners-Lee created the first version of HTML.
In effect, like all programming languages, HTML has known several versions :

• HTML 1.0 : the very first version of HTML created by Tim Berners-Lee in 1991.

• HTML 2.0 : the second version of HTML appeared in 1994 and ended in 1996 with the appearance of HTML 3.0. This version set the base of the following versions of HTML. The rules and specifications of this version were set by the W3C (whereas HTML 1.0 was created by 1 person).

• HTML 3.0 : having appeared in 1996, this new version of HTML added several possibilities to the language such as tables, applets, scripts, the positioning of text around images etc…

• HTML 4.0 : appeared for the first time in 1998, and offers the use of frames (which separate web pages into several areas), complicated tables, improvements in forms etc… But most of all, this version added the use of cascading style sheets, the famous CSS !

• XHTML 1.0 : at the beginning of 2000, the W3C decided to clean up the large mess that was HTML. In effect, during its evolution, HTML tags had been invented by Netscape and Internet Explorer (by Microsoft). Some tags worked on one browser but not on another.
  The W3C decided to stop the development of HTML and to create a new language. XHTML (EXtensible HyperText Markup Language) thereafter became the standard : this language had to work in the same way on all browsers, and no right to invent new tags so long as the W3C hasn’t authorised it !
  Really, there aren’t that many differences compared to HTML, but the language is Strict : you’re not allowed to make as many errors as in HTML. That doesn’t mean however that it is more difficult to use, you just have to get used to it.

  In the web site creation lessons I’ve written, I’ve only talked about XHTML because that’s the language that’s used today. You’ve therefore learnt the correct methods straight away, which will make your sites a lot easier to create. Those who learnt HTML still have some bad habits.

So that’s the future of the web, and it allows us to make sites that are visible on PDAs, telephones and all sorts of other portable devices.

Can you imagine if there were 35 different audio formats available ? Your CD player could read some of them but not others… Well, it was the same with XHTML : everybody came together and agreed on the way a web page should work. So in the end everybody wins : you (the webmaster) and them (the visitors).
Therefore creating a standard ensures that everybody speaks and understands the same language.

And CSS ?

The history of CSS started in 1996. Everything comes back to the idea of William Tunnicliffe (who I talked about earlier) : he wanted to separate the content from the way a page is displayed. This adds several advantages : it’s easier to change the appearance of a site, the pages load faster, we can propose several designs easily etc…

• CSS 1 : from 1996 the first version of CSS was usable. This language set the base of the language that allows us to present a web page, such as colours, margins, fonts etc…
• CSS 2 : created in 1999, this new version of CSS added several interesting and useful options. We could thereafter use absolute positioning, the pseudo-formats :before and :after etc…

CSS2 has existed since 1999, and yet some browsers (Internet Explorer without wanting to give any names away) still have problems using it correctly. Digesting everything in CSS is not the easiest thing, and there are always bugs. The problem is that it’s us, the webmasters, who are paying the price because we constantly have to check for differences between browsers.

However, as you know, creating an XHTML page and CSS is quite simple. The only tricky thing (even for experienced webmasters) is creating a website that works correctly on all the recent browsers (Firefox, Safari, Google Chrome, Opera) AND on Internet Explorer which is an individual case.

Is Your Site Valid ?

For the last part of this chapter, we’ll stop talking and do a bit of work.
What I’ve told you up to now was to teach you the history of the web, but also to make you more aware of what will follow…

What is validation ?
There are sites that are valid and others that aren’t ?

Remember : the W3C put in place the standards. You must respect them so that all the sites speak the same language.

On its site, the W3C (http://www.w3.org) offers a tool called a Validator.
The validator is a kind of program that analyses your source code and tells you if it is correct or if there are errors that need correcting.

There are 2 different validators :

• An (x)HTML validator
• A CSS validator

We will learn how to use both of them by starting with the XHTML validator.
Before we start, I should warn you, the validator will probably show you a few errors. Don’t worry, it’s normal the first time
However, the CSS validator shouldn’t show too many errors; it’s harder to make errors in CSS than in XHTML.

The XHTML Validator

Let’s start by the hardest bit first

First of all, bookmark this page, it’s the XHTML validator : http://validator.w3.org.
Those who downloaded the Web Developer plugin for Firefox can automatically validate the code with a special menu. There is also a great plugin for Firefox called HTML Validator.

The page you can now see is very simple. There are 2 ways of validating :

• Either you validate a page that is already on the web. In this case just enter the address of the page (for example : http://www.mysite.com/page.html).
• Or you haven’t yet put your site on the web (the pages are therefore still on your hard drive). You can therefore send the page directly to the validator to be analysed.

In both cases, the result will be the same, there’s no difference.

If everything is alright (don’t hope too much ), you will get the following message :

The site will then allow you to put this icon on your site to show that it respects the XHTML standards and that you respect the rules.
It is not necessary though. If you don’t like it you don’t have to use it

Of course, if your site has several pages, you’ll have to test them all.

HEELLLPPP MMEEEE
My page isn’t valid, I’m never going to manage, there are loads of errors

First thing : just because your site displays itself correctly doesn’t mean that it is valid.
A web page can look wonderful and yet still be full of errors.

What’s the point in correcting it then ?

As I’ve said right through this chapter : if your site is in XHTML 1.0, it needs to be coded correctly so that everyone can understand it. Browsers try not to show errors so that the visitor isn’t disturbed, but nothing is stopping the browsers from showing things badly !

What’s more, a page that is correctly coded has a better chance of appearing at the top of Google’s results, which will get you more visitors !

I’m not going to show you all the possible errors, the list would be too long. I will however show you some of the common mistakes. You’ll probably notice some of the errors that you’ve made as well so you’ll know how to fix them.

• First of all, this might seem to be apparent because I said it at the beginning, but I must remind you : the names of your attributes and tags must be written in lowercase. The value of an attribute can however include uppercase letters :
  <tag attribute=Value of the attribute>

• Solo tags, like the change line br and the image tag img must end with a slash (/) : <br />
  The space between the br and the slash isn’t necessary but the W3C do recommend putting the space in.

• All your text must be placed between paragraph tags. You are forbidden from placing text directly between the <body></body> tags without putting <p></p> tags around the text. This is also the case with the return line tag (<br />) and images (<img />) : these tags must be in the <p></p> tags !
  This is an extremely common error with beginners. Here’s an example of what you shouldn’t do :

  Code : HTML

  <p>Here is some text that's correctly placed in a paragraph.<br />
  <q>br</q> tags must be placed inside paragraphs, don't forget it.</p>
  
  This text is placed outside of a paragraph. It's forbidden.<br />
  <q>br</q> tags are also forbidden outside paragraphs as well as images.
  <img src="thing.png" alt="This is a thing" />
  
  <p>This text is once again inside a paragraph, everything is good.<br />
  Don't forget that images must also be inside paragraphs.</p>
  
  <p><img src="thing.png" alt="This is a thing" />
  (This image is correctly placed in a paragraph)</p>
  

• All your images must have an alt attribute which describes the image :
  <img src=photo.jpg alt=A photo of me />
  If your image is purely for decoration purposes (you can’t find a description), you are allowed to put nothing in the alt attribute like this :
  <img src=deco.png alt= />

• Tags must be closed in order. Here’s what you shouldn’t do :
  <p><em>Important text</p></em>
  Now, here’s what you should do :
  <p><em>Important Text</em></p>
  Remember this, a lot of beginners make this mistake.

• If your links have & signs in them (which is the case for sites using PHP), you must replace the sign with &amp; to avoid confusing the browser. Here’s a bad example :
  <a href=http://www.site.com/?day=15&month=10&year=2010>
  To make this good we just need to replace & with &amp; :
  <a href=http://www.site.com/?day=15&amp;month=10&amp;year=2010>

• Make sure that you have only used XHTML tags and no old HTML tags. If you only use the tags shown during these tutorials, you won’t have any problems. Using invented tags such as <marquee> or old tags like <frame> will make your page invalid.
  The validator will say Element whatever undefined or There is no attribute whatever

The CSS Validator

You’ll be relieved to know that this will be a lot quicker

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

You need to tell the validator the address of your CSS file. As with XHTML pages, you can also send files from your hard drive.
Just like with XHTML, you might have several files to validate.

You don’t have to directly indicate the CSS file. You can also indicate an XHTML page (.html) and the validator will look for the CSS files that are used (with the help of the <link /> tag !).

You have to make sure that you’ve validated your XHTML before validating your CSS.
The CSS validator will probably refuse to work if your XHTML still has errors.

Right, generally the CSS validator is the easiest thing in the world.
To have any errors, you need to completely screw things up somewhere or use properties that aren’t official. Here are some of the rare errors that can be made :

• You’ve forgotten to end the line of a CSS property with a semi-colon (;). If you forget this, the CSS file will be rendered useless.

• You’ve forgotten to give a standard font name to the font-family. Wrong :
  font-family: Arial, Trebuchet MS, Impact;
  Right :
  font-family: Arial, Trebuchet MS, Impact, sans-serif;

• You’ve used an unofficial CSS property. This is the case with Microsoft who invented, without letting the W3C know, several CSS properties that only work in Internet Explorer.
  Among these invented CSS properties, there are scrollbar-face-color and filters like filter: glow(). As these properties aren’t official, you shouldn’t use them on your web page.

  

  Have you created valid CSS files ? Well done !
  You can add the Valid CSS Icon to your site to show that it respects the standards. Once again nobody is forcing you to use this one or stopping you from creating your own design for the logo.

I hope that you enjoyed this chapter and that it helped you.
On a more serious note, this chapter is not to be taken lightly : I’ve tried to summarise all the different things about the web. It’s important that your sites are XHTML and CSS valid.