Introduction to Web System (Unit-I)

Internet Overview- WWW - Web Protocols - Web Browsers and Web Servers - Web System
Architecture – URL - Domain Name – Client and Server-side Scripting.

Internet Overview
A network is a group of two or more computer systems (Multiple gadgets, additionally
called hosts), which are related through a couple of channels for the motive of sending and
receiving data (records/media) in a shared environment.
The Internet is a worldwide interconnected network of hundreds of thousands of computers
of various types that belong to multiple networks. However, It can be defined in many ways
as follows:
 Internet is a world-wide global system of interconnected computer networks.
 Internet uses the standard Internet Protocol (TCP/IP).
 Every computer in internet is identified by a unique IP address.
 IP Address is a unique set of numbers (such as [Link]) which identifies a
computer location.
 A special computer DNS (Domain Name Server) is used to give name to the IP
Address so that user can locate a computer by a name.
 For example, a DNS server will resolve a name [Link] to a
particular IP address to uniquely identify the computer on which this website is
hosted.
 Internet is accessible to every user all over the world.
Evolution
The concept of Internet was originated in 1969 and has undergone several technological &
Infrastructural changes as discussed below:
 The origin of Internet devised from the concept of Advanced Research Project
Agency Network (ARPANET).
 ARPANET was developed by United States Department of Defence.
 Basic purpose of ARPANET was to provide communication among the various
bodies of government.
 Initially, there were only four nodes, formally called Hosts.
 In 1972, the ARPANET spread over the globe with 23 nodes located at different
countries and thus became known as Internet.
 By the time, with invention of new technologies such as TCP/IP protocols, DNS,
WWW, browsers, scripting languages etc., Internet provided a medium to publish
and access information over the web.
Advantages
Internet covers almost every aspect of life, one can think of. Here, we will discuss some of
the advantages of Internet:
 Internet allows us to communicate with the people sitting at remote locations. There
are various apps available on the web that uses Internet as a medium for
communication. One can find various social networking sites such as:
o Facebook
o Twitter
o Yahoo
o Google+
o Flickr
o Orkut
 One can surf for any kind of information over the internet. Information regarding
various topics such as Technology, Health & Science, Social Studies, Geographical
Information, Information Technology, Products etc can be surfed with help of a
search engine.
 Apart from communication and source of information, internet also serves a medium
for entertainment. Following are the various modes for entertainment over internet.
o Online Television
o Online Games
o Songs
o Videos
o Social Networking Apps
 Internet allows us to use many services like:
o Internet Banking
o Matrimonial Services
o Online Shopping
o Online Ticket Booking
 o Online Bill Payment
o Data Sharing
o E-mail
 Internet provides concept of electronic commerce, that allows the business deals to
be conducted on electronic systems

Disadvantages

However, Internet has proved to be a powerful source of information in almost every field,
yet there exists many disadvantages discussed below:

 There are always chances to loose personal information such as name, address, credit
card number. Therefore, one should be very careful while sharing such information.
One should use credit cards only through authenticated sites.
 Another disadvantage is the Spamming. Spamming corresponds to the unwanted e-
mails in bulk. These e-mails serve no purpose and lead to obstruction of entire system.
 Virus can easily be spread to the computers connected to internet. Such virus attacks
may cause your system to crash or your important data may get deleted.
 There are various websites that do not provide the authenticated information. This
leads to misconception among many people.

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

Client and Server-side Scripting

Scripting means writing code that automates tasks or controls the behavior of web pages.
In websites, scripts can run on:

 The client-side (inside the user’s browser), or

 The server-side (on the web server before the page is sent to the user)

Client-side Scripting (Frontend Development Languages)

Client-side scripting refers to scripts that run on the user’s browser after the web page is
loaded.
These scripts handle user interactions, form validations, and dynamic content updates all
without reloading the page.
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.

Server-Side Scripting (Backend Development Languages)

Server-side scripting refers to scripts executed on the web server before the web page is sent
to the browser.
These scripts handle database operations, authentication, and dynamic content
generation.

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.
 [Link]: [Link] 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 [Link] 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.
 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).

Internet Protocols (Web protocols)

