Noida Institute of Engineering and Technology, Greater Noida

Web Technology
(ACSE-0505)

Unit: 2

Introduction to HTML & XML

Rajat Kumar
Course Details (Asst. Professor)
(B. Tech. 5th Sem)
CSE Department

December 13, 2024 Rajat Kumar WT UNIT 2 1

 Brief Introduction of Faculty

COURSE BOARD/UNIVERSITY YEAR OF PASSING

M.Tech ITM, AKTU, Lucknow 2020

B.Tech ITM, AKTU, Lucknow 2016

• Certificate of Recognition for role as Faculty in MOOCs Course

Python/CSS from E & ICT Academy, IIT Kanpur.
• Worked on Internet of things (IoT) technology under the topic Energy
efficient technique for data aggregation in M.Tech.
• Published paper in International journal of research in electronics and
computer engineering (IJRECE) on “Energy efficient technique for data
aggregation in IoT” (April-June 2019).
• Area of Interest: FullStack Development

Rajat Kumar WT UNIT 2

December 13, 2024 2

 Evaluation Scheme

December 13, 2024 Rajat Kumar WT UNIT 2 3

 Syllabus

December 13, 2024 Rajat Kumar WT UNIT 2 4

 Syllabus

December 13, 2024 Rajat Kumar WT UNIT 2 5

 Branch Wise Application

Adaptability: It gives bother free migration, basic, and efficient structure.

Components: They help in creating custom elements that can be reused in

HTML.

Transition: Various methodologies are given in Vue.js to apply a transition to

HTML components when they are included or expelled from the DOM.

Detailed Documentation: It gives a simple learning curve through point-by-

point documentation

December 13, 2024 Rajat Kumar WT UNIT 2 6

 Course Objective

Provide an overview of the basic concepts and technologies used in web

development, including client-server architecture, HTTP protocol, and web
browsers.

Teach the fundamentals of HTML (Hypertext Markup Language) for

creating the structure and content of web pages. Cover topics such as tags,
elements, attributes, and semantic markup.

Introduce Cascading Style Sheets (CSS) for applying visual styles to web
pages. Cover topics such as selectors, properties, box model, layout
techniques, and responsive design.

Explore the fundamentals of JavaScript programming language for

enhancing interactivity and functionality in web pages. Cover topics such
as variables, data types, control structures, functions, and DOM
manipulation.

December 13, 2024 Rajat Kumar WT UNIT 2 7

 Course Outcomes (COs)

December 13, 2024 Rajat Kumar WT UNIT 2 8

 Program Outcomes (POs)

PO : 01. Engineering Knowledge

PO : 02. Problem Analysis

PO : 03. Design/Development of solutions

PO : 04. Conduct Investigations of complex problems
PO : 05. Modern tool usage
PO : 06. The engineer and society
PO : 07. Environment and sustainability
PO : 08. Ethics
PO : 09. Individual and teamwork
PO : 10. Communication
PO : 11. Project management and finance
PO : 12. Life-long learning

December 13, 2024 Rajat Kumar WT UNIT 2 9

 COs - POs Mapping

ACSE
0505
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

3 2 2 1 1 1 1 1 3 3 2 3
1
3 2 3 1 3 2 2 1 3 3 3 3
2
3 2 3 2 3 2 2 2 3 3 2 3
3
3 3 3 2 3 2 2 2 3 3 2 3
4
3 3 3 2 3 2 2 2 3 3 2 3
5
Average 2.4 2.8 1.6 2.6 1.8 1.8 1.6 3 3 2.2 3
3

December 13, 2024 Rajat Kumar WT UNIT 2 10

 Program Specific Outcomes(PSOs)

• PSO1: Work as software developer, database administrator, tester or

networking engineering for providing solutions to the real world and
industrial problems.
• PSO2: Apply core subjects of information technology related to data
structure and algorithm, software engineering, web technology, operating
system, database and networking to solve complex IT problems.
• PSO3: Practice multi-disciplinary and modern computing techniques by life-
long learning to establish innovative career.
• PSO4: Work in a team or individual to manage projects with ethical concern
to be a successful employee or employer in IT industry.

Rajat Kumar WT UNIT 2

December 13, 2024 11
 COs - PSOs Mapping

Course Outcomes Program Specific Outcomes

PSO1 PSO2 PSO3 PSO4

1 3 3 2 3

2 3 3 3 2

3 3 3 2 2

4 3 2 3 2

5 3 2 2 2

AVG 3 2.6 2.4 2.2

*3= High *2= Medium *1 = Low

December 13, 2024 Rajat Kumar WT UNIT 2 12

 Program Educational Objectives (PEOs)

• PEO1: Able to apply sound knowledge in the field of information

technology to fulfill the needs of IT industry.

• PEO2: Able to design innovative and interdisciplinary system through

latest digital technology.

• PEO3: Able to inculcate professional and social ethics, team work and
leadership serving the society.

• PEO4: Able to inculcate life-long learning in the field of computing for

successful career in organizations and R & D sectors.

December 13, 2024 Rajat Kumar WT UNIT 2 13

 Result Analysis

•Web Technology Result of 2020 – 21: 96.97%

•Average Marks: 53.33

• Web Technology Result of 2021 – 22: 98%

• Average Marks: 57.5%

December 13, 2024 Ajeet Kumar WT UNIT 2 14

 Pattern of Online External Exam Question Paper (100 marks)

December 13, 2024 Rajat Kumar WT UNIT 2 15

 Pattern of Online External Exam Question Paper (100 marks)

December 13, 2024 Rajat Kumar WT UNIT 2 16

 Pattern of Online External Exam Question Paper (100 marks)

December 13, 2024 Rajat Kumar WT UNIT 2 17

 Pattern of Online External Exam Question Paper (100 marks)

December 13, 2024 Rajat Kumar WT UNIT 2 18

 Pattern of Online External Exam Question Paper (100 marks)

December 13, 2024 Rajat Kumar WT UNIT 2 19

 Prerequisite and Recap

To begin learning HTML and XML, there are a few helpful prerequisites.

• Familiarity with computers, basic text editing skills, and a general

understanding of the internet are beneficial.
• Having a grasp of markup concepts and the structure of web pages or XML
documents is useful. Learning the basics of HTML, including tags and
elements, as well as gaining an understanding of XML's syntax and
differences from HTML, is essential.
• While knowledge of CSS can enhance the learning process, it is not
mandatory. Lastly, problem-solving skills and a logical mindset will be
valuable as you tackle coding challenges.
• With these prerequisites in place, you'll be well-equipped to start learning
HTML and XML.

December 13, 2024 Rajat Kumar WT UNIT 2 20

 Brief Introduction about the Subject with videos

YouTube /other Video Links:

1. "HTML Crash Course For Absolute Beginners" by Traversy Media: Link:
https://www.youtube.com/watch?v=UB1O30fR-EE
2. "HTML Full Course - Build a Website Tutorial" by freeCodeCamp.org: Link:
https://www.youtube.com/watch?v=pQN-pnXPaVg
3. "XML Tutorial for Beginners" by Derek Banas: Link:
https://www.youtube.com/watch?v=mGcZZwkjWj8
4. "Learn XML in 15 Minutes" by Webucator: Link:
https://www.youtube.com/watch?v=4AN4_NG9N4w
5. "HTML and XML Tutorial Playlist" by The Net Ninja: Link:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G

December 13, 2024 Rajat Kumar WT UNIT 2 21

 Unit Content

• HTML, DOM, Basic Structure of HTML Document,

