Introduction To The Web

Introduction to the Web
Jesú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.

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

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: http://www.uc3m.es/Inicio

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.

Step 1: analyze the URI
Uniform Resource Identifier (URI)
http://www.uc3m.es/Inicio
protocol
path
domain name

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. www.uc3m.es resolves to the 176.58.10.138 IP address.

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 176.58.10.138 port 80.

Step 4: send an HTTP request
I The browser sends the HTTP request through the TCP

connection:
GET /Inicio HTTP/1.1

Host: www.uc3m.es
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

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=www.uc3m.es; HttpOnly
Cache-Control: no-store
Last-Modified: Fri, 10 Nov 2017 11:44:28 CET
Content-Type: text/html;charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 10 Nov 2017 10:44:28 GMT
<!DOCTYPE html>
<html lang="es" class="no-js">
<head>
<title>Inicio | UC3M</title>
(...)

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.

Example HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Main characters in Harry Potter</title>
<link rel="stylesheet" href="example.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/
jquery.min.js"></script>
<script src="example.js" 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="harry.html">Harry Potter</a></li>
<li id="ron"><a href="ron.html">Ron Weasley</a></li>
<li id="herm"><a href="hermione.html">Hermione Granger</a></li>
</ul>
<div>
<img class="image" src="harry-potter.jpeg"
alt="Main character's portrait">
</div>
</body>
</html>

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.

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.

Step 8: HTML rendering example

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%);
}

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.

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');
canvas.height = image.height;
canvas.width = image.width;
reset_image(canvas, image);
image.replaceWith(canvas);
return canvas
}
var draw_circle = function(canvas, cx, cy, r) {
var ctx = canvas[0].getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.arc(cx, cy, r, 0, 2 * Math.PI, true);
ctx.stroke();
}
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.

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).

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.

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 ASP.NET

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

Introduction To The Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To The Web

Uploaded by

Copyright:

Available Formats

Introduction to the Web

Jesús Arias Fisteus

Web Applications (2020/21)

Web Applications (2020/21) Introduction to the Web 1

The World Wide Web (WWW, or simply Web) is an information

Web Applications (2020/21) Introduction to the Web 2

1989 HTML 2.0 2001 2007

1991 HTTP 1.0

Web Applications (2020/21) Introduction to the Web 3

I Normally, the client uses a browser (Google Chrome, Firefox,

Web Applications (2020/21) Introduction to the Web 4

I The browser follows a series of steps to load and display the

Web Applications (2020/21) Introduction to the Web 5

Uniform Resource Identifier (URI)

Web Applications (2020/21) Introduction to the Web 6

I Use the Domain Name System (DNS) to resolve the server’s

Web Applications (2020/21) Introduction to the Web 7

I Open a Transmission Control Protocol (TCP) connection to

Web Applications (2020/21) Introduction to the Web 8

I The browser sends the HTTP request through the TCP

GET /Inicio HTTP/1.1

Web Applications (2020/21) Introduction to the Web 9

I The browser receives the HTTP response that includes the

Web Applications (2020/21) Introduction to the Web 10

I An HTML document is a text file composed by tags.

Web Applications (2020/21) Introduction to the Web 11

Web Applications (2020/21) Introduction to the Web 12

I The HTML file may refer to other resources, in the same or a

Web Applications (2020/21) Introduction to the Web 13

I The HTML document contains the information that needs to

Web Applications (2020/21) Introduction to the Web 14

Web Applications (2020/21) Introduction to the Web 15

Web Applications (2020/21) Introduction to the Web 16

I JavaScript programs make the HTML page interactive by:

Web Applications (2020/21) Introduction to the Web 17

I The browser keeps TCP connections temporary open and

Web Applications (2020/21) Introduction to the Web 19

I A Web server is a program that accepts incoming TCP

Web Applications (2020/21) Introduction to the Web 20

I A Web application is run at the server side.

Web Applications (2020/21) Introduction to the Web 21

Programming Some well known frameworks

Web Applications (2020/21) Introduction to the Web 22

I Andrew S. Tanenbaum, David J. Wetherall, Computer

Web Applications (2020/21) Introduction to the Web 23

You might also like