Introduction to Web Development

DR. AHMED ALSHAMERI

Chapter Outline
 The purpose of this chapter is to help you understand the web
development in general, and environment in which a Web
application runs, which includes:
- The Internet Protocols and concepts such as:
- Domain names
- Uniform Resource Locators (URLs)
- Hypertext Transfer Protocol (HTTP)
- Web Browesers
- Web Servers

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 2
Introduction
 Web development can be understood as an ecosystem
that
- builds on existing technologies (URL, DNS, and Internet) and
- contributes new protocols and standards (HTTP, HTML, and
JavaScript) that facilitate client-server interactions.
 New client and server technologies, frameworks, and
platforms continue to be developed in support of the
web (PHP, Node.js, React etc.).

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 3
Introduction Cont’d
 There are two distinct development platforms:
- Front end: refers to those technologies that run in the
browser such as HTML, CSS, JavaScript, and a wide-range
of front-end oriented frameworks such as React.
- Back end: refers to those technologies that run on the
server. PHP and Node.js— and covers a variety of other
back-end-related topics such as APIs, databases, and a
variety of server-based development tools.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 4
Introduction Cont’d
 Advanced topics:
- Security, Performance, Accessibility, Internationalization ,
Localization
 Infrastructural topics:
- Servers, Networking topics

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 5
development
ecosystem
The web

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 6
Definitions and History
 A Short History of the Internet
- Telephone Network
- Packet Networks
◦ ARPANET (1969):
◦ funded and controlled by the United States government and was used exclusively
for academic and scientific purposes.

◦ X.25 (1974): alternative networks were created for business use.

◦ USENET (1979):
◦ had fewer restrictions still, and as a result grew quickly to 550 connected machines
by 198

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 7
Definitions and History Cont’d
 TCP/IP (1983) ← INTERNET
 The Birth of the Web (1990)
- URLS: to uniquely identify a resource on the WWW.
- HTTP: to describe how requests and responses operate.
- A software program (later called web server software) that can
respond to HTTP requests.
- A program (later called a browser) that can make HTTP requests
to URLs and that can display the HTML it receives.
- HTML: Hypertext Markup Language (HTML) to publish
documents.
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 8
Advantages of web applications compared to
desktop applications
 Can be accessed from any Internet-enabled computer.
 Can be used with different operating systems and
browser applications.
 Easier to roll out program updates by updating software
on the server instead of every computer.
 Centralized storage on the server means fewer security
concerns about local storage, especially for sensitive
data.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 9
Disadvantages of web applications compared
to desktop applications
 Internet connectivity requirement: Web-based
applications require an active internet connection,
which may not always be available or reliable.
 Security concerns: Transmitting sensitive private data
over the internet can raise security concerns regarding
data interception and unauthorized access.
 Data usage and privacy: Concerns may arise regarding
the storage, licensing, and use of uploaded data by the
web application provider.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 10
Disadvantages of web applications compared
to desktop applications Cont’d
 Cross-browser compatibility issues: Different web
browsers may render certain websites differently,
affecting the user experience and potentially causing
functional discrepancies.
 Access restrictions: Restrictions imposed by the
operating system or the user's IT department may
prevent the installation of additional software or access
to certain hardware, such as Adobe Flash on iOS
devices.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 11
Disadvantages of web applications compared
to desktop applications Cont’d
 Browser plugins and add-ons: Additional plugins or
extensions installed by users or their IT staff may interfere
with the functionality of web-based applications,
including JavaScript, cookies, or advertisements,
potentially impacting the overall user experience.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 12
Static Websites versus Dynamic Websites
 A static website consists only of HTML pages that look
identical for all users at all times.
 A dynamic website generates page content on the
server side, allowing for variation based on the user (this
page content can vary from user to user).

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 13
Static website (first generation)

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 14
Dynamic Server-Side website

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 15
The Client-Server Model
 In the client-server model, there are two types of actors:
clients and servers.
- The server is a computer agent that is normally active 24/7,
listening for requests from clients.
- A client is a computer agent that makes requests and
receives responses from the server, in the form of response
codes, images, text files, and other data.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 16
The Client-Server Model Cont’d
 The Peer-to-Peer Alternative
