DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  What is XML ?  XML stands for eXtensible Markup Language which is a cross-platform, software and hardware independent tool for transmitting information  XML is a markup language much like HTML – also a subset of Standard Generalized Markup Language (SGML)  XML is for describing the data as HTML for displaying the data  Before we introduce XML, have a look at HTML  HTML (HyperText Markup Language) was introduced by Tim Berners- Lee and his colleagues in 1989 in order to manage and share large amounts of information among colleagues

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  What is HTML ?  HTML is a markup language, a structured language that lets you identify common sections of a document in terms of headings, paragraphs, etc.  An HTML file includes text and HTML markup elements that indicate how the document sections appear in a browser  Examples: XML Introduction - What is XML XML is a complement to HTML XML is not a replacement for HTML. ……  HTML mixed style information within the structure limits the cross- platform compatibility of the content

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  Cascading Style Sheets: CSS  Separating display information lets you reorient your content for multiple destinations.  Separation of style and structure was accomplished in 1996 by the W3C’s ( specification for a Web style language named Cascading Style Sheets (CSS).  CSS only sets the format and placement of elements.  Such as: Title (display: block; font-size: 16pt; font-weight: bold)

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Basics:  XML was designed to describe data and focus on what data is. While HTML was designed to display data and focus on how data looks.  XML tags are not predefined – you must define your own tags – XML is thus a language that lets you describe a markup language, allowing you to create your own elements to meet your information needs.  XML is a complement to HTML, not a replacement for HTML – In future Web development it is most likely that XML will be used to describe the data, while HTML will be used to format and display the same data.  XML uses a Document Type Definition (DTD) or an XML Schema to describe the data  XML with a DTD or XML Schema is designed to be self-descriptive

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  Compare XML with HTML  HTML is used for data presentation and formatting, whereas XML’s focus is on data content only.  The XML document doesn’t tell you anything about how to render the information in the browser. You have to tell the browser.  When HTML is used to display data, the data is stored inside your HTML.  XML was designed to store, carry, and exchange data. XML was not designed to display data.  XML provides real cross-platform capability which comes from separating display and style from the structure of data.

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  What is XML for ?  XML can separate data from HTML – in terms of data islands;  XML is used to exchange data – with XML, data can be exchanged between incompatible systems – relieve developers from the most time-consuming challenges;  XML and B2B – with XML, financial information can be exchanged over the Internet; XML is going to be the main language for exchanging financial information between businesses over the Internet;  XML can be used to share data because XML data is stored in plain text format, which provides a software- and hardware-independent way of sharing data;  XML can be used to store data – can be next generation database;  XML can be used to create new languages – such as WML (Wireless Markup Language) which is used to markup Internet applications for handheld devices like mobile phones.  …….

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Syntax (I):  An example:  XML declaration - defines the XML version and the character encoding used in the document  this document is a note Bill  to Bill Hulk  from Hulk Reminder  to remind Bill Don't forget to patch up my windows  All XML elements must have a closing tag – unlike HTML;  XML tags are case sensitive – unlike HTML;  All XML elements must be properly nested – This text is bold and italic – not correct!!

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Syntax (II):  All XML documents must have a root element and all other elements must be within this root element;  Attribute values must always be quoted – it is illegal to omit quotation marks around attribute values; -- illegal here  With XML, white space is preserved rather than truncated;  Comments in XML is similar to that of HTML.

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Syntax (III):  XML elements have relationships which is related as parents and children;  Example: My First XML Introduction to XML What is HTML What is XML XML Syntax Elements must have a closing tag Elements must be properly nested

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Syntax (IV):  XML elements can have attributes in the start tag, just like HTML, which are used to provide additional information about elements; such as robot.gif  Quote Styles, “male" = ‘male'? should be same as  It is preferable to store data at bottom level: Bill Hulk Reminder Don't forget to patch up my windows!

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Syntax (V) – An attention here:  Avoid using attributes, because attributes are: 1.Not easily expandable – for future changes; 2.Not describe structures as child elements do; 3.More difficult to manipulate by program code; 4.Not easy to test against a DTD; 5.Not easy to read -- try to use elements to describe data.

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Validation:  An XML document that has correct XML syntax is called “well formed”.  A valid XML file is well-formed file which has a Document Type Definition (DTD) and which conform to it.  The purpose of a DTD is to define the legal building blocks of an XML document. A DTD is for specifying the structure (only) of an XML file: it gives the names of the elements, attributes, and entities that can be used, and how they fit together.  XML Schema is an XML based alternative to DTD.  A valid file begins with a Document Type Declaration, but may have an optional XML Declaration pre- pended:...

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  DTD I (Document Type Definition):  A DTD can be declared inline in your XML document, or as an external reference.  Internal DOCTYPE declaration If the DTD is included in your XML source file, it should be wrapped in a DOCTYPE definition with the following syntax: <!DOCTYPE note [ ]> Bill Hulk Reminder Don't forget to patch up my windows!

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  DTD II (Document Type Definition):  External DOCTYPE declaration: If the DTD is external to your XML source file, it should be wrapped in a DOCTYPE definition with the following syntax:  Example: Bill Hulk Reminder Don't forget to patch up my windows!  The file note.dtd looks like:

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  Why use DTD?  With DTD, each of your XML files can carry a description of its own format with it.  With a DTD, independent groups of people can agree to use a common DTD for interchanging data.  Your application can use a standard DTD to verify that the data you receive from the outside world is valid.  You can also use a DTD to verify your own data.  DTD tutorial online at

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Parser:  An XML processor (also called XML parser) evaluates the document to make sure it conforms to all XML specifications for structure and syntax.  Microsoft’s parser is called MSXML and is built into for IE versions 5.0 and above.  Netscape developed its own parser, called Mozilla, which is built into version 6.0 and above.  You can use parsers for validate your XML files or just  Use the online validation tool at

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  Browsing XML:  We focus on introducing IE 5.0 or above:  Viewing of XML documents  Full support for W3C DTD standards  XML embedded in HTML as Data Islands  Binding XML data to HTML elements  Transforming and displaying XML with XSL  Displaying XML with CSS

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  Viewing XML:  To view an XML document in IE 5.0 (and higher): 1. you can click on a link, 2. type the URL in the address bar, 3. or double-click on the name of an XML file in a files folder.  If you open an XML document in IE, it will display the document with color coded root and child elements.  Example: A CD category files written in XML: CD;CD The related style sheets files in CSS: CSSexample;CSSexample The file can be viewed in IE: CDXML;CDXML

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  A Problem Here:  When this two files are added into one file, how can I sort out? IBM Dell Computer Table  Since element names in XML are not fixed – we have a name conflict here!  XML Namespaces provide a method to avoid element name conflicts.

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  XML Namespace:  Solve this using a prefix added to the conflicted element names, like: IBM Dell Computer Table  The W3C namespace specification states that the namespace itself should be a Uniform Resource Identifier (URI).  Note that the address used to identify the namespace, is to give the namespace a unique name – may or may not containing information about the namespace.

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng  References:  