We are on a mission to address the digital

skills gap for 10 Million+ young professionals,

train and empower them to forge a career
path into future tech
MCA4201- FULL STACK WEB DEVELOPMENT
FUNDAMENTALS OF WEB DEVELOPMENT
 Introduction to Web Design

Agenda

• Computer Network Basics

• Introduction to the Internet

• History and Evolution of the Web

• Web Browsers and Web Standards

• URI Vs. URN Vs. URL

• Web Communication Protocols

• Web System Architecture

• Ports & DNS in Web Development

• Client-Side vs. Server-Side Scripting

3 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

Computer Network
Basics
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

4 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Introduction

• A computer network is a network of devices like computers, servers, routers, switches, or other
related hardware’s that are interlinked with one another to communicate and share resources,
exchange data, and shared services.

• Computer networks work by transmitting data between devices in the form of small packets.
These packets travel across the network through various mediums, such as:
- Wired connections (like Ethernet cables)
- Wireless connections (like Wi-Fi, Bluetooth, or cellular networks)
5 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Computer Network Basics

Examples

In Everyday Life:

• A home network that connects your laptop, smartphone, and smart TV.

• Office networks that allow employees to collaborate and share files.

• The internet itself — a massive network connecting billions of devices globally.

Computer networks have revolutionized how we communicate, work, and live, forming the foundation of

modern information technology.

6 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Examples

• A university’s departments, like BBA, B.COM, B.Tech, BCA, BA, and B.SC, are interconnected through a

network. These departments are interconnected with each other through a network. This

interconnection of computers is called a computer network.

7 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Benefits

• Information sharing: Authorized users can use other computers on the network to access and share

information and data. This could include special group projects, databases, etc.

• Hardware sharing: One device connected to a network, such as a printer or scanner, can be shared by

many users.

• Software sharing: Instead of purchasing and installing a software program on each computer, it can be

installed on the server. All of the users can then access the program from a single location.

• Collaborative environment: Users can work together on group projects by combining the power and

capabilities of diverse equipment.

8 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Types of Computer Networks

• Computer networks can be categorized based on various factors such as geographical scope,

architecture, and the medium of transmission. Each type serves specific purposes, depending on the

scale and nature of the operation.

9 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Types of Computer Networks

Local Area network(LAN)

• A Local Area Network (LAN) is a network that connects computers and devices within a limited

geographical area such as a single building, office, or campus.

• LANs are typically used to share resources like printers, files, and internet connections among

multiple devices.

10 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Types of Computer Networks

Features of LAN

• High Data Transfer Speed: LANs offer high data transfer rates, typically ranging from 100 Mbps to 10
Gbps.

• Low Latency: Due to the close proximity of connected devices, LANs exhibit low latency which means
data travels quickly between nodes.

• Limited Range: They generally cover small geographic areas, making them ideal for localized
networking needs.

• Wired or Wireless Connectivity: LANs can function using Ethernet cables (wired) or Wi-Fi (wireless)
connections.

• Centralized Administration: Easier to administer and manage resources through local servers.

11 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Types of Computer Networks

Metropolitan Area Network (MAN)

• A Metropolitan Area Network (MAN) spans a larger geographical area than a LAN, covering a city or a

large campus. MANs are designed to extend and connect multiple LANs within a specific region.

12 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Types of Computer Networks

Features of MAN

• Moderate Range: Connects multiple LANs over distances up to 50 kilometers.

• High-Capacity Backbone: Utilizes high-capacity transmission media like fiber optics.

• Enhanced Performance: Provides higher data transfer speeds compared to WAN.

• Integration: Can integrate with other MANs and WANs for broader connectivity.

13 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Types of Computer Networks

Wide Area Network (WAN)

• A Wide Area Network (WAN) covers a broad geographic area, often a country or even globally.

• WANs are designed to connect multiple LANs and MANs, enabling long-distance communication and

resource sharing

14 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Types of Computer Networks

Features of WAN

• Extensive Coverage: Can connect devices and networks across vast distances.

• Diverse Connectivity: Utilizes various transmission media, including satellites, leased lines, and public

networks.

• Complex Infrastructure: Involves a more complex and hierarchical network structure.

• Lower Data Transfer Speed: Generally offers lower data transfer speeds compared to LANs and MANs

due to longer distances and multiple traversed networks.

15 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components

The basic components of a computer network can be

classified into two types:

1) Hardware components :

• The physical equipment needed to create a network is

known as the hardware components of a computer network.

2) Software components :

• The applications needed to execute on the hardware

devices are the software components of a computer
network.

16 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

Hardware Components

17 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

Hardware Components

• Hub – electronic device (with a number of ports) used in a LAN to link groups of computers

• Switch - networking device that connects devices on a computer network by using packet switching to
receive, process, and forward data

• Repeaters (also called amplifiers) – electronic devices that receive signals and amplify and send them
along the network

• Routers - electronic devices used to ensure messages are sent to their intended destinations

• Gateway – consists of hardware and/or software that allows communications between dissimilar
networks

• Bridge – consists of hardware and/or software that allows communication between two similar networks

18 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

HUB

• The original Ethernet LANs relied on certain physical characteristics of the cable carrying the network
data (usually coaxial cable).
• New Ethernet technologies introduced new cable types that we unable to fulfill the original physical
requirements.
• New devices - hubs - were introduced to simulate those characteristics.
• Simply put, the hub's major function is to replicate data it receives from one device attached to it to all
others.

