XHTML Beginner Tutorial

General Information

XHTML, or eXtensible HyperText Markup Language, is quite simply a reworking of HTML. The reworking represents an attempt to achieve future compatibility between web coding languages and XML. Since more and more people access the Web with devices other than computer screens, the World Wide Web Consortium (W3C) is encouraging designers to utilize XHTML.

Tools You’ll Need

There are only two tools you need to create and test a Web page. When you want to publish a Web page on the Internet, however, you will need one more tool: an FTP program. For this tutorial, the only two things you need are:

  1. a text editing program
    • Macs: TextEdit
    • Windows: NotePad
    • Others: Mozilla Composer (free), Dreamweaver (not free), FrontPage (not free), etc..
  2. a Web browser (Internet Explorer, Mozilla, Opera, etc.)

Getting Started

Let’s put the three main components of an XHTML document into an ‘.html’ file. To do so, we’ll first need to open a text editor program. On the Mac, we can open TextEdit and on the PC Notepad. The first thing we’ll want to type in is the <!DOCTYPE> declaration and Namespace, then the <head>, and then the <body>. I’ve grouped each component in the box below.

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

<head>
<title>My Homepage</title>
</head>

<body>
<h1>My Lovely Homepage</h1>
</body>
</html>

Type (or cut and paste) these components into your text editor program, and then save the document as ‘index.html’. Now open a Web browser and go to ‘File’ and ‘Open’, then locate the ‘index.html’ file and open it. Congratulations! You’ve created a Web page using XHTML.

Breaking It Down

As mentioned earlier, the <!DOCTYPE> declaration and Namespace are not easily memorized, so feel free to copy them. The <head> component in this example is simplified, containing only a <title> tag. The title is displayed at the top of your browser window.

screenshot of title displaying in browser window

The <title> tag’s contents in your browser window

The title is also displayed when someone bookmarks your page or when a search engine like Google displays information about your site to someone searching the Web. So, the title tag from my homepage at CU (<title>Steve Bailey :: Technology Coordinator : University of Colorado</title>) shows up in Google like this:

Screenshot of title displaying in search engine

Screenshot of title displaying in search engine

The final component of our ‘index.html’ page is the <body>, which is extremely simplified in the example above. Again, the <body> is where the content of your Web site goes, so it will likely be the longest portion of your document. In our example, the only XHTML tag in the <body> component is a level one heading tag or <h1>.

Screenshot of level one heading displaying in browser

Screenshot of level one heading displaying in browser

Of course, we could have a Web page where we use level one through level six headings (<h1> – <h6>). By default, browsers will display higher level (lower numbered) headings in larger font sizes than lower level (higher numbered) headings.

screenshot of all levels of HTML headings on a web page

By default browsers represent the importance of headings visually

NB: Even though heading font sizes can be changed using style sheets, it is important to use them in logical semantic (hierarchical) order, as they play an important role for search engines and for non-visual Web browsers.

Anchors (Links): The raison d’être of the Web

Probably the most important feature of a Web page is the ability to link between pages. You can insert an anchor (or link) to a Web page or file by specifying the page’s/file’s location in the href=”" area (<a href="http://www.colorado.edu">). In this example, the Web site to which we are linking is CU’s homepage.

An anchor with a specified file/page is no good, however, unless it also has a good, descriptive name. In the case of the above anchor, we might want to give the anchor the name “University of Colorado”. So, the code would just look like this: <a href="http://www.colorado.edu">University of Colorado</a>.

On a Web site, the link would generally appear blue and underlined. So, using the anchor above in this paragraph, I would end up with a line like this: My name is Steve Bailey, and I work at the University of Colorado.

References

To beef up the content of your new web page, consult the W3C’s XHTML Reference, which gives you a wide variety of tags to include in the <body> of your Web page.

Comments are closed.