• Markup Tags, Working with Lists and Tables,
• Working with Hyperlink, Image Handling and Frames,
• HTML form for use Inputs, Various new form elements,
• XML Syntax, Attributes and Namespace, HTTP Request ,
• Parser DOM, Xpath, XSLT, Xquerry, Xlink,
• Validator, DTD and XML Schema.

December 13, 2024 Rajat Kumar WT UNIT 2 22

 Unit Objective

HTML Objectives:

•Understand the basic structure of an HTML document.

•Learn and apply HTML tags to create well-formed web pages.
•Format text and create headings, paragraphs, lists, and links.
•Incorporate images, videos, and other media into web pages.
•Construct tables to organize data.
•Implement forms to collect user input.
•Apply CSS styles to enhance the visual appearance of web pages.
•Understand HTML semantics and the proper use of semantic elements.

December 13, 2024 Rajat Kumar WT UNIT 2 23

 Unit Objective

XML Objectives:

•Understand the basic syntax and structure of XML documents.

•Create well-formed XML documents using appropriate tags and nesting.
•Define and use XML namespaces for proper document organization.
•Validate XML documents against Document Type Definitions (DTD) or XML
Schema.
•Transform XML data using XSLT (eXtensible Stylesheet Language
Transformations).
•Query and extract data from XML documents using XPath.
•Understand the purpose and usage of XML parsers and processors.
•Interact with XML data through programming languages and APIs.

December 13, 2024 Rajat Kumar WT UNIT 2 24

 Topic Objective

Introduction to HTML: This objective covers the fundamental aspects of HTML,

including document structure, text formatting, linking to other web pages, adding
images, and establishing a solid understanding of HTML syntax and elements. By
achieving this objective, you'll have a strong foundation in HTML that will enable you
to create static web pages effectively.

Introduction to XML: This objective encompasses the essential aspects of XML,

including document structure, syntax rules, the use of namespaces for organizing data,
transforming XML with XSLT, extracting information with XPath, and integrating
XML within various programming environments. By achieving this objective, you'll
have a solid grasp of XML and its applications for data storage, interchange, and
manipulation.

December 13, 2024 Rajat Kumar WT UNIT 2 25

 HTML

HTML5 is the latest version of the Hypertext Markup Language (HTML),

which is the standard language used for creating and structuring web pages.

It introduced several new features and improvements over its predecessor,

HTML4, to enhance the functionality and interactivity of web content.

Here are some of the basics of HTML5.

December 13, 2024 Rajat Kumar WT UNIT 2 26

 Understand the structure of an HTML page

1. Document Type Declaration: At the very beginning of an HTML document, you

need to include the document type declaration, which tells the browser that the
document is written in HTML. In HTML5, the doctype declaration is simply <!
DOCTYPE html>.

2. HTML Tag: The HTML tag (<html>) serves as the root element of the HTML
document. It encapsulates the entire content of the page.

3. Head Section: The <head> element contains metadata and other non-visible
information about the document. It does not represent the visible content of the page.
Some common elements within the <head> section include:

<meta>: Defines metadata such as character encoding, viewport settings.

<title>: Specifies the title of the page, which appears in the browser's title bar or tab.
<link>: Used to link external CSS stylesheets or other resources.
<script>: Used to include JavaScript code or link to external JavaScript files.

December 13, 2024 Rajat Kumar WT UNIT 2 27

 Cont…

4. Body Section: The <body> element represents the main content of the web page. It
contains all the visible elements that are displayed in the browser window. Common elements
within the <body> section include:

<header>: Represents the introductory content at the top of the page, often containing logos,
navigation menus, or headings.
<nav>: Represents a section containing navigation links.
<main>: Represents the main content area of the page.
<article>: Represents a self-contained composition within a document, such as a blog post or
a news article.
<section>: Represents a standalone section within a document, typically grouped by a
common theme.
<aside>: Represents content that is tangentially related to the main content, such as sidebars
or pull quotes.
<footer>: Represents the footer section at the bottom of the page, often containing copyright
information, links, etc.

December 13, 2024 Rajat Kumar WT UNIT 2 28

 Cont…

5. HTML Elements: Within the body section, you can use various HTML elements to
structure and format your content.

Some commonly used elements include headings (<h1>, <h2>, etc.),

paragraphs (<p>),
lists (<ul>, <ol>, <li>),
images (<img>),
links (<a>),
and more.

December 13, 2024 Rajat Kumar WT UNIT 2 29

 New Semantic elements in HTML 5

HTML5 introduced several new semantic elements that provide a more structured and
meaningful way to represent content on web pages.

<header>: Represents the introductory content or a group of navigational links for a

section or the whole document.

<nav>: Defines a section containing navigation links.

<main>: Represents the main content of a document. It should be unique and not
nested within other structural elements like <article>, <section>, or <aside>.

<article>: Represents a self-contained composition that can be independently

distributed or reused, such as a blog post, a news story, or a forum post.

<section>: Defines a thematic grouping of content within a document, such as chapters,

tabbed content, or a group of related items.

December 13, 2024 Rajat Kumar WT UNIT 2 30

 Cont…

<aside>: Represents a section of content that is tangentially related to the main content,
such as sidebars, pull quotes, or advertising.

<figure> and <figcaption>: <figure> represents self-contained content like images, videos,
or illustrations, while <figcaption> provides a caption or description for the content within
the <figure> element.

<footer>: Defines the footer section of a document or a section. It typically contains

information about the author, copyright data, links to related documents, or contact
information.

<time>: Represents a specific date, time, or duration. It can be used to mark up events,
publication dates, or timestamps.

<mark>: Highlights a portion of text to indicate its relevance or importance within the
context.

December 13, 2024 Rajat Kumar WT UNIT 2 31

 Tables

Tables in HTML5 are used to present tabular data, where information is organized in rows
and columns. HTML5 introduced new attributes and elements to enhance the accessibility
and semantic structure of tables.

Table Structure:

<table>: Defines the container for the entire table.

<thead>, <tbody>, and <tfoot>: These elements group the table's header, body, and footer
sections, respectively. They provide structural organization to the table, but their usage is
optional.
Table Headers:

<th>: Represents a table header cell. It is used to define the headers of columns or rows.
<tr>: Defines a table row.
<th scope="">: This attribute specifies the scope of a header cell. It can take values like
"row", "col", "rowgroup", or "colgroup" to indicate the scope of the header.

December 13, 2024 Rajat Kumar WT UNIT 2 32

 Cont…

Table Data Cells:

<td>: Represents a table data cell. It is used to define the content within a table row.
Table Captions:

<caption>: Defines a caption for the table. It should be placed immediately after the
opening <table> tag.

Table Spanning:

colspan attribute: Specifies the number of columns a table cell should span.

rowspan attribute: Specifies the number of rows a table cell should span.

December 13, 2024 Rajat Kumar WT UNIT 2 33

 Cont…

Table Headers and ID References:

<th id="">: Assigns a unique ID to a table header cell.

<td headers="">: Specifies the ID(s) of the header cell(s) that apply to a data cell. This
association helps assistive technologies understand the relationships between headers and
data cells.

December 13, 2024 Rajat Kumar WT UNIT 2 34

 HTML Lists

HTML lists allow web developers to group a set of related items in lists.

An unordered HTML list:

•Item
•Item
•Item
•Item

An ordered HTML list:

1.First item
2.Second item
3.Third item
4.Fourth item
Try it Yours

December 13, 2024 Rajat Kumar WT UNIT 2 35

 Cont…

Unordered HTML List

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

December 13, 2024 Rajat Kumar WT UNIT 2 36

 Cont…

