Web Technology (BCS502)

Unit – 1
Introduction
Web technology refers to the tools and techniques used to create and manage websites and web
applications. It encompasses various languages, frameworks, protocols, and software that make the
internet interactive and functional for users. Web technology allows for communication over the
internet between clients (users) and servers (data providers).

Key components of web technology include:

Web Browsers: Software like Google Chrome, Firefox, Safari, and Edge that users interact with to
access websites.

Web Servers: Computers that store, process, and deliver web pages to clients. Examples include
Apache, Nginx, and Microsoft IIS.

Web Pages: Documents on the web, typically built using HTML (Hypertext Markup Language), CSS
(Cascading Style Sheets), and JavaScript.

Protocols: These define how data is transferred over the web. Common protocols include HTTP
(Hypertext Transfer Protocol) and HTTPS (the secure version of HTTP).

Web Development Strategies

Web development can be broadly divided into frontend and backend development. Each has its
specific strategies to ensure that websites and web applications are effective, efficient, and user-
friendly.

Frontend development focuses on everything that the user interacts with directly in their browser.
The goal is to create visually appealing, responsive, and interactive user experiences. Also refer as
Client-Side of the application. Here are some key frontend strategies:

1. Responsive Web Design (RWD): Ensure that websites adapt to different screen sizes using
CSS media queries, flexible grids, and layouts to provide a seamless experience across
devices.
2. Performance Optimization: Minimize load times by using techniques like file minification,
lazy loading for images, and caching resources.
3. JavaScript Frameworks: Leverage modern frameworks like React.js, Vue.js, or Angular to
create interactive and dynamic web pages efficiently.
4. Cross-Browser Compatibility: Test and ensure that your website works smoothly across
various browsers, using tools like BrowserStack to avoid inconsistencies.

Backend development handles the server-side operations, databases, and business logic that power
the frontend. Backend strategies are focused on ensuring that the application runs smoothly,
efficiently, and securely. Also refer as Server-Side of the application. Here are some key frontend
strategies:

Microservices Architecture: Break down the backend into smaller, independent services that can be
developed, deployed, and scaled separately for greater flexibility and fault tolerance.
API-First Development: Design RESTful APIs services to provide data to the frontend, enabling better
separation of concerns and scalability.

Database Optimization: Use indexing, caching, and normalization to speed up database queries and
reduce load on the server.

Security: Implement robust authentication (OAuth, JWT), encrypt sensitive data, and sanitize inputs
to protect against SQL injection, XSS, and CSRF attacks.

Cloud Computing & Serverless: Use cloud platforms (AWS, Google Cloud) and serverless functions to
scale applications automatically and reduce infrastructure management.

History of Web

The World Wide Web was invented by Tim Berners-Lee in 1989 while working at CERN. It officially
went live in 1991 and introduced the concepts of HTML (Hypertext Markup Language), HTTP
(Hypertext Transfer Protocol), and the first web browser. This period is known as Web 1.0, where
websites were static, primarily displaying information without much user interaction.

History of Internet

Collection of interconnected networks.

The Internet started in the 1960s as a way for government researchers to share information.
Computers in the '60s were large and immobile and in order to make use of information stored in
any one computer, one had to either travel to the site of the computer or have magnetic computer
tapes sent through the conventional postal system.

The Soviet Union's launch of the Sputnik satellite spurred the U.S. Defense Department to consider
ways information could still be disseminated even after a nuclear attack. This eventually led to the
formation of the ARPANET (Advanced Research Projects Agency Network), the network that
ultimately evolved into what we now know as the Internet.

ARPANET was a great success but membership was limited to certain academic and research
organizations who had contracts with the Defense Department. In response to this, other networks
were created to provide information sharing.

January 1, 1983 is considered the official birthday of the Internet. Prior to this, the various computer
networks did not have a standard way to communicate with each other. A new communications
protocol was established called Transfer Control Protocol/Internetwork Protocol (TCP/IP). This
allowed different kinds of computers on different networks to "talk" to each other. ARPANET and the
Defense Data Network officially changed to the TCP/IP standard on January 1, 1983, hence the birth
of the Internet. All networks could now be connected by a universal language.

