Web Technologies

Teaching Unit: UEF 2.1.2

1 / 30
Web Technologies
Semestre : 3
Teaching unit: UEF 2.1.2
Subject 4: Web Technologies
VHS: 45h00 (Course: 1h30, Tutorial: 1h30)
Crédits : 4
Coefficient : 2
Objectives of teaching:
Discover the content and the container of a web page that
present information on the Internet. Discover the concepts
Based on the functionality of the client-server model. Write
and modify web pages in a standardized language
content description.
Recommended prior knowledge:
The different types of networks. 2 / 30
Content of the subject:
Chapter 1. Introduction (2 Weeks) Introduction to the Web:
history of Internet and the Web Internet, The client-server model
server.
Chapter 2. Structure of an HTML document (4 Weeks)
Generalities, Markup Principle. XML and DTD. The
main HTML tags (Text formatting, Layout,
tables). The concepts of url and links. The Frames. CSS
Chapter 3. Client-side scripting languages (3 Weeks)
Introduction. Javascript. VB script. jQuery
Chapter 4. Server-side scripting languages (3 Weeks)
Introduction. PHP. ASP. JSP. Connection and manipulation of
databases
Chapter 5. Advanced Web Technologies (3 Weeks) AJAX,
JEE Framework: Struts. Web Design 3 / 30
Evaluation Method/References:
Assessment:
Continuous assessment: 40%;
Exam: 60%.

Bibliographic references:
● Web Programming with PHP - C. Lacroix, N. Leprince, C.
Boggero, C. Lauer – Eyrolles editions
● Your first steps with PHP 4 - [Link] - Eyrolles editions
● Large Book PHP4 & MySQL - G. Leierer, R. Stoll - Editions
Eyrolles

4 / 30
 Definition (Wikipedia)
● Web technologies are a set of
technologies that compose and use the World Wide
Web (usually abbreviated as Web) and its standards.
The web was created in 1990 as a sharing application.
of information then became a separate platform
entire on which are regularly developed
new technologies1. The foundations of these
technologies are the HTTP network protocol (abbreviated as
Hypertext Transfer Protocol), standardized by the IETF and the
HTML document format (abbreviated as Hypertext Markup)
Language), standardized by the W3C.
5 / 30
 History of the internet (wikipedia)
● Go back to the development of the first networks of
telecommunication
● The idea of a computer network that allows for
users of different computers from
communicate, developed through many
successive steps → to the "network of networks"
Internet
● Internet = technological developments
reorganization of network infrastructure
existing and systems of
telecommunications
6 / 30
 History of the Internet (Wikipedia)
● The concept of the internet is based on a system
decentralized, allowing the network to operate
despite the destruction of one or more nodes
● 2 phases of acceleration:
– from the 1960s-1970s: practical application of
concepts mentioned at the end of the 1950s
– During the 1990s, the emergence of the World
Wide Web (www).

7 / 30
 The Baran model (Paul Baran)
● Regarded as one of the main actors in the
creation of the Internet.
● He had realized that a centralized system was
vulnerable because the destruction of its core caused
the annihilation of communications.
● I had the idea, in 1964, to create a network in the form of
large canvas.
● He therefore developed a hybrid network of architectures.
starred and knitted in which the data is
would move dynamically, by 'looking for'
the least crowded path, and by 'waiting' if
all the roads were congested.
8 / 30
● This technology was called 'packet switching'.
 The ARPANET
