May 22, 2001
ICS-FORTH
The extensible markup language:
An introduction to XML
What is a XML document ?
How do we check its validity ?
How do we display its content ?
Christos Georgis
1
May 22, 2001
ICS-FORTH
What Is XML ?

XML stands for EXtensible Markup Language

XML is a markup language much like HTML

XML was designed to describe data

XML tags are not predefined in XML: you must define your
own tags

XML uses a DTD (Document Type Definition) to describe the
data

XML with a DTD is designed to be self describing

XML uses a CSS (Cascading Style Sheets) to display
information
Christos Georgis
2
May 22, 2001
ICS-FORTH
An Example XML Document
<?xml version=“1.0”?>
xml-declaration
<artist>
<name><first>Vincent</first><last>van Gogh</last></name>
<born><date>1853</date><place>Holland</place></born>
<died><date>1890</date><place>France</place></died>
<artwork>
start-tag
element content
end-tag
<artifact>
<title>The Starry Night</title>
<date>1889</date>
root <material>Oil
element
on Canvas</material>
<dim>
<height metrics_type="in">29</height>
<width metrics_type="in">36 1/4</width>
</dim>
<location>Museum of Modern Art, NewYork</location>
<image file="starry-night.jpg"></image>
</artifact>
</artist>
Christos Georgis
3
May 22, 2001
ICS-FORTH
An Example XML Document
<?xml version=“1.0”?>
<artist>
<name><first>Vincent</first><last>van Gogh</last></name>
<born><date>1853</date><place>Holland</place></born>
<died><date>1890</date><place>France</place></died>
<artwork>
<artifact>
<title>The Starry Night</title>
attribute name
attribute value
<date>1889</date>
<material>Oil on Canvas</material>
<dim>
<height metrics_type="in">29</height>
<width metrics_type="in">36 1/4</width>
</dim>
<location>Museum of Modern Art, NewYork</location>
<image file="starry-night.jpg"></image>
</artifact>
</artist>
Christos Georgis
4
ICS-FORTH
May 22, 2001
“Well Formed” vs “Valid” XML Documents

XML (document) with correct syntax is Well Formed XML
All XML elements must have a closing tag
 XML tags are case sensitive



All XML elements must be properly nested

All XML documents must have a root tag

Attribute values must always be quoted
XML (document) validated against a DTD is Valid XML

