Unit2_Ankur Chaudhary

Download as ppt, pdf, or txt
Download as ppt, pdf, or txt
You are on page 1of 204

Noida Institute of Engineering and

Technology, Greater Noida

Introduction to HTML & XML

Unit: 2

Subject Name:
WEB TECHNOLOGY (ACSE0505) Ankur Chaudhary
Assistant Professor
Course Details
Department of
( B. Tech 5th Sem)
Information Technology

Ankur Chaudhary WT UNIT 2 1


December 15, 2024
Table of Contents
1. Name of Subject with code, Course and Subject Teacher
2. Brief Introduction of Faculty member with Photograph
3. Evaluation Scheme
4. Subject Syllabus
5. Branch wise Applications
6. Course Objective (Point wise)
7. Course Outcomes (COs)
8. Program Outcomes only heading (POs)
9. COs and POs Mapping
10.Program Specific Outcomes (PSOs)

December 15, 2024 Ankur Chaudhary WT UNIT 2 2


Conti….
11.COs and PSOs Mapping
12.Program Educational Objectives (PEOs)
13.Result Analysis (Department Result, Subject Result and Individual
Faculty Result)
14.End Semester Question Paper Templates (Offline Pattern/Online
Pattern)
15.Prerequisite/Recap
16.Brief Introduction about the Subject with videos
17.Unit Content
18.Unit Objective
19.Topic Objective/Topic Outcome
20.Lecture related to topic
21.Daily Quiz
22.Weekly Assignment
December 15, 2024 Ankur Chaudhary WT UNIT 2
3
Conti…
23 Topic Links
24 MCQ (End of Unit)
25 Glossary Questions
26 Old Question Papers (Sessional + University)
27 Expected Questions
28 Recap of Unit

December 15, 2024 Ankur Chaudhary WT UNIT 2 4


4
Brief Introduction of Faculty

I am Ankur Chaudhary, presently associated with NIET, Greater


Noida as Assistant Professor in Information Technology
Department.

I completed my M. Tech. degree from Uttarakhand Technical


University , Dehradun in 2014 and B.Tech degree from HNB
Garhwal University, Dehradun.

Total Exp. – 14.6 Years

My area of interest is related to Web development using Java.


December 15, 2024 Ankur Chaudhary WT UNIT 2 5
Evaluation Scheme

December 15, 2024 Ankur Chaudhary WT UNIT 2 6


Syllabus Unit - 1

• Introduction:Introduction to Web Technology, History of Web and


Internet, Connecting to Internet, Introduction to Internet services
and tools, Client-Server Computing, Protocols Governing Web,
Basic principles involved in developing a web site, Planning
process,Types of Websites,WebStandardsandW3C
recommendations,
• Web Hosting: Web Hosting Basics, Types of Hosting Packages,
Registering domains, DefiningName Servers, Using Control Panel,
Creating Emails in Cpanel, Using FTP Client, Maintaining
aWebsite.

December 15, 2024 Ankur Chaudhary WT UNIT 2 7


Syllabus Unit - 2

• HTML:HTML, DOM- Introduction to Document Object


Model,BasicstructureofanHTMLdocument,MarkupTags, Heading-
Paragraphs,LineBreaks, Understand the structure of HTML tables.
Lists, Working with Hyperlinks, Image Handling, Understanding
Frames and their needs, HTML forms for User inputs. New form
Elements- date, number, range, email, search anddatalist,
Understanding audio, video and article tags.

• XML: Introduction, Tree, Syntax, Elements, Attributes,


Namespaces, Display, HTTP request, Parser, DOM, XPath, XSLT,
XQuerry, XLink, Validator, DTD, Schema, Server

December 15, 2024 Ankur Chaudhary WT UNIT 2 8


Syllabus Unit - 3

• Concept of CSS 3: Creating Style Sheet, CSS Properties , CSS


Styling(Background, Text Format,Controlling Fonts) , Working
with block elements and objects , Working with Lists and
Tables ,CSSIdandClass,BoxModel(Introduction,Borderproperties,Pa
ddingProperties,Marginproperties) CSS Advanced(Grouping,
Dimension, Display, Positioning, Floating, Align,
Pseudoclass,NavigationBar,ImageSprites,Attributesector),CSSColor
,CreatingpageLayoutandSite.

• Bootstrap: Introduction, Bootstrap grid system, Bootstrap


Components.

December 15, 2024 Ankur Chaudhary WT UNIT 2 9


Syllabus Unit - 4

• JavaScript Essentials: Introduction to Java Script ,Javascript Types


, Var, Let and Const Keywords, Operators in JS , Conditions
Statements , Java Script Loops, JS Popup Boxes , JS Events ,
JSArrays,WorkingwithArrays,JSObjects,JSFunctions,UsingJavaScri
ptinRealtime,ValidationofForms,Arrow functions and default
arguments, Template Strings, Strings methods, Callback functions,
Object de-structuring, Spread and Rest Operator, Typescript
fundamentals, Typescript OOPs- Classes, Interfaces, Constructor
etc. Decorator and Spread Operator,

• Difference == & ===, Asynchronous Programming in ES6, Promise


Constructor, Promise with Chain, Promise Race.

December 15, 2024 Ankur Chaudhary WT UNIT 2 10


Syllabus Unit - 5

• Introduction to PHP, Basic Syntax, Variables & Constants, Data


Type, Operator & Expressions, Control flow and Decision making
statements, Functions, Strings, Arrays,

• Working with files and directories: Understanding file& directory,


Opening and closing, a file, Coping, renaming and deleting a file,
working with directories, Creating and deleting folder, File Uploading
& Downloading.

• Session & Cookies: Introduction to Session Control, Session


Functionality What is a Cookie, Setting Cookies with PHP. Using
Cookies with Sessions, Deleting Cookies, Registering Session
variables, Destroying the variables and Session.

December 15, 2024 Ankur Chaudhary WT UNIT 2 11


Text Books

• StevenM.Schafer,“HTML,XHTML,andCSSBible,5ed”,WileyIndia

• IanPouncey,RichardYork,“BeginningCSS:CascadingStyleSheetsfor
WebDesign”,WileyIndia

December 15, 2024 Ankur Chaudhary WT UNIT 2 12


Branch wise Application

Sample Applications

• Desktop GUI Applications


• Mobile Applications
• Enterprise Applications
• Scientific Applications
• Web Based Applications
• Cloud Based Applications
• Web Servers and Application Servers
• Software Tools