● 1969, regardless of any military objective, the network
experimental ARPANET was created by ARPA (Advanced Research
Projects Agency dependent on the DOD, Department of Defense
to connect four university institutes:
– The Stanford Institute;
– The University of California, Los Angeles;
– University of California, Santa Barbara;
– The University of Utah.
● The ARPANET is today considered as the network
precursor of the internet. It already included certain features at the time.
fundamental characteristics of the current network:
– One or more nodes of the network could be destroyed without
disrupt its functioning;
– Communication between machines was done without machines.
intermediate centralized 9 / 30

– The protocols used were basic.

 The TCP protocol
● The NCP protocol, used on the ARPANET network does not
did not allow error control management
● Bob Kahn, who arrived at ARPA in 1972, began to
working on the foundations of a new protocol, already named
TCP, allowing data to be routed over a network in
fragmenting them into small packets.
● In 1976, the DoD decided to deploy the TCP protocol on the
ARPANET network, made up of 111 interconnected machines.
they.
● In 1978, the TCP protocol was split into two protocols:
TCP and IP, to form what would become the suite
TCP/IP.

10 / 30
 The DNS
● 1984: The DNS naming system, used today, was
implemented in order to address the lack of flexibility of
naming by naming table (manual update of
correspondences between machine names and their addresses
on text files on each of the machines).

11 / 30
 The RFCs
● 1969, S. Crocker from the University of California developed the
Request for Comments (RFC) system.
● These are documents presented in the form of a note,
allowing researchers to share their work.

12 / 30
 The World Wide Web
● 1980, Tim Berners-Lee, a researcher at CERN in Geneva,
develops a hypertext navigation system and
developed, with the help of Robert Cailliau, a software called
Inquiry allowing navigation according to this principle.
● In 1990, Tim Berners-Lee developed the HTTP protocol.
(Hyper Text Transfer Protocol), as well as the HTML language
(HyperText Markup Language) allowing for navigation to
the help of hyperlinks, through the networks
Birth of the World Wide Web.

13 / 30
 Client-Server Model
● The client/server environment refers to a mode of
communication organized through a
network between several computers. "this means that
client machines (machines that are part of the
network) contact a server that provides them with
services.

14 / 30
 Client-Server Model
● In general, servers are dedicated computers.
to the server software they host
● They have capabilities superior to those of
personal computers in computing power,
inputs-outputs and network connections.
● Clients are often personal computers
or individual devices (phone, tablet ...)
● A server can respond to the requests of a large
number of simultaneous clients.

15 / 30
 Advantages of the Client-Server Model

● Centralized information
● The complexity of processing and the computing power
are the responsibility of the server(s)
● Greater security: the servers are in
generally very secured against pirate attacks.
● Reliability more important and Ease of evolution: A
client/server architecture is scalable because it is very
easy to add or remove clients, and/or
servers.

16 / 30
 Disadvantages of the Client-Server Model
● Loading issue if the number of customers increases
at a given moment (distributed architectures
work better by adding new ones
participants).
● If the server is no longer available, none of the
clients do not work (distributed architectures
continue to operate, even if several
participants leave the network.
● The costs of setup and maintenance
can be raised.
● Asymmetry of information in favor of servers
clients cannot communicate with each other) 17 / 30
 Types of architecture
● Peer-to-peer architecture (P2P): each
connected program is likely to play in turn the
role of client and server.
● two-level architecture or a two-thirds architecture
tier architecture): the client requests a resource from the server
who provides it from their own resources.
● three-level architecture or a three-tier architecture
tier architecture in English) adds an additional level to
the 2-level architecture, allowing to specialize the
servers in a specific task (+ flexibility, security and
performance
● N-level architecture or N-tier architecture (N-tier)
architecture) adds even more additional levels to
the 3-level architecture, allowing to specialize the
18 / 30
servers more.
Types of architecture

19 / 30
 Types of clients
● Thin client: the processing of client requests is
entirely performed by the server, the client receiving
the 'ready-made' answers (i.e. He takes care of
the display).
● Thick client: the processing of client requests
(desktop applications, mobile applications) is
shared between the server and the client.
● Client 'rich' A more advanced graphical interface
allows features similar to those of a
heavy client. The treatments are carried out
mostly on the server, the response 'semi-finished'
being sent to the client position that is capable of it
20 / 30
finalize and present it.
 HTML Language
