Introduction

Contents

1. Web Developer Roadmap

2. Internet, Web
3. HTTP
4. URL
5. Web Browser
6. Web Application

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

2
Web Developer Roadmap 2024

https://roadmap.sh/

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

3
Front-end

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

4
Back-end

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

5
Reasonable Questions

§ What is the World Wide Web (WWW)?

§ Is it the same thing as the Internet?
§ Who invented the WWW and Internet?
§ How old are they?
§ How do they work?

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

6
Web ≠ Internet

• Internet: a physical network connecting millions of

computers using the same protocols for
sharing/transmitting information (TCP/IP)
• Internet is a network of smaller networks

• World Wide Web: a collection of interlinked multimedia

documents that are stored on the Internet and accessed
using a common protocol (HTTP)

• Many other Internet-based applications exist e.g., email,

telnet, ftp, usenet, instant messaging services, file-
sharing services, …
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

7
(A Very Brief) History of the Internet

• The idea of a long-distance computer network traces back to early 60's

• Joseph Licklider at M.I.T. (a “time-sharing network of computers”)
• Paul Baran at Rand (tasked with designing a “survivable”
communications system that could maintain communication
between end points even after damage from a nuclear attack)
• Donald Davies at National Physics Laboratory in U.K.
• In particular, the US Department of Defense was interested in the
development of distributed, decentralized networks
• survivability (i.e., network still functions despite a local attack)
• fault-tolerance (i.e., network still functions despite local failure)
• contrast with phone system, electrical system which are highly
centralized services

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

8
The Internet

• In 1969, Advanced Research Project Agency funded the

ARPANET
• Connected computers at UC Los Angeles, UC Santa
Barbara, Stanford Research Institute, and University
of Utah
• Allowed researchers to share data, communicate
• Technical origin
• One of earliest attempts to network heterogeneous,
geographically dispersed computers
• Email first available on ARPANET in 1971 (and quickly
very popular!)

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

9
 Internet Growth

• In 80‘s, U.S. government took a larger role in Internet development

• Created NSFNET for academic research in 1986
• ARPANET was retained for military & government computers

• By 90's, Internet connected virtually all colleges & universities

• Businesses and individuals also connecting as computing costs fell

• ~1,000,000 computers by 1992

• In 1992, control of the Internet was transferred to a non-profit

organizations
• Internet society: Internet engineering task force, Internet
architecture board, Internet assigned number authority, World-
wide-web consortium (W3C)

The 6 supercomputer centers connected

by the early NSFNET backbone

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

10
 Internet Growth (cont.)

• Internet has exhibited exponential growth, doubling in size

every 1-2 years (stats from Internet Software Consortium)

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

11
(A Very Brief) History of the Web

• The idea of hypertext (cross-linked and inter-linked

documents) traces back to Vannevar Bush in the 1940's
• Online hypertext systems began to be developed in 1960’s
• In 1987, Apple introduced hypercard (a hypermedia system that
predated the WWW)
• In 1989, Tim Berners-lee at the European particle physics
laboratory (CERN) designed a hypertext system for linking
documents over the internet
• Designed a (non-wysiwyg) language for specifying document
content => Evolved into hypertext markup language (HTML)
• Designed a protocol for downloading documents and
interpreting the content => Evolved into hypertext transfer
protocol (HTTP)
• Implemented the first browser -- text-based, no embedded
media
The web was born!
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

12
History of the Web (cont.)

• The Web was an obscure, European research tool until 1993

• In 1993, Marc Andreessen and Eric Bina (at the National Center for
Supercomputing Applications, a unit of the University of Illinois)
developed Mosaic, one of the early graphical Web browsers that
popularized the WWW for the general public
• Andreessen left NCSA to found Netscape in 1994
• Cheap/free browser further popularized the Web (75% market
share in 1996)
• 1995, Microsoft came out with Internet Explorer
• 1996, Opera web browser
• 2004, Firefox web browser, version 1.0
• 2008, Google Chrome
• Today, the Web is the most visible aspect of the Internet

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

13
World Wide Web

• The Web is the collection of machines (Web servers) on

the Internet that provide information, particularly HTML
documents, via HTTP.

• Machines that access information on the Web are

known as Web clients. A Web browser is software used
by an end user to access the Web.

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

14
Web Growth

Computers Web Servers

Year on on
the Internet the Internet
2011 ~605,000,000 ~250,000,000
Google Chrome 2008 172,338,726
2006 439,286,364 85,541,228

Firefox 2004 285,139,107 56,923,737

Safari 2002 162,128,493 33,082,657
2000 93,047,785 18,169,498
1998 36,739,000 4,279,000
1996 12,881,000 300,000
IE, Opera 1994 3,212,000 3,000
Netscape
Mosaic 1992 992,000 50

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

15
Web Browsers

• Primary tasks:
• Convert web addresses (URL’s) to HTTP requests
• Communicate with web servers via HTTP
• Render (appropriately display) documents returned by
a server

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

16
 Web Browsers - History

IE crew in front of Netscape building The next day

IE 4.0, 1997

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

17
Hypertext Transport Protocol (HTTP)

• HTTP is based on the request-response