Protocols Governing the Web

The term "protocol governing the web" typically refers to the set of rules and standards that define
how data is transmitted and accessed over the internet. some protocols are:

TCP/IP (Transmission Control Protocol/Internet Protocol)

TCP: Responsible for establishing a connection between devices and ensuring the reliable
transmission of data. It breaks down large data sets into smaller packets and guarantees their
delivery by reassembling them in the correct order at the destination.
IP: Handles the addressing and routing of data packets between devices on different networks. It
ensures that packets are sent to the correct destination using IP addresses.

SMTP (Simple Mail Transfer Protocol) SMTP is the standard protocol for sending emails across the
internet. It defines how email clients and servers interact to send messages from one location to
another.

POP3 (Post Office Protocol version 3) POP3 is an email protocol used by local email clients to
retrieve emails from a remote server over a TCP/IP connection. It is designed to allow the client to
download email messages to the local device and usually removes them from the server.

• Emails are downloaded from the server and typically deleted after download.
• No synchronization of email states (i.e., marking an email as read on one device does not
update the status on another device).

IMAP (Internet Message Access Protocol) IMAP is a more advanced email protocol that allows email
clients to access messages on a remote mail server without downloading them. It keeps the emails
on the server and synchronizes email status across multiple devices (read, unread, etc.).

• Emails are stored on the server and remain accessible from multiple devices.
• Email states (read, unread, etc.) are synchronized across all devices.
• More suited for users who access their email from multiple devices (phones, computers,
etc.).
• Users can search messages directly on the server.

FTP (File Transfer Protocol) This protocol is used for transferring files from one system to the other.
This works on a client-server model. When a machine requests for file transfer from another
machine, the FTP sets up a connection between the two and authenticates each other using their ID
and Password. And, the desired file transfer takes place between the machines.

Hypertext Transfer Protocol (HTTP) HTTP is a communication protocol that enables systems to
communicate on the World Wide Web. With HTTP, a client will send a hypertext message request to
a web server asking for access to the resources needed to load a web page. The server hosting the
content will then respond and enable the client to load all the necessary text, images and videos
featured on the page.

HTTPS (HTTP Secure) HTTPS is an extension of HTTP that adds a layer of encryption via TLS
(Transport Layer Security) or SSL (Secure Sockets Layer). It ensures that the communication between
a user's browser and the web server is secure and private.

Simple Network Management Protocol (SNMP) SNMP is an application layer protocol that’s used to
collect management information from devices such as computers, routers, switchers, firewalls and
printers. Network monitoring platforms often use SNMP to monitor the performance and status of
devices throughout a network in real time.

Writing Web Projects

When creating a web project, there are several key steps that guide the process from planning to
deployment. Below are the essential steps involved in writing a web project:

1. Define the Purpose and Scope

 • Determine the Goal: Clarify the primary objective of the web project (e.g., a blog, e-
commerce site, portfolio, etc.).

• Identify the Target Audience: Know who will use the website and tailor the design and
content accordingly.

• Set Project Requirements: List the features and functionalities needed (e.g., user
authentication, database integration, APIs, etc.).

2. Plan the Project Structure

• Information Architecture (IA): Plan the layout of the website, defining how content will be
structured. Create a sitemap that outlines the main sections and pages.

• Wireframes and Mockups: Use wireframes to create a low-fidelity representation of the

website's layout. Optionally, create high-fidelity mockups to show what the final design will
look like.

• Technology Stack Selection: Choose the technologies you’ll use, including:

o Frontend: HTML, CSS, JavaScript, frameworks like React, Vue.js, or Angular.

o Backend: Server-side language (e.g., Node.js, Python, Ruby, PHP, java).

o Database: MySQL, MongoDB, PostgreSQL, etc.

o Version Control: Git and platforms like GitHub.

3. Set Up the Development Environment

• Install Required Tools:

o Code editor (e.g., Visual Studio Code, Sublime Text).

o Node.js for package management and JavaScript runtime (if needed).

