Foundations of Web

Development (Part 1)
 Introduction

 To Recognize the Digital Age:

 In the digital age, information flows
across borders, and connections are
formed quickly.
 To Highlight the Web's Significance:
 The web is a cornerstone of modern
communication and interaction.
 To Describe the Web's Impact:
 It is a dynamic ecosystem deeply
integrated into our lives, influencing how
we learn, work, and engage in leisure
activities.

2
 Understanding the Web Ecosystem: Mapping the Terrain

 A Complex Ecosystem: Delve into the

intricate web ecosystem, which extends
beyond interconnected computers. It's a
dynamic world where ideas, data, and
creativity converge, shaping the digital
landscape.
 Foundational Concepts: Navigate
through the foundational concepts that
underpin the web's functionality, such as
protocols, servers, and clients.
Understand how these elements work in
harmony.
 Intricate Architecture: Uncover the
web's intricate architecture, where each
component plays a vital role in delivering
content and services. Explore how these
pieces fit together to create the digital
universe we navigate daily.

3
 Origins and Evolution of the Web: A Historical Perspective

 Visionary Genesis: Explore the

visionary idea of Sir Tim Berners-
Lee, the architect behind the web's
inception. He conceptualized an
interconnected information space
that would revolutionize human
communication.
 Dawn of a New Era: Witness the
monumental moment in 1990 when
the World Wide Web was
introduced. This marked the
beginning of a transformative era in
human communication and
information sharing.

4
 The Web's Pillars: Protocols, Languages, and Standards

 Protocols: Protocols define the rules

for how devices communicate with each
other on the web. HTTP (Hypertext
Transfer Protocol) is the most important
protocol, as it is used to transfer web
pages and other resources between
web servers and browsers.
 Languages: Languages are used to
create and display web content. HTML
(Hypertext Markup Language) is used to
create the structure of web pages, CSS
(Cascading Style Sheets) is used to
style web pages, and JavaScript is used
to add interactivity to web pages.
 Standards: Standards help to ensure
that web content is accessible to
everyone and that web browsers and
other software can display it correctly.
The World Wide Web Consortium (W3C)
is responsible for developing and
maintaining web standards.
5
 Client-Server Architecture: Facilitating User-Web
Interactions

 Overview: Client-server architecture is a distributed system design that allocates tasks and
resources between two distinct types of computer programs: clients and servers. Clients initiate
requests for services from servers, which process the requests and return the results to the
clients.
 Client's Role: In the context of the web, users act as clients by sending HTTP requests to web
servers. These requests typically specify the URL of the resource that the user wants to access.
 Server's Response: Web servers receive and process HTTP requests from clients. If the request
is valid, the server will return the requested resource to the client. Otherwise, the server will
return an error response.

6
 The Role of Web Browsers: Gateway to the Digital Frontier

 Overview: Web browsers are software applications that allow users to access and view web
pages. They are essential gateways to the digital frontier, providing users with a window into
the vast and ever-evolving world of the web.
 Interpreting Languages: Web browsers are responsible for interpreting the core languages of
the web - HTML, CSS, and JavaScript. These languages are used to create the structure, style,
and interactivity of web pages.
 Rendering Web Pages: Once a web browser has interpreted the HTML, CSS, and JavaScript of
a web page, it renders the page into a visual representation that can be displayed on the user's
screen.

7
 Beyond Web Pages: Exploring Web Applications and
Services

 Overview: The web has evolved beyond static web pages to

encompass dynamic web applications and services. These digital
innovations harness intricate backend processes to empower users
with a plethora of functionalities.
 Key Components: Web applications and services are typically built
on frameworks, APIs, and databases. Frameworks provide a pre-
built structure and set of tools that developers can leverage to
streamline the development process. APIs (Application Programming
Interfaces) allow web applications and services to communicate with
each other and with backend systems. Databases store data that is
used to power web applications and services.
 Examples: Common examples of web applications and services
include social media platforms, e-commerce websites, and online
banking portals. These applications and services allow users to
interact with each other and with businesses in a variety of ways,
such as sharing content, making purchases, and managing their
finances.
8
 Front-End vs. Back-End

 Overview: The web is a dual entity, comprising two vital components - the front-end and the
back-end. The front-end is the part of the web that users see and interact with, while the back-end
is the part of the web that powers the front-end and handles all the behind-the-scenes operations.
 Front-End Focus: Front-end developers are responsible for creating the user interface of a