19 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

REPEATERS

• In networking, electrical signals weaken due to a wire’s resistance, limiting cable length.
• A repeater overcomes this by amplifying and retransmitting signals between two cable segments,
enabling longer connections.
• Any electrical signal reaching the repeater from one segment, will be amplified and retransmitted to the
other segment.

An illustration of a repeater at work

The electrical signal entering the repeater at one end is weakened.
The repeater amplifies the electrical signals and resends the data.

20 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

SWITCH

• Switch is a network device that connects other devices to Ethernet networks through twisted pair
cables.
• It uses packet switching technique to receive, store and forward data packets on the network.
• The switch maintains a list of network addresses of all the devices connected to it.

21 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

ROUTERS

• Routers connect two or more networks and forward data packets between them.
• When data arrives from one of the segments, the router decides, according to it's routing table, to
which segment to forward that data.

22 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

GATEWAY

• "Gateway" is a term that was once used to refer to a routing device. Today, in the TCP/IP world, the
term "router" is used to describe such a device.
• The term gateway now refers to special-purpose devices, that perform protocol conversions.
• Gateways implement application layer conversions of information received from various protocols.

• Examples of gateways found on today's markets are:

1) VocalTec Gateway: A gateway that converts human speech traveling on analog phone lines into local
area network protocol data, and visa-versa.
2) RadVision Gateway: Converts video from digital phone lines into local area network protocol data,
and visa-versa.

23 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

BRIDGE

• Bridge is used to divide a large network into smaller segments.

• A Bridge can connect two different types of media or network architecture, but it cannot connect two
different types of network layer protocol such as TCP/IP or IPX.
• Bridge requires the same network layer protocol in all segments.

24 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Hardware

Feature Router Bridge Gateway

Directs traffic between Translates between
Function Connects network segments
networks protocols
Layer Network (Layer 3) Data Link (Layer 2) Multiple layers (4-7)

Addressing IP addresses MAC addresses Depends on protocol

Connecting different
Connecting different protocols (e.g., TCP/IP to
Use Case Extending a LAN
networks (e.g., LAN to WAN) Voice over Internet Protocol
(VoIP)

Home router connecting to Network bridge connecting VoIP gateway for converting
Example
the internet wired and wireless LANs phone calls

25 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Software

The software layer ensures communication and data transfer happen smoothly and securely:

• Operating Systems: Network Operating Systems (NOS) like Windows Server or Linux handle network
requests and management.

• Network Protocols: A set of rules that governs data communication. Common protocols include:

- TCP/IP: For data transmission across the internet.

[Transmission Control Protocol/Internet Protocol]

- HTTP/HTTPS: For accessing web pages.

[HyperText Transfer Protocol / HTTP Secure]

- FTP: For file transfers. [File Transfer Protocol]

- SMTP: For sending emails. [Simple Mail Transfer Protocol]

26 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Basic Components - Software

• Firewall and Security Software: Protects the network from unauthorized access and cyberattacks.

• DNS (Domain Name System): Translates human-readable domain names (e.g., google.com) into IP
addresses.

27 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

How are networks categorized?

Networks are typically classified based on three key properties:

1. Topology – The physical or logical arrangement of network devices and connections.

2. Protocol – The set of rules governing data transmission and communication.

3. Architecture – The structural framework that defines how network components interact and operate.

28 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Categorization - Network Topologies

Network Topology (or layout) – refers to the way computers and

peripherals are configured to form networks.

• Bus topology – all computers are linked by a single line of cable

• Star topology – multiple computers and peripheral devices are

linked to a central computer, called a host

• Ring topology – each computer or workstation is connected to two

other computers, with the entire network forming a circle

• Hybrid topology – combine network layout types to meet their

needs

29 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Comparison of Network Topologies

Feature Bus Star Ring Hybrid

Single backbone Central hub with Combination of
Structure Circular connection
cable connected nodes multiple topologies
Cost Low Moderate Moderate High
Low (single failure High (hub failure Moderate (one failure Very High (backup
Reliability
disrupts all) affects all) can disrupt) connections)

Slows down with more Optimized for

Performance High Moderate
devices performance

Scalability Limited Easy to expand Difficult Highly scalable

30 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Categorization - Network / Communication Protocols

• A protocol is simply an agreed-on set of rules and procedures for transmitting data between two or

more devices.

• Features determined by the protocol are:

- How the sending device indicates it has finished sending the message.

- How the receiving device indicates it has received the message.

- The type of error checking to be used.

31 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Categorization - Network / Communication Protocols

• Most networks use Ethernet, but some may use IBM’s Token Ring protocol.

• On the Internet, the major protocol is TCP/IP (Transmission Control Protocol/Internet Protocol), which

ensures reliable data transmission across networks.

• TCP manages data flow and error checking, while IP handles addressing and routing.

• Other protocols, like UDP (User Datagram Protocol), provide faster, connectionless communication.

• Additionally, wireless networks often use Wi-Fi, which follows IEEE 802.11 standards to enable

seamless connectivity.

32 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Categorization – Network Architecture

• Network architecture – refers to the way a network is designed and built. The two major types are:

1) Peer-to-peer architecture – Computers connect with each other in a workgroup to share files,

printers, and Internet access. This is used to connect a small number of computers.

