Transcript Tutorial 01 - SaigonTech

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 W3C 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:18pt;
color:blue;
font-weight:bold;
font-family:Arial,
Helvetica,
ans-serif;
margin-top:10pt;
margin-left:5pt
}
26
3.3 Formatting the message
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
}
27
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
}
28
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
}
29
3.6 Formatting the prices
PRICEUS,PRICEUK{
color:black;
font-size:12pt;
font-family:Times New Roman,
Times, serif;
margin-left:12pt
}
30
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
}
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
35