UNIT I: Introduction to Web: Internet and World Wide Web, Domain name service, Protocols: HTTP,

FTP, SMTP. Html5 concepts, CSS3, Anatomy of a web page. XML: Document type Definition, XML
schemas, Document object model, XSLT, DOM and SAX Approaches

Internet and World Wide Web

1. Internet :
The internet is a globally connected network system facilitating worldwide
communication and access to data resources through a huge collection of
personal, public, business, academic and government networks. it’s
governed by agencies just like Internet Assigned Numbers Authority (or
IANA) that establish universal protocols.
2. World Wide Web (WWW) :
World Wide Web (WWW), byname Web, is leading information retrieval
service of web (the worldwide computer network). Online gives users access
to a huge array of documents that are connected to every other by means of
hypertext or hypermedia links—i.e., hyperlinks, electronic connections that
link related pieces of data so as to permit a user quick access to them.
Hypertext allows the user to pick a word or phrase from text and thereby
access other documents that contain additional information concerning that
word or phrase.

Difference between Internet and WWW

S.No. INTERNET WWW

Internet is a global WWW stands for World

1
network of networks. wide Web.

World Wide Web which is

Internet is a means of
a collection of information
connecting a computer to
2 which is accessed via the
any other computer
Internet.
anywhere in the world.

WWW is service on top of

3 Internet is infrastructure.
that infrastructure.

Web can be viewed as

Internet can be viewed as
4 collection of books on
a big book-store.
that store.

At some advanced level, to At some advanced level,

understand we can think of to understand we can
5
the Internet as hardware. think of the WWW as
software.

WWW is more software-

Internet is primarily
6 oriented as compared to
hardware-based.
the Internet.
 English scientist Tim
It is originated sometimes
7 Berners-Lee invented the
in late 1960s.
World Wide Web in 1989.
Internet is superset of WWW.
WWW is a subset of the
8 Internet.

The first version of the Internet

was known as ARPANET.
9 In the beginning WWW
was known as NSFNET.
Internet uses IP address.
10 WWW uses HTTP.

Domain name service

An application layer protocol defines how the application processes running on different systems, pass the
messages to each other.

o DNS stands for Domain Name System.

o DNS is a directory service that provides a mapping between the name of a host on the network
and its numerical address.
o DNS is required for the functioning of the internet.
o Each node in a tree has a domain name, and a full domain name is a sequence of symbols
specified by dots.
o DNS is a service that translates the domain name into IP addresses. This allows the users of
networks to utilize user-friendly names when looking for other hosts instead of remembering
the IP addresses.
o For example, suppose the FTP site at EduSoft had an IP address of 132.147.165.50, most
people would reach this site by specifying ftp.EduSoft.com. Therefore, the domain name is
more reliable than IP address.

DNS is a TCP/IP protocol used on different platforms. The domain name space is divided into three
different sections: generic domains, country domains, and inverse domain.
Generic Domains

o It defines the registered hosts according to their generic behavior.

o Each node in a tree defines the domain name, which is an index to the DNS database.
o It uses three-character labels, and these labels describe the organization type
Label Description

aero Airlines and aerospace companies

biz Businesses or firms

com Commercial Organizations

coop Cooperative business Organizations

edu Educational institutions

gov Government institutions

info Information service providers

int International Organizations

mil Military groups

museum Museum & other nonprofit organizations

name Personal names

net Network Support centers

org Nonprofit Organizations

pro Professional individual Organizations

Country Domain

The format of country domain is same as a generic domain, but it uses two-character
country abbreviations (e.g., us for the United States) in place of three character
organizational abbreviations.

Inverse Domain
 The inverse domain is used for mapping an address to a name. When the server has
received a request from the client, and the server contains the files of only authorized
clients. To determine whether the client is on the authorized list or not, it sends a query
to the DNS server and ask for mapping an address to the name.
Working of DNS

o DNS is a client/server network communication protocol. DNS clients send requests to

the. server while DNS servers send responses to the client.
o Client requests contain a name which is converted into an IP address known as a
forward DNS lookups while requests containing an IP address which is converted into
a name known as reverse DNS lookups.
o DNS implements a distributed database to store the name of all the hosts available on
the internet.
o If a client like a web browser sends a request containing a hostname, then a piece of
software such as DNS resolver sends a request to the DNS server to obtain the IP
address of a hostname. If DNS server does not contain the IP address associated with
a hostname, then it forwards the request to another DNS server. If IP address has
arrived at the resolver, which in turn completes the request over the internet
protocol.

Protocols: HTTP, FTP, SMTP

HTTP:

o HTTP stands for HyperText Transfer Protocol.

o It is a protocol used to access the data on the World Wide Web (www).
o The HTTP protocol can be used to transfer the data in the form of plain text, hypertext,
audio, video, and so on.
o This protocol is known as HyperText Transfer Protocol because of its efficiency that
allows us to use in a hypertext environment where there are rapid jumps from one
document to another document.
o HTTP is similar to the FTP as it also transfers the files from one host to another host.
But, HTTP is simpler than FTP as HTTP uses only one connection, i.e., no control
connection to transfer the files.
o HTTP is used to carry the data in the form of MIME-like format.
o HTTP is similar to SMTP as the data is transferred between client and server. The
HTTP differs from the SMTP in the way the messages are sent from the client to the
server and from server to the client. SMTP messages are stored and forwarded while
HTTP messages are delivered immediately.
Features of HTTP:

o Connectionless protocol: HTTP is a connectionless protocol. HTTP client initiates a

request and waits for a response from the server. When the server receives the
request, the server processes the request and sends back the response to the HTTP
client after which the client disconnects the connection. The connection between
client and server exist only during the current request and response time only.
o Media independent: HTTP protocol is a media independent as data can be sent as
long as both the client and server know how to handle the data content. It is
required for both the client and server to specify the content type in MIME-type
header.
o Stateless: HTTP is a stateless protocol as both the client and server know each
other only during the current request. Due to this nature of the protocol, both the
 client and server do not retain the information between various requests of the web
