Web Technologies 2 Lab

Tsegamlak Molla
Web Technologies 2 Lab
Session 1

2 Web Technologies 2
XML
Part 1

3 Web Technologies 2
XML

• XML(eXtensible Markup Language), is a markup

language designed to store and transport data in a
human-readable and machine-readable format.
• XML follows strict syntax rules that enable it to serve
as a versatile standard for structured data across
different systems and applications.

4 Web Technologies 2
XML Syntax
• Tags: XML elements are marked by opening (<tag>) and closing (</tag>) tags.
• Case Sensitivity: Tags are case-sensitive, so <Item> and <item> are considered
different tags.

• Root Element: Every XML document must have a single root element that
encloses all other elements. This provides a hierarchy and structure to the
document.

• Element Nesting: XML elements can contain other elements, creating a tree
structure. Nested elements must be correctly opened and closed within their
parent element.

5 Web Technologies 2
XML Syntax
• Attributes: XML elements can have attributes that provide additional information.
Attributes are written within the opening tag, with a name-value pair, and enclosed in
quotes (e.g., <item id="123">). Attribute names must be unique within an element and
their values must be enclosed in double quotes (") or single quotes (').

• Well-Formed XML: XML documents must follow strict syntax rules to be considered
"well-formed." This includes:
• Properly nested tags

• No overlapping tags (e.g., <a><b></a></b> is incorrect)

• A single root element
• Case sensitivity

6 Web Technologies 2
XML Syntax

Comments:

• Comments are written within <!-- --> tags, similar to HTML,

but they cannot be nested (e.g., <!-- This is a comment -->).

7 Web Technologies 2
Creating XML
Step-by-Step Process

1. Define the Document Structure: Plan the elements, attributes, and hierarchy that you want to
represent in your XML document.

2. Declare the XML Version and Encoding: Start the document with a declaration, e.g.,
<?xml version="1.0" encoding="UTF-8"?>.

3. Create the Root Element: Define the root element as the top-level element that will contain
all other elements.

4. Add Nested Elements and Attributes: For each data item, create a nested structure using
elements and attributes, maintaining the planned hierarchy.

5. Ensure Well-Formed: Double-check that tags are properly nested and closed, and each
element follows XML syntax rules.

8 Web Technologies 2
Example XML
Create the following in vs-code:

9 Web Technologies 2
XML Validation

• Validation is the process of verifying that an XML document

conforms to a specific structure and data format.

• XML can be validated using either a

DTD (Document Type Definition) or an
XML Schema (XSD).

10 Web Technologies 2
Validation - (DTD)
Document Type Definition (DTD)
• DTD is a set of rules that defines the structure and allowable
content for an XML document. It defines the elements, attributes,
and entity references allowed in the XML document.
• Internal DTD: Declared within the XML document itself.
• External DTD: Declared in a separate file and referenced in the
XML document.

11 Web Technologies 2
Validation - (DTD)
• Internal DTD: The top declaration as seen below defines how the XML should be written.

12 Web Technologies 2
Validation - (DTD)
• External DTD: The !DOCTYPE declaration would be referring to the root tag and the
location of the DTD.

13 Web Technologies 2
XML Schema (XSD)

• XML Schema - XSD, is more powerful and flexible than

DTD, allowing complex data types and data validation.

• It’s written in XML syntax, making it easier to read and

understand.

14 Web Technologies 2
XML Schema (XSD)
Benefits:

• Data Types: XSD supports a variety of data types (e.g.,

integers, dates, booleans), allowing validation of data
content.

• Namespace Support: XSD allows for namespaces, which

prevents naming conflicts in large XML documents.

15 Web Technologies 2
XML Schema (XSD)
Syntax: (Validation)
• XSD uses the namespace
xmlns:xs="http://www.w3.org/2001/XMLSchema".
• This namespace provides built-in types and definitions used
within XSD documents. The main components of an XSD
document include elements, attributes, simple types, and
complex types.

16 Web Technologies 2
XML Schema (XSD)
Syntax: (Validation)

17 Web Technologies 2
XML Schema (XSD)
Syntax (Defining an Element Schema - Validation):

18 Web Technologies 2
XML Schema (XSD)
Syntax:

• XSD provides constructs like <xs:sequence>, <xs:choice>, and

<xs:all> to define how multiple elements can appear within a
complex type.

• <xs:sequence> – All elements must appear in the specified order.

• <xs:choice> – Only one of the listed elements may appear.

• <xs:all> – All elements must appear but can be in any order.

19 Web Technologies 2
XML Schema (XSD)
Syntax:
• Some common data types include:
• xs:string – for text values.
• xs:int – for integer values.
• xs:decimal – for decimal numbers.
• xs:boolean – for true/false values.
• xs:date – for date values in the format YYYY-MM-DD.

20 Web Technologies 2
XML Schema (XSD)
Syntax: Inheritance and Type Extension

21 Web Technologies 2
XML Schema (XSD)
Syntax: Inheritance and Type Extension
• In the previous example the complex type:
employeeType extends personType by adding an
employeeID element.

22 Web Technologies 2
XML Schema (XSD)
Simple Example XML: (Data instance checked by local schema)

23 Web Technologies 2
Validation – XML Schema (XSD)
External:
Validation
(Schema
used for
checking
previous
slide data
using XSD)

24 Web Technologies 2
XML Parsing in JavaScript
JavaScript can parse and manipulate XML documents with the DOMParser class.
Example: Parsing XML in JavaScript:

25 Web Technologies 2
 Part 2 – React

26 Web Technologies 2