A web protocol is a set of rules and standards that define how data is transmitted and
exchanged over the Internet between computers, servers, and browsers.
In simple words:
Web protocols are like “languages” that computers use to communicate with each other
across the web.
They ensure that:
 Data is sent and received correctly
 Web pages load properly
 Emails, files, and media transfer securely
1. HTTP (HyperText Transfer Protocol)
2. HTTPS (HyperText Transfer Protocol Secure)
3. FTP (File Transfer Protocol)
4. SMTP (Simple Mail Transfer Protocol)
5. POP3 (Post Office Protocol v3)
6. IMAP (Internet Message Access Protocol)
7. TCP/IP (Transmission Control Protocol / Internet Protocol)
8. DNS (Domain Name System)
9. SSL/TLS (Secure Sockets Layer / Transport Layer Security)
10. WebSocket Protocol

Transmission Control Protocol (TCP)

TCP is a connection-oriented protocol and offers end-to-end packet delivery. It acts as back
bone for connection. It exhibits the following key features:
 Transmission Control Protocol (TCP) corresponds to the Transport Layer of OSI
Model.
 TCP is a reliable and connection-oriented protocol.
 TCP offers:
o Stream Data Transfer.
o Reliability.
o Efficient Flow Control
o Full-duplex operation.
o Multiplexing.
 TCP offers connection oriented end-to-end packet delivery.
 TCP ensures reliability by sequencing bytes with a forwarding acknowledgement
number that indicates to the destination the next byte the source expect to receive.
 It retransmits the bytes not acknowledged with in specified time period.
TCP Services
TCP offers following services to the processes at the application layer:
 Stream Delivery Service
 Sending and Receiving Buffers
 Bytes and Segments
 Full Duplex Service
 Connection Oriented Service
 Reliable Service

Stream Deliver Service

TCP protocol is stream oriented because it allows the sending process to send data as stream
of bytes and the receiving process to obtain data as stream of bytes.
Sending and Receiving Buffers
It may not be possible for sending and receiving process to produce and obtain data at same
speed, therefore, TCP needs buffers for storage at sending and receiving ends.
Bytes and Segments
The Transmission Control Protocol (TCP), at transport layer groups the bytes into a packet.
This packet is called segment. Before transmission of these packets, these segments are
encapsulated into an IP datagram.
Full Duplex Service
Transmitting the data in duplex mode means flow of data in both the directions at the same
time.
Connection Oriented Service
TCP offers connection-oriented service in the following manner:
1. TCP of process-1 informs TCP of process – 2 and gets its approval.
2. TCP of process – 1 and TCP of process – 2 and exchange data in both the two
directions.
3. After completing the data exchange, when buffers on both sides are empty, the two
TCP’s destroy their buffers.
Reliable Service
For sake of reliability, TCP uses acknowledgement mechanism.
Internet Protocol (IP)
Internet Protocol is connectionless and unreliable protocol. It ensures no guarantee of
successfully transmission of data.
In order to make it reliable, it must be paired with reliable protocol such as TCP at the
transport layer.
Internet protocol transmits the data in form of a datagram as shown in the following diagram:

Points to remember:
 The length of datagram is variable.
 The Datagram is divided into two parts: header and data.
  The length of header is 20 to 60 bytes.
 The header contains information for routing and delivery of the packet.
User Datagram Protocol (UDP)
Like IP, UDP is connectionless and unreliable protocol. It doesn’t require making a
connection with the host to exchange data. Since UDP is unreliable protocol, there is no
mechanism for ensuring that data sent is received.
UDP transmits the data in form of a datagram. The UDP datagram consists of five parts as
shown in the following diagram:

Points to remember:
 UDP is used by the application that typically transmit small amount of data at one
time.
 UDP provides protocol port used i.e. UDP message contains both source and
destination port number, that makes it possible for UDP software at the destination to
deliver the message to correct application program.
File Transfer Protocol (FTP)
FTP is used to copy files from one host to another. FTP offers the mechanism for the same in
following manner:
 FTP creates two processes such as Control Process and Data Transfer Process at both
ends i.e. at client as well as at server.
 FTP establishes two different connections: one is for data transfer and other is for