A DTD defines the legal elements of an XML document
<?xml version=“1.0”?>
<!DOCTYPE artist SYSTEM ”artist.dtd">
<artist>
<name><first>Vincent</first><last>van Gogh</last></name>
<born><date>1853</date><place>Holland</place></born>
………
Christos Georgis
5
May 22, 2001
ICS-FORTH
An Example XML DTD
<?xml version=“1.0”?>
<!ELEMENT artist (name , born , died? , artwork?)>
<!ELEMENT name (first , last)>
GROUP: element with
<!ELEMENT first (#PCDATA)>
children (sequences)
<!ELEMENT last (#PCDATA)>
<!ELEMENT born (date , place?)>
<!ELEMENT died (date , place?)>
Declaring zero or one
<!ELEMENT date (#PCDATA)>
occurrences of the
<!ELEMENT place (#PCDATA)>
<!ELEMENT artwork (artifact*)>
same element (?)
<!ELEMENT artifact (title , date? , material , dim , location , image)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT material (#PCDATA)>
Declaring zero or more
<!ELEMENT dim (height , width)>
occurrences of the
<!ELEMENT height (#PCDATA)>
same element (*)
<!ATTLIST height metrics_type CDATA #IMPLIED >
<!ELEMENT width (#PCDATA)>
<!ATTLIST width metrics_type CDATA #IMPLIED >
Elements with only
<!ELEMENT location (#PCDATA)>
character data
<!ELEMENT image EMPTY)>
<!ATTLIST image file CDATA
#IMPLIED >
Christos Georgis
6
May 22, 2001
ICS-FORTH
XML DTD Building Blocks

Elements
Elements are the main building blocks of both XML and HTML
documents
 Tags are used to markup elements (e.g. <name>… </name>)
 Elements are nested and may define a specific sequence


Attributes
Attributes provide extra information about elements (other than
their content and type)
 Attributes are always placed inside the starting tag of an element
Attributes always come in name/value pairs
(e.g. <width metrics_type="in">36 1/4</width>)
 May be applied to one specific instance of a given element


Entities

Entities are variables used to define common text
Christos Georgis
7
May 22, 2001
ICS-FORTH
XML DTD Elements
Empty elements
<!ELEMENT image EMPTY>, XML example <image />
Elements with only character
data
<!ELEMENT height (#PCDATA)>
Elements with any contents
<!ELEMENT note ANY>
Elements with children
(sequences)
<!ELEMENT name (first, last)>
Declaring only one occurrence
of the same element
<!ELEMENT artwork (artifact)>
Declaring minimum one
occurrence of the same element
<!ELEMENT artwork (artifact+)>
Declaring zero or more
occurrences of the same
element
<!ELEMENT artwork (artifact*)>
Declaring either/or content
<!ELEMENT artifact (title, date, (image | location))>
Declaring mixed content
<!ELEMENT artifact (#PCDATA | title | date | image)*>
Christos Georgis
8
May 22, 2001
ICS-FORTH
XML DTD Attributes and Entities
Attribute declaration
example
Default attribute value
Implied attribute
Required attribute
Fixed attribute value
<!ATTLIST square width CDATA "0">
XML example: <square width="100"></square>
<!ATTLIST payment type CDATA "check">
XML example: <payment type="check" />
<!ATTLIST contact fax CDATA #IMPLIED>
XML example: <contact fax="555-667788" />
<!ATTLIST person number CDATA #REQUIRED>
XML example: <person number="5677" />
<!ATTLIST sender company CDATA #FIXED "Microsoft">
XML example: <sender company="Microsoft" />
<!ATTLIST payment type (check|cash) "cash">
Enumerated attribute
values
XML example: <payment type="check" />
or <payment type="cash" />
<!ENTITY writer "Donald Duck.">
Entity declaration
<!ENTITY copyright "Copyright Walt Disney.">
XML example: <author>&writer;&copyright;</author>
Christos Georgis
9
ICS-FORTH
May 22, 2001
Viewing XML Documents with IE 5.0
Christos Georgis
10
May 22, 2001
ICS-FORTH
Displaying XML with CSS
Christos Georgis
11
May 22, 2001
ICS-FORTH
What is CSS ?

CSS stands for Cascading Style Sheets

Styles define how to display HTML/XML elements

Styles are normally stored in Style Sheets

Styles were added to HTML 4.0 to solve a problem

External Style Sheets can save you a lot of work

External Style Sheets are stored in CSS files

Multiple style definitions will cascade into on

cascading order
Christos Georgis
12
May 22, 2001
ICS-FORTH
CSS Syntax

Use of External Style Sheets
<?xml version=“1.0”?>
<!DOCTYPE artist SYSTEM ”artist.dtd”>
<?xml-stylesheet type="text/css" href="artist.css"?>
<artist>
. . .

Basic syntax
title {
font-family: Palatino;
font-size: 16pt;
font-weight: bold;
text-align: center;
color: #6699CC;
}

Grouping
artifact, artist, artwork, name, title {
font-family: Arial;
font-size: 16pt;
display: block;
}
Christos Georgis
13
May 22, 2001
ICS-FORTH
CSS Display Properties

Background properties (color, image, position)

Text properties (color, alignment, direction, letter-spacing)

Font properties (family, size, style, weight)

Border properties (color, style, width)

Margin properties

Padding properties

Classification properties (visibility, inline, block)

Pseudo-elements (:before, :after)
Christos Georgis
14