4/13/2024

How the Web Works

Chapter 1

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

© 2015 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
http://www.funwebdev.com

Objectives
1 Definitions and
History 2 Internet Protocols

3 Client-Server Model
4 Where is the
Internet?

5 Domain Name System

6 Uniform Resource
Locators (URL)

7 Hypertext Transfer
Protocol (HTTP) 8 Web Servers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

1
 4/13/2024

Section 1 of 8

DEFINITIONS AND HISTORY

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Internet = Web?
The answer is no

The World-Wide Web (WWW or simply the Web) is

certainly what most people think of when they see the
word “internet.”
But the WWW is only a subset of the Internet.
Internet

Email

Web

Online
gaming

FTP

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

2
 4/13/2024

Communication Definitions
We will begin with the telephone

Telephone networks provide a good starting place to

learn about modern digital communications.
In the telephone networks of old, calls were routed
through operators who physically connected caller and
receiver by connecting a wire to a switchboard to
complete the circuit.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Circuit Switching

A circuit switching establishes an actual physical

connection between two people through a series of
physical switches.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

3
 4/13/2024

Circuit Switching
Its Limitations

Circuit Switching Weaknesses

 You must establish a link and maintain a
dedicated circuit for the duration of the call
 Difficult to have multiple conversations
simultaneously
 Wastes bandwidth since even the silences are
transmitted

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

ARPANET
The beginnings of the Internet

The research network ARPANET was created. In the 1960s

 ARPANET did not use circuit switching
 it used packet switching

A packet-switched network does not require a continuous

connection. Instead it splits the messages into smaller
chunks called packets and routes them to the appropriate
place based on the destination address.
The packets can take different routes to the destination.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

4
 4/13/2024

Packet Switching

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Packet Switching
Isn’t this more complicated?

While packet switching may seem a more complicated

and inefficient approach than circuit switching, it is:
 more robust (it is not reliant on a single pathway
that may fail) and
 a more efficient use of network resources (since
a circuit can communicate multiple connections).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

10

5
 4/13/2024

Short History of the Internet

Perhaps not short enough

The early ARPANET network was funded and

controlled by the United States government, and was
used exclusively for academic and scientific purposes.
The early network started small with just a handful of
connected campuses in 1969 and grew to a few
hundred by the early 1980s.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

11

TCP/IP
Rides to the rescue

To promote the growth and unification of the

disparate networks a suite of protocols was invented
to unify the networks together.
By 1981, new networks built in the US began to adopt
the TCP/IP (Transmission Control Protocol / Internet
Protocol) communication model (discussed in the next
section), while older networks were transitioned over
to it.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

12

6
 4/13/2024

Tim Berners-Lee
I meant Sir Tim Berners-Lee

The invention of the WWW is usually attributed to the

British Tim Berners-Lee, who, along with the Belgian
Robert Cailliau, published a proposal in 1990 for a
hypertext system while both were working at CERN in
Switzerland.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

13

Core Features of the Web

Shortly after that initial proposal Berners-Lee developed the

main features of the web:

1. A URL to uniquely identify a resource on the WWW.

2. The HTTP protocol to describe how requests and

responses operate.

3. A software program (later called web server software)

that can respond to HTTP requests.

4. HTML to publish documents.

5. A program (later called a browser) to make HTTP

requests from URLs and that can display the HTML it
receives.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

14

7
 4/13/2024

W3C
The World Wide Web Consortium

Also in late 1994, Berners-Lee helped found the World

Wide Web Consortium (W3C), which would soon
become the international standards organization that
would oversee the growth of the web.
This growth was very much facilitated by the decision
of CERN to not patent the work and ideas done by its
employee and instead left the web protocols and
code-base royalty free.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

15

Web Apps Compared to Desktop Apps

First the advantages of web apps

Some of the advantages of web applications include:

Accessible from any internet-enabled computer.

Usable with different operating systems and browser