pages.

HTTP Transactions

The above figure shows the HTTP transaction between client and server. The
client initiates a transaction by sending a request message to the server. The server
replies to the request message by sending a response message

Messages

HTTP messages are of two types: request and response. Both the message types follow the same message format.

Request Message: The request message is sent by the client that consists of a request line, headers, and sometimes a
body.

Response Message: The response message is sent by the server to the client that consists of a status line, headers,
and sometimes a body.

Uniform Resource Locator (URL)

 o A client that wants to access the document in an internet needs an address and to
facilitate the access of documents, the HTTP uses the concept of Uniform Resource
Locator (URL).
o The Uniform Resource Locator (URL) is a standard way of specifying any kind of
information on the internet.
o The URL defines four parts: method, host computer, port, and path

o Method: The method is the protocol used to retrieve the document from a
server. For example, HTTP.
o Host: The host is the computer where the information is stored, and the
computer is given an alias name. Web pages are mainly stored in the
computers and the computers are given an alias name that begins with the
characters "www". This field is not mandatory.
o Port: The URL can also contain the port number of the server, but it's an
optional field. If the port number is included, then it must come between the
host and path and it should be separated from the host by a colon.
o Path: Path is the pathname of the file where the information is stored. The
path itself contain slashes that separate the directories from the
subdirectories and files.

FTP

o FTP stands for File transfer protocol.

o FTP is a standard internet protocol provided by TCP/IP used for transmitting the files
from one host to another.
o It is mainly used for transferring the web page files from their creator to the
computer that acts as a server for other computers on the internet.
o It is also used for downloading the files to computer from other servers.

Objectives of FTP

o It provides the sharing of files.

o It is used to encourage the use of remote computers.
o It transfers the data more reliably and efficiently.

Why FTP?

Although transferring files from one system to another is very simple and straightforward,
but sometimes it can cause problems. For example, two systems may have different file
conventions. Two systems may have different ways to represent text and data. Two systems
may have different directory structures. FTP protocol overcomes these problems by
establishing two connections between hosts. One connection is used for data transfer, and
another connection is used for the control connection.

Mechanism of FTP
 The above figure shows the basic model of the FTP. The FTP client has three
components: the user interface, control process, and data transfer process. The server
has two components: the server control process and the server data transfer process.
There are two types of connections in FTP

o Control Connection: The control connection uses very simple rules for
communication. Through control connection, we can transfer a line of command or
line of response at a time. The control connection is made between the control
processes. The control connection remains connected during the entire interactive
FTP session.
o Data Connection: The Data Connection uses very complex rules as data types may
vary. The data connection is made between data transfer processes. The data
connection opens when a command comes for transferring the files and closes when
the file is transferred.

FTP Clients

o FTP client is a program that implements a file transfer protocol which allows you
to transfer files between two hosts on the internet.
o It allows a user to connect to a remote host and upload or download the files.
o It has a set of commands that we can use to connect to a host, transfer the files
between you and your host and close the connection.
o The FTP program is also available as a built-in component in a Web browser. This GUI
based FTP client makes the file transfer very easy and also does not require to
remember the FTP commands.

Advantages of FTP:
o Speed: One of the biggest advantages of FTP is speed. The FTP is one
of the fastest way to transfer the files from one computer to another
computer.
o Efficient: It is more efficient as we do not need to complete all the
operations to get the entire file.
o Security: To access the FTP server, we need to login with the
username and password. Therefore, we can say that FTP is more
secure.
o Back & forth movement: FTP allows us to transfer the files back and
forth. Suppose you are a manager of the company, you send some information to all the
 employees, and they all send information back on the same server.

Disadvantages of FTP:
o The standard requirement of the industry is that all the FTP transmissions should be
encrypted. However, not all the FTP providers are equal and not all the providers
offer encryption. So, we will have to look out for the FTP providers that provides
encryption.
o FTP serves two operations, i.e., to send and receive large files on a network.
However, the size limit of the file is 2GB that can be sent. It also doesn't allow you to
run simultaneous transfers to multiple receivers.
o Passwords and file contents are sent in clear text that allows unwanted
eavesdropping. So, it is quite possible that attackers can carry out the brute force
attack by trying to guess the FTP password.
o It is not compatible with every system

SMTP
o SMTP stands for Simple Mail Transfer Protocol.
o SMTP is a set of communication guidelines that allow software to transmit an
electronic mail over the internet is called Simple Mail Transfer Protocol.
o It is a program used for sending messages to other computer users based on e-mail
addresses.
o It provides a mail exchange between users on the same or different computers, and it
also supports:
o It can send a single message to one or more recipients.
o Sending message can include text, voice, video or graphics.
o It can also send the messages on networks outside the internet.
o The main purpose of SMTP is used to set up communication rules between servers.
The servers have a way of identifying themselves and announcing what kind of
communication they are trying to perform. They also have a way of handling the
errors such as incorrect email address. For example, if the recipient address is wrong,
then receiving server reply with an error message of some kind.
Components of SMTP

o First, we will break the SMTP client and SMTP server into two components such as
user agent (UA) and mail transfer agent (MTA). The user agent (UA) prepares the
message, creates the envelope and then puts the message in the envelope. The mail
transfer agent (MTA) transfers this mail across the internet.
 o SMTP allows a more complex system by adding a relaying system. Instead of just having one MTA at sending side
and one at receiving side, more MTAs can be added, acting either as a client or server to relay the email.

o The relaying system without TCP/IP protocol can also be used to send
the emails to users, and this is achieved by the use of the mail
gateway. The mail gateway is a relay MTA that can be used to receive
an email.