HTML Description Lists

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

December 13, 2024 Rajat Kumar WT UNIT 2 37

 Daily Quiz
1: Which tag is used to define the main heading of a webpage?
a) <header>
b) <h1>
c) <title>
d) <main>
Answer: b) <h1>

2: Which tag is used to create a paragraph in HTML?

a) <p>
b) <h2>
c) <div>
d) <span>
Answer: a) <p>

3: Which attribute is used to specify the URL of an image in the <img> tag?
a) src
b) alt
c) href
d) link
Answer: a) src
December 13, 2024 Rajat Kumar WT UNIT 2 38
 Daily Quiz

4: Which tag is used to create a numbered list in HTML?

a) <ol>
b) <ul>
c) <li>
d) <dl>
Answer: a) <ol>

5: Which attribute is used to provide alternative text for an image in the <img> tag?
a) src
b) alt
c) title
d) link
Answer: b) alt

6: Which tag is used to create a horizontal rule (a horizontal line) in HTML?

a) <hr>
b) <br>
c) <line>
d) <rule>
Answer: a) <hr>
December 13, 2024 Rajat Kumar WT UNIT 2 39
 HTML Links

<a href="url">link text</a>

By default, links will appear as follows in all browsers:

•An unvisited link is underlined and blue

•A visited link is underlined and purple
•An active link is underlined and red

December 13, 2024 Rajat Kumar WT UNIT 2 40

 Cont…

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

<a href="https://www.niet.co.in//" target="_blank">Visit NIET!</a>

December 13, 2024 Rajat Kumar WT UNIT 2 41

 Cont…

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href
attribute.

A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):

<h2>Absolute URLs</h2>
<p><a href="https://www.niet.co.in/">NIET</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>

December 13, 2024 Rajat Kumar WT UNIT 2 42

 HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

December 13, 2024 Rajat Kumar WT UNIT 2 43

 Topic Objective

Students were able to learn:

• Basics of HTML
• Concepts of HTML Tags
• Concepts of Tables
• Concepts of HTML Lists
• Concepts of HTML Links
• Concepts of HTML Images

December 13, 2024 Rajat Kumar WT UNIT 2 44

 Working with HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server
for processing.
The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

December 13, 2024 Rajat Kumar WT UNIT 2 45

 The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting

zero or more of many choices)

<input type="submit"> Displays a submit button (for

submitting the form)

<input type="button"> Displays a clickable button

December 13, 2024 Rajat Kumar WT UNIT 2 46

 Text Fields

The <input type="text"> defines a single-line input field for text input.

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

December 13, 2024 Rajat Kumar WT UNIT 2 47

 The <label> Element

• Notice the use of the <label> element in the example above.

• The <label> tag defines a label for many form elements.

• The <label> element is useful for screen-reader users, because the screen-reader
will read out loud the label when the user focuses on the input element.

• The <label> element also helps users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks the
text within the <label> element, it toggles the radio button/checkbox.

• The for attribute of the <label> tag should be equal to the id attribute of the
<input> element to bind them together.

December 13, 2024 Rajat Kumar WT UNIT 2 48

 Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value=“JS">
<label for="javascript">JavaScript</label>
</form>

December 13, 2024 Rajat Kumar WT UNIT 2 49

 Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

December 13, 2024 Rajat Kumar WT UNIT 2 50

 The Submit Button

• The <input type="submit"> defines a button for submitting the form data to a form-
handler.
• The form-handler is typically a file on the server with a script for processing input data.
• The form-handler is specified in the form's action attribute.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

December 13, 2024 Rajat Kumar WT UNIT 2 51

 The Submit Button

• The <input type="submit"> defines a button for submitting the form data to a form-
handler.
• The form-handler is typically a file on the server with a script for processing input data.
• The form-handler is specified in the form's action attribute.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

December 13, 2024 Rajat Kumar WT UNIT 2 52

 The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>

December 13, 2024 Rajat Kumar WT UNIT 2 53

 HTML Input Types

Describing the different types for the HTML <input> element.

<input type="number">
<input type="button"> <input type="password">
<input type="checkbox"> <input type="radio">
<input type="color"> <input type="range">
<input type="date"> <input type="reset">
<input type="datetime-local"> <input type="search">
<input type="email"> <input type="submit">
<input type="file"> <input type="tel">
<input type="hidden"> <input type="text">
<input type="image"> <input type="time">
<input type="month"> <input type="url">
<input type="week">

December 13, 2024 Rajat Kumar WT UNIT 2 54

 HTML Input Attributes

Describing the different attributes for the HTML <input> element.

The value Attribute
The input value attribute specifies an initial value for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

December 13, 2024 Rajat Kumar WT UNIT 2 55

 Topic Objective

Students were able to learn:

• Working with HTML Forms

• Usage of various form tags
• Usage of various input elements
• Working with various semantic elements like Radio Buttons, CheckBoxes,
Dropdown menus etc.

December 13, 2024 Rajat Kumar WT UNIT 2 56

 Daily Quiz

1: Which attribute is used to specify the URL that a link should navigate to?
a) src
b) link
c) href
d) url Answer: c) href

2: How do you open a link in a new browser tab/window?

a) Using the new attribute
b) Using the target="_blank" attribute
c) Using the open attribute
d) Using the popup attribute Answer: b) Using the target="_blank" attribute

3: How do you create an anchor (bookmark) within the same webpage?

a) Using the <a href="#bookmark"> tag
b) Using the <bookmark> tag
c) Using the <a href="anchor"> tag
d) Using the <a name="bookmark"> tag
Answer: d) Using the <a name="bookmark"> tag

December 13, 2024 Rajat Kumar WT UNIT 2 57

 Daily Quiz

4: Which attribute is used to specify the HTTP method for submitting a form?
a) action
b) method
c) submit
d) type
Answer: b) method

5: How do you create a text input field in a form?

a) <input type="text">
b) <textinput>
c) <input field="text">
d) <textfield>
Answer: a) <input type="text">

6: Which attribute is used to define a placeholder text in an input field?

a) value
b) text
c) placeholder
d) input
Answer: c) placeholder
December 13, 2024 Rajat Kumar WT UNIT 2 58
 Introduction to XML

XML, which stands for Extensible Markup Language, is a versatile and widely used
markup language designed for storing and exchanging structured data. It provides a
flexible way to describe and organize information in a hierarchical format.

XML uses tags to define elements within a document, similar to HTML. However,
unlike HTML, which is primarily used for structuring web content, XML is not limited
to any specific domain. It is a generic markup language that can be used for a variety
of purposes, such as storing data, configuring settings, representing document
structures, and more.

One of the key strengths of XML is its ability to define custom tags and document
structures. This flexibility allows XML to adapt to different data formats and industry-
specific needs. XML documents are typically human-readable and self-descriptive,
making them easy to understand and interpret.

December 13, 2024 Rajat Kumar WT UNIT 2 59

 Introduction XML

XML Definition

• Xml (eXtensible Markup Language) is a mark up language.

• XML is designed to store and transport data.

• XML became a W3C Recommendation on February 10, 1998.

• XML is designed to be self-descriptive.

• XML is designed to carry data, not to display data.

• XML is platform independent and language independent.

December 13, 2024 Rajat Kumar WT UNIT 2 60

 Introduction XML(cont..)

Benefit and Feature Of XML

• XML separates data from HTML

• XML simplifies data sharing

• XML simplifies data transport

• XML simplifies Platform change

December 13, 2024 Rajat Kumar WT UNIT 2 61

 XML Syntax