33 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Categorization – Network Architecture

2) Client/server architecture – sends information from a client computer to a server, which then

relays the information back to the client computer, or to other computers on the network.

34 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

OSI Model

• The Open Systems Interconnection (OSI) model is a standard "reference model" created by the

International Organization for Standardization (ISO) to describe how the different software and

hardware components involved in a network communication should divide labor and interact with

one another.

• In its most basic form, it divides network architecture into seven layers which, from top to bottom,

are the Application, Presentation, Session, Transport, Network, Data-Link, and Physical Layers.

• It is therefore often referred to as the OSI Seven Layer Model.

35 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

OSI Model's 7 Layers

Application to Application
APPLICATION APPLICATION

Application to Application
PRESENTATION PRESENTATION

Application to Application
SESSION SESSION

TRANSPORT Process to Process TRANSPORT

NETWORK Source to Destination NETWORK

Router
Source to Destination

Hop to Hop
DATA LINK Switch DATA LINK
Hop to Hop

Hub and Repeater

PHYSICAL PHYSICAL
Physical Medium

36 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Host and Media layer

37 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

Data, Protocol & Activities

OSI Layers TCP/IP Suit Activities

Application Application To allow access to network resources

Telnet, FTP, SMTP, HTTP, DNS, SNMP, Specific address etc…

To Translate, encrypt, and compress

Presentation Presentation data

Session To establish, manage, and terminate

Session session

Transport To Provide reliable process-to-process

Transport SCTP, TCP, UDP, Sockets and Ports address Message delivery and error recovery

Network To move packets from source to

Network IP, ARP/RARP, ICMP, IGMP, Logical address destination; to provide internetworking

Data Link To organize bits into frames; to provide

Data Link IEEE 802 Standards, TR, FDDI, PPP, Physical address Hop-to-hop delivery

Physical To Transmit bits over a medium; to provide

Physical Medium, Coax, Fiber, 10base, Wireless Mechanical and electrical specifications
38 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Computer Network Basics

TCP/IP

• TCP/IP (Transmission Control Protocol/ Internet Protocol) is the basic communication language

or protocol of the Internet. Developed by DARPA (Defense Advanced Research Projects Agency)

for the internet.

• IP defines how computers can get data to each other over a routed, interconnected set of

networks.

• TCP defines how applications can create reliable channels of communication across such a

network.

• Basically, IP defines addressing and routing, while TCP defines how to have a conversation

across the link without garbling or losing data.

39 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Computer Network Basics

TCP/IP Vs OSI

40 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Computer Network Basics

OSI Vs TCP/IP

Feature OSI Model TCP/IP Model

Layers 7 Layers 4 Layers
Development Theoretical model by ISO Practical model by DARPA

Usage Conceptual framework Used in real-world networking

Flexibility Strict layer separation More flexible

Reliability Defines error detection separately Integrated into protocols like TCP

Implementation Not widely implemented Forms the basis of the internet

Summary:
OSI Model → Good for learning and standardization.
TCP/IP Model → Practical, widely used for networking (e.g., Internet, LAN, WAN).
In real-world networking, TCP/IP is dominant, while OSI is mainly used for educational and theoretical
purposes.
41 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Introduction to the
Internet
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

42 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Introduction to the Internet

What is Internet?

• The Internet is a global, interconnected computer network in which every computer connected to it
can exchange data with any other connected computer. It is the backbone of modern digital
communication, enabling services such as web browsing, email, social media, and online transactions.

• We can exchange Data graphics, sound, software, text and etc., to people through a variety of
services and tools for communications.

43 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Introduction to the Internet

Origin of Internet

ARPANET

• The origins of the Internet date back to research commissioned by the United States government in the
1960s to build robust, fault-tolerant communication via computer networks.

• Research Project of MIT funded by DARPA (Defense Advanced Research Projects Agency)

Goal

• To allow multiple users to send and receive information simultaneously over the same
communication paths.

History of Internet: https://en.wikipedia.org/wiki/History_of_the_Internet

44 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Introduction to the Internet

Internet Timeline

45 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Introduction to the Internet

Internet Timeline

Internet Timeline

Why after WWW the

internet usage is
increased in
? exponential manner?

46 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Introduction to the Internet

What is Meant by WWW?

WWW?

47 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Introduction to the Internet

What is Meant by World Wide Web?

• World Wide Web (WWW): It is a kind of Internet based Service.

• It allows users to locate and view multimedia-based documents on almost any subject over the
Internet.

• In 1989, Tim Berners-Lee of CERN( the European organization for Nuclear Research) to develop a
technology for sharing information via hyperlinked text documents.

• He developed HTML, URLs, and HTTP.

48 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

History and Evolution of
the Web
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

49 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 History and Evolution of the Web

Evolution of Web

50 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 History and Evolution of the Web

Web 1.0 : Static Web (1990-2000)

• 1990s & early 2000s.

• “read-only web.”

• Limited interaction between sites and web users.

• Supports only static pages.

• The first shopping cart applications, which most e-commerce website owners use in some shape or form,
basically fall under the category of Web 1.0.

• The goal was to present products to potential customers, much like a catalog or a brochure.

51 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 History and Evolution of the Web

Web 2.0: Dynamic web (2000 – 2010)

• “read-write” web

• The change from static web pages to dynamic or user-generated content and the growth of social
media.