Working of SMTP

1. Composition of Mail: A user sends an e-mail by composing an electronic mail

message using a Mail User Agent (MUA). Mail User Agent is a program which is used
to send and receive mail. The message contains two parts: body and header. The
body is the main part of the message while the header includes information such as
the sender and recipient address. The header also includes descriptive information
such as the subject of the message. In this case, the message body is like a letter
and header is like an envelope that contains the recipient's address.
2. Submission of Mail: After composing an email, the mail client then submits the
completed e-mail to the SMTP server by using SMTP on TCP port 25.
3. Delivery of Mail: E-mail addresses contain two parts: username of the
recipient and domain name. For example, [email protected], where "vivek"
is the username of the recipient and "gmail.com" is the domain name.
If the domain name of the recipient's email address is different from the sender's
domain name, then MSA will send the mail to the Mail Transfer Agent (MTA). To relay
the email, the MTA will find the target domain. It checks the MX record from Domain
Name System to obtain the target domain. The MX record contains the domain name and IP address of the
recipient's domain. Once the record is located, MTA connects to the exchange server
to relay the message.
 4. Receipt and Processing of Mail: Once the incoming message is received, the
exchange server delivers it to the incoming server (Mail Delivery Agent) which stores
the e-mail where it waits for the user to retrieve it.
5. Access and Retrieval of Mail: The stored email in MDA can be retrieved by using
MUA (Mail User Agent). MUA can be accessed by using login and password.

Html5 concepts

HTML5 is the latest version of HTML, the markup language used to build structure or content
on World Wide Web. HTML5 is the latest web standard by W3C. Earlier HTML was used only to
build webpage structure,
but HTML5 is a full on package to build websites, handle presentation, add functionalities and Web
APIs.

HTML5 is the recommended version to build modern web applications as it is light and
fastest version of Hypertext Mark up Language, the code that describes web pages.
HTML5 was formed in 2011.

HTML5 Stack
Html5 is the combination of three web technologies:→

HTML → to build webpage structure,

CSS → to enhance look and feel( presentation layer), and
Javascript → to add functionality to HTML elements.

The term HTML5 means not only HTML, it is a combination of HTML, CSS and Javascript with
APIs. For example, drawing and animation using canvas, offline storage, microdata, audio
and video, drag and drop, geolocation, embedded fonts, web APIs etc. HTML5 includes
new semantic tags and some old tags

HTML + CSS + JAVASCRIPT = HTML5

Why HTML5
HTML5 has been designed to deliver almost everything you'd want to do on web without
requiring additional software such as browser plugins. It does everything from animation to
apps, music to movies, and can also be used to build complicated web applications that
run in your browser.

HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also cross-
platform, which means it doesn't care whether you're using a tablet or a smart phone,
a net-book, notebook, ultra-book or a Smart TV if your browser supports HTML5, it
should work flawlessly.

HTML5 Changed Elements

These elements were already there in HTML4/XHTML. But in HTML5, the definition or usage has
been changed.

1. a tag is now Hyperlink, not anchor

2. a tag <a> can have both inline and block child elements.
3. b tag is offset text conventionally styled in bold
4. i tag is offset text conventionally styled in italic
5. u tag is offset text conventionally styled with an underline
6. cite tag is cited title of work
7. hr tag is Thematic Break, not Horizontal Rule
8. input tag is Input Control.
9. meta tag is meta data.
10. s tag is struck text.
11. small tag is small print.
12. dl tag is description list, not definition list.

HTML Versions

Year Achievement

1989 HTML Formed

Year Achievement

1995 HTML 2

1995 CSS

1995 JAVASCRIPT

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2001 XHTML 1.1

2009 HTML5

2015 HTML5.1

2017 HTML5.2

HTML5 Browsers Support

HTML5 is supported by latest browsers only. The first browser support of html5 was seen in
2011. Here is the list of supported browsers for html5.
  Chrome 4 and above
 Firefox 3.6 and above
 Opera 11 and latest versions
 Safari 5.1 for Mac, Iphones and Ipads
 Internet Explorer 9 and above
 Edge 12 and above Browsers

HTML5 Browsers Support

HTML5 is supported by latest browsers only. The first browser support of html5 was seen in
2011. Here is the list of supported browsers for html5.

 Chrome 4 and above

 Firefox 3.6 and above
 Opera 11 and latest versions
 Safari 5.1 for Mac, Iphones and Ipads
 Internet Explorer 9 and above

 Edge 12 and above Browsers

 HTML5 Doctype
 HTML5 Doctype is short, and easy to remember. Unlike, HTML4 and XHTML, there is no DTD. As per W3C,
same doctype will be used in later versions of HTML.

<!DOCTYPE HTML>
// New and shorter Doctype, no DTD Required

 HTML5 Template
 Default Template for HTML5 based websites.
 <!doctype html>
 <html lang="en"> //lang embedded in html
 <head>


 <title>HTML5 Page</title>
 <meta charset="utf-8"> //Short charset meta tag
 <link href="style.css" rel="stylesheet"> //No Type attribute
 <script src="file.js"></script>//No Type attribute required
 </head>


 <body>
 <h1>My First HTML5 page.</h1>
 </body>

</html>

HTML5 Semantic Elements

HTML5 includes new tags or new elements. These tags or elements includes new media
tags, semantic tags, svg, canvas etc. HTML5 is now more semantic than html4. Here is a list
of new tags in html5, with their meaning, use and example..

HTML5 New Tags List

  Article
 Section
 Aside
 Details
 Summary
 Time
 BDI
 Command
 Figure
 Figcaption
 Picture
 Footer
 Header
 Mark

 Meter

 Nav
 Progress
 HTML5 Canvas
 HTML5 SVG

 Wbr

 Article
 An article defines a complete or an Self Contained composition in a webpage. An Article could be a Blog