December 15, 2024 Ankur Chaudhary WT UNIT 2 13


Course Objective

•This course covers different aspect of web technology such as HTML,


CSS, and issues of web technology, client and server side issue.
•The general objectives of this course are to provide fundamental
concepts of Internet; Web Technology and Web Programming.
•Students will be able to build a proper responsive website.

Ankur Chaudhary WT UNIT 2 14


December 15, 2024
Course Outcome
At the end of the semester, student will be able to:
Course CO Description Bloom’s
Outcomes Taxonomy
(CO)
CO1 Recalling the basic facts and explaining the basic ideas of K1, K2
Web technology and web hosting.

CO2 Applying and creating various HTML5 semantic elements K3, K6


andapplication with working on HTML forms for user
input.
CO3 Understanding and K2, K3
applyingtheconceptsofCreatingStyleSheet(CSS)3 and
bootstrap.
CO4 Analysing and implementing concept ofJavaScript K4, K6
anditsapplications.

CO5 Creating and evaluating dynamic web pages using the K5, K6
concept of PHP

Ankur Chaudhary WT UNIT 2 15


December 15, 2024
Program Outcome
1. Engineering Knowledge:
2. Problem Analysis:
3. Design/Development of Solutions:
4. Conduct investigation of complex problems:
5. Modern Tool Usage:
6. The engineer and society:
7. Environment and sustainability:
8. Ethics:
9. Individual and team work:
10. Communication:
11. Project Management and finance:
12. Life-long learning

Ankur Chaudhary WT UNIT 2 16


December 15, 2024
CO-PO Mapping
Mapping of Course Outcomes and Program Outcomes:
Subject
Code
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
not
Assign
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
Ankur Chaudhary WT UNIT 2 17
December 15, 2024
Program Specific Outcomes

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.

December 15, 2024 Ankur Chaudhary WT UNIT 2 18


PSO Mapping

Mapping of Program Specific Outcomes and Course Outcomes:

Course Outcomes Program Specific Outcomes

PSO1 PSO2 PSO3 PSO4

1 3 3 2 3

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

3 3 3 2 2

4 3 2 3 2

5 3 2 2 2

AVG 3 2.6 2.4 2.2

December 15, 2024 Ankur Chaudhary WT UNIT 2 19


Program Educational Objectives

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 15, 2024 Ankur Chaudhary WT UNIT 2 20


Result Analysis

• Web Technology Result of 2020 – 21: 96.97%


•Average Marks: 53.33

December 15, 2024 Ankur Chaudhary WT UNIT 2 21


End Semester Question Paper Template

B TECH
(SEM-V) THEORY EXAMINATION 20__-20__
Time: 3 Hours Total
Marks: 100
Note: 1. Attempt all Sections. If require any missing data; then choose
suitably.
SECTION A
1.Attempt all questions in brief. 1 x 10 =
10Q.No. Question Marks CO
1 1
2 1
. .
10 1

December 15, 2024


Ankur Chaudhary WT UNIT 2 22
End Semester Question Paper Templates
2. Attempt of the following: 5 x 2 = 20
Q.No. Question Marks CO
1 2
2 2
“””
‘”
5 2

SECTION B
3. Attempt any five part of the following: 5 x 6 = 30

Q.No. Question Marks CO

1 6
. 6
7 6
DecemberAnkur
15, 2024
Chaudhary WT UNIT 2 23
End Semester Question Paper Templates
4. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10
5. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO
1 10
2 10

6. Attempt any one part of the following: 1 x 10 = 10


Q.No. Question Marks CO

1 10
2 10

December 15, 2024 Ankur Chaudhary WT UNIT 2 24


End Semester Question Paper Templates
4. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10
5. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO
1 10
2 10

6. Attempt any one part of the following: 1 x 10 = 10


Q.No. Question Marks CO

1 10
2 10

December 15, 2024 Ankur Chaudhary WT UNIT 2 25


Prerequisites & Recap

Prerequisites:

Basic Knowledge of any programming language like C/C++/Python/Java. Familiarity


with basic concepts of Internet.

Ankur Chaudhary WT UNIT 2 26


December 15, 2024
Prerequisites & Recap

Recap:

•Previous unit was focused on web development strategies with some internet services
and tools and connecting cables for internet .

•The main concepts discussed of core java are: Object, classes, inheritance,
polymorphism ,package and interfaces in Java language.

•The some concepts about exception handling , multithreading, IO packages, AWT,


Applet and Layout manager classes in details.

Ankur Chaudhary WT UNIT 2 27


December 15, 2024
Brief Introduction About The Subject
 Web technologies are the various tools and techniques that
are utilized in the process of communication between different
types of devices over the internet.
 To understand this term in a better manner, let’s break it down
into two pieces: ‘web’ and ‘technology’.
 The web, in this case, refers to the World Wide Web, more
commonly known as WWW.
 It first came into being in 1989 when famous scientist and
engineer, Tim Berners-Lee, came up with an efficient
mechanism to share resources between scientists all over the
world.
 https://www.youtube.com/results?
search_query=Web+Technonogies

December 15, 2024 Ankur Chaudhary WT UNIT 2 28


Content of Unit 2

• Introduction to HTML
• Introduction to DOM
• Structure of HTML Document
• Markup Tags
• Heading-Paragraphs, Line Breaks
• HTML Table
• HTML List
• Working of Hyperlinks
• HTML images and frames
• HTML form and control
• Audio, Video and Article Tags

December 15, 2024 Ankur Chaudhary WT UNIT 2 29


Content of Unit 2 (Cont..)

• Introduction to Extended Mark up language (XML)


• XML DTD, Schema and Object model
• Tree, Syntax, Elements, Attributes, Display
• HTTP Request, Parser, DOM
• XPath, XSLT, XQuery, XLink, Validator
• DTD, Schema, Server

December 15, 2024 Ankur Chaudhary WT UNIT 2 30


Unit Objective

Objective of Unit 2:

•To understand the concepts of web designing


•To understand the concepts of history of web
•To understand the concepts of tags of HTML

Topic’s Objective:
To understand the concepts of HTML, List, Tables attributes
and Borders.

December 15, 2024 Ankur Chaudhary WT UNIT 2 31


HTML
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

HTML is an acronym which stands for Hyper Text Markup Language which
is used for creating web pages and web applications. Let's see what is
meant by Hypertext Markup Language, and Web page.