• It has the ability to contribute content and interact with other web users.

• It allows user to use the web as platform to create collaborative, community based sites like social
networking sites, blogs, etc

• Few remarkable developments of Web 2.0 are Twitter, YouTube, eZineArticles, Flickr and Facebook.

• It introduced Rich Internet Applications(RIAs).

• Added rich features & functionality.

• Provided Look & Feel and Responsiveness

52 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 History and Evolution of the Web

Web 3.0: The semantic executing web (2010 – 2020)

• “read-write-execute” web

• It supports interactive services and machine-to-machine interactions.

• The Semantic Web is a developing extension of the World Wide Web in which the semantics of web
information and services are defined, allowing the web to comprehend and respond to requests from
humans and computers to use web content.

• A web service is a software system designed to support computer-to-computer interaction over the
Internet.

• By combining a semantic markup and web services, Web 3.0 promises the potential for applications that
can speak to each other directly, and for broader searches for information through simpler interfaces.

53 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 History and Evolution of the Web

Web 2.0 to Web 3. 0

54 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 History and Evolution of the Web

Web 4.0: IOT (2020 – 2030)

• Intelligence + Self Learning + Self Organizing Web

• Web 4.0 is also known as the symbiotic web.

• The goal of the symbiotic web is the interaction between humans and machines in symbiosis (a
mutually beneficial relationship between different people or groups).

• The line between human and device will blur.

• Web 4.0 will interact with users in the same way that humans communicate with each other.

• Web 4.0 environment will be an “always on,” connected world.

55 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 History and Evolution of the Web

Web 5.0: Open, Linked, and Intelligent Web = Emotional Web (2030 – 2040)

• read-write-execution-concurrency web.

• Web 5.0 still is in developing mode

• Web 5.0 will be about the (emotional) interaction between humans and computers.

• The interaction will become a daily habit for a lot of people based on neurotechnology.

• With headphones on, users will interact with content that interacts with their emotions or changes in
facial recognition.

56 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

Basic Terminologies
and Web Standards
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

57 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Basic Terminologies and Web Standards

Web Browser

• The primary purpose is to bring information resources to the user.

• An application for retrieving, presenting, and traversing information resources to the client.

• In general, A web browser is software that allows users to access and interact with websites by
rendering web pages. It processes HTML, CSS, JavaScript, and other web technologies to display
content on the screen.

58 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Basic Terminologies and Web Standards

Popular Web Browsers

59 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Basic Terminologies and Web Standards

Website and Web Application (Web App)

Website and Web Application (Web App)

• There is a thin line between websites and web applications. A Website is a group of interlinked web
pages that can be accessed globally using a domain name and a Web application is a software or
program which can be accessed by the web browser.

Note:
website is mainly informational, while a
web application is interactive and
performs functions.

60 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Basic Terminologies and Web Standards

Website Vs. Web Application

Website​ Web Application​

A collection of multiple web pages that are grouped Web Application or Web App - is a kind of software
together and connected in various ways often called application that can be accessed over the internet
a "web site" or a "site“. using Browser.
A website is a collection of linked web pages that Sometimes the Web App require Authentication to
share a unique domain name​ access the functionality​
Each web page of a website​ It combines server-side code (backend) and client-
provides have explicit links that allows the user to side script (Frontend)to make a Web Application.
move from one page to other.
Example: Google, Youtube, Blogs, etc. Example: Google Apps, Amazon, Facebook

Access Web App Globally = Frontend script + Backend code + Web Server + Domain
61 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Basic Terminologies and Web Standards

Website and Portal

• A website is a set of interlinked web pages hosted from the same domain, which can be accessed
through a web address.

• A portal is usually user-centric whereas a website is owned by an organization or company etc.

• Websites are for driving traffic, whereas web portals are for limiting traffic to a specific group of users.

• Most web portals require a user to log in, which allows the site to deliver more specific content and
services based on who that user is.

• Websites are destinations that everyone can get to, and are generally designed for a broader audience.

62 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Basic Terminologies and Web Standards

Internet and Intranet

• The Internet is a globally-connected network of computers that enables people to share information
and communicate with each other.

• An intranet, on the other hand, is a local or restricted network that enables people to store, organize,
and share information within an organization.

63 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Basic Terminologies and Web Standards

Web Standards

• Web standards are a set of guidelines, best practices, and technologies that ensure websites and
web applications work consistently across different browsers, devices, and platforms.

• Some of the Organizations behind the Web Standards are as follows:

• W3C (World Wide Web Consortium) – Develops core web standards (HTML, CSS, WCAG).

• WHATWG (Web Hypertext Application Technology Working Group) – Focuses on modern browser
standards like HTML5.

• IETF (Internet Engineering Task Force) – Maintains web protocols (HTTP, HTTPS, TCP/IP).

• ECMA International – Standardizes JavaScript (ECMAScript).

• ISO (International Organization for Standardization) – Works on broader web security and encryption
standards.

64 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

URI Vs. URN Vs. URL

Please download pictures in

suitable size here and insert them
by clicking the symbol above.

65 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 URI Vs. URN Vs. URL

URI (Uniform Resource Identifier)

• A URI is a broad term that refers to any identifier of a resource, whether it is locatable or not. It can be
a URL, URN, or both.

• Example: https://www.example.com/index.html (URI)

• Example: urn:isbn:0451450523 (URI)

