After I recommended that a friend of mine look into Web Design as a way to put her artistic skills to use, I realized that I can at start my blog rolling by writing a tutorial on XHTML and CSS. The main concept behind this part of the tutorial is to familiarize you with the basics of the structure of XHTML and introduce some concepts to play with.
XHTML has 3 different “flavors”. XHTML Basic, XHTML Transitional, and XHTML Strict.
XHTML is built ontop of a language called XML. XML consists of opening and closing “tags” that are used to describe content. For instance, if you wanted to describe your pets you could do it in XML:
<?xml version="1.0" encoding="UTF-8"?> <pets> <cat> <name>Moonlight</name> <age>10</age> <color>Black and Grey</color> </cat> <dog> <name>Sparky</name> <age>6</age> <color>Reddish Orange</color> </dog> </pets>
The first line of XML tells whatever is reading this document, whether it is human or machine, that the document is going to conform to the standards of XML version 1.0, and the character encoding used in the document is UTF-8. The character encoding is the way the the computer represents each letter as 1’s and 0’s. Today, the most common encoding is UTF-8.
The next portion of this XML document is the pets tag. By using the pets tag, we tell the reader that the information contained within this document (or rather, between <pets> and </pets>) is information about pets. By the same token, the cat tag tells the reader that the information contained within <cat> and </cat> is information about a cat and the information between <name> and </name> is information about a name.
In addition to tags, XML documents can also contain attributes. Attributes get stuffed into the tags to supply even more information. For instance, saying all the pets belong to Jhon is going to be difficult with what we’ve learned so far. We could stuff an <owner> tag into everything, but what if I’ve named everyone of my 300 goldfish? That’s a huge number of additional tags! Instead we can add an attribute to our pets tag, making it read:
<pets owner="Jhon">
In a similar way, we can cram most of our previous file into 5 glorious lines by using:
<?xml version="1.0" encoding="UTF-8"?> <pets owner="Jhon"> <cat name="Moonlight" age="10" color="Black and Grey"></cat> <dog name="Sparky" age="6" color="Reddish Orange"></cat> </pets>
There is one more thing that can be done to simplify it one step further. In XML, if a tag contains no tags (e.g. <cat></cat>) we can combine the two tags into one by using <cat />. Therefore our file becomes:
<?xml version="1.0" encoding="UTF-8"?> <pets owner="Jhon"> <cat name="Moonlight" age="10" color="Black and Grey" /> <dog name="Sparky" age="6" color="Reddish Orange" /> </pets>
While we could cram the cat and the dog attributes into the pets tag but concocting some sort of patter that separates the attributes by commas, this defeats the purpose of XML. Anything that can be pluralized should remain inside it’s own tag. We can see above that the colors are listed as a list so should probably have their own tags. This has the added benefit that we can add attributes to the colors themselves.
<?xml version="1.0" encoding="UTF-8"?> <pets owner="Jhon"> <cat name="Moonlight" age="10"> <color where="back">Black</color> <color where="belly">Grey</color> </cat> <dog name="Sparky" age="6"> <color where="back">Reddish Orange</color> <color where="belly">Cream</color> </dog> </pets>
This has the effect of creating a longer document, but we have more data than before and it is easier to read. There’s no real good way to tell when you should be using an attribute and when you should be using a tag, different people have different ways of writing it.
While none of this document actually covers writing a webpage, it provides a good introduction to the underlying language. XHTML is a specific set of rules for using XML in the description of webpages and CSS is how you display it. Tomorrow (or later today) I’ll cover writing a hello world page.
July 12th, 2008 | XHTML tutorial