Scribd
Upload
23 views24 pages

WP Unit 2

Uploaded by

lathajagadeshan07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views24 pages

WP Unit 2

Uploaded by

lathajagadeshan07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Unit 2 : Dynamic Documents With Javascript:

Introduction To Dynamic Documents

Positioning Elements - Moving Elements


Element Visibility - Changing Colours And Fonts

Dynamic Content:
Dynamic content in web design refers to website elements that change or adapt based on user
interaction, preferences, data, or other variables. Unlike static content, which remains the same for
every user, dynamic content personalizes the user experience by delivering tailored information. This
is especially common in modern websites that prioritize user engagement, personalization, and
functionality.

Real-Time Updates:

• Displaying live data such as stock prices, weather information, or social media feeds without
requiring users to manually refresh the page.

Interactive Forms:

• Validating user input, providing instant feedback, and dynamically updating form elements
based on the user's actions.

Content Loading:

• Loading additional content such as comments or product listings as the user scrolls down the
page, creating a seamless browsing experience.

Dynamic Visualizations:

• Updating charts, graphs, or maps in response to user interaction or data changes.


Example Code:

• <!DOCTYPE html>
• <html>
• <head>
• <title>Dynamic Content Example</title>
• <style>
• #feedback {
• color: red;
• }
• </style>
• </head>
• <body>
•
• <h2>Dynamic Content Example</h2>
•
• <!-- Real-time Stock Price (Dummy Data) -->
• <h3>Real-Time Stock Price</h3>
• <p>Stock Price: <span id="stock-price">Loading...</span></p>
•
• <!-- Interactive Form -->
• <h3>Interactive Form</h3>
• <form id="dynamicForm">
• <label for="username">Username:</label>
• <input type="text" id="username" name="username" required>
• <span id="feedback"></span><br><br>
•
• <label for="password">Password:</label>
• <input type="password" id="password" name="password"
required><br><br>
•
• <input type="submit" value="Submit">
• </form>
•
• <script>
• // Real-time Stock Price Simulation
• setInterval(() => {
• const price = (Math.random() * 1000).toFixed(2);
• document.getElementById("stock-price").innerText =
`$${price}`;
• }, 2000); // Update every 2 seconds
•
• // Interactive Form Validation
• const usernameInput = document.getElementById("username");
• const feedback = document.getElementById("feedback");
•
• usernameInput.addEventListener("input", function () {
• if (usernameInput.value.length < 3) {
• feedback.textContent = "Username must be at least 3
characters long.";
• } else {
• feedback.textContent = "";
• }
• });
•
• document.getElementById("dynamicForm").addEventListener("submit
", function (event) {
• if (usernameInput.value.length < 3) {
• event.preventDefault();
• feedback.textContent = "Please correct the username.";
• }
• });
•
•
• </script>
•
• </body>
• </html>
•

Stacking Elements
Definition: Stacking elements in web development refers to the concept of controlling the visual
layering or stacking order of HTML elements on a web page.

Purpose: The purpose of stacking elements is to control the visual hierarchy of elements and manage
their overlapping behavior.

Visual Hierarchy: By manipulating the stacking order, web developers can control which elements
appear in front of others, creating visually appealing layouts.

Emphasis on Important Content: Stacking ensures that important content is prominently displayed,
improving user experience and content visibility.

Locating The Mouse Cursor


Locating the mouse cursor in web development refers to tracking the position of the cursor (or
pointer) on the webpage. This is useful for creating interactive experiences, animations, or effects
that react to the user's mouse movements, such as tooltips, hover effects, or custom cursors.

How It Works:

Using JavaScript, you can detect the mouse cursor's position on the webpage by listening to mouse
events like mousemove. The position is usually provided as X (horizontal) and Y (vertical) coordinates
relative to the document or an element.

Key Properties for Locating Mouse Cursor:

1. clientX and clientY:


o These properties return the X and Y coordinates of the mouse cursor relative to the
viewport (the visible area of the webpage).
o Example: If the mouse is at the top-left corner of the visible window, clientX and
clientY will be 0, 0.
2. pageX and pageY:
o These properties return the X and Y coordinates relative to the entire document,
including any portion of the page that has been scrolled.
3. screenX and screenY:
o These provide the X and Y coordinates relative to the entire screen (not just the
webpage or browser window).
<!DOCTYPE html>
<head>
<title>Mouse Position</title>
<style>
body {
font-family: Arial, sans-serif;
}
#position {
position: fixed;
top: 10px;
left: 10px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>

<h2>Move your mouse around!</h2>


<div id="position">X: 0, Y: 0</div>

<script>
// Event listener for mouse movement
document.addEventListener('mousemove', function(event) {
let x = event.clientX;
let y = event.clientY;

// Update the text with the mouse position


document.getElementById('position').textContent = `X: ${x}, Y: ${y}`;
});
</script>
</body>
</html>
Reacting To A Mouse Click
Reacting to a mouse click in web development means triggering actions or executing code in
response to the user clicking (left-click or right-click) on an element. This is commonly used to create
interactivity on a webpage, such as buttons, links, forms, or custom elements that respond to clicks.

Common Mouse Click Events:

click: Triggers when the primary mouse button (usually the left button) is clicked.

dblclick: Triggers when the primary mouse button is double-clicked.

mousedown Event: Triggers when the user presses down any mouse button (left, right, or middle)

mouseup Event: Triggers when the user releases a pressed mouse button.

mouseenter Event: Triggers when the mouse pointer enters the boundary of an element (does not
bubble up to parent elements).

mouseleave Event: Triggers when the mouse pointer leaves the boundary of an element

mousemove Event: Triggers whenever the mouse moves within the boundary of an element (or the
entire document).
mouseover Event: Triggers when the mouse pointer moves over an element or its child elements
(unlike mouseenter, it bubbles).

mouseout Event: Triggers when the mouse pointer moves out of an element or its child elements

contextmenu Event: Triggers when the right mouse button is clicked (or Ctrl+click on Mac), usually
triggering the context menu.

Slow Movement Of Elements


Slow movement of elements in web development typically refers to creating animations where
elements move gradually from one position to another over time, often for visual effects or
interactive purposes.

Key Methods:

CSS Transitions: Used to animate changes in CSS properties (like left, top, transform, etc.) when
triggered by events (e.g., hover or click).

#box {
position: absolute;
left: 0;
transition: left 2s ease;
}
#box.move {
left: 200px; /* Moves slowly to the right */
}

CSS Animations: Uses @keyframes to define an element’s movement over time.

@keyframes moveRight {
from { left: 0; }
to { left: 200px; }
}
#box {
position: absolute;
animation: moveRight 2s ease-in-out;
}

JavaScript setInterval or requestAnimationFrame: Controls movement more dynamically or


interactively.

const box = document.getElementById("box");


let position = 0;

function move() {
position += 1;
box.style.left = position + "px";

if (position < 200) {


requestAnimationFrame(move);
}
}
move();
Dragging And Dropping Elements.

To implement drag-and-drop functionality using JavaScript, you use the DragEvent API and manage
various events like dragstart, dragover, and drop.

Steps to Implement Drag and Drop:

1. Make Elements Draggable: Use the draggable attribute in HTML to indicate which elements
can be dragged.

2. Handle the Drag and Drop Events: Use JavaScript to handle the different phases of the drag-
and-drop process.