post, forum, newspaper article, an independent content, user comment.
 An article must have an heading or subheading, i.e h1-h6

 <article>
 <h2>Heading for Article</h2>
 </article>


Section
 An Section represents an generic section of a document. Section could be various sections of
an article with heading.
 An section can include various chapters of a book or various
webpage sections, like introductions, content, contact info etc.
 An section must have an heading. h2-h6

 <article>
 <h1>Article Heading</h1>
 <section>
 <h2>Subheading 1 for Section</h2>
 </section>
 <section>
 <h2>Subheading 2 for Section</h2>
 </section>
 </article>

Aside
Aside is the sidebar of a container. The content inside aside is related to content next to it.
Aside could be sibling of div, section or article. But the content inside aside is relevant to
adjacent sibling.

aside is use for links, sidebars, for ads and other content we want to put aside.
Aside Example

<aside>

<p>Aside</p>

</aside>

Details
Defines additional details that the user can view or hide. Content inside <details> is hidden.
Only <summary> is visible to user. User can click on summary to view details .
Summary
Summary is the visible part of details. Except summary, everything details is hidden.

Details Example
Click to see details

<details>

<summary>Click To See</summary>

<p>Hello</p>

</details>

Details Example with open

An additional open attribute can open details on page load..

Click to see detailsHello

<details open>

<summary>Click To See</summary>

<p>Hello</p>

</details>

Time
Time tag is an inline level element, used to represents a time or exact date in Gregorian calender.

Time Tag Example

New Batch Timings are 10:00 AM.

<p> New Batch Timings are <time>10:00</time> AM.</p>

Time Tag with datetime
An additional datetime attribute can write datetime in ISO String.

New Batch Timings are 10:00 AM.

<p> New Batch Timings are <time datetime="2017-12-08T10:00">10:00</time> AM.</p>

Bi-Directional Isolation (BDI)

BDI or Bi-Directional Isolation tag is used to add text with opposite direction and to isolate from other text if direction is
unknown.

<p>Hello friend</p>

<p lang="he"> <bdi>‫<שלום‬/bdi> friend</p>

Command
Command Tag is an obsolete element of Html5. It represents a command, which a user can invoke.

<command>

<command type="command">

<command type="radio">

<command type="checkbox">

command tag is obsolete now. Even major browsers doesn't support command tag. Try avoid it.

Figure
Figure tag Specifies self-contained content, like images, illustrations, diagrams, code listings,
etc. Figure can have figcaption child to explain what figure is showing.

Figcaption
Figcaption is the caption of figure element.

<figure>

<img src="img/path" alt="...">

<figcaption> caption for image</figcaption>

</figure>
Picture
HTML5 picture tag is used to show either high or low resolution image for Desktop, Mobile or
particular device. We can set two or more different images for different screens or resolutions,
and browser will load a single resource from server,based on criteria. Like High quality images
for Macbook and Full HD screens, medium quality images for normal screens and small image
for mobiles.
Picture tags can enhance performance of a website.

<picture>

<source srcset="img/logo-sm.png" media="(max-width: 460px)">

<img src="img/logo.png" alt="Tech Altum Logo">

</picture>

To test picture tag, minimize your browsers screen, or if using smartphone, use landscape and portrait mode to test.

HTML5 Removed Tags

With HTML5, some presentational tags are removed. These tags still get browser support, but W3C validator shows
errors. Here is a list of some removed elements in html5.

HTML5 Removed Tags or Elements

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<marquee>

<noframes>

<strike>

<tt>
 HTML5 New Attributes
HTML5 introduced new attributes. All these attributes are functional and easy to use. HTML5
also removed so many attributes as they are presentational, not functional.
html5-removed-attributes. Here is a list of html5 attributes.

HTML5 Attributes List

CSS3

CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for
describing the presentation (i.e. the layout and formatting) of the web pages.
Prior to CSS, nearly all of the presentational attributes of HTML documents were contained
within the HTML markup (specifically inside the HTML tags); all the font colors,
background styles, element alignments, borders and sizes had to be explicitly described
within the HTML.
As a result, development of the large websites became a long and expensive process, since
the style information were repeatedly added to every single page of the website.
To solve this problem CSS was introduced in 1996 by the World Wide Web Consortium
(W3C), which also maintains its standard. CSS was designed to enable the separation of
presentation and content. Now web designers can move the formatting information of the
web pages to a separate style sheet which results in considerably simpler HTML markup,
and better maintainability.
CSS3 is the latest version of the CSS specification. CSS3 adds several new styling features
and improvements to enhance the web presentation capabilities.

What You Can Do with CSS

There are lot more things you can do with CSS.

 You can easily apply same style rules on multiple elements.

 You can control the presentation of multiple pages of a website with a single style sheet.
 You can present the same page differently on different devices.
 You can style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise.
 You can change the position of an element on a web page without changing the markup.
 You can alter the display of existing HTML elements.
 You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
 You can create animations and transitions effects without using any JavaScript.
 You can create print friendly version of your web pages.

The list does not end here, there are many other interesting things that you can do with CSS. You will learn about
all of them in detail in upcoming chapters.

Advantages of Using CSS

The biggest advantage of CSS is that it allows the separation of style and layout from the content of the document.
Here are some more advantages, why one should start using CSS?

 CSS Save Lots of Time — CSS gives lots of flexibility to set the style properties of an element. You can write CSS
once; and then the same code can be applied to the groups of HTML elements, and can also be reused in multiple
HTML pages.
 Easy Maintenance — CSS provides an easy means to update the formatting of the documents, and to
maintain the consistency across multiple documents. Because the content of the entire set of web pages can
be easily controlled using one or more style sheets.
 Pages Load Faster — CSS enables multiple pages to share the formatting information, which reduces