• Tags: XML documents are made up of elements enclosed within start and end tags.
Tags are used to define the structure and hierarchy of the document's content.
• Start tags begin with a less-than symbol (<), followed by the element name, and end
with a greater-than symbol (>).
• End tags have a similar syntax, but also include a forward slash (/) before the element
name.

December 13, 2024 Rajat Kumar WT UNIT 2 62

 Cont…

Elements: Elements are the building blocks of an XML document. They represent
individual pieces of information within the document. Each element has a start tag, an end
tag, and may contain nested elements and/or text content.
Attributes: Attributes provide additional information about an element. They are placed
within the start tag of an element and consist of a name-value pair. Attribute values are
enclosed in quotation marks.

December 13, 2024 Rajat Kumar WT UNIT 2 63

 XML Namespaces

XML namespaces are used to avoid naming conflicts when different XML vocabularies or
elements with the same name are combined. They provide a way to uniquely identify and
differentiate elements and attributes in an XML document.

The concept of namespaces allows elements and attributes to be distinguished by

associating them with a namespace prefix. A namespace is defined by a Uniform Resource
Identifier (URI), which serves as its unique identifier. The URI can point to a web page, a
schema definition, or any other resource that can be used to identify the namespace.

Namespace declarations are typically added to the root element of an XML document or to
individual elements. They are declared using the xmlns attribute, where the namespace
prefix is associated with its corresponding URI. The xmlns attribute without a prefix
specifies the default namespace for elements that don't have a namespace prefix explicitly
defined.

December 13, 2024 Rajat Kumar WT UNIT 2 64

 Cont…

Here's an example that demonstrates the use of namespaces in an XML document:

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

<root xmlns:ns1="http://www.example.com/ns1"
xmlns:ns2="http://www.example.com/ns2">
<ns1:element1>This is element 1 from namespace ns1</ns1:element1>
<ns2:element2>This is element 2 from namespace ns2</ns2:element2>
</root>

In this example, two namespaces are declared: ns1 and ns2. The prefixes ns1 and ns2 are
used to qualify the elements element1 and element2, respectively. By using different
prefixes, the elements can be distinguished even if they have the same local name.

December 13, 2024 Rajat Kumar WT UNIT 2 65

 Cont…

Namespace prefixes are not mandatory and can be omitted, as shown in the
following example:

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

<root xmlns="http://www.example.com/ns1">
<element1>This is element 1 from the default
namespace</element1>
<ns2:element2
xmlns:ns2="http://www.example.com/ns2">This is element 2
from namespace ns2</ns2:element2>
</root>

In this case, the default namespace is set using xmlns without a prefix. The
element element1 is associated with the default namespace, while element2 uses
the ns2 prefix to indicate its namespace.

December 13, 2024 Rajat Kumar WT UNIT 2 66

 XML HttpRequest

All modern browsers have a built-in XMLHttpRequest object to request data from a server.

The XMLHttpRequest object can be used to request data from a web server.
The XMLHttpRequest object is a developers dream, because you can:

•Update a web page without reloading the page

•Request data from a server - after the page has loaded
•Receive data from a server - after the page has loaded
•Send data to a server - in the background

December 13, 2024 Rajat Kumar WT UNIT 2 67

 Introduction XML(cont..)

XML Validation
• A well formed XML document can be validated against DTD or Schema.

• A well-formed XML document is an XML document with correct syntax.

• It is very necessary to know about valid XML document before knowing XML
validation.

• It must be well formed (satisfy all the basic syntax condition)

• It should be behave according to predefined DTD or XML schema

December 13, 2024 Rajat Kumar WT UNIT 2 68

 Introduction XML(cont..)

Rules for well formed XML

•It must begin with the XML declaration.

•It must have one unique root element.

•All start tags of XML documents must match end tags.

•XML tags are case sensitive.

•All elements must be closed.

•All elements must be properly nested.

•All attributes values must be quoted.

December 13, 2024 Rajat Kumar WT UNIT 2 69

 Introduction XML(cont..)

Example Of XML

<?xml version="1.0"?>
<employee>
<firstname>vimal</firstname>
<lastname>jaiswal</lastname>
<address>Gaziabad</address>
<email>[email protected]</email>
</employee>

December 13, 2024 Rajat Kumar WT UNIT 2 70

 Daily Quiz

1: What does XML stand for?

a) eXtensible Markup Language
b) Extra Markup Language
c) External Markup Language
d) Extended Markup Language
Answer: a) eXtensible Markup Language

2: Which character is used to indicate the start and end of an XML element?
a) <
b) >
c) /
d) &
Answer: a) <

3: Which is the correct syntax for defining an XML declaration?

a) <xml version="1.0">
b) <?xml version="1.0" ?>
c) <xml version="1.0" ?>
d) <?xml version="1.0">
Answer: b) <?xml version="1.0" ?>
December 13, 2024 Rajat Kumar WT UNIT 2 71
 Daily Quiz

4: How are attributes defined in XML?

a) Inside square brackets: [attribute="value"]
b) Inside angle brackets: <attribute="value">
c) Inside double quotes: attribute="value"
d) Inside parentheses: (attribute="value")
Answer: c) Inside double quotes: attribute="value"

5: Which symbol is used to separate the namespace prefix and element name in XML?
a) :
b) .
c) /
d) _
Answer: a) :

6: What is the purpose of XML Schema (XSD)?

a) To define the structure and data types of XML documents
b) To provide styling and presentation for XML documents
c) To define the display layout of XML documents
d) To transform XML documents into HTML
Answer: a) To define the structure and data types of XML documents
December 13, 2024 Rajat Kumar WT UNIT 2 72
 Introduction XML(cont..)

XML Document Object Model (DOM)

• It defines a standard way to access and manipulate documents.

• The Document Object Model (DOM) is a programming API for

HTML and XML documents.

• It defines the logical structure of documents and the way a document

is accessed and manipulated.

• XML DOM defines a standard way to access and manipulate XML

documents.

December 13, 2024 Rajat Kumar WT UNIT 2 73

 Introduction XML(cont..)

• XML Document Object Model (DOM)(cont..)

• The XML DOM is:

• A standard object model for XML

• A standard programming interface for XML

• Platform- and language-independent

• A W3C standard

December 13, 2024 Rajat Kumar WT UNIT 2 74

 Introduction XML(cont..)

• Example Of XML DOM

December 13, 2024 Rajat Kumar WT UNIT 2 75

 Introduction XML(cont..)
• Example Of XML DOM(cont..)

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.statu
s == 200) {
myFunction(this); } }

December 13, 2024 Rajat Kumar WT UNIT 2 76

 Introduction XML(cont..)
