UNIT 1

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.

MEAN stands for MongoDB, Express. js, Angular.JS, and Node.js.

Introduction to Web
Web consists of billions of clients and server connected through wires and wireless
networks. The web clients make requests to web server. The web server receives the request,
finds the resources and return the response to the client. When a server answers a request, it
usually sends some type of content to the client. The client uses web browser to send request to
the server. The server often sends response to the browser with a set of instructions written in
HTML (Hyper Text Markup Language). All browsers know how to display HTML page to the
client.

Web Application

A website is a collection of static files (web pages) such as HTML pages, images, graphics etc.
A Web application is a web site with dynamic functionality on the server. Google, Face
book, Twitter are examples of web applications.

HTTP (Hypertext Transfer Protocol)

 HTTP is a protocol that clients and servers use on the web to communicate.
 It is similar to other internet protocols such as SMTP (Simple Mail Transfer Protocol)
and FTP (File Transfer Protocol) but there is one fundamental difference.
 HTTP is a stateless protocol i.e. HTTP supports only one request per connection. This
means that with HTTP the clients connect to the server to send one request and then

MEAN Stack Technologies Unit-1 1

 disconnects. This mechanism allows more users to connect to a given server over a
period of time.
 The client sends an HTTP request and the server answers with an HTML page to the
client, using HTTP.

HTTP Methods
HTTP request can be made using a variety of methods, but the ones you will use most often
are Get and Post. The method name tells the server the kind of request that is being made, and
how the rest of the message will be formatted.
HTTP Methods and Descriptions:
Method
Description
Name
Request for communication options that are available on the request/response
OPTIONS
chain.
GET Request to retrieve information from server using a given URI.
Identical to GET except that it does not return a message-body, only the headers
HEAD
and status line.
POST Request for server to accept the entity enclosed in the body of HTTP method.
DELETE Request for the Server to delete the resource.
CONNECT Reserved for use with a proxy that can switch to being a tunnel.
This is same as POST, but POST is used to create, PUT can be used to create as
PUT well as update. It replaces all current representations of the target resource with the
uploaded content.

Difference between GET and POST requests

GET Request POST Request
Data is sent in header to the server Data is sent in the request body
Get request can send only limited amount of data Large amount of data can be sent.
Get request is not secured because data is exposed in Post request is secured because data is
URL not exposed in URL.
Get request can be bookmarked and is more efficient. Post request cannot be bookmarked.

General Difference between PUT and POST methods

Following are some basic differences between the PUT and the POST methods:
 POST to a URL creates a child resource at a server defined URL while PUT to a URL
creates/replaces the resource in its entirety at the client defined URL.
 POST creates a child resource, so POST to /books will create a resources that will live
under the /books resource. Eg. /books/1. Sending the same post request twice will create
two resources.
 PUT is for creating or replacing a resource at a URL known by the client.
 PUT must be used for CREATE when the client already knows the url before the
resource is created.
 PUT replaces the resource at the known url if it already exists, so sending the same
request twice has no effect. In other words, calls to PUT are idempotent.

MEAN Stack Technologies Unit-1 2

Difference between Internet and WWW
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 network of

1 WWW stands for World wide Web.
networks.

Internet is a means of connecting a World Wide Web which is a

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

WWW is service on top of that

3 Internet is infrastructure.
infrastructure.

Internet can be viewed as a big book- Web can be viewed as collection of

4
store. books on that store.

At some advanced level, to At some advanced level, to

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

WWW is more software-oriented as

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

English scientist Tim Berners-Lee

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

MEAN Stack Technologies Unit-1 3

 8 Internet is superset of WWW. WWW is a subset of the Internet.

The first version of the Internet was In the beginning WWW was known
9
known as ARPANET. as NSFNET.

10 Internet uses IP address. WWW uses HTTP.

Domain Name Services

We operate and maintain a number of key aspects of the DNS, including the root zone, and
the .int and .arpa domains.
The DNS Root Zone
The root is the upper-most part of the DNS hierarchy, and involves delegating administrative
responsibility of “top-level domains”, which are the last segment of a domain name, such
as .com, .uk and .nz. Part of our tasks includes evaluating requests to change the operators of
country code domains, as well as day-to-day maintenance of the details of the existing operators.
.INT
The .int top-level domain, designed for the sole use of cross-national organizations, such as
treaty organizations, that do not naturally fit into a specific country’s top-level domain. For
example, who.int for the World Health Organization.
.ARPA
The .arpa domain is used internally by Internet protocols, such as for reverse mapping of IP
addresses, and delivery of ENUM phone number mapping. We administer this domain in close
liaison with the Internet Architecture Board, which has policy responsibility for .arpa.
IDN Practices Repository
To help foster the deployment of Internationalised Domain Names (IDNs), a repository of “IDN
tables” which document the permissable characters for different languages and scripts provided
for registration by different top-level domain registries. The repository is informative, and
designed for information sharing.
Root Key Signing Key
The Root Key Signing Key provides verification of the DNSSEC-signed root zone.
Special Purpose Domains
A number of special domains are reserved or managed for demonstration purposes, or for future
use.

Hyper Text Transfer (HTTP) Protocol

 HTTP is used to access the data on the World Wide Web (www).
 It is is an application layer protocol.
 It is connectionless, media-independent, TCP/IP based, and stateless protocol.
 The HTTP protocol uses port 80 by default but it also can use other ports well.
 It transfers the data in the form of plain text, hypertext, audio, video, Html files, query
results, etc.
 HTTP is similar to FTP in terms of transferring the files from one host to another host.
 But, HTTP is simpler than FTP because HTTP uses only one connection that is a data
connection, in HTTP there is no control connection is used to transfer the files.
 HTTP is also similar to SMTP in terms of data transferred between the client and server.