December 15, 2024 Ankur Chaudhary WT UNIT 2 32


HTML (Cont..)
• Markup language: A markup language is a computer language that
is used to apply layout and formatting conventions to a text
document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

• Web Page: A web page is a document which is commonly written in


HTML and translated by a web browser. A web page can be
identified by entering an URL. A Web page can be of the static or
dynamic type. With the help of HTML only, we can create static
web pages.

December 15, 2024 Ankur Chaudhary WT UNIT 2 33


HTML (Cont..)
An HTML document is made of many HTML tags and each HTML tag
contains different content.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
December 15, 2024 Ankur Chaudhary WT UNIT 2 34
HTML (Cont..)
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML
page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

December 15, 2024 Ankur Chaudhary WT UNIT 2 35


HTML (Cont..)
HTML Element

• An HTML element is defined by a start tag, some content, and an


end tag:
<tagname> Content goes here... </tagname>

Document Object Model:


The Document Object Model is a cross-platform and language-
independent interface that treats an XML or HTML document as a
tree structure wherein each node is an object representing a part of
the document. The DOM represents a document with a logical tree.

December 15, 2024 Ankur Chaudhary WT UNIT 2 36


Document Object Model

December 15, 2024 Ankur Chaudhary WT UNIT 2 37


Structure of HTML

<html>
<head>
<title>Page title</title> The content inside the
<body> section (the white
</head> area above) will be
<body> displayed in a browser.
The content inside the
<h1>This is a heading</h1> <title> element will be
<p>This is a paragraph.</p> shown in the browser's
title bar or in the page's
<p>This is another paragraph.</p> tab.
</body>
</html>
December 15, 2024 Ankur Chaudhary WT UNIT 2 38
Markup Tags

A “markup tag” is the fundamental characteristic of HTML. Every


markup tag is a command placed between “wickets” or “angle
brackets”—a left bracket (<) and a right bracket (>). Markup tags
are not revealed by a web browser; they are invisible.

In most cases, markup tags (containing commands) come in pairs, with


text or a graphic image located between the beginning and ending tags:

<COMMAND>text or graphic image</COMMAND>: controls or


regulates the text or graphic image information between the two non-
empty markup tags.

December 15, 2024 Ankur Chaudhary WT UNIT 2 39


Markup Tags (Cont..)

Pairs of markup tags are referred to as “non-empty” tags, because


something is contained between the beginning tag and the ending tag. A
beginning tag and an ending tag are identical, except a “slash” (/) is
placed before the command of the ending tag to tell the browser that the
command has been completed.

Paragraph:

A paragraph always starts on a new line, and browsers automatically add


some white space (a margin) before and after a paragraph. HTML
paragraph or HTML p tag is used to define a paragraph in a webpage.

An HTML <p> tag indicates starting of new paragraph.

December 15, 2024 Ankur Chaudhary WT UNIT 2 40


HTML Paragraph and Break line

Example of HTML Paragraph Tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Example of HTML Paragraph Tag: (<br>)

•Used to insert single line breaks in a text.


•The <br> tag inserts a single line break.
•The <br> tag is useful for writing addresses or poems.
•The <br> tag is an empty tag which means that it has no end tag.

Use the <br> tag to enter line breaks, not to add space between
paragraphs.

December 15, 2024 Ankur Chaudhary WT UNIT 2 41


HTML Paragraph and Break line

Example of Line Breaks:

<p>To force<br> line breaks<br> in a text,<br> use the br<br>


element.</p>

Output:

To force
line breaks
in a text,
use the br
element.

December 15, 2024 Ankur Chaudhary WT UNIT 2 42


HTML List
HTML Lists are used to specify lists of information. All lists may
contain one or more list elements. There are three different types
of HTML lists:

Ordered List or Numbered List (ol)


Unordered List or Bulleted List (ul)
Description List or Definition List (dl)

HTML Ordered List:

In the ordered HTML lists, all the list items are marked with
numbers by default. It is known as numbered list also. The
ordered list starts with <ol> tag and the list items start with <li>
tag.

December 15, 2024 Ankur Chaudhary WT UNIT 2 43


HTML List (Cont..)
HTML Ordered List Example:

<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

Output:

1.Aries
2.Bingo
3.Leo
4.Oracle

December 15, 2024 Ankur Chaudhary WT UNIT 2 44


HTML List(cont..)
• HTML Unordered List or Bulleted List

• In HTML Unordered list, all the list items are marked with
bullets

• It is also known as bulleted list also.

• The Unordered list starts with <ul> tag and list items start
with the <li> tag.
<ul>
•Example of Unordered List: <li>Australia</li>
<li>Japan</li>
<li>India</li>
<li>America</li>
</ul>

December 15, 2024 Ankur Chaudhary WT UNIT 2 45


HTML List(cont..)

• HTML Description List or Definition List

• HTML Description list is also a list style which is supported


by HTML and XHTML

• It is also known as definition.

• The definition list is very appropriate when you want to


present glossary, list of terms or other name-value list.

•T he HTML definition list contains three tags as: <dl>, <dt>


and <dd>

December 15, 2024 Ankur Chaudhary WT UNIT 2 46


HTML List(cont..)

• HTML Description List or Definition List Example

<dl>
<dt>HTML</dt>
<dd>-One of the hypertext mark-up language.</dd>
<dt>Javascript</dt>
<dd>-One of my scripting language</dd>
<dt>Oracle</dt>
<dd>-It is one of database</dd>
<dt>Java</dt>
<dd>-It is platform independent language.</dd>
</dl>

December 15, 2024 Ankur Chaudhary WT UNIT 2 47


HTML Table

• HTML table tag is used to display data in tabular form (row *


column).

• There can be many columns in a row.

• HTML tables are used to manage the layout of the page

• E.g. header section, navigation bar, body content, footer section etc.

December 15, 2024 Ankur Chaudhary WT UNIT 2 48


HTML Table(cont..)

HTML Table Tags


• <table> It defines a table.

• <tr>It defines a row in a table.

• <th>It defines a header cell in a table.

• <td>It defines a cell in a table.

• <caption>It defines the table caption.

• <colgroup>It specifies a group of one or more columns in a table


for formatting.

December 15, 2024 Ankur Chaudhary WT UNIT 2 49


HTML Table(cont..)

HTML Table Example

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Aggarwal</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

December 15, 2024 Ankur Chaudhary WT UNIT 2 50


HTML Table(cont..)

HTML Table with Border