o Web browser and development tools (e.g., Chrome DevTools).

• Set Up Version Control: Initialize a Git repository to track code changes.

• Framework and Library Setup: Install necessary libraries or frameworks using package
managers like npm (Node.js), pip (Python), etc.

4. Design and Develop the Frontend

• HTML: Structure the content of your web pages using semantic HTML elements (e.g.,
headers, paragraphs, forms).

• CSS: Style the website using CSS or preprocessors like Sass/SCSS. Focus on responsiveness,
creating layouts that adapt to different screen sizes (mobile, tablet, desktop).

• JavaScript: Add interactivity to the site (e.g., form validation, animations, etc.). Use modern
JavaScript (ES6+), and if necessary, leverage a frontend framework like React, Vue, or
Angular.

• Testing: Ensure the frontend works properly across different browsers (Chrome, Firefox,
Edge, Safari) and devices (desktop, mobile).
5. Backend Development

• Server-Side Logic: Develop the server-side logic using your chosen language (e.g., Node.js,
Python, Ruby, PHP). This might involve processing form submissions, handling file uploads, or
executing business logic.

• Database Setup:

o Choose the appropriate database (relational or NoSQL).

o Design database schemas and relationships between entities (tables, collections).

o Set up database connection and ORM (Object-Relational Mapping) if needed.

• APIs: If your application needs to interact with external services, build or consume APIs. You
may create RESTful APIs to manage data flow between the frontend and backend.

6. Authentication and Authorization

• User Authentication: Implement a user authentication system (e.g., sign up, log in, log out).
This can involve OAuth, JWT (JSON Web Tokens), or session-based authentication.

• Authorization: Define user roles and permissions to restrict access to certain parts of the
website (e.g., admin panel)

7. Testing and Debugging

• Unit Testing: Write tests for individual components of your application to ensure they work
as expected.

• Integration Testing: Test how different modules of your application work together.

• End-to-End Testing: Simulate real-world usage of the website to make sure everything works
from the user's perspective.

• Debugging: Use browser developer tools and logging to identify and fix any bugs or
performance issues.

8. Optimize for Performance

• Minify CSS and JavaScript: Reduce the file size of your assets to improve load times.

• Image Optimization: Compress images and use modern formats (e.g., WebP) to improve
loading speed.

• Lazy Loading: Load images, scripts, and other content only when they are needed.

• Content Delivery Network (CDN): Use a CDN to serve static files from servers closer to your
users, improving site performance.

9. Deploy the Web Project

• Select a Hosting Provider: Choose a hosting service based on your project’s needs (e.g.,
shared hosting, VPS, or cloud platforms like AWS, Google Cloud, Heroku).

• Set Up a Domain Name: Register a domain name for your website and link it to your hosting
provider.
 • Continuous Integration/Deployment (CI/CD): Set up automated deployment pipelines using
tools like Jenkins, Travis CI, or GitHub Actions.

• SSL/TLS Configuration: Secure your website with HTTPS by obtaining and installing an SSL
certificate

10. Monitor and Maintain

• Monitor Site Performance: Use tools like Google Analytics and performance monitoring
tools (e.g., New Relic, Pingdom) to track the website’s performance.

• Error Tracking: Implement error logging services (e.g., Sentry) to catch and fix issues in
production.

• Regular Updates: Ensure the website’s dependencies are up to date and address security
vulnerabilities by regularly applying patches.

• User Feedback: Gather feedback from users to improve the functionality and usability of the
site.

Connecting to the internet

Connecting to the internet involves establishing a link between a user’s device (computer,
smartphone, etc.) and the larger internet infrastructure through various connection methods. The
choice of connection type depends on the availability of technology, user requirements, and
environmental factors.

There are multiple ways to connect to the internet, each with its own underlying technology, speed,
and reliability. Below is an overview of internet connection methods:

1. Wireless (Wi-Fi) Connection Wi-Fi, or Wireless Fidelity, uses radio waves to transmit data
between a router and a device, allowing the device to access the internet without physical
cables. A router is connected to a modem, which in turn connects to the internet through an
Internet Service Provider (ISP). The router distributes the internet signal wirelessly to nearby
devices.
2. Mobile data uses protocols like LTE (Long Term Evolution) for 4G networks and 5G NR (New
Radio) for 5G networks. These networks operate on various frequency bands, and the signal
strength and speed depend on the distance from the cell tower, network traffic, and
technology used. Many cell phone and smartphone provides offers voice plan with internet
access Mobile internet connections Provide good speeds and allows you to access Internet.
3. Hotspots allow devices to access the internet through a shared connection. A mobile hotspot
is typically a smartphone or dedicated device that shares its mobile data connection with
other nearby devices via Wi-Fi. Public hotspots, on the other hand, provide internet access in
public places like cafes and airports.
4. Dial-up is an older method of connecting to the internet through a standard telephone line.
The user’s device communicates with an ISP’s modem over the phone line, establishing a
connection using audible frequency signals.
5. Broadband refers to high-speed internet connections that are always on and faster than dial-
up. It includes a variety of technologies such as DSL, cable, fiber, and satellite.
6. DSL (Digital Subscriber Line) DSL is a type of broadband connection that uses existing
telephone lines to provide internet access. Unlike dial-up, DSL operates on higher
 frequencies and allows the phone line to be used for both voice calls and internet
simultaneously.
7. Cable internet uses the same coaxial cables that deliver television services to provide
internet access. It is a widely used form of broadband that offers faster speeds than DSL,
especially in urban and suburban areas.

Introduction to Internet services and tools

Internet Services allows us to access huge amount of information such as text, graphics, sound and
software over the internet. Following diagram shows the four different categories of Internet
Services.

Communication Services

There are various Communication Services available that offer exchange of information with
individuals or groups. The following table gives a brief introduction to these services:
Web Services Web services allow exchange of information between applications on the web. Using
web services, applications can easily interact with each other.

World Wide Web (WWW) WWW is also known as W3. It offers a way to access documents spread
over the several servers over the internet. These documents may contain texts, graphics, audio,
video, hyperlinks. The hyperlinks allow the users to navigate between the documents.

Video Conferencing Video conferencing or Video teleconferencing is a method of communicating by

two-way video and audio transmission with help of telecommunication technologies.

Modes of Video Conferencing

Point-to-Point This mode of conferencing connects two locations only.

Multi-point This mode of conferencing connects more than two locations through Multi-point
Control Unit (MCU).

Introduction to Client-Server Computing

In client-server computing, the server provides services or resources, and the client requests them.
The server is often a more powerful system that manages data, applications, or processes, while the
client is usually a personal computer, mobile device, or terminal that interacts with the server.

• Client: A device (computer, tablet, smartphone) that sends requests to a server. It could be a
web browser requesting web pages, or an application needing data from a database.

• Server: A computer that responds to requests from clients. It handles tasks like data storage,
processing, or providing resources like files or web pages.

Components of Client-Server Computing

1. Client:

o Sends requests to the server.

o Executes some of the application logic locally (e.g., displaying results or processing
user inputs).

o Examples: Web browsers, mobile apps, email clients.

2. Server:

o Processes requests from clients and returns the necessary data or response.

o Stores data, applications, or web pages and ensures they are accessible to clients.

o Examples: Web servers, database servers, file servers.

3. Network:

o Connects the client and server, allowing them to communicate.

o Communication is usually done using standard protocols like HTTP (for web servers)
or FTP (for file transfers).

o The network can be a local area network (LAN) or the internet.

Introduction to HTML

HTML (Hypertext Markup Language) is the standard language for creating web pages. It describes
the structure of a webpage using elements enclosed in tags. These elements define how content
such as text, images, and links are displayed in the browser.
Basic Structure of an HTML Document

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Hello, World!</h1>

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

</body>

</html>

• <html>: The root element of the document.

• <head>: Contains metadata about the document, such as the title.
• <title>: Specifies the title of the webpage.
• <body>: Contains the main content of the webpage

HTML Tags and Elements