• Example Of XML DOM(cont..)

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")
[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>

December 13, 2024 Rajat Kumar WT UNIT 2 77

 Topic Objective

Students were able to learn:

• Basics of XML
• XML syntax
• XML Document
• XML Namespace
• XML Validation
• Basics of Document Object Model.

December 13, 2024 Rajat Kumar WT UNIT 2 78

 Introduction XML(cont..)

• Presenting and using XML

• Presenting XML is a Java web application framework for presenting HTML,

PDF, WML etc. in a device independent manner.

• It aims to achieve a complete separation of content and presentation.

• It supports various kinds of content including XML files, dynamic content,

SQL result sets and flat files.

• Presenting XML may be used as a command line tool or as a framework for a

servlet-based web application

December 13, 2024 Rajat Kumar WT UNIT 2 79

 Introduction XML(cont..)

XML Processors

• When a software program reads an XML document and takes

actions accordingly, this is called processing the XML.

• Any program that can read and process XML documents is known
as an XML processor.

• An XML processor reads the XML file and turns it into in-memory
structures that the rest of the program can access.

•This is called a parser, and it is an important component of every

XML processing program.

December 13, 2024 Rajat Kumar WT UNIT 2 80

 Introduction XML(cont..)

• XML Parsers

• An XML parser is a software library or package that provides

interfaces for client applications to work with an XML document.

• The XML Parser is designed to read the XML and create a way
for programs to use XML.

• XML parser validates the document and check that the document
is well formatted.

December 13, 2024 Rajat Kumar WT UNIT 2 81

 Introduction XML(cont..)

• XML Parsers(cont..)

December 13, 2024 Rajat Kumar WT UNIT 2 82

 Introduction XML(cont..)

• DOM (Document Object Model) parser

• A DOM document is an object which contains all the information of an

XML document.

• It is composed like a tree structure.

• The DOM Parser implements a DOM API.

• This API is very simple to use.

December 13, 2024 Rajat Kumar WT UNIT 2 83

 Introduction XML(cont..)

• DOM (Document Object Model) parser(cont..)

Advantages
• It supports both read and write operations and the API is very simple to use.

• It is preferred when random access to widely separated parts of a document

is required.

Disadvantages
• It consumes more memory because the whole XML document needs to
loaded into memory.

• It is comparatively slower than other parsers.

December 13, 2024 Rajat Kumar WT UNIT 2 84

 Introduction XML(cont..)

• SAX (Simple API for XML) parser

• A SAX Parser implements SAX API.

• This API is an event based API and less intuitive.

• It does not create any internal structure.

• Clients does not know what methods to call, they just overrides the methods
of the API and place his own code inside method.

• It is an event based parser, that works like an event handler in Java.

December 13, 2024 Rajat Kumar WT UNIT 2 85

 Daily Quiz

1: What does DOM stand for in XML?

a) Document Object Model
b) Data Object Model
c) Document Oriented Model
d) Data Oriented Model
Answer: a) Document Object Model

2: Which programming languages can be used to manipulate XML using DOM?

a) JavaScript
b) Python
c) Java
d) All of the above
Answer: d) All of the above

3: What is the purpose of XML DOM?

a) To represent an XML document as a tree structure
b) To validate XML documents against a schema
c) To transform XML documents into HTML
d) To serialize XML documents into a string representation
Answer: a) To represent an XML document as a tree structure
December 13, 2024 Rajat Kumar WT UNIT 2 86
 Daily Quiz

4: What is an XML parser?

a) A software tool used to read and process XML documents
b) A programming language used to write XML documents
c) A markup language used to define XML schema
d) A web browser used to render XML documents
Answer: a) A software tool used to read and process XML documents

5: Which type of XML parser reads the entire XML document into memory before
processing?
a) Event-based parser
b) Tree-based parser
c) SAX parser
d) DOM parser
Answer: d) DOM parser
6: Which type of XML parser processes XML documents sequentially and triggers events as
it encounters different elements?
a) Event-based parser
b) Tree-based parser
c) SAX parser
d) DOM parser
Answer: c) SAX parser
December 13, 2024 Rajat Kumar WT UNIT 2 87
 Introduction XML(cont..)

• SAX (Simple API for XML) parser(cont..)

Advantages
• It is simple and memory efficient.

• It is very fast and works for huge documents.

Disadvantages
• It is event-based so its API is less intuitive.

• Clients never know the full information because the data is broken into
pieces.

December 13, 2024 Rajat Kumar WT UNIT 2 88

 Cont…

XML documents are well-formed when they adhere to specific syntax rules, such as
properly nested tags and correct use of attributes. Additionally, XML documents can be
validated against Document Type Definitions (DTDs) or XML Schemas to ensure their
structure and content integrity.

XML is often used in conjunction with other technologies, such as XSLT (eXtensible
Stylesheet Language Transformations) for transforming XML data into different
formats, and XPath for querying and selecting specific parts of an XML document.

December 13, 2024 Rajat Kumar WT UNIT 2 89

 XML Display

Raw XML files can be viewed in all major browsers.

Don't expect XML files to be displayed as HTML pages.

Viewing XML Files:

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

- <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

December 13, 2024 Rajat Kumar WT UNIT 2 90

 XML DISPLAY

Look at the XML file above in your browser: note.xml

Most browsers will display an XML document with color-coded elements.

Often a plus (+) or minus sign (-) to the left of the elements can be clicked to expand
or collapse the element structure.

To view raw XML source, try to select "View Page Source" or "View Source" from
the browser menu.

Note: In Safari 5 (and earlier), only the element text will be displayed. To view the
raw XML, you must right click the page and select "View Source".

December 13, 2024 Rajat Kumar WT UNIT 2 91

 XML :HTTP Request

The XMLHttpRequest object can be used to request data from a web server.
The XMLHttpRequest object is a developers dream, because you can:
•Update a web page without reloading the page
•Request data from a server - after the page has loaded
•Receive data from a server - after the page has loaded
•Send data to a server - in the background

When you type a character in the input field below, an XMLHttpRequest is sent to
the server, and some name suggestions are returned (from the server):

December 13, 2024 Rajat Kumar WT UNIT 2 92

 XML :HTTP Request

Sending an XMLHttpRequest:
A common JavaScript syntax for using the XMLHttpRequest object looks much like
this:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();

December 13, 2024 Rajat Kumar WT UNIT 2 93

 XML :XPath

XPath is a major element in the XSLT standard.

XPath can be used to navigate through elements and attributes in an XML document.

•XPath is a syntax for defining parts of an XML document

•XPath uses path expressions to navigate in XML documents
•XPath contains a library of standard functions
•XPath is a major element in XSLT and in XQuery
•XPath is a W3C recommendation

December 13, 2024 Rajat Kumar WT UNIT 2 94

 XML :Xpath (Cont..)

XPath Path Expressions

XPath uses path expressions to select nodes or node-sets in an XML document.
These path expressions look very much like the expressions you see when you work
with a traditional computer file system.
XPath expressions can be used in JavaScript, Java, XML Schema, PHP, Python, C
and C++, and lots of other languages.

XPath is Used in XSLT

XPath is a major element in the XSLT standard.

With XPath knowledge you will be able to take great advantage of XSL.

December 13, 2024 Rajat Kumar WT UNIT 2 95

 XML :Xpath (Cont..)

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

<title lang="en">XQuery Kick Start</title>
<bookstore> <author>James McGovern</author>
<author>Per Bothner</author>
<book category="cooking"> <author>Kurt Cagle</author>
<title lang="en">Everyday Italian</title> <author>James Linn</author>
<author>Giada De Laurentiis</author> <author>Vaidyanathan Nagarajan</author>
<year>2005</year> <year>2003</year>
<price>30.00</price> <price>49.99</price>
</book> </book>
<book category="web">
<book category="children"> <title lang="en">Learning XML</title>
<title lang="en">Harry Potter</title> <author>Erik T. Ray</author>
<author>J K. Rowling</author> <year>2003</year>
<year>2005</year> <price>39.95</price>
<price>29.99</price> </book>
</book> </bookstore>

December 13, 2024 Rajat Kumar WT UNIT 2 96

 XML :Xpath (Cont..)
In the table below we have listed some XPath expressions and the result of the expressions:
XPath Expression Result
/bookstore/book[1] Selects the first book element that is the child of the
bookstore element

/bookstore/book[last()] Selects the last book element that is the child of the
bookstore element

