Mean Stack T Unit1

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
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(HyperText Markup Language). All browsers
know how to display HTML page to the client.
Web Application
A website is a collection of static files(webpages) such as HTML pages,

images, graphics etc. A Web application is a web site with dynamic
functionality on the server. Google, Facebook, 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 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
formated.
HTTP Methods and Descriptions :
Method Description
Name
OPTIONS Request for communication options that are available on the

request/response chain.
GET Request to retrieve information from server using a given URI.
HEAD Identical to GET except that it does not return a

message-body, only the headers 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.
PUT This is same as POST, but POST is used to create, PUT can
be used to create as 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 Large amount of data can be sent.
amount of data
Get request is not secured because Post request is secured because

data is exposed in URL data is not exposed in URL.
Get request can be bookmarked and Post request cannot be bookmarked.

is more efficient.
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.
Anatomy of an HTTP GET request
Get request contains path to server and the parameters added to it.
Anatomy of an HTTP POST request
Post requests are used to make more complex requests on the server. For
instance, if a user has filled a form with multiple fields and the application
wants to save all the form data to the database. Then the form data will be
sent to the server in POST request body, which is also known as Message
body.
Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of
devices over the Internet. A web browser is used to access web pages.
Web browsers can be defined as programs that display text, data,
pictures, animation, and video on the Internet. Hyperlinked resources on
the World Wide Web can be accessed using software interfaces provided
by Web browsers.
Web Technology can be Classified into the Following
Sections:
● World Wide Web (WWW): The World Wide Web is based on several
different technologies: Web browsers, Hypertext Markup Language
(HTML), and Hypertext Transfer Protocol (HTTP).
● Web Browser: The web browser is an application software to explore
www (World Wide Web). It provides an interface between the server and
the client and requests to the server for web documents and services.
● Web Server: Web server is a program which processes the network
requests of the users and serves them with files that create web pages.
This exchange takes place using Hypertext Transfer Protocol (HTTP).
● Web Pages: A webpage is a digital document that is linked to the World
Wide Web and viewable by anyone connected to the internet has a web
browser.
● Web Development: Web development refers to the building, creating, and
maintaining of websites. It includes aspects such as web design, web
publishing, web programming, and database management. It is the
creation of an application that works over the internet i.e. websites.
Web Development can be Classified into Two Ways:

● Frontend Development: The part of a website that the user interacts
directly is termed as front end. It is also referred to as the ‘client side’ of the
application.
● Backend Development: Backend is the server side of a website. It is the
part of the website that users cannot see and interact. It is the portion of
software that does not come in direct contact with the users. It is used to
store and arrange data.
Frontend Development Languages
The front-end portion is built by using some languages which are discussed below:
● HTML: HTML stands for Hypertext Markup Language. It is used to design
the front-end portion of web pages using a markup language. HTML is the
combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. The markup language is used to define the text
documentation within the tag which defines the structure of web pages.
● CSS: Cascading Style Sheets fondly referred to as CSS is a simply
designed language intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that
makes up each web page.
● JavaScript: JavaScript is a famous scripting language used to create magic
on the sites to make the site interactive for the user. It is used to enhancing
the functionality of a website to running cool games and web-based
software.
● AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is used
to communicate with the server without refreshing the web page and thus
increasing the user experience and better performance.
There are many other languages through which one can do front-end development
depending upon the framework for example Flutter user Dart, React uses JavaScript
and Django uses Python, and much more.
Front End Frameworks and Libraries

HTML
CSS
● CSS Frameworks
○ Bootstrap
○ Tailwind CSS
○ Bulma
○ Foundation
○ Primer CSS
○ Spectre CSS
○ Materialize CSS
○ Onsen UI
○ Semantic UI
○ Blaze UI
○ Pure CSS
○ Tachyons
● CSS Preprocessors
○ SASS
○ LESS
JavaScript
● JavaScript Technology
○ ES6
○ TypeScript
● JavaScript Frameworks
○ AngularJS
○ Angular ngx Bootstrap
○ Angular PrimeNG
○ Angular Material UI
○ VueJS
○ NuxtJS
● JavaScript Libraries
○ jQuery
○ jQuery UI
○ jQuery Mobile
○ jQWidgets
○ jQuery EasyUI
○ ReactJS
○ NextJS
○ Ant Design
○ React Desktop
○ React Rebass
○ React Bootstrap
○ React Reactstrap
○ BlueprintJS
○ React Suite
○ React.js Evergreen
○ React Material UI
○ P5.js
○ Fabric.js
○ D3.js
○ Collect.js
○ Underscore.js
○ Lodash
○ TensorFlow.js
Backend Development Languages

The back end portion is built by using some languages which are discussed below:
● PHP: PHP is a server-side scripting language designed specifically for web
development. Since PHP code executed on the server-side, so it is called a
server-side scripting language.
● Node.js: Node.js is an open-source and cross-platform runtime
environment for executing JavaScript code outside a browser. You need to
remember that NodeJS is not a framework, and it’s not a programming
language. Most people are confused and understand it’s a framework or a
programming language. We often use Node.js for building back-end
services like APIs like Web App or Mobile App. It’s used in production by
large companies such as Paypal, Uber, Netflix, Wallmart, and so on.
● Python: Python is a programming language that lets you work quickly and
integrate systems more efficiently.
● Ruby: Ruby is a dynamic, reflective, object-oriented, general-purpose
programming language. Ruby is a pure Object-Oriented language
developed by Yukihiro Matsumoto. Everything in Ruby is an object except
the blocks but there are replacements too for it i.e procs and lambda. The
objective of Ruby’s development was to make it act as a sensible buffer
between human programmers and the underlying computing machinery.
● Java: Java is one of the most popular and widely used programming
languages and platforms. It is highly scalable. Java components are easily
available.
● JavaScript: JavaScript can be used as both (front end and back end)
programming.
● Golang: Golang is a procedural and statically typed programming
language having the syntax similar to C programming language.
Sometimes it is termed as Go Programming Language.
● C#: C# is a general-purpose, modern and object-oriented programming
language pronounced as “C sharp”.
● DBMS: The software which is used to manage database is called Database
Management System (DBMS).
Back End Frameworks and Technology