- Each node (computer) can send and receive data directly
with one another.
- Each peer acts as both a client and server and can upload
and download information.
- Neither is required to be connected 24/7, and each
computer is functionally equal.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 17
 Peer-to-Peer Model Client-Server Model

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 18
Inernet Protocols
 A protocol is a set of rules that partners use when they
communicate.
 TCP/IP (Transmission Control Protocol/Internet Protocol)
- These protocols have been implemented in every
operating system, and make fast web development
possible.
 Web developer needs general awareness of what the
suite of Internet protocols does (track of packet routing,
transmission details, domain resolution, checksums, and
more).
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 19
Internet Protocols
 A Layered Architecture:
Four-layer network
model

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 20
Link Layer
 The link layer is the lowest layer and is responsible for:
- The physical transmission of data across media (both wired
and wireless)
- Establishing logical links
- Packet creation, transmission, reception
- Error detection
- Collisions and Line sharing

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 21
Internet Layer
 The Internet layer, also known as the IP Layer, routes
packets between communication partners across
networks.
 It provides “best effort” communication without
guarantees of message delivery or integrity.
 The Internet uses IP addresses, unique numeric codes
that identify destinations on the Internet.
 There are two types of IP addresses: IPv4 and IPv6.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 22
Internet Layer Cont’d
- IPv4 addresses use 12 numbers (implemented as four 8-bit
integers) separated by dots.
- The maximum number of IPv4 addresses is approximately
4.2 billion, but reserved ranges reduce the availability.
- Class A, Class B, and Class C are important reserved
address ranges.
- Class A networks, such as 10.x.x.x, allow for over 16 million
devices.
- Most home networks are Class C, within the 192.168.x.x
range, allowing for 256 devices.
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 23
Internet Layer Cont’d
 Port Address Translation (PAT) enables multiple networks
to use the same IP address ranges.
 PAT is commonly used in various network environments,
such as coffee shops, homes, offices, and universities.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 24
 IPv4 and IPv6 comparison

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 25
 Port address translation

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 26
Transport Layer
 The transport layer ensures transmissions arrive in order
and without error accomplished through a few
mechanisms:
- Data is broken into packets formatted according to TCP.
- Packet data size can vary from 0 to 64 K, but typical size is
around 0.5 to 1 K.
- Each data packet has a header with a sequence number
to reorder the original message.
- Each packet acknowledges its successful arrival back to
the sender.
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 27
Transport Layer Cont’d
- In the event of a lost packet, the transmitter realizes a
packet has been lost and retransmits it.
- Retransmitted packets are reordered at the destination.
- This process guarantees that messages sent will arrive and
will be in order.
- Web developers don’t have to worry about pages not
getting to the users.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 28
Application Layer
 There are many application layer protocols. Web
developers
- HTTP: The Hypertext Transfer Protocol is used for web
communication.
- SSH: The Secure Shell Protocol allows remote command-line
connections to servers.
- FTP: The File Transfer Protocol is used for transferring files
between computers.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 29
Application Layer Cont’d
- POP/IMAP/SMTP: Email-related protocols for transferring
and storing email.
- DNS: The Domain Name System protocol used for resolving
domain names to IP addresses.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 30
Domain Name System
 Name Lavels
- A domain name can be broken down into several parts
that describe a hierarchy.
- All domain names have at least:
◦ a top-level domain (TLD) name
◦ a second-level domain (SLD) name.
◦ Most websites also maintain:
◦ a third-level WWW subdomain
◦ perhaps others.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 31
Domain Name System
 Types of Top Level Domains