• There are two ways to specify border for HTML tables.

• By border attribute of table in HTML

• By border property in CSS

• HTML Border attribute

• You can use border attribute of table tag in HTML to


specify border.

• But it is not recommended now.

December 15, 2024 Ankur Chaudhary WT UNIT 2 51


HTML Table(cont..)

HTML Border attribute Example

<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Aggarwal</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

December 15, 2024 Ankur Chaudhary WT UNIT 2 52


HTML Table(cont..)
CSS Border property

• It is now recommended to use border property of CSS to


specify border in table

• CSS Border property Example:

<style> <style>
table, th, td { table, th, td {
border: 1px solid black border: 2px solid black;
; border-
} collapse: collapse;
</style> }
</style>

December 15, 2024 Ankur Chaudhary WT UNIT 2 53


HTML Table(cont..)

HTML Table with cell padding

•You can specify padding for table header and table data by
two ways

• By cellpadding attribute of table in HTML

• By padding property in CSS

•The cellpadding attribute of HTML table tag is


obselete now.

•It is recommended to use CSS

December 15, 2024 Ankur Chaudhary WT UNIT 2 54


HTML Table(cont..)

• Example of cell padding property in CSS

<style>

table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}

</style>

December 15, 2024 Ankur Chaudhary WT UNIT 2 55


HTML Table(cont..)
HTML Table with colspan

• If you want to make a cell span more than one column, you
can use the colspan attribute.

CSS code:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>

December 15, 2024 Ankur Chaudhary WT UNIT 2 56


HTML Table(cont..)
HTML Table with colspan

HTML code:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Ajeet Maurya</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>

December 15, 2024 Ankur Chaudhary WT UNIT 2 57


HTML Table(cont..)
HTML Table with rowspan

CSS code: HTML code:


<style> <table>
table, th, td { <tr><th>Name</
border: 1px solid black; th><td>Ajeet Maurya</td></
border-collapse: collapse; tr>
} <tr><th rowspan="2">Mobile
th, td { No.</th><td>7503520801</
padding: 10px; td></tr>
} <tr><td>9555879135</td></
</style> tr>
</table>

December 15, 2024 Ankur Chaudhary WT UNIT 2 58


HTML Table(cont..)
HTML table with caption

• HTML caption is diplayed above the table.

• It must be used after table tag only.

table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>

December 15, 2024 Ankur Chaudhary WT UNIT 2 59


HTML Hyperlinks

•HTML links are hyperlinks.


•You can click on a link and jump to another document.
•When you move the mouse over a link, the mouse arrow will turn into
a little hand.

A link does not have to be text. A link can be an image or any other
HTML element!

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


The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL
address.

December 15, 2024 Manish Kumar 20CS603 WT


Ankur Chaudhary WT UNIT 2UNIT 2 60
HTML Images

•HTML img tag is used to display image on the web page.

• HTML img tag is an empty tag that contains attributes only,

• closing tags are not used in HTML image element.

Example

<h2>HTML Image Example</h2>

<img src="good_morning.jpg" alt="Good Morning Friends"/>

December 15, 2024 Manish Kumar 20CS603 WT


Ankur Chaudhary WT UNIT 2UNIT 2 61
HTML Images(cont..)
Attributes of HTML img tag

• src
It is a necessary attribute that describes the source or path of
the image.

It instructs the browser where to look for the image on the


server.

• alt

The alt attribute defines an alternate text for the image.

The value of the alt attribute describe the image in words.


December 15, 2024 Ankur Chaudhary WT UNIT 2 62
HTML Images(cont..)
• Example of img tag
<html>
<head>
<style>
img { width:100%; }
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
</body>
</html>

December 15, 2024 Ankur Chaudhary WT UNIT 2 63


Previous Topics: Recap

• The topic was focused on web designing concepts by using HTML in


List which include:
•ordered,
•unordered,
•Description
•Definition
• Tables and its tags
•Borders and its attribute
•Cell padding
•Hyperlinks
•Images with its tags and example

December 15, 2024 Ankur Chaudhary WT UNIT 2 64


UNIT 2

Topic’s Objective:

•To understand the concepts of HTML in frames and forms

December 15, 2024 Ankur Chaudhary WT UNIT 2 65


HTML Frames

• HTML frames are used to divide your browser window into


multiple sections where each section can load a separate HTML
document.

• A collection of frames in the browser window is known as a


frameset.

• The window is divided into frames in a similar way the tables


are organized: into rows and columns.

December 15, 2024 Ankur Chaudhary WT UNIT 2 66


HTML Frames(cont..)

Disadvantages of Frames

• Some smaller devices cannot cope with frames often


because their screen is not big enough to be divided
up.

• Sometimes your page will be displayed differently on


different computers due to different screen resolution.

• The browser's back button might not work as the user


hopes.

• There are still few browsers that do not support frame


technology.

December 15, 2024 Ankur Chaudhary WT UNIT 2 67


HTML Frames(cont..)

Creating Frames

• To use frames on a page we use <frameset> tag instead of


<body> tag.

• The <frameset> tag defines how to divide the window into


frames.

• The rows attribute of <frameset> tag defines horizontal


frames and cols attribute defines vertical frames.

• Each frame is indicated by <frame> tag and it defines


which HTML document shall open into the frame.

December 15, 2024 Ankur Chaudhary WT UNIT 2 68


HTML Frames(cont..)

Example of Horizontal Frame

<html>
<frameset rows="10%,80%,10%">
<frame name="top" src="top_frame.htm" />
<frame name="main" src="main_frame.htm" />
<frame name="bottom" src="bottom_frame.htm" />

<noframes>
<body> Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

December 15, 2024 Ankur Chaudhary WT UNIT 2 69


HTML Frames(cont..)

Example of Vertical Frame

<html>
<frameset cols ="10%,80%,10%">
<frame name="top" src="top_frame.htm" />
<frame name="main" src=ols"main_frame.htm" />
<frame name="bottom" src="bottom_frame.htm" />

<noframes>
<body> Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

December 15, 2024 Ankur Chaudhary WT UNIT 2 70


HTML Forms Control

HTML Forms

• HTML Forms are required when you want to collect some data
from the site visitor.

• For example during user registration you would like to collect


information such as name, email address, credit card, etc.

• A form will take input from the site visitor and then will post it
to a back-end application such as CGI, ASP Script or PHP script
etc.

December 15, 2024 Ankur Chaudhary WT UNIT 2 71