66 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 URI Vs. URN Vs. URL

URN (Uniform Resource Name)

• A URN is a type of URI that names a resource but does not specify its location or how to access it.

• Example: urn:isbn:0451450523 (Identifies a book by ISBN, but does not provide a URL to find it.)

Note: URNs are useful for uniquely identifying resources across systems without
requiring a direct link.

67 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 URI Vs. URN Vs. URL

URL (Uniform Resource Locator)

• A URL is a specific type of URI that tells how to locate a resource (including the protocol and
address).

• URLs are location dependent

• It contains four distinct parts: the protocol type, the machine name, the directory path and the file name.

• There are several kinds of URLs: file URLs, FTP URLs, and HTTP URLs.

68 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 URI Vs. URN Vs. URL

URL or URI (Uniform Resource Locator / Indicator)

Top level
Subdomain Domain Webpage

Domain Directories
Protocol Name

69 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 URI Vs. URN Vs. URL

Web Address or URL

70 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 URI Vs. URN Vs. URL

Summary

Note:
1) All URLs and URNs are URIs, but not all URIs are URLs or URNs.
2) A URL is always a URI, but not all URIs are URLs.
3) Most commonly, we use URLs in web browsing.

URI = Identifier (can be a URL or URN)

URL = Tells "Where & How" to access a resource
URN = Just a unique name, no location provided

71 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

Web System Architecture

Please download pictures in

suitable size here and insert them
by clicking the symbol above.

72 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Static Vs. Dynamic Websites

• A website is a collection of web pages that are linked together and accessible through the Internet
using a web browser.

• Static Website

– A website with fixed content that does not change dynamically.

• Dynamic Website

– A website that generates content dynamically using databases and programming languages.

73 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Web Server

• A web server is a software or hardware system that processes requests and delivers web pages to
users over the Internet or a private network. It serves HTML pages, images, videos, and other web
content to browsers via HTTP (Hypertext Transfer Protocol) or HTTPS (secure version of HTTP).

• The term web server can mean one of two things:

• A computer program that accepts HTTP requests and returns HTTP responses with optional data
content.

• A computer that runs a computer program as described above.

• A Web server typically serves static content residing on a file system (HTML Pages, images, audio and
video files).

• Web servers route requests for dynamic content (Non-Web Content) using “Web Gateways”.

74 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Servers and Hosting

Popular Web Servers

75 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Application Server

• An Application Server is a software framework that provides an environment for running dynamic
applications by processing business logic, managing transactions, and interacting with databases.

• It serves as a bridge between the frontend (user interface) and backend (database, APIs, etc.).

• Some Popular Application Servers are as follows:

– Apache Tomcat

– JBoss (WildFly)

– IBM WebSphere

– Microsoft IIS

– Node.js

– NGINX Unit

76 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

What is Web System Architecture?

• Web system architecture defines the structure and components of a web application, determining how
clients, servers, and databases interact. It ensures efficient data flow, performance, and scalability.

Key Components of Web Architecture

• Client (Frontend): The user interface (UI) where users interact with the web application.

• Web Server: Handles HTTP requests from clients, Processes and delivers web pages.

• Application Server (Backend): Executes server-side logic, Communicates with databases and APIs.

• Database Server: Stores and manages data, Communicates with the application server.

• Network (Internet): Connects clients to web and database servers via protocols like HTTP/HTTPS.

77 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Types of Web System Architecture

Single-Tier Architecture

• One-tier architecture involves putting all of the required components for a software application or
technology on a single server or platform.

78 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Types of Web System Architecture

Two-Tier Architecture

• It is also called Client-Server communication model. Advantages:

Simple to implement.
• Used for small-scale applications.
Faster data retrieval.
• Example: Client (Browser) ↔ Web Server (Backend & Database)

Disadvantages:
Limited scalability.
Heavy load on the server.

79 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Types of Web System Architecture

Three-Tier Architecture

• It is also called as database-driven Web Architecture

• One of the most common types of dynamic web pages is the database driven type. It means that you
have a web page that grabs information from a database (the web page is connected to the database by
programming,) and inserts that information into the web page each time it is loaded.

• Example: Client (Browser) ↔ Web Server / Application Server ↔ Database

Advantages:
Better load distribution.
Improved security &
maintainability.
Supports high-traffic websites.

80 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Types of Web System Architecture

Multi-Tier (N-Tier) Architecture

• Extends the three-tier model by adding extra layers like caching, APIs, and microservices.

• Used for complex, large-scale applications.

• Example: Client ↔ Load Balancer ↔ Web Server ↔ Microservices ↔ Database

Advantages:
Highly scalable & secure.
Allows modular development (easier maintenance).
Best for enterprise applications.

81 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web System Architecture

Sample Real World Scenario

82 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

Web Communication
Protocols
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

83 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

What is Web Communication Protocols?

• Web communication protocols define how data is transmitted between clients (browsers, applications)
and servers over the internet. These protocols ensure efficient, secure, and reliable data exchange.

• Web communication is broadly categorized into:

1. Request-Response Protocols (Client initiates communication): These protocols follow a simple
client-server model, where the client makes a request and the server responds.

Examples:

– HTTP/HTTPS (HyperText Transfer Protocol)

– REST API (Representational State Transfer)

– GraphQL (Flexible API Query Language)

84 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