platforms.

Easier to roll out program updates since only need to

update software on server and not on every desktop in
organization.

Centralized storage on the server means fewer

concerns about local storage (which is important for
sensitive information such as health care data).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

16

8
 4/13/2024

Web Apps Compared to Desktop Apps

Now the disadvantages of web apps

Some of the disadvantages of web applications include:

Requirement to have an active internet connection (the
internet is not always available everywhere at all times).
Security concerns about sensitive private data being
transmitted over the internet.
Concerns over the storage, licensing and use of uploaded
data.
Problems with certain websites on certain browsers not
looking quite right.
Limited access to the operating system can prevent
software and hardware from being installed or accessed
(like Adobe Flash on iOS).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

17

What is an “Intranet”?
A short digression

One of the more common terms you might encounter

in web development is the term “intranet” (with an
“a”), which refers to an internet network that is local
to an organization or business.
Intranet resources are often private, meaning that only
employees (or authorized external parties such as
customers or suppliers) have access to those
resources.
Thus Internet (with an “e”) is a broader term that
encompasses both private (intranet) and public
networked resources.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

18

9
 4/13/2024

What is an “Intranet”?

Intranets are typically protected from unauthorized

external access via security features such as firewalls
or private IP ranges.
Because intranets are private, search engines such as
Google have limited or no access to content within a
private intranet.
Due to this private nature, it is difficult to accurately
gauge, for instance, how many web pages exist within
intranets, and what technologies are more common in
them.
Some especially expansive estimates guess that almost
half of all web resources are hidden in private intranets.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

19

Intranet versus Internet

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

20

10
 4/13/2024

Intranets and the Job Market

Being aware of intranets is also important when one

considers the job market and market usage of
different web technologies.
If one focuses just on the public internet, it will appear
that, for instance, PHP, MySQL, and WordPress, are
absolutely dominant in their market share.
But when one adds in the private world of corporate
intranets, other technologies such as ASP.NET, JSP,
SharePoint, Oracle, SAP, and IBM WebSphere, are just
as important.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

21

Types of Web Applications

Static Web Sites

In the earliest days of the web, a webmaster (the term

popular in the 1990s for the person who was
responsible for creating and supporting a web site)
would publish web pages, and periodically update
them.
In those early days, the skills needed to create a web
site were pretty basic: one needed knowledge of the
HTML markup language and perhaps familiarity with
editing and creating images.
This type of web site is commonly referred to as a
static web site, in that it consists only of HTML pages
that look identical for all users at all times.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

22

11
 4/13/2024

Static Web Sites

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

23

Types of Web Applications

Dynamic Websites

Within a few years of the invention of the web, sites

began to get more complicated as more and more
sites began to use programs running on web servers to
generate content dynamically.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

24

12
 4/13/2024

Dynamic Web Sites

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

25

Dynamic Web Sites

What are they?

These server-based programs would read content

from databases, interface with existing enterprise
computer systems, communicate with financial
institutions, and then output HTML that would be sent
back to the users’ browsers.
This type of web site is called here in this book a
dynamic web site because the page content is being
created at run-time by a program created by a
programmer; this page content can vary for user to
user.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

26

13
 4/13/2024

Types of Web Applications

E-commerce

If the web application is an online store or shop, its development is likely

to resemble that of m-commerce or an e-commerce site. This kind of
app’s development process is more complicated because it must enable
electronic payments via credit cards, PayPal or other payment methods.
The developer must also create a management panel for the
administrator. It will be used for listing new products, updating or
deleting them and managing orders and payments.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

27

Types of Web Applications

Portal web app

By portal, we are referring to a kind of application in

which we access several of its sections or categories
through a home page.
These apps can include plenty of things:
•Forums
•Chats
•Email
•Search engines
•Areas accessed through registration

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

28

14
 4/13/2024

Types of Web Applications

Content Management System (CMS)

Content must be continually updated when it comes to web

