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

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

WWW is service on top

3 Internet is infrastructure.
of that infrastructure.

Web can be viewed as

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

At some advanced level, At some advanced

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

WWW is more software-

Internet is primarily
6 oriented as compared to
hardware-based.
the Internet.

English scientist Tim

It is originated
7 Berners-Lee invented
sometimes in late 1960s.
the World Wide Web in
 1989.

Internet is superset of WWW is a subset of the

8
WWW. Internet.

The first version of the

In the beginning WWW
9 Internet was known as
was known as NSFNET.
ARPANET.

10 Internet uses IP address. 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 wi th 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 directori es
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 prov iders
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, vivek@gmail.com, 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

 Async
 contenteditable
 data
 datetime
 download
 draggable
 hidden
 list
 max
 min
 minlength
 open

 role

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 vari ous
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 th e 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

The general sibling selector is similar to the adjacent sibling selector (E1 + E2), but it is less strict. A general sibling selector is made
up of two simple selectors separated by the tilde ( ∼) character. It can be written like: E1 ∼ 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 simply
0) represents no color. For example, you can specify the red color either as rgb(255, 0, 0) or rgb(100%, 0%, 0%) .

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

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 visitor will see.

URL (Domain Name)

The URL is the domain name of the website. If the visitor just typed www.domainname.com 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-articles.htm, as shown in the image above) or with underscores (e.g. basic_html_articles.htm).
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 syst em. 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 cont ent, the header
and navigation system. Also considered web page content is the web page footer (we will discuss this next) and the center section of this page that you
are looking at now.

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 t he 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 whol e
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?

DOM SAX

DOM stands for Document SAX stands for the Simple API
Object Model. for XML parsing.

SAX does not need a lot of

DOM needs a lot of memory.
memory.

It is memory inefficient. It is memory efficient.

DOM parser work on the SAX work on the event-based

Document object model. XML parser.

DOM is Faster. SAX is slower.

DOM loads whole XML document SAX load a small part of XML
memory. memory.

It’s not suitable for a large XML It’s suitable for a large XML
file. file.

DOM implements DOM API. SAX impliment SAX API.

It creates internal structure It does not create the first

memory. internal Structure.

Java provides support DOM Java provides support SAX

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