XHTML Web Design for Beginners: Hello World

Related Articles

Article Index

Hello World

No beginners guide would be complete without showing you how to say "Hello World". 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" "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:

A Microsoft Internet Explorer window. The title bar contains the text "Hello World". The page contains the text "My first Web page.".
Figure 1-1
View Figure 1-1

We are not going to worry about the code that is a grey color for the time being. All you need to know for now is that it tells the computer that this page is in XHTML and the language used is English. This code needs to be in every page that you produce and release on a live Web site but I'm going to leave it out until we deal with it later to help you learn without it getting it the way. Don't sweat it.

XHTML is called a Markup language because that's what you do with it. You mark up areas of text to indicate what they mean so the browser can know what to do with them. This is done by using elements. An element consists of two tags, an opening tag and a closing tag. Tags use the angle brackets < and > to show they are tags, and the closing tag also has a slash /.

Let's look at the document we just saw to demonstrate this. The <title> element is used to indicate the title of a page. In Internet Explorer this is displayed in the bar at the top of the window. Our title element looks like this:

<title>Hello World</title>

The <title> tag means we are starting a new title element. This is then followed by the text that we want the title to be. In this case the title will be "Hello World". To tell the browser that we have finished with the title we use a closing tag of </title>. As mentioned above the only difference between a start tag and an end tag is the slash /. This is essential as it is the only way the computer knows whether you are starting a new tag or finishing a previous one.

The name of the opening and closing tags must be the same, so:

<title>Hello World</heading>

is invalid and will not work.

As well as containing text such as "Hello World" above, elements can contain other elements. If we look just outside the <title> element we can see that it is inside a <head> element like so:

<head>
	<title>Hello World</title>
</head>

This means that the <title> is part of the <head> of the document, because it is inside it. There is no limit to how many elements another element can contain, as long as you follow the rules that we will look at later.

The <head> of a document is used to tell the computer things about your document rather than things that should be in it. The <title> is not part of the page itself; it describes what the document is, so it goes in the <head>. All XHTML documents must have a <head> element that must contain one <title> element, although others are allowed that we will look at later.

After the <head> comes the <body>. The <body> is the part of the document that contains the page itself. All XHTML documents must have one <body> element. The body contains things like paragraphs, bulleted lists, pictures and links to other documents. All of the stuff you view when you visit a site is contained in the <body> element.

Our <body> element is very simple; it contains a single element <p>:

<body>
	<p>My first Web page.</p>
</body>

Have you guessed what the <p> element is used for? The <p> element is used to mark a paragraph, so our page will have one paragraph with the text "My first Web page." in it. If we wanted add another paragraph we could do it like this:

<body>
	<p>My first Web page.</p>
	<p>I hope you like it.</p>
</body>

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

The page section only of a Web browser window. The text "My first Web page", followed by some space, and below it the text "I hope you like it.".
Figure 1-2
View Figure 1-2

There's one more essential ingredient that we haven't covered. The <head> and <body> elements are contained by an element <html> which contains the entire document (the <head> and <body> elements). Our <html> element above looks like this:

<html>
	<head>
		<title>Hello World</title>
	</head>
	<body>
		<p>My first Web page.</p>
	</body>
</html>

The <html> element must contain one <head> element and one <body> element.

You may be wondering why there is extra space at the start of some of the lines. This is purely for our benefit and makes no difference to the computer processing your pages. The idea is to add tabs or a set amount of spaces at the start of each line to match the level of your tags. Look at the code above, <html> is not contained in any element so there is no space. <head> is container by one element, <html>, so it has one tab. <title> is contained by two elements, <html> and <head> so it has two tabs, and so on. Trust me, when your documents get big, it makes life a lot easier.

Now it's your turn

If you feel up to it, have a go at doing some pages yourself before reading any more. If not just skip to the next section.

First of all try the "Hello world" example that we just looked at. Here's how.

Open up a text editor of your choice. If you're using Windows then

Start > Programs > Accessories > Notepad

will get you into Notepad, but any text editor will do. Please note that Microsoft Word and other Word processors are not text editors and are not suitable for this task.

Now type in the code below. I recommend that you type the code in yourself rather than copy and paste as it will help you to understand what you are doing. The tab key (for the spacing) is usually located above "Caps Lock" on the left of your keyboard.

<html>
	<head>
		<title>Hello World</title>
	</head>
	<body>
		<p>My first Web page.</p>
	</body>
</html>

Once you have typed the code into your text editor you will need to save it as a Web page file. Web page files have their own "extension" (the period and the three letters after the file name) to distinguish them from other files such as Microsoft Word (.doc) or Adobe Acrobat (.pdf).

Web pages use an extension of either .htm or .html. I prefer to use .html as it matches the name of the language. The choice is yours. Some old systems will not save files with four letter extensions so .htm may be your only choice.

Once you have saved the file open it up in your Web browser. On windows this can usually be done by double clicking the file in Windows Explorer. If you have typed it in correctly then you will see something similar to Figure 1-1 above.

Now that you have your page, try adding some more paragraphs to it like this:

<html>
	<head>
		<title>Hello World</title>
	</head>
	<body>
		<p>My first Web page.</p>
		<p>A second paragraph.</p>
		<p>Yet another paragraph.</p>
	</body>
</html>

Save your document again and refresh your Web browser. You should see the extra paragraphs appear after the first one.

Summary

That's it for your "Hello World" page. As I said when we started, don't worry if you didn't take it all in, we're going to be looking at each area in greater detail, but hopefully that has given you an idea of how Web pages work. In the next section, we're going to take a closer look at elements and tags and how they are used to build your documents.

> > XHTML Building Blocks


Publication Date: Monday 30th June, 2003
Author: Nigel Peck View profile

Related Articles