application development, so installing a content management
system (CMS) is a serious option to consider. The administrator
can make use of this CMS to implement changes and updates.
These content managers are intuitive and very user-friendly.
Some examples of content management systems are:
•WordPress: it’s undoubtedly the most widespread content
manager around. There is plenty of information, tutorials and
guides available on the internet that will help you customise it
and understand how it works. In addition to all this, it’s free.

Joomla: this cm is the second most popular after

WordPress. It doesn’t have as many users as the latter but does
have a strong community and is also very intuitive.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

29

1-tier architecture
Desktop Application

• All 3 layers are on the same machine

• All code and processing kept on a single machine
• Presentation, Logic, Data layers are tightly connected
• Scalability: Single processor means hard to increase volume of
processing
• Portability: Moving to a new machine may mean rewriting everything
• Maintenance: Changing one layer requires changing other layers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

30

15
 4/13/2024

2-tier architecture
Client-Server Architecture

• Database runs on Server

• Separated from client
• Easy to switch to a different database
• Presentation and logic layers still tightly connected
• Heavy load on server
• Potential congestion on network
• Presentation still tied to business logic or Data logic
Randy Connolly and Ricardo Hoar Fundamentals of Web Development

31

3-Tier Architecture

Client Server DB Server

 Each layer can potentially run on a different machine

 Presentation, logic, data layers disconnected

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

32

16
 4/13/2024

A Typical 3-tier Architecture

Architecture Principles
 Client-server architecture
 Each tier (Presentation, Logic,
Data) should be independent
and should not expose
dependencies related to the
implementation
 Unconnected tiers should not
communicate
 Change in platform affects
only the layer running on
that particular platform

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

33

A Typical 3-tier Architecture

Presentation Layer
 Provides user interface
 Handles the interaction with
the user
 Sometimes called the GUI or
client view or front-end
 Should not contain business
logic or data access code

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

34

17
 4/13/2024

A Typical 3-tier Architecture

Logic Layer
 The set of rules for
processing information
 Can accommodate many
users
 Sometimes called
middleware/back-end
 Should not contain
presentation or data access
code

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

35

A typical 3-tier Architecture

Data Layer
 The physical storage layer
for data persistence
 Manages access to DB or file
system
 Sometimes called back-end
 Should not contain
presentation or business logic
code

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

36

18
 4/13/2024

The 3-Tier Architecture for Web Apps

 Presentation Layer
Static or dynamically generated content rendered by the
browser (front-end)
 Logic Layer
A dynamic content processing and generation level
application server (middleware)
 Data Layer
A database, comprising both data sets and the database
management system or DBMS that manages and provides
access to the data (back-end)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

37

N-tier architectures
Client

Firewall

Proxy

Presentation Layer
Web Server

Business Layer
Application Server Backend
(Business Logic, Connectors,
(Legacy Application,
Personalization, Data Access)
Enterprise Info System)

Data Layer
DBMS B2B

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

38

19
 4/13/2024

Why an N-Layer Architecture?

 Separating services in business layer promotes re-use
different applications
– Loose-coupling – changes reduce impact on
overall system.
– More maintainable (in terms of code)
– More extensible (modular)
 Trade-offs
– Needless complexity
– More points of failure

SWE 444: Internet & Web Application Development 2.39

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

39

Web 1.0, 2.0 and Beyond

Web 1.0
• It is a system of interlinked, hypertext pages or documents accessed
via INTERNET.
• It is a Read Only Web.
• According Berners-Lee, It allowed to search for information and read
it.
• It was all about static content.
• It was a one way publishing of content without any real interaction
between readers and publishers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

40

20
 4/13/2024

Web 2.0
Its meaning for users and its applications

For the users, Web 2.0 referred to an interactive

experience where users could contribute and consume
web content, thus creating a more user-driven web
experience.
Web 2.0 applications include two-way websites, video
websites, podcasts, individual blogs, content sharing,
communication, social networking and crowdsourcing.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

