INTRODUCTION TO WEB

TECHNOLOGIES
(IFT 203)
BY
Mal. Fa’iza I. Abdulhamid
&
Mal. Abba Dauda

Febuary, 2025
 ORIGIN OF THE INTERNET

• The internet originated with the Advanced Research Projects

Agency (ARPANET) in 1969. ARPANET was a computer network
that connected universities in the United States. The internet
evolved from ARPANET and became available to the public in
1991.
 Key Milestones in the History of the Internet

• 1969: ARPANET connected computers at four universities. The first

message was sent over ARPANET from UCLA to Stanford Research
Institute.
• 1970s: The TCP/IP protocol was introduced.

• 1990s: Web browsers and e-commerce became popular.

• 1991: The World Wide Web was created by Tim Berners-Lee.

• 1990: Archie, the first web search engine, was created by Alan Emtage.

• 1989: America Online (AOL) was launched, making the internet more
popular with the average user.
 ORIGIN OF WWW

• The World Wide Web (WWW) was invented by Tim Berners-Lee

in 1989 while he was working at CERN, the European Laboratory
for Particle Physics. Berners-Lee created the WWW to allow
scientists to share information automatically.
 INTRODUCTION TO WEB TECHNOLOGY

• Web technology is the collection of tools and techniques that allow

computers to communicate with each other over the internet. It
includes the software, hardware, and programming languages used
to create and run websites and web applications.
 How does Web Technology Work?

• A web browser displays web pages, which are linked to the World
Wide Web.
• The browser sends a request to a web server for the requested page.

• The web server processes the request and sends the page back to
the browser.
• The browser displays the page on the user's device.
 Why is Web Technology Important?

• Web technology allows people to interact with information hosted

on the internet.
• It enables the sharing of data and integration of multimedia across
the internet.
• Web technology is essential for the development of responsive
websites and applications.
 Importance of Web Technology
Here are some key points highlighting the importance of web
technology:
•Global Reach: The Internet and web technology allow businesses to
reach a worldwide audience with their products and services.
•Cost-Effective: Web technology enables businesses to reduce costs by
automating processes, improving efficiency, and reducing the need for
physical infrastructure.
•Improved Communication: Web technology facilitates communication
and collaboration across organizations and geographies, enabling better
knowledge sharing and decision-making.
 Importance of Web Technology CONT...
• Enhanced Customer Experience: Web technology allows businesses to
provide a more personalized, interactive, and engaging customer
experience.
• Access to Data: Web technology provides vast amounts of data that can be
used for analysis, insights, and informed decision-making.
• Mobile Access: Web technology enables businesses to reach customers
through mobile devices, which have become increasingly important in
people's lives.
• Innovation: Web technology drives innovation by providing a platform for
new products, services, and business models.
• Social Impact: Web technology can improve social and economic
outcomes by providing access to education, healthcare, and other essential
 Why Learn Web Technology?
Here are some key points highlighting why learning web technology can be
beneficial:
•In-Demand Skills: Web technology skills are in high demand, with many
companies seeking professionals who can design, develop, and maintain web-
based applications.
•Career Opportunities: Learning web technology can open up many career
opportunities, including web development, web design, e-commerce, and
digital marketing.
•Flexibility: Web technology can be used to build various applications and
services, providing flexibility in the type of work that can be undertaken.
•Entrepreneurship: Web technology provides a platform for entrepreneurship,
enabling individuals to create and launch their web-based businesses.
 Why Learn Web Technology? CONT...
• Creativity: Web technology allows for creative expression through web
design and development, providing opportunities to create visually
appealing and engaging user interfaces.
• Continuous Learning: Web technology constantly evolves, providing
continuous learning and skill development opportunities.
• Remote Work: Web technology skills are highly transferable and can be
applied remotely, providing remote work and freelancing opportunities.
• Competitive Advantage: Knowledge of web technology can provide a
competitive advantage in the job market and business, enabling
individuals and companies to stay ahead of the curve.
 Classification of Web Technology
