Eriginal   [:-)  Building a Website in XHTML 1.0 | Article 1.1
Article 1.1
    "Oh, they have the internet on computers now" Homer Simpson  
San Pedro 2207. Photo Credit: Mark O'Connor

  		 

Page 1 | 2 | 3 | 4 | 5 | 6

focus Introduction: "I am a Web Page"
The DOCTYPE declaration of a web page identifies a number of attributes of the document and is essential to be able to validate the code used to create the page. In our previous article we used the following declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What does it mean, and why did we use it? This DOCTYPE declaration identifies the document conforms to XHTML 1.0 transitional. This means there is backward compatibility built in for older browsers to intrepret the code, i.e. transitional.

In these articles we will always use this DOCTYPE declaration. There are alternatives but as we want older browsers to read our web page and we are not using frames this is the required declaration. You don't really need to understand much beyond that at this stage, other than you need to include it, and it will always appear at the top of our pages.

focus What is XHTML 1.0?
You might ask the question, what is XHTML, why are we using it, I thought web pages were written in HTML? XHTML is based on XML and extends the use of HTML. The acroynm XHTML means Extensible HyperText Markup Language. It is designed to work in conjunction with XML, pardon the geek, user agents (a user agent being a device or program used to access the web. As such it widens opportunities in developing useful web pages and also makes those pages more accessible for other and new user agents (PDA's, Mobiles etc.), as access to the internet isn't limited to the use of computers.

focus Key Points in Writing XHTML
Three key and basic points which need to be adhered to in writing code conforming to XHTML conventions are

  1. All the code needs to be written in lowercase
  2. Every tag and container needs to be closed
  3. Elements must be nested correctly

When these three points are met the document can be described as "well formed".

Point one is straightforward and easy to follow, for example, a common convention in using a javascript event is to mix the case, as in the OnMouseOver event. To comply with XHTML it should be written onmouseover, i.e. everything in lowercase. Point two and three present more challenges.

focus Tags & containers
In our previous article we used the code below to produce a web page

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

When you look at this code you can see a pattern. Things seem to have a start and an end, i.e. the code is written as if to say to the user agents

  • ...........
  • this is the start of the head section - written <head>
  • this is the end of the head section - written </head>
  • this is the start of the body section - written <body>
  • this is the end of the body section - written </body>
  • this is the end of the page - written </html>

The start of a section, like the head section always appears like <head>. This is an opening tag. The closing tag includes a backslash and will always be written like </head>. The two tags together form a container and there is additional code we can write in between the tags, which is called nesting.

All very well except there are some tags which do not form a container, i.e. there is no natural closing tag for them. An example of which is the tag for break rule (i.e. break to the next line). In HTML this tag would have been written <br>, but this is invaild for XHTML. The tag needs to be closed and we do this by including a space followed by a backslash. The tag should therefore be written as <br />.

focus The <head> </head> Container
It can be useful to imagine the head container as keeping the brain of the web page and the body container as keeping the heart (the heart being the content keeps the web page alive and attracts visitors). There are key things we store in the brain, these include our name, links to other files, scripts, styling information, copyright notices, meta tags and so on. Although the use of meta tags is beyond the scope of this article we will include a number of them in our web page example, within the head container, to ensure our page is right, i.e. the meta tags we include share information with user agents and help it to be read or displayed properly.

These meta tags are therefore of the http-equiv variety as they are equivalent to HTTP headers. In some cases they may also be used by search engine robots to classify, for example

  • by language, as in
    <meta http-equiv="Content-Language" content="en-GB" />
     
  • to set a default display style
    <meta http-equiv="Content-Style-Type" content="text/css" />
     
  • extended to include the character set and thereby avoid display problems where for instance a web page uses UTF-8 (unicode format) punctuation characters but is displayed in ASCII or ISO character sets. Our example below uses Western European character set.
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

focus Putting it Together
Let's put it all together into our web page, but before doing so lets introduce one more container. This is the title.

When we start to look at content we will return to the title container and it's importance in page ranking, but for now we just need to understand that every page should have a title or name. This name will appear between the title tags and will be the display name for the page in your browser. For our example we will name our page "XHTML 1.0 Web Page Example", in code this will be written as

<title>XHTML 1.0 Web Page Example</title>

Our page can now be updated to include the new elements. As before type your name over the dots in the box below and press view to launch our new web page

This page will validate as being valid XHTML 1.0 transitional. The code is correct and contains no errors. This is the basic structure we will follow whenever we are developing a new web page.

focus Next Article
In the next article we will look at nesting page elements in the <body> </body> container. We will come back later to meta tags of the "name" variety as there use and purpose is always widely debated. Until then...........

Mark O'Connor 11th May, 2006

Page 1 | 2 | 3 | 4 | 5 | 6

<articles>