PHP
● Framework: Laravel
● CMS: WordPress
NodeJS
● Framework: Express
Python
● Framework: Django
● Package Manager: Python PIP
Ruby
● Framework: Ruby on Rails
Java
● Framework: Spring, Hibernate
C#
● Framework: .NET
Database:
● Relation Database
○ Postgre SQL
○ MariaDB
○ MySQL
● NoSql Database
○ MongoDB
Data Format
Format of data is used by web applications to communicate with each other. It is
light weight text based data interchange format which means, it is simpler to read
and write.
Below are two common data formats used in web development:
● XML: Extensible Markup Language (XML) is a markup language that
defines a set of rules for encoding documents in a format that is both
human-readable and machine-readable.
● JSON: JSON or JavaScript Object Notation is a format for structuring data.
API: API is an abbreviation for Application Programming Interface which is a

collection of communication protocols and subroutines used by various programs to
communicate between them.
Web Protocols
Web protocols are set of rules followed by everyone communicating over the web.
● HTTP: The Hypertext Transfer Protocol (HTTP) is designed to enable
communications between clients and servers. HTTP works as a
request-response protocol between a client and server. A web browser
may be the client, and an application on a computer that hosts a web site
may be the server.
● Other Protocols:
○ TCP/IP Model
○ UDP
○ FTP
○ SMTP
○ SOAP
Graphics
Graphical elements are one of the key feature of any webpage. They can be used to
convey important points better than text does and beautify the webpage.
● Canvas: The HTML “canvas” element is used to draw graphics via
JavaScript.
● SVG: SVG stands for Scalable Vector Graphics. It basically defines
vector-based graphics in XML format.
Internet and World Wide Web
1. Internet :
The internet is a globally connected network system facilitating worldwide
communication and access to data resources through a huge collection of personal, public,
business, academic and government networks. it’s governed by agencies just like Internet
Assigned Numbers Authority (or IANA) that establish universal protocols. 2. World Wide
Web (WWW) :
World Wide Web (WWW), byname Web, is leading information retrieval service of web
(the worldwide computer network). Online gives users access to a huge array of
documents that are connected to every other by means of hypertext or hypermedia
links—i.e., hyperlinks, electronic connections that link related pieces of data so as to
permit auser 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
.
1 Internet is a global network

WWW stands for
of networks.
Worldwide Web.
2 Internet is a means of
World Wide Web whichis a
connecting a computerto
collection of information
any other computer
which is accessed via the
anywhere in the world.
Internet.
3 Internet is infrastructure. WWW is service on topof that

infrastructure.
4 Internet can be
Web can be viewed as
viewedas a big
collection of books on
book-store.
that store.
5 At some advanced level,to

At some advanced level, to
understand we can think of
understand wecan think of
the Internet as hardware.
6 the WWW as software.
Internet is primarily
WWW is more software
hardware-based.
oriented as compared to the
Internet.
7 It is originated sometimes
English scientist Tim
in late 1960s.
Berners Lee invented the
World Wide Web in 1989.
8 Internet is superset of WWW. WWW is a subset of the

Internet.
9 In the beginning WWW
The first version of the
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 nameswhen looking for other hosts instead of remembering the IP addresses.
o For example, suppose the FTP site at EduSoft had an IP address of 132.147.165.50, most people would
reach this site by specifying ftp.EduSoft.com. Therefore, the domain name is more reliable than IP address.
DNS is a TCP/IP protocol used on different platforms. The domain name space is divided into three
different sections: generic domains,country domains, and inverse domain.
Generic Domains
o It defines the registered hosts according to their generic behavior.

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

com Commercial Organizations
coop Cooperative business Organizations
edu Educational institutions
gov Government institutions
info Information service providers
int International Organizations
mil Military groups
museum Museum & other nonprofit organizations
name Personal names
net Network Support centers
org Nonprofit Organizations
pro Professional individual Organizations
Country Domain
The format of country domain is same as a generic domain, but it uses two-character country
abbreviations (e.g., us for the United States) in place of three character organizational
abbreviations.
Inverse Domain
The inverse domain is used for mapping an address to a name. When the server has received
a request from the client, and the server contains the files of only authorized clients. To
determine whether the client is on the authorized list or not, it sends a query to the DNS server
and ask for mapping an address to the name.
Working of DNS
o DNS is a client/server network communication protocol. DNS clients send requests to

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

o It is a protocol used to access the data on the World Wide Web (www).
o The HTTP protocol can be used to transfer the data in the form of plain text, hypertext,
audio, video, and so on.
o This protocol is known as HyperText Transfer Protocol because of its efficiency that allows us to
use in a hypertext environment where there are rapid jumps from one document to another
document.
o HTTP is similar to the FTP as it also transfers the files from one host to another host. But, HTTP
is simpler than FTP as HTTP uses only one connection, i.e., no control connection to transfer
the files.
o HTTP is used to carry the data in the form of MIME-like format.
o HTTP is similar to SMTP as the data is transferred between client and server. The HTTP differs
from the SMTP in the way the messages are sent from the client to the server and from server to
the client. SMTP messages are stored and forwarded while HTTP messages are delivered
immediately.
Features of HTTP:
o Connectionless protocol: HTTP is a connectionless protocol. HTTP client initiates a request and
waits for a response from the server. When the server receives the request, the server processes
the request and sends back the response to the HTTP client after which the client disconnects the
connection. The connection between client and server exist only during the current request and
response time only.
o Media independent: HTTP protocol is a media independent as data can be sent as long as both
the client and server know how to handle the data content. It is required for both the client and
server to specify the content type in MIME-type header.
o Stateless: HTTP is a stateless protocol as both the client and server know each other only during
the current request. Due to this nature of the protocol, both the client and server do not retain the
information between various requests of the web pages.
HTTP Transactions
The above figure shows the HTTP transaction between client and server. The
client initiates a transaction by sending a request message to the server. The server replies to
the request message by sending a response message
Messages
HTTP messages are of two types: request and response. Both the message types follow the same message
format.
Request Message: The request message is sent by the client that consists of a request line, headers, and sometimes a
body.
Response Message: The response message is sent by the server to the client that consists of a status line, headers, and
sometimes a body.
Uniform Resource Locator (URL)
o A client that wants to access the document in an internet needs an address and to facilitate the
access of documents, the HTTP uses the concept of Uniform Resource Locator (URL). o The
Uniform Resource Locator (URL) is a standard way of specifying any kind of information on the
internet.
o The URL defines four parts: method, host computer, port, and path
o Method: The method is the protocol used to retrieve the document from a server. For
example, HTTP.
o Host: The host is the computer where the information is stored, and the computer is
given an alias name. Web pages are mainly stored in the computers and the computers
are given an alias name that begins with the characters "www". This field is not
mandatory.
o Port: The URL can also contain the port number of the server, but it's an optional field. If
the port number is included, then it must come between the host and path and it should
be separated from the host by a colon.
o Path: Path is the pathname of the file where the information is stored. The path itself
contain slashes that separate the directories from the subdirectories and files.
FTP
o FTP stands for File transfer protocol.

