Home » Issues » Issue 21

Learning XHTML: Monty Python Style

The quickstart guide to learning standards-compliant XHTML

Download the whole article as PDF

Short URL: http://fsmsh.com/2523

Write a full post in response to this!


For reasons unknown to civilized (or uncivilized) man, all programming books are often immensely boring. Seriously. That is, until now. Today, Free Software Magazine presents (in conjunction with Andrew Min Writing Studios) Learning XHTML: Monty Python-Style.

Your name is King Arthur (or if you prefer, it could be Lancelot or Galahad or Bedivere or even Robin …). Your quest is to learn XHTML. And your favorite color is… you’ll get to that later. For now, all you need to know is that you need to watch the møøse. They can be very dangerous around here. In fact, they can swarm together and take over sentences, even whole paragraphs. No really! (The management apologises for the fault in the introductions. Those responsible have been sacked.)

Introduction to XHTML and getting together the tools for it

You don’t go out and attack castles with Holy Grails without first knowing what a Holy Grail is. So, first you’ll get a little explanation. XHTML (eXtensible HyperText Markup Language) is a simple yet powerful markup language which utilizes tags. Tags are little strings of text enclosed by <> to let web browsers know what a web page contains.

Now that you know what XHTML is, you need to make sure you have all the materials you need (like coconuts and swallows and knights walking around clapping the coconuts). First, you’ll need some sort of XHTML editor. Most operating systems come with Notepad for Windows or TextEdit for OS X. However, these are extremely underpowered (even for basic programming). Using them is like trying to chop down a tree with a herring: impossible. For GNU/Linux users, the choice is easy: use Quanta Plus. If you absolutely /hate/ Quanta Plus (something I find very hard to understand!), try Scribes, another powerful programming tool. Windows users… should switch to GNU/Linux. But if you absolutely refuse to do that then try Notepad++. It’s not as powerful as Quanta Plus or Scribes (think King Arthur vs. Sir Lancelot), but if you like pain… go right ahead. OS X users have three options: use Smultron, a powerful editor for Mac users, install Quanta Plus using fink (a long and laborious project, but the end result is a powerful programming tool), or install GNU/Linux.

Writing a simple hello world page with paragraphs

Now that you know what you’re doing (always helpful), it’s time to write your first XHTML web page. Here it is:

<!DOCTYPE XHTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

That’s it! Just copy that into your programming editor, save it as helloworld.htm, and then double click on the file to run it. It will open a new page in your web browser that simply says, Hello World. Congratulations! You have now completed the first step of your XHTML career.

Don't miss out on the other pages!
123next ›last »

Write a full post in response to this!

Similar articles

1

Do you like this post?
Vote for it!

Copyright information

This article is made available under the "Attribution-Sharealike" Creative Commons License 3.0 available from http://creativecommons.org/licenses/by-sa/3.0/.

Biography

Andrew Min: Definition: Andrew Min (n): a non-denominational, Bible-believing, evangelical Christian. (n): a Kubuntu Linux lover (n): a hard core geek (n): a journalist for several online publications (see them all at http://www.andrewmin.com/ )

Fzzy's picture

Nice

Submitted by Fzzy on Wed, 2008-01-30 08:55.

Vote!
0

Thanks, i really enjoyed this. Maybe free software mag should regularly feature tutorials.

Anders Jackson's picture

Great introduction

Submitted by Anders Jackson on Sun, 2008-02-17 22:06.

Vote!
2

But you forgot one thing, and that is that all img should have an alt. Like in
<img src="picture.jpg" alt="A picture" />

castral01's picture

Some Missing Stuff.

Submitted by castral01 on Wed, 2008-02-27 08:44.

Vote!
0

A lot of people come across XHTML thinking that it really is as basic as you describe it, but theres a lot more information that you're missing about XHTML. Namely that IE does not support XHTML at all and considers it tag soup whenever it encounters it, and also that most XHTML that verifies in the W3C validator is not actually valid when sent as true application/xhtml+xml mimetype to browsers that actually do support XHTML (ie. Mozilla/Firefox and Opera). Here are some additional (and more technical) pointers:

  • Use a server side language to determine if the client's user agent accepts the application/xhtml+xml mimetype and send the appropriate headers. Details can be found here: http://www.w3.org/2003/01/xhtml-mimetype/content-negotiation
  • Include a proper xml 1.0 declaration for application/xhtml mimetype content (note that this causes IE to go into quirks mode, so make sure you check the user agent beforehand). This is on the very first line and looks like:

<?xml version="1.0" encoding="utf-8"?>

  • Make sure your code follows Appendix C of the W3C's XHTML standard. It can be found here: http://www.w3.org/TR/xhtml1/#guidelines
  • And just to play devil's advocate, you should certainly be aware of this document which, though old, is still very relevant: http://hixie.ch/advocacy/xhtml

All these things tend to be annoying, but easy to follow if you're aware of them all from the outset of a project. Sticking to all the information in these document will allow your XHTML to be the most compatible XHTML code possible. Happy hacking.

Mitch Meyran's picture

Some (more) missing stuff

Submitted by Mitch Meyran on Mon, 2008-03-03 08:40.

Vote!
0

castral01 said it well, but his comment is the abridged version...

When you're not sending an application/xhtml+xml MIMEtype, most web servers (Apache 2.x included) default to text/html, which isn't completely incorrect per se, as following XHTML 1.0 Strict, Appendix C, an XHTML 1.0 document formatted right can pass off as a slightly quirky html 4 document in most user agents, but it is actually wrong: in 'pure' HTML, you should be able to short-close a tag with '/' alone - making the following '>' extraneous (which leads to an unwanted displayed character, or a parsing error, since '>' must be entity-encoded when used outside of an HTML entity). It only works because the majority of user agents implement only a subset of HTML.

For a local file, an XHTML document must be saved with the .xhtml suffix: the .html suffix is for HTML only, most OSes/UAs do suffix to MIMEtype matching from the suffix - see above for restrictions.

If you are getting started with XHTML, go for Strict compliance, as it is actually easier to learn than Transitional: less redundant tags, less rendering quirks...

Be careful with XHTML 1.1, the text/html MIMEtype is wrong - you must use at least text/xml, or application/xml (somewhat understood by IE which attempts to load the page but fails because msxml3, built in IE, isn't actually XML compliant), or application/xhtml+xml (which leaves IE completely baffled).

Next: as said, you must add the XML prologue to any XHTML file you create, but only in the case when you use the correct MIMEtype, and in that case you must also remove all 'META http-equiv' tags, which are here only for Appendix C compatibility (they replace the data contained in the XML prologue, like encoding).

On tags, required attributes are height, width and alt - those attributes are actually _required_, and will create an error in the W3C validator, as well as a parsing error in Firefox and Opera when using the correct MIMEtype (because those browsers will then use their XML parsers, which is much less forgiving than the HTML one).

While the article stems from a good intention, I can't recommend it because it demonstrates bad coding habits.

(Now where is my Holy Hand Grenade again?)
---
A computer is like air conditioning: it becomes useless when you open windows.



CariNet: Cloud computing is a reality.

Other sites

Odiogo

Free Software Magazine uses Apollo, project management and CRM for its everyday activities!