Previous Topics: Recap

•The topic was focused on web designing concepts which include


Frames

• Disadvantage
• Creating Frames
• Example

December 15, 2024 Ankur Chaudhary WT UNIT 2 72


UNIT 2

Topic’s Objective:
•To understand the concepts of HTML in forms.

December 15, 2024 Ankur Chaudhary WT UNIT 2 73


HTML Forms Control(cont..)
Elements of HTML Forms

• <input>

• <textarea>

• <button>

• <select>

• <option>

• <optgroup>

• <label>

December 15, 2024 Ankur Chaudhary WT UNIT 2 74


HTML Forms Control(cont..)
Elements of HTML Forms(cont..)

• HTML <input> Tag

• “The <input> tag specifies an input field where the


user can enter data.

• <input> elements are used within a <form> element to


declare input controls that allow users to input data.

• An input field can vary in many ways, depending on


the type attribute”

December 15, 2024 Ankur Chaudhary WT UNIT 2 75


HTML Forms Control(cont..)
Elements of HTML Forms(cont..)

• HTML <input> Tag Example

<form action="my.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

December 15, 2024 Ankur Chaudhary WT UNIT 2 76


HTML Forms Control(cont..)
Elements of HTML Forms(cont..)
•HTML <textarea> tag

•The <textarea> tag defines a multi-line text input control.

•A text area can hold an unlimited number of characters, and the


text renders in a fixed-width font (usually Courier).

• The size of a text area can be specified by the cols and rows
attributes, or even better;

• Example:-
<textarea rows="5" cols="50" name="description">Enter
description here...</textarea>

December 15, 2024 Ankur Chaudhary WT UNIT 2 77


HTML Forms Control(cont..)
Elements of HTML Forms(cont..)

• HTML <button> Tag

•The <button> tag defines a clickable button.

•I nside a <button> element you can put content, like text


or images.

• Example <button type="button">Click Me!</button>

December 15, 2024 Ankur Chaudhary WT UNIT 2 78


HTML Forms Control(cont..)
Elements of HTML Forms(cont..)

• HTML <select> Tag and <option> Tag

• The <select> element is used to create a drop-down


list.

• The <option tags inside the <select> element define


the available options in the list.

• The <option> tag defines an option in a select list.

December 15, 2024 Ankur Chaudhary WT UNIT 2 79


HTML Forms Control(cont..)
Elements of HTML Forms(cont..)

• HTML <select> Tag and <option> Tag Example

<select>
<option value="volvo">Volvo</option>
<option value="safari">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

December 15, 2024 Ankur Chaudhary WT UNIT 2 80


HTML Forms Control(cont..)
Elements of HTML Forms(cont..)

• HTML <optgroup> Example

<select>
<optgroup label="Indian Cars">
<option value="volvo">Volvo</option>
<option value="Alto">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

December 15, 2024 Ankur Chaudhary WT UNIT 2 81


HTML Forms Control(cont..)

Elements of HTML Forms(cont..)

• HTML <label> Tag

• The <label> tag defines a label for an <input> element.

• The <label> element does not render as anything special for


the user.

December 15, 2024 Ankur Chaudhary WT UNIT 2 82


HTML Forms Control(cont..)

Elements of HTML Forms(cont..)

• HTML <label> Tag Example

<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>

December 15, 2024 Ankur Chaudhary WT UNIT 2 83


HTML Forms Control(cont..)

HTML Form Controls

• Text Input Controls • File Select boxes

• Checkboxes Controls • Hidden Controls

• Radio Box Controls • Clickable Buttons

• Select Box Controls • Submit and Reset Button

December 15, 2024 Ankur Chaudhary WT UNIT 2 84


HTML Forms Control(cont..)
• Example of Checkbox Control

<html>
<head>
<title>Checkbox Contro
</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on">
Physics
</form>

December 15, 2024 Ankur Chaudhary WT UNIT 2 85


HTML Forms Control(cont..)
• Example of Radio Button Control
<html>
<head>
<title>Radio Box Control
</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths">
Maths<input type="radio“ name="subject" value="physics">
Physics
</form>
</body>
</html>

December 15, 2024 Ankur Chaudhary WT UNIT 2 86


HTML Forms Control(cont..)
• Example of Select Box Control
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>

December 15, 2024 Ankur Chaudhary WT UNIT 2 87


HTML Forms Control(cont..)
• Example of Hidden Form Control
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p><input type="hidden" name="pagename"
value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

December 15, 2024 Ankur Chaudhary WT UNIT 2 88


New Form Elements
There are many new elements of form. Few of them as follows:
• Date
• Number
• Range
• Email
• Search and datalist

Date:

The <input type="date"> defines a <label for="birthday">Birthday:</


date picker. label>
The resulting value includes the <input type="date" id="birthday" nam
year, month, and day. e="birthday">

December 15, 2024 Ankur Chaudhary WT UNIT 2 89


Number Elements
Define a field for entering a number (You can also set restrictions on
what numbers are accepted):
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max=
"5">

The <input type="number"> defines a field for entering a number.


Use the following attributes to specify restrictions:
•max - specifies the maximum value allowed
•min - specifies the minimum value allowed
•step - specifies the legal number intervals
•value - Specifies the default value

December 15, 2024 Ankur Chaudhary WT UNIT 2 90


Range Elements
Define a range control (like a slider control):

<label for="points">Points (between 0 and 10):</label>


<input type="range" id="points" name="points" min="0" max="10">

The <input type="range"> defines a control for entering a number


whose exact value is not important (like a slider control).

Default range is 0 to 100. However, you can set restrictions on what


numbers are accepted with the attributes below.

max - specifies the maximum value allowed


min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value
December 15, 2024 Ankur Chaudhary WT UNIT 2 91
Email Elements
Define a field for an e-mail address (validates automatically when
submitted):
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">

The <input type="email"> defines a field for an e-mail address.

The input value is automatically validated to ensure it is a properly


formatted e-mail address.

To define an e-mail field that allows multiple e-mail addresses, add the
"multiple" attribute.

December 15, 2024 Ankur Chaudhary WT UNIT 2 92


Search Elements
Define a search field (like a site search, or Google search):

<label for="gsearch">Search Google:</label>


<input type="search" id="gsearch" name="gsearch">

The <input type="search"> defines a text field for entering a search


string.

Note: Remember to set a name for the search field, otherwise nothing
will be submitted. The most common name for search inputs is q.

