Creating an XML Document Tutorial 01 Creating an XML Document

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

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

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

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

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

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:

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

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

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

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

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

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

2.4 Inserting the web contents 2.4.1 Inserting the root element 2.4.2 Inserting the title 2.4.3 Inserting the message 2.4.4 Inserting the CD contents

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

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

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

2.4.4 Inserting the CD contents 2.4.4.1 Inserting the CD name 2.4.4.2 Inserting the artist 2.4.4.3 Inserting the CD prices 2.4.4.4 Inserting the CD tracks 2.4.4.5 Inserting other contents

2.4.4.1 Inserting the CD name Use the tag <CD> to insert the CD name

2.4.4.2 Inserting the artist Use the tag <ARTIST> to insert the artist name

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

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

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

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

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

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 }

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 }

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 }

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 }

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

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 }

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

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

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