MEAN Stack Technologies Unit-1 4

  But, HTTP differs from SMTP in the way the messages are sent from the client to the
server and from the server to the client.
 In HTTP messages are delivered immediately instead of stored and forward later
happened in SMTP.
 It is further categorized as HTTP 1.0, HTTP 1.1, HTTP 2.0 and HTTP 3.0.

File Transfer Protocol (FTP)

 FTP is an application layer protocol.
 It is used to exchange files over the internet and enables the users to upload and
download the files from the internet.
 It transfers both text and binary files over the Internet. But 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.
 It transfers the data more reliably and efficiently.
 FTP uses TCP at the transport layer.
 FTP is a connection-oriented protocol.
 FTP is an out-of-band protocol as data and control information flow over different
connections.
 FTP creates two connections between the computers one connection for the commands
and replies called control connection and a second connection for data transfers
called data connection.
 FTP uses Port number 21 for the control connection and Port number 20 for the data
connection
 FTP is built on a client-server model architecture using the control connection and data
connection between the client and server.

Simple Mail Transfer Protocol (SMTP)

 SMTP is mainly used for sending emails efficiently and reliably over the internet.
 SMTP is a push protocol and uses TCP at the transport layer.
 SMTP uses persistent TCP connections, so it can send multiple emails at once.
 SMTP is a connection-oriented, stateless, and in-band protocol.
 SMTP uses port number 25.
 SMTP is a general set of interaction guidelines that allow the software to transmit
electronic mail over the internet.
 It set up communication rules between servers and allows the exchange of emails
between the users on the same or different computers.
 SMTP is a pure text-based protocol. It can only handle the messages containing 7 bit
ASCII text and can not transfer other types of data like images, video, audio, etc.
 SMTP can not transfer executable files and binary objects.
 MIME extends the limited capabilities of email. It enables the users to send and receive
graphics, audio files, video files, etc in the message. MIME was specially designed for
SMTP.
 Sometimes SMTP Auth stands for SMTP Authentication has been provided for
authentication purposes.

HTTP stands for Hyper Text Transfer Protocol, FTP for File Transfer Protocol, while SMTP
stands for Simple Mail Transfer Protocol. All three are used to transfer information over a
computer network and are an integral part of today’s internet.

MEAN Stack Technologies Unit-1 5

Why do we need three Protocols for transferring files?
We need the three protocols as they all serve different purposes. These are HTTP, FTP, and
SMTP.
1. HTTP is the backbone of the World Wide Web (WWW). It defines the format of messages
through which Web Browsers (like Firefox, Chrome) and Web Servers communicate, whilst
also defining how a web browser should respond to a particular web browser request.
2. FTP is the underlying protocol that is used to, as the name suggests, transfer files over a
communication network. It establishes two TCP connections: Control Connection to
authenticate the user, and Data Connection to transfer the files.
3. SMTP is what is used by Email servers all over the globe to communicate with each other so
that the assignment you submitted at 11:59 pm reaches your professor’s inbox within the
deadline.
How do their implementations differ?
All three are Application Layer Protocols, using TCP as the underlying Transport layer protocol.
But the way they use it and are implemented in general is vastly different. The below table
briefly differentiates between them.
Parameter HTTP FTP SMTP

Port number 80 20 and 21 25

Type of band
In-band Out-of-band In-band
transfer

State Stateless Maintains state –

Number of TCP 2 (Data Connection and

1 1
connections Control Connection)

Persistent for
Type of TCP Can use both Persistent Control connection.
Persistent
connection and Non-persistent Non-persistent for
Data Connection

Push Protocol
Type of Protocol Pull Protocol (Mainly) –
(Primarily)

Transfer files between

Transfer directly Transfers mails
Type of Transfer the Web server and Web
between computers via Mail Servers
client

 HTTP is stateless. A Stateless protocol implies that the HTTP Web Server does not maintain
which request had originated from which user. Hence, to give customized service to the
user, HTTP uses Cookies.
 FTP is Out-of-band, as it uses a separate channel to send data (Data connection), as to send
control information (Control connection).

MEAN Stack Technologies Unit-1 6

 As SMTP is much older than HTTP, it restricts all its messages to be in 7-bit ASCII format.
Whereas HTTP has no such restriction.
 HTTP encapsulates each file in a different HTTP message. Whereas, SMTP places all the
contents of a mail in a single message.
HTML5 | Introduction
Introduction: HTML stands for Hyper Text Markup Language. It is used to design web pages
using a markup language. HTML is an abbreviation of Hypertext and Markup language.
Hypertext defines the link between the web pages. The markup language is used to define the
text document within the tag which defines the structure of web pages. HTML 5 is the fifth and
current version of HTML. It has improved the markup available for documents and has
introduced application programming interfaces (API) and Document Object Model (DOM).
Features:
 It has introduced new multimedia features which supports both audio and video controls by
using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the web
browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>
Removed elements from HTML 5: There are many elements which are depreciated from
HTML 5 are listed below:
Removed Elements Use Instead Elements

<acronym> <abbr>

<applet> <object>

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

<font> CSS

MEAN Stack Technologies Unit-1 7

Removed Elements Use Instead Elements

<frame>

<frameset>

<noframes>

<isindex>

<strike> CSS, <s> or <del>

<tt> CSS

New Added Elements in HTML 5:

 <article>: The <article> tag is used to represent an article. More specifically, the content
within the <article> tag is independent from the other content of the site (even though it
can be related).
 <aside>: The <aside> tag is used to describe the main object of the web page in a shorter
way like a highlighter. It basically identifies the content that is related to the primary
content of the web page but does not constitute the main intent of the primary page. The
<aside> tag contains mainly author information, links, related content and so on.
 <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure element