December 15, 2024 Ankur Chaudhary WT UNIT 2 93


Data list Elements
A datalist with pre-defined options (connected to an <input> element):

<label for="browser">Choose your browser from the list:</label>


<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

December 15, 2024 Ankur Chaudhary WT UNIT 2 94


Data list Elements (Cont..)

The <datalist> tag specifies a list of pre-defined options for an <input>


element.

The <datalist> tag is used to provide an "autocomplete" feature for


<input> elements. Users will see a drop-down list of pre-defined options
as they input data.

The <datalist> element's id attribute must be equal to the <input>


element's list attribute (this binds them together).

December 15, 2024 Ankur Chaudhary WT UNIT 2 95


Audio & Video Tag

The HTML <audio> element is used to play an audio file on a web page.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which
the browser may choose from. The browser will use the first recognized
format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

December 15, 2024 Ankur Chaudhary WT UNIT 2 96


Audio & Video Tag (Cont..)

To start an audio file automatically, use the autoplay attribute:

<audio controls autoplay>


<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Chromium browsers do not allow autoplay in most cases. However,


muted autoplay is always allowed.

Add muted after autoplay to let your audio file start playing automatically
(but muted):

December 15, 2024 Ankur Chaudhary WT UNIT 2 97


Audio & Video Tag (Cont..)

Add muted after autoplay to let your audio file start playing
automatically (but muted):

<audio controls autoplay muted>


<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

December 15, 2024 Ankur Chaudhary WT UNIT 2 98


Audio & Video Tag (Cont..)

The HTML <video> element is used to show a video on a web page.


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
December 15, 2024 Ankur Chaudhary WT UNIT 2 99
Article Tag

The HTML <article> tag defines an independent self-contained content


in a document, page, application or a site.
The article tag content makes sense on its own. It is independent and
complete from other content shown on the page. This tag is generally
used on Forum post, Blog post, News story, comment etc.
<article>
<h2>Narendra Modi</h2>
<i>(Naam to suna hi hoga) </i>
<p>Narendra DamodarDas Modi is the 15th and current Prime Mini
ster of India,
Modi, a leader of the Bharatiya Janata Party (BJP), previously serve
d as the Chief Minister
of Gujarat state from 2001 to 2014. He is currently the Member of P
arliament (MP) from Varanasi. </p>
</article>
December 15, 2024 Ankur Chaudhary WT UNIT 2 100
Previous Topics: Recap

• HTML Forms

•Elements of HTML

• Form Controls
• Checkbox Control
• Radio Button Control
• Select Box Control
• Hidden Box Control

New Form Elements:


• Date, Email, Range, Search, Data List
• Audio, Video and Article Tag

December 15, 2024 Ankur Chaudhary WT UNIT 2 101


Previous Topics: Recap

The topic was focused on web designing concepts which include Frames

• Creating Frames
• HTML Forms
• Elements of HTML
•Form Controls
•Checkbox Control
•Radio Button Control
•Select Box Control
•Hidden Box Control
•New Form Elements
•Audio, Video and Article tag

December 15, 2024 Ankur Chaudhary WT UNIT 2 102


UNIT 2

Topic’s Objective:
•To learn the concept of XML DTD, XML schema

December 15, 2024 Ankur Chaudhary WT UNIT 2 103


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 15, 2024 Ankur Chaudhary WT UNIT 2 104


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 15, 2024 Ankur Chaudhary WT UNIT 2 105


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 15, 2024 Ankur Chaudhary WT UNIT 2 106


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 15, 2024 Ankur Chaudhary WT UNIT 2 107


Introduction XML(cont..)

Example Of XML

<?xml version="1.0"?>
<employee>
<firstname>vimal</firstname>
<lastname>jaiswal</lastname>
<address>Gaziabad</address>
<email>vima.jaiswal@gmail.com</email>
</employee>

December 15, 2024 Ankur Chaudhary WT UNIT 2 108


Introduction XML(cont..)

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 15, 2024 Ankur Chaudhary WT UNIT 2 109


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 110


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 111


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 112


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 113


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 114


Introduction XML(cont..)
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 15, 2024 Ankur Chaudhary WT UNIT 2 115


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 116


Introduction XML(cont..)

• Ways to define XML schema elements


• Simple Type

• Complex Type

• Global Types

• XML Simple Types Example

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

December 15, 2024 Ankur Chaudhary WT UNIT 2 117


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 118


Introduction XML(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 15, 2024 Ankur Chaudhary WT UNIT 2 119


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 15, 2024 Ankur Chaudhary WT UNIT 2 120


UNIT 2

Topic’s Objective:
•To learn the concept of XML document object
model and its presentation using XML.

December 15, 2024 Ankur Chaudhary WT UNIT 2 121


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 15, 2024 Ankur Chaudhary WT UNIT 2 122


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 15, 2024 Ankur Chaudhary WT UNIT 2 123


Introduction XML(cont..)

• Example Of XML DOM

December 15, 2024 Ankur Chaudhary WT UNIT 2 124


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.s
tatus == 200) {
myFunction(this); } }
December 15, 2024 Ankur Chaudhary WT UNIT 2 125
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 15, 2024 Ankur Chaudhary WT UNIT 2 126


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 15, 2024 Ankur Chaudhary WT UNIT 2 127


Previous Topics: Recap

• The topic was focused on Object Model concepts in XML which includes

• Introduction
• XML Examples
• Syntax
• Features
• Benefits

• Presentation using XML.


• It was also discussed about XML DTD, XML Schema and XML Document Object
Model(DOM).

December 15, 2024 Ankur Chaudhary WT UNIT 2 128


UNIT 2

Topic’s Objective:
•To learn the concepts about presenting and using XML by
DOM and SAX parsers.

December 15, 2024 Ankur Chaudhary WT UNIT 2 129


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 15, 2024 Ankur Chaudhary WT UNIT 2 130


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 15, 2024 Ankur Chaudhary WT UNIT 2 131


Introduction XML(cont..)