/bookstore/book[last()-1] Selects the last but one book element that is the child of
the bookstore element

/bookstore/book[position()<3] Selects the first two book elements that are children of
the bookstore element

//title[@lang] Selects all the title elements that have an attribute

named lang

//title[@lang='en'] Selects all the title elements that have a "lang" attribute
with a value of "en"

December 13, 2024 Rajat Kumar WT UNIT 2 97

 XML :Xpath (Cont..)

In the table below we have listed some XPath expressions and the result of the expressions:

XPath Expression Result

/bookstore/book[price>35.00] Selects all the book elements of the bookstore element
that have a price element with a value greater than 35.00

/bookstore/ Selects all the title elements of the book elements of the
book[price>35.00]/title bookstore element that have a price element with a value
greater than 35.00

December 13, 2024 Rajat Kumar WT UNIT 2 98

 XML :XSLT

XSLT (eXtensible Stylesheet Language Transformations) is the recommended

style sheet language for XML.

XSLT is far more sophisticated than CSS. With XSLT you can add/remove
elements and attributes to or from the output file. You can also rearrange and sort
elements, perform tests and make decisions about which elements to hide and
display, and a lot more.

XSLT uses XPath to find information in an XML document.

December 13, 2024 Rajat Kumar WT UNIT 2 99

 XML :XSLT (Cont..)

<?xml version="1.0" encoding="UTF-8"?> <description>Light Belgian waffles covered with an

<breakfast_menu> assortment of fresh berries and whipped
<food> cream</description>
<calories>900</calories>
<name>Belgian Waffles</name>
</food>
<price>$5.95</price> <food>
<description>Two of our famous Belgian <name>French Toast</name>
Waffles with plenty of real maple <price>$4.50</price>
syrup</description> <description>Thick slices made from our homemade
<calories>650</calories> sourdough bread</description>
</food> <calories>600</calories>
<food> </food>
<food>
<name>Strawberry Belgian Waffles</name>
<name>Homestyle Breakfast</name>
<price>$7.95</price> <price>$6.95</price>
<description>Light Belgian waffles covered <description>Two eggs, bacon or sausage, toast, and
with strawberries and whipped our ever-popular hash browns</description>
cream</description> <calories>950</calories>
<calories>900</calories> </food>
</food> </breakfast_menu>
<food>
<name>Berry-Berry Belgian Waffles</name>
Rajat Kumar WT UNIT 2
December 13, 2024 100
<price>$8.95</price>
 XML :XSLT (Cont..)

Use XSLT to transform XML into HTML, before it is displayed in a browser:

<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="breakfast_menu/food">
<div style="background-color:teal;color:white;padding:4px">
<span style="font-weight:bold"><xsl:value-of select="name"/> - </span>
<xsl:value-of select="price"/>
</div>
<div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
<p>
<xsl:value-of select="description"/>
<span style="font-style:italic"> (<xsl:value-of select="calories"/> calories per
serving)</span>
</p>
</div>
</xsl:for-each>
</body>
</html>
December 13, 2024 Rajat Kumar WT UNIT 2 101
 Daily Quiz
1: What is XPath used for in XML?
a) To query and navigate XML documents
b) To transform XML into HTML
c) To define the structure and data types of XML documents
d) To validate XML documents against a schema
Answer: a) To query and navigate XML documents

2: Which symbol is used to select the root node in XPath?

a) .
b) /
c) //
d) *
Answer: b) /

3: Which XPath expression selects all elements with a specific tag name?
a) //elementName
b) /elementName
c) //*elementName
d) elementName
Answer: a) //elementName
December 13, 2024 Rajat Kumar WT UNIT 2 102
 Daily Quiz
4: What does XSLT stand for?
a) XML Style Language Transformation
b) eXtensible Stylesheet Language Transformation
c) XML Structure Language Transformation
d) eXtensible Style Language Translator
Answer: b) eXtensible Stylesheet Language Transformation

5: What is the primary purpose of XSLT?

a) To transform XML documents into different formats (e.g., HTML, PDF)
b) To define the structure and data types of XML documents
c) To query and navigate XML documents
d) To validate XML documents against a schema
Answer: a) To transform XML documents into different formats (e.g., HTML, PDF)

6: Which element is used in XSLT to match and select nodes for transformation?
a) <template>
b) <output>
c) <apply-templates>
d) <stylesheet>
Answer: c) <apply-templates>
December 13, 2024 Rajat Kumar WT UNIT 2 103
 XML :XQuery

•XQuery is to XML what SQL is to databases.

•XQuery was designed to query XML data.

for $x in doc("books.xml")/bookstore/book
where $x/price>30
order by $x/title
return $x/title

•XQuery is the language for querying XML data

•XQuery for XML is like SQL for databases
•XQuery is built on XPath expressions
•XQuery is supported by all major databases
•XQuery is a W3C Recommendation

December 13, 2024 Rajat Kumar WT UNIT 2 104

 XML :XQuery (Cont..)

XQuery is About Querying XML

XQuery is a language for finding and extracting elements and attributes from XML
documents.
Here is an example of what XQuery could solve:
"Select all CD records with a price less than $10 from the CD collection stored in
cd_catalog.xml"

XQuery and XPath

XQuery 1.0 and XPath 2.0 share the same data model and support the same functions
and operators. If you have already studied XPath you will have no problems with
understanding XQuery.

XQuery - Examples of Use

XQuery can be used to:
Extract information to use in a Web Service
Generate summary reports
Transform XML data to XHTML
Search Web documents for relevant information

December 13, 2024 Rajat Kumar WT UNIT 2 105

 XML :XLink

XLink is used to create hyperlinks in XML documents.

•XLink is used to create hyperlinks within XML documents
•Any element in an XML document can behave as a link
•With XLink, the links can be defined outside the linked files
•XLink is a W3C Recommendation

XLink Syntax
In HTML, the <a> element defines a hyperlink. However, this is not how it works in
XML. In XML documents, you can use whatever element names you want - therefore
it is impossible for browsers to predict what link elements will be called in XML
documents.
Below is a simple example of how to use XLink to create links in an XML document:

December 13, 2024 Rajat Kumar WT UNIT 2 106

 XML :Xlink (Cont..)

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

<homepages xmlns:xlink="http://www.w3.org/1999/xlink">
<homepage xlink:type="simple" xlink:href="https://www.w3schools.com">Visit
W3Schools</homepage>
<homepage xlink:type="simple" xlink:href="http://www.w3.org">Visit W3C</homepage>
</homepages>

December 13, 2024 Rajat Kumar WT UNIT 2 107

 XML :Xlink (Cont..)

<?xml version="1.0" encoding="UTF-8"? <book title="XQuery Kick Start">

> <description
xlink:type="simple"
<bookstore xmlns:xlink="http:// xlink:href="/images/XQuery.gif"
www.w3.org/1999/xlink"> xlink:show="new">
XQuery Kick Start delivers a concise
<book title="Harry Potter"> introduction
<description to the XQuery standard.......
xlink:type="simple" </description>
xlink:href="/images/HPotter.gif" </book>
xlink:show="new">
As his fifth year at Hogwarts School of </bookstore>
Witchcraft and
Wizardry approaches, 15-year-old Harry
Potter is.......
</description>
</book>

December 13, 2024 Rajat Kumar WT UNIT 2 108

 XML :Xlink (Cont..)

Example explained:
The XLink namespace is declared at the top of the document
(xmlns:xlink="http://www.w3.org/1999/xlink")
The xlink:type="simple" creates a simple "HTML-like" link
The xlink:href attribute specifies the URL to link to (in this case - an image)
The xlink:show="new" specifies that the link should open in a new window