in a document.
 <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document. It is related to main flow, but
it can be used in any position of a document and the figure goes with the flow of the
document and if it is removed it should not affect the flow of the document.
 <header>: It contains the section heading as well as other content, such as a navigation
links, table of contents, etc.
 <footer>: The <footer> tag in HTML is used to define a footer of HTML document. This
section contains the footer information (author information, copyright information, carriers
etc.). The footer tag is used within body tag. The <footer> tag is new in the HTML 5. The
footer elements require a start tag as well as an end tag.
 <main>: Delineates the main content of the body of a document or web app.
 <mark>: The <mark> tag in HTML is used to define the marked text. It is used to
highlight the part of the text in the paragraph.
 <nav>: The <nav> tag is used to declaring the navigational section in HTML documents.
Websites typically have sections dedicated to navigational links, which enables user to
navigate the site. These links can be placed inside a nav tag.
 <section>: It demarcates a thematic grouping of content.
 <details>: The <details> tag is used for the content/information which is initially hidden
but could be displayed if the user wishes to see it. This tag is used to create interactive
widget which user can open or close it. The content of details tag is visible when open the
set attributes.
 <summary>: The <summary> tag in HTML is used to define a summary for the <details>
element. The <summary> element is used along with the <details> element and provides a

MEAN Stack Technologies Unit-1 8

 summary visible to the user. When the summary is clicked by the user, the content placed
inside the <details> element becomes visible which was previously hidden. The
<summary> tag was added in HTML 5. The <summary> tag requires both starting and
ending tag.
 <time>: The <time> tag is used to display the human-readable data/time. It can also be
used to encode dates and times in a machine-readable form. The main advantage for users
is that they can offer to add birthday reminders or scheduled events in their calendars and
search engines can produce smarter search results.
 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text from
other text that may be formatted in different direction. This tag is used when a user
generated text with an unknown direction.
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to define
the position within the text which is treated as a line break by the browser. It is mostly used
when the used word is too long and there are chances that the browser may break lines at
the wrong place for fitting the text.
 <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML files.
It can be used with input tag, so that users can easily fill the data in the forms using select
the data.
 <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in a
form. The purpose of <keygen> element is to provide a secure way to authenticate users.
When a form is submitted then two keys are generated, private key and public key. The
private key stored locally, and the public key is sent to the server. The public key is used to
generate client certificate to authenticate user in future.
 <output>: The <output> tag in HTML is used to represent the result of a calculation
performed by the client-side script such as JavaScript.
 <progress>: It is used to represent the progress of a task. It also defines how much work is
done and how much is left to download a task. It is not used to represent the disk space or
relevant query.
 <svg>: It is the Scalable Vector Graphics.
 <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using
JavaScript. It can be used to draw paths, boxes, texts, gradient and adding images. By
default, it does not contain border and text.
 <audio>: It defines the music or audio content.
 <embed>: Defines containers for external applications (usually a video player).
 <source>: It defines the sources for <video> and <audio>.
 <track>: It defines the tracks for <video> and <audio>.
 <video>: It defines the video content.
Advantages:
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.
Disadvantages:
 Long codes have to be written which is time consuming.
 Only modern browsers support it.

Why to Learn CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

MEAN Stack Technologies Unit-1 9

CSS is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. I will list down some of the key
advantages of learning CSS:
 Create Stunning Web site - CSS handles the look and feel part of a web page. Using
CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors are
used, layout designs,variations in display for different devices and screen sizes as well as
a variety of other effects.
 Become a web designer - If you want to start a carrer as a professional web designer,
HTML and CSS designing is a must skill.
 Control web - CSS is easy to learn and understand but it provides powerful control over
the presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.
 Learn other languages - Once you understands the basic of HTML and CSS then other
related technologies like javascript, php, or angular are become easier to understand.

Hello World using CSS.

Just to give you a little excitement about CSS, I'm going to give you a small conventional CSS
Hello World program, You can try it using Demo link.
Live Demo

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
h1 {
color: #36CFFF;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Applications of CSS
As mentioned before, CSS is one of the most widely used style language over the web. I'm going
to list few of them here:
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.

MEAN Stack Technologies Unit-1 10

  Superior styles to HTML - CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
 Global web standards - Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

Audience
This CSS tutorial will help both students as well as professionals who want to make their
websites or personal blogs more attractive.

Prerequisites
You should be familiar with:

 Basic word processing using any text editor.

 How to create directories and files.
 How to navigate through different directories.
 Internet browsing using popular browsers like Internet Explorer or Firefox.
 Developing simple Web Pages using HTML or XHTML.
If you are new to HTML and XHTML, then we would suggest you to go through our HTML
Tutorial or XHTML Tutorial first.
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs,variations in display for different devices
and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.

Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.

MEAN Stack Technologies Unit-1 11

  Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the CSS
Working Group. The CSS Working Group creates documents called specifications. When a
specification has been discussed and officially ratified by the W3C members, it becomes a
recommendation.
These ratified specifications are called recommendations because the W3C has no control over
the actual implementation of the language. Independent companies and organizations create that
software.
NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations
about how the Internet works and how it should evolve.

CSS Versions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December
1996. This version describes the CSS language as well as a simple visual formatting model for
all the HTML tags.
CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds
support for media-specific style sheets e.g. printers and aural devices, downloadable fonts,
element positioning and tables.
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }

MEAN Stack Technologies Unit-1 12

 The Anatomy of a Web Page: 14 Basic Elements
“The details are not the details. They make the design,” Charles Eames once said, and that has
never stopped to be true. Starting to design a web page, we have to consider what it should
consist of to solve the task set for it and be both usable and beautiful. Our today’s article is
devoted right to those vital details that create an effective web page. Let’s briefly review what
elements can be essential for a typical web page, what impact each element has, and how it
contributes to the general user experience. Packed with plenty of web design examples.