• XML Parsers(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 132


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 15, 2024 Ankur Chaudhary WT UNIT 2 133


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 15, 2024 Ankur Chaudhary WT UNIT 2 134


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 15, 2024 Ankur Chaudhary WT UNIT 2 135


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 15, 2024 Ankur Chaudhary WT UNIT 2 136


Previous Topics: Recap
• The topic was focused on XML processor which includes

• Introduction
• Syntax
• Features
• Benefits
• The topic focused on Parser and DOM Parser
• Also discussed about SAX (Simple API for XML)

• It was discussed the concepts about presenting and using XML by DOM and SAX
parsers.

December 15, 2024 Ankur Chaudhary WT UNIT 2 137


UNIT 2

Objective of the above topics: To learn the concepts of following points


• Namespace
• Attribute
• Tree
• Elements
• Display
• HTTP Request
• Parser
• DOM
• Xpath
• XSLT
• XQuery

December 15, 2024 Ankur Chaudhary WT UNIT 2 138


UNIT 2

Objective of the above topics: To learn the concepts of following


points
• Xlink
• Validator
• Schema
• Server

December 15, 2024 Ankur Chaudhary WT UNIT 2 139


Introduction XML(cont..)

• Namespaces
XML Namespaces provide a method to avoid element name conflicts.

Name Conflicts
In XML, element names are defined by the developer. This often
results in a conflict when trying to mix XML documents from
different XML applications.
This XML carries HTML table information:
This XML <table>
<table> carries <name>African Coffee
<tr> information Table</name>
<td>Apples</td> about a <width>80</width>
<td>Bananas</td> table (a <length>120</length>
</tr> piece of </table>
</table> furniture):
December 15, 2024 Ankur Chaudhary WT UNIT 2 140
Introduction XML(cont..)

If these XML fragments were added together, there would be a name


conflict. Both contain a <table> element, but the elements have
different content and meaning.
A user or an XML application will not know how to handle these
differences.

Solving the Name Conflict Using a Prefix:


Name conflicts in XML can easily be avoided using a name prefix.
This XML carries information about an HTML table, and a piece of
furniture:

December 15, 2024 Ankur Chaudhary WT UNIT 2 141


Introduction XML(cont..)
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>African Coffee
Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
In the example above, there will be no conflict because the two
<table> elements have different names.

December 15, 2024 Ankur Chaudhary WT UNIT 2 142


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 15, 2024 Ankur Chaudhary WT UNIT 2 143


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 15, 2024 Ankur Chaudhary WT UNIT 2 144


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 15, 2024 Ankur Chaudhary WT UNIT 2 145


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 15, 2024 Ankur Chaudhary WT UNIT 2 146


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 15, 2024 Ankur Chaudhary WT UNIT 2 147


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 15, 2024 Ankur Chaudhary WT UNIT 2 148


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
<year>2005</year> Nagarajan</author>
<price>30.00</price> <year>2003</year>
</book> <price>49.99</price>
</book>
<book category="children"> <book category="web">
<title lang="en">Harry Potter</title> <title lang="en">Learning XML</title>
<author>J K. Rowling</author> <author>Erik T. Ray</author>
<year>2005</year> <year>2003</year>
<price>29.99</price> <price>39.95</price>
</book> </book>
</bookstore>

December 15, 2024 Ankur Chaudhary WT UNIT 2 149


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 15, 2024 Ankur Chaudhary WT UNIT 2 150


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 15, 2024 Ankur Chaudhary WT UNIT 2 151


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 15, 2024 Ankur Chaudhary WT UNIT 2 152


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>
<name>Belgian Waffles</name> <calories>900</calories>
<price>$5.95</price> </food>
<description>Two of our famous Belgian Waffles <food>
with plenty of real maple syrup</description> <name>French Toast</name>
<calories>650</calories> <price>$4.50</price>
</food> <description>Thick slices made from our homemade
<food> sourdough bread</description>
<name>Strawberry Belgian Waffles</name> <calories>600</calories>
<price>$7.95</price> </food>
<description>Light Belgian waffles covered with <food>
strawberries and whipped cream</description> <name>Homestyle Breakfast</name>
<calories>900</calories> <price>$6.95</price>
</food> <description>Two eggs, bacon or sausage, toast, and
<food> our ever-popular hash browns</description>
<name>Berry-Berry Belgian Waffles</name> <calories>950</calories>
<price>$8.95</price> </food>
</breakfast_menu>

December 15, 2024 Ankur Chaudhary WT UNIT 2 153


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 15, 2024 Ankur Chaudhary WT UNIT 2 154
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 15, 2024 Ankur Chaudhary WT UNIT 2 155


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 15, 2024 Ankur Chaudhary WT UNIT 2 156
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 15, 2024 Ankur Chaudhary WT UNIT 2 157


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 15, 2024 Ankur Chaudhary WT UNIT 2 158


XML :Xlink (Cont..)

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


8"?> <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 </bookstore>
of Witchcraft and
Wizardry approaches, 15-year-old
Harry Potter is.......
</description>
</book>

December 15, 2024 Ankur Chaudhary WT UNIT 2 159


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 15, 2024 Ankur Chaudhary WT UNIT 2 160


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 15, 2024 Ankur Chaudhary WT UNIT 2 161
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 15, 2024 Ankur Chaudhary WT UNIT 2 162


Youtube & NPTEL Video Links and Online
Courses Details

• https://www.youtube.com/watch?v=uEmF74eHRO8
• https://www.youtube.com/watch?v=7GjHjZuYuAo
• https://www.youtube.com/watch?v=ukazLQCyArY
• https://www.youtube.com/watch?v=itRkLa2kq6w
• https://www.youtube.com/watch?v=itRkLa2kq6w
• https://www.youtube.com/watch?v=KJHYdkKtafU
• https://www.youtube.com/watch?v=uUhOEj4z8Fo
• https://www.youtube.com/watch?v=cXtUhpZJYz8&list=PLfn3cNtmZdPOe
3R_wO_h540QNfMkCQ0ho&index=18

December 15, 2024 Ankur Chaudhary WT UNIT 2 163


Daily Quiz

• The following elements <header>, <footer>, <article>, <section> are the


new elements in HTML5. These elements are called,

A) Control attributes
B) Semantic elements
C) Graphic elements
D) Multimedia elements

• Which among the following browsers does the HTML5 supports?

A) Safari
B) Firefox
C) Internet Explorer
D) All the mentioned above

December 15, 2024 Ankur Chaudhary WT UNIT 2 164


Daily Quiz(cont..)

• HTML5 does not use SGML or XHTML it’s completely a new


thing so you do not need to refer DTD.

A) Yes
B) No
• What is the replacement for cookies in HTML5?

A) Web beacons
B) Java scripts
C) Local Storage
D) All the above

December 15, 2024 Ankur Chaudhary WT UNIT 2 165


Daily Quiz(cont..)

