The document presents an introductory lecture on web technologies, covering fundamental concepts such as web engineering, web applications, internet functionality, web protocols, and client-side versus server-side scripting. It elaborates on the systematic approaches needed to develop high-quality web applications, the roles of various servers, and the significance of secure protocols like HTTPS. Additionally, it defines essential terms related to the internet and web development, including URLs, IP addresses, and scripting languages.

1. Web Technologies
Lecture 1
WEB FUNDAMENTALS
Asif Mehmood

2. WHO AM I?
Asif Mehmood
BSCS (University of Wah), 2013-2017
MSCS (CUI, Wah Campus), 2018-2020
PCS (CUI, Wah Campus), 2020-Present
“
Email: asif.mehmood@nutech.edu.pk

3. Resources
• The Modern Web: Multi-Device Web Development with HTML5, CSS3, and
Javascript by Peter Gasston
• Beginning PHP and MySQL From Novice to Professional by W. Jason Gilmore
• Web Engineering by Gerti Kappel
• Beginning HTML, XHTML, CSS, and JavaScript by Jon Duckett
3

4. Lecture Outline
 Web Engineering
 Web Application
 Web Browsers
 Internet
 Web, Application and Database Server
 Web Protocols
 Common Terms
 Web Architecture
 Client side VS Server side Scripting
4

5. Web Engineering
• Web Engineering comprises the use of systematic and quantifiable approaches
in order to accomplish the specification, implementation, operation, and
maintenance of high-quality Web applications. (Gerti Kappel)
• Web Engineering is the application of systematic and quantifiable approaches
(concepts, methods, techniques, tools) to cost-effective requirements analysis,
design, implementation, testing, operation, and maintenance of high-quality
Web applications. (Gerti Kappel)
5

6. Web Engineering [Cont’d]
Basic Principles of Web Engineering
• Clearly defined goals and requirements
• Systematic development of a Web application in phases
• Careful planning of these phases
• Continuous audit of the entire development process.
6
Web Engineering makes it possible to plan and iterate development by permitting
not only cost reduction and risk minimization but also an increase in quality, as
well as measurement of the quality

7. Web Application
A Web application is a software system based on technologies and standards of the
World Wide Web Consortium (W3C) that provides Web specific resources such as
content and services through a user interface, the Web browser.
7
This definition explicitly includes technologies as well as user interaction.
A web application is computer program that utilizes web browsers and web
technology to perform tasks over the internet.

8. Web Browsers
A web browser (commonly referred to as a browser or client) is a software
application for retrieving, presenting, and traversing information resources on the
World Wide Web for example Chrome, Edge, Firefox, etc.
8

9. What is INTERNET?
The Internet is a worldwide collection of computers and computer networks that
links billions of computers used by businesses, government, educational
institutions, organizations, and individuals using modems, phone lines, satellite
links, fiber-optic connections, and other communications devices and media.
9

10. What is INTERNET?[Cont’d]
10

11. What is INTERNET?[Cont’d]
11
• The Internet was developed in the 1960s by the Department of Defense
Advanced Research Projects Agency (ARPA).
• ARPANET (as the Internet was originally called) had only four nodes on it and
sent its first message in 1969.
• Today’s Internet has millions of nodes on thousands of networks
• A network is a collection of two or more computers that are connected to share
resources and information.

12. An INTERNET minute
12

13. Servers
Web Server
A web server is a computer serving HTTP requests. This typically refers to a
computer running web server software such as Apache or Microsoft IIS (Internet
Information Services)
Application Server
An application server is a computer that hosts and execute web application which
may created in PHP,ASP.NET Ruby on Rail or some other web development
technology
13

14. Servers [Cont’d]
Database Server
A database server is a computer that is devoted to running a Database
Management System (DBMS) such as MySQL. Oracle or SQL sever that is being
used by web application
14

15. Web Protocols
Web Protocols
The Internet relies on a number of protocols in order to function properly. A protocol
is simply a standard for enabling the connection, communication, and data transfer
between two places on a network.
HTTP
HTTP stands for Hypertext Transfer Protocol. It is the standard protocol for
transferring web pages (and their content) across the Internet.
15

16. Web Protocols[Cont’d]
HTTPS
HTTPS stands for Hypertext Transfer Protocol Secure. It uses an extra Secure
Socket Layer (SSL). Think of it as a secure version of HTTP. HTTPS is used
primarily on web pages that ask you to provide personal or sensitive information
(such as a password or your credit card details).
When you browse a web page using HTTPS, you are using SSL (Secure Sockets
Layer). For a website to use HTTPS it needs to have an SSL certificate installed on
the server.
16

