1. Creating an XML Document
Tutorial 01
Creating an XML Document

2. Contents Introduction to XML
Creating a Jazz Warehouse Web Page Problem
Solution

3. Introduction to XML What is XML? The Difference Between XML and HTML
XML is Everywhere

4. 1. What is XML? XML stands for Extensible Markup Language
XML is a markup language much like HTML
XML was designed to carry data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation

5. 2. The Difference Between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is
HTML was designed to display data, with focus on how data looks

6. 3. XML is Everywhere
XML is the most common tool for data transmissions between all sorts of applications.
XML is device-independent and system-independent

7. Creating a Jazz Warehouse Problem
A Jazz warehouse’s host want to create a simple web using XML to display all the new CDs which are available in his/her shop. So he want his web layout is as below:

8. Solution Analysis and Design Creating the web contents
Creating the formatted file
Applying the formatted file into the web content
Testing

9. 1. Analysis and Design Title: Monthly Specials at the Jazz warehouse
Message
CD contents:
CD Name:
Artist
Prices
Tracks

10. 2. Creating the web contents
2.1 Creating a new XML file 2.2 Inserting the XML declaration 2.3 Inserting comments 2.4 Inserting the web contents

11. 2.1 Creating a new XML file
Open XML Spy > File > New > XML Document > OK

12. 2.2 Inserting the XML declaration
Use the code below to insert the declaration

13. 2.3 Inserting comments
Use the same syntax with HTML to insert comment in XML

14. 2.4 Inserting the web contents
2.4.1 Inserting the root element Inserting the title Inserting the message Inserting the CD contents

15. 2.4.1 Inserting the root element
Insert a root element which any name (here is SPECIALS)

16. 2.4.2 Inserting the title
Insert the title by applying the content in the title tag

17. 2.4.3 Inserting the message
To insert a text only on web page, we use the tag [CDATA]

18. 2.4.4 Inserting the CD contents
Inserting the CD name Inserting the artist Inserting the CD prices Inserting the CD tracks Inserting other contents

19. Inserting the CD name
Use the tag <CD> to insert the CD name

20. Inserting the artist
Use the tag <ARTIST> to insert the artist name

21. 2.4.4.3 Inserting the CD prices
Use the tags <PRICEUS> and <PRICEUK> to insert prices

22. 2.4.4.4 Inserting the CD tracks
Use the tag <TRACK> to insert each track name

23. 2.4.4.5 Inserting other contents
Use the same syntax to insert two other CDs

24. 3. Creating the formatted file
3.1 Creating a new CSS file 3.2 Formatting the title 3.3 Formatting the message 3.4 Formatting the CD name 3.5 Formatting the artist 3.6 Formatting the prices 3.7 Formatting the CD tracks

25. 3.1 Creating a new CSS file
Open Dreamweaver > File > New > CSS > Create

26. 3.2 Formatting the title
Set the properties of the title tag as below TITLE{ display:block; font-size:18pt; color:blue; font-weight:bold; font-family:Arial, Helvetica, ans-serif; margin-top:10pt; margin-left:5pt }

27. 3.3 Formatting the message
display:block;
width:500pt;
color:blue;
font-style:italic;
border-bottom:1pt solid black;
padding-bottom:15pt;
margin-top:10;
margin-left:10pt;
margin-right:10pt }

28. 3.4 Formatting the CD name
CD{ display:block; font-size:14pt; color:red; font-weight:bold; font-family:Arial, Helvetica, sans-serif; margin-top:20pt; margin-left:20pt }

29. 3.5 Formatting the artist
ARTIST{ display:block; font-size:12pt; color:black; font-style:italic; font-family:Times New Roman, Times, serif; margin-left:12pt }

30. 3.6 Formatting the prices
PRICEUS,PRICEUK{ color:black; font-size:12pt; font-family:Times New Roman, Times, serif; margin-left:12pt }

31. 3.7 Formatting the CD tracks
TRACK{ display:list-item; font-size:12pt; color:black; list-style-type:disc; font-family:Times New Roman, Times, serif; margin-left:25pt }

32. 4. Applying the formatted file into the web content
Use the code below to insert a CSS file into a XML file

33. 5. Testing
Open the web page again to check it’s in accordance with the requirements.

34. References
New Perspectives on Creating Web Pages with HTML and XML (Patrick Carey & Mary Kemper) - Course Technology Publisher
Creating Cool Web Sites with HTML, XHTML and CSS - Taylor, Dave, Wiley