1. The document discusses the history and development of the Internet and World Wide Web. It explains that the Internet is a global network of interconnected computer networks, while the World Wide Web is a system of interlinked hypertext documents accessed via the Internet. 2. Key protocols like HTTP, HTTPS, and FTP that allow communication and data transfer across the Internet are described. Concepts such as URLs, domain names, DNS, web servers, and web browsers are also defined. 3. The document traces the early origins of the Internet from the ARPANET network developed by the US Department of Defense in the 1960s to the invention of the World Wide Web by Tim Berners-Lee in 1989.

1. Unit-3 Understanding
WWW

2. What is Internet ?
• Internet is worldwide collection of computer network
• It provides access to communication services and access to
information resources to the millions of users around the globe
• Internet covers globe and include large international network as well
as many smaller local area networks owned by any individual
company or country
• M/C or computer on one network can communicate with M/C or
computer on other network and send data file and other information
back and forth, for this work M/C on network must have to agree to
speak same language
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

3. Evolution of Internet:
• 1960 US Department of defence started packet switched network
ARPANET (Advanced Research Project Agency)
• WAN now known as DARPA (Defence Advanced Research Project
Agency)
• Idea was to connect different geographical areas network and allow
the transmission in the form of packets
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

4. Challenges faced by ARPA
• Interconnectivity: It deals with transportation of information and
for this software protocol is needed that could package and route the
information between multiple site and
 For this internet protocol is evolved ie TCP/IP
• Interpretability deals with application-to-application
communication, its challengeous because applications are running
vastly on different hardware platform with different operating
system & different file systems.
• Solution for this is to develop standard application protocol that
would enable application to application communication and be
independent of computer platform e.g. mainframe based email
program and PC based email program both are using same standard
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

5. Tim Berners Lee WWW Creator
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

6. What is WWW
• The World Wide Web (WWW) is combination of all resources and
users on the Internet that are using the Hypertext Transfer Protocol
(HTTP)
• "The World Wide Web is the universe of network-accessible
information
• Sir Tim Berners-Lee invented the World Wide Web in 1989.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

7. Evolution of WWW
• WWW is huge collection of hypertext pages on the Internet
• Concept WWW is developed in Switzerland by European laboratory
for particle physics (known CERN) in the year 1989
• The first text-based prototype was operational in 1991, in the month
of December 1991
• Tim Berners-Lee is the inventor of the Web and the director of
the W3C
• Berners-Lee developed hypertext, the method of instant cross-
referencing that supports communications on the Web, making it
easy to link content on one web page to content located elsewhere
• The World Wide Web has been widely available since 1991
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

8. Difference between Internet & WWW
• Many people use the terms Internet and World Wide Web (aka. the
Web) interchangeably
• The Internet and the Web are two separate but related things
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

9. Internet
• The internet is a massive network of networks, a networking
infrastructure.
 It connects millions of computers together globally
 It is a global network connecting millions of computers.
 The internet is decentralized.
 Each internet computer is independent.
 There are a variety of ways to access the internet.
 There are more than 3.5 billion internet users in the world
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

10. WWW
• The World Wide Web, or simply web, is a way of accessing
information over the medium of the internet.
• It is an information-sharing model that is built on top of the internet.
• The web uses the HTTP protocol, only one of the languages spoken over
the internet, to transmit data.
• It is an information-sharing model that is built on top of the internet.
• The web uses the HTTP protocol, only one of the languages spoken over
the internet, to transmit data.
 Support specially formatted documents.
 Documents are formatted in a markup language that supports links to other
documents.
 You can jump from one document to another simply by clicking on hot spots
(hyperlinks).
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

11. Webserver
• A Web server is a program that uses HTTP (Hypertext Transfer
Protocol)
• Serve the files that form Web pages to users, in response to their
requests, which are forwarded by their computers' HTTP clients.
• Dedicated computers and appliances may be referred to as Web
servers as well.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

12. What is Web Browser
• A web browser (commonly referred to as a browser) is a software
application for accessing information on the World Wide Web.
• Each individual web page, image, and video is identified by a
distinct URL, enabling browsers to retrieve and display them on
the user's device.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

13. Protocols, Building Web Sites
• The Internet relies on a number of protocols in order to function
properly.
• A protocol is simply a standard for enabling the connection,
communication, and data transfer between two places on a network.
• Here are some of the key protocols that are used for transferring
data across the Internet.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