17. Web Protocols[Cont’d]
17
HTTP vs HTTPS

18. Web Protocols[Cont’d]
18
HTTP vs HTTPS [Cont’d]
HTTP HTTPS
The HTTP URL starts with HTTP:// and uses port 80 as its
default port.
The HTTPS URL starts with https:// and uses port 443 as its
default port.
HTTP is not secured and is susceptible to man-in-the-middle
attacks, which may lead to virus injections and leak sensitive
information to attackers.
HTTPS is encrypted and secured. It has the capability to resist
such attacks and provide authentication, privacy, and security.
This protocol was invented by Sir Timothy John. This protocol was invented by Netscape Corporation for its
Navigator browser.
Does not use an SSL certificate for communication and data
encryption.
Uses SSL certificate for communication and data encryption.
It addresses the need to exchange information over the
internet.
It addresses the need to exchange confidential information over
insecure internet.

19. Web Protocols[Cont’d]
19
HTTP vs HTTPS [Cont’d]
HTTP HTTPS
Does not improve search ranking. Improves search ranking. In the year 2014, Google began
utilizing HTTPS as a ranking signal.
It is faster than HTTPS because of its simplicity. It is a stateless
protocol and does not recall anything of the preceding web
session.
It is slower than HTTP. This is because establishing a secure
session takes up some processing time.
Does not save the referrer data. Referral sources only appear
as direct traffic.
Preserves Referrer data. Thus, makes google analytics more
effective and proves to be a big advantage for SEO.
Less trust with visitors as they feel a risk of security breach and
their sensitive information may be leaked out.
Establishes trust with visitors as they know that their sensitive
information like credentials, browsing history, account details,
etc. are not at the risk of exposure.

20. Web Protocols[Cont’d]
FTP
FTP stands for File Transfer Protocol. It is used to transfer files across the Internet.
FTP is commonly used by web developers to publish updates to a website (i.e., to
upload a new version of the website).
Where HTTP is used for displaying the file in your browser, FTP is used simply to
transfer the file from one computer to a specified location on another computer.
20

21. Web Protocols[Cont’d]
SMTP
Simple Mail Transfer Protocol - A protocol for e-mail messages on the Internet
ICMP
Internet Control Message Protocol- used to report problems with delivery of IP
datagrams within an IP network
TCP
Reliable transmission protocol and guarantees that the proper data transfer will
take place
21

22. Common Terms
World Wide Web (www)
• World Wide Web is a subset of the INTERNET
• In 1994, Burners Lee helped found the world
wide web Consortium (W3C)
• The World Wide Web, also called the Web, is
the part of the Internet that supports multimedia
and consists of a collection of linked documents
22

23. Common Terms[Cont’d]
23
URI
Uniform Resource Identifier (URI) is a string of characters used to identify a name
or a resource on the Internet. URNs, URCs and URLs, are all types of URI.
URC
Uniform Resource Citation (URC) points to meta data about a document rather than
to the document itself. An example of a URC is one that points to the HTML source
code of a page like: view-source:http://example.com/

24. Common Terms[Cont’d]
24
URN
Identifies a resource by a unique and persistent name but doesn't necessarily tell
you how to locate it on the internet. It usually starts with the prefix urn: For example:
urn:isbn:0451450523 to identify a book by its ISBN number.
Data URI
Rather than locating it on the internet, or naming it, data can be placed directly into
a URI. An example would be data:Hello%20World.

25. Common Terms[Cont’d]
25
URL
A Uniform Resource Locator (URL) is a subset of the Uniform Resource Identifier
(URI) that specifies where an identified resource is available and the mechanism
for retrieving it.
Contains information about how to fetch a resource from its location.
URLs always start with a protocol (http) and usually contain information such as the
network host name (example.com) and often a document path (/foo/mypage.html).
URLs may have query parameters and fragment identifiers.

26. Common Terms[Cont’d]
26

27. Common Terms[Cont’d]
27
IP Address
• Every computer connected to the Internet must have a unique Internet Protocol
address (IP address), no matter whether it’s a client or a server (or both)
• An IP address is just a number that identifies a host on the Internet. Example:
212.171.218.34 or 144.214.5.218
Every domain has a unique IP address
www.google.com is equal to 172.217.10.78

28. Common Terms[Cont’d]
28
DNS
• The Domain Name System (DNS) is a database that matches IP addresses to
host names
• The Domain Name System (DNS) translates host names into IP addresses,
which are then used by TCP to establish connections between HTTP clients
and servers.
• Domain names are administered in such a way that they are guaranteed to be
unique.