41

Web 2.0
Its meaning for developers

For software developers, Web 2.0 also referred to a

change in the paradigm of how dynamic web sites are
created.
Programming logic, which previously existed only on
the server, began to migrate to the browser.
This required learning Javascript, a rather tricky
programming language that runs in the browser, as
well as mastering the rather difficult programming
techniques involved in asynchronous communication.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

42

21
 4/13/2024

Web 3.0
Semantic Web

• Web 3.0 is defined as the new and upcoming iteration of the world
wide web, which is a public network built on distributed ledger
technology and a semantic architecture to enable decentralization,
personalization, immersiveness, and a token-driven economy
• websites and apps can manage data in a human-like way
• The utilization of blockchain technology by Web 3.0 has the potential
to transform internet usage.
• Users maintain ownership of their information and content, allowing
them to trade or sell their data without relinquishing ownership,
compromising privacy, or depending on intermediaries.
• Web 3.0 applications that stand out include integrated gaming, 3D
portals, and multi-user virtual environments.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

43

Section 2 of 8

INTERNET PROTOCOLS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development

44

22
 4/13/2024

What’s a Protocol?

The internet exists today because of a suite of

interrelated communications protocols.
A protocol is a set of rules that partners in
communication use when they communicate.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

45

A Layered Architecture

The TCP/IP Internet protocols were originally

abstracted as a four-layer stack.
Later abstractions subdivide it further into five or
seven layers.
Since we are focused on the top layer anyhow, we will
use the earliest and simplest four-layer network
model.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

46

23
 4/13/2024

Four Layer Network Model

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

47

Link Layer
Save this for your networking course

The link layer is the lowest layer, responsible for both

the physical transmission across media (wires,
wireless) and establishing logical links.
It handles issues like packet creation, transmission,
reception and error detection, collisions, line sharing
and more.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

48

24
 4/13/2024

Internet Layer

The internet layer (sometimes also called the IP Layer)

routes packets between communication partners
across networks.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

49

Internet Protocol (IP)

The Internet uses the Internet Protocol (IP) addresses

to identify destinations on the Internet.
Every device connected to the Internet has an IP
address, which is a numeric code that is meant to
uniquely identify it.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

50

25
 4/13/2024

IP addresses and the Internet

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

51

IP Addresses
Two types

IPv4 addresses are the IP addresses from the original

TCP/IP protocol.
In IPv4, 32 binary integers are used (implemented as
four 8-bit integers), written with a dot between each
integer.
Since an unsigned 8-bit integer's maximum value is
255, four integers together can encode approximately
4.2 billion unique IP addresses.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

52

26
 4/13/2024

IP Addresses
Two types

To future proof the Internet against the 4.2 billion

limit, a new version of the IP protocol was created,
IPv6.
This newer version uses eight 16-bit integers for 2128
unique addresses, over a billion billion times the
number in IPv4.
These 16-bit integers are normally written in
hexadecimal, due to their longer length.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

53

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

54

27
 4/13/2024

IP Addresses
Inside of networks is different

Your IP address will generally be assigned to you by

your Internet Service Provider (ISP).
In organizations, large and small, purchasing extra IP
addresses from the ISP is not cost effective.
In a local network, computers can share a single IP
address between them.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

55

Transport Layer

The transport layer ensures transmissions arrive, in

order, and without error.
This is accomplished through a few mechanisms.
First, the data is broken into packets formatting
according to the Transmission Control Protocol (TCP).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

56

28
 4/13/2024

Transport Layer

Secondly, each packet is acknowledged back to the

sender so in the event of a lost packet, the transmitter
will realize a packet has been lost since no ACK arrived
for that packet.
That packet is retransmitted, and although out of
order, is reordered at the destination.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

57

TCP Packets

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

58

29
 4/13/2024

Application Layer

With the application layer, we are at the level of

