ZEAL EDUCATION SOCIETY’S

ZEAL COLLEGE OF ENGINEERING AND RESEARCH

NARHE │PUNE -41 │ INDIA

Record No.: ZCOER-ACAD/R/ Revision: 00 Date:01/04/2021

LAB Manual
Class\Sem: TE – A, B, C Sem – II Course: Web Technology Lab
Faculty: Prof. Shyamsundar Magar A.Y: - 2024-25

EXPERIMENT NO.03

DESIGN XML, DTD, AND CSS/XSL

Assessment Rubric Mark Assessment Rubric Mark

s s
Attendance (1M) Creativity & Design Aesthetics (1M)
Code Implementation / Execution (1M) Use of Relevant Technologies (1M)

Problem Understanding (1M) Write-Up Code Comments &

Documentation (1M)
Output Accuracy & Functionality (1M) Use of Proper Syntax & Best Practices (1M)
Logic & Algorithm Design (1M) Timely Completion & Submission (1M)
Total
_ _ _ /10
(10M)

Remark

Dated Sign & Name of Subject

Teacher
 EXPERIMENT NO.03
PART (A)
(PART A: TO BE REFERRED BY STUDENTS)
A.1 AIM:

Design the XML document to store the information of the employees of any business organization
A.2 PROBLEM STATEMENT:

Design the XML document to store the information of the employees of any business
organization and demonstrate the use of: a) DTD b) XML Schema And display the content in (e.g., tabular
format) by using CSS/XSL
A.2 PREREQUISITE\REQUIREMENTS:
 Text Editor (for writing XML, XSLT, DTD, and XSD files).
 Web Browser (to display and verify the output in HTML format).
 XML Validation Tool (such as XMLSpy, Oxygen XML Editor, or online tools) to validate the XML
against the DTD and XML Schema.
 XSLT Processor (may be built-in in modern browsers or standalone processors).
A.3 LAB OUTCOME:
Students will be able to,
1. Design a static webpage using XML.
2. Apply DTD to XML pages.
3. Apply CSS/XSLT to XML pages
A.4 THEORY:

INTRODUCTION TO XML

XML (Extensible Markup Language) is a widely used standard for encoding and storing structured data in a
plain text format. Unlike HTML, which is designed to display data in a browser, XML is designed for data
storage and transport. It allows users to define their own tags, making it highly flexible for representing data
in various domains like banking, e-commerce, and health care. The data in XML is stored in a hierarchical
structure with nested elements, where each element can hold other elements or textual data.
XML is designed to be self-descriptive, meaning the tags used in XML documents clearly describe the data
they contain. This makes XML a versatile choice for data interchange between systems, as it can represent
structured data in a standardized way that is both machine-readable and human-readable. An XML
document contains elements, attributes, and sometimes text, and is structured with a tree-like hierarchy.
What is DTD (Document Type Definition)?
A Document Type Definition (DTD) is a set of rules that defines the structure and legal elements within an
XML document. It defines the allowed elements and attributes, their order, and nesting within an XML
document. DTD provides the necessary guidelines for ensuring that the XML document follows a specific
structure, enabling document validation.
There are two types of DTDs:
- Internal DTD: Defined within the XML document.
- External DTD: Defined in a separate file and linked to the XML document.
A DTD defines:
- Elements: Which tags can appear in the document.
- Attributes: Which attributes can appear within the elements.
- Nesting: The order in which elements can appear inside other elements.
- Multiplicity: Whether elements can appear once, multiple times, or just once in the document.
For example, the DTD for an employee document might look like this:
```xml
<!ELEMENT employees (employee+)>
<!ELEMENT employee (name, position, department, salary)>
<!ATTLIST employee id ID #REQUIRED>
<!ELEMENT name (#PCDATA)>
<!ELEMENT position (#PCDATA)>
<!ELEMENT department (#PCDATA)>
<!ELEMENT salary (#PCDATA)>
```
This DTD specifies that the `<employees>` element must contain one or more `<employee>` elements, each
of which must contain a `<name>`, `<position>`, `<department>`, and `<salary>` element. The `id` attribute
is required for the `<employee>` element.
What is XML Schema (XSD)?
XML Schema Definition (XSD) is a more powerful and flexible way to define the structure of an XML
document. While DTDs provide a basic structure for an XML document, XSDs provide more
comprehensive validation capabilities, including specifying data types, default values, and constraints.
An XSD file is an XML file itself, and it provides detailed constraints on the data that can appear in the
document, such as data types, minimum and maximum occurrences of elements, and allowable values for
attributes.
XML Schema is more flexible than DTDs because:
- It supports more data types (e.g., string, integer, date).
- It can define relationships between elements and attributes more precisely.
- It provides better error handling during validation.
This XSD schema defines the structure of the XML file with stricter rules, such as defining the salary as a
decimal number and requiring the `id` attribute for each employee.
What is XSLT (Extensible Stylesheet Language Transformations)?

