Introduction to the Web
Jesús Arias Fisteus
Web Applications (2020/21)
Web Applications (2020/21) Introduction to the Web 1
The World Wide Web
The World Wide Web (WWW, or simply Web) is an information
space in which the items of interest, referred to as resources, are
identified by global identifiers called Uniform Resource Identifiers
(URI), interlinked by hypertext links and accessed via the Internet.
Web Applications (2020/21) Introduction to the Web 2
History of the Web
1994 2000
XHTML 1.0
HTTPS (RFC 2818) 2008
1999
2004
HTTPS
2015
1993 1998 2011
MOSAIC HTTP 2
CSS 3
(first graphical
web browser) CSS 2
1995
1989 HTML 2.0 2001 2007
Tim Berners-Lee JavaScript iPhone
proposes the project
at CERN 1996
2014
HTML 5
1990 2005
First working AJAX
prototype 2016
1991 HTTP 1.0
Public presentation CSS 1
outside CERN 2006
1997
HTML Tags 2003
HTML 3.2
HTTP 0.9 HTML 4.0
HTTP 1.1
Web Applications (2020/21) Introduction to the Web 3
Client side
I Normally, the client uses a browser (Google Chrome, Firefox,
etc.) to access a resource (typically, a Web page).
I The resource has a Uniform Resource Identifier (URI) that
identifies it:
I For example: [Link]
Web Applications (2020/21) Introduction to the Web 4
Client side
I The browser follows a series of steps to load and display the
resource:
1. Analyze the resource’s URI.
2. Obtain an IP address for the server’s domain name by querying
the Domain Name System.
3. Open a TCP connection with the server.
4. Send an HTTP request.
5. Receive the HTTP response that carries the resource (typically,
an HTML document).
6. Parse the HTML document.
7. Send HTTP requests for any additional resource needed
(stylesheets, images, JavaScript code, etc.).
8. Render the HTML document.
9. Close the TCP connection if not needed anymore in a small
period of time.
Web Applications (2020/21) Introduction to the Web 5
Step 1: analyze the URI
Uniform Resource Identifier (URI)
[Link]
protocol
path
domain name
Web Applications (2020/21) Introduction to the Web 6
Step 2: resolve the server’s domain name
I Use the Domain Name System (DNS) to resolve the server’s
domain name to an IP address.
I E.g. [Link] resolves to the [Link] IP address.
Web Applications (2020/21) Introduction to the Web 7
Step 3: open a TCP connection with the server
I Open a Transmission Control Protocol (TCP) connection to
the server’s IP address, port 80 (default HTTP port).
I The connection will be used to send HTTP requests and
receive their responses.
I E.g. open a TCP connection with [Link] port 80.
Web Applications (2020/21) Introduction to the Web 8
Step 4: send an HTTP request
I The browser sends the HTTP request through the TCP
connection:
GET /Inicio HTTP/1.1
Host: [Link]
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Chrome/62.0.3202.89
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: es-ES,es;q=0.9,en;q=0.8,en-US;q=0.7
Web Applications (2020/21) Introduction to the Web 9
Step 5: receive the HTTP response
I The browser receives the HTTP response that includes the
requested resource:
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Set-Cookie: JSESSIONID=E26E82630...; Domain=[Link]; HttpOnly
Cache-Control: no-store
Last-Modified: Fri, 10 Nov 2017 [Link] CET
Content-Type: text/html;charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 10 Nov 2017 [Link] GMT
<!DOCTYPE html>
<html lang="es" class="no-js">
<head>
<title>Inicio | UC3M</title>
(...)
Web Applications (2020/21) Introduction to the Web 10
Step 6: parse the HTML document
I An HTML document is a text file composed by tags.
I It includes:
I A header: metadata about the document (e.g. its title).
I A body: content to be rendered, such as paragraphs,
hyperlinks to other resources, lists, tables, images, videos,
sections, section titles, forms, etc.
Web Applications (2020/21) Introduction to the Web 11
Example HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Main characters in Harry Potter</title>
<link rel="stylesheet" href="[Link]" type="text/css">
<script src="[Link]
[Link]"></script>
<script src="[Link]" type="text/javascript"></script>
</head>
<body>
<h1>Main characters</h1>
<p>
These are the <strong>main characters</strong>
in Harry Potter:
</p>
<ul>
<li id="harry"><a href="[Link]">Harry Potter</a></li>
<li id="ron"><a href="[Link]">Ron Weasley</a></li>
<li id="herm"><a href="[Link]">Hermione Granger</a></li>
</ul>
<div>
<img class="image" src="[Link]"
alt="Main character's portrait">
</div>
</body>
</html>
Web Applications (2020/21) Introduction to the Web 12
Step 7: send HTTP requests for additional resources
I The HTML file may refer to other resources, in the same or a
different web server, that are needed to properly render it:
I Images.
I Stylesheets.
I JavaScript sources.
Web Applications (2020/21) Introduction to the Web 13
Step 8: render the HTML document
I The HTML document contains the information that needs to
be rendered.
I CSS stylesheets contain instructions about how to visually
render this information.
I JavaScript programs add dynamism to the Web page.
Web Applications (2020/21) Introduction to the Web 14
Step 8: HTML rendering example
Web Applications (2020/21) Introduction to the Web 15
Example CSS document
body {
background: rgb(245, 245, 245);
}
h1, strong {
color: navy;
}
.image {
transition: all 0.5s ease;
border: 2px solid black;
}
.image:hover {
border-radius: 50%;
transform: rotate(360deg);
filter: brightness(200%);
}
Web Applications (2020/21) Introduction to the Web 16
JavaScript
I JavaScript programs make the HTML page interactive by:
I Reacting to user actions on the Web page (event handlers).
I Dynamically modifying the Web page (DOM API).
I Browsers implement a series of standard APIs to facilitate the
development of rich client–side Web applications:
I Websockets, server–sent events, audio and video playback
interaction, webcam and microphone access, client–side data
storage, desktop notifications, geolocation services,
video–conferencing, hardware accelerated graphics, access to
sensors, vibration, drag–and–drop, etc.
Web Applications (2020/21) Introduction to the Web 17
Example JavaScript program
$(function() {
var image = $("img");
var canvas = image_to_canvas(image);
$("#harry").hover(function(){
draw_circle(canvas, 100, 70, 70);
}, function() {
reset_image(canvas, image);
});
});
var image_to_canvas = function(image) {
canvas = $("<canvas>").addClass('image');
[Link] = [Link];
[Link] = [Link];
reset_image(canvas, image);
[Link](canvas);
return canvas
}
var draw_circle = function(canvas, cx, cy, r) {
var ctx = canvas[0].getContext("2d");
[Link]();
[Link] = "red";
[Link] = 5;
[Link](cx, cy, r, 0, 2 * [Link], true);
[Link]();
}
Web var
Applications (2020/21)
reset_image Introduction
= function(canvas, image) { to the Web 18
Step 9: close open TCP connections
I The browser keeps TCP connections temporary open and
reuses them if new requests need to be sent to the same
servers.
I After a short period of inactivity in a connection (10 to 30
seconds, normally), the browser closes it.
Web Applications (2020/21) Introduction to the Web 19
Server side
I A Web server is a program that accepts incoming TCP
connections, parses HTTP requests and generates the
appropriate HTTP responses that include the requested
resources.
I Resources can be:
I Static: they are the same for every request, and the server
simply loads them from its file system.
I Dynamic: they are generated on the fly for every request by a
program that is run usually on the server (although sometimes
on the client).
Web Applications (2020/21) Introduction to the Web 20
Dynamic resources
I A Web application is run at the server side.
I HTTP paths are mapped to different components of the
application, either static resources or programs that generate
dynamic resources.
I The application usually stores and retrieves the data from a
database.
Web Applications (2020/21) Introduction to the Web 21
Popular Web application frameworks
Programming Some well known frameworks
language
PHP Laravel, CodeIgniter, CakePHP, Symphony
Ruby Rails
Python Django, Flask
Java Java Server Faces, Spring MVC, Vaadin
JavaScript Express, Meteor, Angular, React
Several languages [Link]
Web Applications (2020/21) Introduction to the Web 22
References
I Andrew S. Tanenbaum, David J. Wetherall, Computer
Networks, 5th ed., Prentice Hall (2010):
I Chapter 7.3 (The World Wide Web).
I Online access at O’Reilly through UC3M Library
Web Applications (2020/21) Introduction to the Web 23
