XHTML Web Design for Beginners - Part 2

Part 1

Why Code Your Own XHTML?

I won't be showing you how to use any programs that write XHTML for you. I have a firm belief that the best way to create Web pages is to get your hands dirty and write the code yourself. I've been doing it for seven years, and it hasn't let me down yet! Why is hand coding important? For a number of reasons.

Programs that produce HTML for you often do so badly, often producing Web pages that do things the long way. When you code your pages by hand you have an intimate understanding of what you're doing, and can make the actual size of the Web page file as small as possible. This decreases download times, so your pages load faster and your users are happier.

When you use a program to generate HTML for you, you don't get the chance to understand how your page is built internally because it's all done for you. This is not a problem as long as everything works… but what if it doesn't? If you find that your Web page doesn't display properly in Internet Explorer 4, and many of your users use that browser, you're going to have to sort it out. This means forgetting about the program and looking at the code yourself. Will you see the problem? If you've been using the program to code the page for you, when problems occur you probably won't have the knowledge you need to fix them.

The Internet is no longer limited to people with computers viewing Websites through one or two different Web browsers. Everything has a Web browser in it these days: mobile phones, televisions, personal digital assistants, cars… even fridges! Blind users "view" Websites using speech synthesis or Braille devices. There is no way you can test each page you produce in all the possible devices on which it may be used.

But there is a way to ensure you have the best chance your site will work in most scenarios: to produce pages using the standards laid out by the World Wide Web Consortium (W3C), the people who work on XHTML and other Internet standards. The W3C provide a validation service to check that your page meets the standards, and if it does, it therefore has the best chance of being used on any device. I don't know of any HTML generation programs that produce valid code.

I hope that has persuaded you that the learning curve for XHTML is worth it. If you decide to use a program to do it then that will have a learning curve too, so you might as well take the code option and save yourself hassle in the future.

Why XHTML?

Since 1990, HTML (or Hyper Text Markup Language) has been the language recommended for creating Web pages. And it has been very successful (you didn't need me to tell you that!). But HTML has its problems. Without going into specifics, as it's not the subject of this article, HTML has become a mess. To sort this mess out, in 1999 the World Wide Web Consortium came up with XHTML. XHTML stands for eXtended Hyper Text Markup Language, and is written in a language called XML or eXtended Markup Language.

As the name implies, XHTML has the capability to be extended. You can use extra modules to do things with your pages that weren't possible with HTML. The long-term goal is that your Web pages will be able to be understood by computers as well as humans. How does this work? Allow me to explain.

You may be thinking that computers already understand Web pages because you use a computer to view them. This is true. But computers only understand how to display your pages, not what they mean. Imagine if computers did understand what Web pages meant! You could tell your computer to go and visit all of your local supermarket's Websites and report back to you on which store is the cheapest for this week's shopping. Your computer could visit the news sites around the world and bring back the latest headlines that relate to things you're interested in. The possibilities are endless.

Hopefully you now see why XHTML is so important. I decided to write this tutorial to teach you XHTML from scratch. The main reason for this is that I couldn't find a beginners XHTML tutorial anywhere, there are plenty of HTML beginner's articles, and plenty of XHTML introductions for those who can already do HTML, but it seems logical to me that if you are starting learning Web Design now then you might as well use XHTML from the word go. So if you're still with me, let's get started.

Hello World

No beginners' guide would be complete without showing you how to build a "Hello World" page. With XHTML this is pretty simple. Don't worry if you don't understand everything, it will all become clear in time. Your "Hello World" Web page code looks like this:

<?xml version="1.0" encoding="iso-8859-1"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>Hello World</title>  
 </head>  
 <body>  
   <p>My first Web page.</p>  
 </body>  
</html>

In a visual browser such as Internet Explorer, the page above would look something like this:

Figure 1

View how this code will appear in your browser.

We aren't going to worry about the unbolded code for the time being: all you need to know at the moment is that it tells the computer that this page is in XHTML, and that the language used is English. This code needs to be in every page that you produce and release on a live Website but we'll deal with it later. Don't sweat it.