SlideShare a Scribd company logo
1 of 174
Download to read offline
Unit-3 Understanding
WWW
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
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
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
Tim Berners Lee WWW Creator
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Protocols, Building
Web Sites
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Repition
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
Proximity
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
primary
secondary
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
FONTS
• Arial
• Times New Roman
• Courier
Batang
Monotype Corsiva
Haettenschweiler
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
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
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
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
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
CSS
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
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.
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
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
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
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
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
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
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
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
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
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
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
• 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
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
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
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>
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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:
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
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.
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.
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]
XML
eXtensible Markup Language
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
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
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
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
Prerequisite's of XML
• Basic knowledge of -
 HTML and
 JavaScript.
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
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
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
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
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
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
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
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
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
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
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.
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
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
Example-3
<person gender="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Example-4
<person>
<gender>female</gender>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
XML - DTD
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
The building blocks of XML
documents
• Elements,
• Tags,
• Attributes,
• Entities,
• PCDATA, and
• CDATA
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
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
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
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:
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
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
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
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
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
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
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”?>
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>
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) >
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
XML Namespace
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
XML Schema
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
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
Why Schema? (2)
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Schema Workflow
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 …
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)
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
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
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
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
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
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
XSL
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
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
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
• 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
• 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
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
<?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
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Xlink
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
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
Xpath
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Xpath: More Qualifiers
/bib/book/author[firstname][address[//zip][city]]/lastname
Result: <lastname> … </lastname>
<lastname> … </lastname>
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
Xpath: More Qualifiers
/bib/book[@price < “60”]
/bib/book[author/@age < “25”]
/bib/book[author/text()]
U-3
Understanding
WWW
-
Prof.
D.
P.
Mishra
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
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
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
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
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
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.

More Related Content

Similar to Understanding WWW

Similar to Understanding WWW (20)

internet
internetinternet
internet
 
Module 1 Basic.pptx
Module 1 Basic.pptxModule 1 Basic.pptx
Module 1 Basic.pptx
 
MODULE-5_CCN.pptx
MODULE-5_CCN.pptxMODULE-5_CCN.pptx
MODULE-5_CCN.pptx
 
Invention of Internet
Invention of InternetInvention of Internet
Invention of Internet
 
Internet
InternetInternet
Internet
 
Internet and web by Gulshan K Maheshwari(QAU)
Internet and web by Gulshan  K Maheshwari(QAU)Internet and web by Gulshan  K Maheshwari(QAU)
Internet and web by Gulshan K Maheshwari(QAU)
 
Intro. to the internet and web
Intro. to the internet and webIntro. to the internet and web
Intro. to the internet and web
 
ch01-Internet & Web Basics &.ppt
ch01-Internet & Web Basics &.pptch01-Internet & Web Basics &.ppt
ch01-Internet & Web Basics &.ppt
 
WP Chap 1 & 2.pptx
WP Chap 1 & 2.pptxWP Chap 1 & 2.pptx
WP Chap 1 & 2.pptx
 
Introduction_to_Intndhjehddhjdhrjkrhernet.pptx
Introduction_to_Intndhjehddhjdhrjkrhernet.pptxIntroduction_to_Intndhjehddhjdhrjkrhernet.pptx
Introduction_to_Intndhjehddhjdhrjkrhernet.pptx
 
World wide web (WWW)
World wide web (WWW)World wide web (WWW)
World wide web (WWW)
 
Internet
InternetInternet
Internet
 
Internet
InternetInternet
Internet
 
Internet
InternetInternet
Internet
 
Ebusiness
EbusinessEbusiness
Ebusiness
 
Internet.ppt
Internet.pptInternet.ppt
Internet.ppt
 
Internet and Web - Week 9.ppt
Internet and Web - Week 9.pptInternet and Web - Week 9.ppt
Internet and Web - Week 9.ppt
 
Internet
InternetInternet
Internet
 
Internet.ppt
Internet.pptInternet.ppt
Internet.ppt
 
World wide Web
World wide WebWorld wide Web
World wide Web
 

More from BIT DURG

JavaScript
JavaScriptJavaScript
JavaScriptBIT DURG
 
Computer Networks
Computer NetworksComputer Networks
Computer NetworksBIT DURG
 
Computer Basics
Computer Basics Computer Basics
Computer Basics BIT DURG
 
ISDN & ATM
ISDN & ATMISDN & ATM
ISDN & ATMBIT DURG
 
Transport Control Protocol
Transport Control ProtocolTransport Control Protocol
Transport Control ProtocolBIT DURG
 
Routing Protocols
Routing ProtocolsRouting Protocols
Routing ProtocolsBIT DURG
 
Internet Protocol.pdf
Internet Protocol.pdfInternet Protocol.pdf
Internet Protocol.pdfBIT DURG
 
Intternetworking With TCP/IP
Intternetworking With TCP/IPIntternetworking With TCP/IP
Intternetworking With TCP/IPBIT DURG
 
Computer Network Basics
Computer Network BasicsComputer Network Basics
Computer Network BasicsBIT DURG
 
Types of Linux Shells
Types of Linux Shells Types of Linux Shells
Types of Linux Shells BIT DURG
 
File Access Permission
File Access PermissionFile Access Permission
File Access PermissionBIT DURG
 
Control flow and related shell cripts
Control flow and related shell criptsControl flow and related shell cripts
Control flow and related shell criptsBIT DURG
 
Basic Shell Programs
Basic Shell ProgramsBasic Shell Programs
Basic Shell ProgramsBIT DURG
 
Filters & Vi Editor
Filters & Vi EditorFilters & Vi Editor
Filters & Vi EditorBIT DURG
 
Basic Linux Commands
Basic Linux CommandsBasic Linux Commands
Basic Linux CommandsBIT DURG
 
Linux Installation
Linux InstallationLinux Installation
Linux InstallationBIT DURG
 
Basics of GNU & Linux
Basics of GNU & LinuxBasics of GNU & Linux
Basics of GNU & LinuxBIT DURG
 
National youth day
National youth dayNational youth day
National youth dayBIT DURG
 

More from BIT DURG (20)

HTML_DOM
HTML_DOMHTML_DOM
HTML_DOM
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Computer Networks
Computer NetworksComputer Networks
Computer Networks
 
Computer Basics
Computer Basics Computer Basics
Computer Basics
 
ISDN & ATM
ISDN & ATMISDN & ATM
ISDN & ATM
 
Transport Control Protocol
Transport Control ProtocolTransport Control Protocol
Transport Control Protocol
 
Routing Protocols
Routing ProtocolsRouting Protocols
Routing Protocols
 
Internet Protocol.pdf
Internet Protocol.pdfInternet Protocol.pdf
Internet Protocol.pdf
 
Intternetworking With TCP/IP
Intternetworking With TCP/IPIntternetworking With TCP/IP
Intternetworking With TCP/IP
 
Computer Network Basics
Computer Network BasicsComputer Network Basics
Computer Network Basics
 
MySQL
MySQL MySQL
MySQL
 
Types of Linux Shells
Types of Linux Shells Types of Linux Shells
Types of Linux Shells
 
File Access Permission
File Access PermissionFile Access Permission
File Access Permission
 
Control flow and related shell cripts
Control flow and related shell criptsControl flow and related shell cripts
Control flow and related shell cripts
 
Basic Shell Programs
Basic Shell ProgramsBasic Shell Programs
Basic Shell Programs
 
Filters & Vi Editor
Filters & Vi EditorFilters & Vi Editor
Filters & Vi Editor
 
Basic Linux Commands
Basic Linux CommandsBasic Linux Commands
Basic Linux Commands
 
Linux Installation
Linux InstallationLinux Installation
Linux Installation
 
Basics of GNU & Linux
Basics of GNU & LinuxBasics of GNU & Linux
Basics of GNU & Linux
 
National youth day
National youth dayNational youth day
National youth day
 

Recently uploaded

Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomnelietumpap1
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxDr.Ibrahim Hassaan
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxRaymartEstabillo3
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...JhezDiaz1
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
Romantic Opera MUSIC FOR GRADE NINE pptx
Romantic Opera MUSIC FOR GRADE NINE pptxRomantic Opera MUSIC FOR GRADE NINE pptx
Romantic Opera MUSIC FOR GRADE NINE pptxsqpmdrvczh
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for BeginnersSabitha Banu
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceSamikshaHamane
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
Quarter 4 Peace-education.pptx Catch Up Friday
Quarter 4 Peace-education.pptx Catch Up FridayQuarter 4 Peace-education.pptx Catch Up Friday
Quarter 4 Peace-education.pptx Catch Up FridayMakMakNepo
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxEyham Joco
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...Nguyen Thanh Tu Collection
 

Recently uploaded (20)

Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choom
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
Romantic Opera MUSIC FOR GRADE NINE pptx
Romantic Opera MUSIC FOR GRADE NINE pptxRomantic Opera MUSIC FOR GRADE NINE pptx
Romantic Opera MUSIC FOR GRADE NINE pptx
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for Beginners
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in Pharmacovigilance
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
Quarter 4 Peace-education.pptx Catch Up Friday
Quarter 4 Peace-education.pptx Catch Up FridayQuarter 4 Peace-education.pptx Catch Up Friday
Quarter 4 Peace-education.pptx Catch Up Friday
 
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
 

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
  • 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
  • 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
  • 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
  • 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>
  • 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]
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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.