Eriginal   [:-)  Building a Website in XHTML 1.0 | Article 1.0

Article 1.0
    "Oh, they have the internet on computers now" Homer Simpson  
San Pedro 2207. Photo Credit: Mark O'Connor


focus Introduction to Building Valid W3C Coded & Accessible Web Pages
It's not difficult to get the basics of web design right from the start if you follow some key rules. If you want to design a site which can be indexed by the search engines, be accessible to the maximum number of people, and generate enough traffic for your business then your priorities in design should be

  1. The code
  2. The content
  3. The design & layout

This, first in a series of articles aimed at beginners and sites migrating to XHTML 1.0 or seeking to improve accessibility, will concentrate on the number one priority in design, the code. As easy as it is to get it right, it's as easy if not easier to get it wrong. The internet is full of code snippets, hacks and scripts which aren't written in proper code and which can damage your sites accessibility and search engine ranking if you use them unsanitized.

focus FrontPage & DreamWeaver
The programs you use to help design your site, such as FrontPage or DreamWeaver, may be out of date and not comply with current W3C coding standards i.e. they use deprecated tags or are simply incorrect. If you rely on them exclusively then you are in danger of designing a site which contains obstacles to both the computer and human reader. The same can be said for some text books.

If you have an understanding of how the code is put together and structured then you can correct these errors and ensure your site is optimised.

focus Basic Structure
If you landed on this page from our design shop then you will have read how I likened a web page to a person, i.e. every one has a head and a body. Let me now add to that description as, if you haven't noticed, there are many creatures on earth with heads and bodies. We need a way to define the species so we can distinguish between them and understand what we're looking at.

Remember a website is first read by computers, then displayed in the browser, then read by us. The easier we make it for the computer to do so will make our site more accessible to both people and, if not more importantly, the search engine robots like Google and Yahoo Search. There is key information we should pass to the computer to tell it what we are and how to display the page. Continuing with our analogy comparing a web page to a person, the information we need to send can be summarised as follows

  1. I am a person
  2. I speak English
  3. This is my head
  4. This is my body

Without at this stage delving into detailed explanations and the whytofor's, this format can be translated into a basic web page structure as follows

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="" lang="en" xml:lang="en">
  3.     <head>
  4.     <body>

Although a web page will work and display to you without defining all of these, the object of having a web site is to generate traffic and convert that traffic into sales or return users. This is why we follow this defined structure. In the succeeding articles we will look at each one of these elements in turn, but before we do so lets generate a valid web page using the structure we defined above.

focus A Valid Web Page
In the box below type your name over the row of dots and click view to launch a web page which complies with valid XHTML 1.0 coding conventions (well almost, you will have to read the succeeding articles for the final code).

Alternatively click here to the above code. Open a text editor like notepad. Select "Edit" from the menu followed by "Paste". This should copy the above into your editor. Next, in your editor, click "File" followed by "Save As". Change the "Save As" dialogue box to "All Files" and into File Name type "Index.html", including the quotes. Click save.

Now open your favorite file manager such as windows explorer. Identify the file ("index.html"), double click, and your first "webpage" is again launched.

focus Next Article
In the next article we will look at the "I am a person" section of the web page and discuss using lowercase letters, tags and containers. Until then...........

Mark O'Connor 11th May, 2006

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