Introduction to Web Technologies

Introduction to
web development

JEREMIAH O. BANDELE
Ph.D. Electrical/Electronic Engineering
 Introduction to Web Technologies

Learning objectives
At the end of this lesson, you should be able to:
● Define web development and its components.
● Describe the roles of web browser and servers.
● Explain the client-server mode.
● Identify key web components and technologies.
 Introduction to Web Technologies

Introduction
Web development is the process of creating websites and web applications
for the internet.
It involves coding with languages like HTML, CSS, JavaScript and node.js to
design both the user interface (front-end) and the server logic (back-end).
 Introduction to Web Technologies

Introduction
Front-end developers focus on the visual aspects, while back-end developers handle
server-side operations and databases.
Web development is a dynamic field that demands continuous learning due to evolving
technologies and standards.
It enables developers to bring ideas to life online, whether it’s a personal blog,
e-commerce site, or complex web application.
 Introduction to Web Technologies

Web Browsers and Servers

The World Wide Web is an integral part of our digital lives, and at its core are web
browsers and servers.
Web browsers and servers play distinct but interconnected roles in delivering web
content and enabling user interactions.
 Introduction to Web Technologies

Web Browsers
Web browsers are software applications that allow users to access and interact with
content on the World Wide Web.
They interpret and display web content, such as text, images, and multimedia, in a
user-friendly format.
Examples include Chrome, Firefox, Safari, and Edge.
 Introduction to Web Technologies

Web Servers
Web servers are specialized software or hardware that store, manage, and serve web
content to users' browsers.
They handle incoming requests, process them, and respond with the requested
resources.
Examples of web server software include Apache, Nginx, and Microsoft IIS.
 Introduction to Web Technologies

The Client-Server Model

The web operates on a fundamental architecture known as the client-server model.
Client: The client is typically a web browser or a mobile app that initiates communication
by requesting web resources.
Server: The server, on the other hand, is responsible for processing client requests and
delivering the requested content.
This model governs how information and data are exchanged between clients and servers
on the web.
 Introduction to Web Technologies

Key Components of Web Browsers and Servers

To understand web browsers and servers beer, let’s explore their key components
Uniform Resource Locator (URL): URLs are web addresses that specify the location of
web resources.
Hypertext Transfer Protocol (HTTP): HTTP is the protocol used for communication
between browsers and servers.
HTML, CSS, and JavaScript: These are the core technologies used to create and display
web content.
 Introduction to Web Technologies

Browser Functionality
Web browsers oer several critical functionalities
Rendering Web Pages: Browsers interpret HTML, CSS, and JavaScript to render web pages.
User Interface: They provide user interfaces for navigating the web and interacting with web
content.
Extensions and Plugins: Browsers support extensions and plugins that enhance
functionality.
 Introduction to Web Technologies

Browser Functionality
Bookmarking and History: Users can save and access their favourite websites and
browsing history.
Security: Browsers implement security features to protect users from malicious
websites and threats.
 Introduction to Web Technologies

Server Functionality
Web servers serve as the backbone of the web ecosystem and it can carry out the following
functions;
Request Handling: Servers receive HTTP requests from clients and process them.
Data Storage: They store web content, such as HTML files, images, videos, and databases.
Dynamic Content Generation: Servers can dynamically generate content based on user
requests, often by processing data from databases or performing computations.
 Introduction to Web Technologies

Server Functionality
Security: Servers implement security measures like HTTPS to protect data in transit
and at rest.
Load Balancing: In large-scale applications, load balancers distribute incoming
requests across multiple servers for improved performance and reliability.
 Introduction to Web Technologies

Client-Server Interaction
The interaction between web browsers and servers follows a specific paern as
follows;

• A user enters a URL or clicks on a link in the browser.

• The browser sends an HTTP request to the appropriate web server.

 Introduction to Web Technologies

Client-Server Interaction

• The server processes the request, retrieves the requested resource, and sends an