protocols familiar to most web developers.
Application layer protocols implement process-to-
process communication and are at a higher level of
abstraction in comparison to the low-level packet and
IP addresses protocols in the layers below it.
Examples: HTPP, SSH, FTP, DNS, POP, SMTP.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

59

Section 3 of 8

CLIENT-SERVER MODEL
Randy Connolly and Ricardo Hoar Fundamentals of Web Development

60

30
 4/13/2024

Client-Server Model
What is it?

The web is sometimes referred to as a client-server

model of communications.
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 hours a day, 7 days a week (or simply 24/7),
listening for queries from any client who make a
request.
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.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

61

Request-Response Loop

Within the client-server model, the request-response

loop is the most basic mechanism on the server for
receiving requests and transmitting data in response.
The client initiates a request to a server and gets a
response that could include some resource like an
HTML file, an image or some other data.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

62

31
 4/13/2024

The Peer-to-Peer Alternative

Not actually illegal

In the peer-to-peer model where each computer is

functionally identical, each node is able to send and
receive directly with one another.
In such a model each peer acts as both a client and
server able to upload and download information.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

63

Peer-to-Peer Model

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

64

32
 4/13/2024

Server Types
A server is rarely just a single computer

Earlier, the server was shown as a single machine,

which is fine from a conceptual standpoint.
Clients make requests for resources from a URL; to the
client, the server is a single machine.
However, most real-world web sites are typically not
served from a single server machine, but by many
servers.
It is common to split the functionality of a web site
between several different types of server.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

65

Server Types

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

66

33
 4/13/2024

Real-World Server Installations

Not only are there different types of servers, there is

often replication of each of the different server types.
A busy site can receive thousands or even tens of
thousands of requests a second; globally popular sites
such as Facebook receive millions of requests a
second.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

67

Server Farms
Have no cows

A single web server that is also acting as an application

or database server will be hard-pressed to handle
more than a few hundred requests a second, so the
usual strategy for busier sites is to use a server farm.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

68

34
 4/13/2024

Server Farm

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

69

Server Farms

The goal behind server farms is to distribute incoming

requests between clusters of machines so that any
given web or data server is not excessively overloaded.
Special routers called load balancers distribute
incoming requests to available machines.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

70

35
 4/13/2024

Server Farms

Even if a site can handle its load via a single server, it is

not uncommon to still use a server farm because it
provides failover redundancy.
That is, if the hardware fails in a single server, one of
the replicated servers in the farm will maintain the
site’s availability.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

71

Server Racks

In a server farm, the computers do not look like the

ones in your house.
Instead, these computers are more like the plates
stacked in your kitchen cabinets.
That is, a farm will have its servers and hard drives
stacked on top of each other in server racks.
A typical server farm will consist of many server racks,
each containing many servers.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

72

36
 4/13/2024

Server Rack

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

73

Data Centers

Server farms are typically housed in special facilities

called data centers.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

74

37
 4/13/2024

Hypothetical Data Center

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

75

Data Centers
Where are they?

To prevent the potential for site down times, most

large web sites will exist in mirrored data centers in
different parts of the country, or even world.
As a consequence, the costs for multiple redundant
data centers are quite high, and only larger web
companies can afford to create and manage their own.
Most web companies will instead lease space from a
third-party data center.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

76

38
 4/13/2024

Commercial Web Hosting

It is also common for the reverse to be true – that is, a

single server machine may host multiple sites.
Large commercial web hosting companies such as
GoDaddy, Blue Host, Dreamhost, and others will
typically host hundreds or even thousands of sites on a
single machine (or mirrored on several servers).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

77

Section 4 of 8

WHERE IS THE INTERNET?

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

78

39
 4/13/2024

Is the Internet a Cloud?

No

It is important to recognize that our global network of

networks does not work using magical water vapor,
but is implemented via
millions of kilometers of copper wires and fiber optic
cables, as well as via