29. Top-Level Domains (TLD)
29
Name Identity Description
.com Commercial Commercial Businesses
.net Network Internet or Technology companies
.edu Educational Educational Institutes
.org Organization Nonprofit Organizations
.mil Military Reserved for U.S. Military
.gov Government Government Organizations
In 1985, The Internet Assigned Numbers Authority (IANA) released six top-level
domain names. These TLDs became known as domain name extensions and
represent the highest level in the Domain Name System hierarchy:

30. Country code Top-Level Domains (ccTLD)
30
To distinguish one country from another, especially one that would like to use a top-
level domain such as .gov or .mil, two letter domains were established and became
associated with countries or geographical locations.
The first registered ccTLDs were .us, .uk, and .il, all registered in 1985. In 1986,
.au, .de, .fi, .fr, .jp, .kr, .nl, and .se were registered.
Pakistan got its ccTLD in 1992 with .pk.
As of May 20, 2017, there were 255 ccTLDs (For comparison, at the same time
the United Nations comprised 193 countries.)

31. Interesting Facts
31

32. Interesting Facts[Cont’d]
32

33. Multi-Tier Applications
33
Web-based applications are often multitier applications (sometimes referred to as
n-tier applications) that divide functionality into:

34. Multi-Tier Applications[Cont’d]
34
Presentation Tier (Top Tier)
The top-most level of the application is the user interface. The main function
of the interface is to translate tasks and results the something that user can
understand (GUI).
Logic Tier (Middle Tier)
This layer coordinates the application, processes commands, makes logical
decision and calculations. It also moves and process data between the two
surrounding layers.

35. Multi-Tier Applications[Cont’d]
35
Data Tier (Bottom Tier)
Here information stores and retrieved from database or file system. The
information is then passed back to the logic layer and then eventually back to
user.

36. Scripting Languages
36
A script or scripting language is a computer language with a series of commands
within a file that is capable of being executed without being compiled. For Web
pages they are instructions either to the Web browser (client-side scripting) or to
the server (server-side scripting).
Scripting languages do not require the compilation step and are rather
interpreted.
Some scripting languages traditionally used without an explicit compilation step are
JavaScript, PHP, Python, Ruby, etc.

37. Client-Side vs Server-Side
37
Web development is all about communication. In this case, communication
between two (2) parties, over the HTTP protocol:
• The Server - This party is responsible for serving pages
• The Client - This party requests pages from the Server and displays them to the
user. In most cases, the client is a web browser.
• The User - The user uses the Client in order to surf the web, fill in forms,
watch videos online, etc.
• Each side's programming refers to code that runs at the specific machine, the
server's or the clients.

38. Client-Side vs Server-Side[Cont’d]
38
Basic Example of Client-Side vs Server-Side
• The User opens his web browser (the Client).
• The User browses to http://google.com.
• The Client (on behalf of the User), sends a request to http://google.com (the
Server), for their home page.
• The Server then acknowledges the request and replies to the client with some
meta-data (called headers), followed by the page's source.
• The Client then receives the page's source and renders it into a human-
viewable website.

39. Client-Side vs Server-Side[Cont’d]
39
Basic Example of Client-Side vs Server-Side [Cont’d]
• The User types “COMSATS Wah” into the search bar, and presses Enter
• The Client submits that data to the Server.
• The Server processes that data, and replies with a page matching the search
results.
• The Client, once again, renders that page for the User to view.

40. Client-Side vs Server-Side[Cont’d]
40
Client-Side Scripting
Client-side programming is the name for all of the programs which are run on the
Client.
Uses:
• Make interactive webpages.
• Make stuff happen dynamically on the web page.
• Interact with temporary storage, and local storage (Cookies).
• Send requests to the server, and retrieve data from it.

41. Client-Side vs Server-Side[Cont’d]
41
Client-Side Scripting [Cont’d]
Examples:
• JavaScript (primarily)
• HTML*
• CSS*
• Any language running on a client device that interacts with a remote service is a
client-side language.
*HTML and CSS are markup syntax by which the Client renders the page for the User.

42. Client-Side vs Server-Side[Cont’d]
42
Server-Side Scripting
Server-side programming, is the general name for the kinds of programs that are
run on the Server.
Uses:
• Process user input.
• Compiles pages.
• Structure web applications.
• Interact with permanent storage (SQL, files).

43. Client-Side vs Server-Side[Cont’d]
43
Server-Side Scripting [Cont’d]
Examples:
• PHP
• Python
• ASP.NET in C#, C++, or Visual Basic.
• Nearly any language (C++, C#, Java). These were not designed specifically for
the task but are now often used for application-level web services.