website or web application. This includes designing the layout, choosing the colors and fonts, and
adding interactivity. Front-end developers use a variety of programming languages and
technologies, such as HTML, CSS, and JavaScript, to create the front-end of a website or web
application.
 Back-End Power: Back-end developers are responsible for building and maintaining the server-
side logic of a website or web application. This includes handling user requests, processing data,
and storing and retrieving data from a database. Back-end developers use a variety of
programming languages and technologies, such as Python, Java, and PHP, to build the back-end of
a website or web application.

9
 Technologies Used in Front-End and Back-End

 Front-End Stack:
 HTML (HyperText Markup Language) is the foundation of the web,
providing the structure for web pages.
 CSS (Cascading Style Sheets) is used to style web pages, including the
layout, colors, and fonts.
 JavaScript is a programming language that is used to add interactivity to
web pages.
 Back-End Toolbox:
 Python is a general-purpose programming language that is popular for
back-end development due to its simplicity and readability.
 Java is a platform-independent programming language that is known for
its reliability and security.
 PHP is a scripting language that is specifically designed for web
development.

10
 Recap of What We've Covered So Far

 Foundational Concepts:
 Web Ecosystem: The web ecosystem is a complex network of technologies and protocols that
work together to make the web possible.
 HTTP Protocol: The HTTP protocol is the foundation of the web, enabling communication
between web servers and browsers.
 Front-End and Back-End Development: Front-end development focuses on the user interface
of a website or web application, while back-end development focuses on the server-side logic
and data processing.
 Our Ongoing Journey:
 Diving Deeper into Web Development: In the upcoming lectures, we'll explore a
variety of web development topics in greater depth, including:
 Programming languages and technologies
 Web frameworks and libraries
 Databases
 Security and performance
 Testing and deployment

11
Demystifying the HTTP Protocol: Decoding the Language of
Web Communication

 What is HTTP?
 HTTP stands for Hypertext Transfer Protocol. It is the underlying protocol
that powers the web, enabling communication between web servers and
browsers.
 Why is HTTP important?
 HTTP is essential for the functioning of the web. It is used to transfer web
pages, images, videos, and other resources between web servers and
browsers.
 How does HTTP work?
 HTTP is a request-response protocol. This means that a client sends a
request to a server, and the server sends back a response.
 The client's request typically specifies the resource that the client wants to
access, such as a web page or an image. The server's response typically
contains the requested resource, as well as other information, such as the
status code and the content type.

12
 HTTP Basics: Request and Response

 An analogy:
 HTTP mirrors the process of placing an order in a cafe:
 HTTP request: You walk up to the counter and tell the barista what you
want (e.g., a latte).
 HTTP response: The barista makes your drink and gives it to you.
 In the same way, an HTTP request is a message sent from a
client to a server, specifying what the client wants (e.g., a web
page). The server then sends back an HTTP response, which
contains the requested resource, as well as other information,
such as the status code and the content type.

13
 Anatomy of an HTTP Request

 An HTTP request is a message sent from a

client to a server, specifying what the client
wants. It consists of several essential
components, including:
 HTTP method: The HTTP method specifies the
action that the client wants the server to perform.
Common HTTP methods include:
 GET: Retrieve a resource from the server.
 POST: Create a new resource on the server.
 PUT: Update an existing resource on the server.
 DELETE: Delete a resource from the server.
 URL: The URL (Uniform Resource Locator)
specifies the resource that the client wants to
Example of an HTTP request:
access.
GET /index.html HTTP/1.1
 Headers: Headers provide additional information Host: www.example.com
about the request, such as the content type of the This HTTP request is asking the server to
requested resource and the user agent of the retrieve the web page index.html from the
website www.example.com.
client.
 Request body: The request body contains the data
that the client is sending to the server.
14
 Breaking Down an HTTP Response
 An HTTP response is a message sent
from a server to a client, containing the
requested resource and other
information. It consists of several
essential components, including:
 Status line: The status line indicates the
outcome of the request. It consists of a
status code, a reason phrase, and the
HTTP version.
 Headers: Headers provide additional
information about the response, such as
the content type of the response and the
date and time that the response was
generated.
 Response body: The response body
contains the requested resource, or an
error message if the request failed.

15
 HTTPS: Secure HTTP

 What is HTTPS?
 HTTPS (Hypertext Transfer Protocol Secure) is a secure