hundreds of thousands of server computers

and probably an equal number of routers, switches,

and other networked devices,

along with many thousands of air conditioning units

and specially-constructed server rooms and buildings.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

79

From the Computer to the Local Provider

Our main experience of the hardware component of

the Internet is that which we experience in our homes.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

80

40
 4/13/2024

In the House

The broadband modem (also called a cable modem or

DSL modem) is a bridge between the network
hardware outside the house (typically controlled by a
phone or cable company) and the network hardware
inside the house.
These devices are often supplied by the ISP.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

81

Routers

The wireless router is perhaps the most visible

manifestation of the Internet in one’s home, in that it
is a device we typically need to purchase and install.
Routers are in fact one of the most important and
ubiquitous hardware devices that makes the Internet
work.
At its simplest, a router is a hardware device that
forwards data packets from one network to another
network.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

82

41
 4/13/2024

Routers and Routing Tables

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

83

Out of the House

Once we leave the confines of our own homes, the

hardware of the Internet becomes much murkier.
In the illustration, the various neighborhood
broadband cables (which are typically using copper,
aluminum, or other metals) are aggregated and
connected to fiber optic cable via fiber connection
boxes.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

84

42
 4/13/2024

Fiber Optic Cable

Fiber optic cable (or simply optical fiber) is a glass-

based wire that transmits light and has significantly
greater bandwidth and speed in comparison to metal
wires.
In some cities (or large buildings), you may have fiber
optic cable going directly into individual buildings; in
such a case the fiber junction box will reside in the
building.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

85

To the Provider

These fiber optic cables eventually make their way to

an ISP’s head-end, which is a facility that may contain
a cable modem termination system (CMTS) or a
digital subscriber line access multiplexer (DSLAM) in a
DSL-based system.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

86

43
 4/13/2024

From the Local Provider to the Ocean

Eventually your ISP has to pass on your requests for

Internet packets to other networks.
This intermediate step typically involves one or more
regional network hubs.
Your ISP may have a large national network with
optical fiber connecting most of the main cities in the
country.
Some countries have multiple national or regional
networks, each with their own optical network.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

87

Connecting different networks

within and between countries

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

88

44
 4/13/2024

Internet Exchange Points

Connecting different networks

This type of network configuration began to change in

the 2000s, as more and more networks began to
interconnect with each other using an Internet
Exchange Point (IX or IXP).
These IXPs allow different ISPs to peer with one
another (that is, interconnect) in a shared facility,
thereby improving performance for each partner in
the peer relationship.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

89

National and regional networks

using Internet Exchange Points

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

90

45
 4/13/2024

Sample Internet Exchange Point

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

91

IXPs
Not just for large networks

Different networks connect not only to other networks

within an IXP, but now large web sites such as
Microsoft and FaceBook are also connecting to
multiple other networks simultaneously as a way of
improving the performance of their sites.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

92

46
 4/13/2024

Real IXPs

Real IXPs, such as at Palo Alto (PAIX), Amsterdam

(AMS-IX), Frankfurt (CE-CIX), London (LINX), allow
many hundreds of networks and companies to
interconnect and have throughput of over 1000
gigabits per second.
The scale of peering in these IXPs is way beyond that
shown in the diagram (which shows peering with only
five others); companies within these IXPs use large
routers from Cisco and Brocade that have hundreds of
ports allowing hundreds of simultaneous peering
relationships.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

93

IXPs and Data Centers

In recent years, major web companies have joined the

network companies in making use of IXPs.
As shown in the diagram, this sometimes involves
mirroring a site’s infrastructure (i.e., web and data
servers) in a data center located near the IXP.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

94

47
 4/13/2024

Section 5 of 8
DOMAIN NAME SYSTEM (DNS)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

95

Domain Name System

Why do we need it?

As elegant as IP addresses may be, human beings do

not enjoy having to recall long strings of numbers.
Instead of IP addresses, we use the Domain Name
System (DNS)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

