Making the Move From Html 4 to Xhtml and CSS

Making the Move From Html 4 to Xhtml and CSS

The first important difference in xHTML comes in the form of its syntax. The language is case sensitive, so it is all written in lowercase, no more use of caps! Secondly, ‘tags’, or elements to be technical, are now classified into two types: those that 'contain' data, and those that are 'empty'. An example of the former might be a paragraph element, which has a closing tag. That which is in between these two tags is the 'contained data'. For instance, a sentence is understood to be data. An example of an empty tag could be a line break, and is written slightly differently than in HTML 4.0, instead of having a forward-slash just after the opening bracket the forward-slash must be written just before the closing bracket and must be preceded by a space. Other 'empty' types include the image element and the horizontal rule element . Another point to bear in mind is that because xHTML is supposed to be compatible across various devices, all images must have alternative descriptions (which means you have to make use of the 'alt' attribute in image elements, it’s no longer just an option). Similarly, you'll be making extensive use of the 'id' attribute in xHTML (similar to the 'name' attribute, but used differently - see below).The biggest hurdle for myself personally was learning the syntax of CSS. There are actually three ways of using CSS, of which one is to create a separate document with a .css extension. This file will contain all the styling attributes of the elements in your xHTML code. You can also place CSS in the ‘head’ element (using 'style' as an element), or you can embed it into an element anywhere in your code (for this you would use the ‘style’ attribute). Using an external file can be useful as changes made to this one document cascade throughout your entire website, hence eliminating the need to change the code on each page. The syntax basically consists of a 'selector', which can either be an 'id' selector, a class selector or a generic class selector . So, for instance, I've given an ‘img’ element the id "MyImg", then I go to my css section/file and create the selector #MyImg {}. Here's where the syntax comes in. the # symbol means that I've created an id selector, so what follows in the curly brackets will apply to all elements with the id "MyImg". An example might look something like this:

#MyImg {

width: 200px;

height: 100px;

border: 0px

}

Notice that I use a colon in place of the equals sign to assign values. If you fail to do this your styles will not be applied. Also, each attribute is followed by a semicolon which separates them. If you do not follow this syntax when using CSS your styling will not come into effect. The last thing you need to know to get started is how to link your external CSS document to your xHTML document. Just nest a element in your 'head' element and you're ready to go. There are plenty of new ways to perform tasks such as positioning in CSS. Have fun playing around with these new possibilities!