• Which of the following tags below are used for a multi-line text
input control?

A. textml tag
B. text tag
C. textarea tag
D. Both b and c above
• Which of the following attributes below are used for a font name?

A. fontname
B. fn
C. font
D.face

December 15, 2024 Ankur Chaudhary WT UNIT 2 166


Daily Quiz(cont..)

• Each list item in an ordered or unordered list has which tag?

A. list tag
B. ls tag
C. li tag
D. ol tag
• HTML Practice Test - HTML Online Test - HTML Quiz Test

A. What is the difference between XML and HTML?


B. HTML is used for exchanging data, XML is not.
C. XML is used for exchanging data, HTML is not.
D. HTML can have user defined tags, XML cannot
E. Both b and c above

December 15, 2024 Ankur Chaudhary WT UNIT 2 167


Daily Quiz(cont..)

• Which type attribute of input element sets the element’s value to a


string representing a number?
A. range
B. email
C. file
D. date

• The World Wide Web’s markup language has always been HTML.
A. True
B. False

December 15, 2024 Ankur Chaudhary WT UNIT 2 168


Daily Quiz(cont..)

• What does DTD stand for?


A. Dynamic Type Definition.
B.Document Type Definition.
C.Do The Dance.
D.Direct Type Definition.

• Which statement is true?


A. XML tags are case sensitive.
B. XML documents must have a root tag
C. XML elements must be properly closed
D. All of the above.

December 15, 2024 Ankur Chaudhary WT UNIT 2 169


Daily Quiz(cont..)

• What does XSL stand for?


A. eXtra Style Languagee
B. Xpandable Style Languagee
C. Xtensible Style Listinge
D. Xtensible Stylesheet Language

• XML is a _______ Recommendation


A. Microsoft
B. Sun
C. W3C
D. None of these

December 15, 2024 Ankur Chaudhary WT UNIT 2 170


Weekly Assignment

• Discuss various types of list in HTML with example

• How ca you design various types of frame in HTML.

• Discuss various types ways to define xml schema with example

• List the various types of parser available in xml.

• Discuss XML Document Object Model in details

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

December 15, 2024 Ankur Chaudhary WT UNIT 2 171


Unit 2 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>

December 15, 2024 Ankur Chaudhary WT UNIT 2 172


Unit 2 MCQ s(cont..)

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

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

4. Can a data cell contain images?


a. Yes
b. No

December 15, 2024 Ankur Chaudhary WT UNIT 2 173


Unit 2 MCQ s(cont..)

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 15, 2024 Ankur Chaudhary WT UNIT 2 174


Unit 2 MCQ s(cont..)
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

December 15, 2024 Ankur Chaudhary WT UNIT 2 175


Unit 2 MCQ s(cont..)

9. Which file controls how your frames will appear?

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

10. A CSS combinator is the one which explains the relationship


between the selectors.
a. True
b. False

December 15, 2024 Ankur Chaudhary WT UNIT 2 176


Unit 2 MCQ s(cont..)

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 15, 2024 Ankur Chaudhary WT UNIT 2 177


Unit 2 MCQ s(cont..)

13. Find the correct syntax of the declaration which defines the XML
Version?

a. < ?xml version= "1.0" ? >


b. < xml version="1.0"/ >
c. < ?xml version="1.0" / >
d. None of the above

14. An XML parser converts an XML document into an XML DOM


object, which can then be manipulated with JavaScript.

a. True
b. False

December 15, 2024 Ankur Chaudhary WT UNIT 2 178


Unit 2 MCQ s(cont..)

15.Which language is case sensitive?


a. HTML
b. XML
c. Both A & B
d. None of the above
16. Which are the techniques for defining the structure of a specific type of XML
documents?

a. Schema
b. DTD
c. Both A & B
d. None of the above

December 15, 2024 Ankur Chaudhary WT UNIT 2 179


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 15, 2024 Ankur Chaudhary WT UNIT 2 180


Glossary Questions (Cont..)
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 15, 2024 Ankur Chaudhary WT UNIT 2 181
Glossary Questions (Cont..)
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 15, 2024 Ankur Chaudhary WT UNIT 2 182


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

Ankur Chaudhary WT UNIT 2 183


December 15, 2024
Old Question Paper(cont..)

Ankur Chaudhary WT UNIT 2


December 15, 2024 184
Old Question Paper(cont..)
2018-19
https://drive.google.com/file/d/1FsvkCgeo7sf1q4WRx7vh7A1fRNkJ0_2q/view

December 15, 2024 Ankur Chaudhary WT UNIT 2 185


Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 186


Old Question Paper(cont..)

Ankur Chaudhary WT UNIT 2


December 15, 2024
187
Old Question Paper(cont..)
2017-18
https://aktupapers.in/aktupapers/btech-cs-5-sem-web-technology-ncs-504-2017-18.pdf

188
December 15, 2024 Ankur Chaudhary WT UNIT 2
Old Question Paper(cont..)

Ankur Chaudhary WT UNIT 2


December 15, 2024
189
Old Question Paper(cont..)

Ankur Chaudhary WT UNIT 2 190


December 15, 2024
Old Question Paper(cont..)
2016-17
file:///C:/Users/Dell/Downloads/frdA290120A1619562_FirstRanker.com.pdf

December 15, 2024 Ankur Chaudhary WT UNIT 2


191
Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 192


Old Question Paper(cont..)
2014-15
file:///C:/Users/Dell/Downloads/frdA290120A1717123_FirstRanker.com.pdf

December 15, 2024 Ankur Chaudhary WT UNIT 2 193


Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 194


Old Question Paper

December 15, 2024 Ankur Chaudhary WT UNIT 2 195


Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 196


Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 197


Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 198


Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 199


Old Question Paper(cont..)

December 15, 2024 Ankur Chaudhary WT UNIT 2 200


Expected Questions for University Exam
• Discuss various types of html list in details

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

• What are the various types that use in XML schema

•Explain the functionalities of DOM and SAX parsers.

• What is the benefits to use the Dynamic HTML.

•Discuss various types of driver in details.

•Write a HTML document that implement ducument object model by


usin getElementByID() method.

December 15, 2024 Ankur Chaudhary WT UNIT 2 201


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 15, 2024 Ankur Chaudhary WT UNIT 2 202


Recap of Unit 2

• 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 15, 2024 Ankur Chaudhary WT UNIT 2 203


December 15, 2024 Ankur Chaudhary WT UNIT 2 204

You might also like