complexity and repetition in the structural contents of the documents. It significantly reduces the file transfer
size, which results in a faster page loading.
 Superior Styles to HTML — CSS has much wider presentation capabilities than HTML and provide much better
control over the layout of your web pages. So you can give far better look to your web pages in comparison to
the HTML presentational elements and attributes.
 Multiple Device Compatibility — CSS also allows web pages to be optimized for more than one type of
device or media. Using CSS the same HTML document can be presented in different viewing styles for different
rendering devices such as desktop, cell phones, etc

Including CSS in HTML Documents

CSS can either be attached as a separate document or embedded in the HTML document itself. There are three
methods of including CSS in an HTML document:

 Inline styles — Using the style attribute in the HTML start tag.
 Embedded styles — Using the <style> element in the head section of a document.
 External style sheets — Using the <link> element, pointing to an external CSS file.

In this tutorial we will cover all these three methods for inserting CSS one by one.

Inline Styles
Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start
tag. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each "property: value" pair is separated by a
semicolon (;), just as you would write into an embedded or external style sheets. But it needs to be all in one line
i.e. no line break after the semicolon, as shown here:

Example
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

Using the inline styles are generally considered as a bad practice. As style rules are embedded directly inside the
HTML tag, it causes the presentation to become mixed with the content of the document; which makes the code
hard to maintain and negates the purpose of using CSS.

Embedded Style Sheets

Embedded or internal style sheets only affect the document they are embedded in.

Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can
define any number of <style> elements in an HTML document but they must appear between the <head> and </head>
tags. Let's take a look at an example:

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

External Style Sheets

An external style sheet is ideal when the style is applied to many pages of the website.

An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your
site. External style sheets are the most flexible because with an external style sheet, you can change the look of an
entire website by changing just one file.

You can attach external style sheets in two ways — linking and importing.

Linking External Style Sheets

Before linking, we need to create a style sheet first. Let's open your favorite code editor and create a new file.
Now type the following CSS code inside this file and save it as "style.css".

Example

body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}

An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the
<head> section, as you can see in the following example:

<!DOCTYPE html>

<html lang="en">

<head> <title>My HTML Document</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body> <h1>This is a heading</h1>

<p>This is a paragraph of text.</p>

</body> </html>
What is Selector?
A CSS selector is a pattern to match the elements on a web page. The style rules associated with that selector will be
applied to the elements that match the selector pattern.

Selectors are one of the most important aspects of CSS as they allow you to target specific elements on your web
page in various ways so that they can be styled.

Several types of selectors are available in CSS, let's take a closer look at them:

Universal Selector
The universal selector, denoted by an asterisk (*), matches every single element on the page.

The universal selector may be omitted if other conditions exist on the element. This selector is often used to
remove the default margins and paddings from the elements for quick testing purpose.

Let's try out the following example to understand how it basically works:

Example
Try this code »

* {
margin: 0;
padding: 0;
}
The style rules inside the * selector will be applied to every element in a document.

Note: It is recommended not to use the universal selector (*) too often in a production environment, since this
selector matches every element on a web page that puts too much of unnecessary pressure on the browsers. Use
element type or class selector instead.

Element Type Selectors

An element type selector matches all instance of the element in the document with the corresponding element
type name. Let's try out an example to see how it actually works:

Example
Try this code »

p {
color: blue;
}
The style rules inside the p selector will be applied on every <p> element (or paragraph) in the document and color it
blue, regardless of their position in the document tree.

Id Selectors
The id selector is used to define style rules for a single or unique element.

The id selector is defined with a hash sign (#) immediately followed by the id value.

Example
Try this code »
#error {
color: red;
}
This style rule renders the text of an element in red, whose id attribute is set to error.

Note: The value of an id attribute must be unique within a given document — meaning no two elements in your
HTML document can share the same id value.

Class Selectors
The class selectors can be used to select any HTML element that has a class attribute. All the elements having that
class will be formatted according to the defined rule.

The class selector is defined with a period sign (.) immediately followed by the class value.

Example
Try this code »

.blue {
color: blue;
}
The above style rules renders the text in blue of every element in the document that has class attribute set to blue.
You can make it a bit more particular. For example:

Example
Try this code »

p.blue {
color: blue;
}
The style rule inside the selector p.blue renders the text in blue of only those <p> elements that has class attribute
set to blue, and has no effect on other paragraphs.

Descendant Selectors
You can use these selectors when you need to select an element that is the descendant of another element, for
example, if you want to target only those anchors that are contained within an unordered list, rather than targeting
all anchor elements. Let's see how it works:

Example
Try this code »

ul.menu li a {
text-decoration: none;
}
h1 em {
color: green;
}
The style rules inside the selector ul.menu li a applied to only those <a> elements that contained inside an <ul>
element having the class .menu, and has no effect on other links inside the document.

Similarly, the style rules inside the h1 em selector will be applied to only those <em> elements that contained inside
the <h1> element and has not effect on other <em> elements.
Child Selectors
A child selector is used to select only those elements that are the direct children of some element.

A child selector is made up of two or more selectors separated by a greater than symbol (>). You can use this
selector, for instance, to select the first level of list elements inside a nested list that has more than one level.
Let's check out an example to understand how it works:

Example
Try this code »

ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
The style rule inside the selector ul > li applied to only those <li> elements that are direct children of the <ul>
elements, and has no effect on other list elements.

Adjacent Sibling Selectors

The adjacent sibling selectors can be used to select sibling elements (i.e. elements at the same level). This selector
has the syntax like: E1 + E2, where E2 is the target of the selector.

The selector h1 + p in the following example will select the <p> elements only if both the <h1> and <p> elements
share the same parent in the document tree and <h1> is immediately precedes the <p> element. That means only those
paragraphs that come immediately after each <h1> heading will have the associated style rules. Let's see how this
selector actually works:

Example
Try this code »

h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}

General Sibling Selectors

sibling selector is made up of two simple selectors separated by the tilde (∼) character. It can be written like: E1 ∼
The general sibling selector is similar to the adjacent sibling selector (E1 + E2), but it is less strict. A general

E2, where E2 is the target of the selector.

The selector h1 ∼ p in the example below will select all the <p> elements that preceded by the <h1> element, where
all the elements share the same parent in the document tree.

Example
Try this code »

h1 ∼ p {
color: blue;
font-size: 18px;

ul.task ∼ p {
}
 color: #f0f;
text-indent: 30px;
}
There are more sophisticated selectors like attribute selectors, pseudo-classes, pseudo-elements. We will discuss
about these selectors in detail in the upcoming chapters.

Grouping Selectors
Often several selectors in a style sheet share the same style rules declarations. You can group them into a comma-
separated list to minimize the code in your style sheet. It also prevents you from repeating the same style rules over
and over again. Let's take a look:

Example
Try this code »

h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}
As you can see in the above example, the same style rule font-weight: normal; is shared by the selectors h1, h2
and h3, so it can be grouped in a comma-separated list, like this:

Example
Try this code »

h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}

Setting Color Property

The color property defines the text color (foreground color in general) of an element.

For instance, the color property specified in the body selector defines the default text color for the whole page. Let's
try out the following example to see how it works:

Example
Try this code »

body {
color: #ff5722;
}
Note: The color property normally inherits the color value from their parent element, except the case of anchor
elements. For example, if you specify color for the body element it will automatically be passed down to the
headings, paragraphs, etc.
 Defining Color Values
Colors in CSS most often specified in the following formats:

 a color keyword - like "red", "green", "blue", "transparent", etc.

 a HEX value - like "#ff0000", "#00ff00", etc.
 an RGB value - like "rgb(255, 0, 0)"

CSS3 has introduced several other color formats such as HSL, HSLA and RGBA that also support alpha
transparency. We'll learn about them in greater detail in CSS3 color chapter.

For now, let's stick to the basic methods of defining the color values:

Color Keywords
CSS defines the few color keywords which lets you specify color values in an easy way.

These basic color keywords are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, and yellow. The color names are case-insensitive.

Example
Try this code »

h1 {
color: red;
}
p {
color: purple;
}
Modern web browsers however practically support many more color names than what are defined in the CSS
standard, but to be on the safer side you should use hex color values instead.

See the reference on CSS color names, for a complete list of possible color names.

HEX Color Values

Hex (short for Hexadecimal) is by far the most commonly used method of defining color on the web.

Hex represent colors using a six-digit code, preceded by a hash character, like #rrggbb, in which rr, gg, and bb
represents the red, green and blue component of the color respectively.

The value of each component can vary from 00 (no color) and FF (full color) in hexadecimal notation, or 0
and 255 in decimal equivalent notation. Thus #ffffff represents white color and #000000 represents black
color. Let's take a look the following example:

Example
Try this code »

h1 {
color: #ffa500;
}
p {
color: #00ff00;
}
Note: Hexadecimal or Hex refers to a numbering scheme that uses 16 characters as its base. It uses the numbers
0 through 9 and the letters A, B, C, D, E and F which corresponds to the decimal numbers 10, 11, 12, 13, 14 and
15 respectively.
 Tip: If hexadecimal code of a color has value pairs, it can also be written in shorthand notation to avoid extra
typing, for example, the hex color value #ffffff can be also be written as #fff, #000000 as #000, #00ff00 as #0f0,
#ffcc00 as #fc0, and so on.

RGB Color Values

Colors can be defined in the RGB model (Red, Green, and Blue) using the rgb() functional notation.

The rgb() function accepts three comma-separated values, which specify the amount of red, green, and blue
component of the color. These values are commonly specified as integers between 0 to 255, where 0 represent
no color and 255 represent full or maximum color.

The following example specifies the same color as in the previous example but in RGB notation.

Example
Try this code »