1. Header
Header is the upper (top) part of the webpage. Being the area people see before scrolling the
page in their first seconds on the website, the header is an element of strategic importance. It is
expected from the header to provide the core navigation around the website so that users could
scan it in split seconds and jump to the main pages that can help them. Headers are also referred
to as site menus and positioned as an element of primary navigation in the website layout.
Headers may include a bunch of meaningful layout elements, for example:
 basic elements of brand identity, usually a logo
 call-to-action button
 links to basic categories of website content
 links to the social networks
 basic contact information (telephone number, e-mail address, etc.)
 switcher of the languages in case of the multilingual interface
 search field
 subscription field or button
 links to interaction with the product such as trial version, downloading from the AppStore, etc.
 It doesn’t mean that all the mentioned elements should be included in one web page header: in
this case, the header section would be overloaded with information. The more objects attract the
user’s attention, the harder it is to concentrate on the vital ones. On the basis of design tasks,
designers, sometimes together with marketing specialists, decide on the strategically important
options and pick them up from the list or add the others.
What makes a header a vital element contributing to web usability is the fact that it is placed in
the most scannable zone of a web page. Whatever is the scanning pattern users stick to on a
website, it starts from the top part of the page, scanned from left to right for languages using the
same reading and writing pattern. It means that what is placed in the header won’t be missed,
especially the elements placed in its left and right corners. That’s why you will often find the
main CTA button in one of them. What’s more, the power of habit and the idea of external
consistency of user experience should also be taken into account here. For years so far, visitors
have been used to finding core navigation in headers, so mostly, the main question is to decide
what to put into it rather than to use a header or not.

MEAN Stack Technologies Unit-1 13

 Some of the popular design practices for web headers include:
 hamburger menu: hiding the set of links to different pages or sections behind the hamburger
button called so as it consists of horizontal lines looking like a typical bread-meat-bread
hamburger.
 sticky header: header that doesn’t hide away but sticks to the top part of the page when users are
scrolling the page down. This way core navigation area is available at any point of interaction,
which can be helpful in terms of content-heavy pages with long scrolling.
 two-layer navigation: a sort of double set of navigation sites in the header to separate two
