Geoverse

xhtml and css tutorial

1. Introduction

First get a decent html editor. I recommend Crimson editor. Forget about 'WYSIWYG' software such as MS Frontpage and Dreamweaver. Seriously.

Nowadays everyone can build a website, however more often than not the web developer on both a professional and amateur level produces sloppy coding and targets their work only to look good in a single browser. Unfortunately, that browser tends to be Internet Explorer (IE) due to its high market share, rather than Firefox. The problem with IE, despite recent improved support for cascading style sheets (css) in version 7, is that it only understands html. In recent years applications coded in xml (extensible markup language) have taken a foothold not only on the internet, targeted for websites, but also as applications in electronic devices such as mobile phones and pda's. xhtml is the browser version of xml that is specifically designed to be as compatible with html as xml allows. Unfortunately xhtml is still served as html/text rather than application/xhtml+xml in order to be compatible with IE. This devious ploy by MS means that we cannot yet freely create applications on the internet that in due time could replace a whole operating system! Limitations of IE however, do not mean we should all stick with good old bloated html.

xhtml comes in two flavours. xhtml 1.0 supports transitional, frameset and strict markup whereas xhtml 1.1 is an updated version of 1.0 strict. The strict version of xhtml (version 1.1) can be fully read by any programme that understands xml (e.g. an xml parser) and is fully styles free. The world wide web consortium (W3C) has been recommending web developers to code in xhtml 1.0 since Januari 26, 2000! W3C has a very informative page on xhtml here. In light of all of this, I offer a simple and short tutorial that should get you familiar with xhtml and css.

2. xhtml

Document types. This stuff goes at the top of a webpage.

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

xhtml 1.0 transitional is probably the obvious choice at this moment. It's flexible but still enforces clean coding. Frameset is for websites that rely heavily on using frames. xhtml 1.0 strict is pretty much obsolete. If you want to code in strict language, then go for xhtml 1.1.

The root element is html and requires an xmlns declaration as follows:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

The rest follows as usual with <head></head>, <body></body> and </html>. You may wish to include some additional stuff in the head of the webpage such as a link to your style sheet (called styles.css here). Copy the following into the head element:

<link rel="stylesheet" href="styles.css" type="text/css" />

2.1 Some rules

Elements and class attributes have to be in lower case. In addition, they have to be nested properly. If you open a paragraph and introduce some bold text, then you need to close the bold tag before closing the paragraph element. Never overlap elements and always close them. The same applies to break (e.g. <br />) and img elements. Class attributes require the value to be in quotation marks. For example: <div id="navigation">.

2.2 Layout

So now that we got the backbone of the site set up, lets fill up its body.

2.2.1 Div id boxes

Div id attributes are invisible (or visible) boxes that layout the content on your webpage in a structured manner. When you code a webpage most of it will be repeated across the site. Now you could learn to use php and includes but there is no harm in repeating the same code on every page. Div id elements make this easy. One might start with <div id="banner"> </div> followed by a new box <div id="navigation"> </div> before opening a box that will contain the juice of the page, i.e. the content. For every new div id element, there is a corresponding section in the style sheet. So in this case we type #banner { } and #navigation { } in the style sheet. In the style sheet you define the dimension and looks of these boxes. See section 3 below. The same id attribute cannot be used more than once. Name the following id attributes differently or use classes instead.

2.2.2 Class styles

Class attributes for div elements can be used to add additional styles / looks to a section of the webpage. For example above was defined a box for the navigation. Now I want to define how the navigation links should look like in that area. I do this by opening another div as follows:

<div id="navigation"><div class="nav">

			<a href="http://www.somelink.com" title="">link_title</a>

			<a href="http://www.somelink.com" title="">link_title</a>

			<a href="http://www.somelink.com" title="">link_title</a>

					</div></div>

Now "nav" refers to a section in the style sheet defined as .nav { }. There are some extra properties related to creating links. See section 3.2 for details.

Class styles do not necessarily have to be associated with div elements. They can be used for paragraph elements as well. For example <p class="red text"> </p> or list elements <ul class="circle"> </ul>.

2.3 Strict vs transitional

The differences between strict and transitional xhtml include all the differences between strict html and transitional html. For instance for strict, no longer is the attribute target="_blank" allowed to open links in a new tab / window. One will have to resort to a simple javascript that will handle external links. Another example is that no styles are allowed in the xhtml document anymore for xhtml 1.1 (strict).

Transitional xhtml:

<div align="center">

xhtml 1.1 (strict)

In xhtml: 
<div class="align">

In css: 
.align { text-align: center; }

As for other differences, you will probably encounter them during a validation of your site or webpage. I have already been urging you to define all your styles in the css document so if you write your website based on this tutorial, it can easily be validated for xhtml 1.1 as well.

3. Cascading style sheets

The above should have given you an idea how to write a website in xhtml. However, so far we have not been very concerned with looks yet. This is where cascading style sheets come in.

3.1 Common elements

Here is a list of some body elements that are really common in a css document.

body { }
		 

   		 h1 { 
		} 

		#customdiv {	
		} 

		.customclass { 
		}

The box below shows some of the common elements in a css document. These properties go between the { } parentheses. Always end each tag with ';'. When assigning dimensions in pixels e.g. say 5px, not just 5.


		background-color: 

		background-image: url(imageurl);

		background-repeat: 

		

		font-size:

		font-family:

		font-weight: 

		text-decoration:

		text-align:

		color: 

		

		margin: 'top' 'right' 'bottom' 'left'; 

		padding: 'top' 'right' 'bottom' 'left';

		border: 'top' 'right' 'bottom' 'left';

		border-color: 

		border-style:

		

		width:

		height:

		display:

		float:

When creating boxes using div styles I urge you to familiarize yourself with something called the box model. Basically you can create a margin around the box of a certain thickness in pixels, the box border itself can be a certain thickness and there can be padding in the box of a certain thickness before you reach the content area in the box. Always work out what the total thickness will be or stuff will be moving around the webpage in unexpecting ways.

3.2 Links

3.2.1 Text


				a:link { } 

				a:visited { } 

				a:hover { } 

				a:active { }

3.2.2 Image


				a img { }

				a:link img { } 

				a:visited img { } 

				a:hover img { }

				a:active img { }

3.3 Tables


			table {	}

			th { } (header)

			td { } (colomn)

			td.lang { } 

			tr { } (row)

3.4 Lists


			li { }