- Generic top-level domain (gTLD)
◦ Unrestricted. TLDs include .com, .net, .org, and .info.
◦ Sponsored. TLDs including .gov, .mil, .edu, and others. These
domains can have requirements for ownership and thus new
second-level domains must have permission from the sponsor
before acquiring a new address.
◦ New TLDs

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 32
Domain Name System Cont’d
- Country code top-level domain (ccTLD)
◦ Examples of TLDs include: .us .ca .uk .ye .sa
◦ Codes are controlled by the countries they represent and
administered differently.
◦ In the United Kingdom: Commercial entities and businesses
must register subdomains to co.uk
◦ In Canada: .ca domains can be obtained by any person,
company, or organization living or doing business in Canada.
- Internationalized top-level domain name (IDN).
◦ Allows domains to use non-ASCII characters
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 33
Uniform Resource Locators
 A naming mechanism is required for clients to request
resources from a server, allowing the client to ask the
server for a file.
 For the web, the naming mechanism is the Uniform
Resource Locator (URL).
 The URL consists of two required components:
- The protocol used to connect
- The domain (or IP address): identifies the server from which
we are requesting resources, Case insensitive,
Alternatively, an IP address can be used for the domain
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 34
Uniform Resource Locators Cont’d
 Optional components of the URL:
- The path (which identifies a file or directory to access on
that server)
◦ The optional port attribute allows us to specify connections to
ports other than the defaults
◦ Add a colon after the domain, then specify an integer port
number.
- A query string
- A fragment identifier : A way of requesting a portion of a
page.
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 35
Uniform Resource Locators Cont’d

URL components

Query string components

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 36
Hypertext Transfer Protocol (HTTP)
 Layers of protocols in the TCP/IP model:
- Each layer builds on the lower ones.
- Highest level: Application layer.
- Allows for many different types of services:
◦ Secure Shell (SSH)
◦ File Transfer Protocol (FTP)
◦ Hypertext Transfer Protocol (HTTP)

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 37
Hypertext Transfer Protocol (HTTP) Cont’d
 HTTP is an essential part of the web:
- Successful developers require a deep understanding of it.
- HTTP establishes a TCP connection on port 80 (by default):
◦ The server waits for the request.
◦ Responds with a response code.
◦ Headers.
◦ An optional message (which can include files).

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 38
HTTP Illustrated

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 39
HTTP Response Code
 Response codes:
- Integer values returned by the server as part of the
response header.
- Describe the state of the request.
- Indicate whether the request was:
◦ Successful
◦ Had errors
◦ Requires permission

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 40
HTTP Response Code Cont’d

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 41
Web Browsers
 Fetching a Web Page
- The browser requests the initial
HTML page.
- The browser parses the initial
HTML page.
- The browser requests all the
referenced resources:
◦ Images, Style sheets, Scripts
- A single web page can
reference dozens of files and
requires:
◦ Many HTTP requests
◦ Many HTTP responses
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 42
Web Browsers
 Page rendering in web browsers:
- Involves algorithms for downloading, parsing, layout, and
asset fetching to create interactive pages.
- This process varies across browsers (Firefox, Chrome, Safari,
Explorer, and Opera), leading to differences in formatting
and loading speeds.

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 43
Web Browsers
 Browser caching:
- Once a webpage has been
downloaded from the server, the
user might want to see the same
web page and refreshes the
browser or rerequests the URL
- Some content might change (e.g.,
a new blog post in the HTML)
- The majority of referenced files are
likely to be unchanged
- Browser caching reduces network
traffic

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 44
Web Browsers
 Features of modern browsers:
- Search engine integration
- URL autocompletion
- Cloud caching of user history/bookmarks
- Phishing website detection
- Secure connection visualization
 These features:
- Enhance the browsing experience for users

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 45
Web Browsers
 Browser extensions:
- Written in JavaScript
- Extend browser functionality
- Offer value to: Developers (e.g. debugging tools), General
public (e.g. ad-blockers)
- Can interfere with web content presentation
- Enhance the web experience by adding useful features
- Ad-blocking extensions: Reduce revenue for webmasters,
Reliant on ad displays
Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 46
Web Servers
 A web server is nothing more than a computer that
responds to HTTP requests.
 Real-world web servers are often more powerful than
your own desktop computer
 Webservers must choose an application stack to run a
website.
 This application stack will include an operating system,
web server software, a database, and a scripting
language for dynamic requests

Tuesday, February 18, 2025 WEB APPS DEVELOPMENT | DR. AHMED ALSHAMERI 47