96

48
 4/13/2024

DNS Overview

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

97

Domain Levels
Top Level Domain (TLD)
Third-Level Domain

server1.www.funwebdev.com

Fourth-Level Domain Second-Level Domain (SLD)

Most general Top-Level Domain (TLD) com

Second-Level Domain (SLD) funwebdev

Third-Level Domain www

Most specific Fourth-Level Domain server1

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

98

49
 4/13/2024

Types of TLDs

Generic top-level domains (gTLD)

Country code top-level domain (ccTLD)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

99

Name Registration

How are domain names assigned?

Special organizations or companies called domain
name registrars manage the registration of domain
names.
These domain name registrars are given permission to
do so by the appropriate generic top-level domain
(gTLD) registry and/or a country code top-level domain
(ccTLD) registry.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

100

50
 4/13/2024

Domain name registration process

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

101

DNS Address Resolution

While domain names are certainly an easier way for

users to reference a web site, eventually, your browser
needs to know the IP address of the web site in order
to request any resources from it.
The Domain Name System provides a mechanism for
software to discover this numeric IP address.
This process is referred to here as address resolution.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

102

51
 4/13/2024

Domain name address resolution process

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

103

Section 6 of 8

UNIFORM RESOURCE
LOCATORS/IDENTIFIERS AND
NAME (URL URI AND URN)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

104

52
 4/13/2024

URL
Uniform Resource Locator
A URL is a specific type of URI that not only identifies a resource on the
internet but also provides a method to locate it by describing its primary
access mechanism, usually its network location.
In order to allow clients to request particular resources from the server, a
naming mechanism is required so that the client knows how to ask the
server for the file.
For the web that naming mechanism is the Uniform Resource Locator
(URL). It consists of two required components: the protocol used to
connect, and the domain (or IP address) to connect to. Optional
components of the URL are the path (which identifies a file or directory to
access on that server), the port to connect to, a query string, and a
fragment identifier.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

105

URL Contd.
Protocol

The first part of the URL is the protocol that we are using. Recall that in Section 1.2 we
listed several application layer protocols on the TCP/IP stack. Many of those protocols can
appear in a URL, and define what application protocols to use i.e., ftp, http, https etc.

Domain

The domain identifies the server from which we are requesting resources. Since the DNS
system is case insensitive, this part of the URL is case insensitive. Alternatively, an IP
address can be used for the domain.

Port

The optional port attribute allows us to specify connections to ports other than the defaults
defined by the IANA authority. A port is a type of software connection point used by the
underlying TCP/IP protocol and the connecting computer. If the IP address is analogous to a
building address, the port number is analogous to the door number for the building.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

106

53
 4/13/2024

URL Contd

Path

The path is a familiar concept to anyone who has ever used a

computer file system. The root of a web server corresponds to a
folder somewhere on that server. On many Linux servers that path
is /var/www/html/ or something similar (for Windows IIS
machines it is often /inetpub/wwwroot/). The path is case
sensitive, though on Windows servers it can be case insensitive.

The path is optional. However, when requesting a folder or the

top-level page of a domain, the web server will decide which file
to send you. On Apache servers it is generally index.html or
index.php. Windows servers sometimes use Default.html or
Default.aspx. The default names can always be configured and
changed

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

107

URL Contd

Query String

Query strings will be covered in depth when we learn more about

HTML forms and server-side programming. They are the way of
passing information such as user form input from the client to the
server. In URL's they are encoded as key-value pairs delimited by “&”
symbols and preceded by the “?” symbol.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

108

54
 4/13/2024

URL Contd

Fragment

The last part of a URL is the optional fragment. This is used as a

way of requesting a portion of a page. Browsers will see the
fragment in the URL, seek out the fragment tag anchor in the
HTML, and scroll the website down to it. Many early websites
would have one page with links to content within that page using
fragments and “back to top” links in each section.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