HTTP response back to the browser.

• The browser then renders and displays the received content to the user.
 Introduction to Web Technologies

Web Development Tools

Web development is a dynamic field that relies heavily on various tools to streamline the
development process.
Web development tools encompass a wide range of software and utilities designed to
aid developers in creating, testing, and managing websites and web applications.
 Introduction to Web Technologies

Web Development Tools

Web development tools refer to software, utilities, and resources that assist
web developers in designing, building, testing, and maintaining websites and
web applications.
These tools are essential for enhancing eiciency, code quality, and
collaboration among development teams.
 Introduction to Web Technologies

Key Categories of Web Development Tools

Web development tools can be categorized into several key groups
Text Editors and Integrated Development Environments (IDEs)
Browser Developer Tools
Version Control Systems (VCS)
 Introduction to Web Technologies

Mid-lesson question
● Imagine you want to build a personal blog website. What would be a key task of the
front-end developer in this project?
● Suppose you’re browsing the web and click on a link to visit a website. Describe the
sequence of actions that occur between your browser and the web server to display
the requested webpage.
 Introduction to Web Technologies

Answer: Mid-lesson question

● A key task of the front-end developer in building a personal blog website would
be designing the user interface and ensuring that the website’s content is
presented in an aractive and user-friendly manner.
● When you click on a link to visit a website, your browser sends an HTTP request
to the web server hosting the website. The server processes the request,
retrieves the requested webpage’s resources, and sends an HTTP response
back to your browser. Your browser then renders and displays the received
content on your screen, allowing you to interact with the website.
 Introduction to Web Technologies

Text Editors and IDEs

Text Editors: Text editors are lightweight software applications used for writing and
editing code eiciently.
• Examples of popular text editors include Visual Studio Code, Sublime Text, and
Atom.
Integrated Development Environments (IDEs): IDEs are comprehensive
development environments that provide code editing, debugging, and other
development features.
• IDEs include JetBrains WebStorm, Microsoft Visual Studio, and Eclipse.
 Introduction to Web Technologies

Browser Developer Tools

Most modern web browsers come with built-in developer tools.
These tools allow developers to inspect and manipulate web page elements, debug
JavaScript, analyse network traic, and optimize web performance.
Browser developer tools are invaluable for web debugging and optimization.
Popular browsers like Chrome, Firefox, Safari, and Edge have their own developer tool
sets.
 Introduction to Web Technologies

Version Control Systems (VCS)

VCS is a crucial tool for managing code repositories, tracking changes, and
facilitating collaborative web development.
Git is one of the most widely used VCS systems, known for its distributed
nature and branching capabilities.
VCS platforms like GitHub and GitLab provide hosting and collaboration
features for development teams.
 Introduction to Web Technologies

The Role of VCS in Web Development

Code Collaboration: Developers can work on the same project simultaneously without
conflicts.
Version History: VCS maintains a history of changes, enabling rollbacks and
comparisons.
Branching and Merging: Developers can create branches for new features and merge
them back into the main codebase.
Code Backup: VCS serves as a reliable backup mechanism, ensuring code
preservation.
 Introduction to Web Technologies

Client-Server Architecture
Client-server architecture is a fundamental concept in web development and networked
computing.
It governs how information and resources are shared and accessed across the web.
Client-server architecture is a computing model in which client devices (e.g., web
browsers, mobile apps) request services or resources from server devices (e.g., web
servers, database servers).
It is the foundation of the World Wide Web and many networked applications.
 Introduction to Web Technologies

Responsibilities of Clients and Servers

In client-server architecture, clients and servers have distinct roles and responsibilities
Clients:
• Clients initiate requests for services or resources from servers.
• They provide user interfaces for users to interact with applications.
Servers:
• Servers process client requests, retrieve data, and generate responses.
• They store and manage data, perform computations, and enforce business logic.
 Introduction to Web Technologies