o FTP is a standard internet protocol provided by TCP/IP used for transmitting the files from one
host to another.
o It is mainly used for transferring the web page files from their creator to the computer that acts as
a server for other computers onthe 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 datatransfer process. The server has two components: the
server control process and the server data transfer process.
There are two types of connections in FTP
o Control Connection: The control connection uses very simple rules for communication. Through
control connection, we can transfer a line of command or line of response at a time. The control
connection is made between the control processes. The control connection remains connected
during the entire interactive FTP session.
o Data Connection: The Data Connection uses very complex rules as data types may vary. The
data connection is made between data transfer processes. The data connection opens when a
command comes for transferring the files and closes when the file is transferred.
FTP Clients
o FTP client is a program that implements a file transfer protocol which allows you to transfer files
between two hosts on the internet.
o It allows a user to connect to a remote host and upload or download the files. o It has a set of
commands that we can use to connect to a host, transfer the files between you and your host and
close the connection.
o The FTP program is also available as a built-in component in a Web browser. This GUI based
FTP client makes the file transfer very easy and also does not require to remember the FTP
commands.
Advantages of FTP:
o Speed: One of the biggest advantages of FTP is speed. The FTP is one of the
fastest way to transfer the files from one computer to another computer. o
Efficient: It is more efficient as we do not need to complete all the operations to get
the entire file.
o Security: To access the FTP server, we need to login with the username and
password. Therefore, we can say that FTP is more secure.
o Back & forth movement: FTP allows us to transfer the files back and forth.
Suppose you are a manager of the company, you send some information to all the employees, and they
all send information back on the same server.
Disadvantages of FTP:
o The standard requirement of the industry is that all the FTP transmissions should be encrypted.
However, not all the FTP providers are equal and not all the providers offer encryption. So, we
will have to look out for the FTP providers that provides encryption.
o FTP serves two operations, i.e., to send and receive large files on a network. However, the size
limit of the file is 2GB that can be sent. It also doesn't allow you to run simultaneous transfers
to multiple receivers.
o Passwords and file contents are sent in clear text that allows unwanted eavesdropping. So, it is
quite possible that attackers can carry out the brute force attack by trying to guess the FTP
password.
o It is not compatible with every system
SMTP
o SMTP stands for Simple Mail Transfer Protocol.

o SMTP is a set of communication guidelines that allow software to transmit an electronic
mail over the internet is called Simple Mail Transfer Protocol.
o It is a program used for sending messages to other computer users based on e-mail addresses. o
It provides a mail exchange between users on the same or different computers, and it also supports:
o It can send a single message to one or more recipients.
o Sending message can include text, voice, video or graphics.
o It can also send the messages on networks outside the internet.
o The main purpose of SMTP is used to set up communication rules between servers. The servers
have a way of identifying themselves and announcing what kind of communication they are trying
to perform. They also have a way of handling the errors such as incorrect email address. For
example, if the recipient address is wrong, then receiving server reply with an error message of
some kind.
Components of SMTP
o First, we will break the SMTP client and SMTP server into two components such as user agent
(UA) and mail transfer agent (MTA). The user agent (UA) prepares the message, creates the
envelope and then puts the message in the envelope. The mail transfer agent (MTA) transfers
this mail across the internet.
o SMTP allows a more complex system by adding a relaying system. Instead of just having one MTA at sending side and one
at receiving side, more MTAs can be added, acting either as a client or server to relay the email.
o The
relaying system without TCP/IP protocol can also be used to send the emails
to users, and this is achieved by the use of the mail gateway. The mail gateway is
a relay MTA that can be used to receive an email.
Working of SMTP
1. Composition of Mail: A user sends an e-mail by composing an electronic mail message using a
Mail User Agent (MUA). Mail UserAgent is a program which is used to send and receive mail. The
message contains two parts: body and header. The body is the main part of the message while
the header includes information such as the sender and recipient address. The header also
includes descriptive information such as the subject of the message. In this case, the message
body is like a letter and header is like an envelope that contains the recipient's address. 2.
Submission of Mail: After composing an email, the mail client then submits the completed e mail to
the SMTP server by using SMTP on TCP port 25.
3. Delivery of Mail: E-mail addresses contain two parts: username of the recipient and domain name.
For example, [email protected], where "vivek" is the username of the recipient and "gmail.com"
is the domain name. If the domain name of the recipient's email address is different from the
sender's domain name, then MSA will send the mail to the Mail Transfer Agent (MTA). To relay
the email, the MTA will find the target domain. It checks the MX record from Domain Name System
to obtain the target domain. The MX record contains the domain name and IP address of the recipient's domain. Once
the record is located, MTA connects to the exchange server to relay the message.
4. Receipt and Processing of Mail: Once the incoming message is received, the exchange server
delivers it to the incoming server (Mail Delivery Agent) which stores the e-mail where it waits for
the user to retrieve it.
5. Access and Retrieval of Mail: The stored email in MDA can be retrieved by using MUA (Mail
User Agent). MUA can be accessed by using login and password.
Html5 concepts
HTML5 is the latest version of HTML, the markup language used to build structure or content on World
Wide Web. HTML5 is the latest web standard by W3C. Earlier HTML was used only to build webpage
structure, but HTML5 is a full on package to build websites, handle presentation, add functionalities and
Web APIs.
HTML5 is the recommended version to build modern web applications as it is light and fastest
version of Hypertext Mark up Language, the code that describes web pages. HTML5 was formed in
2011.
HTML5 Stack
Html5 is the combination of three web technologies:→
HTML → to build webpage structure,