HTML elements consist of opening tags, content, and closing tags. Here are some common HTML
tags:

1. Headings (<h1> to <h6>) Defines headings in different sizes, where <h1> is the largest and <h6>
is the smallest.
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
2. Paragraph (<p>) Defines a paragraph.

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

3. <pre> tag in HTML is used to define preformatted text. Text within this tag is displayed exactly as
it is written, with all the whitespace (spaces, tabs, and line breaks) preserved.
<pre>
This text will preserve:
- Indentation
- Line breaks
- Multiple spaces
</pre>
4. <sub> Tag Subscript text appears half a character below the normal line, and is sometimes
rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.

5. <sup> Tag defines superscript text. Superscript text appears half a character above the normal
line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like
WWW[1].
6. Anchor (<a>) Creates a hyperlink to another webpage or a section within the same page.
<a href="https://www.google.com">Click here</a>

Attributes:

• href: The URL or link to navigate to.

• target: Defines where to open the linked document (_blank for a new tab, _self for the same
tab).
7. Italic (<i>) Italicizes the text
<i>This text is italic.</i>

8. Underline (<u>) Underlines the text.

<u>This text is underlined.</u>
9. Bold (<b>) Makes the text bold.
<b>This text is bold.</b>
10. Line Break (<br>)Inserts a line break. It is a self-closing tag.
<p>This is line one.<br>This is line two after the break.</p>

11. Horizontal Rule (<hr>) Inserts a horizontal line (often used as a thematic break).
<p>Text above the line.</p>
<hr>
<p>Text below the line.</p>

12. Images (<img>) Displays an image on the webpage. The src attribute specifies the image source,
and alt provides alternative text.
<img src="image.jpg" alt="Description of the image">

13. Division (<div>) Defines a block-level container or division in the document. Often used for
layout purposes and grouping elements together.
<div>
<h2>Title inside div</h2>
<p>This is a paragraph inside a div block.</p>
</div>
14. Span (<span>) Defines an inline container or group of text. It is mainly used for styling small parts
of text or grouping inline elements.
<p>This is a <span style="color: red;">highlighted text</span> inside a paragraph.</p>

Lists (<ul>, <ol>, <li>)

• Unordered List (<ul>): A list of items with bullet points.

• Ordered List (<ol>): A list of items with numbering.
• List Item (<li>): Defines an item within a list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ol>
 <li>First Item</li>
<li>Second Item</li>
</ol>

Tables (<table>, <tr>, <td>, <th>)

Defines a table structure for displaying data in rows and columns.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
• <table>: Defines the table.
• <tr>: Defines a row in the table.
• <th>: Defines a header cell in a table.
• <td>: Defines a regular cell in a table.

HTML Forms utilize the <form> element as a powerful tool to collect user input through a variety
of interactive controls.

These controls range from text fields, numeric inputs, email fields, password fields, to checkboxes,
radio buttons, and submit buttons. In essence, an HTML Form serves as a versatile container for
input elements, thereby enhancing user interaction.

<form>
<!--form elements-->
</form>
<label> Tag The <label> element is associated with a form control (like an input). It provides a user-
friendly way to display the purpose of an input field. The for attribute links the label to a specific
input by its id.

<input> Tag The <input> element is used to create various types of inputs, depending on the
type attribute. Different input types are used in this form:
• Text Input (type="text") This creates a single-line text box for user input. It's used to enter
names or other textual data.

• Number Input (type="number") This creates a field for entering numbers. It's used to capture
numeric data like phone numbers.
 • Email Input (type="email") This input is used for collecting email addresses. Browsers may
validate that the entered text is in a valid email format (e.g., [email protected]).

• Password(type=”password”) The password input type in HTML creates a text field where the
entered characters are masked (hidden), typically with dots or asterisks, to protect sensitive
information like passwords.

• Radio Button (type="radio") Radio buttons allow users to select one option from a set. Since
both buttons share the same name ("gender"), only one option can be selected at a time.

• Checkbox (type="checkbox") Checkboxes allow users to select one or more options. Each
checkbox is independent, so multiple boxes can be checked.