● Universal language used to communicate on the Web.
● The information is transmitted over the network, to arrive at a
client post then interpreted using a program called
browser or browser.
● HTML is a universal language that adapts to all platforms.
forms (Windows, Unix/Linux, MacOs, ...)
● There are different browsers, the most well-known of which are FireFox.
Chrome, Opera, Microsoft Internet Explorer ...
● To transit as quickly as possible on the cables of
network, HTML adopted a very compact text format but
also little sophisticated.
● In addition to the text, instructions for the browser must be included.
These instructions will be differentiated from the text by the signs < and >.
These 'instructions' are called tags.
21 / 30
● The current version in effect is HTML 5
Creation of an HTML document
first line of the document
header zone opening
<title> "titre de la page suivi de </title>"
closure of the header area.
opening of the body of the document
Put the text and images here
end of the body of the document
end of HTML document

22 / 30
 Minimal HTML Document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Titre de la page </title>
</head>
<body>
... <!-- The rest of the content --> ...
</body>
</html>

23 / 30
Formatting of the text
The formatting of a page generally begins with the choice and use
of predetermined headings ranging from H1 to H6 (levels). The
Command H1 is the largest available, H6 the smallest.
<center> </center> : Allows you to center text.
gives a paragraph change
<br> gives a simple line break
<b></b>give a bold text:bold text
<strong></strong>gives a text in bold as well: text in bold
<EM></EM> gives italic text:italic text
It also gives a text in italics: italic text
also give a text in italics: text in italics
give a text formatted with a monospaced font
<pre></pre> forces the browser to display preformatted text. The
the browser then respects line endings (carriage returns). 24 / 30
allows to imprison
a paragraph like a quote in indentation
<STRIKE></STRIKE> allows you to strikethrough text
<SUB></SUB> allows the use of indices in
formulas like in the following example: H2O.
<SUP></SUP> allows the use of superscripts in
formulas

25 / 30
Special characters
Certain characters have a specific meaning in HTML. For
use them as such on a page, you must use the commands
alternatives to display them correctly on the screen.

<pour:<
&gt;pour:>
& pour:
for:

26 / 30
Images
HTML browsers generally recognize two formats
of images; GIF images and JPEG images.
Inserting an image is possible by typing the command
next:<img src="images/[Link]">
The IMG SRC segment indicates that it is the source of an image.
the first term in quotes indicates the name of the folder where it
find the image or images,
the second term indicates the name of the file containing the image and the
format this one.
Une image en format GIF se termine par .GIF alors qu'une image en
JPEG format ends with .JPEG or .JPG.
The size of the image is determined by the file itself.
For example, one can place a large image covering the entire area.
from the screen: 27 / 30
 The links
To insert a pointer (hyperlink), a reference must be indicated.
(URL) and an element, text or image, visible on the screen on which we must
click to access it. example code to obtain a pointer:
<A HREF="dossier/menu_du_jour.HTML">Menu of the day</A>.
The pointer then appears in contrasting color and underlined in the
browser
Pointers can direct the browser to HTTP, FTP sites.
TELNET, TN3270, GOPHER or USENET.
You can also directly access a file on the local system or on a
local network.
The command A NAME: registers an access point inside a
HTML document. We can then refer directly to this specific point with
an A HREF command. The command can be typed directly as
this: <a name="Gopher">, which indicates to the browser where it is located
target section. To get to this place, 28 / 30
Gopher.
The Paintings
This order is
main command to open an area of
paintings.
Order to define a row. It
must use a <TR></TR> sequence for each
required rows, within the area
<TABLE></TABLE>
Order to specify the data
for each row.

29 / 30
Tools for HTML editing
two types of HTML editors
WYSIWYG HTML editors, "What you see is
what you get
NVU
KompoZer
Amaya
OpenElement
HTML code editors and IDEs
Bluefish
Visual Studio Code
Notepad++
Atom ... 30 / 30