h1 {
color: rgb(255, 165, 0);
}
p {
color: rgb(0, 255, 0);
}
Note: You can also specify RGB values inside the rgb() function in percentage, where 100% represents full color, and 0% (not s

Tip: If R, G, and B are all set to 255, i.e. rgb(255, 255, 255), the color would be white. Likewise, if all channels are set to 0,
i.e. rgb(0, 0, 0), the color would be black. Play with the RGB values in the following demonstration to understand how it actually wo

Anatomy of a web page

Starting at the top of the web page, let's go through the anatomy of a web page:

Page Title

The page tile is set using the <title> </title> set of tags in the head section of the html coding. This is the only web page element within the head section of the web page the visit

URL (Domain Name)

The URL is the domain name of the website. If the visitor just typed they would be taken to the home page of the website.

File Name

File name is the web page file name. It cannot contain any spaces! The file name can be written as one long name (e.g. basichtmlarticles.htm), with hyphens (e.g. basic-html-article
When you create a web page you have to give it a name. The file name has what is called an extension at the end of it.

The extension at the end of the file name tells the browser what kind of file it is. A HTML document would have an extension of .htm or html. If your web
page uses a certain programming language it would have the appropriate extension. e.g. .php is for the PHP programming language, .asp is for the ASP
programming language.

Note: Servers and some browsers will not render (show) your page if you refer to it differently in your links than the way it is actually named. Basic-
Html-Articles.htm is different from basic-html-articles.htm to some servers and browsers. To combat this problem always name your files with lower case
letters. This way you don't have to remember how you capitalized a file name.

Scroll Bars

Scroll bars are on the right side and bottom of the browser window. If there is a scroll bar at the bottom (horizontal scroll bar) your web page content is
too wide for the browser window.

A web page layout should be designed so there is no horizontal scroll bar. You need to test your web page at different resolutions and on different
operating systems to see if the way the page is laid out will result in horizontal scroll bars when viewed at smaller resolut ions or by different operating
systems.

One way to avoid this problem is to use a flexible (fluid) design. A flexible design will adjust to the browser window size. As long as all your elements add
up to less than the browser width there will not be a horizontal scroll bar.

Next, we will look at the web page content portion of the anatomy of a web page.

Header

The header is at the very top of the web page. It usually contains a logo for the website.

Navigation

A website can use a left navigation system, a right navigation system or a navigation system that spans horizontally right under the header or above the
header.

The navigation system of a website has to be consistent throughout the website so the visitor will learn your navigation system. Changing the navigation
system from page to page is confusing to the visitor and they will get frustrated and leave!
Web Page Content

Web page content includes everything between the <body> and </body> tags. We have already looked at some of the web page content, the header and navigation system. Also

Footer

The footer is the bottom section of the web page.

This section is where you usually put your copyright notice, link to your privacy policy and your website contact information.

Summary of Anatomy of a Web Page

In this tutorial we have looked at the anatomy of a web page from top to bottom. We started with the page title, moved onto the website URL and web
page file name, discussed vertical and horizontal scroll bars, then moved onto the web page content. The web page content portion of the anatomy of a
web page consists of everything between the <body> and </body> tags including the header, navigation, center web page content and the web page
footer.

XML: Document type Definition(DTD)

What is a DTD?
DTD stands for Document Type Definition.

A DTD defines the structure and the legal elements and attributes of an XML document.

Valid XML Documents

A "Valid" XML document is "Well Formed", as well as it conforms to the rules of a DTD:

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

<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The DOCTYPE declaration above contains a reference to a DTD file. The content of the DTD file is shown and explained below.

XML DTD
The purpose of a DTD is to define the structure and the legal elements and attributes of an XML document:

Note.dtd:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

The DTD above is interpreted like this:

 !DOCTYPE note - Defines that the root element of the document is note
 !ELEMENT note - Defines that the note element must contain the elements: "to, from, heading, body"
 !ELEMENT to - Defines the to element to be of type "#PCDATA"
 !ELEMENT from - Defines the from element to be of type "#PCDATA"
 !ELEMENT heading - Defines the heading element to be of type "#PCDATA"
 !ELEMENT body - Defines the body element to be of type "#PCDATA"

Tip: #PCDATA means parseable character data.

Using DTD for Entity Declaration

A DOCTYPE declaration can also be used to define special characters or strings, used in the document:

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

<!DOCTYPE note [
<!ENTITY nbsp "&#xA0;">
<!ENTITY writer "Writer: Donald Duck.">
<!ENTITY copyright "Copyright: W3Schools.">
]>

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
<footer>&writer;&nbsp;&copyright;</footer>
</note>

When to Use a DTD?

With a DTD, independent groups of people can agree to use a standard DTD for interchanging data.

With a DTD, you can verify that the data you receive from the outside world is valid.

You can also use a DTD to verify your own data.

When NOT to Use a DTD?

XML does not require a DTD.

When you are experimenting with XML, or when you are working with small XML files, creating DTDs may be a waste of time.

If you develop applications, wait until the specification is stable before you add a DTD. Otherwise, your software might stop working
because of validation errors.

XML schemas

An XML Schema describes the structure of an XML document, just like a DTD.

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

An XML document validated against an XML Schema is both "Well Formed" and "Valid".

XML Schema
XML Schema is an XML-based alternative to DTD:

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

The Schema above is interpreted like this:

 <xs:element name="note"> defines the element called "note"

 <xs:complexType> the "note" element is a complex type
 <xs:sequence> the complex type is a sequence of elements
 <xs:element name="to" type="xs:string"> the element "to" is of type string (text)
 <xs:element name="from" type="xs:string"> the element "from" is of type string
 <xs:element name="heading" type="xs:string"> the element "heading" is of type string
 <xs:element name="body" type="xs:string"> the element "body" is of type string

XML Schemas are More Powerful than DTD

 XML Schemas are written in XML
 XML Schemas are extensible to additions
  XML Schemas support data types
 XML Schemas support namespaces

Why Use an XML Schema?

With XML Schema, your XML files can carry a description of its own format.

With XML Schema, independent groups of people can agree on a standard for interchanging data.

With XML Schema, you can verify data.

XML Schemas Support Data Types

One of the greatest strengths of XML Schemas is the support for data types:

 It is easier to describe document content

 It is easier to define restrictions on data
 It is easier to validate the correctness of data
 It is easier to convert data between different data types

XML Schemas use XML Syntax

Another great strength about XML Schemas is that they are written in XML:

 You don't have to learn a new language

 You can use your XML editor to edit your Schema files
 You can use your XML parser to parse your Schema files
 You can manipulate your Schemas with the XML DOM
 You can transform your Schemas with XSLT

Document object model

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is the root element that represents the
html document. It has properties and methods. By the help of document object, we can add dynamic content to our web
page.

As mentioned earlier, it is the object of window. So window.document Is same as document

Properties of document object

 Methods of document object

We can access and change the contents of document by its

methods. The important methods of document object are as

follows:

Method Description

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with newline character at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.

getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.

Accessing field value by document object

In this example, we are going to get the value of input text by user. Here, we are using document.form1.name.value to
get the value of name field.

Here, document is the root element that represents the html document.

form1 is the name of the form.

name is the attribute name of the input text.

value is the property, that returns the value of the input text.

Let's see the simple example of document object that prints name with welcome message.

1. <script type="text/javascript">
2. function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome:
"+name); 5. }
6. </script>
7.
8. <form name="form1">
9. Enter Name:<input type="text" name="name"/>
10. <input type="button" onclick="printvalue()" value="print name"/>
11. </form>

XSLT
XSL (eXtensible Stylesheet Language) is a styling language for XML.

XSLT stands for XSL Transformations.

This tutorial will teach you how to use XSLT to transform XML documents into other formats (like transforming XML into HTML).

Online XSLT Editor

With our online editor, you can edit XML and XSLT code, and click on a button to view the result.

XSLT Example
<?xml version="1.0"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

XSLT References
XSLT Elements

Description of all the XSLT elements from the W3C Recommendation, and information about browser support.

XSLT, XPath, and XQuery Functions

XSLT 2.0, XPath 2.0, and XQuery 1.0, share the same functions library. There are over 100 built-in functions. There are functions
for string values, numeric values, date and time comparison, node and QName manipulation, sequence manipulation, and more.

XSLT is a language for transforming XML documents.

XPath is a language for navigating in XML documents.

XQuery is a language for querying XML documents.

It Started with XSL

XSL stands for EXtensible Stylesheet Language.

The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an XML-based Stylesheet Language.

CSS = Style Sheets for HTML

HTML uses predefined tags. The meaning of, and how to display each tag is well understood.

CSS is used to add styles to HTML elements.

XSL = Style Sheets for XML

XML does not use predefined tags, and therefore the meaning of each tag is not well understood.

A <table> element could indicate an HTML table, a piece of furniture, or something else - and browsers do not know how to display
it!

So, XSL describes how the XML elements should be displayed.

XSL - More Than a Style Sheet Language

XSL consists of four parts:

 XSLT - a language for transforming XML documents

 XPath - a language for navigating in XML documents
 XSL-FO - a language for formatting XML documents (discontinued in 2013)
 XQuery - a language for querying XML documents
 With the CSS3 Paged Media Module, W3C has delivered a new standard for document formatting. So, since 2013, CSS3 is
proposed as an XSL-FO replacement.

What is XSLT?
 XSLT stands for XSL Transformations
 XSLT is the most important part of XSL
 XSLT transforms an XML document into another XML document
 XSLT uses XPath to navigate in XML documents
 XSLT is a W3C Recommendation

ADVERTISEMENT

XSLT = XSL Transformations

XSLT is the most important part of XSL.

XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a
browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.

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

A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML
result- tree.

XSLT Uses XPath

XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in XML
documents.

If you want to study XPath first, please read our XPath Tutorial.

How Does it Work?

In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined
templates. When a match is found, XSLT will transform the matching part of the source document into the result document.

XSLT Browser Support

All major browsers support XSLT and XPath.
XSLT - Transformation
❮ PreviousNext
❯

Example study: How to transform XML into XHTML using XSLT?

The details of this example will be explained in the next chapter.

Correct Style Sheet Declaration

The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.

Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!

The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

XSLT <xsl:template> Element

❮ PreviousNext
❯

An XSL style sheet consists of one or more set of rules that are called templates.

A template contains rules to apply when a specified node is matched.

The <xsl:template> Element

The <xsl:template> element is used to build templates.

The match attribute is used to associate a template with an XML element. The match attribute can also be used to define a
template for the entire XML document. The value of the match attribute is an XPath expression (i.e. match="/" defines the whole
document).

Ok, let's look at a simplified version of the XSL file from the previous chapter:

Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Example Explained
Since an XSL style sheet is an XML document, it always begins with the XML declaration: <?xml version="1.0" encoding="UTF-
8"?>.

The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document (along with the version number
and XSLT namespace attributes).

The <xsl:template> element defines a template. The match="/" attribute associates the template with the root of the XML
source document.

The content inside the <xsl:template> element defines some HTML to write to the output.

The last two lines define the end of the template and the end of the style sheet.

The result from this example was a little disappointing, because no data was copied from the XML document to the output. In the
next chapter you will learn how to use the <xsl:value-of> element to select values from the XML elements.

The <xsl:value-of> Element

The <xsl:value-of> element can be used to extract the value of an XML element and add it to the output stream of the
transformation:

Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td><xsl:value-of select="catalog/cd/title"/></td>
<td><xsl:value-of select="catalog/cd/artist"/></td>
</tr>
 </table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

The <xsl:for-each> Element

The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set:

Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

XSLT <xsl:sort> Element

❮ PreviousNext
❯

The <xsl:sort> element is used to sort the output.

Where to put the Sort Information

To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL file:

Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<xsl:sort select="artist"/>
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

The <xsl:if> Element

To put a conditional if test against the content of the XML file, add an <xsl:if> element to the XSL document.

Syntax
<xsl:if test="expression">
...some output if the expression is true...
</xsl:if>

Where to Put the <xsl:if> Element

To add a conditional test, add the <xsl:if> element inside the <xsl:for-each> element in the XSL file:

Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
<th>Price</th>
</tr>
<xsl:for-each select="catalog/cd">
<xsl:if test="price &gt; 10">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
<td><xsl:value-of select="price"/></td>
</tr>
 </xsl:if>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Difference Between DOM and SAX

Difference between DOM and SAX?

DO SA
M X
DOM stands for SAX stands for the Simple
Document Object API for XML parsing.
Model.
SAX does not need a
DOM needs a lot of memory.
lot of memory.

It is memory inefficient. It is memory efficient.

DOM parser work on SAX work on the event-

the Document object based XML parser.
model.
DOM is Faster. SAX is slower.

DOM loads whole XML SAX load a small part of

document memory. XML memory.

It’s not suitable for a large It’s suitable for a large

XML file. XML file.

DOM implements DOM API. SAX impliment SAX API.

It creates internal It does not create the

structure memory. first internal Structure.

Java provides support DOM Java provides support SAX

parsers, and we can parse parsers, and we can parse
XML XML
files in java using DOM files in java using SAX
parser. parser.