different routes of navigation that are both important for web usability.
One more widely-used pattern for website headers is making a logo clickable and opening or
refreshing the home page after it’s clicked.
2. CTA Button
A call-to-action (CTA) button is an element of a user interface aimed at encouraging a user to
take a certain action. This action presents a conversion for a particular page or screen (for
example, buy, contact, subscribe, etc.). In other words, it turns a passive user into an active one.
So, technically it can be any type of button that is supported with a call-to-action text. This type
of button differs from all the other buttons on the page or screen due to its engaging nature: it has
to catch attention and stimulate users to do the required action.
Effective call-to-action buttons are easy to notice; designers intentionally create them so that
website visitors could see them in split seconds and respond. That’s why they are usually bold
buttons containing microcopy with a particular call to action (e.g., “Learn more” or “Buy it
now”), which explains the main action for this page and encourages a user to do it. If CTA
buttons are not clearly defined and don’t attract attention, visitors are likely to scan the content
quickly and leave it untouched.
3.Hero Section
Hero section is the above-the-fold (pre-scroll area of the web page containing the element that
presents the strong visual hook: a hero image, slider, catchy piece of typography, video, or
anything else attracting visitors’ attention and transfers a needed message to them. Make no
mistake, the term doesn’t require that all images of this kind should include a human, animal,
mascot, or any other kind of character. Don’t get tricked over with that “hero” part. It can also be
the product photo or the theme image featuring a landscape, a device, a building – anything, even
an abstract model or composition. The main idea is that the visual hook in the hero section
instantly grabs attention and allows for setting the quick visual, emotional, and informative
connection with the users, engaging them to scroll or push the buttons to learn more.
4.Footer
Footer is the lower (bottom) part of the web page which usually marks its end. Being another
common zone of global website navigation, the footer provides the additional field for useful
links and data users may be interested in finding.
Footers can include:
 brand identity signs, usually the name and logo of the company or product
 links to user support sections, for example, FAQ page, About page, Privacy Policy, Terms and
Conditions, Support Team, etc.
 credits to website creators
 contact forms and information
 links to company or product accounts in social networks
 testimonials and badges
 certification signs
 subscription field or button.

MEAN Stack Technologies Unit-1 14

 As well as the header, the footer is not the element found in all websites users can come across
the web. For instance, when infinite scrolling is applied, the traditional footer is not an effective
navigation zone. However, in the case of infinite scrolling, the idea of a fixed footer can also be
applicable and support navigation not losing this area. For most users, the footer is a common
place to search for contact information, credits, and sitemaps, so playing on this pattern can be
beneficial. The decision on using a footer is always based on the idea of supporting general
usability and navigability. Anyway, if the footer is applied, it should get in harmonic
combination with all the other design solutions of the website layout and general stylistic
concept.
5.Slider
Slider is an interactive element that applies a technique of a slideshow or carousel to present
different products, offers, etc. It is especially popular as a part of e-commerce and business
websites to present a sort of gallery of products or services.
Sliders present controversial interactive elements that often become an object of hot debates.
Among the benefits, we could mention the following:
 saving space on the page
 user engagement
 attractive visual hook
However, even though the advantages sound really good, there are also obvious pitfalls:
 page speed decreasing due to slider functionality, this way influencing SEO
 display of several equal options together, which may hurt usability and get distracting as people
do not observe priorities, and that makes it harder to focus
 possible problems of sliders in the mobile adaptation of the website
 as well as banners, sliders can be perceived as ads and skipped
So, deciding upon slider integration into the web layout, designers must consider all pros and
cons for each particular case.
6.Search
Internal search is a functionality that enables a visitor to browse the content inside the website
and shows it according to the search query. Tuned correctly, it shows the relevant content, and
this way provides the shortcut to what the user needs. Thus, the internal search saves the user’s
time and effort, amplifies usability and desirability of the digital product, helps retain users, and
increases conversion rates. The interactive element responsible for the internal search in the
user interface is a search field, also called a search box or search bar: it enables a user to type in
the search query and, this way find the pieces of content that are needed.
If your website is made of 50+ pages, it’s high time you considered applying the internal search.
Well-designed and easily found search field enables the user to jump to the necessary point
without browsing through the numerous pages and menus. This approach is a common pattern of
user behavior now, it respects the user’s time and effort, so it is highly demanded in user-friendly
interfaces.
Another vital point to mention is that designers shouldn’t prioritize search over navigation in a
user interface. Although many users do try getting closer to their aim via search, others may have
problems with search interactions. For example, they don’t know a language well enough to form
the correct query, it’s not convenient for them to type something in, or they just hate thinking
over the textual queries, and they would prefer to follow the already existing navigation and cues
rather than the cognitive load of communicating to the system via the search.
In case you have a single-page website, if your app or website is concise and not heavily packed
with content, the internal search is not needed. Thought-out navigation will be enough, for
example, for a corporate or portfolio website highlighting core information and services.

MEAN Stack Technologies Unit-1 15

 7.Menu
The menu is one of the core navigation elements in user interfaces. It is a graphical control that
presents the options of interactions with the interface. Basically, it can be the list of commands –
in this case, options will be presented with verbs marking possible actions like, for example,
“save,” “delete,” “buy,” “send,” etc. A menu can also present the categories along which the
content is organized in the given interface, and this can be the high time for using nouns marking
them.
Menus can have different locations in the interface (side menus, header menus, footer menus,
etc.) and different ways of appearance and interaction (drop-down menus, drop-up menus,
sliding menus, etc.) Any solution, which a designer makes about menu functionality, appearance,
and placement in general layout, should be based on thoughtful user research, analyzing not only
the potential wishes and expectations of the target audience but also their tech literacy and
possible environments in which the digital product could be used. A well-designed menu can
significantly speed up achieving goals and satisfying needs that lay a solid foundation for a
positive user experience.

Menus can be organized horizontally or vertically. Some popular types found on diverse
websites are:
Classic horizontal menu: the most common and well-recognized type of menu which presents
the core navigation organized as a horizontal line in the website header, mentioned above
Sidebar menu: quite a classic type, presents a vertical list of options sticking to the left or right
side of the web page
Dropdown menu: a more complex type of menu for content-heavy websites; here, the list of
additional options opens below the primary one when it’s clicked or hovered. Another similar
option is the dropup menu, when the list opens up, not down, but the essence is the same.
Megamenu: that’s the complex expandable menu in which the big list of multiple choices is
presented in a two-dimensional dropdown layout; this approach is effective for cases with a vast
number of options.
Hamburger menu: when the hamburger button (typically marked with three horizontal lines) is
clicked, the menu expands. This option saves space and is often applied to mobile versions of
websites.

8.Breadcrumbs
Breadcrumbs are navigation elements used to support users in a journey around the website:
they get aware of where they are on the website and can get used to the website structure more
easily. So, breadcrumbs present a tool for better wayfinding, yet, they don’t replace the primary
navigation menu; they present the secondary level of navigation and increase website usability in
case it has lots of pages.
Some of the benefits of breadcrumbs are:
 increased findability: breadcrumbs give users another touchpoint to the content and help to
catch the structure of the website
 fewer clicks needed: with breadcrumbs, website visitors can jump from one level of the
hierarchy to any previous step with no effort and no need to take all the way back
 effective use of screen space: crafted well, breadcrumbs take a narrow horizontal line with
plain-looking text elements that don’t need much space
 no misinterpretation: breadcrumbs are hardly ever misunderstood by users: the behavior pattern
for them has solidified through years, and people rarely mistake this element for anything else

MEAN Stack Technologies Unit-1 16

 lower bounce rate: breadcrumbs are a great support for first-time visitors or people that have no
everyday experience of dealing with complex websites, so the more confident they feel, the
slimmer is the chance of them bouncing the page.
As well as with internal website search, breadcrumbs are helpful in cases when the website has
multiple pages and a complex hierarchy consisting of multiple layers. Breadcrumbs are common
– and expected by users – in big e-commerce websites and platforms, media and news websites,
blogs, and magazines covering a wide range of topics, etc. Yet, if that’s not your case and your
website has a simple hierarchy, primary navigation will be enough to let the users effectively
interact with it.
9.Form
Form is an interactive element that allows users to send information to the system or server. In a
nutshell, it is a digital version of any real paper form we have to fill in to provide someone with
the arranged information; however, digital forms can have more options and functionality to
make this process even more smooth, clear, and user-friendly. As it is a traditional and well-
recognized pattern of collecting the data, users deal with forms quite often in their digital lives,
starting from the process of registration, adding personal or financial details, making payments,
sending feedback, subscribing to a newsletter, etc.
As forms present the actual point of communication between the user and the digital product,
they have to be super simple and easy to use. And the simpler the UI element should be, the
more designers’ thoughts and effort should be put into it, right? Make the logic of data input
thought-out, the navigation of the form intuitive, and the number of required actions minimized.
And don’t forget about the visual prompts and tips to support the user in the process of form
filling.
10.Cards
Cards, also called tiles, are layout elements that help arrange and visualize homogeneous data or
content in a scannable and easy-to-use way. Cards are usually organized in a sort of grid, but
each card looks like a separate piece in this system. Cards can combine different types of content
about a particular item. For example, a product preview card on a catalog page can include an
image, a title, basic functionality of adding it to a shopping cart or saving to the wishlist, etc.
11.Video
Video is not a really basic part of a web page, but with the progress of web development
solutions and technical abilities, we can find it more and more often on the website of different
kinds these days. As mentioned in the article about video content in UX design, a catchy video
crafted with an understanding of the target audience is a tool attracting customers’ attention as
well as a well-checked method of informing them quickly and brightly. Video content activates
several channels of perception – audio, visual, motion – simultaneously, and usually does that
wrapped in telling a story. Such a combination of factors often makes a video presentation
strong, emotional, and memorable.
Videos have become a popular visual hook applied to the hero section mentioned above. As well,
we can come across many other types of videos that help users quickly catch the idea of a
product, set the atmosphere, send the needed message, engage in trying the service, demonstrate
how the tool, app, or software works, share feedback from users, and so on, and so forth.
However, there are essential points to consider, such as loading time, contrast issue,
responsiveness, and other pitfalls that can spoil user experience in the case of video integration
into a web page.
12.Progress Indicator
Progress indicator is a small but helpful element that helps the visitor to understand the current
point in the general volume of information or set of actions. It is beneficial on the pages loaded

MEAN Stack Technologies Unit-1 17

with text content and supposing long scrolling, like long-read articles or guides, for example.
Due to this indicator, users don’t get lost and can estimate the time needed for reading or
browsing better.
Also, progress trackers support users in cases of long and complex forms or processes that
demand a set of steps or actions. Seeing what part of the way is covered and what is ahead, users
feel more confident.
13.Favicon
Favicon, also known as URL icon or bookmark icon, is a special type of symbol representing the
product or brand in the URL-line of the browser and in the bookmark tab. It allows users to get a
quick visual connection with it while they are browsing. This interface element proved itself
effective for productive website promotion and good recognizability of its visual identity. Being
super small, it makes a great contribution to web usability.
14.Tags
That’s another element of secondary navigation level, often found in blogs and websites with
plenty of homogenous content. Tag is presented with a keyword or phrase that enables users to
jump directly to the items marked up with it. Tags are actually pieces of metadata that provide
quick access to specific content categories, so they support navigation with the additional way of
content classification. Moreover, tags are often the elements that users create by themselves, so
they become an alternative to the names of categories that are fixed by the website and can’t be
changed by users.
The choice of the elements to add to a specific web page should be based on the harmonic
combination of user goals and business goals behind it as well as it’s crucial to test the solutions
and update them on the basis of the feedback from real interactions. Sure, this article was just an
introduction to the anatomy of a web page, so keep up with new posts in Tubik Blog to dive into
more details.
Document Type Definition – DTD
A Document Type Definition (DTD) describes the tree structure of a document and something
about its data. It is a set of markup affirmations that actually define a type of document for the
SGML family, like GML, SGML, HTML, XML.
A DTD can be declared inside an XML document as inline or as an external recommendation.
DTD determines how many times a node should appear, and how their child nodes are ordered.
There are 2 data types, PCDATA and CDATA
 PCDATA is parsed character data.
 CDATA is character data, not usually parsed.
Syntax:
<!DOCTYPE element DTD identifier
[
first declaration
second declaration
.
.
nth declaration
]>

MEAN Stack Technologies Unit-1 18

 Example:

DTD for the above tree is:

XML document with an internal DTD:

 XML
<?xml version="1.0"?>
<!DOCTYPE address [
<!ELEMENT address (name, email, phone, birthday)>
<!ELEMENT name (first, last)>
<!ELEMENT first (#PCDATA)>
<!ELEMENT last (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT birthday (year, month, day)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT month (#PCDATA)>
<!ELEMENT day (#PCDATA)>
]>

<address>
<name>
<first>Rohit</first>
<last>Sharma</last>
</name>
<email>sharmarohit@gmail.com</email>
<phone>9876543210</phone>
<birthday>
<year>1987</year>
<month>June</month>
<day>23</day>
</birthday>
</address>

The DTD above is interpreted like this:

 !DOCTYPE address defines that the root element of this document is
address.
 !ELEMENT address defines that the address element must contain
four elements: “name, email, phone, birthday”.

MEAN Stack Technologies Unit-1 19

  !ELEMENT name defines that the name element must contain two
elements: “first, last”.
 !ELEMENT first defines the first element to be of type
“#PCDATA”.
 !ELEMENT last defines the last element to be of type
“#PCDATA”.
 !ELEMENT email defines the email element to be of type
“#PCDATA”.
 !ELEMENT phone defines the phone element to be of type
“#PCDATA”.
 !ELEMENT birthday defines that the birthday element must contain
three elements “year, month, day”.
 !ELEMENT year defines the year element to be of type
“#PCDATA”.
 !ELEMENT month defines the month element to be of type
“#PCDATA”.
 !ELEMENT day defines the day element to be of type
“#PCDATA”.
XML document with an external DTD:

 XML
<?xml version="1.0"?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>
<first>Rohit</first>
<last>Sharma</last>
</name>
<email>sharmarohit@gmail.com</email>
<phone>9876543210</phone>
<birthday>
<year>1987</year>
<month>June</month>
<day>23</day>
</birthday>
</address>

address.dtd:
 <!ELEMENT address (name, email, phone, birthday)>
 <!ELEMENT name (first, last)>
 <!ELEMENT first (#PCDATA)>
 <!ELEMENT last (#PCDATA)>
 <!ELEMENT email (#PCDATA)>
 <!ELEMENT phone (#PCDATA)>
 <!ELEMENT birthday (year, month, day)>
 <!ELEMENT year (#PCDATA)>
 <!ELEMENT month (#PCDATA)>
 <!ELEMENT day (#PCDATA)>
Output:

MEAN Stack Technologies Unit-1 20

XML – Schemas
XML Schema is commonly known as XML Schema Definition (XSD). It is used to describe
and validate the structure and the content of XML data. XML schema defines the elements,
attributes and data types. Schema element supports Namespaces. It is similar to a database
schema that describes the data in a database.

Syntax
You need to declare a schema in your XML document as follows −
Example
The following example shows how to use schema −
<?xml version = "1.0" encoding = "UTF-8"?>
<xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">
<xs:element name = "contact">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The basic idea behind XML Schemas is that they describe the legitimate format that an XML
document can take.

Elements
As we saw in the XML - Elements chapter, elements are the building blocks of XML document.
An element can be defined within an XSD as follows −
<xs:element name = "x" type = "y"/>

MEAN Stack Technologies Unit-1 21

Definition Types
You can define XML schema elements in the following ways −
Simple Type
Simple type element is used only in the context of the text. Some of the predefined simple types
are: xs:integer, xs:boolean, xs:string, xs:date. For example −
<xs:element name = "phone_number" type = "xs:int" />
Complex Type
A complex type is a container for other element definitions. This allows you to specify which
child elements an element can contain and to provide some structure within your XML
documents. For example −
<xs:element name = "Address">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
In the above example, Address element consists of child elements. This is a container for
other <xs:element> definitions, that allows to build a simple hierarchy of elements in the XML
document.
Global Types
With the global type, you can define a single type in your document, which can be used by all
other references. For example, suppose you want to generalize the person and company for
different addresses of the company. In such case, you can define a general type as follows −
<xs:element name = "AddressType">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
</xs:sequence>
</xs:complexType>
</xs:element>
Now let us use this type in our example as follows −
<xs:element name = "Address1">
<xs:complexType>
<xs:sequence>
<xs:element name = "address" type = "AddressType" />
<xs:element name = "phone1" type = "xs:int" />
</xs:sequence>
</xs:complexType>

MEAN Stack Technologies Unit-1 22

</xs:element>

<xs:element name = "Address2">

<xs:complexType>
<xs:sequence>
<xs:element name = "address" type = "AddressType" />
<xs:element name = "phone2" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
Instead of having to define the name and the company twice (once for Address1 and once
for Address2), we now have a single definition. This makes maintenance simpler, i.e., if you
decide to add "Postcode" elements to the address, you need to add them at just one place.

Attributes
Attributes in XSD provide extra information within an element. Attributes
have name and type property as shown below −
<xs:attribute name = "x" type = "y"/>
An XML document is always descriptive. The tree structure is often referred to as XML
Tree and plays an important role to describe any XML document easily.
The tree structure contains root (parent) elements, child elements and so on. By using tree
structure, you can get to know all succeeding branches and sub-branches starting from the root.
The parsing starts at the root, then moves down the first branch to an element, take the first
branch from there, and so on to the leaf nodes.

Example
Following example demonstrates simple XML tree structure −
<?xml version = "1.0"?>
<Company>
<Employee>
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>tanmaypatil@xyz.com</Email>
<Address>
<City>Bangalore</City>
<State>Karnataka</State>
<Zip>560212</Zip>
</Address>
</Employee>
</Company>
Following tree structure represents the above XML document −

MEAN Stack Technologies Unit-1 23

In the above diagram, there is a root element named as <company>. Inside that, there is one
more element <Employee>. Inside the employee element, there are five branches named
<FirstName>, <LastName>, <ContactNo>, <Email>, and <Address>. Inside the <Address>
element, there are three sub-branches, named <City> <State> and <Zip>.

XML – DOM
The Document Object Model (DOM) is the foundation of XML. XML documents have a
hierarchy of informational units called nodes; DOM is a way of describing those nodes and the
relationships between them.
A DOM document is a collection of nodes or pieces of information organized in a hierarchy.
This hierarchy allows a developer to navigate through the tree looking for specific information.
Because it is based on a hierarchy of information, the DOM is said to be tree based.
The XML DOM, on the other hand, also provides an API that allows a developer to add, edit,
move, or remove nodes in the tree at any point in order to create an application.

Example
The following example (sample.htm) parses an XML document ("address.xml") into an XML
DOM object and then extracts some information from it with JavaScript −
<!DOCTYPE html>
<html>
<body>
<h1>TutorialsPoint DOM example </h1>
<div>
<b>Name:</b> <span id = "name"></span><br>
<b>Company:</b> <span id = "company"></span><br>
<b>Phone:</b> <span id = "phone"></span>
</div>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}

MEAN Stack Technologies Unit-1 24

 else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/xml/address.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("company").innerHTML=
xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Contents of address.xml are as follows −
<?xml version = "1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
Now let us keep these two files sample.htm and address.xml in the same directory /xml and
execute the sample.htm file by opening it in any browser. This should produce the following
output.

Here, you can see how each of the child nodes is extracted to display their values.

XSLT (Extensible Stylesheet Language Transformations)

XSLT tutorial provides basic and advanced concepts of XSLT. Our XSLT tutorial is designed
for beginners and professionals.

XSL stands for EXtensible Stylesheet Language. XSLT is for Transformation of XML document
to other formats.

MEAN Stack Technologies Unit-1 25

Our XSLT tutorial includes all topics of Search Engine Optimization such as black and white
XSLT techniques, how search engine works, XSLT market research, content research, On Page
Optimization techniques, Off Page Optimization techniques, Social Media Optimization, XSLT
Tools etc.

What is XSLT
Before XSLT, first we should learn about XSL. XSL stands for EXtensible Stylesheet Language.
It is a styling language for XML just like CSS is a styling language for HTML.

XSLT stands for XSL Transformation. It is used to transform XML documents into other
formats (like transforming XML into HTML).

What is XSL
In HTML documents, tags are predefined but in XML documents, tags are not predefined. World
Wide Web Consortium (W3C) developed XSL to understand and style an XML document,
which can act as XML based Stylesheet Language.

An XSL document specifies how a browser should render an XML document.

Main parts of XSL Document

o XSLT: It is a language for transforming XML documents into various other types of documents.
o XPath: It is a language for navigating in XML documents.
o XQuery: It is a language for querying XML documents.
o XSL-FO: It is a language for formatting XML documents.

How XSLT Works

The XSLT stylesheet is written in XML format. It is used to define the transformation rules to be
applied on the target XML document. The XSLT processor takes the XSLT stylesheet and
applies the transformation rules on the target XML document and then it generates a formatted
document in the form of XML, HTML, or text format. At the end it is used by XSLT formatter to
generate the actual output and displayed on the end-user.

Image representation:

MEAN Stack Technologies Unit-1 26

Advantage of XSLT
A list of advantages of using XSLT:

o XSLT provides an easy way to merge XML data into presentation because it applies user defined
transformations to an XML document and the output can be HTML, XML, or any other
structured document.
o XSLT provides Xpath to locate elements/attribute within an XML document. So it is more
convenient way to traverse an XML document rather than a traditional way, by using scripting
language.
o XSLT is template based. So it is more resilient to changes in documents than low level DOM and
SAX.
o By using XML and XSLT, the application UI script will look clean and will be easier to maintain.
o XSLT templates are based on XPath pattern which is very powerful in terms of performance to
process the XML document.
o XSLT can be used as a validation language as it uses tree-pattern-matching approach.
o You can change the output simply modifying the transformations in XSL files.

MEAN Stack Technologies Unit-1 27

Difference Between SAX Parser and DOM Parser
in Java
There are two types of XML parsers namely Simple API for XML and Document Object
Model.
 SAX
 DOM
SAX (Simple API for XML)
SAX (Simple API for XML), is the most widely adopted API for XML in Java and is
considered the de-facto standard. Although it started as a library exclusive to Java, it is now a
well-known API distributed over a variety of programming languages. It is an open-source
project and has recently switched to SourceForge project infrastructure that makes it easier to
track open SAX issues outside the high-volume XML-dev list. The current latest version as of
01/10/2018 is SAX 2.0. It uses an event-driven serial-access mechanism for accessing XML
documents and is frequently used by applets that need to access XML documents because it is
the fastest and least memory-consuming API available for parsing XML documents. The
mechanism SAX uses makes it independent of the elements that came before, i.e. it is state-
independent.
DOM stands for Document Object Model. The DOM API provides the classes to read and
write an XML file. DOM reads an entire document. It is useful when reading small to medium
size XML files. It is a tree-based parser and a little slow when compared to SAX and occupies
more space when loaded into memory. We can insert and delete nodes using the DOM API.

Now, the package that provides linkage applications for clients that work with an XML
document is called an XML Parser. It was planned to read the XML documents. An XML
Parser was created for doing programs to use XML.
SAX Parser
SAX represents a simple API for XML and a SAX API is implemented by SAX Parser. This
API was called event-based API which provides interfaces on handlers. There are four handler
interfaces. ContentHandler, DTDHandler, EntityResolver, and ErrorHandler interface. It does
not create any internal structure rather it takes the occurrences of components of an input
document as events, and then it tells the client what it reads as it reads through the input
document. It is suitable for large XML files because it doesn’t require loading the whole XML
file.

MEAN Stack Technologies Unit-1 28

Features Of SAX Parser
 The internal structure can not be created by SAX Parser.
 These event-based SAX parsers work the same as the event handler in Java.
Advantages Of SAX Parser
 Very simple to use and has good efficiency of memory.
 Its runtime is too fast and it can work for a bigger document or file system.
Disadvantages Of SAX Parser
 Its ability to understand APIs is too less than an event-based API.
 We can’t know the full information because of a lot of pieces of data.
DOM Parser
DOM represents the Document Object model. When an object contains some information
about XML documents, is called DOM Parser. This looks like a tree structure. DOM API is
implemented by a DOM Parser, which is very easy and simple to use. It represents an XML
Document into tree format in which each element represents tree branches and creates an In
Memory tree representation of XML file and then parses it more memory is required for this.
Features Of DOM Parser
 The internal structure can be created by DOM Parser.
 Because of these internal structures, the client can get information about the original XML
docs.
Advantages Of DOM Parser
 DOM API is easy to use so that we can do both write and read operations.
 When a document is required then it preferred a wide part that can be randomly accessed.
Disadvantages Of DOM Parser
 Its efficiency of memory is not too good, it takes more memory cause XML docs needed to
load in there.
 In comparison to the SAX parser, it is too slow.
Hence, conclusive differences between SAX Parser and DOM Parser in Java is as follows

SAX Parser DOM Parser

It is called a Simple API for XML Parsing. It is called as Document Object Model.

It’s an event-based parser. It stays in a tree structure.

SAX Parser is slower than DOM Parser. DOM Parser is faster than SAX Parser.

Best for the larger sizes of files. Best for the smaller size of files.

It is not good at making XML files in low

It is suitable for making XML files in Java.
memory.

The internal structure can not be created by The internal structure can be created by DOM

MEAN Stack Technologies Unit-1 29

 SAX Parser DOM Parser

SAX Parser. Parser.

It is read-only. It can insert or delete nodes.

In the SAX parser backward navigation is not In DOM parser backward and forward search
possible. is possible

Suitable for efficient memory. Suitable for large XML document.

A small part of the XML file is only loaded in

It loads whole XML documents in memory.
memory.

MEAN Stack Technologies Unit-1 30