• World Wide Web (WWW): It enables users to browse and access
information through web browsers.
• Web servers: They process requests and send responses to web
browsers
• Web browsers: They are the tools we use to look at web pages
• HTML: It's a language that helps structure and show content on web
pages
• CSS: It helps make web pages look pretty by adding colors, fonts, and
styles
• JavaScript: It's a language that makes web pages do cool stuff like
animations and interactive features
• Backend Technologies: They are the tools used to make the server-side
parts of web apps work
• Database Systems: They store and retrieve data used in web apps
 Frontend Development

The part of a website that the user interacts directly is termed as front
end. It is also referred to as the ‘client side’ of the application.
 Front-end (client-side) technologies

Front-end technologies are for the “client side” of your website or

application. They’re used to develop the interactive components of
your website, and produce the elements that users see and interact
with. This includes text colours and styles, images, buttons, and
navigation menus.
 Frontend Development
Languages/Technologies
The front-end portion is built by using some languages which are
discussed below:
•HTML: HTML stands for Hypertext Markup Language. It is used to
design the front-end portion of web pages using a markup language.
HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. The markup
language is used to define the text documentation within the tag
which defines the structure of web pages.
 Frontend Development
Languages/Technologies

HTML5: the most current version of HTML, specifies a large number

of Application Programming Interfaces (API that can be used with
JavaScript for a more interactive and dynamic website:
•Canvas: Canvas is an HTML5 element used to draw images and
shapes and manipulate them. It can also be used for more complex
cases such as game graphics and animations.
•Web Storage: Web Storage is used to store information right in the
browser. Some examples of this would be storing user login
information and saving user preferences for a website.
 Frontend Development
Languages/Technologies

• Service workers: Service workers enable a script that keeps

running in the background when a web page is opened and is
mainly used in websites with offline capabilities. It makes pages
available offline and allows for the use of web push notifications. It
can send these notifications even when your browser isn’t open.
• WebSockets: WebSockets allows for persistent two-way
connection between the user and the server. The most common use
cases include chats and notifications in web apps.
 Frontend Development
Languages/Technologies Cont…
The front-end portion is built by using some languages which are
discussed below:
•HTML: HTML stands for Hypertext Markup Language. It is used to
design the front-end portion of web pages using a markup language.
HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. The markup
language is used to define the text documentation within the tag
which defines the structure of web pages.
 Frontend Development
Languages/Technologies Cont…

• CSS: Cascading Style Sheets fondly referred to as CSS is a simply

designed language intended to simplify the process of making web
pages presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent of the
HTML that makes up each web page.
• JavaScript: JavaScript is a famous scripting language used to
create magic on the sites to make the site interactive for the user. It
is used to enhancing the functionality of a website to running cool
games and web-based software.
 Frontend Development
Languages/Technologies Cont…

• AJAX: Ajax is an acronym for Asynchronous JavaScript and

XML. It is used to communicate with the server without refreshing
the web page and thus increasing the user experience and better
performance.
• There are many other languages through which one can do front-
end development depending upon the framework for example
Flutter user Dart, React uses JavaScript and Django uses Python,
and much more.
 Backend Development

Backend is the server side of a website. It is thepart of the website

that users cannot see and interact. It is the portion ofsoftware that
does not come in direct contact with the users. It is used to store and
arrange data.
 Back-end (server-side) technologies

• Back-end technologies are for the “server side” of your website or

application. They’re for developing the technical foundation. They
store and arrange data and make sure everything on the front-end
works. For example, when a user provides login credentials to a
social media application, back-end technologies are used to check if
those credentials are accurate. Once the credentials are verified, the
server will send back the profile name, picture, and other associated
information.
 Backend/Databases

In web technology, a database is a structured collection of data that is

stored electronically and accessed via a web application. It serves as the
backend component where data is stored, managed, and retrieved.
Databases can be relational (like MySQL, PostgreSQL) using structured
tables and SQL for queries, or non-relational (like MongoDB, CouchDB)
which store data inflexible, document-oriented formats. They enable web
applications to handle dynamic content, user data, transactions, and more
by providing efficient storage, retrieval, and manipulation capabilities.
Database management systems (DBMS) are used to interact with the
database, ensuring data integrity,security, and performance.
 Backend/Databases Cont..

Relational Database: A relational database stores data in tables,

similar to a spreadsheet, where each table has rows and columns. The
rows hold individual records, and the columns define the data
attributes. Tables can be linked to each other through special keys,
allowing related data to be connected.
•Postgre SQL: PostgreSQL is a powerful, open-source relational
database that supports advanced SQL features and complex queries. It
handlesstructured data, ensures ACID compliance, and is known for its
reliabilityand extensibility.
 Backend/Databases Cont..

• MariaDB: MariaDB is an open-source relational database that

evolved from MySQL, offering improved performance, security, and
features. It supports SQL queries, ACID compliance, and is highly
compatible with MySQL.
• MySQL: MySQL is an open-source relational database management
system that uses SQL for managing structured data. It’s known for
its reliability, ease of use, and performance, widely used in web
applications.
 Backend/Databases Cont..

A NoSQL Database: stores data in a flexible, non-tabular format,

unliketraditional relational databases. Instead of using tables with rows
and columns,NoSQL databases might use documents, key-value pairs,
wide-columns, orgraphs to store data. This allows them to handle large
amounts ofunstructured or semi-structured data efficiently. They are
designed to scale easily and manage big data applications.
•Mongodb: MongoDB is a NoSQL database storing data in JSON-
likedocuments. It handles unstructured data, supports powerful queries,
andscales easily across servers, making it popular for flexible,
 Backend/Databases Cont..

• Cassandra: Apache Cassandra is an open-source NoSQL database

that isused for handling big data. It has the capability to handle
structure, semi-structured, and unstructured data.
• Redis: Redis is an in-memory NoSQL database known for its speed.
Itsupports various data structures like strings, hashes, and lists,
making itideal for caching, real-time analytics, and messaging.
 Web Development Frameworks

Web development frameworks are tools and libraries that developers

use to make developing in a particular language easier and more
efficient. They provide interfaces to access commonly-used
functionalities as well as abstractions that make complicated things
easier to understand and handle. Essentially, they make the
development process more efficient because developers have a pool
of code resources to draw from when developing. There’s no need to
develop software functions from scratch when frameworks give you
all the necessary tools to build a website or application.
 Web Development Frameworks Cont..

Because frameworks give you a head start on your development,

they’re more cost effective than developing entirely new code. They
also lower your development risk since they’re tried and true
compared to writing brand new, untested code.
•There are both front-end and back-end frameworks that streamline
the development process.
 Libraries

Libraries are collections of files, programs, routines, scripts or functions

that can be integrated when writing code. Libraries work by grouping
snippets of code together to enable functionality so you don’t have to
write the code yourself. Like frameworks, they mitigate the risk of
improper coding, make the development process more efficient, and save
you money. However, libraries are different than frameworks. A
framework defines and structures your build. Libraries are resources you
can freely integrate into a build of your own structure and design.
They’re often used for more specific functions or features while a
framework is a more complete development tool.
 Data Format

Format of data is used by web applications to communicate with each

other. It is light weight text based data interchange format which
means, it is simpler to read and write.

Below are two common data formats used in web development:

•XML: Extensible Markup Language (XML) is a markup language
that defines a set of rules for encoding documents in a format that is
both human-readable and machine-readable.
•JSON: JSON or JavaScript Object Notation is a format for
structuring data.
 Web Protocols
The internet as we know it today simply would not function without protocols.
Protocols are sets of rules and procedures that allow different computers and
networks to communicate with each other seamlessly. Just like languages
have grammar and vocabulary, data networks rely on protocols to provide a
common framework for organizing and transmitting data.

The most important and widely used types of protocols that form the
backbone of internet communication are:

•TCP/IP: Transmission Control Protocol/Internet Protocol

•FTP: File Transfer Protocol

•HTTP: Hypertext Transfer Protocol

•HTTPS: Hypertext Transfer Protocol Secure

 TCP/IP: Transmission Control
Protocol/Internet Protocol
.
TCP/IP is the most widely used model, powering the internet and most
private networks. It provides a standardized framework that lets devices
easily communicate, ensuring efficient and seamless data exchange.
 TCP/IP: Transmission Control
Protocol/Internet Protocol Cont…..

• IP (Internet Protocol): The IP protocol handles addressing and routing of

data packets between devices on a network. Each device gets a unique IP
address that identifies it on the network. TCP (Transmission Control
Protocol):
• TCP (Transmission Control Protocol): TCP builds on IP by establishing a
reliable connection between two endpoints and ensuring ordered, error-
checked delivery of data packets through features like flow control,
segmentation, and acknowledgments.
 TCP/IP: Transmission Control
Protocol/Internet Protocol Cont…..

TCP/IP is typically divided into four layers, with each layer representing a
different set of protocols and having a distinct purpose:

1. Application layer. The application layer interacts directly with end users
and provides them with network services, including web browsing, file
transfers and email communication. Protocols such as domain name system (
DNS), Dynamic Host Configuration Protocol (DHCP), File Transfer
Protocol (FTP), Hypertext Transfer Protocol (HTTP), Simple Mail Transfer
Protocol (SMTP), Simple Network Management Protocol (SNMP), Secure
Shell (SSH) and Telnet operate at this layer.
 TCP/IP: Transmission Control
Protocol/Internet Protocol Cont…..

2. Transport layer. The transport layer provides end-to-end communication

between hosts and ensures data delivery. Protocols such as TCP and User
Datagram Protocol (UDP) operate at this layer. However, while TCP is
designed to be reliable, transport layer protocols aren't always reliable.

3. Internet layer. Also known as the network layer, the internet layer is
responsible for routing data packets from source to destination across
networks. It uses logical IP addresses to determine the best path to send data
to its destination. IP is the primary protocol operating at this layer, but other
protocols, such as Address Resolution Protocol (ARP) and Internet Control
Message Protocol (ICMP), also operate there.
 TCP/IP: Transmission Control
Protocol/Internet Protocol Cont…..

4. Link layer. Also known as the data link layer, this layer is responsible for
the physical transmission of data over network hardware, using protocols
such as Ethernet for wired networks or a variation of 802.11 for wireless or
Wi-Fi networks.
 FTP: File Transfer Protocol

FTP (File Transfer Protocol) allows users to transfer files between

networked devices. It’s used for uploading web pages and other content to
web servers. FTP uses two main channels:
•Control channel: Clients send commands like GET, PUT, DELETE through
the control channel to request files from the server.
•Data channel: The actual file contents are sent over the data channel after
the control dns channel establishes connection.

FTP transmits data in clear text, so Secure FTP (SFTP) or FTPS are better
options if encryption is needed. However, standard FTP is still widely used
due to its simplicity.
 HTTP & HTTPS

HTTP: The Hypertext Transfer Protocol (HTTP) is designed to enable

communications between clients and servers. HTTP works as a request-
response protocol between a client and server. A web browser may be the
client, and an application on a computer that hosts a web site may be the
server.

HTTPS: The Hypertext Transfer Protocol Secure, is the secure version of

HTTP, using encryption (TLS/SSL) to protect data transmitted between a
web browser and a website.
 HTTP & HTTPS Cont…

• Refer to HTTP&HTTPS Differences Pdf and

• HTTP&HTTPS Compliance Pdf