version of HTTP that encrypts data in transit. It is used to
protect web traffic from eavesdropping and man-in-the-
middle attacks.
 How does HTTPS work?
 HTTPS uses SSL/TLS (Secure Sockets Layer/Transport
Layer Security) protocols to create secure connections.
These protocols use a combination of public and private
key encryption to encrypt and decrypt data.
 When a client connects to an HTTPS website, the client
and server negotiate a secure connection using SSL/TLS.
Once a secure connection is established, all data
transmitted between the client and server is encrypted.
 Why is HTTPS important?
 HTTPS is important because it protects user privacy and
security. By encrypting data in transit, HTTPS prevents
attackers from eavesdropping on web traffic and stealing
sensitive information, such as passwords and credit card
numbers.
16
 Status Codes: Deciphering the Web's Language

 What are status codes?

 Status codes are three-digit numbers that indicate the outcome of an HTTP request. They are
used by servers to communicate the success or failure of a request to clients.
 Examples of status codes:
 Some common status codes include:
 200 OK: The request was successful.
 301 Moved Permanently: The requested resource has been moved to a new location.
 404 Not Found: The requested resource could not be found.
 500 Internal Server Error: An unexpected error occurred on the server.
 Importance of status codes:
 Status codes are important because they help developers to troubleshoot problems and debug
applications. By understanding the different status codes, developers can quickly identify the
cause of an error and take steps to resolve it.
 How to read status codes:
 Status codes are typically divided into five categories:
 1xx Informational: These status codes indicate that the request is still in progress.
 2xx Successful: These status codes indicate that the request was successful.
 3xx Redirection: These status codes indicate that the client needs to take additional action to
complete the request.
 4xx Client Error: These status codes indicate that the client made an error in the request.
 5xx Server Error: These status codes indicate that an error occurred on the server.

17
 Statelessness and Cookies

 Statelessness:
 HTTP is a stateless protocol, meaning that each request is independent of all previous requests. This
means that the server does not keep track of any information about the client between requests.
 Cookies:
 Cookies are used to maintain user context across requests. A cookie is a small piece of data that is stored
on the client's computer by the server. When the client makes a subsequent request to the server, the
cookie is sent back to the server. The server can then use the cookie to identify the client and maintain
their context.
 Example:
 One example of how cookies are used is to maintain a user's shopping cart on an e-commerce website.
When a user adds an item to their shopping cart, the e-commerce website stores a cookie on the user's
computer. When the user makes a subsequent request to the e-commerce website, the cookie is sent
back to the website. The website can then use the cookie to identify the user and load their shopping cart.
 Benefits of cookies:
 Cookies provide a number of benefits, including:
 Maintaining user context: Cookies can be used to maintain user context across requests, such as a user's
shopping cart or login status.
 Personalization: Cookies can be used to personalize the user experience, such as by recommending products
or displaying relevant content.
 Analytics: Cookies can be used to collect analytics data about user behavior, such as which pages they visit and
how long they stay on each page.
18
 HTML: The Blueprint of Web Content

 What is HTML?
 HTML stands for HyperText Markup Language. It is the standard markup language for creating
web pages.
 What is HTML used for?
 HTML is used to define the structure and content of web pages. It uses a variety of tags to define
different elements of a web page, such as headings, paragraphs, images, and links.
 How does HTML work?
 When a web browser encounters an HTML file, it parses the HTML code and renders the web page
accordingly. The web browser reads the HTML tags and uses them to determine how to display the
content of the web page. <!DOCTYPE html>
<html>
 Example: <head>
 The following is a simple example of HTML code: <title>My Web Page</title>
</head>
<body>
<h1>This is my web page!</h1>
</body>
</html>

 This HTML code will create a web page with a single heading that says "This is my web page!".
 Importance of HTML:
 HTML is an essential part of the web ecosystem. It is used to create all web pages, and it is the
foundation for all other web technologies, such as CSS and JavaScript.
19
 HTML Document Structure

 An HTML document is structured with a hierarchy of tags. The most

important tags are <html>, <head>, and <body>.
 <html>: This tag marks the beginning and end of the HTML document.
 <head>: This tag contains information about the web page, such as the title and meta
tags.
 <body>: This tag contains the visible content of the web page, such as headings,
paragraphs, images, and links.

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a sample paragraph of text.</p>
</body>
</html>

20