What is Web Communication Protocols?

2. Persistent Communication Protocols: These protocols allow continuous data exchange without
repeated requests.

Examples:

– WebSockets (Real-time, two-way communication)

– MQTT (Lightweight messaging protocol for IoT)

– gRPC (High-performance remote procedure calls

85 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

HTTP

HTTP (Hyper Text Transfer Protocol)

• HTTP is a request-response protocol that allows clients (browsers) to communicate with web servers.
It defines how messages are formatted and transmitted.

• Typically, an HTTP client initiates a request. Resources to be accessed by HTTP are identified using
Uniform Resource Identifiers (URIs).

• Key Features:

• Stateless – Each request is independent (server doesn’t remember previous requests).

• Text-Based – Uses human-readable requests and responses.

• Request-Response Model – Client sends a request, server sends a response.

86 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

HTTP Request

• An HTTP request is a message sent by a client to a server to retrieve or send data.

• HTTP Request Structure

– An HTTP request consists of:

– Request Line → Defines the request method, URL, and HTTP version.

– Headers → Additional information (e.g., authentication, content type)

– Body (Optional) → Data (used in POST, PUT, PATCH requests).

87 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

HTTP Response

• An HTTP response is a message sent by the server to the client with requested data or an error

message.

• HTTP Response Structure

– An HTTP response consists of:

– Status Line → HTTP version, status code, status message.

– Headers → Metadata (e.g., content type, caching).

– Body (Optional) → The actual content (HTML, JSON, etc.).

88 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

HTTP Methods
• HTTP defines eight important methods (sometimes referred to as "verbs") indicating the desired action to
be performed on the identified resource.

– HEAD - it mirrors some functionality of another METHOD

– GET - to retrieve information

– POST - to submit an attribute or entity to a given resource

– PUT - is somewhat the polar opposite of GET. It places that resource in the remote directory.

– DELETE - deletes a targeted resource

– TRACE - carries out a message loop-back test.

– OPTIONS - requests permitted communication options for a given URL or server.

– CONNECT - creates communication with a resource rather than directly interacting with said
resource.
89 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Web Communication Protocols

Anatomy of an HTTP GET request

• The path to the resource, and any parameters added to the URL are all included on the “request line”.

Source: www.oreilly.com

90 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

Anatomy of an HTTP GET request

Source: www.oreilly.com

91 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

Anatomy of an HTTP POST request

• HTTP POST requests are designed to be used by the browser to make complex requests on the server.

• For instance, if a user has just completed a long form, the application might want all of the form’s data to be

added to a database.

• The data to be sent back to the server is known as the “message body” or “payload” and can be quite

large.

92 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

Anatomy of an HTTP POST request

Source: www.oreilly.com

93 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

Anatomy of an HTTP POST request

Source: www.oreilly.com

94 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

HTTP Status Code

Category Code Meaning

1xx (Informational) 100 Continue
2xx (Success) 200 OK
201 Created
3xx (Redirection) 301 Moved Permanently
304 Not Modified
4xx (Client Error) 400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
5xx (Server Error) 500 Internal Server Error
503 Service Unavailable

95 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Web Communication Protocols

HTTPS

HTTPS (Hyper Text Transfer Protocol Secure)

• HTTPS is the secure version of HTTP, ensuring encrypted communication over the web using TLS
(Transport Layer Security) or SSL (Secure Sockets Layer).

• Key Features:

– Encryption → Protects data from hackers (TLS/SSL).

– Authentication → Confirms website identity with SSL certificates.

– Data Integrity → Prevents data tampering during transmission.

– SEO Benefits → Google ranks HTTPS websites higher.

HTTPS encrypts data using TLS/SSL, making it essential for secure transactions like online banking
and e-commerce.

96 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

Ports & DNS in Web
Development
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

97 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Ports & DNS in Web Development

Internet Addresses

• Any computer that is connected to the Internet has an Internet Protocol (IP) address. This unique
address, or number, is in the form of xxx.xxx.xxx.xxx, where xxx is an integer between 1 and 255. This
number identifies the computer and the network to which it is connected.

• Example: 165.165.100.2

• Since humans have trouble remembering numbers like this, these addresses are mapped to names like
"www.google.com" .

98 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Ports & DNS in Web Development

Port

• Port is a 16-bit number that identifies a specific software program on the server hardware.

99 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2

 Ports & DNS in Web Development

Domain Name Systems (DNS)

• The Domain Name Systems (DNS) is the phonebook of the Internet.

• Humans access information online through domain names, like nytimes.com or espn.com.

• Web browsers interact through Internet Protocol (IP) addresses.

• DNS translates domain names to IP addresses so browsers can load Internet resources.

• Domain names comprise a hierarchy so that names are unique, yet easy to remember.

• An added advantage of domain names and the DNS is that computers can move within networks in an
almost transparent fashion.

100 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Domain Name Systems (DNS)

Domain Name Systems (DNS)

• For example, the IP address of a computer can change, but the alphanumeric name can remain the same.

• As long as the IP address change is noted in a DNS server for proper name-to-IP address translation,
users will be able to communicate with the computer regardless of its location or IP address.

101 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Domain Name Systems (DNS)

102 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Host name Structure

• Each host name is made up of a sequence of labels separated by periods.

• Each label can be up to 63 characters

• The total name can be at most 255 characters.

Examples:

• whitehouse.gov

• barney.the.purple.dinosaur.com

• monica.cs.rpi.edu

103 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Domain Name

• The domain name for a host is the sequence of labels that lead from the host (leaf node in the naming
tree) to the top of the worldwide naming tree.

• A domain is a sub tree of the worldwide naming tree.

104 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

DNS Vs File System

105 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Accessing a web page

• You type http://www.google.com into your web browser and hit enter.

• What happens now?

106 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Accessing a web page

Step 1: Your PC sends a resolution request to its configured DNS Server, typically at your ISP.

Your PC
ISP “Recursive” DNS server
Tell me the Address of
“www.google.com”

107 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Accessing a web page

Step 2: Your ISPs recursive name server starts by asking one of the root servers predefined in its “hints”
file.

Tell me the Address of

“www.google.com”

ISP “Recursive” DNS server

Root Servers

I don’t know the address but I

know who’s authoritative for the
”com” domain ask them
108 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Accessing a web page

Step 3: Your ISPs recursive name server then asks one of the “com” name servers as directed.

Tell me the Address of

“www.google.com”

ISP “Recursive” DNS server

“com” DNS servers

I don’t know the address but I

know who’s authoritative for the
”google.com” domain ask them
109 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Accessing a web page

Step 4: Your ISPs recursive name server then asks one of the “google.com” name servers as directed.

Tell me the Address of

“www.google.com”

ISP “Recursive” DNS server google.com DNS server

The Address of www.google.com

is 216.239.53.99
110 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Accessing a web page

Step 5: ISP DNS server then send the answer back to your PC. The DNS server will “remember” the
answer for a period of time.

Your PC
ISP “Recursive” DNS server

The Address of www.google.com

is 216.239.53.99

111 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Accessing a web page

Step 6: Your PC can then make the actual HTTP request to the web server.

Send me the www.google.com.au

web page

Your PC
www.google.com web server

Here it is!

112 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Summary

WEB (HTTP)
Request

“root” DNS servers

google.com.au
Web Server

2
6

1
3
5
Your PC
ISP “Recursive” DNS server “com” DNS servers

The actual
web request DNS requests

DNS

google.com DNS server

113 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

nslookup

• nslookup (Name Server Lookup) is a command-line tool in Windows, macOS, and Linux used to query
Domain Name System (DNS) servers.

• It helps resolve domain names to IP addresses and troubleshoot DNS-related issues.

114 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Network Connection

115 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Network Connection

116 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Sending an Email

• DNS is not just used in HTTP protocol (web pages)

• DNS is involved in almost every protocol in use on the internet

• Next example is how DNS facilitates the transfer of electronic mail.

117 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Sending an Email

Step 1: Your PC sends the e-mail to its configured outbound mail server. A DNS request similar to the
previous example is required to find the address of the mail server.

Your PC
Outbound Mail (SMTP) Server

Please send this message to

“someone@example.com”

118 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Sending an Email

Step 2: Your mail server follows the same intensive process to find the authoritative servers for
“example.com”.

Tell me the name servers for

“example.com”

Outbound Mail server

DNS servers

Here are the name servers for

“example.com”
119 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Sending an Email

Step 3: Ask the “example.com” name server for the list of “Mail eXchangers (MX) for that domain.

Tell me the MX’s for

“example.com”

Outbound Mail Server example.com DNS server

The MXs are mx10.example.com
and mx20.backmail.com
120 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Ports & DNS in Web Development

Sending an Email

Step 4: Select a Mail server and deliver the mail.

Here is some mail for the

“example.com” domain

Outbound Mail Server example.com Mail server

Mail accepted for delivery

121 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
Client-Side vs. Server-
Side Scripting
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

122 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Client-Side vs. Server-Side Scripting

Client-side Processing

• Some processing needs to be “executed” by the browser, either to form the request for the dynamic
Web page or to create or display the dynamic Web page.

• The client-side environment used to run scripts is usually a browser.

• The processing takes place on the end users computer.

• The source code is transferred from the web server to the users computer over the internet and run
directly in the browser.

123 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Client-Side vs. Server-Side Scripting

Server-side Processing

In server-side processing, the Web server:

– Receives the dynamic Web page request

– Performs all of the processing necessary to create the dynamic Web page

– Sends the finished Web page to the client for display in the client’s browser

• The server-side environment that runs a scripting language is a web server.

• A user's request is fulfilled by running a script directly on the web server to generate dynamic

HTML pages.

124 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Client-Side vs. Server-Side Scripting

Client-side and Server-side Script

Client Side Script Server Side Script

Scripts that runs on the client machines browser. Scripts on the web server to produce a response
that is customized for each client’s request to the
website.
Executed in the client side or web browser Executed in the back end or the web server

Provides less security for the data Provides more security for the data

Ex: HTML, CSS, JavaScript, Jquery, AJAX, Ex: PHP and Python Web Framework, JSP, ASP,
Angular JS Framework, Bootstrap Framework, Ruby, Perl, Node JS Framework
React JS, Angular Vue JS.

125 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Client-Side vs. Server-Side Scripting

Guide to Web Application Development

126 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Client-Side vs. Server-Side Scripting

Guide to Web Application Development

Program Libraries

• Program libraries are a collection of commonly used functions, classes or subroutines which provide
ease of development and maintenance.

Web Application Frameworks

• Web Application Frameworks are sets of program libraries, components and tools organized in an
architecture system allowing developers to build and maintain complex web application projects using a
fast and efficient approach.

• These are designed to streamline programming and promote code reuse.

127 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Client-Side vs. Server-Side Scripting

Web Application Frameworks

128 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Introduction to Web Design

Quiz

1. Which of the following is an example of a WAN?

a) A home Wi-Fi b) A university campus

