PRACTICAL: 5

AIM: Write a program in XML for creation of DTD, which specifies set of rules. Create a
style sheet in CSS/ XSL & display the document in internet explorer.

THEORY:

1. XML Overview: XML is a markup language used to store and transport data in a human-
readable and machine-readable format. Unlike HTML, which focuses on how data is displayed,
XML is concerned with what data is, making it suitable for data exchange between systems. It is
flexible, extensible, and platform-independent.

2. Document Type Definition (DTD): DTD is a set of rules that defines the structure of an XML
document. It specifies what elements, attributes, and entities can appear in the document and how
they relate to each other. Using a DTD ensures that an XML document adheres to a predefined
structure.
In the example, Wellness.dtd defines the rules for elements like wellness, day, activity, and sleep.
The DTD specifies which elements are mandatory, their data types, and any attributes they must
have (e.g., the date attribute for the day element). This enforces structure and ensures the
consistency of the data.

3. XML Schema: XML Schemas (e.g., DTD, XSD) are used to define the structure, content, and
semantics of XML documents. While DTDs are simple, XML Schema Definition (XSD) is more
powerful and provides better data type definitions and validation capabilities. However, DTD is still
widely used for lightweight validation.

4. CSS (Cascading Style Sheets) and XML: CSS is typically used to style HTML, but it can also
be applied to XML documents to control the visual presentation of data in web browsers. In the
example, WellnessStyle.css is applied to the XML data to make it more readable when viewed in a
browser like Internet Explorer. The CSS is responsible for layout, color, fonts, and other
presentation elements.

5. XSL (Extensible Stylesheet Language): XSL is another way to transform and style XML
documents. It is more advanced than CSS for XML and is often used to convert XML data into
different formats, like HTML, for better presentation in web environments. XSL can also handle
complex transformations of XML data.

6. XML and Web Browsers: Modern browsers support XML and allow for XML documents to be
displayed directly, though with basic formatting. By attaching a stylesheet (CSS or XSL) to the
XML document, you can control how the content is displayed, making it visually appealing. The
<?xml-stylesheet?> processing instruction in the XML file links the document to a CSS or XSL file.

7. Importance of Structure: XML is strict about its structure. Properly nesting elements, closing
tags, and using attributes correctly are essential. The DTD helps enforce this structure by defining
how elements must be used in a given XML document.

30
SOURCE CODE:

Book.xml:-

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE catalog SYSTEM "catalog.dtd">
<catalog>
<category name="Indian Literature">
<book>
<title>God of Small Things</title>
<author>Arundhati Roy</author>
<year>1997</year>
<genre>Novel</genre>
<price>450</price>
<review>
<reviewer>Ravi Sharma</reviewer>
<rating>5</rating>
<comment>Beautiful and haunting narrative of a family in Kerala.</comment>
</review>
<review>
<reviewer>Anita Desai</reviewer>
<rating>4</rating>
<comment>Deeply reflective and emotional.</comment>
</review>
</book>
<book>
<title>White Tiger</title>
<author>Aravind Adiga</author>
<year>2008</year>
<genre>Thriller</genre>
<price>350</price>
<review>
<reviewer>Alok Kumar</reviewer>
<rating>5</rating>
<comment>A powerful commentary on Indian society and politics.</comment>
</review>
<review>
<reviewer>Priya Mehta</reviewer>
<rating>4</rating>
<comment>Dark, gripping, and brilliant storytelling.</comment>
</review>
</book>
<book>
<title>The Immortals of Meluha</title>
<author>Amish Tripathi</author>
<year>2010</year>
<genre>Fantasy</genre>
<price>499</price>
<review> 31
 <reviewer>Karan Kapoor</reviewer>
<rating>5</rating>
<comment>Brilliant reimagining of Indian mythology.</comment>
</review>
<review>
<reviewer>Simran Patel</reviewer>
<rating>4</rating>
<comment>Engaging plot and well-written characters.</comment>
</review>
</book>
</category>

<category name="Contemporary Indian Fiction">

<book>
<title>2 States</title>
<author>Chetan Bhagat</author>
<year>2009</year>
<genre>Romance</genre>
<price>299</price>
<review>
<reviewer>Ritesh Gupta</reviewer>
<rating>5</rating>
<comment>A perfect blend of love, culture, and family.</comment>
</review>
<review>
<reviewer>Shalini Singh</reviewer>
<rating>4</rating>
<comment>Relatable and humorous take on cross-cultural relationships.</comment>
</review>
</book>
<book>
<title>The White Mughal</title>
<author>William Dalrymple</author>
<year>2002</year>
<genre>History</genre>
<price>550</price>
<review>
<reviewer>Akash Rathi</reviewer>
<rating>5</rating>
<comment>A compelling historical narrative of the Mughal empire.</comment>
</review>
<review>
<reviewer>Rina Mehta</reviewer>
<rating>4</rating>
<comment>Well-researched and informative.</comment>
</review>
</book>
</category>
</catalog>
32
Catalog.dtd: -

<!ELEMENT catalog (category+)>