CSS → to enhance look and feel( presentation layer), and
Javascript → to add functionality to HTML elements.
The term HTML5 means not only HTML, it is a combination of HTML, CSS and Javascript with APIs. For
example, drawing and animation using canvas, offline storage, microdata, audio and video, drag and
drop, geolocation, embedded fonts, web APIs etc. HTML5 includes new semantic tags and some old
tags
HTML + CSS + JAVASCRIPT = HTML5
Why HTML5
HTML5 has been designed to deliver almost everything you'd want to do on web without requiring additional
software such as browser plugins. It does everything from animation to apps, music to movies, and can
also
be used to build complicated web applications that run in your browser.
HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also cross-platform, which
means itdoesn't care whether you're using a tablet or a smart phone, a net-book, notebook, ultra
book or a SmartTV 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> ∙
<title>HTML5 Page</title>
<html lang="en"> ∙
<head>
//lang embedded in html
<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 withheading.
∙ 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>isvisible 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..
<details open>
Click to see detailsHello
<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'tsupport command tag. Try avoid it.
Figure
Figure tag Specifies self-contained content, like images, illustrations, diagrams, code
listings, etc. Figure canhave 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 canset 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 ofsome 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 describedwithin 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. CSSwas designed to enable the separation of presentation and content. Now
web designers can move the formatting information of theweb pages to a separate style sheet which
results in
considerably simpler HTML markup, and better maintainability.
CSS3 is the latest version of the CSS specification. CSS3 adds several new styling
features and improvements to enhance the web presentation capabilities.
What You Can Do with CSS

There are lot more things you can do with CSS.
∙ You can easily apply same style rules on multiple elements.

∙ You can control the presentation of multiple pages of a website with a single style sheet. ∙
You can present the same page differently on different devices.
∙ You can style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise. ∙
You can change the position of an element on a web page without changing the markup. ∙ You can
alter the display of existing HTML elements.
∙ You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
∙ You can create animations and transitions effects without using any JavaScript.
∙ You can create print friendly version of your web pages.
The list does not end here, there are many other interesting things that you can do with CSS. You will learn about all of them in
detail in upcoming chapters.
Advantages of Using CSS

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

CSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods
of including CSS in an HTML document:
∙ Inline styles — Using the style attribute in the HTML start tag.
∙ Embedded styles — Using the <style> element in the head section of a document.
∙ External style sheets — Using the <link> element, pointing to an external CSS file.
In this tutorial we will cover all these three methods for inserting CSS one by one.
Inline Styles
Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can
be attached to an element using the style attribute.
The style attribute includes a series of CSS property and value pairs. Each "property: value" pair is separated by a semicolon
(;), just as you would write into an embedded or external style sheets. But it needs to be all in one line i.e. no line break after the
semicolon, as shown here:
Example
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>
Using the inline styles are generally considered as a bad practice. As style rules are embedded directly inside the HTML tag, it
causes the presentation to become mixed with the content of the document; which makes the code hard to maintain and negates
the purpose of using CSS.
Embedded Style Sheets

Embedded or internal style sheets only affect the document they are embedded in.
Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can define any
number of <style> elements in an HTML document but they must appear between the <head> and </head> tags. Let's take a look at
an example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
External Style Sheets

An external style sheet is ideal when the style is applied to many pages of the website.
An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External
style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing
just
one file.
You can attach external style sheets in two ways — linking and importing.
Linking External Style Sheets

Before linking, we need to create a style sheet first. Let's open your favorite code editor and create a new file. Now type
the following CSS code inside this file and save it as "style.css".
Example
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section,
as you can see in the following example:
<!DOCTYPE html>
<html lang="en">
<head> <title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body> </html>
What is Selector?
A CSS selector is a pattern to match the elements on a web page. The style rules associated with that selector will be applied to
the elements that match the selector pattern.
Selectors are one of the most important aspects of CSS as they allow you to target specific elements on your web page in
various ways so that they can be styled.
Several types of selectors are available in CSS, let's take a closer look at them:
Universal Selector
The universal selector, denoted by an asterisk (*), matches every single element on the page.
The universal selector may be omitted if other conditions exist on the element. This selector is often used to remove the default
margins and paddings from the elements for quick testing purpose.
Let's try out the following example to understand how it basically works:
Example
Try this code »
* {
margin: 0;
padding: 0;
}
The style rules inside the * selector will be applied to every element in a document.
Note: It is recommended not to use the universal selector (*) too often in a production environment, since this selector matches
every element on a web page that puts too much of unnecessary pressure on the browsers. Use element type or class selector
instead.
Element Type Selectors
An element type selector matches all instance of the element in the document with the corresponding element type name. Let's try
out an example to see how it actually works:
Example
Try this code »
p {
color: blue;
}
The style rules inside the p selector will be applied on every <p> element (or paragraph) in the document and color it blue, regardless
of their position in the document tree.
Id Selectors
The id selector is used to define style rules for a single or unique element.
The id selector is defined with a hash sign (#) immediately followed by the id value.
Example
Try this code »
#error {
color: red;
}
This style rule renders the text of an element in red, whose id attribute is set to error.
Note: The value of an id attribute must be unique within a given document — meaning no two elements in your HTML document
can share the same id value.
Class Selectors
The class selectors can be used to select any HTML element that has a class attribute. All the elements having that class will be
formatted according to the defined rule.
The class selector is defined with a period sign (.) immediately followed by the class value.
Example
Try this code »
.blue {
color: blue;
}
The above style rules renders the text in blue of every element in the document that has class attribute set to blue. You can make it a
bit more particular. For example:
Example
Try this code »
p.blue {
color: blue;
}
The style rule inside the selector p.blue renders the text in blue of only those <p> elements that has class attribute set to blue, and
has no effect on other paragraphs.
Descendant Selectors
You can use these selectors when you need to select an element that is the descendant of another element, for example, if you
want to target only those anchors that are contained within an unordered list, rather than targeting all anchor elements. Let's see
how it works:
Example
Try this code »
ul.menu li a {
text-decoration: none;
}
h1 em {
color: green;
}
The style rules inside the selector ul.menu li a applied to only those <a> elements that contained inside an <ul> element having
the class .menu, and has no effect on other links inside the document.
Similarly, the style rules inside the h1 em selector will be applied to only those <em> elements that contained inside the <h1> element
and has not effect on other <em> elements.
Child Selectors
A child selector is used to select only those elements that are the direct children of some element.
A child selector is made up of two or more selectors separated by a greater than symbol (>). You can use this selector, for
instance, to select the first level of list elements inside a nested list that has more than one level. Let's check out an example to
understand how it works:
Example
Try this code »
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
The style rule inside the selector ul > li applied to only those <li> elements that are direct children of the <ul> elements, and has
no effect on other list elements.
Adjacent Sibling Selectors