December 13, 2024 Rajat Kumar WT UNIT 2 109

 Topic Objective

Students were able to learn:

XML HttpRequest
XML Parser
XML SAX
XML Xsl/Xslt
Xquerry
XPath

December 13, 2024 Rajat Kumar WT UNIT 2 110

 Daily Quiz

1: What is XQuery used for in XML?

a) To query and extract data from XML documents
b) To define the structure and data types of XML documents
c) To transform XML into different formats
d) To validate XML documents against a schema
Answer: a) To query and extract data from XML documents

2: Which programming language is XQuery most closely related to?

a) SQL (Structured Query Language)
b) JavaScript
c) Java
d) Python
Answer: a) SQL (Structured Query Language)

3: Which keyword is used in XQuery to select elements?

a) SELECT
b) FROM
c) WHERE
d) FOR
Answer: d) FOR
December 13, 2024 Rajat Kumar WT UNIT 2 111
 Daily Quiz

4: What is XLink used for in XML?

a) To define relationships between different XML documents
b) To transform XML into different formats
c) To validate XML documents against a schema
d) To query and extract data from XML documents
Answer: a) To define relationships between different XML documents

5: Which attribute is used in XLink to create a hyperlink?

a) href
b) link
c) target
d) url
Answer: a) href

6: Which element is used in XLink to define the start and end points of a link?
a) <link>
b) <source>
c) <locator>
d) <arc>
Answer: d) <arc>
December 13, 2024 Rajat Kumar WT UNIT 2 112
 XML :Validator

An XML document with correct syntax is called "Well Formed".

The syntax rules were described in the previous chapters:

•XML documents must have a root element

•XML elements must have a closing tag
•XML tags are case sensitive
•XML elements must be properly nested
•XML attribute values must be quoted

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

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

December 13, 2024 Rajat Kumar WT UNIT 2 113

 XML :Server

XML files are plain text files just like HTML files.
XML can easily be stored and generated by a standard web server.

Storing XML Files on the Server

XML files can be stored on an Internet server exactly the same way as
HTML files.
Start Windows Notepad and write the following lines:

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

<note>
<from>Jani</from>
<to>Tove</to>
<message>Remember me this weekend</message>
</note>

December 13, 2024 Rajat Kumar WT UNIT 2 114

 XML DTD

XML DTD

• A DTD defines the legal elements of an XML document.

• XML schema is a XML based alternative to DTD.

• Actually DTD and XML schema both are used to form a well formed XML
document.

• DTD stands for Document Type Definition.

• It defines the legal building blocks of an XML document.

December 13, 2024 Rajat Kumar WT UNIT 2 115

 Cont…

XML DTD Syntax

• The XML Document Type Declaration, commonly known as DTD, is a
way to describe XML language precisely.

• DTDs check vocabulary and validity of the structure of XML documents

against grammatical rules of appropriate XML language.

<!DOCTYPE element DTD identifier

[
declaration1
declaration2
........
]>

December 13, 2024 Rajat Kumar WT UNIT 2 116

 Cont…

Internal DTD Declaration XML

• A DTD is referred to as an internal DTD if elements are declared

within the XML files.

• To refer it as internal DTD, standalone attribute in XML declaration

must be set to yes.

• This means, the declaration works independent of external source.

December 13, 2024 Rajat Kumar WT UNIT 2 117

 (cont..)

Internal DTD Declaration XML Example

<?xml version="1.0" standalone="yes" ?>

<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>

<address>
<name>Devendra Kumar</name>
<company>NIET</company>
<phone>(011) 123-4567</phone>
</address>

December 13, 2024 Rajat Kumar WT UNIT 2 118

 (cont..)

External DTD

• In external DTD elements are declared outside the XML file.

• They are accessed by specifying the system attributes which may be

either the legal .dtd file or a valid URL.

• To refer it as external DTD, standalone attribute in the XML

declaration must be set as no.

• This means, declaration includes information from the external

source.

December 13, 2024 Rajat Kumar WT UNIT 2 119

 (cont..)

External DTD Example

<?xml version="1.0" standalone="no" ?>

<!DOCTYPE address SYSTEM"address.dtd"><address> <name>Anand
Varshney</name><company>NIET</company> <phone>(011)
123-4567</phone></address>

address.dtd

<!ELEMENT address (name,company,phone)><!ELEMENT

name (#PCDATA)><!ELEMENT company (#PCDATA)><!
ELEMENT phone (#PCDATA)>

December 13, 2024 Rajat Kumar WT UNIT 2 120

 XML: Schema

XML schema

• It is defined as an XML language.

• It uses namespaces to allow for reuses of existing definitions

• It supports a large number of built in data types and definition

of derived data types

•XML Schema is commonly known as XML Schema Definition

(XSD)

• Syntax
<xs:schema xmlns:xs="http://www.org/2001/XMLSchema">

December 13, 2024 Rajat Kumar WT UNIT 2 121

 (cont..)

• XML schema Example

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

xmlns:xs="http://www.w3.org/2001/XMLSchema"><xs:element
name="contact"> <xs:complexType> <xs:sequence>
<xs:element name="name" type="xs:string" /> <xs:element
name="company" type="xs:string" /> <xs:element
name="phone" type="xs:int" /> </xs:sequence>
</xs:complexType></xs:element>

December 13, 2024 Rajat Kumar WT UNIT 2 122

 (cont..)

• Ways to adefine XML schema elements

• Simple Type

• Complex Type

• Global Types

• XML Simple Types Example

<xs:element name="phone_number" type="xs:int" />

December 13, 2024 Rajat Kumar WT UNIT 2 123

 (cont..)

• XML Complex Types Example

<xs:element
name="Address"><xs:complexType><xs:sequence>
<xs:element name="name" type="xs:string" /> <xs:element
name="company" type="xs:string" /> <xs:element
name="phone" type="xs:int" /> </xs:sequence>
</xs:complexType></xs:element>

December 13, 2024 Rajat Kumar WT UNIT 2 124

 (cont..)

• XML Global Types Example

<xs:element name="Address1">
<xs:complexType> <xs:complexType>
<xs:sequence>
<xs:sequence> <xs:element name="address"
<xs:element name="address" type="AddressType" />
type="AddressType" /> <xs:element name="phone2"
<xs:element name="phone1" type="xs:int" />
type="xs:int" /> </xs:sequence>
</xs:complexType></xs:element
</xs:sequence> >
</xs:complexType></xs:element
> <xs:element
name="Address2">

December 13, 2024 Rajat Kumar WT UNIT 2 125

 Topic Objective

Students were able to learn:

XML Validator
XML Schema
XML DTDs
With their examples

December 13, 2024 Rajat Kumar WT UNIT 2 126

 Previous Topics: Recap

• The topic was focused on CSS concepts in XML which includes

• Introduction
• XML Examples
• Syntax
• Features
• Benefits
• Validations and its rules with examples
• XML Schema with its syntax.
• XML DTD and its
•Syntax
•Types
•Declaration

December 13, 2024 Rajat Kumar WT UNIT 2 127

 Daily Quiz

1.Which language is used to create the structure and content of web pages?
a) HTML
b) XML
c) CSS
d) JavaScript

2. What does HTML stand for?

a) HyperText Markup Language
b) High-Level Markup Language
c) Hyperlink and Text Markup Language
d) Hypertext Makeup Language

3.Which HTML tag is used to define the main heading of a web page?
a) <h1>
b) <title>
c) <head>
d) <body>

