Web Technology:
Web technology is the collection of tools, programming languages, and protocols
that enable the creation, delivery, and interaction with websites and web
applications. It is how computers and devices communicate over the internet,
allowing users to access and interact with online content. This technology
includes both front-end (what the user sees) and back-end (server-side)
components that work together to make websites functional.
Website: A website is a collection of related web pages stored on a web server
and accessed through a web browser using a domain name.
Web Page: A web page is a single page of information on the World Wide Web
(WWW), usually written in HTML, that you can view through a web browser.
Types of Website or Web Page:
Static Website:
Content does not change automatically.
Same for every visitor.
Created using HTML and CSS only.
Example: Personal portfolio, company info page
Dynamic Website:
Content changes based on user actions or data.
Uses server-side scripting (like PHP, [Link]) or JavaScript.
Example: Facebook feed, YouTube homepage, or login pages.
Web Browser:
A web browser is a software application used to access and display websites on
the Internet. It sends a request to a web server and displays the response
(webpage) using HTML, CSS, and JavaScript.
Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera
Web Server: A web server is a computer or software that stores, processes, and
delivers web pages to users through the Internet.
When a user types a website address (like [Link]), the web server:
Receives the request.
Finds the requested page or file.
Sends it back to the web browser using HTTP/HTTPS.
Examples: Apache HTTP Server, Nginx, Microsoft IIS, LiteSpeed
IP Address:
It is a unique numerical identifier assigned to every device (computer, phone,
server, etc.) connected to a network such as the Internet. The main purpose of an
IP address is to identify each device and locate it so that data can be sent and
received accurately between devices over a network.
Difference between Static and Dynamic IP Address:
Feature Static IP Address Dynamic IP Address
Fixed IP assigned permanently to Temporary IP assigned
Definition
a device automatically by DHCP
Changes every time device
Change Does not change
reconnects
Assignment Manual (by administrator) Automatic (by DHCP server)
Cost More expensive Cheaper or free
Used for servers, hosting, CCTV,
Usage Used for home and office users
etc.
Stability Very stable and reliable Less stable (may change frequently)
More secure (harder to track due
Security More vulnerable (easier to track)
to change)
Example Web server, email server Personal computer, mobile device
Domain Name:
It is the human-readable address of a website that replaces the complex numeric
IP address.
Example: Instead of typing [Link], we type [Link].
DNS (Domain Name System):
DNS is often called the “phone book of the Internet.”
It is a system that translates domain names (like [Link]) into IP
addresses (like [Link]) that computers use to find each other on the
network.
Working of DNS:
The Domain Name System (DNS) works like the Internet’s phone book, translating
easy-to-remember domain names (such as [Link]) into IP addresses
(like [Link]) that computers use to identify each other on the network.
When a user types a domain name into a web browser, the browser first sends a
DNS query to find the corresponding IP address of that website.
This request is sent to a DNS resolver, which is usually provided by the user’s
Internet Service Provider (ISP).
The resolver then checks its cache to see if it already knows the IP address. If not,
it contacts other DNS servers in a sequence — the Root Server, the Top-Level
Domain (TLD) Server (such as .com, .org, .pk), and finally the Authoritative Name
Server, which holds the actual IP address for the domain.
Once the IP address is found, it is sent back to the browser, which then uses it to
connect to the web server and load the website. The resolver also stores (caches)
this information temporarily so that future requests for the same domain can be
answered more quickly.
URL (Uniform Resource Locator):
URL is the unique web address used to locate and access a resource, such as a
webpage, image, or file, on the internet. It specifies both the location and the
protocol (like HTTP or HTTPS) needed to retrieve the resource. URLs are essential
for navigating the web, as they are what you type into a browser's address bar or
click on in a hyperlink to go to a specific destination.
Example:
[Link]
Component Example Description
1. Protocol (or Defines how data is transferred between
https://
Scheme) browser and server. Common examples:
Component Example Description
http, https, ftp, mailto.
2. Domain Name The human-readable address of the
[Link]
(or Host Name) website (points to the web server’s IP).
Specifies which port to connect to on the
3. Port Number
:80 server. Default: 80 for HTTP, 443 for
(Optional)
HTTPS. Usually hidden in most URLs.
Shows the location of a specific page or file
4. Path /about/[Link]
inside the website.
5. Query String Used to send additional data to the server
?user=tomcruise
(Optional) (starts with ?, contains key-value pairs).
6. Fragment
Points to a specific section or location
Identifier #contact
within the same web page.
(Optional)
Web Protocols: A web protocol is a set of rules that govern how data is formatted
and transmitted over the internet to enable communication and web page
loading. Example: HTTP, HTTPS, DNS
Difference between HTTP and HTTPS:
Feature HTTP HTTPS
It is a communication protocol
used for transferring data It is the secure version of HTTP that
between a web browser (client) uses SSL (Secure Sockets Layer) or
and a web server on the TLS (Transport Layer Security) to
Internet. encrypt data exchanged between
Definition the browser and the web server.
HTTP defines how messages are
formatted and transmitted so This ensures that the data cannot
that web pages, images, and be read or altered by hackers during
other files can be displayed in transmission.
the browser.
Example [Link] [Link]
Full Form HyperText Transfer Protocol HyperText Transfer Protocol Secure
Secure (data encrypted using
Security Not secure (data in plain text)
SSL/TLS)
Port
Uses Port 80 Uses Port 443
Number
URL Prefix http:// https://
Data
No encryption Data is encrypted
Encryption
Certificate
No Yes, needs SSL/TLS certificate
Required
Slightly faster (no encryption
Speed Slightly slower but much safer
overhead)
Secure websites (banking, login, e-
Used For Basic websites
commerce)
Purpose of HTTPS:
Security Through Encryption:
HTTPS uses SSL (Secure Sockets Layer) or TLS (Transport Layer Security) to encrypt
[Link] means that any information (like passwords, messages, or payment
details) cannot be read by anyone else while it’s being sent over the Internet.
Data Integrity:
HTTPS ensures that the data sent between the browser and the server cannot be
changed or damaged during [Link] protects against attackers trying to alter
website content or inject malware.
Authentication:
HTTPS verifies that the website you are visiting is genuine and trustworthy, not a
fake or phishing [Link] uses a digital certificate issued by a trusted Certificate
Authority (CA) to confirm the site’s identity.
User Trust and SEO Benefits:
Websites using HTTPS show a padlock icon in the browser’s address bar, giving
users confidence that the site is [Link], search engines like Google rank HTTPS
websites higher than non-secure (HTTP) sites.
Client Server Architecture:
Client–Server Architecture is a network model in which two types of computers —
clients and servers — work together to share data, services, and resources over a
network. In this architecture, the client sends a request for data or services, and
the server processes that request and sends back a response.
Example: When you open [Link] in your browser:
Your web browser (client) sends a request to Google’s web server.
The server searches for the requested page.
The server sends the web page data back to your browser.
Your browser displays the page on your screen.
HTML
HTML stands for HyperText Markup Language. It is the standard language used to
create and design the structure of web pages on the Internet.
HTML Elements:
An HTML element is the building block of a webpage.
It defines the structure and content of the webpage (like headings, paragraphs,
images, etc.). An element usually consists of a start tag, content, and an end tag.
Example:
<p>This is a paragraph</p>
Here, <p> → start tag
This is a paragraph. → content
</p> → end tag
Together, they form one HTML element.
HTML Tags:
Tags are used to mark up the start and end of an element.
They tell the browser what type of content is inside.
Tags are always written inside angle brackets < >.
Example:
<h1> → opening tag (used to define a heading)
</h1> → closing tag (used to end the heading)
Some tags are empty/self-closing (they don’t need an end tag), e.g. <br>, <img>,
<hr>.
HTML Attributes:
Attributes give extra information about an HTML element.
They are written inside the opening tag and are made of a name–value pair.
Format: attribute="value"
Example:
<img src="[Link]" alt="My Picture">
src → attribute name (source of image)
"[Link]" → attribute value
alt="My Picture" → another attribute describing the image
What is responsive web design?
Responsive Web Design means creating websites that automatically adjust and
look good on all devices, such as desktops, laptops, tablets, and smartphones. It
ensures that the website’s layout, images, and text resize and rearrange
themselves according to the screen size or orientation of the device being used.
CSS
CSS (Cascading Style Sheets) is a styling language used to control the look and
layout of web pages written in HTML. It defines how elements (like text, images,
and buttons) should appear — including their colors, fonts, sizes, spacing, and
positioning.
Inline CSS:
Inline CSS is written directly inside an HTML tag using the style attribute.
It affects only that single element where it is applied.
Example:
<h1 style="color: blue; text-align: center;">Welcome to My Website</h1>
<p style="font-size: 18px; color: green;">This is an example of inline CSS.</p>
Internal CSS:
Internal CSS is written inside the <style> tag within the <head> section of an
HTML document. It applies styles to all matching elements on that single page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: darkred;
text-align: center;
}
p {
color: gray;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
<p>This style is applied using internal CSS.</p>
</body>
</html>
External CSS:
External CSS is written in a separate .css file and linked to the HTML document
using the <link> tag inside the <head> section. It can style multiple web pages
using one stylesheet.
Example:
HTML File ([Link]):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This webpage uses an external stylesheet.</p>
</body>
</html>
CSS File ([Link]):
h1 {
color: purple;
text-align: center;
}
p {
color: navy;
font-size: 18px;
}
Comparison:
Feature Inline CSS Internal CSS External CSS
Inside HTML tag Inside <style> tag
Location In a separate .css file
(style attribute) (in <head>)
One specific
Scope One HTML page Multiple HTML pages
element
Ease of
Difficult Moderate Very easy
Maintenance
Reusability No Limited Yes (highly reusable)
Recommended
Small changes Single-page styling Full website styling
For
Fast for small Best for performance
Speed Moderate
changes (cached)
CSS Priority Order:
Inline css > Internal css > External css
Changing Priority Order Using !important
External CSS ([Link])
h1 {
color: blue !important; /* !important gives this highest
priority */
text-align: center;
}
HTML File ([Link])
<!DOCTYPE html>
<html>
<head>
<title>CSS Priority Example</title>
<!-- Linking External CSS -->
<link rel="stylesheet" href="[Link]">
<!-- Internal CSS -->
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<!-- Inline CSS -->
<h1 style="color: red;">This is a Priority Example</h1>
</body>
</html>
Final Output: The heading text (<h1>) will appear blue, because the !important
rule in the external CSS overrides both internal and inline CSS.
Difference between HTML and CSS
Feature HTML CSS
HTML is a markup language used CSS is a style sheet language
1. Definition to create the structure and used to design and control
content of a web page. the layout of a web page.
Defines what content appears on Defines how that content
2. Purpose the web page (text, images, links, looks — colors, fonts,
etc.). spacing, and positioning.
Adds styling and
Provides the basic framework or
3. Function presentation to make the
skeleton of a website.
site visually appealing.
Uses selectors and
Uses tags like <html>, <head>,
4. Syntax properties, e.g., h1 { color:
<body>, <h1>, <p>, etc.
blue; font-size: 20px; }.
5. File Extension .html or .htm .css
6. Type of
Markup Language Style Sheet Language
Language
Consists of elements, tags, andConsists of selectors,
7. Components
attributes. properties, and values.
Can work alone to display basicCannot work alone; it needs
8. Dependency
content. HTML to apply styles.
Used to define structure and Used to define design and
9. Use in Website
semantics. layout.
10. Example <h1>Welcome</h1> h1 { color: blue; }
11. Role in Acts as the foundation of the Acts as the decoration and
Webpage webpage. visual design.
Focused on presentation
12. Readability Focused on content and meaning.
and styling.
Changes to HTML affect the Changes to CSS affect the
13. Modification
content directly. appearance of content.
Each HTML page must contain its One CSS file can be used to
14. Reusability
own content structure. style multiple pages.
Feature HTML CSS
15. Browser Browser reads HTML to Browser reads CSS to
Interpretation understand what to show. understand how to show it.
16. Example of p { color: red; } changes its
<p>Hello World!</p> defines text.
Use Together color to red.
CSS provides advanced
17. Layout HTML provides basic layout using
layout control with flexbox,
Control tables or divisions (<div>).
grid, etc.
HTML tags can contain inline CSS can be written inline
18. Inline Usage
elements or attributes. using the style attribute.
19. Learning Learn structure and elements of a Learn styling rules and
Focus webpage. properties for layout design.
CSS is like the paint,
20. Example in HTML is like the skeleton of a
furniture, and design that
Real Life building.
beautifies it.
