Hello World

These tutorials are about XML, the Extensible Markup Language.

Perhaps the easiest way to begin learning XML is to jump right in an do it. We are going to do it in five easy steps.

Step 1

Open your favorite text editor editor and type in the following code. If you are using any sort of code editor, make sure you are in source view mode, which is to say, make sure you are at a screen where you can type in the code directly. If you are using a text editor, your only option for writing programs is text-only, which is the same as source view.

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

<root>
  <title>
    My First XML Document
  </title>
  <para>
    Hello to the wild and wooly world of electronic
    document encoding.  
  </para>
  <note>
    (Okay, so maybe it's not that wild,
    but it can get pretty wooly.)
  </note>
<!-- No simple "Hello World" here -->
  <para>
    This page written by: 
    <ital>(insert your name here)</ital>
  </para>
  <para>
    Copyright 2000 and beyond
  </para>
</root>

Replace the phrase "insert your name here" with your name, in case you missed that bit.

Now save the document as helloworld.xml. Make sure you know where you saved it.

Notice that XML documents use the suffix of .xml to identify them to the computer as an XML document.

Step 2

Open up a Web browser and either select Open to open a file to be viewed (you may have to select the Browse button after you select open to view local files) or use a file manager to drag and drop the document into the browser window.

Depending on which browser you view the document in, the result should look something as follows.

In MSIE:

In Opera or Netscape 6:

If you didn't get this, or you got an error message saying there was something wrong with the document, go back and check your code for typos.

Congratulations, you just created your first XML document. So what is happening here?

Well, any of the above browsers will parse an XML document, and if there is nothing wrong with the document, they will write it to the screen. Netscape and Opera will write out the content unformatted, while MSIE will display the document tree for the XML document.

Isn't really look all that exciting though. You options seem to be text that is all run together or an outline of the document that is great for coding but not much of a read. Fortunately, there are things we can do to make it look like a real online document.

Let's take a look at one option, using CSS to style the document.

Step 3

Add the following line to your XML document.

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

<?xml-stylesheet type="text/css" href="helloworld.css" ?>

<root>
  <title>
    My First XML Document
  </title>
  <para>
    Hello to the wild and wooly world of electronic
    document encoding.  
  </para>
  <note>
    (Okay, so maybe it's not that wild,
    but it can get pretty wooly.
  </note>
<!-- No simple "Hello World" here -->
  <para>
    This page written by: 
    <ital>(insert your name here)</ital>
  </para>
  <para>
    Copyright 2000 and beyond
  </para>
</root>

Save you changes.

Step 4

Create a new document that contains the following Cascading Style Sheet (CSS) style rules. Yes, if you know CSS, you can embellish, but don't take anything out just yet.

title {
  display: block;
  text-align: center;
  font-size: 3.0em;
  font-weight: bold;
  }

para {
  display: block;
  text-align: center;
  font-size: 1.5em;
  }

note {
  display: block;
  text-align: center;
  font-size: 1.0em;
  color: #660000;
  background-color: #cccccc;
  }

ital {
  display: inline;
  font-style: italic;
  }

Save this file as helloworld.css in the same directory in which you saved the XM document you just created.

Step 5

Now look at the document again. Make sure you are in Netscape 6, MSIE 6, or Opera 6 (or later).

You should now see this.

So what happened?

Well, just like in HTML, the browser applied the CSS style sheet you specified to the document. The only difference in this case it that it is not an HTML document, it is an XML document.

If you know HTML and you know CSS, then you are well on your way to writing basic XML documents.

These pages can be found at: [http://academ.hvcc.edu/~kantopet/]
Copyright 2003 -- Peter L. Kantor[kantopet@hvcc.edu]
Last Updated January 2003