December 13, 2024 Rajat Kumar WT UNIT 2 128

 Daily Quiz

4. Which HTML tag is used to create a hyperlink?

a) <link>
b) <a>
c) <h2>
d) <img>

5. What does XML stand for?

a) eXtensible Markup Language
b) Extensible Modeling Language
c) Extensible Multimedia Language
d) eXtensible Mobile Language

6. Which XML tag is used to define the root element of an XML document?
a) <html>
b) <root>
c) <body>
d) <xml>

December 13, 2024 Rajat Kumar WT UNIT 2 129

 Daily Quiz

7. What is the purpose of the HTML <img> tag?

a) To insert an image into a web page
b) To create a hyperlink
c) To define a table
d) To format text

8. Which HTML attribute is used to specify an alternative text for an image?

a) src
b) alt
c) href
d) title

9. In XML, can you create your own custom tags or elements?

a) Yes
b) No

December 13, 2024 Rajat Kumar WT UNIT 2 130

 Weekly Assignment

1. Discuss various types of list in HTML with example

2. How can you design various types of frame in HTML.

3. Discuss various types ways to define xml schema with example

4. List the various types of parser available in xml.

5. Discuss XML Document Object Model in details

6. Describe the benefit to use CSS on your web page.

December 13, 2024 Rajat Kumar WT UNIT 2 131

 Faculty Video Links, Youtube & NPTEL Video Links and Online
Courses Details

YouTube /other Video Links:

1. "HTML Crash Course For Absolute Beginners" by Traversy Media: Link:
https://www.youtube.com/watch?v=UB1O30fR-EE
2. "HTML Full Course - Build a Website Tutorial" by freeCodeCamp.org: Link:
https://www.youtube.com/watch?v=pQN-pnXPaVg
3. "XML Tutorial for Beginners" by Derek Banas: Link:
https://www.youtube.com/watch?v=mGcZZwkjWj8
4. "Learn XML in 15 Minutes" by Webucator: Link:
https://www.youtube.com/watch?v=4AN4_NG9N4w
5. "HTML and XML Tutorial Playlist" by The Net Ninja: Link:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G

December 13, 2024 Rajat Kumar WT UNIT 2 132

 MCQ s

1. The attribute used to define a new namespace is.

a. XMLNS
b. XmlNameSpace
c. Xmlns
d. XmlNs

2. Which of these tags are all <table> tags?

a. <table><head><tfoot>
b. <table><tr><td>
c. <table><tr><tt>
d. <thead><body><tr>

3. How do I add scrolling text to my page?

a. <scroll>
b. <marquee>
c. <ciruler>
d. <tab>

December 13, 2024 Rajat Kumar WT UNIT 2 133

 MCQ s

4. Can a data cell contain images?

a. Yes
b. No

5. Choose the correct HTML tag for the largest heading

a. <h6>
b. <heading>
c. <head>
d. <h1>

6. Which HTML attribute is used to define inline styles?

a. font
b. class
c. styles
d. style

December 13, 2024 Rajat Kumar WT UNIT 2 134

 MCQ s

7. Which are the main features of XML?

a. Text data description
b. Human- and computer-friendly format
c. Handles data in a tree structure having one-and only one-root element
d. All mentioned above

8. Which is a language for finding information in an XML document?

a. Xpath
b. XSLT
c. XLink
d. XPointer

9. Which file controls how your frames will appear?

a. Frameset
b. Master Document
c. Template
d. Timeline

December 13, 2024 Rajat Kumar WT UNIT 2 135

 MCQ s

10. A CSS combinator is the one which explains the relationship between the selectors.
a. True
b. False

11. Which is used about text data that should not be parsed by the XML parser

a. CDATA
b. PCDATA
c. None of the above

12. Which is a language for finding information in an XML document?

a. Xpath
b. XSLT
c. XLink
d. XPointer

December 13, 2024 Rajat Kumar WT UNIT 2 136

 Glossary Questions

HTML is stand for _________

a) Hyper Text Markup Language
b) Holistick Technical Method Library
c) Hyper Tax Makes Line
d) None of the above

HTML is a subset of ______

a) SGMD
b) SGML
c) SGMH
d) None of the above

ALL HTML tags are enclosed in what?

a) # and #
b) ? and !
c) < and >
d) { and }

December 13, 2024 Rajat Kumar WT UNIT 2 137

 Glossary Questions

To add a plain color background to your web page, use which of the
following?
a) <body bgcolor= “36,24,35”>
b) <body color= “# FF000”>
c) <body bgcolor= “# FF000”>
d) All of the above

The first tag inside <TABLE> tag is _______

a) <HEAD>
b) <CAPTION>
c) <TH>
d) <TD>

Which program do you need to write HTML?

a) A graphics program
b) Any text editor
c) HTML -development suite 4
d) All of the above

December 13, 2024 Rajat Kumar WT UNIT 2 138

 Glossary Questions

The main container for <TR>, <TD> and <TH> is _______

a) <DATA>
b) <GROUP>
c) <TABLE>
d) None of the above

What does XML Stands for…….

a) EXtra Modern Link
b) EXtensible Markup Language
c) Example Markup Language
d) X-Markup Language

Which is not a XML function……….

a) Transport Information
b) Style Information
c) Store Information
d) Structure Information

December 13, 2024 Rajat Kumar WT UNIT 2 139

 Old Question Paper
2019-20
https://drive.google.com/file/d/1eLOPdCx5cPPU08FiaBH3QiQnHTX_9xhk/view

December 13, 2024 Rajat Kumar WT UNIT 2 140

 Old Question Paper

December 13, 2024 Rajat Kumar WT UNIT 2 141

 Old Question Paper
2018-19
https://drive.google.com/file/d/1FsvkCgeo7sf1q4WRx7vh7A1fRNkJ0_2q/view

December 13, 2024 Rajat Kumar WT UNIT 2 142

 Old Question Paper(cont..)

December 13, 2024 Rajat Kumar WT UNIT 2 143

 Old Question Paper

December 13, 2024 Rajat Kumar WT UNIT 2 144

 Old Question Paper
2017-18
https://aktupapers.in/aktupapers/btech-cs-5-sem-web-technology-ncs-504-2017-18.pdf

December 13, 2024 Rajat Kumar WT UNIT 2 145

 Old Question Paper

December 13, 2024 Rajat Kumar WT UNIT 2 146

 Old Question Paper

December 13, 2024 Rajat Kumar WT UNIT 2 147

 Expected Questions for University Exam

1. Discuss various types of html list in details

2. How can you design a frame in HTML? Give suitable example

3. What are the various types that use in XML schema

4. Explain the functionalities of DOM and SAX parsers.

5. What is the benefits to use the Dynamic HTML.

6. Discuss various types of driver in details.

7. Write a HTML document that implement ducument object model by using

getElementByID() method.

December 13, 2024 Rajat Kumar WT UNIT 2 148

 References

• Burdman, Jessica, “Collaborative Web Development” Addison Wesley

• Xavier, C, “ Web Technology and Design” , New Age International

• Ivan Bayross,” HTML, DHTML, Java Script, Perl & CGI”, BPB
Publication

December 13, 2024 Rajat Kumar WT UNIT 2 149

 Recap

• Designing web page using HTML

• Designing Document Type definition in XML

• Design and Development XML Schema and Document Object Model

• Description of XML processors using DOM and SAX parser

• XML Elements, Xpath, XSLT, Validator, Server, etc.

December 13, 2024 Rajat Kumar WT UNIT 2 150

 Thank You

December 13, 2024 Rajat Kumar WT UNIT 2 151