Introduction to Web Technologies

01

Learning Objectives

By the end of this lesson, you should be able to explain the basic Web ecosystem clearly.

🌍

Understand the Web

Explain the difference between the Internet and the World Wide Web.

🖥️

Understand Browsers

Explain what a web browser does when you open a website.

🗄️

Understand Servers

Understand the role of web servers and application servers.

🔄

Understand Communication

Understand the basic client-server request and response process.

🧩

Identify Technologies

Recognize HTML, CSS, JavaScript, server-side technologies and databases.

🚀

See the Roadmap

Understand what you will learn throughout the complete CodeBhavya Web Technologies course.

02

What Are Web Technologies?

The technologies used to create, deliver and operate websites and web applications.

Web Technologies are the collection of technologies, protocols, languages, tools and systems used to create and operate websites and web applications.

When you open a website, many technologies work together. Your browser communicates with a server, the server processes the request, and information is returned to the browser.

The browser then uses technologies such as HTML, CSS and JavaScript to display and interact with the page.

💡

Simple Definition

Web Technologies are the technologies that help us build, communicate, display, process, store and secure information on the Web.

03

Internet vs World Wide Web

These two terms are related, but they are not the same thing.

🌐

Internet

The Internet is the global network of interconnected computers and devices.

✔ Global network infrastructure

✔ Connects computers and devices

✔ Supports many services

✔ Includes email, file transfer, Web and more

VS

🕸️

World Wide Web

The Web is a system of interconnected resources and applications accessed over the Internet.

✔ Uses web browsers

✔ Uses URLs

✔ Uses HTTP/HTTPS

✔ Uses web servers and web technologies

Remember: The Internet is the infrastructure. The Web is one of the services built on that infrastructure.

04

Website vs Web Application

Both run in browsers, but their purpose can be different.

Feature	Website	Web Application
Primary purpose	Present information	Perform interactive tasks
User interaction	Usually lower	Usually higher
Examples	College information website	Online banking system
Data processing	May be limited	Usually significant
Authentication	May not be required	Often required

Important: The boundary is not always strict. Modern websites can contain highly interactive application features, and web applications can also contain large amounts of informational content.

05

Static vs Dynamic Web Pages

Understand how content can be delivered and generated.

STATIC

Static Web Page

Browser

↓

Web Server

↓

Pre-built HTML/CSS/JS

↓

Browser

The server typically returns files that have already been prepared. JavaScript may still make the page interactive in the browser.

DYNAMIC

Dynamic Web Page

Browser

↓

Web / Application Server

↓

Application Logic

↓

Database / Services

The server or application can process data and generate a response based on the request.

06

Client-Side and Server-Side Technologies

Modern web applications commonly divide responsibilities between the browser and server.

💻

CLIENT SIDE

Browser

Client-side technologies run primarily in the user's browser and control the presentation and interaction of the page.

HTTP / HTTPS

🖥️

SERVER SIDE

Server

Server-side technologies process requests, apply business logic, communicate with databases and return responses.

07

Where Does the Database Fit?

Web applications often need to store and retrieve information.

👤 User Uses browser

→

🌐 Browser Client side

→

🖥️ Server Business logic

→

🗄️ Database Persistent data

A typical application might receive a login request from a browser, send that request to a server, and then use a database to verify or retrieve information.

In later levels we will study database connectivity technologies such as JDBC and PHP database connectivity in detail.

08

The Web Technology Stack

A simple view of the layers you will study in this course.

01

User Interacts with a web application

↓

02

Browser Chrome, Edge, Firefox and others

↓

03

Frontend / Client Side HTML · CSS · JavaScript · DOM · Web APIs

↓

04

Server Side PHP · Servlets · JSP · APIs · Application Logic

↓

05

Data Layer Databases · JDBC · Data Services

09

How Does a Web Request Work?

Let's trace a simple visit to a website.

🤔 What happens when you type https://codebhavya.com into a browser?

Many steps happen behind the scenes. At a high level, the browser identifies the destination, communicates with the server using web protocols, receives resources and then builds the visible page.

10

Premium Visualizer — Browser Request Lifecycle

Step through the simplified journey from entering a URL to seeing a web page.

🔗

STEP 01

Enter a URL

The user enters a web address into the browser.

https://codebhavya.com

What should you understand from this visualizer?

01

A browser does not simply "open a page". It performs a sequence of operations.

02

Communication with a server is based on network and web protocols.

03

The browser must receive and process resources before it can display the final interface.

11

Major Web Technologies You Will Learn

These technologies will appear throughout the CodeBhavya course.

🏗️

HTML

Defines the structure and meaning of web documents.

STRUCTURE

🎨

CSS

Controls presentation, layout, typography and responsive design.

PRESENTATION

⚡

JavaScript

Adds logic, interaction and dynamic behavior to web pages.

BEHAVIOR

🐘

PHP

A server-side technology used to build dynamic web applications.

SERVER SIDE

☕

Servlets

Java-based server-side components for processing web requests.

JAVA WEB

📄

JSP

A Java web technology used to create dynamic server-rendered pages.

DYNAMIC VIEW

🔌

JDBC

Provides Java connectivity to relational databases.

DATABASE

🔗

APIs

Allow applications and services to exchange data and functionality.

COMMUNICATION

12

What Happens Inside the Browser?

A simplified view of how a browser turns web resources into an interface.

01 Receive Resources HTML, CSS, JavaScript, images and other resources

→

02 Build DOM HTML is represented as a document tree

→

03 Apply Styles CSS determines presentation and layout

→

04 Run JavaScript Scripts can modify content and behavior

→

05 Render UI The browser displays the page

13

Real-World Example — Student Portal

Let's connect the concepts to a familiar application.

Suppose you open a Student Portal

You enter your username and password and press Login.

Your browser sends the login request to a server. The server processes the request and may communicate with a database.

The server then returns a response, and the browser displays the appropriate page.

👨‍🎓 Student

↓

🌐 Browser

↓

🖥️ Web Server

A web server receives web requests and returns web resources or responses. In larger systems, it may also work with application servers or act as a reverse proxy.

Click again to return to the question.

17

Quick MCQs

Test your understanding before moving to the next level.

MCQ 01 EASY

Which of the following is primarily used to structure a web page?

MCQ 02 EASY

Which technology is primarily responsible for styling a web page?

MCQ 03 MODERATE

Which protocol is commonly used for communication between a browser and web server?

MCQ 04 MODERATE

Which technology is used for Java database connectivity?

18

Extra Practice

Write your own answers without looking back at the lesson.

01

Explain Internet and World Wide Web in your own words.

02

Draw a simple client-server architecture diagram.

03

Explain what happens when a user enters a URL into a browser.

04

Differentiate between a static web page and a dynamic web page.

05

Write one practical use of HTML, CSS, JavaScript, PHP, Servlet, JSP and JDBC.

19

Quick Revision

Remember these concepts before moving ahead.

🌐 Internet

Global network infrastructure

🕸️ Web

Web resources and applications

💻 Client

Usually the browser

🖥️ Server

Processes requests

🏗️ HTML

Structure

🎨 CSS

Presentation

A page whose content can be generated or changed based on data, logic or user interaction.

TERM

Web Application

Click to see meaning

DEFINITION

Web Application

An application delivered through web technologies and typically accessed using a browser.

🎯

Key Takeaway

Web Technologies are not just HTML, CSS and JavaScript. A real web ecosystem includes browsers, servers, communication protocols, client-side technologies, server-side technologies, databases, APIs, security and many supporting technologies.

Throughout this course, we will study these technologies step by step — from the fundamentals of the Web to complete database-driven and production-oriented applications.