XSLT is a language for transforming XML documents into different formats such as HTML, plain text, or
other XML documents. XSLT uses stylesheets written in XML format that define how to convert XML data
into another form, which can then be displayed to the user or processed further.
XSLT is particularly useful for displaying XML data on web pages. By converting XML into HTML using
XSLT, the user can present structured data in a human-readable format with CSS for styling. The
transformation process follows a set of rules that describe how to map XML elements to HTML tags, how
to iterate through elements, and how to manipulate the data.
The above XSLT script takes an XML document with employee information and converts it into an HTML
table format. Each `<employee>` element is iterated over and its data is inserted into corresponding table
rows.

CSS (Cascading Style Sheets)

CSS is used to style the HTML content generated by XSLT. It provides the layout and visual design of the
content on the web page. CSS allows you to define how elements like tables, text, and images appear on the
page. Common CSS properties include `color`, `font-size`, `border`, `padding`, and `margin`.
For instance, in the above XSLT, CSS is used to style the table, headers, and cells, ensuring a clean and
readable presentation of employee information.

A.5 PROCEDURE:
Step 1: Create the XML Document
1. Open a Text Editor:
o Use any text editor such as Notepad, Sublime Text, or VS Code.
2. Write the XML Content:
o Define the root element as <employees>.
o Inside the root element, include multiple <employee> elements.
o Each <employee> should contain sub-elements such as <name>, <position>, <department>,
and <salary>.
3. Save the XML File:
o Save the file with the name employees.xml.
Step 2: Create the DTD File
1. Create a New File for DTD:
o Open a new file in the text editor for the DTD.
2. Write the DTD Structure:
o In the DTD file, define the structure of the XML document by specifying the allowed
elements and their order.
3. Save the DTD File:
o Save the DTD file as employees.dtd.
Step 3: Link the DTD to the XML Document
1. Edit the XML File to Reference the DTD:
o Open the employees.xml file and reference the DTD by including a DOCTYPE declaration
at the top of the file.
2. Save the Changes.
Step 4: Create the XML Schema File
1. Create a New File for XML Schema:
o Open a new file in the text editor for the XML Schema (XSD).
2. Write the XML Schema Structure:
o Define the structure, elements, data types, and constraints for the XML document using
XML Schema.
3. Save the XSD File:
o Save the XML Schema file as employees.xsd.
Step 5: Validate the XML Document with DTD and XML Schema
1. Use an XML Editor:
o Open an XML editor like Oxygen XML Editor or XMLSpy or use an online XML validator
to validate the XML document.
2. Validate the XML with the DTD:
o Ensure that the XML file follows the structure defined in the DTD.
3. Validate the XML with the XML Schema (XSD):
o Check that the XML document conforms to the structure and data types defined in the XSD.
Step 6: Create the XSLT File for Transformation
1. Create a New File for XSLT:
o Open a new file in the text editor for the XSLT.
2. Write the XSLT Transformation:
o Define the transformation rules that will convert the XML data into an HTML table format.
Include CSS styling to format the table and its content.
 3. Save the XSLT File:
o Save the XSLT file as employees.xsl.
Step 7: Link the XSLT to the XML Document
1. Edit the XML File to Link with XSLT:
o Add a <?xml-stylesheet?> processing instruction to the top of the XML file, linking it to the
XSLT.
2. Save the Changes.
Step 8: Open the XML Document in a Browser
1. Open the XML File:
o Open the employees.xml file in a web browser (such as Google Chrome, Firefox, etc.).
2. View the Transformed HTML Table:
o The browser will automatically apply the XSLT and display the employee data in the form
of a styled HTML table.
3. Verify the Table Display:
o Ensure that the data from the XML file is displayed correctly in the HTML table and that the
CSS is applied for styling.
Step 9: Analyze the Output
1. Check Data Integrity:
o Verify that the XML data is correctly displayed, including all employee information such as
ID, Name, Position, Department, and Salary.
2. CSS Styling:
o Ensure that the CSS styles (such as borders, padding, font size, etc.) are correctly applied to
the HTML table.
 PART (B)
(PART B : TO BE COMPLETED BY STUDENTS)
(Students must submit the soft copy as per following segments within two hours of the practical. The soft
copy must be uploaded on the Blackboard or emailed to the concerned lab in charge faculties at the end
of the practical in case the there is no Black board access available)

Roll No. 101 Batch: C1

Name: Shyamsundar. P. Magar Date of Submission 15/01/2025
Class: TE Date of Experiment: 08/01/2025
B.1 DOCUMENT CREATED BY THE STUDENT:
Code and Output
B.4 POST LAB EXPERIMENT (SELF-LEARNING ACTIVITY)
(To be answered by the student based on the practical performed and learning/observations)

ACTIVITY 1: CREATE BUS TIME TABLE MANAGEMENT SYSTEM

1) Objective:
To design and validate an XML-based Bus Time Table System using DTD and XML Schema (XSD), and
present the data in a user-friendly HTML table using XSLT and CSS. This activity will help you learn how
to manage transport-related data and display it dynamically on the web.
2) Activity:
 Design an XML document for a Bus Time Table System.
 Create and validate the structure using DTD and XML Schema (XSD).
 Use XSLT to transform the XML data into a well-formatted HTML table.
 Style the output using CSS for better presentation.
 Add dynamic behavior like sorting or highlighting based on time or day.
 Prepare and submit a brief report on the implementation and findings.
3) Instructions:
Design an XML document containing bus timetable details such as route, type, timings, and
operating days. Create a DTD to define the structure and an XSD to specify data types and
constraints. Use XSLT to transform the XML into an HTML table with conditional formatting (e.g.,
highlight night or weekend buses), and style it using CSS. Test the output in a browser, ensure the
data is displayed clearly, and prepare a report summarizing your work. Finally, submit all relevant
files including XML, DTD, XSD, XSLT, HTML output, and the report.
4) Skills Practiced:
Designing and structuring real-world XML data.
Validating XML with DTD and XSD.
Using XSLT to transform structured data into readable HTML.
Styling data tables with CSS.
Managing transport-related data for web-based applications.

B.2 OBSERVATIONS AND LEARNING:

(Students are expected to understand the selected topic. Write your observations after learning)
Students learned how XML structures data using meaningful tags for clarity. DTD and XML Schema
ensured correct format and data validation. XSLT transformed XML into a readable HTML table with
dynamic formatting. CSS improved the visual presentation, making the content user-friendly.
B.3 CONCLUSIONS:

B5. VIVA QUESTIONS

1. What is XML and why is it used?

2. What is the difference between DTD and XML Schema (XSD)?
3. How do you define attributes and elements in a DTD?
4. What are the data types supported in XML Schema (XSD)?
5. What is the purpose of XSLT in XML processing?
6. How does `<xsl:for-each>` work in XSLT?
7. How can you apply conditional formatting in XSLT?
8. What is the role of CSS in formatting XML output?
9. How do you link an XML file with an XSLT file?
10. Can XML data be displayed directly in a browser? If yes, how?