network network

d) A company office
c) The Internet
network

Ans: c)

129 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

2. _________ is a repository of information linked together from

points all over the world.

a) The www b) HTTP

c) HTML d) None of the above

Ans: a)

130 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

3. Web browser is _____________

a) a program that can b) a program used to view

display a web page html documents

c) it enables users to
access the resources d) All the above
through internet

Ans: d)

131 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

4. How does data travel over the internet?

a) In a continuous stream b) In small packets

c) As encrypted audio
d) As text files
signals

Ans: b)

132 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

5. Static websites are typically __________ than dynamic

websites.

a) More interactive b) Faster to load

a) More difficult to d) Dependent on

maintain databases

Ans: b)

133 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

6. Which of the following is an example of a static website?

a) Online banking portal b) E-commerce store

c) Personal portfolio
d) Social media platform
website

Ans: c)

134 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

7. Dynamic web page ___________________

b) generates on demand
a) is same every time
by a program or a request
whenever it displays
from browser

a) Both a & b d) None of the above

Ans: b)

135 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

8. The ".com" in "example.com" represents a _____________

a) Subdomain b) IP address

c) Top-Level Domain
d) Web server type
(TLD)

Ans: c)

136 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

9. What protocol is used to transfer data over the web?

a) HTTP b) BIOS