The adjacent sibling selectors can be used to select sibling elements (i.e. elements at the same level). This selector has the syntax
like: E1 + E2, where E2 is the target of the selector.
The selector h1 + p in the following example will select the <p> elements only if both the <h1> and <p> elements share the same
parent in the document tree and <h1> is immediately precedes the <p> element. That means only those paragraphs that come
immediately after each <h1> heading will have the associated style rules. Let's see how this selector actually works:
Example
Try this code »
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}
General Sibling Selectors
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;
}
h3 {
font-size: 22px;
}
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 {
}
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 system. Changing the
navigation system from page to page is confusing to the visitor and they will get frustrated and leave!
Web Page Content
Web page content includes everything between the <body> and </body> tags. We have already looked at some of the web page content, the header
and navigation system. Also 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 the website URL and web
page file name, discussed vertical and horizontal scroll bars, then moved onto the web page content. The web page content portion of the anatomy of
a web page consists of everything between the <body> and </body> tags including the header, navigation, center web page content and the web
page footer.
XML: Document type Definition(DTD)

What is a DTD?
DTD stands for Document Type Definition.
A DTD defines the structure and the legal elements and attributes of an XML document.
Valid XML Documents

A "Valid" XML document is "Well Formed", as well as it conforms to the rules of a DTD:
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The DOCTYPE declaration above contains a reference to a DTD file. The content of the DTD file is shown and explained below.
XML DTD
The purpose of a DTD is to define the structure and the legal elements and attributes of an XML document:
Note.dtd:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
The DTD above is interpreted like this:
∙ !DOCTYPE note - Defines that the root element of the document is note
∙ !ELEMENT note - Defines that the note element must contain the elements: "to, from, heading, body" ∙
!ELEMENT to - Defines the to element to be of type "#PCDATA"
∙ !ELEMENT from - Defines the from element to be of type "#PCDATA"
∙ !ELEMENT heading - Defines the heading element to be of type "#PCDATA"
∙ !ELEMENT body - Defines the body element to be of type "#PCDATA"
Tip: #PCDATA means parseable character data.
Using DTD for Entity Declaration

A DOCTYPE declaration can also be used to define special characters or strings, used in the document:
Example
<!DOCTYPE note [
<!ENTITY nbsp " ">
<!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; &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
What is XML schema

XML schema is a language which is used for expressing constraint about XML documents.
There are so many schema languages which are used now a days for example Relax- NG and
XSD (XML schema definition).
An XML schema is used to define the structure of an XML document. It is like DTD but
provides more control on XML structure.
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.
Checking Validation
An XML document is called "well-formed" if it contains the correct syntax. A well-formed and
valid XML document is one which have been validated against Schema.
XML Schema Data types

There are two types of data types in XML schema.
1. simpleType
2. complexType
simpleType
The simpleType allows you to have text-based elements. It contains less attributes, child
elements, and cannot be left empty.
<xs:element name = "phone_number" type = "xs:int" />

complexType
The complexType allows you to hold multiple attributes and elements. It can contain
additional sub elements and can be left empty.
<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>
Description of XML Schema

<xs:element name="employee"> : It defines the element name employee.
<xs:complexType> : It defines that the element 'employee' is complex type.
<xs:sequence> : It defines that the complex type is a sequence of elements.
<xs:element name="firstname" type="xs:string"/> : It defines that the element 'firstname' is of

string/text type.
<xs:element name="lastname" type="xs:string"/> : It defines that the element 'lastname' is of

string/text type.
<xs:element name="email" type="xs:string"/> : It defines that the element 'email' is of

string/text type.
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
XML Parsers
An XML parser is a software library or package that provides interfaces for client applications
to work with an XML document. The XML Parser is designed to read the XML and create a way
for programs to use XML.
XML parser validates the document and check that the document is well formatted.
Let's understand the working of XML parser by the figure given below:
Types of XML Parsers

These are the two main types of XML Parsers:
1. DOM
2. SAX
DOM (Document Object Model)

A DOM document is an object which contains all the information of an XML document. It is
composed like a tree structure. The DOM Parser implements a DOM API. This API is very
simple to use.
Features of DOM Parser
A DOM Parser creates an internal structure in memory which is a DOM document object and
the client applications get information of the original XML document by invoking methods on
this document object.
DOM Parser has a tree based structure.
Advantages
1) It supports both read and write operations and the API is very simple to use. 2) It is
preferred when random access to widely separated parts of a document is required.

Disadvantages
1) It is memory inefficient. (consumes more memory because the whole XML document needs
to be loaded into memory).
2) It is comparatively slower than other parsers.
SAX (Simple API for XML)

A SAX Parser implements SAX API. This API is an event based API and less intuitive.
Features of SAX Parser
It does not create any internal structure.
Clients does not know what methods to call, they just overrides the methods of the API and
place his own code inside method.
It is an event based parser, it works like an event handler in Java.
Advantages
1) It is simple and memory efficient.
2) It is very fast and works for huge documents.
Disadvantages
1) It is event-based so its API is less intuitive.
2) Clients never know the full information because the data is broken into pieces.
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:
XSLT <xsl:template> Element

An XSL style sheet consists of one or more set of rules that are called templates.
A template contains rules to apply when a specified node is matched.
The <xsl:template> Element

The <xsl:template> element is used to build templates.
The match attribute is used to associate a template with an XML element. The match attribute can also be used to define a
template for the entire XML document. The value of the match attribute is an XPath expression (i.e. match="/" defines the whole
document).
Ok, let's look at a simplified version of the XSL file from the previous chapter:
Example
<html>
<body>
<table border="1">
<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
<html>
<body>
<table border="1">
<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
<html>
<body>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XSLT <xsl:sort> Element

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
<html>
<body>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:sort select="artist"/>
<tr>
</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
<html>
<body>
<table border="1">
<th>Title</th>
<th>Artist</th>
<th>Price</th>
</tr>
<xsl:if test="price > 10">
<tr>
<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 SAX stands for the

Document Object Simple API for XML
Model. parsing.
DOM needs a lot of memory. SAX does not need a lot

of memory.
It is memory inefficient. It is memory efficient.
DOM parser work on the SAX work on the

Document object model. event-based XML parser.
DOM is Faster. SAX is slower.
DOM loads whole XML SAX load a small part of

document memory. XML memory.
It’s not suitable for a It’s suitable for a large

large XML file. XML file.
DOM implements DOM API. SAX impliment SAX API.
It creates internal It does not create the

structure memory. first internal Structure.
Java provides support DOM Java provides support SAX

parsers, and we can parse parsers, and we can parse
XML XML
files in java using DOM parser. files in java using SAX parser.
What is DOM?
DOM, or Document Object Model, is a programming interface that represents
structured documents like HTML and XML as a tree of objects. It defines how to
access, manipulate, and modify document elements using scripting languages like
JavaScript.
So basically Document Object Model is an API that represents and interacts with
HTML or XML documents.
The DOM is a W3C (World Wide Web Consortium) standard and it defines a
standard for accessing documents.
The W3C Dom standard is divided into three different parts:
● Core DOM – standard model for all document types

● XML DOM – standard model for XML documents
● HTML DOM – standard model for HTML documents
HTML DOM
HTML DOM is a standard object model and programming interface for HTML
documents. HTML DOM is a way to represent the webpage in a structured
hierarchical way so that it will become easier for programmers and users to glide
through the document.
With HTML DOM, we can easily access and manipulate tags, IDs, classes,
attributes, or elements of HTML using commands or methods provided by the
document object.
Using DOM JavaScript we get access to HTML as well as CSS of the web page and
can also modify the behavior of the HTML elements.
Why is DOM Required?

HTML is used to structure the web pages and Javascript is used to add behavior to
our web pages. When an HTML file is loaded into the browser, the JavaScript can
not understand the HTML document directly. So it interprets and interacts with the
Document Object Model (DOM), which is created by the browser based on the
HTML document.
DOM is basically the representation of the same HTML document but in a

tree-like structure composed of objects. JavaScript can not understand the
tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM.
JavaScript interprets DOM easily, using it as a bridge to access and manipulate the
elements. DOM Javascript allow access to each of the objects (h1, p, etc) by using
different functions.
The Document Object Model (DOM) is essential in web development for

several reasons:
● Dynamic Web Pages: It allows you to create dynamic web pages. It

enables the JavaScript to access and manipulate page content,
structure, and style dynamically which gives interactive and responsive
web experiences, such as updating content without reloading the entire
page or responding to user actions instantly.
● Interactivity: With the DOM, you can respond to user actions (like clicks,
inputs, or scrolls) and modify the web page accordingly.
● Content Updates: When you want to update the content without
refreshing the entire page, the DOM enables targeted changes making the
web applications more efficient and user-friendly.
● Cross-Browser Compatibility: Different browsers may render HTML and

CSS in different ways. The DOM provides a standardized way to interact
with page elements.
● Single-Page Applications (SPAs): Applications built with frameworks

such as React or Angular, heavily rely on the DOM for efficient rendering
and updating of content within a single HTML page without reloading the
full page.
Structure of DOM
DOM can be thought of as a Tree or Forest (more than one tree). The term structure
model is sometimes used to describe the tree-like representation of a document.
Each branch of the tree ends in a node, and each node contains objects Event
listeners can be added to nodes and triggered on an occurrence of a given event.
One important property of DOM structure models is structural isomorphism: if any
two DOM implementations are used to create a representation of the same
document, they will create the same structure model, with precisely the same
objects and relationships.
Why DOM is called an Object Model?
Documents are modeled using objects, and the model includes not only the
structure of a document but also the behavior of a document and the objects of
which it is composed like tag elements with attributes in HTML.
Properties of DOM
Let’s see the properties of the document object that can be accessed and modified
by the document object.
Representation of the DOM
● Window Object: Window Object is object of the browser which is always

at top of the hierarchy. It is like an API that is used to set and access all
the properties and methods of the browser. It is automatically created by
the browser.
● Document object: When an HTML document is loaded into a window, it

becomes a document object. The ‘document’ object has various properties
that refer to other objects which allow access to and modification of the
content of the web page. If there is a need to access any element in an
HTML page, we always start with accessing the ‘document’ object.
Document object is property of window object.
● Form Object: It is represented by form tags.

● Link Object: It is represented by link tags.
● Anchor Object: It is represented by a href tags.
● Form Control Elements: Form can have many control elements such as
text fields, buttons, radio buttons, checkboxes, etc.
Methods of Document Object

DOM provides various methods that allows users to interact with and manipulate
the document. Some commonly used DOM methods are:
Method Description
write(“string”) Writes the given string on the document.
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.
Example: In this example, We use HTML element id to find the DOM HTML
element.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>GeeksforGeeks</h2>


<p id="intro">
A Computer Science portal for geeks.
</p>
<p>
This example illustrates the <b>getElementById</b> method.
</p>
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"GeeksforGeeks introduction is: " + element.innerHTML;
</script>
</body>
</html>
Output:
Getting the HTML element by getElementById() Method
Example : This example describes the representation of the HTML elements in the
tree structure.
html
<table>
<ROWS>
<tr>
<td>Car</td>
<td>Scooter</td>
</tr>
<tr>
<td>MotorBike</td>
<td>Bus</td>
</tr>
</ROWS>
</table>
HTML elements in tree-like structure
What DOM is not?

● The Document Object Model is not a binary description where it does not
define any binary source code in its interfaces.
● The Document Object Model is not used to describe objects in XML or

HTML whereas the DOM describes XML and HTML documents as objects. ●
The Document Object Model is not represented by a set of data structures;
it is an interface that specifies object representation. ● The Document Object
Model does not show the criticality of objects in documents i.e it doesn’t
have information about which object in the document is appropriate to the
context and which is not.
Levels of DOM
DOM consisted of multiple levels, each representing a different aspect of the
document.
● Level 0: Provides a low-level set of interfaces.

● Level 1: DOM level 1 can be described in two parts: CORE and HTML.
○ CORE provides low-level interfaces that can be used to

represent any structured document.
○ HTML provides high-level interfaces that can be used to
represent HTML documents.
● Level 2: consists of six specifications: CORE2, VIEWS, EVENTS, STYLE,
TRAVERSAL, and RANGE.
○ CORE2: extends the functionality of CORE specified by

DOM level 1.
○ VIEWS: views allows programs to dynamically access and
manipulate the content of the document.
○ EVENTS: Events are scripts that are either executed by the
browser when the user reacts to the web page.
○ STYLE: allows programs to dynamically access and
manipulate the content of style sheets.
○ TRAVERSAL: This allows programs to dynamically
traverse the document.
○ RANGE: This allows programs to dynamically identify a
range of content in the document.
● Level 3: consists of five different specifications: CORE3, LOAD and SAVE,
VALIDATION, EVENTS, and XPATH.
○ CORE3: extends the functionality of CORE specified by

DOM level 2.
○ LOAD and SAVE: This allows the program to dynamically
load the content of the XML document into the DOM
document and save the DOM Document into an XML
document by serialization.
○ VALIDATION: This allows the program to dynamically
update the content and structure of the document while
ensuring the document remains valid.
○ EVENTS: extends the functionality of Events specified by
DOM Level 2.
○ XPATH: XPATH is a path language that can be used to
access the DOM tree.
Example: This example illustrates the dom-manipulation using getElementById()

Method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation</title>
</head>
<body>
<label>Enter Value 1: </label>
<input type="text" id="val1" />
<br />
<br />
<label>Enter Value 2: </label>
<input type=".text" id="val2" />
<br />
<button onclick="getAdd()">Click To Add</button>
<p id="result"></p>
<script type="text/javascript">
function getAdd() {
// Fetch the value of input with id val1
const num1 = Number(document.getElementById("val1").value);
// Fetch the value of input with id val2

const num2 = Number(document.getElementById("val2").value);
const add = num1 + num2;
console.log(add);
// Displays the result in paragraph using dom

document.getElementById("result").innerHTML = "Addition : " + add;
// Changes the color of paragraph tag with red

document.getElementById("result").style.color = "red";
}
</script>
</body>
</html>
Output:
Manipulating the Document objects using getElementById() Method
Conclusion
HTML DOM is a programming interface enabling modification of web documents
via functions. Focusing on HTML DOM, it empowers JavaScript to manipulate HTML
tags, attributes, and elements. This guide elaborates on DOM properties, structure,
methods, and benefits, fostering comprehensive understanding for web
development.
Frequently Asked Questions on DOM
What do you mean by DOM?

DOM stands for Document Object Model. It is a programming interface for web
documents like HTML, XML and SVG documents. DOM represents elements of
documents as tree of objects.
What is an example of a DOM?
DOM representation for a HTML code can be seen as:
Document
– HTML
– head
– title (text: “My Website”)
– body
– h1 (text: “Welcome!”)
– p (text: “This is the main content.”)
What is DOM in JavaScript?
DOM in JavaScript refers to a programming interface. It provides a way to access,

manipulate, and interact with the structure and content of an HTML document.
Why is DOM used in JavaScript?
DOM is used in JavaScript for many purposes like: Dynamically style and update
content, performing client-side validation, event handling, etc.
DOM (Document Object Model)

A DOM document is an object which contains all the information of an XML document. It is
composed like a tree structure. The DOM Parser implements a DOM API. This API is very
simple to use.
Features of DOM Parser

A DOM Parser creates an internal structure in memory which is a DOM document object and
the client applications get information of the original XML document by invoking methods on
this document object.
DOM Parser has a tree based structure.

Advantages
1) It supports both read and write operations and the API is very simple to use. 2) It is
preferred when random access to widely separated parts of a document is required.
Disadvantages
1) It is memory inefficient. (consumes more memory because the whole XML document needs
to be loaded into memory).
2) It is comparatively slower than other parsers.
SAX (Simple API for XML)

A SAX Parser implements SAX API. This API is an event based API and less intuitive.
Features of SAX Parser
It does not create any internal structure.
Clients does not know what methods to call, they just overrides the methods of the API and
place his own code inside method.
It is an event based parser, it works like an event handler in Java.
Advantages
1) It is simple and memory efficient.
2) It is very fast and works for huge documents.
Disadvantages
1) It is event-based so its API is less intuitive.
2) Clients never know the full information because the data is broken into pieces.
Note: WHEN SAX is better than DOM
● It parses the XML file as a stream rather than allocating RAM for the
complete file.
● Since, it uses less memory and is faster than the DOM Parser because the
complete file is not stored in memory.
● Therefore, it is considered to be useful in parsing large XML files.
The Simple API for XML, SAX, is an event-driven API for parsing XML documents. It defines
several handler classes that encapsulate the methods needed for specific tasks when parsing
XML documents, such as external entity handling. As with other event-driven parsers, the basic
process for the definition of an XML module in your project may be described by the following
steps:
● Subclass the required handler base classes. (In the previous section you did so only
from expatpp; now you have more classes available for subclassing, which we will
explore below.)
● Override the desired methods.

● Register your handler with the parser.
● Start parsing.
These steps can be seen in the following example which prints an XML file, keeping track of
the correct indentation. The interfaces used are explained further below. You can also look at
the SAXCount example from IBM's xml4c2 documentation.
// We declare a handler of our own that will be capable of
// remembering the correct indentation for "pretty"

// printing the file. In order to do so we override
// the startElement, characters and endElement handlers.