• File Input (type="file") This creates a button to upload a file from the user’s computer. It
opens the file selection dialog for the user to choose a file.

<select> Tag The <select> element creates a dropdown list where users can select one option from a
set of predefined options.

<option>: Represents each item in the dropdown. The value attribute is the value sent when the
form is submitted.

<button> Tag The <button> element creates a clickable button.

• Submit Button (type="submit") This button submits the form data to the server or the action
specified by the form (if any).

• Reset Button (type="reset") The reset button clears all input fields in the form, resetting
them to their default values.

Attributes:

• name: This attribute is important for identifying the input data when the form is submitted.
The name attribute defines the key of the data sent in the HTTP request.

• When the form is submitted, the value entered in the text input will be associated with the
key "name".

• id: This is used to uniquely identify an element on the page. It's also used to link inputs with
their corresponding labels using the for attribute of the <label> tag.

• value: For inputs like radio buttons and checkboxes, the value attribute specifies the data
that will be sent to the server when the user selects that option.

Example:

<form>
<label for="name">Name</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="phone">Phone</label>
<input type="number" id="phone" name="phone">
<br>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="gender">Gender</label>
<input type="radio" id="gender" name="gender" value="male">Male
<input type="radio" id="gender" name="gender" value="female">Female
<br>
<br>
<label>skills</label>
<input type="checkbox" value="java">JAVA
<input type="checkbox" value="C++">C++
<input type="checkbox" value="python">PYTHON
<br>
<br>
<label>Branch</label>
<select name="branch">
<option value="CSE">CSE</option>
<option value="AIML">AIML</option>
<option value="IT">IT</option>
</select>
<br>
<br>
<label>Upload doc</label>
<input type="file">
 <br>
<br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>

Frames (<iframe>) Embeds another webpage or media within the current page.
HTML frames are used to divide your browser window into multiple sections where each section can
load a separate HTML document independently. A collection of frames in the browser window is
known as a frameset. The window is divided into frames in a similar way the tables are organized:
into rows and columns.

<html>

<head>

<title> iframe </title>

</head>

<body>

<h1>The iframe element</h1>

<iframe src="https://www.example.com" width="600" height="400"></iframe>

</body>

</html>

Introduction to XML (Extensible Markup Language)

XML stands for Extensible Markup Language and is a text-based markup language derived from
Standard Generalized Markup Language (SGML).

XML is a software- and hardware-independent tool for storing and transporting data.

• Xml is a markup language much like HTML

• XML was designed to store and transport data

• XML was designed to be self-descriptive

• XML is a W3C Recommendation

XML tags identify the data and are used to store and organize the data, rather than specifying how
to display it like HTML tags, which are used to display the data. XML is not going to replace HTML
in the near future, but it introduces new possibilities by adopting many successful features of
HTML.
There are three important characteristics of XML that make it useful in a variety of systems and
solutions:

XML is extensible: XML allows you to create your own self-descriptive tags, or language, that suits
your application.

XML carries the data, does not present it: XML allows you to store the data irrespective of how it
will be presented.

XML is a public standard: XML was developed by an organization called the World Wide Web
Consortium (W3C) and is available as an open standard.

Following is a complete XML document:

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

<company>

<firstname>vivek</firstname>

<lastname>jaiswal</lastname>

<email>[email protected]</email>

</company>

XML Declaration

The XML document can optionally have an XML declaration. It is written as below

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

Where version is the XML version and encoding specifies the character encoding used in the
document.
Root element: An XML document can have only one root element. For example, following is not a
correct XML document, because both the x and y elements occur at the top level without a root
element:

<x>….</x>

<y>….</y>

The following example shows a correctly formed XML document:

<root>

<x>….</x>

<y>….</y>

</root>

Case sensitivity: The names of XML-elements are case-sensitive. That means the name of the start
and the end elements need to be exactly in the same case. For example <contact> is different from
<Contact>.

Attributes An attribute specifies a single property for the element, using a name/value pair. An XML-
element can have one or more attributes.

<book category=”cooking”> abc </book>