control information.
 Control connection is made between control processes while Data Connection is
made between<="" b="" style="box-sizing: border-box; margin: 0px; padding: 0px;
font: inherit;">
 FTP uses port 21 for the control connection and Port 20 for the data connection.
Trivial File Transfer Protocol (TFTP)
Trivial File Transfer Protocol is also used to transfer the files but it transfers the files
without authentication. Unlike FTP, TFTP does not separate control and data information.
Since there is no authentication exists, TFTP lacks in security features therefore it is not
recommended to use TFTP.
Key points
 TFTP makes use of UDP for data transport. Each TFTP message is carried in separate
UDP datagram.
 The first two bytes of a TFTP message specify the type of message.
 The TFTP session is initiated when a TFTP client sends a request to upload or
download a file.
 The request is sent from an ephemeral UDP port to the UDP port 69 of an TFTP
server.
Difference between FTP and TFTP

S.N. Parameter FTP TFTP

1 Operation Transferring Files Transferring Files

2 Authentication Yes No

3 Protocol TCP UDP

4 Ports 21 – Control, 20 – Data Port 3214, 69, 4012

5 Control and Data Separated Separated

6 Data Transfer Reliable Unreliable

Telnet
Telnet is a protocol used to log in to remote computer on the internet. There are a number of
Telnet clients having user friendly user interface. The following diagram shows a person is
logged in to computer A, and from there, he remote logged into computer B.

Hyper Text Transfer Protocol (HTTP)

HTTP is a communication protocol. It defines mechanism for communication between
browser and the web server. It is also called request and response protocol because the
communication between browser and server takes place in request and response pairs.
HTTP Request
HTTP request comprises of lines which contains:
 Request line
 Header Fields
 Message body
Key Points
 The first line i.e. the Request line specifies the request method i.e. Get or Post.
 The second line specifies the header which indicates the domain name of the server
from where [Link] is retrieved.
HTTP Response
Like HTTP request, HTTP response also has certain structure. HTTP response contains:
 Status line
 Headers
 Message body
Web Application Architecture
Generally, software architecture refers to the structure, layout, and main components of the
system and defines how system parts communicate and connect with each other. When we
talk about the architecture of a web application, we, first of all, describe the relations between
its high-level structural parts:
 client application that users interact with in a browser,
 web server that processes requests and provides responses,
 databases that store and access data,
 cloud services (for cloud-native solutions),
 APIs and third-party integrations, etc.

Web applications consist of multiple layers (tiers) responsible for specific functions.
Depending on the structure, an app may have several layers and represent a 2-tier
architecture, 3-tier architecture, or multi-tiered architecture, A typical web app has three
layers: Presentation, Application, and Data. The Presentation layer handles user interactions
on the client application. The Application layer contains the business logic and orchestrates
workflows. The Data layer manages data storage and management. The layers of a web app
architecture are interconnected to enable seamless operation.

Layers of web application high-level architecture

Presentation Layer: This layer is accessible to the client via a browser and it includes user
interface components and UI process components. As we have already discussed that these
UI components are built with HTML, CSS, and JavaScript (and its frameworks or library)
where each of them plays a different role in building the user interface.
Business Layer: It is also referred to as a Business Logic or Domain Logic or Application
Layer. It accepts the user’s request from the browser, processes it, and regulates the routes
through which the data will be accessed. The whole workflow is encoded in this layer. You
can take the example of booking a hotel on a website. A traveler will go through a sequence
of events to book the hotel room and the whole workflow will be taken care of by the
business logic.
Persistence Layer: It is also referred to as a storage or data access layer. This layer collects
all the data calls and provides access to the persistent storage of an application. The business
layer is closely attached to the persistence layer, so the logic knows which database to talk to
and the process of retrieving data becomes more optimized. A server and a database
management system software exist in data storage infrastructure which is used to
communicate with the database itself, applications, and user interfaces to retrieve data and
parse it. You can store the data in hardware servers or in the cloud.
URL
URL stands for Uniform Resource Locator
It is the address used to locate resources (like web pages, images, or files) on the Internet.
A URL tells your browser where a resource is located and how to access it.
Structure of a URL
A typical URL looks like this:
[Link]
Let’s break it down:

Part Description Example

Protocol (Scheme) Specifies the communication method https://

Domain Name / Host The address of the website or server [Link]

Port Number (optional) The connection point on the server :8080

Path Location of a specific page or file /products/[Link]

Query String (optional) Parameters or data passed to the server ?category=mobile

Fragment Identifier (optional) Points to a specific section on a page #reviews

URL example:
[Link]
Meaning:
 Protocol: https → Secure communication using SSL
 Domain: [Link] → Website address
 Path: /wiki/URL → Page about “URL”
 Query: ?lang=en → Language preference (English)
 Fragment: #Structure → Scroll to the “Structure” section on that page
URL types
1. Absolute URL
An absolute URL gives the complete address of a resource, including protocol and domain
name.
Example:
[Link]
Always includes full path
Can be accessed from anywhere
Used for external links or resources hosted on another domain
2. Relative URL
A relative URL does not include the full address — it’s relative to the current domain or
directory.
Example:
/products/book123
Depends on the base URL (e.g., if current site is [Link]
then this means [Link]
Used within websites to simplify internal navigation
Domain Name

A Domain Name is the human-readable address of a website that you type in a browser to
visit a webpage.
It’s the friendly name for a website’s IP address (like [Link]) that computers use to
identify each other on the internet.

In simple terms:
Domain Name = Website Name / Address you can remember easily
(e.g., [Link], [Link], [Link])

Need of Domain Names

Computers use IP addresses (numbers) to locate each other.

Humans find it hard to remember numbers like [Link].
So, domain names were created to make web addresses easy to remember.

🔹 Example:
[Link] → same as → [Link]

When you type [Link], your browser uses the DNS (Domain Name System) to
find the corresponding IP address and connect to that website.

Structure of a Domain Name

A domain name is made up of three main parts (read from right to left):

[Link]
Part Description Example
Top-Level Domain The last part of a domain name, usually representing .com, .org, .in,
(TLD) the domain category or country .edu
Second-Level The main name registered by the organization or
example
Domain (SLD) individual
Subdomain An optional prefix used to organize content www, blog,
 Part Description Example
shop

Together, they form:

[Link]
→ Subdomain = www
→ SLD = example
→ TLD = .com

Examples of Domain Names

Domain Name Meaning / Use

[Link] Global search engine (commercial .com TLD)
[Link] Non-profit organization site
[Link] Indian version of Amazon (country TLD .in)
[Link] Educational institution (TLD .edu)
[Link] Company in the UK (country code .uk)

Types of Domain Names

1. Top-Level Domains (TLDs)

These are the highest level in the DNS hierarchy.
Examples:
 Generic TLDs (gTLDs): .com, .org, .net, .edu, .gov
 Country Code TLDs (ccTLDs): .in (India), .us (USA), .uk (UK), .jp (Japan)
 Sponsored TLDs: .museum, .travel, .jobs — for specific organizations or industries.

2. Second-Level Domains (SLDs)

This is the main part of your domain — the unique name you register.
Example:
In [Link], the SLD is amazon.
In [Link], the SLD is wikipedia.

3. Subdomains
These divide your website into sections or services.
Examples:
 [Link] → the main website
 [Link] → Gmail
 [Link] → Google Maps
 [Link] → shopping section of a site

4. Country-Code Domains
Used by organizations or individuals in specific countries.
Examples:
 .in → India ([Link])
 .us → United States ([Link])
 .uk → United Kingdom ([Link])
 .jp → Japan ([Link])
How a Domain Name Works (Step-by-Step)
1. You type [Link] in your browser.
2. The browser asks the DNS server for the IP address of [Link].
3. DNS translates (resolves) it to something like [Link].
4. Browser connects to that IP, and the website loads.
This process is called DNS Resolution.

Domain Registration
Domains are registered through Domain Registrars (companies authorized by ICANN).
Popular registrars: GoDaddy, Namecheap, Google Domains, Hostinger, etc.
When you register a domain:
 You pay annually for ownership.
 You can manage DNS records, subdomains, and email hosting.