// Take time to compare this solution to the expatpp solution to
// the same problem (above)
void PrettyPrint::startElement(const XMLCh* const name,
AttributeList& attributes)
indent++; // A new element started, it should be indented one
// level further than the current level
int i;
for(i = 0; i < indent; i++)
outStrm << "\t";
outStrm << "<" << name;
unsigned int len = attributes.getLength();
for (unsigned int i = 0; i < len; i++)
outStrm << " " << attributes.getName(i)
<< "=\"" << attributes.getValue(i) << "\"";
outStrm << ">";

}
void PrettyPrint::endElement(const XMLCh* const name)
int i;
outStrm << "\t";
outStrm << "</" << name << ">";
indent--;
void PrettyPrint::characters(const XMLCh* const chars,
const unsigned int length)
for (unsigned int index = 0; index < length; index++)
switch (chars[index])
case chAmpersand :
outStrm << "&";
break;
case chOpenAngle :
outStrm << "<";
break;
case chCloseAngle:
outStrm << ">";
break;
case chDoubleQuote :
outStrm << """;
break;
default:
outStrm << chars[index];
break;
void PrettyPrint::processingInstruction(const XMLCh* const target,
const XMLCh* const data)
{
int i;
outStrm << "\t";
outStrm << "<?" << target;
if (data)
outStrm << " " << data;
outStrm << "?>\n";
Download the full source here: saxExample.zip.
What makes SAX important is not the idea behind the parsing—the essence of the event-driven
approach is the same as with expatpp or any other event-oriented parser—but the
standardization of the interfaces and classes that are used to communicate with the
application during the parsing process.
These classes and interfaces (abstract classes in C++) are divided thus:
● Classes implemented by the parser: Parser, AttributeList, Locator (optional class used to
track the location of an event)
● Classes implemented by the application: DocumentHandler (very important—this is the

one you will subclass in nearly all applications), ErrorHandler, DTDHandler,
EntityResolver.
● Standard SAX classes: InputSource, SAXException, SAXParseException and

HandlerBase. (This might be your starting point in many applications since it
inherits
from all the handlers, providing default behavior for all non-overriden methods.)
SAX was initially developed for Java, but it has been ported to other languages like Python, Perl
and C++. In C++, you have several representations and strategies to choose from when porting
the original SAX API. Since there is no common C++ SAX interface, the different
implementations might have some small, and not-so-small, differences.
In this article, we'll stick with IBM's xml4c2 SAX implementation. In order to write your own
XML modules, you will need to inherit from the application classes of the API and override the
methods you want to perform special actions.
Here is an overview of the handlers you will inherit from, a more complete documentation of
them can be found with the xml4c2 distribution.
Handler Description
DocumentHandler This is the main interface that SAX applications implement. It

defines methods to let the parser inform the application about
basic parsing events. In order to use it, the application should use a
class that implements DocumentHandler and then register an
instance with the parser, which will later feed it with the appropriate
events.
ErrorHandler This interface is provided in order to allow the SAX application

to implement customized error handling. It is registered using
the setErrorHandler method. The parser will then report all
errors and warnings through this interface.
DTDHandler Objects of a class that implement the DTDHandler interface receive

information about notations and unparsed entities. They are
registered using the parser's setDTDHandler method.
EntityResolver If the application needs to intercept any external entities before

(less their inclusion, it must make use of a class that implements this
commonly interface registering it via the setEntityResolver method. Any
used) external entities
(including the external DTD subset and external parameter entities)
will be reported through it.
Note that by making use of the multiple inheritance support of C++, a user-defined handler can
implement several of those functions (e.g., error handling and document handling).
// ...
class MyHandler : public DocumentHandler, ErrorHandler
// ...
parser = new NonValidatingSAXParser;
MyHandler* handler = new MyHandler();
parser->setDocumentHandler(handler);
parser->setErrorHandler(handler);
The XML part of your application will probably take the following form:
If you are familiar with patterns, you will see this is similar to a simple Builder Pattern, i.e., we
detach the XML responsibility from the client objects and delegate it to a collection of objects
(the parser itself and your handlers) that will know how to incrementally construct some
product. For a complete description of the Builder pattern see the book "Design Patterns" by
Gamma et al. ("The Gang of Four.")
Note that this product can be expressed as another object, a simple return value, or even as
some transformation of the attributes of your handler object.
This concludes the SAX review, and can serve as a starting point for your C++ XML modules.
Please review the documentation of your chosen implementation for further examples. IBM's
xml4c2 is recommended because of its comprehensive documentation.

Mean Stack T Unit1

Uploaded by

Copyright:

Available Formats

Mean Stack T Unit1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mean Stack T Unit1

Uploaded by

Copyright:

Available Formats

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

A website is a collection of static files(webpages) such as HTML pages,

HTTP (Hypertext Transfer Protocol)

● HTTP is a protocol that clients and servers use on the web to

HTTP Methods and Descriptions :

OPTIONS Request for communication options that are available on the

GET Request to retrieve information from server using a given URI.

HEAD Identical to GET except that it does not return a

DELETE Request for the Server to delete the resource.

GET Request POST Request

Get request is not secured because Post request is secured because

Get request can be bookmarked and Post request cannot be bookmarked.

General Difference between PUT and POST methods

● POST to a URL creates a child resource at a server defined URL while

Anatomy of an HTTP GET request

Anatomy of an HTTP POST request

Web Development can be Classified into Two Ways:

Front End Frameworks and Libraries

Backend Development Languages

Back End Frameworks and Technology

API: API is an abbreviation for Application Programming Interface which is a

Internet and World Wide Web

Difference between Internet and WWW

1 Internet is a global network

3 Internet is infrastructure. WWW is service on topof that

5 At some advanced level,to

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

10 Internet uses IP address. WWW uses HTTP.

Domain name service

o DNS stands for Domain Name System.

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

aero Airlines and aerospace companies

biz Businesses or firms

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

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

Protocols: HTTP, FTP, SMTP

o HTTP stands for HyperText Transfer Protocol.

Uniform Resource Locator (URL)

o FTP stands for File transfer protocol.

o It provides the sharing of files.

connection. Mechanism of FTP

There are two types of connections in FTP

o SMTP stands for Simple Mail Transfer Protocol.

HTML → to build webpage structure,

HTML + CSS + JAVASCRIPT = HTML5

HTML5 Changed Elements

1989 HTML Formed

2001 XHTML 1.1

HTML5 Browsers Support