3. Use the DataTransfer Object: Transfer data (such as the element's ID or content) from the
dragged element to the drop target.

Example with HTML:

<div id="drag1" draggable="true" style="width: 100px; height: 100px; background-color: coral;">

Drag me!

</div>

<div id="dropZone" style="width: 200px; height: 200px; background-color: lightblue; margin-top:


20px;">

Drop here

</div>

Example with JavaScript:

// Get the draggable element and drop zone

const dragElement = document.getElementById('drag1');

const dropZone = document.getElementById('dropZone');

// Add event listener to handle dragstart event

dragElement.addEventListener('dragstart', (event) => {

// Set data to transfer (in this case, the ID of the dragged element)

event.dataTransfer.setData('text', event.target.id);

});

// Prevent the default behavior for dragover to allow dropping

dropZone.addEventListener('dragover', (event) => {

event.preventDefault(); // Allows the element to be dropped


});

// Handle the drop event

dropZone.addEventListener('drop', (event) => {

event.preventDefault();

// Get the data (the ID of the dragged element)

const data = event.dataTransfer.getData('text');

// Append the dragged element to the drop zone

const draggedElement = document.getElementById(data);

event.target.appendChild(draggedElement);

// Optionally, you can change the style or behavior after the drop

draggedElement.style.backgroundColor = "lightgreen";

});

XML: Introduction
XML (eXtensible Markup Language) is a widely-used markup language designed to store, transport,
and structure data in a format that is both human-readable and machine-readable. It was developed
by the World Wide Web Consortium (W3C) and became a standard in 1998.

Key Features of XML:

1. Extensible: XML allows users to define their own custom tags, unlike HTML, which has
predefined tags. This flexibility enables XML to be used for a wide range of applications, from
document representation to data exchange.

2. Self-descriptive: XML data is self-describing because it pairs values with meaningful tags,
making the data understandable even without additional documentation.

3. Platform-Independent: XML can be used across different platforms, systems, and


applications, making it ideal for data sharing over the internet and between various
technologies.

4. Hierarchical Structure: XML organizes data in a tree-like structure (hierarchy) with nested
elements. This makes it well-suited for representing complex data with parent-child
relationships.

5. Human-Readable: XML is designed to be readable by both humans and machines, making it


easier to understand, maintain, and modify.

6. Data Exchange Format: XML is commonly used for exchanging data between different
system, due to its structured format.
Comparison of XML and HTML

XML (eXtensible Markup HTML (HyperText Markup


Aspect
Language) Language)

Designed to store and Designed to display data


Purpose
transport data. (web content) in a browser.

Uses predefined tags


Users can define their own
Tag Definition specified by the HTML
custom tags.
standard.

Highly flexible; no predefined Less flexible; has a fixed set


Flexibility
structure. of tags for specific purposes.

Structured to store data in a Focused on the presentation


Data Structure
hierarchical format. and layout of data.

Tags define how data should


Self- Self-descriptive; tags
be displayed, not its
Descriptive describe the data content.
content.

More lenient syntax;


Strict syntax; well-formed
Syntax Rules browsers can correct minor
documents are mandatory.
errors.

Some tags (e.g., <img>,


Every opening tag must have
Closing Tags <br>, <hr>) do not need
a corresponding closing tag.
closing tags.

Case-insensitive (<TITLE>
Case Case-sensitive (<Title> and
and <title> are treated the
Sensitivity <title> are different).
same).

Attributes are mainly used to Attributes control the


Use of
provide additional appearance or behavior of
Attributes
information. elements.

Strict error handling; if More forgiving; browsers try


Error Handling there’s a mistake, it won’t to render pages despite
work. errors.

Focuses on data content and


Data vs. Focuses on how content is
structure, not its
Presentation displayed to the user.
presentation.

Supports namespaces to
Namespaces No concept of namespaces.
avoid tag name conflicts.

Used in data exchange, Used in web development


Usage configuration files, document for creating web pages and
storage. apps.
XML (eXtensible Markup HTML (HyperText Markup
Aspect
Language) Language)

No such requirement;
Document Must have one root element
typically starts with <html>
Root enclosing all other elements.
but not mandatory.

Syntax for comments: <!-- Same syntax for comments:


Comments
This is a comment -->. <!-- This is a comment -->.

Uses versioning in
No versioning within the
Versioning declaration (e.g., <?xml
document itself.
version="1.0"?>).

Cannot display data directly;


Displays data directly in web
Data Display needs a style sheet (e.g.,
browsers.
XSL).

Syntax in XML:
• XML syntax is made up of nested elements with opening and closing tags.
• It can include attributes to give additional information about elements.
• XML is hierarchical, allowing complex data to be structured in a tree-like format.

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

<catalog>

<book id="1">

<title>Introduction to XML</title>

<author>John Doe</author>

<genre>Programming</genre>

<price>29.99</price>

<publish_date>2023-05-10</publish_date>

</book>

<book id="2">

<title>Mastering Agile</title>

<author>Jane Smith</author>

<genre>Project Management</genre>

<price>39.99</price>

<publish_date>2022-08-15</publish_date>

</book>

</catalog>
Explanation of Syntax:
1. XML Declaration (<?xml version="1.0" encoding="UTF-8"?>):
o Declares the XML version and the character encoding. In this case, the XML
document is using version 1.0 and UTF-8 encoding.
2. Root Element (<catalog>):
o Every XML document must have one root element that contains all other
elements. Here, <catalog> is the root element, which encapsulates all the
books.
3. Child Elements (<book>, <title>, <author>, etc.):
o These are nested within the root element. Each <book> contains additional
child elements like <title>, <author>, <genre>, etc. Each of these defines
specific details about the book.
4. Attributes (id="1", id="2"):
o Attributes provide additional information about elements. For example, each
<book> has an attribute id that uniquely identifies the book.
5. Element Content:
o Each element can contain text (data) between its opening and closing tags. For
example, <title>Introduction to XML</title> contains the text "Introduction to
XML" as the content of the <title> element.
6. Closing Tags:
o Every XML element must have a closing tag. For example, <author>John
Doe</author> has an opening <author> and a closing </author> tag.

Document Structure:
In XML (eXtensible Markup Language), a document is structured in a hierarchical way, meaning it has
a tree-like arrangement where elements contain nested sub-elements. This allows for the clear
representation of complex data. Understanding the document structure in XML is crucial for creating
well-formed XML documents.

Here’s a breakdown of the key components that define the structure of an XML document:

1. XML Declaration (Prolog)

• The XML declaration is optional but typically appears at the top of the document. It specifies
the XML version and character encoding used in the document.

• Example:

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

• This line tells parsers that the document follows the rules of XML version 1.0 and uses UTF-8
encoding (a common encoding system).

2. Root Element

• Every XML document must have exactly one root element, also called the "parent" element,
which contains all other elements in the document.
• Example:

<catalog>

<!-- All other elements (child elements) go inside the root element -->

</catalog>

• In this case, <catalog> is the root element, and it contains any nested child elements that
represent data.

3. Elements (Tags)

• XML documents are primarily made up of elements. Elements are defined by opening and
closing tags. They can contain text, attributes, or other nested elements.

• Example:

<book>

<title>XML Basics</title>

<author>John Doe</author>

</book>

• Here, <book> is an element, and it contains two child elements: <title> and <author>.
Elements can be nested within each other to form a hierarchy.

4. Attributes

• Elements can have attributes, which provide additional information about the element.
Attributes are defined inside the opening tag of an element.

• Example:

<book id="101" language="English">

<title>XML Basics</title>

<author>John Doe</author>

</book>

• In this case, the <book> element has two attributes: id="101" and language="English".
Attributes give more details about the book, like its ID and the language.

5. Element Content

• XML elements can contain:

o Text: The actual data or content inside the element.

o Nested elements: Other elements can be contained within a parent element,


forming a tree structure.

o Empty elements: Some elements may not have content and can be self-closed.

• Example with content:

<title>XML Basics</title>

• Example with nested elements:

<book>
<title>XML Basics</title>

<author>John Doe</author>

</book>

• Example of an empty element:

<book id="102"/>

6. Comments

• Comments can be added to XML to leave notes or explanations for people reading the code.
Comments are ignored by XML parsers.

• Example:

<!-- This is a comment -->

<book>

<title>XML Basics</title>

</book>

Document Type Definitions


A Document Type Definition (DTD) in XML is a set of rules that define the structure and legal
elements and attributes for an XML document. It ensures that the XML data adheres to a specific
format, helping validate the document's structure and content. A DTD can be included in the XML
document itself (internal DTD) or referenced from an external file (external DTD).

Example :

XML Document: DTD (book.dtd):

<!DOCTYPE book SYSTEM "book.dtd"> XML

<book> <!ELEMENT book (title, author, genre)>

<title>The Lord of the Rings</title> <!ELEMENT title (#PCDATA)>

<author>J.R.R. Tolkien</author> <!ELEMENT author (#PCDATA)>

<genre>Fantasy</genre> <!ELEMENT genre (#PCDATA)>

</book>

In this example:

• The <!DOCTYPE book SYSTEM "book.dtd"> declaration specifies that the document conforms
to the rules defined in the book.dtd file.

• The DTD defines three elements: book, title, author, and genre.

• The #PCDATA notation indicates that these elements should contain parsed character data,
meaning plain text.

Key Concepts in DTD:

Element Declaration: Defines the allowed structure of elements.


o Syntax: <!ELEMENT element-name (content-model)>

Attribute Declaration: Specifies which attributes are allowed within an element and their types.

• Syntax: <!ATTLIST element-name attribute-name attribute-type default-value>

Entity Declaration: Defines reusable pieces of data.

• Syntax: <!ENTITY entity-name "value">

PCDATA and CDATA:

• PCDATA: Parsed Character Data, where XML tags are recognized.

• CDATA: Character Data, where everything is treated as plain text and tags are not parsed.

External DTD: Referenced using the DOCTYPE declaration with an external URL or file.

• Syntax:

<!DOCTYPE root-element SYSTEM "file.dtd">

Advantages of Using DTD:

• Validation: Ensures that XML documents conform to a predefined structure.

• Clarity: Makes the structure and allowed data types clear to both humans and machines.

• Reusability: External DTDs can be reused across multiple XML files.

Namespaces
In XML, Namespaces are used to avoid naming conflicts when combining elements and attributes
from different XML vocabularies (or schemas) in a single document. They provide a way to
distinguish between elements that might have the same name but belong to different contexts.

Why XML Namespaces Are Needed:

When XML documents or schemas from different sources are combined, there may be elements with
the same name, but they represent different types of data. Without namespaces, it would be unclear
how to distinguish these elements. For example, an element called <name> in one schema could
represent a person’s name, while in another it could represent a product name.

How XML Namespaces Work:

Namespaces are identified using Uniform Resource Identifiers (URIs), which are unique. These URIs
are mapped to prefixes that are used in the XML document to differentiate elements and attributes.

1. Namespace Declaration: A namespace is declared using the xmlns attribute in the start tag
of an element. It defines a scope for the elements and attributes in that namespace.

Syntax:

<element xmlns:prefix="namespace-URI">

Example:

<catalog xmlns:book="http://example.com/book">

<book:title>XML Guide</book:title>

</catalog>

Here, book:title belongs to the namespace http://example.com/book.


2. Default Namespace: We can declare a default namespace for elements without requiring a
prefix.

Syntax:

<element xmlns="namespace-URI">

Example:

<catalog xmlns="http://example.com/book">

<title>XML Guide</title>

</catalog>

Here, the title element belongs to the default namespace http://example.com/book.

3. Namespace Prefix: The prefix is a shorthand used in the document to refer to the
namespace URI. This allows you to distinguish between elements from different namespaces.
Prefixes are arbitrary but must be unique within the XML document.

Example:

<catalog xmlns:book="http://example.com/book" xmlns:author="http://example.com/author">

<book:title>XML Guide</book:title>

<author:name>John Doe</author:name>

</catalog>

Here, book:title and author:name belong to different namespaces, identified by their prefixes.

Advantages of XML Namespaces:

1. Avoid Naming Conflicts: They prevent collisions between elements or attributes from
different schemas that may have identical names.

2. Clarity: They make XML documents easier to read and understand by specifying the context
of each element.

3. Scalability: Namespaces allow XML to combine data from multiple sources without risking
ambiguity, making XML highly adaptable for complex systems.
XML Schemas:

What is XML schema


XML schema is a language which is used for expressing
constraint(limitations) about XML documents. There are so many schema
languages which are used now a days for example Relax- NG and XSD (XML
schema definition).

An XML schema is used to define the structure of an XML document. It is like


DTD but provides more control on XML structure.

Benefits of XML Schemas:

• Validation: Ensures that XML documents follow a defined structure and data types.

• Interoperability: Different systems can understand and process XML if they follow to a
standard schema.

• Documentation: Provides a clear, structured representation of what data is expected.

Definition of Data Types: XML Schema defines data types for elements and attributes, making it
easier to ensure data accuracy and integrity. There are two main types:

• Simple Types: These include strings, numbers, dates, Booleans, etc.

• Complex Types: These define elements that can contain other elements and attributes.

Features of XML Schema :

1. Data Type Support: Defines built-in data types (string, integer, date) and allows
creation of custom types.
2. Simple and Complex Types: Supports single-value elements/attributes (simple
types) and nested structures (complex types).
3. Element/Attribute Declarations: Specifies data types, rules (required/optional), and
constraints for XML elements and attributes.
4. Constraints: Includes minOccurs, maxOccurs, patterns (regex), length, enumeration,
and range restrictions.
5. Namespaces: Allows for combining different XML vocabularies without naming
conflicts.
6. Inheritance and Type Derivation: Enables extension and restriction of existing
types for reuse and flexibility.
7. Extensibility: Supports importing or including other schema files, promoting
reusability.
8. Validation: Enforces structure and data rules, ensuring XML document validity.
9. Pattern Support: Validates values using custom patterns (e.g., emails, phone
numbers).
10. Annotation: Allows adding comments for documentation purposes within the
schema.
Example :
XML Document: XML Schema:

<book> <xs:schema
<title>The Lord of the Rings</title> xmlns:xs="http://www.w3.org/2001/X
<author>J.R.R. Tolkien</author> MLSchema">
<genre>Fantasy</genre> <xs:element name="book">
<price>29.99</price> <xs:complexType>
</book> <xs:sequence>
<xs:element name="title"
type="xs:string"/>
<xs:element name="author"
type="xs:string"/>
<xs:element name="genre"
type="xs:string"/>
<xs:element name="price"
type="xs:decimal"/>

</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Displaying Raw XML Documents


Displaying Raw XML Documents refers to viewing the XML file directly in its original form,
without any transformation, styling, or rendering applied to it. In this view, the XML is presented as a
text file, showing all its tags, elements, and data content exactly as they are written.

What Does "Raw XML" Mean?

• Raw XML means the unprocessed XML code that includes:

o Tags (e.g., <book>, <title>).

o Attributes (e.g., <book genre="fiction">).

o Data values inside the tags (e.g., <title>Harry Potter</title>).

When displayed raw, you see the XML structure itself, not a visually formatted or user-friendly view
(like in a web browser or software interface).

Why Display Raw XML?


1. Debugging and Validation: Developers and data processors may need to inspect the raw
XML to check for errors, ensure the structure is correct, or validate that all required elements
are present.

2. Data Exchange: XML is often used to exchange data between systems. Displaying it raw
allows both sides to verify the exact format of the data being sent or received.

3. Viewing Without Transformation: Sometimes, when XML is displayed on a web page or in an


application, it is transformed using XSLT or CSS to make it look more presentable. Viewing
raw XML bypasses these transformations to show the data in its original format.

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

<bookstore>

<book>

<title>Harry Potter</title>

<author>J.K. Rowling</author>

<price>29.99</price>

</book>

</bookstore>

• In Web Browsers: Most modern browsers (like Chrome, Firefox, Edge) display raw XML
documents in a tree format, making it easier to read. Tags are collapsible, and text is colored
to distinguish between elements and attributes.
• In Text Editors: If you open an XML file in a text editor (e.g., Notepad, VS Code), you will see
the raw text without any formatting or styling.
• In Developer Tools: XML data can also be viewed raw using development tools when testing
API responses or backend data. This is often the default view when working with RESTful or
SOAP APIs.

Displaying XML Documents With CSS


Displaying XML Documents with CSS refers to applying Cascading Style Sheets (CSS) to style and
format the appearance of XML documents, making them visually appealing and easier to read in a
web browser. By default, XML documents are displayed as plain text when viewed in browsers.
However, using CSS, you can control the way elements are displayed, such as changing font colors,
sizes, or adding spacing.

Improved Readability: Raw XML can be hard to read, especially when the document is large. CSS can
enhance readability by adding colors, fonts, and spacing.

Custom Formatting: CSS allows you to highlight important sections or elements, making the data
presentation more meaningful.
User-Friendly Display: In some cases, XML data might be exposed to end users. Styling it makes the
data more user-friendly without requiring transformation into HTML or other formats.

XML CODE:

<?xml-stylesheet type="text/css" href="styles.css"?>

<bookstore>

<book genre="fantasy">

<title>Harry Potter</title>

<author>J.K. Rowling</author>

<price>29.99</price>

</book>

<book genre="science-fiction">

<title>Dune</title>

<author>Frank Herbert</author>

<price>19.99</price>

</book>

</bookstore>

CSS CODE :
/* Style the 'book' elements with a border and padding */

book {

display: block;

border: 2px solid #000;

padding: 10px;

margin-bottom: 10px;

background-color: #f9f9f9;

/* Style the 'title' elements in a larger, bold font */

title {

display: block;

font-size: 20px;

font-weight: bold;

color: #333;
margin-bottom: 5px;

/* Style the 'author' elements with italics */

author {

display: block;

font-style: italic;

color: #777;

margin-bottom: 5px;

/* Style the 'price' elements with a different color */

price {

display: block;

color: green;

font-size: 18px;

/* Add some extra styling for the genre attribute */

[genre="fantasy"] {

border-color: purple;

[genre="science-fiction"] {

border-color: blue;

Linking the CSS to XML: The XML file includes the line <?xml-stylesheet type="text/css"
href="styles.css"?> at the top, which tells the browser to use the styles.css file to style the XML.
XSLT Style Sheets
XSLT, or Extensible Stylesheet Language Transformations, is a language designed to transform XML
documents into other formats, such as HTML, text, or even other XML documents. It's a powerful
tool for manipulating XML data and generating dynamic content.

XSLT, or Extensible Stylesheet Language Transformations, is a language designed to transform XML


documents into other formats, such as HTML, text, or even other XML documents. It's a powerful
tool for manipulating XML data and generating dynamic content.

Real-World Use Cases:

• Generating Reports: Transforming XML data into formatted reports (PDF, Word, Excel).

• Creating Web Pages: Dynamically generating web pages based on XML data.

• Data Conversion: Converting XML data to other formats (JSON, CSV).

• Data Filtering and Manipulation: Selecting and modifying specific parts of XML data.

How XSLT Works:

1. XML Document: This is the source document containing the data you want to transform.

2. XSLT Stylesheet: This document contains the rules for transforming the XML document. It's
written in XML syntax and uses XSLT elements to define the transformation logic.

3. XSLT Processor: This software reads both the XML document and the XSLT stylesheet and
applies the transformation rules to generate the output document.

Key XSLT Elements:

• <xsl:template>: Defines a template to be applied to specific elements in the XML document.

• <xsl:value-of>: Selects a value from the XML document and inserts it into the output.

• <xsl:apply-templates>: Recursively applies templates to child elements.

• <xsl:for-each>: Iterates over a set of elements and applies templates to each element.

• <xsl:if> and <xsl:choose>: Conditional statements to control the flow of the transformation.

1. XML Processors - Web Services


XML Processors: Tools for Working with XML

An XML processor is a software tool or library designed to read, parse, and process XML documents.
It acts as an intermediary between the XML document and the application, enabling a wide range of
operations.

Key Types of XML Processors:

1. XML Parsers( A parser is a software component that analyzes input data (usually text) and
builds a data structure):

o SAX (Simple API for XML):

▪ Reads XML documents sequentially, event-based processing.


o DOM (Document Object Model):

▪ Creates a tree-like structure in memory to represent the XML document.

2. XSLT Processors:

o Transform XML documents into other formats (HTML, text, other XML).

3. XML Validation Processors:

o Check XML documents against a specified DTD or XML Schema.

4. XML Query Processors:

o Query XML documents using languages like XPath and XQuery.

Popular XML Processors:

• Java:

o JAXP (Java API for XML Processing)

o Apache Xerces

o VTD-XML

• Python:

o ElementTree

o lxml

• .NET:

o System.Xml namespace

Real-World Applications:

• Web Development:

o Data exchange between web servers and applications.

o Generating dynamic web content.

o Configuring web applications.

• Data Integration:

o Combining data from various sources.

o Transforming data formats.

o Data migration.

• Data Storage and Retrieval:

o Storing and retrieving structured data.

o Indexing and searching XML documents.

• Configuration Files:

o Defining application settings and configurations.

• Document Management:

o Storing and managing electronic documents.

You might also like