Same attribute cannot have two values in a syntax.

<a b=”x” c=”y” b=”z”> </a>

Xml Tree Structure

An Example XML Document

XML documents are formed as element trees. An XML tree starts at a root element and branches
from the root to child elements. All elements can have sub elements (child elements)
XML Namespaces
An XML Namespace is a method in XML used to distinguish between element and attribute names
that may be identical but originate from different XML. It helps avoid naming conflicts when
combining XML documents from various sources or when XML data is used in different contexts.

In an XML document, namespaces are declared using the xmlns attribute within an element. The
elements and attributes that belong to the namespace can be referenced using the defined prefix.

The namespace declaration has the following syntax. xmlns:prefix="URI".

• Uniqueness: XML namespaces provide unique identifiers for elements and attributes to
prevent naming conflicts.
 • URI (Uniform Resource Identifier): The namespace is identified by a URI, which serves as a
unique reference but does not need to be a resolvable link.

• Prefixes: Namespaces are often associated with a prefix to differentiate between elements
or attributes from different namespaces.

XML DTD: (Document Type Definition) is used to define the structure, rules, and
constraints for XML documents. It helps ensure that the data within an XML document is consistent
and valid according to predefined rules.

Types of DTD:

Internal DTD: Defined within the XML document itself.

<?xml version="1.0"?>

<!DOCTYPE note [

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

]>

<note>

<to>John</to>

<from>Jane</from>

<heading>Reminder</heading>

<body>Don't forget the meeting tomorrow!</body>

</note>

External DTD: Defined in a separate file and referenced from the XML document. An external DTD is
defined in a separate .dtd file and linked from the XML document using the SYSTEM or PUBLIC
keyword.

note.dtd (the external DTD file):

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

XML document:
<?xml version="1.0"?>

<!DOCTYPE note SYSTEM "note.dtd">

<note>

<to>John</to>

<from>Jane</from>

<heading>Reminder</heading>

<body>Don't forget the meeting tomorrow!</body>

</note>

XML Schema (XSD) for the XML: XML Schemas provide a more powerful and flexible
alternative to DTDs. They define the structure of an XML document using XML syntax itself. XML
Schema Definition (XSD) can specify the data types, number of elements, and constraints on data
within an XML document.

• XSD supports data types (e.g., integers, strings, etc.) and namespaces.

• It allows for more precise validation and is extensible and reusable.

Xml document
<company>

<employee>

<firstname>vivek</firstname>

<lastname>jaiswal</lastname>

<email>[email protected]</email>

<employee>

</company>

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

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="company">

<xs:complexType>

<xs:sequence>

<xs:element name="employee">

<xs:complexType>

<xs:sequence>
 <xs:element name="firstname" type="xs:string"/>

<xs:element name="lastname" type="xs:string"/>

<xs:element name="email" type="xs:string"/>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

• <xs:element name="company">: Defines the root element <company>.

• <xs:complexType>: Indicates that <company> contains a complex structure.

• <xs:sequence>: Defines that the elements within appear in the given order.

• <xs:element name="employee">: Specifies that <employee> is an element within

<company>, containing other elements.

• type="xs:string": Specifies that the content of the <firstname>, <lastname>, and <email>
elements must be of type string.

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 provides a way to access or modify data in XML document.

Types of XML Parsers

These are the two main types of XML Parsers:

1. DOM

2. SAX

XML DOM (Document Object Model)

The XML DOM (Document Object Model) is a programming interface that allows developers to
interact with and manipulate an XML document as a structured tree of objects. It represents the
entire XML document as a hierarchy of nodes (elements, attributes, and text), enabling easy access
and modification of the document's content.

Key Features of XML DOM:

 1. Tree Structure: XML DOM represents the XML document as a tree, where each element is a
node, and elements can have child nodes (sub-elements) and attributes.
2. Traversal: DOM allows for traversing the XML tree and accessing specific nodes, elements, or
attributes.
3. Modification: Using DOM, elements, attributes, and content within the XML document can
be added, updated, or deleted.

Common DOM Methods:

• getDocumentElement(): Returns the root element of the document.

Element root = document.getDocumentElement(); // Gets the root element of the XML

document.

• getElementsByTagName(tagname): Returns a NodeList of elements with the specified tag

name.

NodeList books = document.getElementsByTagName("book"); // Gets all "book" elements in

the document.

• getAttribute(name): Returns the value of the specified attribute.

String id = element.getAttribute("id"); // Retrieves the value of the "id" attribute from the
element.

• createElement(tagname): Creates a new element with the given tag name.

Element newBook = document.createElement("book"); // Creates a new "book" element.

• appendChild(node): Adds a new child node to an existing node.

root.appendChild(newBook); // Adds the newly created "book" element as a child to the

root.

Example:

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

<college>

<Branch category=”CS”>

<Students>100</ Students>

<Hod>xyz</Hod>

</ Branch>

<Branch category=”EC”>

<Students>50</ Students>

<Hod>abc</Hod>

</ Branch>

</college>

Example : How to get value of an XML element

t = xmlDoc.getElementsByTagName(“Students”) [0]. childNodes[0].nodeValue;

SAX (Simple API for XML) Processor: SAX (Simple API for XML) is a popular event-driven
API for parsing XML documents in a sequential, forward-only manner. Unlike DOM (Document
Object Model) parsing, which loads the entire XML document into memory and creates a tree
representation, SAX is a more memory-efficient and faster alternative, especially for large XML files,
as it processes the document one event at a time without storing the entire document in memory.

How SAX Works

SAX follows an event-driven model where the parser generates events as it reads the XML
document. These events include:
• Start of an element: Triggered when the parser encounters an opening tag.
• End of an element: Triggered when the parser encounters a closing tag.
• Character data: Triggered when the parser reads the data inside an element.
• Processing instructions: Triggered for special XML instructions.
• Comments: Triggered for XML comments if enabled.
The user writes event handlers (callbacks) to process these events, making SAX parsing more
flexible and customizable.
SAX Parsing Model:
1. Sequential Access: SAX parses the XML document line by line, starting from the
top, and generates an event each time it encounters a meaningful part of the document
(such as a tag, attribute, or text).
2. Event-Driven: As the parser reads through the document, it calls methods (events) in
a user-defined handler, which processes the XML data.
3. No In-Memory Tree: SAX does not build a complete tree structure of the XML
document in memory, making it memory-efficient. Instead, the application only
processes data as it is read, which is helpful for large or streaming XML documents.
XML Document (example.xml):

<?xml version="1.0"?>

<library>

<book>

<title>Effective Java</title>

<author>Joshua Bloch</author>

</book>

<book>

<title>Clean Code</title>
 <author>Robert C. Martin</author>

</book>

</library>

Java SAX Parser Example:

public class SAXExample {

public static void main(String[] args) {

try {

// Create a SAXParserFactory instance

SAXParserFactory factory = SAXParserFactory.newInstance();

// Create a SAXParser

SAXParser saxParser = factory.newSAXParser();

// Define the custom handler

DefaultHandler handler = new DefaultHandler() {

// Triggered when an opening tag is encountered

public void startElement(String uri, String localName, String qName, Attributes attributes)
throws SAXException {

System.out.println("Start Element: " + qName); }

// Triggered when text between tags is encountered

public void characters(char[] ch, int start, int length) throws SAXException {

System.out.println("Character Data: " + new String(ch, start, length)); }

// Triggered when a closing tag is encountered

public void endElement(String uri, String localName, String qName) throws SAXException{

System.out.println("End Element: " + qName); }}

// Parse the XML file

saxParser.parse("example.xml", handler);

} catch (Exception e) {

e.printStackTrace(); }}}

Output

Start Element: library

Start Element: book

Start Element: title

Character Data: Effective Java

End Element: title

Start Element: author

Character Data: Joshua Bloch

End Element: author

End Element: book

Start Element: book

Start Element: title

Character Data: Clean Code

End Element: title

Start Element: author

Character Data: Robert C. Martin

End Element: author

End Element: book

End Element: library