109

URI
Uniform Resource Identifier

A Uniform Resource Identifier (URI) is a string of characters that uniquely

identify a name or a resource on the internet. A URI identifies a resource
by name, location, or both. URIs have two specializations known as
Uniform Resource Locator (URL), and Uniform Resource Name (URN).

Scope: All URLs and URNs are URIs, but not all URIs are URLs or URNs.

Example: A URL https://www.example.com is also a URI, and a URN like

urn:isbn:0451450523 (identifying a book by its ISBN) is also a URI.

Key Characteristics:

A more general concept than both URL and URN.

It can be either a locator (URL), a name (URN), or both.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

110

55
 4/13/2024

URN
Uniform Resource Name

A URN is a type of URI that names a resource without describing how

to locate it. It’s used to assign a unique and persistent identifier to a
resource.
Example: urn:isbn:0451450523 uniquely identifies a book using its
ISBN, irrespective of where it exists.
Key Characteristics:
Provides a unique and persistent identifier.
Does not specify a location or method to access the resource.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

111

Summary of Differences:

• URL: Specifies both the identity and the location of a resource (How and
Where).
• URI: A more comprehensive term covering both URLs (identifying and
locating) and URNs (just identifying).
• URN: Focuses only on uniquely identifying a resource, not on where it is
located or how to access it.
In practical terms, when you’re browsing the internet, you're mostly dealing
with URLs. URIs and URNs come more into play in specific contexts like
software development, digital libraries, and systems where unique and
persistent identification of a resource is crucial.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

112

56
 4/13/2024

Section 7 of 8
HYPERTEXT TRANSFER
PROTOCOL (HTTP)
Randy Connolly and Ricardo Hoar Fundamentals of Web Development

113

HTTP

The HTTP protocol establishes a TCP connection on

port 80 (by default).
The server waits for the request, and then responds
with a response code, headers and an optional
message (which can include files).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

114

57
 4/13/2024

HTTP

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

115

Web Requests

While we as web users might be tempted to think of

an entire page being returned in a single HTTP
response, this is not in fact what happens.
In reality the experience of seeing a single web page is
facilitated by the client's browser which requests the
initial HTML page, then parses the returned HTML to
find all the resources referenced from within it, like
images, style sheets and scripts.
Only when all the files have been retrieved is the page
fully loaded for the user

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

116

58
 4/13/2024

Browser parsing HTML and

making subsequent requests

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

117

HTTP Request Methods

The HTTP protocol defines several different types of

requests, each with a different intent and
characteristics.
The most common requests are the GET and POST
request, along with the HEAD request.
Other requests, such as PUT, DELETE, CONNECT, TRACE
and OPTIONS are seldom used, and are not covered
here.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

118

59
 4/13/2024

GET versus POST requests

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

119

Section 8 of 8

WEB SERVERS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development

120

60
 4/13/2024

Web Servers

A web server is, at a fundamental level, nothing more

than a computer that responds to HTTP requests.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

121

Web Stack

Regardless of the physical characteristics of the server,

one must choose an application stack to run a website.
This stack will include an operating system, web server
software, a database and a scripting language to
process dynamic requests.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

122

61
 4/13/2024

LAMP Software Stack

Throughout this textbook we will rely on the LAMP

software stack, which refers to the Linux operating
system, Apache web server, MySQL database, and PHP
scripting language

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

123

WISA software stack

Many corporations, for instance, make use of the

Microsoft WISA software stack, which refers to
Windows operating system, IIS web server, SQL Server
database, and the ASP.NET server-side development
technologies.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

124

62
 4/13/2024

What You’ve Learned

1 Definitions and
History 2 Internet Protocols

3 Client-Server Model
4 Where is the
Internet?

5 Domain Name System

6 Uniform Resource
Locators (URL)

7 Hypertext Transfer
Protocol (HTTP) 8 Web Servers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

125

63