HTML has been around for several years now (since the early 1990s). Although it is still very popular and can do very many things very well, it does have many limitations and, as the needs of businesses grow, these limitations are becoming more and more agravating.

For example, if you operate a business that sells merchandise over the Internet you will probably have to give customers access to a price list. In most businesses a price list is a dynamic document - items are added, items are removed, prices change, availability changes, all as an ongoing process. HTML by itself cannot handle that. The best you can do is to create a web page in HTML and, every time there's a change in the price list, you go into the HTML document and you edit the code. Not very efficient!

Normally the price list, and everything else relating to inventory, would be stored in a database. To get the data from the database to display in a web page dynamically is a challenge. It requires sophisticated programming and is usually way beyond the capabilities of most ordinary users.

Here's where XML comes in. XML stands for eXtensible Markup Language. The language is extensible compared to HTML which is static meaning that you will be able to add database access, multimedia functions, special data-handling, etc.

XML has been evolving for several years. It is now taking over many of the tasks that HTML was handling before. There are hundreds of XML applications already on the market that you can drop directly into your installation and start using immediately.

It's not that HTML will disappear off the face of the Internet in two years. It will be around for many years to come. It does have many advantages. One of them is simplicity. HTML is simple to use! If you need a simple web page that will display text and pictures, or a complete web site consisting of many related pages, and you don't need dynamic access to data and flashy multimedia, stick with HTML for now.

That's not to say that you'll never have to learn XML. Eventually your business will grow and your needs will grow along with it. If at some point in the future you find that you have to increase the capabilities of your web site you may have to convert your HTML to XML.

And, finally, here's my point: as long as you are going to learn HTML anyway, you might as well learn it with XML in mind.

Let's say that you create an HTML page and two years down the road you realize that you have to convert it to XML to add special functions to it. At that time the XML browser will accept your HTML page, maybe. Among the many things you have to know about XML is that it is a lot more picky than HTML. All those shortcuts you took in HTML, the <LI> tags you didn't close, the uppercase/lowercase coding you used indifferently, will come back to haunt you. XML requires a closing tag for every tag you open. XML does discriminate between upper and lower case. And so on and on ...

So, in this tutorial, as you learn HTML you will have to think about writing the code in such a way that eventually it can be converted to XML with a minimum of effort. As we go along we will point out the refinements in HTML which will make the page more friendly to XML. It may require a little bit of extra work at times but, by the time we finish you will be ready to jump into XML with both feet!




In HTML a document contains both content and format together. For example, if you have to display a sentence in red using font Arial, you would write something like this:
<font size="3" color="#ff0000" face="arial">This is a red Arial sentence.</font>

and it would look to the user like this:
This is a red Arial sentence.

So, every text element that you write must be defined. If you have 15 red arial sentences at different places in your page you will have to write the <font> tag 15 times. Even with copy/paste, you risk making mistakes, forgetting a few </font> here and there, etc.

XML will split the formatting from the content. A web page will contain only text and pointers to the format elements. The format of each element of text will be stored in a separate document called a style sheet.

It may surprise you to learn that that idea has been around in HTML for several years. The technique is called Cascading Style Sheets and it fits right in with what we have to do in XML.

With CSS you spend some time at the beginning setting-up the different formats of text that you're going to use but then, you save a lot of time later by not having to define fonts and colors and size of text, etc.

Steps in creating a style sheet:

• using the layout form that you drew, identify all the different text elements - there are several things that can vary from one element to another: the font, the size, the color, the alignment, the weight, the underline;
  
  
• assign a name to each of the different elements: head1, head2, para1, etc.
  
  
• using the normal html editor, create a styles.css file to describe all the different formats that you are going to use; that file can be accessed by any page on the site (you could define styles at the beginning of a page and use them in that page alone, but what would be the point of doing that?)
  
  

Your style file could look something like this:



There are several dozen attributes that can define each element of text. We won't cover all of them here. Usually, in your HTML editor's 'Help' you will find a description of the attributes to use.

Here are the important ones:

• font-family: the typeface yo use; if you don't know what each one looks like, go into your word processor and experiment; in most documents you will use no more than 4 or 5; the common ones are 'Times New Roman', 'Arial', 'Verdana'.
  
  
• color: the color of the text; you can use the standard color names:
  
  
  
  
  
  
  If have to use a specific color, use the RGB system where colors are expressed as relative proportions of Red, Green and Blue; each of the R, G and B is expressed as an hexadecimal number between 00 - ff; we put the # sign in front to signify it is an hex number; for example, #000000 is black, #ffffff is white, #ff0000 is red, #00ff00 is green; here are some links that will help you with your color selection; Color Pallette Map and Annabella's HTML Help
  
  
• font-size: the size of text displayed; can be relative (px for pixels) or absolute (in for inches, cm for centimeters, pt for points); to be safe, always use pixels for size.
  
  
• font-weight: how bold; can be a number between 100 and 900 where 100 is light, 400 is normal, 700 is bold; can also use words bold and normal.
  
  
• font-style: can be normal, italic or oblique.
  
  
• text-align: how text aligns to the margins; can be left, right, center or justify; the first three speak for themselves; justify means that text is lined-up on both right and left margins; for example, all preceding paragraphs are justified.
  
  
• margin-left: and margin-right: the amount of indentation, from the left margin and the right margin, for the paragraph; can be expressed in px, in, cm or %;

Don't worry if you've forgotten to define something. You can edit the file at any time and add new elements as you need them.



At the beginning of each web page, before the </head>, you will include a link to the style file, like this:

....
<link rel="stylesheet" type="text/css" href="../styles.css">
</head>

Make sure that you have the path correct. Since the file applies to all pages on the site, it should be in the root-directory and called from there by all the pages.

You assign a style to your text with the <div> tag and the class attribute.

This is how I would write the text in HTML:

<div class="head1">THIS IS A HEAD1 LINE </div>

<div class="para1"> This is a standard paragraph with the para1 style being used. This paragraph is justified so that both margins are straight. There is sometimes a bit of a problem with spacing when the browser tries to get the second line to line-up with first on the right margin and inserts some unwanted spaces. Since this page's para1 style already has a margin-left and margin-right of 2 cm, defining another para1 indents it 2 cm more.</div>

<div class="para1">The following is a quotation:</div>

<div class="quote1">"Program design today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning."
-- Rich Cook </div>



And this is how it will diplay when you look at the page: