W3C Validation

W3C stands for the World Wide Web Consortium. The non-profit organization's goal is to facilitate and coordinate vendor neutral standards which can be accessed and used by all platforms and browsers.

One of the services they offer is to "validation" of your html files however, in order for this to work you must identify the rules you will be following.

The set of rules used by htmlHQ is called "transitional". It allows for the use of some "deprecated" (phased out) for which there is no standards compliant alternative.

"Strict" coding is another choice for your rule set. This rule set will only allow standards compliant coding. In theory this is a good idea however in practice there are some instances of tags being deprecated before there is a standards compliant alternative.

This all sounds a little unsatisfactory but according to Tim Berners-Lee "the internet will always be a little bit broken" which, when compared with the alternative, is ok with me.

W3C has recently released a browser called Amaya and while it functions satisfactorily it's primary function, as far as I can tell, is to allow you to code a page and at the same time watch those changes displayed in a browser in real time. You can download Amaya for free if you'd like to give it a try.

Valid XHTML 1.0 Transitional

CSS Saving and Calling

Although it is possible to create an internal css as part of the <head> portion of an html file we will write a separate css and "call it" from within the <head> instead. Doing this conveys significant advantages, as outlined above. These advantages will multiply for every page after the first in your site.

  1. Open a notepad document and save a file called main.css.

    Saving a file with the .css suffix indicates that the file is a cascading style sheet. Save it on your hard drive, server folder or floppy disk and make sure you save your other files in the same location so that when you "call" the css the path is correct.

  2. Go to the course practice page and click view→source. Save the file in the same folder as the css you saved from the previous step.

    This practice page contains examples of all the inline and block level elements that will be styled in the following examples and is offered to save you time. If you wish to write your own code or style an existing page please feel free to do so.

  3. The first thing to do with any .html page is to define the parameters under which it will be displayed. This will also allow your pages to be "validated" (see side-bar for further information on validation).

    Open the .html document you saved or wrote in step 2 and copy and paste the following lines of code to the very top of your page in place of the <html> tag (the closing tag remains unchanged).

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

  4. The next step is to insert the command lines that will call your separate css and set the rules so your page will be correctly displayed. Enter the following text into the <head> section of your .html document.

    <head>
    <title>Bob's World of Trees</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="X.css" type="text/css" title="X" />

    </head>

    X is the name you used for your css file. In step 1 you were instructed to call it main.css.

    In fact it doesn't really matter what you call your css file. The only rule is it must match the filename you call from within the head of your .html file and it must end in .css.

Next section: CSS syntax→