14. HTTP
• HTTP stands for Hypertext Transfer Protocol.
• It is the standard protocol for transferring web pages (and their
content) across the Internet
• For browsing website url may preceded by http://
• It is telling browser to use HTTP to transfer data
• Most browser will default to HTTP if you don’t specify it e.g.
www.bitdurg.ac.in instead ( http://www.bitdurg.ac.in)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

15. HTTPS
• HTTPS stands for Hypertext Transfer Protocol over Secure Socket
Layer.
• Think of it as a secure version of HTTP.
• HTTPS is used primarily on web pages that ask you to provide
personal or sensitive information (such as a password or your credit
card details).
• When you browse a web page using HTTPS, you are using SSL
(Secure Sockets Layer).
• For a website to use HTTPS it needs to have an SSL
certificate installed on the server.
• These are usually issued by a trusted 3rd party, referred to as a
Certificate Authority (CA).
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

16. FTP
• FTP stands for File Transfer Protocol. It is used to transfer files
across the Internet.
• FTP is commonly used by web developers to publish updates to a
website (i.e. to upload a new version of the website).
• HTTP is used for displaying the file in your browser, FTP is used
simply to transfer the file from one computer to a specified location
on another computer
• You can use FTP to transfer the files from your computer to a remote
computer (such as a web server), or to transfer from the remote
computer to your local computer.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

17. What is a URL?
A URL stands for Uniform Resource Locator and is probably most
easily described as a "web address". "URL" and "web address" are
often used interchangeably.
Here are examples of URLs:
• https://www.quackit.com
• https://www.quackit.com/web_hosting
• https://www.quackit.com/web_hosting/domain_names.cfm
• In these examples, "quackit.com" is the domain name.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

18. What is a Domain Name?
• A domain name is a unique name that is assigned to a website.
• No two websites on the Internet can use the same domain name.
Because each domain name is unique, this enables anyone to access
your website using the domain name.
• If you didn't have a domain name, the only way anyone could access
your website is by using an IP address.
• A website's IP address is also unique, but it's much harder to for us
humans to remember than a domain name.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

19. How Does a Website Get a Domain
Name?
• Getting a domain name for a website is very easy.
• After deciding on your preferred domain name, you simply check for
it's availability using a domain name registrar or hosting provider.
• Once you've found an available domain name, you register it online,
then configure it to point to your website (which is also very easy).
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

20. What is DNS?
• DNS stands for Domain Name System. A domain name is the unique
name that is assigned to a website.
• DNS is the system that enables this to work. When you build a
website, you also register a domain name.
• Then, you point the domain name to your website.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

21. What is a DNS Server?
• For a domain name to be assigned to a website, it first needs to be
added to a DNS server.
• A DNS (Domain Name System) server is a large database containing
each domain name and its corresponding IP address.
• For example, if the domain name "google.com" resolves to the website
at 64.233.167.99 the DNS server holds this information.
• These DNS servers actually keep in synch with each other.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

22. How does my Browser find the right
Website?
• When you type a URL/web address into your browser, several things
occur behind the scenes to bring you the correct web page.
• he first thing your web browser needs to do is translate the domain
name into the IP address of a website.
• Doing this enables it to locate the correct website.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

23. Protocols, Building
Web Sites

24. HTTP
• Hypertext Transport Protocol
• Language of the Web
 protocol used for communication between web browsers and web servers
• TCP port 80 (443 secure)
• RFC 2616 (ver 1.1)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

25. URI,URN,URL
• Uniform Resource Identifier
 Information about a resource
• Uniform Resource Name
 The name of the resource with in a namespace
• Uniform Resource Locator
 How to find the resource, a URI that says how to find the resource
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

26. HTTP - URLs
• URL
 Uniform Resource Locator
 protocol (http, ftp, news)
 host name (name.domain name)
 port (usually 80 but many on 8080)
 directory path to the resource
 resource name
 http://xxx.myplace.com/www/index.html
 http://xxx.myplace.com:80/cgi-bin/t.exe
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

27. HTTP - methods
• Methods
 GET
 retrieve a URL from the server
 simple page request
 run a CGI program
 run a CGI with arguments attached to the URL
 POST
 preferred method for forms processing
 run a CGI program
 parameterized data in sysin
 more secure and private
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

28. HTTP - methods
• Methods (cont.)
 PUT
 Used to transfer a file from the client to the server
 HEAD
 requests URLs status header only
 used for conditional URL handling for performance enhancement schemes
 retrieve URL only if not in local cache or date is more recent than cached copy
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

29. Mapping it all out
www or intranet
client
browser (Internet Explorer)
2. browser requests
information
3. information sent
to browser
1. request made
to browser
4. Browser displays
information
servers
info found
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

30. Terms
• Web pages are written in a language called HTML (HyperText
Markup Language)
• The website address is often referred to as an URL (Uniform
Resource Locator)
• Frontpage is a web design program that codes the pages (into
html) as you create them.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

31. Web design – the first steps
2 questions
• 1. what is the purpose of the site? (AIM)
• 2. who is the site for (audience)
Consider including a one sentence tagline on the homepage
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

32. Purpose
• This site is meant to be informative.
• The site will be used to sell a product.
• The site will be used to recruit new members to our organization.
• The main purpose of the site is educational.
• The primary purpose of the site is to be a newsletter.
• I wanna spread some gossip.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

33. Who?
• Students at a university.
• People between the ages of 18 and 24.
• Expert Internet users.
• Patients
• Internet newbies.
• My mom
• My clever cat
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

34. Lets’ Play
• Microsoft Frontpage
• Build a site map – good old pen and paper
• Develop a web page template
• Title each page
• Determine and add content
• Link pages together and build a navigation structure
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

35. Site map
files
motorbikes
product news technical info
gallery
vintage sports members’
The basic unit of any website is a
web page
The main web page from which
everything stems is called the
homepage (often identified by file
name index.htm or default.htm)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

36. Site Mapping
• Before doing anything technical, sit down with pen and paper (lots of
paper)
• Use rectangular paper cut outs to represent your web pages – write
on them
• Now play around on a large table – rearranging them until the
structure is just write
• When you’ve got it, write it out in a way similar to what you saw on
the previous slide.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

37. Good web design
• CONTRAST
• REPITITION
• ALIGNMENT
• PROXIMITY
• NAVIGATION
• TEXT PRESENTATION & FONTS
disobey these rules and you
will get a CRAP NeT
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

38. Contrast
this is an example of poor contrast
another example of how contrast provides a warning
contrast to make something stand out
Use active white space to make your content
stand out on the page.
universal warning sign
white on black is harder to read than black on white
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

39. Repition
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

40. Alignment
Centre alignment makes finding the beginning of a new line of text
much more difficult.
Each line tends to be a different length. As a result it is much more
tiring to read text with centre alignment. The eye is constantly
guessing and searching for the start point.
In addition, centre alignment causes odd line lengths. These odd
lengths cause a sort of "choppiness" in how the text reads. It lacks
the smooth flow that tends to occur with left alignment.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

41. Proximity
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

42. NAVIGATION
There are several basic styles of navigation
[HORIZONTAL] [HORIZONTAL] [HORIZONTAL] [HORIZONTAL]
VERTICAL
VERTICAL
VERTICAL
VERTICAL
VERTIVAL
VERTICAL
VERTICAL
VERTICAL
not
recommended
TOP
BOTTOM
LEFT RIGHT
use the
three click rule
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

43. primary
secondary
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

44. FONTS
• Arial
• Times New Roman
• Courier
Batang
Monotype Corsiva
Haettenschweiler
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

45. TEXT PRESENTATION
Large text is hard to
read because people
can only read one or
two words at a time.
Small text is difficult to read because many computer screens cannot clearly display the tiny
characthers. Also, small print is hard to see under the best of circumstances.
Text size ranges from 1 to 7. 1 is the smallest, 7 the largest. Default is 3.
HTML also allow setting relative sizes. Included are +1 through +7 and -1
through -7. These sizes are not specific, but, are relative to the browser default
size.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

46. How to make horrible websites
• Add turn-off colours or bad contrast
• Using silly fonts at silly sizes
• Add tonnes of pictures (slows site down)
• Add loads of flashing images (jpegs, gifs,bmps)
• Tonnes of pages (three hundred clicks to get anywhere)
• Background music
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

47. Top Tips
• Use the KISS principle (Keep It Simple, Stupid)
(beware of too much text on a webpage, plenty of white space too)
• Develop a common "look and feel" for the entire web site.
• Make sure every web page has a clear focal point
• Make sure that your webpages use names that indicate what
their content is.
• Always test your website and webpages
• Revisit your aims and objectives – have they been met?
• Get other people to look at and explore your website and get
feedback from them
• Beware of exhaustive lists of links – they’ll never get visited.
Keep It Simple – few important ones
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

48. If you plan to put it on the web
• Make sure you use a sensible domain
• www.bradfordvts.co.uk = good
• www.hotmail.com/sp1/malcolminthemiddle.htm = bad
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

49. Final thought
• The Web is a great source for information but remember it is not
the only source.
• A tremendous amount of information is only published in paper
format such books, reports, newspapers, magazines and academic
serials.
• Over 100,000 different book titles and 20,000 magazine and other
serial titles are published every year all over the world!
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

50. CSS

51. CSS
• CSS is a language that describes the style of an HTML document.
• CSS describes how HTML elements should be displayed.
Example :
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

52. CSS Syntax and Selectors
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
• A CSS rule-set consists of a selector and a declaration block:
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated by
a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.

53. Example
• In the following example all <p> elements will be center-aligned,
with a red text color:
p {
color: red;
text-align: center;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

54. The element Selector
• The element selector selects elements based on the element name.
• You can select all <p> elements on a page like this (in this case, all
<p> elements will be center-aligned, with a red text color):
• Example
p {
text-align: center;
color: red;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

55. The id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element should be unique within a page, so the id selector is
used to select one unique element!
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
• The style rule below will be applied to the HTML element with
id="para1":
Example
#para1 {
text-align: center;
color: red;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

56. The class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the name of the class.
• In the example below, all HTML elements with class="center" will be
red and center-aligned:
Example
.center {
text-align: center;
color: red;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

57. The class Selector ..
• You can also specify that only specific HTML elements should be
affected by a class.
• In the example below, only <p> elements with class="center" will be
center-aligned:
Example
p.center {
text-align: center;
color: red;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

58. Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

59. External Style Sheet
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each page must include a reference to the external style sheet file
inside the <link> element. The <link> element goes inside the
<head> section:
Example
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

60. mystyle.css
• An external style sheet can be written in any text editor. The file
should not contain any html tags. The style sheet file must be saved
with a .css extension.
• Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

61. Internal Style Sheet
• An internal style sheet may be used if one single page has a unique style.
• Internal styles are defined within the <style> element, inside the <head> section
of an HTML page
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

62. Inline Styles
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
• The example below shows how to change the color and the left
margin of a <h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

63. Multiple Style Sheets
• If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be
used.
Example
• Assume that an external style sheet has the following style for the <h1>
element:
h1 {
color: navy;
}
then, assume that an internal style sheet also has the following style for
the <h1> element:
h1 {
color: orange;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

64. • If the internal style is defined after the link to the external style
sheet, the <h1> elements will be "orange":
Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

65. Example
However, if the internal style is defined before the link to the external
style sheet, the <h1> elements will be "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

66. Cascading Order
• What style will be used when there is more than one style specified
for an HTML element?
• Generally speaking we can say that all the styles will "cascade" into
a new "virtual" style sheet by the following rules, where number one
has the highest priority:
• Inline style (inside an HTML element)
• External and internal style sheets (in the head section)
• Browser default
• So, an inline style (inside a specific HTML element) has the highest
priority, which means that it will override a style defined inside the
<head> tag, or in an external style sheet, or a browser default value.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

67. Ex.1
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color:
rgb(250,0,255)}
</style>
</head>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

68. Ex.2
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg')
}
</style>
</head>
<body>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

69. Ex.3
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

70. Ex.4
html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-x
}
</style>
</head>
<body>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

71. Ex.5
<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-position:
center;
}
</style>
</head>
<body>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

72. Ex.6
<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<body>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

73. Ex.7
<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-
repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

74. EX: 8 To set color of text:
<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

75. EX: 9. SPECIFY SPACE
BETWEEN CHARACTERS
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>
•
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

76. EX: 10 Aligning text
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

77. EX: 11 External Style:
<html>
<head>
<link rel="stylesheet" type="text/cs
s" href="mystyle.css">
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

78. Example of Inline Style
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size =
"5">Hello, World!</font></p>
</body>
</html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-
size:24px;" >Hello, World!</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

79. Example of class selector
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href =
"/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

80. Internal Style CSS
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

81. Inline Stylesheet
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

82. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
1. What is CSS ?
The full form of CSS is Cascading Style Sheets. It is a styling language
which is simple enough for HTML elements. It is popular in web
designing, and its application is common in XHTML also.
2. What is the origin of CSS ?
Standard Generalized Markup Language marked the beginning of style
sheets in 1980s.
3. What are the different variations of CSS ?
The variations for CSS are:

83. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
4. What are the limitations of CSS ?
Limitations are:
• Ascending by selectors is not possible
• Limitations of vertical control
• No expressions
• No column declaration
• Pseudo-class not controlled by dynamic behavior
• Rules, styles, targeting specific text not possible
5. What are the advantages of CSS ?
Advantages are:
• Bandwidth
• Site-wide consistency
• Page reformatting
• Accessibility
• Content separated from presentation

84. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
6. Who maintains the CSS specifications?
World Wide Web Consortium maintains the CSS specifications.
7. In how many ways can a CSS be integrated as a web page?
CSS can be integrated in three ways:
•Inline: Style attribute can be used to have CSS applied HTML elements.
•Embedded: The Head element can have a Style element within which the code can
be placed.
•Linked/ Imported: CSS can be placed in an external file and linked via link element.
8. What benefits and demerits do External Style Sheets have?
Benefits:
One file can be used to control multiple documents having different styles.
Multiple HTML elements can have many documents, which can have classes.
To group styles in composite situations, methods as selector and grouping are used.
Demerits:
Extra download is needed to import documents having style information.
To render the document, the external style sheet should be loaded.
Not practical for small style definitions.

85. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
9. Discuss the merits and demerits of Embedded Style Sheets?
Merits of Embedded Style Sheets:
•Multiple tag types can be created in a single document.
•Styles, in complex situations, can be applied by using Selector and Grouping methods.
•Extra download is unnecessary.
Demerits of Embedded Style Sheets:
•Multiple documents cannot be controlled.
10. What does CSS selector mean?
A string equivalent of HTML elements by which declarations or a set of it, is declared and is a
link that can be referred for linking HTML and Style sheet is CSS selector.
11. Enlist the media types CSS allows?
The design and customization of documents are rendered by media. By applying media control
over the external style sheets, they can be retrieved and used by loading it from the network.
12. Differentiate logical tags from physical tags?
While physical tags are also referred to as presentational mark-up, logical tags are useless for
appearances.
Physical tags are newer versions while logical tags are old and concentrate on content.

86. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
13. Differentiate Style Sheet concept from HTML?
While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover,
style sheets have better browser capabilities and formatting options.
14. Describe ‘ruleset’?
Ruleset : Selectors can be attached to other selectors to be identified by ruleset.
It has two parts:
•Selector, e.g. R and
•declaration {text-indent: 11pt}
15. Comment on the Case-sensitivity of CSS ?
Although, there are no case-sensitivity of CSS, nevertheless font families, URL’s of images, etc
is. Only when XML declarations along with XHTML DOCTYPE are being used on the page,
CSS is case -sensitive.
16. Define Declaration block?
A catalog of directions within braces consisting of property, colon and value is called
declaration block.
e.g.: [property 1: value 3]

87. XML
eXtensible Markup Language

88. What is XML
• A meta language that allows you to create and format your own
document markups
• A method for putting structured data into a text file; these
files are
- easy to read
- unambiguous
- extensible
- platform-independent
• XML is not used to design your home page
• It won't change the way of building Web Sites
• Many people believe that XML is useless, as they can't see a way
that it will benefit them.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

89. What is XML.
• XML is a markup language that focuses on data rather than how the
data looks.
• XML is designed to send, store, receive and display data.
• In simple words you can say that XML is used for storing and
transporting data.
• XML became a W3C (W3C stands for World Wide Web Consortium)
recommendation on February 10, 1998.
• XML is different from HTML.
• XML focuses on data while HTML focuses on how the data looks.
• XML does not depend on software and hardware, it is platform and
programming language independent.
• Unlike HTML where most of the tags are predefined, XML doesn’t have
predefined tags, rather you have to create your own tags.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

90. What is XML ..
• A family of technologies:
- XML 1.0
- Xlink
- Xpointer & Xfragments
- CSS, XSL, XSLT
- DOM
- XML Namespaces
- XML Schemas
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

91. XML Facts
• Officially recommended by W3C since 1998
• A simplified form of SGML (Standard Generalized Markup
Language)
• Primarily created by Jon Bosak of Sun Microsystems
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

92. Prerequisite's of XML
• Basic knowledge of -
 HTML and
 JavaScript.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

93. Reason of XML Development
• Computers do not understand the information placed in them
• The computer cannot even tell what on this page is a heading, what
is text and what is an advert
• XML was designed to overcome the above issue
• Web pages are not compatible across different devices
• XML is used to define what data means and what not
• How it is displayed, it makes it very easy to use the same data on
several different platforms
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

94. Why we need XML?
• There are systems with different-different operating systems having
data in different formats.
• In order to transfer the data between these systems is a difficult task
as the data needs to converted in compatible formats before it can be
used on other system.
• With XML, it is so easy to transfer data between such systems as
XML doesn’t depend on platform and the language.
• XML is a simple document with the data, which can be used to store
and transfer data between any systems irrespective of their
hardware and software compatibilities.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

95. What is Markup?
• Markup is information added to a document that enhances its
meaning in certain ways, in that it identifies the parts and how they
relate to each other.
• More specifically, a markup language is a set of symbols that can be
placed in the text of a document to demarcate and label the parts of
that document.
• Following example shows how XML markup looks, when embedded
in a piece of text
<message>
<text>Hello, world!</text>
</message>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

96. Is XML a Programming Language?
• A programming language consists of grammar rules and its own
vocabulary which is used to create computer programs.
• These programs instruct the computer to perform specific tasks.
• XML does not qualify to be a programming language as it does
not perform any computation or algorithms.
• It is usually stored in a simple text file and is processed by special
software that is capable of interpreting XML.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

97. Basic Rules
• XML is case sensitive
• All start tags must have end tags
• Elements must be properly nested
• XML declaration is the first statement
• Every document must contain a root element
• Attribute values must have quotation marks
• Certain characters are reserved for parsing
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

98. Avoiding Common errors
• Do not use white space when creating names for elements
• Element names cannot begin with a digit, although names can
contain digits
• Only certain punctuation allowed – periods, colons, and hyphens
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

99. XML tags
• XML tags form the foundation of XML.
• They define the scope of an element in XML.
• Start Tag : The beginning of every non-empty XML element is marked
by a start-tag. Following is an example of start-tag − <address>
• End Tag : Very element that has a start tag should end with an end-
tag. Following is an example of end-tag − </address>
• Empty Tag :
 The text that appears between start-tag and end-tag is called content.
 An element which has no content is termed as empty. An empty element can be
represented in two ways as follows −
A start-tag immediately followed by an end-tag as shown below − <hr> </hr>
A complete empty-element tag is as shown below − <hr /> Empty-element
tags may be used for any element which has no content
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

100. XML Tags Rules
Rule-1: XML tags are case-sensitive.
• <address>This is wrong syntax</Address>
• Following code shows a correct way, where we use the same case to
name the start and the end tag.
• <address>This is correct syntax</address>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

101. XML Tags Rules..
Rule 2:
• XML tags must be closed in an appropriate order,
• i.e., an XML tag opened inside another element must be closed before
the outer element is closed.
• For example −
<outer_element>
<internal_element>
This tag is closed before the outer_element
</internal_element>
</outer_element>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

102. Components of XML Document
• Elements: <hello>
• Attributes: <item id=“33905”>
• Entities: &lt; (<)
• Advanced Components
 CData Sections
 Processing Instructions
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

103. XML Example
<?xml version="1.0" encoding="UTF-8"?>
<message>
<to>MyReader</to>
<from>Chaitanya</from>
<msg>Welcome to Myhomepage</msg>
</message>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
The top line <?xml version="1.0" encoding="UTF-8"?> is called XML prolog.

104. Example-1
<?xml version=“1.0” encoding=“utf-8” ? >
<note>
<date>2015-09-01</date>
<hour>08:30</hour>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

105. Example-2
<bookstore>
<book category="cooking">
<title lang="en">Everyday
Italian</title>
<author>Giada De
Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry
Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

106. Example-3
<person gender="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

107. Example-4
<person>
<gender>female</gender>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

108. XML - DTD

109. What is DTD ?
• DTD stands for Document Type Definition.
• A DTD defines the structure of a “valid” XML document
• Its main purpose is to define the structure of an XML document.
• It contains a list of legal elements and define the structure with
the help of them.
• DTD can be internal or external
• Processing overhead is incurred when validating XML with a
DTD
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

110. The building blocks of XML
documents
• Elements,
• Tags,
• Attributes,
• Entities,
• PCDATA, and
• CDATA
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

111. Elements
• Elements are the main building blocks of both XML and HTML
documents
• HTML elements are "body" and "table”
• XML elements could be "note" and "message“
• Can contain text, other elements, or be empty
• Examples of empty HTML elements are "hr", "br" and "img".
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

112. Tags
• Tags are used to markup elements.
• A starting tag like <element name> mark up the beginning of an
element
• A body element: <body>body text in between</body>.
• A message element: <message>some message in between</message>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

113. Attributes
• Attributes provide extra information about elements
• placed inside the start tag of an element
• Attributes come in name/value pairs
• E.g. <img src="computer.gif" />
• the attribute is "src".
• value of the attribute is "computer.gif".
• Since the element itself is empty it is closed by a " /"
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

114. Entities
• Entities are variables used to define common text
• Entity references are references to entities
• the HTML entity reference: "&nbsp;"
• Entities are expanded when a document is parsed by an XML parser.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
&lt; <
&gt; >
&amp; &
&quot; “
&apos; ‘
Predefined Entities of XML:

115. PCDATA
• PCDATA means parsed character data
• character data - the text found between the start tag and the end tag
of an XML element.
• PCDATA is text that will be parsed by a parser
• Tags inside the text will be treated as markup and entities will be
expanded.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

116. CDATA
• CDATA also means character data
• CDATA is text that will NOT be parsed by a parser
• Tags inside the text will NOT be treated as markup and entities will
not be expanded.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

117. Content Model
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
• Identify the name of the element and the nature of
that element’s content
• The example declares an element -- then describes
the document’s content model
<!ELEMENT note (to, from, subject, body)>
Name Content
model
Element
definition

118. Declaring an Element
Elements are declared with an element declaration
<!ELEMENT element-name (element-content)>
Empty elements
<!ELEMENT img (EMPTY)>
Elements with data
<!ELEMENT element-name (#CDATA)>
or <!ELEMENT element-name (#PCDATA)>
or <!ELEMENT element-name (ANY)>
example:<!ELEMENT note (#PCDATA)>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

119. Elements with children
(sequences)
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#CDATA)>
<!ELEMENT from (#CDATA)>
<!ELEMENT heading (#CDATA)>
<!ELEMENT body (#CDATA)>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

120. Wrapping
<?xml version="1.0"?>
<!DOCTYPE note [ <!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#CDATA)>
<!ELEMENT from (#CDATA)>
<!ELEMENT heading (#CDATA)>
<!ELEMENT body (#CDATA)> ]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

121. An internal DTD
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
<invoice>
<sku>12345</sku>
<qty>55</qty>
<desc>Left handed monkey wrench</desc>
<price>14.95</price>
</invoice>
<!DOCTYPE invoice [
<!ELEMENT invoice (sku, qty, desc, price) >
<!ELEMENT sku (#PCDATA) >
<!ELEMENT qty (#PCDATA) >
<!ELEMENT desc (#PCDATA) >
<!ELEMENT price (#PCDATA) >
]>
<?xml version=“1.0”?>

122. An referenced external DTD
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
<?xml version=“1.0”>
<!DOCTYPE invoice SYSTEM “invoice.dtd”>
<invoice>
<sku>12345</sku>
<qty>55</qty>
<desc>Left handed monkey wrench</desc>
<price>14.95</price>
</invoice>

123. An external DTD (invoice.dtd)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
<?xml version=“1.0”?>
<!ELEMENT invoice (sku, qty, desc, price) >
<!ELEMENT sku (#PCDATA) >
<!ELEMENT qty (#PCDATA) >
<!ELEMENT desc (#PCDATA) >
<!ELEMENT price (#PCDATA) >

124. Example of External DTD
<?xml version="1.0"?>
<!DOCTYPE employee SYSTEM "em
ployee.dtd">
<employee>
<firstname>vimal</firstname>
<lastname>jaiswal</lastname>
<email>vimal@abc.com</email>
</employee>
<!ELEMENT employee (firstname,la
stname,email)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT email (#PCDATA)>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

125. XML Namespace
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

126. XML Namespaces
• XML Namespace is used to avoid element name conflict in XML
document.
• An XML namespace is declared using the reserved XML attribute.
This attribute name must be started with "xmlns".
• Let's see the XML namespace syntax
• <element xmlns:name = "URL">
• Here, namespace starts with keyword "xmlns".
• The word name is a namespace prefix.
• The URL is a namespace identifier.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

127. XML Schema

128. What is XML Schema?
 An XML Schema describes the structure of an XML document.
 The XML Schema language is also referred to as XML Schema
Definition (XSD).
 XML Schema was originally proposed by Microsoft, but became an
official W3C recommendation in May 2001
 It is used to describe and validate the structure and the content
of XML data.
 XML schema defines the elements, attributes and data types.
 It is similar to a database schema that describes the data in a
database.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

129. Why Schema? (1)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Information
Structure
Format
Traditional Document:
Everything is clumped together
Information
Structure
Format
“Fashionable” Document: A document is
broken into discrete parts, which can be
treated separately

130. Why Schema? (2)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Schema Workflow

131. DTD versus Schema
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Limitations of DTD
• No constraints on character data
• Not using XML syntax
• No support for namespace
• Very limited for reusability and
extensibility
Advantages of Schema
• Syntax in XML Style
• Supporting Namespace and import/include
• More data types
• Able to create complex data type by
inheritance
• Inheritance by extension or restriction
• More …

132. XML document & XML Schema
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
XML Schema
(.xsd)
Information
Items
…
Elements
Attributes
•Declaration
•Type Definition
XML Document
(.xml)

133. XSD Example
• <?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Sample Types
• xs:string
• xs:decimal
• xs:integer
• xs:boolean
• xs:date
• xs:time

134. XML Document
• <?xml version="1.0"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

135. DTD File
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

136. XML Namespace
• XML namespaces are used for providing
 uniquely named elements and attributes
in an XML document.
• They are defined in a W3C recommendation.
• An XML instance may contain element or attribute
names from more than one XML vocabulary
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

137. XML Schema
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="https://www.bitdurg.ac.in"
xmlns="https://www. bitdurg.ac.in"
elementFormDefault="qualified">
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

138. Define a Complex Type and then create
an element using type attribute.
<xs:complexType name = "StudentType">
<xs:sequence>
<xs:element name = "firstname" type = "xs:string"/>
<xs:element name = "lastname" type = "xs:string"/>
<xs:element name = "nickname" type = "xs:string"/>
<xs:element name = "marks" type = "xs:positiveInteger"/>
</xs:sequence>
<xs:attribute name = 'rollno' type = 'xs:positiveInteger'/>
</xs:complexType>
<xs:element name = 'student' type = 'StudentType' />
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
The sequence element specifies that the child elements must appear in a sequence.
Each child element can occur from 0 to any number of times

139. XSL

140. Presenting using XML
• A key advantage of using XML as a data source is that
its presentation (such as a web page)
• It can be separate from its structure and content.
• Presentation - Applied stylesheets define its presentation. ...
• Structure and content: XML data defines the structure and content.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

141. XSL(Extensible Stylesheet Language)
• XSL is a language for expressing style sheets.
• An XSL style sheet is, like with CSS, a file that describes how to
display an XML document of a given type.
• XSL shares the functionality and is compatible with CSS2 (although
it uses a different syntax).
• It also adds: A transformation language for XML documents: XSLT.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

142. XSL
• XSL is an alternative to CSS that allows greater control over the
presentation of the XML data.
• [like CSS] allow changing presentation without changing the XML
source, and display documents on various media,
• Used in Applications that require high-level quality formatting:
• Publishing industry (books, technical documentation)
• Publication on different media: paper, web, mobile devices
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

143. • To create a CD catalog using XML file.
Procedure:
Create an Xml file named as “cd_catalog.xml” with the following details.
<catalog>
<cd>
<title>…</title>
<artist>…</artist>
<country>…</country>
<company>…</company>
<price>…</price>
<year>…</year>
</cd>
<!-Add 3 to 4 <cd> data.-->
</catalog>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

144. • Solution:
File Name: cd_catalog.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
</catalog>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

145. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

146. To create external style sheet and using the style sheet in xml file.
Procedure:
Create a style sheet named as cd_catalog.css and provide necessary style for the tags used in cd_catalog.xml file
Create an xml file named as cd_catalog_css.xml and include the .css file created above.
Solution :-
In notepad type the necessary code & save with the file name mentioned with .xml extension.
File Name: cd_catalog.css
CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

147. <?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
.
.
</CATALOG>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

148. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

149. Xlink

150. XLink
• 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
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

151. Examples
<mydogs xmlns:xlink="http://www.w3.org/1999/xlink">
<fact xlink:type="simple" xlink:href="https://dog.com/dogb
reeds.xml#Rottweiler">
Fact about Rottweiler
</fact>
<fact xlink:type="simple" xlink:href="https://dog.com/dogbr
eeds.xml#FCRetriever">
Fact about flat-coated Retriever
</fact>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

152. Xpath

153. Xpath
• Building block for other W3C standards:
 XSL Transformations (XSLT)
 XML Link (XLink)
 XML Pointer (XPointer)
 XML Query
• Was originally part of XSL
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

154. Xpath
• XPath is a W3C recommendation
• XPath is a query language that is used for traversing through
an XML document.
• It is used commonly to search particular elements or attributes with
matching patterns.
• XPath uses path expressions to navigate in XML documents.
• XPath − used to navigate/ traverse elements and attributes of an
XML documents
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

155. Absolute Path (Complete Path)
D:documentssomething.doc
C:Windowscalc.exe
Internet URL absolute path
https://www.computerhope.com/oh.htm
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

156. Relative Path (related pwd)
• calc.exe
• /public_html/cgi-bin
Internet URL non absolute path (relative path)
• oh.htm
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

157. XPath - Expression
• An XPath expression defines a pattern to select a set of nodes.
• These patterns are used by XSLT to perform transformations
• XPath gives specification for seven types of nodes which can be the
output of execution of the XPath expression.
 Root
 Element
 Text
 Attribute
 Comment
 Processing Instruction
 Namespace
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

158. list of useful paths and expression
S.No. Expression & Description
1
node-name - Select all nodes with the given name "nodename"
2
/ - Selection starts from the root node
3
// - Selection starts from the current node that match the selection
4
. - Selects the current node
5
.. - Selects the parent of the current node
6
@ - Selects attributes
7
Student - Example − Selects all nodes with the name "student"
8
class/student - Example − Selects all student elements that are children of class
9
//student - Selects all student elements no matter where they are in the document
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

159. Example for XPath Queries
<bib>
<book> <publisher> Addison-Wesley </publisher>
<author> Serge Abiteboul </author>
<author> <first-name> Rick </first-name>
<last-name> Hull </last-name>
</author>
<author> Victor Vianu </author>
<title> Foundations of Databases </title>
<year> 1995 </year>
</book>
<book price=“55”>
<publisher> Freeman </publisher>
<author> Jeffrey D. Ullman </author>
<title> Principles of Database and Knowledge Base Systems
</title>
<year> 1998 </year>
</book>
</bib>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

160. Data Model for XPath
bib
book book
publisher author . . . .
Addison-Wesley Serge Abiteboul
The root
The root element
Much like the Xquery data model
Processing
instruction
Comment
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

161. XPath: Simple Expressions
/bib/book/year
Result: <year> 1995 </year>
<year> 1998 </year>
/bib/paper/year
Result: empty (there were no papers)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

162. XPath: Restricted Kleene Closure
//author
Result:<author> Serge Abiteboul </author>
<author> <first-name> Rick </first-name>
<last-name> Hull </last-name>
</author>
<author> Victor Vianu </author>
<author> Jeffrey D. Ullman </author>
/bib//first-name
Result: <first-name> Rick </first-name>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

163. Xpath: Functions
/bib/book/author/text()
Result: Serge Abiteboul
Jeffrey D. Ullman
Rick Hull doesn’t appear because he has firstname, lastname
Functions in XPath:
 text() = matches the text value
 node() = matches any node (= * or @* or text())
 name() = returns the name of the current tag
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

164. Xpath: Wildcard
//author/*
Result: <first-name> Rick </first-name>
<last-name> Hull </last-name>
* Matches any element
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

165. Xpath: Attribute Nodes
/bib/book/@price
Result: “55”
@price means that price is has to be an attribute
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

166. Xpath: Qualifiers
/bib/book/author[firstname]
Result: <author> <first-name> Rick </first-name>
<last-name> Hull </last-name>
</author>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

167. Xpath: More Qualifiers
/bib/book/author[firstname][address[//zip][city]]/lastname
Result: <lastname> … </lastname>
<lastname> … </lastname>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

168. Xpath: More Qualifiers
/bib/book[@price < “60”]
/bib/book[author/@age < “25”]
/bib/book[author/text()]
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

169. Xpath: Summary
bib matches a bib element
* matches any element
/ matches the root element
/bib matches a bib element under root
bib/paper matches a paper in bib
bib//paper matches a paper in bib, at any depth
//paper matches a paper at any depth
paper|book matches a paper or a book
@price matches a price attribute
bib/book/@price matches price attribute in book, in bib
bib/book/[@price<“55”]/author/lastname matches…
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

170. XML Parser
• XML parser is a software library or a package that provides
interface for client applications to work with XML documents.
• It checks for proper format of the XML document and may also
validate the XML documents.
• Modern day browsers have built-in XML parsers.
• The goal of a parser is to transform XML into a readable code
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

171. XML Applications
• XML is used to store or transport data,
• In XML, there is a full separation between data and presentation.
• Web publishing: XML allows you to create interactive pages, e-
commerce applications more intuitive.
• Web searching and automating Web tasks: XML defines the type of
information contained in a document, making it easier to return useful
results when searching the Web
• e-business applications: XML implementations make electronic data
interchange (EDI)
• Metadata applications: XML makes it easier to express metadata in a
portable, reusable format.
• Pervasive computing: XML provides portable and structured
information types for display on pervasive (wireless) computing devices
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra

172. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Questions Appeared in Previous year University Examination:
Nov – Dec 2013
1. What is WWW? – 2m
2. Write basic HTML Commands to create the following in the web pages
(i) Image
(ii) Hyperlink
(iii) Tables
(iv) Frames - 7M
3. Write short notes on the following (i) XML, (ii) DTD – 7M
4. Explain the following (i) XSL (ii) XLINK (iii) XPATH (IV) XPointer
Nov – Dec 2014
1. Define DTD – 2m
2. Write short note on (i) Web Browser and (ii) Web Server- 7M
3. Explain 7 HTML Tags with Syntax and attributes. – 7M
4. Explain Namespace in XML. What are the different uses of XML? - 7M
April-May 2014
1. How will you create a password field in HTML form? – 2m
2. Explain the purpose and ways of creating list in HTML document - 7M
3. Explain in details XML Schema, built in and user defined data types - 7M
4. Write short note on (i) DTD and (ii) Webserver - 7M

173. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Questions Appeared in Previous year University Examination …
Nov – Dec 2015
1. What is protocol – 2m
2. Describe different steps used for building website? - 7M
3. Describe the structure of XML Document. – 7M
4. Write the code for creating login form in HTML - 7M
Nov – Dec 2016
1. What are the web browsers? – 2m
2. Design HTML Webpage which makes use of Internal and External hyperlinking as well as
image as link - 7M
3. What is DTD? Discuss types and advantages – 7M
4. What is XML? Write short note on (i) XML Schemes (ii) Entities and (iii) Namespaces -
7M

174. U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Questions Appeared in Previous year University Examination …
April – May 2017
1. What is WWW – 2m
2. Write HTML code for following output : - 7M
3. What is DTD ? How to define DTD for single element, Nested element and attribute in XML ? - 7M
4. Write short notes on any two
(i) Namespace (ii) XML Schema (iii) XML Parser - 7M
Nov – Dec 2018
1. What is WWW ? – 2m
2. Design a login Webpage and registration form and show the expected user interface - 7M
3. What is XSL, Xlink, XPATH and Xpointer ? Discuss types and advantages – 7M
4. Write HTML code to create a table and various types of list.