c) UDP d) SMTP

Ans: a)

137 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

10. A website running on "https://" includes an extra layer of

security using _____

a) FTP b) SSL/TLS

c) HTML d) PHP

Ans: b)

138 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

11. What does the domain name in a URL represent?

a) physical location of b) IP address of a

the server website in human-
readable form

d) browser’s default
c) website's password
settings

Ans: b)

139 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

12. Which of the following is a valid example of a URL?

a) www.google.com b) https://www.google.com

c) google d) /home/user/documents

Ans: b)

140 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

13. www is based on which model?

a) Local - Server b) Client-Server

c) 3 tier d) None of these

Ans: b) Client-Server

141 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

15. Which layer of the TCP/IP model handles email and web
browsing?

a) Transport Layer b) Application Layer

c) Network Layer d) Physical Layer

Ans: b)

142 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

16. The transport layer of TCP/IP uses __________ protocols.

a) HTTP and HTTPS b) IP and ARP

c) TCP and UDP d) FTP and SMTP

Ans: c)

143 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

17. Packets travel across the internet using __________.

a) Fixed routes b) Random paths

c) Dynamic routing d) Direct transmission

Ans: c)

144 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

19. Which of the following is NOT a function of DNS??

a) Converting domain b) Sending emails between

names to IP addresses servers

d) Providing load balancing

c) Caching domain name
through multiple IP
resolutions
addresses

Ans: b)

145 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

20. What happens if a DNS server is down?

a) Websites cannot be
accessed using domain b) Websites load faster
names

c) Browsers switch to FTP d) DNS is not required for

mode web browsing

Ans: a)

146 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

21. What is the default port for HTTP communication?

a) 21 b) 25

c) 80 d) 443

Ans: c)

147 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

22. Apache, Nginx, and IIS are types of __________.

a) Programming languages b) Web browsers

c) Web servers d) Database

Ans: c)

148 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

23. In a two-tier architecture, the client communicates with

__________.

a) Another client b) Web browser

c) Database servers d) Mobile App

Ans: c)

149 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

24. Three-tier architecture consists of __________.

b) Web server, database,

a) Server, cloud, and users
and client

c) HTML, CSS, and

d) TCP, IP, and UDP
JavaScript

Ans: b)

150 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

25. Which layer in an N-tier architecture is responsible for

storing and managing data?

a) Presentation Layer b) Application Layer

c) Database Layer d) Client Layer

Ans: c)

151 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

26. Which of the following is an example of a frontend

technology?

a) Python b) CSS

c) MySQL d) Node.js

Ans: b)

152 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

27. Backend scripting languages interact with __________.

a) Web browsers b) Databases

c) HTML files d) CSS styles

Ans: b)

153 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

28. Component which is responsible for handling user requests

in a dynamic website _____________

a) HTML b) JavaScript

c) Backend Server d)CSS

Ans: c)

154 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

29. Server-side scripting mainly handle________

b) Validating user input

a) Designing web layouts
before submission

c) Storing and processing d) Changing fonts and

user data on the server colors

Ans: c)

155 Introduction to Web Design | © SmartCliff | Internal | Version 1.2

 Introduction to Web Design

Quiz

30. An icon or image or text on a web page associated with

another webpage is called

a) URL b) Hyperlink

c) Plug-in d) None of the above

Ans: b) Hyperlink

156 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
 Introduction to Web Design

Quiz

31. ………………. is a 32-bit number, normally expressed as four

octets between the periods.

a) Port b) Domain name

c)IP address d) None of these

Ans: c) IP address

157 MCA4201- FULL STACK WEB DEVELOPMENT | © SmartCliff | Internal | Version 1.2
THANK YOU