communication model:
• Client sends a request
• Server sends a response

• HTTP is a stateless protocol:

• The protocol does not require the server to
remember anything about the client between
requests.

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

18
HTTP

• Normally implemented over a TCP connection (80 is

standard port number for HTTP)
• Typical browser-server interaction:
• User enters Web address in browser
• Browser uses DNS to locate IP address
• Browser opens TCP connection to server
• Browser sends HTTP request over connection
• Server sends HTTP response to browser over
connection
• Browser displays body of response in the client area
of the browser window

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

19
HTTP Request

• Structure of the request:

• request line
• header field(s)
• blank line
• optional body

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

20
HTTP Request

• Structure of the request:

• request line
• request headers
• blank line
• optional request body

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

21
HTTP Request

• Request line
• GET /test.html HTTP/1.1
• POST /index.html HTTP/1.1

• Three space-separated parts:

• HTTP request method
• Request-URI (Uniform Resource Identifier)
• HTTP version

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

22
HTTP Request

• Request line
• GET /test.html HTTP/1.1
• POST /index.html HTTP/1.1

• Three space-separated parts:

• HTTP request method
• Request-URI
• HTTP version
• 1.1: 1997
• 2: 2015
• 3: 2022

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

23
URI

• Uniform Resource Identifier

• URI = scheme:[//authority]path[?query][#fragment]

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

24
URI

• URI’s are of two types:

• Uniform Resource Name (URN)

o Can be used to identify resources with unique names,
such as books (which have unique ISBN’s)
o Scheme is urn

• Uniform Resource Locator (URL)

o Specifies location at which a resource can be found
o In addition to http, some other URL schemes are
https, ftp, mailto, and file

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

25
HTTP Response

• Structure of the response:

• status line
• header field(s)
• blank line
• optional body

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

26
HTTP Response

• Structure of the response:

• status line
• header field(s)
• blank line
• optional body

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

27
HTTP Response

• Status line
• Example: HTTP/1.1 200 OK
• Three space-separated parts:
• HTTP version
• status code
• reason phrase (intended for human use)

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

28
HTTP Response

• Status code
• Three-digit number
• First digit is class of the status code:
• 1=Informational
• 2=Success
• 3=Redirection (alternate URL is supplied)
• 4=Client Error
• 5=Server Error
• Other two digits provide additional information
• See http://www.w3.org/Protocols/rfc2616/rfc2616-
sec10.html

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

29
HTTP Response

• Structure of the response:

• status line
• header field(s)
• blank line
• optional body

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

30
HTTP Response

• Common header fields:

• Connection, Content-Type, Content-Length
• Date: date and time at which response was generated (required)
• Location: alternate URI if status is redirection
• Last-Modified: date and time the requested resource was last modified on
the server
• Expires: date and time after which the client’s copy of the resource will be
out-of-date
• ETag: a unique identifier for this version of the requested resource
(changes if resource changes)

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

31
HTTP Request/Response Examples

Connect { $ telnet www.example.org 80

Trying 192.0.34.166...
Connected to www.example.com
(192.0.34.166).
Escape character is ’^]’.
Send
Request { GET / HTTP/1.1
Host: www.example.org

Receive
Response
{ HTTP/1.1 200 OK
Date: Tue, 11 Oct 2022 20:30:49 GMT
…

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

32
Static vs. Dynamic pages

• Most Web pages are static

• contents (text/links/images) are the same each time it
is accessed e.g., online documents, most homepages
• HyperText Markup Language (HTML) is used to
specify text/image format

• Online services and e-commerce continues to grow,

Web pages must also provide dynamic content
• pages can be fluid, changeable (e.g., rotating banners)
• must be able to react to the user's actions, request
and process info, tailor services, e.g., amazon.com

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

33
Web Clients

• Many possible web clients:

• Text-only “browser” (lynx)
• Mobile phones
• Robots (software-only clients, e.g., search engine
“crawlers”)
• etc.

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

34
Web Servers

• Receive HTTP request via TCP

• Map host header (domain name) to specific virtual host
(one of many host names sharing an IP address)
• Map Request-URI to specific resource associated with
the virtual host
• File: Return file in HTTP response
• Program: Run program and return output in HTTP
response
• Map type of resource to appropriate MIME type and use
to set Content-Type header in HTTP response
• Log information about the request and response

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

35
Web Servers

• httpd: Apache HTTP Serrver was launched in 1995

• IIS: Microsoft Internet Information Server was released in 1995
• Nginx: open-source software, was released in 2004

Web server survey, Feb.2022

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

36
Web server/client

Client Server

1. HTTP request for image Web

Browser
2. HTTP response containing image Server

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

37
Web server/client

Client Server

1. HTTP request for image Web

Browser
2. HTTP response containing image Server

3. Store image

Cache

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

38
Web server/client

Client Server

Web
Browser I need that
image again
Server

Cache

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

39
Web server/client

Client Server
This…

1. HTTP request for image Web

Browser
2. HTTP response containing image Server

Cache

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

40
Web server/client

Client Server

Web
Browser
Server

Get … or this
image

Cache

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

School of Information and Communication Technology

41
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

42