You’ll start with a basic XHTML link. And the best way to explain how to add a link is to do an example:

<a href="http://freesoftwaremagazine.com/">Free Software Magazine</a>

This <a> tag is much more complicated than any other tag you’ve learned so far. It’s as complicated as Dennis the peasant. First of all, note that everything between the two tags gets turned into a link. So the above result would output Free Software Magazine. Now, look at the href part. Basically, anything between the two quotes ("") is the location of the link. There are three things that can be between those hyperlinks. First, you could put a full web address like http://freesoftwaremagazine.com/, which is what I did above. Second, you could put in the location of a page with a URL that is relevant to the location of your page. For example, if you are editing the page index.htm which is on the server http://www.freesoftwaremagazine.com (so, the page is on http://freesoftwaremagazine.com/index.htm), and you wanted to link to http://freesoftwaremagazine.com/about.htm, you could just put down a link to about.htm, since both index.htm and about.htm are in the same directory: `<a href=”http://www.freesoftwaremagazine.com/about.htm”>Free Software Magazine</a>. If you’re still trying to pick your jaw off of the floor, re-read all of section again. The third option is to put in an anchor, which is beyond the scope of this article.

Links are extremely powerful tools. You don’t have to just link to web pages. You can also link to email addresses, like this: mailto:email@emailaddress.com. For example, <a href="mailto:john@cleese.com">Click here to email one of the greatest actors of all time</a>. Of course, mailtos are much more powerful than just this (for more, see this great article on mailto tricks). Note however that this is one of the best ways for a spammer to get your email address, so you might want to consider using an obfuscator like this one by John Haller or this by Andreas Neudecker.

Exercises

• Write two pages: robin.htm and lancelot.htm. Make robin.htm have a mailto link to sirrobin@montypython.com and lancelot.htm have a regular link to robin.htm.

Displaying images

When you’re on the internet, virtually every page you see contains some sort of image. Some have them as a background image, some as a menu background, some as regular pictures. But unless you’re browsing a mailing list or a directory output, it’s almost guaranteed that you’ll see some sort of image. So it’s time to figure out how to put them in your website. First, an example:

<img src="picture.jpg" />

There are several new things about this tag. First, note that there is no closing tag. This is very important. Even more important than remembering the migration patterns of African and European swallows. Also, note the “ /” at the end of the tag. For any tag that has no closing tag, there /must/ be a / (forward slash).

Besides these points, it should be pretty self explanatory. In the code above, picture.jpg refers to an image in the same directory as the page being written. Of course, you could also use something like http://freesoftwaremagazine.com/logo.jpg. Note however that it is often considered rude to use other images hosted by other people (It eats up their bandwidth. There’s actually a pretty funny story about that by Mike Davidson at Newsvine.com).

Exercises

• Download this image, put it in the same directory as the page you’re editing, and display it on your page.
• Try displaying an image that is also a link. If you can’t get it, see this article on background images (but actually try /before/ looking).

Advanced formatting with stylesheets

You may have noticed that one very important thing has been left out so far: color. If you write a page right now, you’ll have images and basic formatting but no color. Why? Well, XHTML actually does have support for all of this using the <font> tag. However the font tag (along with several other tags) has been deprecated, a fancy word meaning that their use is discouraged. That’s where Cascading Style Sheets, or CSS, comes into play. Now, explaining all the features of CSS is definitely out of the scope of this article (it’s like trying to say the name of the Knights Who Formerly Said Ni). However, since most XHTML programmers use it you’ll get a tiny taste right now. The CSS code goes in between the <style> tags, nested between the <head> tags.

First up, you’ll change the color of the font on your web page. A usability note: /always/ make sure your text is readable. That means no light colors on light colors (e.g. yellow on white) or dark on dark (e.g. navy on blue). Doing that makes the text barely readable, just like last words in the Cave of Caerbannog. There’s a good resource on colors at Mashable.com. Anyway, back to CSS. Here’s an example of changing the font color:

<style type="text/css">
body {color: red}
</style>

First, note that everything between the <style> tags is CSS code. On the second line, the CSS code starts (and ends). The body tells the browser that all the text between the <body> tags should be colored red. The { and } are similar to the < and > of XHTML. Finally, the color: red makes the text color red. This brings us to an important point about web color. There are two types of web color: hexadecimal (a six digit code preceded by a # like #000000) or named colors (in plain English, like red or blue). These can get complicated so refer to Wikipedia’s great article on web colors for reference.

Another thing you can do with CSS is set a background color. Here’s the sample code:

<style type="text/css">
body {background-color: blue}
</style>

As you can see, this code is very similar to the previous code: instead of defining the color, it defines the background-color. You can also set a background image:

<style type="text/css">
background-image:
url('bg.jpg')
</style>

Exercises

• Create a page with a background color of #BC2EE4 and text color #F8C042.
• Figure out how to change link colors. Change it to #CAC5D0, and add it to the other page. If you have trouble, see this page on link colors.
• Create a page with this background image, #CCDDEE as the text, and #000000 as the link color.

Publishing your web pages

Now that you have a web page, you’ll want to put it on the world wide web so that King Arthur and his wife can see it. First, you’ll need a web host with FTP support (there are tons of free ones around—at this point Google is your friend. Once you’ve registered with a host, connect to their FTP server using an FTP client. Quanta Plus has this built in, see Quanta Plus’s documentation for more information. If you don’t use Quanta, use FileZilla (there’s a good tutorial at the FileZilla wiki). Make sure your main page is named index.htm.

Now, go to your web site that your host set up (e.g. http://freedomain.com/andrewmin/). You should see your index.htm page come up immediately (if not, you may have to wait a few hours for your site set up to be completed).

There’s only one thing left to do: check your site in web browsers. There are two types of browsers: standards compliant browsers like the free software Mozilla Firefox or Konqueror, and non-standards compliant browsers like Internet Explorer. If your page is valid XHTML according to the W3C Validator, it will show up perfectly in Firefox or Konqueror. Unfortunately, you’re also going to have to make sure your page works in Internet Explorer 6, well known for being one of the worst browsers for standards compliance on the net (you can use the free Browsershots service to see what your page looks like). Internet Explorer 7 improves on this, but is still pretty bad. It’s like saying that Sir Not-Appearing-In-This-Film is better than Sir Robin the Not-Quite-So-Brave-As-Sir-Lancelot.

Exercises

• Create a webpage! Make a page with nice colors (use Color Inspirator if you’re as uncreative as Sir Lancelot) detailing your experience with XHTML. Then, upload it to a host of your choice.

Where to go from here

Well, you’re just about done. Now, you’re probably wondering what to do next. If you want to learn more about XHTML or CSS, visit the W3Schools. There are also a host of programming languages for the web, including PHP, JavaScript, Perl, ASP, Ruby on Rails, and Cold Fusion. They will allow you to generate XHTML pages on the spot. W3Schools has tutorials for these, as does our sponsor O’Reilly Media. You may also want to learn about content management systems which are powerful web tools that give you more power for less work. Graham Oakes has a great article on this called Introduction to Content Management Systems.

Good luck!