Types of Servers
There are various types of servers, each serving a specific purpose. Let us see
some of them.
Web Servers: Serve web content and handle HTTP requests. Examples include
Apache, Nginx, and Microsoft IIS.
Database Servers: Manage data storage and retrieval. Popular options include
MySQL, PostgreSQL, and MongoDB.
Application Servers: Execute application-specific code and process user
requests. Node.js is an example.
Proxy Servers: Act as intermediaries between clients and other servers, often
used for caching, load balancing, and security.
 Introduction to Web Technologies

Web Servers
Web servers are responsible for serving web content to clients. Key functions
include;
• Processing incoming HTTP requests.
• Locating and retrieving requested web resources.
• Delivering HTML, CSS, JavaScript, and other files to clients.
• Handling routing and directing requests to the appropriate application
components.
 Introduction to Web Technologies

Database Servers
Database servers are crucial for storing and managing data. Their functions include;

• Storing structured data in databases.

• Managing data integrity and security.

• Processing queries to retrieve and update data.

• Enforcing data consistency and validation rules.

 Introduction to Web Technologies

Application Servers
Application servers execute application-specific code. They are responsible for;

• Processing user requests and application logic.

• Managing sessions and state.

• Interacting with databases and external services.

• Generating dynamic content for clients.

 Introduction to Web Technologies

Proxy Servers
Proxy servers act as intermediaries between clients and other servers. They
serve various purposes, such as;

• Caching frequently accessed content to reduce server load and improve

response times.

• Load balancing traic across multiple backend servers for scalability and

redundancy.

• Enhancing security by filtering and inspecting incoming requests and

responses.
 Introduction to Web Technologies

Advantages of Client-Server Architecture

Scalability: Servers can be added to handle increased load, ensuring performance
and availability.
Centralized Data Management: Data is stored and managed centrally, ensuring
consistency and security.
Separation of Concerns: Separating client-side and server-side logic simplifies
development, maintenance, and scalability.
 Introduction to Web Technologies

Summary

• Web development encompasses creating websites and web

applications. It involves front-end (user interface) and back-end
(server logic) development.
• Web browsers interpret and display web content.

• Web servers store, manage, and serve web resources.

• The client-server model governs web communication.

• Key components include URLs, HTTP, HTML, CSS, and JavaScript.

• Web browsers oer rendering, user interface, extensions, and security.

 Introduction to Web Technologies

Summary

• Web servers handle request processing, data storage, dynamic

content, security, and load balancing.
• Client-server interaction involves URL input, HTTP requests,
processing, and content rendering.
• Web development tools aid in design, development, testing, and
management.
 Introduction to Web Technologies

FURTHER READING RESOURCES

● Ducke, J. (2011). HTML and CSS: Design and Build Website. John Wiley & Sons
● Crockford, D. (2008). JavaScript: The Good Parts: The Good Parts. " O'Reilly
Media, Inc.".
● Robbins, J. N. (2012). Learning web design: A beginner’s guide to HTML, CSS,
JavaScript, and web graphics. " O'Reilly Media, Inc.".
● Gourley, D., & Toy, B. (2002). HTTP: the definitive guide. " O'Reilly Media, Inc.".
● Nedelcu, C. (2010). Nginx hp server. Packt Publishing Ltd.
● Casciaro, M. (2014). Node. js Design Paerns. Packt Publishing Ltd.
● Loeliger, J., & McCullough, M. (2012). Version Control with Git: Powerful tools
and techniques for collaborative software development. " O'Reilly Media, Inc.".
 Introduction to Web Technologies

FURTHER READING RESOURCES

● Kleppmann, M. (2017). Designing Data-Intensive Applications.
“O’Reilly Media, Inc.”
● Grigorik, I. (2013). High Performance Browser Networking: What every
web developer should know about networking and web performance. "
O'Reilly Media, Inc.".
● Bendoraitis, A. (2016). Web Development with Django Cookbook. Packt
Publishing Ltd.
Introduction to Web Technologies

Thank
You