Tutorial 01 Creating an XML Document 1 Contents

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

Introduction to XML 1. What is XML? 2. The Difference Between XML and HTML

1. What is XML? § XML stands for Extensible Markup Language § XML is

2. The Difference Between XML and HTML § XML is not a replacement for

3. XML is Everywhere § XML is the most common tool for data transmissions

Creating a Jazz Warehouse Problem A Jazz warehouse’s host want to create a simple

Solution 1. Analysis and Design 2. Creating the web contents 3. Creating the formatted

1. Analysis and Design § Title: Monthly Specials at the Jazz warehouse § Message

2. Creating the web contents 2. 1 Creating a new XML file 2. 2

2. 1 Creating a new XML file Open XML Spy > File > New

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

2. 4 Inserting the web contents 2. 4. 1 Inserting the root element 2.

2. 4. 1 Inserting the root element Insert a root element which any name

2. 4. 2 Inserting the title Insert the title by applying the content in

2. 4. 3 Inserting the message To insert a text only on web page,

2. 4. 4 Inserting the CD contents 2. 4. 4. 1 Inserting the CD

2. 4. 4. 1 Inserting the CD name Use the tag <CD> to insert

2. 4. 4. 2 Inserting the artist Use the tag <ARTIST> to insert the

2. 4. 4. 3 Inserting the CD prices Use the tags <PRICEUS> and <PRICEUK>

2. 4. 4. 4 Inserting the CD tracks Use the tag <TRACK> to insert

2. 4. 4. 5 Inserting other contents Use the same syntax to insert two

3. Creating the formatted file 3. 1 Creating a new CSS file 3. 2

3. 1 Creating a new CSS file Open Dreamweaver > File > New >

3. 2 Formatting the title Set the properties of the title tag as below

3. 3 Formatting the message MESSAGE{ display: block; width: 500 pt; color: blue; font-style:

3. 4 Formatting the CD name CD{ display: block; font-size: 14 pt; color: red;

3. 5 Formatting the artist ARTIST{ display: block; font-size: 12 pt; color: black; font-style:

3. 6 Formatting the prices PRICEUS, PRICEUK{ color: black; font-size: 12 pt; font-family: Times

3. 7 Formatting the CD tracks TRACK{ display: list-item; font-size: 12 pt; color: black;

4. Applying the formatted file into the web content Use the code below to

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

References • New Perspectives on Creating Web Pages with HTML and XML (Patrick Carey

Slides: 35

Download presentation

Tutorial 01 Creating an XML Document 1

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

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

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 W 3 C Recommendation 4

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 5

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 6

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: 7

Solution 1. Analysis and Design 2. Creating the web contents 3. Creating the formatted file 4. Applying the formatted file into the web content 5. Testing 8

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

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 10

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

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

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

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 14

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

2. 4. 2 Inserting the title Insert the title by applying the content in the title tag 16

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

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 18

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

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

2. 4. 4. 3 Inserting the CD prices Use the tags <PRICEUS> and <PRICEUK> to insert prices 21

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

2. 4. 4. 5 Inserting other contents Use the same syntax to insert two other CDs 23

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 24

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

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

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

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

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

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

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

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

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

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 34