XML

XML and HTML

1. Unlike HTML, all tags must be closed. <NAME>Fred Jones would return an error. Correct: <NAME>Fred Jones</NAME>
2. In XML all open and close tags must match: <NAME>Fred Jones</name> would return an error. Correct: <NAME>Fred Jones</NAME>
3. Nested tags must be closed in the correct order. <NAME><FIRST_NAME>Fred Jones</NAME></FIRST_NAME> would return an error. Correct: <NAME><FIRST_NAME>Fred Jones</FIRST_NAME></NAME>

Building the first XML file

1. Create first.xml
   Using a text editor like Notepad create a file called "first.xml"
   
2. Declare it as XML
   The first line of the XML file must be:
   <?xml version="1.0" encoding="UTF-8"?>
   
3. Declare the root note
   There may only be one root node, all other nodes must be within the root.
   <?xml version="1.0" encoding="UTF-8"?>
   <LETTER>
   </LETTER>
   
4. Add child nodes and content
   <?xml version="1.0" encoding="UTF-8"?>
   <LETTER>
   <DATE>July 29, 2005</DATE>
   <TO>
   <NAME>Fred Jones</NAME>
   <STREET>10 Main Street</STREET>
   <CITY>Chicago</CITY>
   <STATE>IL</STATE>
   </TO>
   </LETTER>
   
   
   If you were to open your file in a browser, it might look like this:
   
   

   <?xml version="1.0" encoding="UTF-8"?> - < LETTER>   < DATE> July 29, 2005< /DATE >   - < TO >      < NAME > Fred Jones </ NAME >      < STREET > 10 Main Street </ STREET >     < CITY > Chicago</ CITY >     < STATE > IL</ STATE >   </ TO > </ LETTER >

   Except for the colors and the indentation, it looks like a raw HTML file. Since these tags are not defined, we need to provide a definition for them.
   
5. Add a DTD
   A Document Type Definition(DTD) may be placed within the XML file or linked from the XML file. The DTD provides structure for the custom tags you have created. A DTD file or section is a list of elements that define your tags. The definitions are nested, so in this case LETTER is the root, DATE and TO are defined within LETTER, and NAME, STREET, CITY, STATE are defined within TO.
   
   <!ELEMENT LETTER (DATE, TO)>
   <!ELEMENT TO (NAME, STREET, CITY, STATE)>
   <!ELEMENT NAME (#PCDATA)>
   <!ELEMENT STREET (#PCDATA)>
   <!ELEMENT CITY (#PCDATA)>
   <!ELEMENT STATE (#PCDATA)>
   
   Place the above lines in a file called first.dtd and add this line to the XML file under the xml declaration line:
   <!DOCTYPE LETTER SYSTEM "first.dtd">
   
   To place the DTD inside the xml file, add the lines like this after the xml declaration:
   
   <!DOCTYPE LETTER [
   <!ELEMENT LETTER (DATE, TO)>
   <!ELEMENT TO (NAME, STREET, CITY, STATE)>
   <!ELEMENT NAME (#PCDATA)>
   <!ELEMENT STREET (#PCDATA)>
   <!ELEMENT CITY (#PCDATA)>
   <!ELEMENT STATE (#PCDATA)>
   ]>
   
   The full version:
   
   

   <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE LETTER [ <!ELEMENT LETTER (DATE, TO)> <!ELEMENT TO (NAME, STREET, CITY, STATE)> <!ELEMENT NAME (#PCDATA)> <!ELEMENT STREET (#PCDATA)> <!ELEMENT CITY (#PCDATA)> <!ELEMENT STATE (#PCDATA)> ]> <LETTER> <DATE>July 29, 2005</DATE> <TO> <NAME>Fred Jones</NAME> <STREET>10 Main Street</STREET> <CITY>Chicago</CITY> <STATE>IL</STATE> </TO> </LETTER>

   
   Note the #PCDATA in the DTD section. The top level elements contain child elements, the lowest child elements must be defined with a preset type. PCDATA stands for parsed character data, there are other types of data but this is the simplest.
   Before the document can be displayed properly, we must add styling.
   
6. Add a stylesheet
   There are various kinds of stylesheets, but for this example we will use CSS, Cascading Style Sheets. Unlike a DTD, a CSS must be outside of the XML file. Create a file called "first.css" and add these lines to it:
   
   LETTER
   {
   background-color: #ffffff;
   width: 100%;
   }
   DATE
   {
   display: block;
   font-size: 20pt;
   }
   NAME
   {
   display: block;
   font-size: 20pt;
   }
   STREET
   {
   display: block;
   font-size: 20pt;
   }
   CITY, STATE
   {
   font-size: 20pt;
   }
   
   Then add this line to the XML file below the xml declaration:
   <?xml-stylesheet type="text/css" href="first.css"?>
   
   The finished product should look like this when loaded:
   
   July 29, 2005
   Fred Jones
   10 Main Street
   Chicago IL
   
   Not very exciting, but you get the idea.

CSS

DTD

Resources and Links