<!ELEMENT category (book+)>
<!ATTLIST category name CDATA #REQUIRED>
<!ELEMENT book (title, author, year, genre, price, review*)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT genre (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT review (reviewer, rating, comment)>
<!ELEMENT reviewer (#PCDATA)>
<!ELEMENT rating (#PCDATA)>
<!ELEMENT comment (#PCDATA)>

Style.css:-

body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}

h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}

.catalog {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.category {
background-color: #ffffff;
padding: 15px;
border-radius: 5px;
margin: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 45%;
transition: transform 0.3s;
}
33
.category:hover {
transform: scale(1.05);
}

.book-card {
background-color: #fff;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}

.book-card:hover {
background-color: #f0f0f0;
}

.book-title {
font-size: 1.5em;
color: #2c3e50;
}

.book-author {
color: #34495e;
}

.book-info {
font-size: 1em;
color: #7f8c8d;
}

.book-reviews {
margin-top: 10px;
}

.review {
padding: 10px;
background-color: #e1e1e1;
border-radius: 5px;
margin: 5px 0;
}

.reviewer {
font-weight: bold;
}

.rating {
color: #f39c12;
}
34
.comment {
font-style: italic;
color: #34495e;
}

Index.html:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Book Catalog</title>
<link rel="stylesheet" href="style.css">
<script>
function filterCategory() {
const selectedCategory = document.getElementById("categoryFilter").value;
const categories = document.getElementsByClassName("category");
for (const category of categories) {
if (selectedCategory === "All" || category.getAttribute("data-category") ===
selectedCategory) {
category.style.display = "block";
} else {
category.style.display = "none";
}
}
}
</script>
</head>
<body>
<h1>Indian Book Catalog</h1>
<div>
<label for="categoryFilter">Filter by Category: </label>
<select id="categoryFilter" onchange="filterCategory()">
<option value="All">All</option>
<option value="Indian Literature">Indian Literature</option>
<option value="Contemporary Indian Fiction">Contemporary Indian Fiction</option>
</select>
</div>

<div class="catalog">
<div class="category" data-category="Indian Literature">
<h2>Indian Literature</h2>
<div class="book-card">
<p class="book-title">God of Small Things</p>
<p class="book-author">by Arundhati Roy</p>
<p class="book-info">Year: 1997 | Genre: Novel | Price: ₹450</p>
<div class="book-reviews">
35
 <div class="review">
<p class="reviewer">Ravi Sharma</p>
<p class="rating">Rating: 5 stars</p>
<p class="comment">Beautiful and haunting narrative of a family in Kerala.</p>
</div>
<div class="review">
<p class="reviewer">Anita Desai</p>
<p class="rating">Rating: 4 stars</p>
<p class="comment">Deeply reflective and emotional.</p>
</div>
</div>
</div>
<div class="book-card">
<p class="book-title">White Tiger</p>
<p class="book-author">by Aravind Adiga</p>
<p class="book-info">Year: 2008 | Genre: Thriller | Price: ₹350</p>
<div class="book-reviews">
<div class="review">
<p class="reviewer">Alok Kumar</p>
<p class="rating">Rating: 5 stars</p>
<p class="comment">A powerful commentary on Indian society and politics.</p>
</div>
<div class="review">
<p class="reviewer">Priya Mehta</p>
<p class="rating">Rating: 4 stars</p>
<p class="comment">Dark, gripping, and brilliant storytelling.</p>
</div>
</div>
</div>
<div class="book-card">
<p class="book-title">The Immortals of Meluha</p>
<p class="book-author">by Amish Tripathi</p>
<p class="book-info">Year: 2010 | Genre: Fantasy | Price: ₹499</p>
<div class="book-reviews">
<div class="review">
<p class="reviewer">Karan Kapoor</p>
<p class="rating">Rating: 5 stars</p>
<p class="comment">Brilliant reimagining of Indian mythology.</p>
</div>
<div class="review">
<p class="reviewer">Simran Patel</p>
<p class="rating">Rating: 4 stars</p>
<p class="comment">Engaging plot and well-written characters.</p>
</div>
</div>
</div>
</div>
<div class="category" data-category="Contemporary Indian Fiction">

36
 <h2>Contemporary Indian Fiction</h2>
<div class="book-card">
<p class="book-title">2 States</p>
<p class="book-author">by Chetan Bhagat</p>
<p class="book-info">Year: 2009 | Genre: Romance | Price: ₹299</p>
<div class="book-reviews">
<div class="review">
<p class="reviewer">Ritesh Gupta</p>
<p class="rating">Rating: 5 stars</p>
<p class="comment">A perfect blend of love, culture, and family.</p>
</div>
<div class="review">
<p class="reviewer">Shalini Singh</p>
<p class="rating">Rating: 4 stars</p>
<p class="comment">Relatable and humorous take on cross-cultural
relationships.</p>
</div>
</div>
</div>

<div class="book-card">
<p class="book-title">The White Mughal</p>
<p class="book-author">by William Dalrymple</p>
<p class="book-info">Year: 2002 | Genre: History | Price: ₹550</p>
<div class="book-reviews">
<div class="review">
<p class="reviewer">Akash Rathi</p>
<p class="rating">Rating: 5 stars</p>
<p class="comment">A compelling historical narrative of the Mughal empire.</p>
</div>
<div class="review">
<p class="reviewer">Rina Mehta</p>
<p class="rating">Rating: 4 stars</p>
<p class="comment">Well-researched and informative.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

37
OUTPUT:

38