Hindusthan CollegeCollege

Hindusthan of Engineering and Technology

of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

Department of Computer Science and Engineering

CIA-1
22CS5316 – WEB TECHNOLOGY
14 marks –Answers-UNIT-1

Discuss about CSS3 features like Colors, Shadows, Text and Transformations in detail

CSS3 Features: Colors, Shadows, Text, and Transformations

CSS3, the latest evolution of Cascading Style Sheets, introduces new features that provide more
design flexibility and aesthetic appeal to web pages. Key features such as colors, shadows, text
styling, and transformations play an essential role in modern web development. Here's an in-
depth look at these features:

1. CSS3 Colors

CSS3 expanded the range of color options available to developers, enhancing both flexibility and
functionality. Some notable CSS3 color features include:

 RGBA Colors: CSS3 allows developers to define colors with transparency using the
RGBA color model. The "A" stands for alpha, which specifies the opacity level of the
color (0 for fully transparent, 1 for fully opaque).

color: rgba(255, 0, 0, 0.5); /* Red color with 50% opacity */

 HSLA Colors: CSS3 introduced the HSL (Hue, Saturation, Lightness) color model.
Similar to RGBA, HSLA adds an alpha component to control opacity.

color: hsla(120, 100%, 50%, 0.7); /* Green with 70% opacity */

 Color Names and Hexadecimal: CSS3 supports various named colors (e.g., red, blue,
green) and hexadecimal notations like #ff5733.
 Gradients: CSS3 also added the ability to create linear and radial gradients, which allow
a smooth transition between two or more colors.

background: linear-gradient(to right, red, yellow); /* Horizontal

gradient */

2. CSS3 Shadows

CSS3 introduced powerful shadowing techniques that can be applied to both text and elements:
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

 Box Shadow: This property allows developers to add shadows to block-level elements
(e.g., divs).

box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* X-offset, Y-offset,

blur radius, color */

 Text Shadow: CSS3 allows shadows to be applied directly to text, enhancing readability
or adding a stylistic effect.

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* X-offset, Y-offset, blur

radius, color */

Key properties for shadows include:

 Offset: Determines how far the shadow is from the element or text.
 Blur Radius: Controls how soft or sharp the shadow edges are.
 Color: Specifies the color of the shadow.

Shadows add depth and dimension to elements, helping enhance the visual design of a web page.

3. CSS3 Text Features

CSS3 introduced new text styling options that give more control over typography and text
effects:

 Text Overflow: Controls what happens when text overflows its container. This is often
used with truncated text.

text-overflow: ellipsis; /* Adds "..." to overflowing text */

 Word Wrapping: Ensures that long words or URLs break and wrap to the next line
instead of overflowing their container.

word-wrap: break-word;

 Web Fonts (@font-face): CSS3 enables the use of custom fonts on web pages via the
@font-face rule. This allows web designers to move beyond the limited number of
system fonts.

@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff') format('woff');
}
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

 Text Effects: CSS3 allows for effects like stroke or fill using text styles, which can make
text visually appealing.

text-stroke: 2px black; /* Adds a stroke around text */

4. CSS3 Transformations

CSS3 introduced the ability to transform elements in two and three dimensions. Transformations
modify the shape, size, and position of an element without affecting the document flow. Some
transformation types include:

 Translate: Moves an element from its current position along the X or Y axis.

transform: translate(50px, 100px); /* Moves element 50px right and 100px

down */

 Scale: Changes the size of an element. It can scale uniformly or independently along the
X and Y axes.

transform: scale(1.5); /* Enlarges the element by 50% */

 Rotate: Rotates an element by a specified degree.

transform: rotate(45deg); /* Rotates the element 45 degrees */

 Skew: Skews the element along the X or Y axis.

transform: skew(20deg, 10deg); /* Skews the element by 20 degrees in X,

10 degrees in Y */

CSS3 transformations can be combined:

transform: translate(50px, 100px) scale(1.2) rotate(30deg);

 3D Transforms: CSS3 extends transformations into 3D space, allowing elements to be

manipulated in three dimensions. Examples include rotateX, rotateY, and
perspective.

Conclusion

CSS3 has significantly expanded the capabilities of web design by introducing features such as
new color options, shadows, advanced text styling, and transformations. These features not only
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

improve the visual aesthetics but also provide developers with powerful tools for creating
interactive and dynamic websites.

Explain the characteristics of Web Essentials in detail

Characteristics of Web Essentials: Server, Client, and Communication

In web development, the architecture is based on a client-server model where communication

plays a crucial role in delivering content and functionality to users. Understanding the
characteristics of the Server, Client, and Communication mechanisms is essential for
developing reliable, efficient, and scalable web applications. Below is a detailed explanation of
these components.

1. Server Characteristics

A web server is responsible for storing, processing, and delivering web pages and services to
clients over the Internet. The characteristics of a server in web development include:

a. Hosting and Serving Content

The web server hosts the files of a website (HTML, CSS, JavaScript, images, etc.) and responds
to client requests by sending the appropriate files. This ensures that the website's content is
accessible to users around the world.

 Static Content: Some servers deliver static content, meaning files that do not change
based on the user’s input or state (e.g., plain HTML pages).
 Dynamic Content: Many web servers also handle dynamic content generation by
interacting with backend languages such as PHP, Node.js, Python, or Ruby. Servers
retrieve data from databases and return customized responses.

b. Database Connectivity

Servers often connect to a database to store and retrieve dynamic content. This interaction
enables servers to deliver customized content based on user input or preferences.

 SQL Databases: Servers often connect to relational databases like MySQL or

PostgreSQL.
 NoSQL Databases: Some web applications use NoSQL databases like MongoDB, which
provide scalability and flexibility for handling large volumes of unstructured data.

c. Security Features
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

Web servers implement various security protocols to protect data and ensure safe communication
between the server and client.

 SSL/TLS Encryption: Servers use Secure Sockets Layer (SSL) or Transport Layer
Security (TLS) protocols to encrypt the communication between the server and the client,
ensuring data integrity and confidentiality.

https://example.com

 Authentication and Authorization: Servers use various mechanisms such as OAuth,

JWT (JSON Web Tokens), and session management to authenticate users and authorize
their access to different parts of the application.

d. Load Balancing and Scalability

Servers handle large numbers of concurrent requests from multiple clients. For high-traffic
websites, load balancing distributes incoming requests across multiple servers to ensure stability
and performance.

 Horizontal Scaling: Adding more servers to distribute the load across multiple machines.
 Vertical Scaling: Increasing the computational power (e.g., CPU, RAM) of a single
server to handle more requests.

2. Client Characteristics

The client, typically a web browser (e.g., Chrome, Firefox, Safari), is responsible for interacting
with the server, rendering the web pages, and allowing users to interact with web applications.
The key characteristics of clients include:

a. Rendering Web Pages

The client, or browser, receives HTML, CSS, and JavaScript from the server and is responsible
for rendering these into a functional web page that users can view and interact with. The
rendering process includes:

 Parsing HTML and CSS: The browser parses the HTML structure to build the DOM
(Document Object Model) and applies CSS to style the page.
 Executing JavaScript: JavaScript is executed to provide interactivity, such as form
validation, animations, and dynamic content updates.

b. User Interaction
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

Clients provide the interface that users interact with. Users can send requests to the server by
clicking links, filling out forms, or interacting with buttons. The client sends these requests
(HTTP or HTTPS) to the server for processing.

c. Caching

Browsers often cache content such as images, CSS files, and JavaScript files locally to improve
load times for subsequent visits. This reduces the need to download resources from the server
repeatedly.

 LocalStorage and SessionStorage: These features allow browsers to store data on the
client side, providing persistent storage across sessions (LocalStorage) or temporary
storage for the duration of the session (SessionStorage).

d. Responsive and Adaptive Design

Clients must adapt to different screen sizes and devices. Responsive design ensures that websites
render properly on a variety of devices (desktops, tablets, smartphones) using CSS media
queries.

 Viewport Meta Tag: Web developers include the viewport meta tag in the HTML to
ensure that the website is scaled correctly for mobile devices.

html
Copy code
<meta name="viewport" content="width=device-width, initial-scale=1.0">

e. Client-Side Scripting

Clients execute JavaScript or frameworks such as React, Angular, or Vue.js to provide real-time
interactivity, form validation, and communication with the server (AJAX requests).

 AJAX: The client can update parts of a web page without reloading the entire page by
sending asynchronous HTTP requests to the server.

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));

3. Communication Characteristics

Communication between the server and client is essential for delivering dynamic content and
interactivity. Key characteristics of web communication include:
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

a. HTTP/HTTPS Protocol

The HyperText Transfer Protocol (HTTP) is the foundation for communication between the
client and server. It defines how requests are sent from the client to the server and how responses
are returned.

 Request Methods:
o GET: Retrieve data from the server.
o POST: Send data to the server (e.g., form submissions).
o PUT/PATCH: Update existing data on the server.
o DELETE: Remove data from the server.
 HTTPS: A secure version of HTTP that encrypts communication between the server and
client, ensuring data privacy and security.

b. Client-Server Interaction

The client-server model is the backbone of web communication. The client sends HTTP requests
to the server, and the server processes these requests and responds with the appropriate content
(HTML, JSON, etc.).

 Stateless Communication: HTTP is stateless, meaning each request is independent and

does not retain any memory of previous interactions. To manage state, web applications
often use cookies, sessions, or tokens.

c. APIs (Application Programming Interfaces)

Web applications rely heavily on APIs for communication between the client and server,
particularly in modern Single Page Applications (SPAs). APIs provide an interface through
which clients can access server resources.

 REST APIs: REST (Representational State Transfer) APIs follow standard HTTP
methods and provide endpoints for clients to interact with server data.

fetch('https://api.example.com/posts', {
method: 'POST',
body: JSON.stringify({ title: 'New Post' }),
headers: {
'Content-Type': 'application/json'
}
});

 GraphQL: Unlike REST, GraphQL allows clients to request exactly the data they need,
improving efficiency by reducing over-fetching or under-fetching of data.
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

d. WebSockets

While HTTP is stateless, WebSockets provide a way for persistent communication between the
client and server. WebSockets allow two-way communication in real-time, which is useful for
applications like chat services, stock tickers, and live data updates.

 Full-Duplex Communication: WebSockets enable full-duplex communication, meaning

the server can push updates to the client without waiting for a new request.

const socket = new WebSocket('wss://example.com/socket');

socket.onmessage = (event) => {
console.log('Message from server: ', event.data);
};

e. AJAX and Fetch

AJAX (Asynchronous JavaScript and XML) and the fetch API allow clients to send and receive
data from the server asynchronously, without reloading the page. This improves the user
experience by allowing seamless interactions and dynamic content updates.

 JSON Format: Data is often exchanged between the client and server in JSON format,
which is lightweight and easy to parse.

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));

f. CDN (Content Delivery Network)

CDNs are networks of geographically distributed servers that deliver web content to users based
on their location. By serving content from servers closer to the user, CDNs reduce latency and
improve website performance.

 Caching on the Edge: CDNs cache static assets (e.g., images, JavaScript files) at
multiple points of presence (PoPs), ensuring faster content delivery.

Conclusion

The server, client, and communication mechanisms form the core of web architecture. Servers
manage content, security, and scalability; clients handle rendering, interactivity, and local
caching; and communication protocols like HTTP, WebSockets, and APIs enable seamless
interaction between these components. These web essentials are critical for building modern,
efficient, and scalable web applications that provide rich user experiences.
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
An Autonomous Institution Affiliated to Anna University | Approved by AICT
An Autonomous Institution, Approved by AICTE, New Delhi, Affiliated to Anna University, Chennai
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

Explain the HTML5 features namely, Table, Image and Lists with relevant examples.

HTML5 Features: Table, Image, and Lists with Relevant Examples

HTML5 brought significant improvements in web development by introducing new features and
enhancements to existing ones. Among the fundamental elements in HTML5 are Tables,
Images, and Lists, which are essential for structuring and presenting content. Below is a detailed
explanation of these features, along with relevant examples.

1. Tables in HTML5

Tables are used to display data in a structured, grid-like format consisting of rows and columns.
In HTML5, tables retain the same structure as in previous versions of HTML but come with
better accessibility features, enhanced semantics, and styling options.

a. Basic Structure of an HTML Table

An HTML table is composed of the following elements:

 <table>: The container element for the table.

 <tr>: Defines a table row.
 <th>: Defines a header cell in the table.
 <td>: Defines a data cell in the table.

b. HTML5 Table Example

<table border="1">
<caption>Student Grades</caption>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Mathematics</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>Physics</td>
<td>B+</td>
</tr>
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

<tr>
<td>Charlie</td>
<td>Chemistry</td>
<td>A-</td>
</tr>
</tbody>
</table>

c. Key HTML5 Table Features

 <caption>: Provides a title or description for the table, improving accessibility and
understanding of the table content.
 <thead>, <tbody>, <tfoot>: These elements allow for better organization of table
content, separating header, body, and footer sections, which improves both structure and
accessibility.
 Colspan and Rowspan: These attributes help merge cells across columns or rows.

<td colspan="2">Merged Cell</td>

d. Accessibility Features

HTML5 encourages the use of attributes like scope and headers to enhance table accessibility
for screen readers. For example:

<th scope="col">Name</th>
<th scope="row">Subject</th>

2. Images in HTML5

Images play a crucial role in making websites visually appealing and interactive. HTML5
provides new attributes and functionality for handling images more effectively, ensuring better
performance and accessibility.

a. Basic Structure of an Image Element

The <img> tag is used to embed images in HTML documents. It has several attributes that
enhance the image's functionality and accessibility.

 src: Specifies the path to the image file.

 alt: Provides alternative text for the image, which is displayed if the image cannot load
and improves accessibility for visually impaired users.

b. HTML5 Image Example

Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

<img src="landscape.jpg" alt="A beautiful landscape with mountains and a lake"

width="600" height="400">

c. New HTML5 Image Features

 Responsive Images: HTML5 introduced the srcset and sizes attributes to serve
different image resolutions based on the device or screen size, improving performance
and user experience on mobile devices.

<img
src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
alt="Responsive image of a mountain">

 Figure and Figcaption: HTML5 introduced the <figure> and <figcaption> elements,
which allow developers to group images with captions, improving semantics and
accessibility.

<figure>
<img src="sunset.jpg" alt="Sunset over the hills">
<figcaption>Sunset over the hills - A serene view of the setting
sun.</figcaption>
</figure>

d. Attributes for Lazy Loading

HTML5 introduced the loading="lazy" attribute for images, which delays the loading of
images until they are visible in the viewport, improving page load performance.

<img src="example.jpg" alt="An example image" loading="lazy">

3. Lists in HTML5

Lists are used to display items in a structured, orderly manner. HTML5 supports different types
of lists that help organize information on a webpage. There are three main types of lists:

a. Ordered Lists (<ol>)

Ordered lists display items in a sequential order, typically with numbers or letters.

<ol>
<li>First item</li>
<li>Second item</li>
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

<li>Third item</li>
</ol>

 Attributes: HTML5 allows you to start an ordered list from a specified number using the
start attribute.

<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
</ol>

b. Unordered Lists (<ul>)

Unordered lists display items with bullet points. They are useful for lists where order does not
matter.

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>

 Customization: Developers can use CSS to customize list item markers, such as
changing bullets to squares or images.

ul {
list-style-type: square;
}

c. Definition Lists (<dl>)

Definition lists provide a way to display pairs of terms and their corresponding definitions.

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

d. Nested Lists

HTML5 supports nesting lists, which means you can place one list inside another to create
subcategories or hierarchies.

<ul>
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables</li>
</ul>

e. Accessibility of Lists

Lists enhance accessibility by organizing content logically. Screen readers can easily interpret
lists, helping users with disabilities navigate through the content.

Conclusion

HTML5 significantly improves the structure and accessibility of web pages by providing
enhanced features for Tables, Images, and Lists. Tables offer a clear and structured way to
present data, images are more responsive and accessible, and lists provide efficient ways to
organize information. These elements, along with new attributes and semantic improvements,
make HTML5 a powerful tool for creating modern, user-friendly web pages

Define web clients and web servers and explain their primary functions in web interactions

Definition of Web Clients and Web Servers and Their Primary Functions in Web
Interactions

Web clients and web servers form the core components of web architecture, working together to
deliver content and services over the internet. Their interaction follows the client-server model,
where the client makes requests, and the server processes and responds. Below is a detailed
explanation of their definitions and primary functions in web interactions.

1. Web Client

A web client is any software application that communicates with a web server to request
resources (such as web pages, data, or files) over the internet. The most common type of web
client is a web browser (e.g., Chrome, Firefox, Safari), though other clients such as mobile apps
or IoT devices can also act as web clients.

a. Primary Functions of Web Clients

1. Requesting Resources
o The web client initiates a request to the web server, typically by entering a URL
(Uniform Resource Locator) or clicking on a link. This request is sent over the
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

HTTP or HTTPS protocol, and it may request a variety of resources, including

HTML pages, images, CSS files, JavaScript files, or data from APIs.

Example of a URL request:

GET /index.html HTTP/1.1

Host: www.example.com

2. Rendering Web Pages

o Upon receiving a response from the web server (usually an HTML document), the
web client processes and renders the content. This involves interpreting HTML,
CSS, and JavaScript to display the website to the user. The browser’s rendering
engine constructs the DOM (Document Object Model) from the HTML, applies
the styles from CSS, and executes the JavaScript to create interactive web
experiences.

Example of rendering a webpage:

<h1>Hello, World!</h1>
<p>This is a web page displayed in a browser.</p>

3. User Interaction
o Web clients allow users to interact with web applications through inputs such as
form submissions, mouse clicks, or keyboard input. The client sends these
interactions back to the server as requests, which may trigger changes on the
server side or provide updated content to the user.

Example of user interaction:

<form action="/submit" method="POST">

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

4. Caching and Storing Data

o Web clients store temporary data, such as images, CSS files, and JavaScript, to
improve loading speed for subsequent visits. This reduces the need to re-
download these resources from the server, improving performance and user
experience.
o LocalStorage and SessionStorage: Clients can store small amounts of data in the
browser to persist across sessions or within a single session, providing
functionality such as saving user preferences or maintaining a shopping cart.

Example:
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

localStorage.setItem('theme', 'dark');

5. Handling Security
o Web clients play a key role in security by supporting features like SSL/TLS for
encrypted communication (HTTPS). They also enforce Same-Origin Policy
(SOP) to prevent cross-site scripting (XSS) and other attacks by ensuring that a
script on one site cannot access data from another.

2. Web Server

A web server is a software system that handles requests from web clients, processes them, and
responds with the appropriate resources, such as HTML pages, data, or files. The server hosts the
website's content and manages interactions with databases, authentication systems, and other
backend services.

a. Primary Functions of Web Servers

1. Hosting and Serving Web Content

o Web servers host the files that make up a website, such as HTML, CSS,
JavaScript, and multimedia content (images, videos, etc.). When a client requests
a webpage, the server retrieves the relevant files from its storage and sends them
back to the client.

Example of serving an HTML file:

HTTP/1.1 200 OK
Content-Type: text/html
<html>
<body>
<h1>Welcome to Example.com</h1>
</body>
</html>

2. Processing Client Requests

o When a web client makes a request, the server processes it using HTTP methods
like GET (to retrieve data), POST (to submit data), PUT (to update resources), or
DELETE (to remove resources). The server can either serve static content or
dynamically generate content using server-side languages like PHP, Python,
Node.js, or Ruby.

Example of a POST request being processed:

Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

POST /login HTTP/1.1

Host: example.com
Content-Type: application/x-www-form-urlencoded
username=user&password=pass

3. Database Interactions
o Many web servers interact with databases to store and retrieve dynamic content.
For example, when a user logs into a website, the server queries the database to
verify their credentials and retrieves the relevant user data. This is common in
dynamic websites such as e-commerce platforms and social networks.
o SQL Databases (e.g., MySQL, PostgreSQL) and NoSQL Databases (e.g.,
MongoDB) are commonly used for storing data that the server retrieves during
client requests.
4. Security Management
o Web servers implement security features to ensure safe communication between
clients and servers. This includes SSL/TLS encryption for HTTPS, which
ensures that data is transmitted securely. Additionally, web servers manage user
authentication (e.g., OAuth, JWT) and access control to protect sensitive data and
resources.

Example of an HTTPS request:

GET /secure HTTP/1.1

Host: secure.example.com

5. Handling Load and Scaling

o Web servers need to manage high volumes of concurrent requests, especially for
popular websites. Load balancing is employed to distribute incoming traffic
across multiple servers to ensure no single server is overwhelmed.
o Horizontal Scaling: Adding more servers to handle increased traffic.
o Vertical Scaling: Enhancing server capacity (e.g., adding more CPU or memory).
6. Serving Dynamic Content
o Dynamic content is generated on the fly based on user input or other conditions.
Web servers use server-side scripting languages (e.g., PHP, Node.js) to generate
HTML pages or other content dynamically. For example, when a user searches for
a product on an e-commerce site, the server dynamically generates a page based
on the search results.

Example:

<?php
echo "Welcome, " . $_POST['username'];
?>
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
An Autonomous Institution Affiliated to Anna University | Approved by AICT
An Autonomous Institution, Approved by AICTE, New Delhi, Affiliated to Anna University, Chennai
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

7. Handling API Requests

o Web servers also serve as endpoints for API requests, allowing clients (web
browsers or other services) to interact with the server's data. REST APIs and
GraphQL are common frameworks for managing API communication.

Example of a JSON API response:

{
"status": "success",
"data": {
"user": {
"id": 1,
"name": "John Doe"
}
}
}

8. Logging and Monitoring

o Web servers log all client interactions, such as requests and errors, for monitoring
and debugging purposes. These logs help track server performance and detect
potential security issues.

3. Web Interactions Between Clients and Servers

The interaction between a web client and a web server involves a sequence of requests and
responses. Below is a step-by-step breakdown of a typical web interaction:

1. Client Request:
o The client (web browser) sends an HTTP request to the server by entering a URL
or clicking a link. This request could be for a webpage, image, data from an API,
or other resources.
2. Server Response:
o The server receives the request, processes it (fetching static files or querying a
database for dynamic content), and sends back a response. The response typically
includes a status code (e.g., 200 OK) and the requested content (e.g., an HTML
page).

Example of server response:

HTTP/1.1 200 OK
Content-Type: text/html

3. Rendering on the Client Side:

Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

oOnce the client receives the server's response, it renders the HTML page, applies
styles from CSS, and executes JavaScript to create a dynamic and interactive
experience.
4. Further Interactions:
o The client may continue interacting with the server by submitting forms, clicking
links, or making API calls using AJAX or WebSocket technologies.

Conclusion

Web clients and web servers play integral roles in web interactions. Web clients initiate
requests, render content, and handle user interactions, while web servers host resources, process
requests, and serve dynamic or static content. Their interaction defines the functionality of the
internet, enabling users to access web pages, applications, and services efficiently.

Explain the HTML5 control elements, Audio and Video controls with examples.

HTML5 Control Elements: Audio and Video Controls

HTML5 introduced native support for audio and video media, enabling web developers to
embed multimedia content without relying on third-party plugins like Flash. HTML5 provides
specific control elements to manage the playback of these media files, giving users the ability to
interact with audio and video content directly in the browser.

Below is a detailed explanation of the audio and video control elements, along with relevant
examples.

1. Audio Controls in HTML5

The <audio> element in HTML5 is used to embed audio files in a webpage. It provides various
attributes and controls that allow users to play, pause, and adjust the volume of audio content
directly in the browser.

a. Basic Structure of an Audio Element

The <audio> tag requires the src attribute to specify the path to the audio file. For broader
browser support, it is recommended to provide multiple formats (e.g., MP3, OGG) using the
<source> element inside the <audio> tag.

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

 controls: This attribute provides a default user interface (UI) for audio playback,
including play, pause, volume control, and time tracking.
 autoplay: Starts playing the audio automatically when the page loads.
 loop: Plays the audio in a continuous loop.
 muted: Mutes the audio by default.

b. Audio Example with Controls

<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

c. Attributes and Features

 Preload: Determines how much of the audio is loaded when the page loads. The options
are:
o auto: The browser decides how much data to preload.
o metadata: Only the metadata (duration, dimensions) is preloaded.
o none: The browser should not preload any data.

Example:

<audio controls preload="none">

<source src="song.mp3" type="audio/mpeg">
</audio>

 Events and JavaScript Control: You can handle events like play, pause, ended, and
control the audio playback using JavaScript.

Example:

<audio id="myAudio" src="audio.mp3"></audio>

<button
onclick="document.getElementById('myAudio').play()">Play</button>
<button
onclick="document.getElementById('myAudio').pause()">Pause</button>

2. Video Controls in HTML5

The <video> element is used to embed video files in a webpage. Like the <audio> element, it
comes with built-in controls, enabling users to play, pause, adjust volume, and control playback
in the browser.
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

a. Basic Structure of a Video Element

The <video> tag requires the src attribute to specify the video file, and it supports multiple
video formats (e.g., MP4, WebM) for compatibility across different browsers.

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>

 controls: Provides a native user interface for controlling video playback.

 width and height: Define the dimensions of the video player.
 poster: Displays an image before the video starts playing (e.g., a thumbnail).
 autoplay: Automatically starts playing the video when the page loads.
 loop: Plays the video in a loop.
 muted: Starts the video with no sound.

b. Video Example with Controls

<video controls width="600" height="400" poster="thumbnail.jpg">

<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

c. Attributes and Features

 Preload: Similar to the <audio> element, the preload attribute determines how much of
the video file is loaded when the page loads. Example:

<video controls preload="metadata">

<source src="sample.mp4" type="video/mp4">
</video>

 Poster Attribute: The poster attribute displays a static image (such as a thumbnail)
before the video starts. This is useful for improving the visual appeal of the webpage and
providing context about the video.

Example:

<video controls poster="thumbnail.jpg">

<source src="sample.mp4" type="video/mp4">
</video>
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

 Events and JavaScript Control: Like audio, video elements can be controlled via
JavaScript. You can manage events such as play, pause, volumechange, and control
playback programmatically.

Example:

<video id="myVideo" src="video.mp4" width="640" height="360"></video>

<button
onclick="document.getElementById('myVideo').play()">Play</button>
<button
onclick="document.getElementById('myVideo').pause()">Pause</button>

d. Video Formats

HTML5 video supports multiple formats, ensuring compatibility with different browsers:

 MP4 (H.264): Widely supported across all modern browsers and devices.
 WebM: Open-source format optimized for web use.
 Ogg (Theora): Supported in some browsers but less common than MP4 and WebM.

3. Cross-Browser Compatibility

To ensure that audio and video elements work across all major browsers, developers can use
multiple file formats for the same media. HTML5 makes it easy to fall back to alternative
formats by using multiple <source> elements.

Cross-Browser Example:

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>

For audio:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

By providing multiple formats, you ensure that the video or audio will play on any browser that
supports at least one of the formats.

4. Advantages of Using HTML5 Audio and Video Elements

 No Plugins Required: Unlike earlier web technologies like Flash, HTML5 does not
require any external plugins, reducing security risks and improving performance.
 Native Controls: Built-in controls for play, pause, volume, and time tracking are
available without needing custom scripts.
 Improved Accessibility: HTML5 allows developers to add captions, subtitles, and
descriptions, enhancing the accessibility of multimedia content for users with disabilities.
 Mobile-Friendly: HTML5 audio and video elements work seamlessly on mobile devices,
providing a consistent experience across platforms.

Conclusion

HTML5's introduction of native audio and video elements has made it easier to integrate
multimedia into websites. With user-friendly control attributes, multiple format support, and
improved performance, developers can create rich multimedia experiences that are accessible,
compatible across devices, and efficient. The addition of JavaScript event handling also allows
for deeper interaction with media, providing flexibility and customization for web applications.

Describe the structure of HTTP Request and HTTP Response message in detail.

HTTP Message
HTTP Message is used to show how data is exchanged between the client and the server.
It is based on client-server architecture. An HTTP client is a program that establishes a
connection to a server to send one or more HTTP request messages. An HTTP server is a
program that accepts connections to serve HTTP requests by sending an HTTP response
messages.

HTTP Request
HTTP Requests are messages which are sent by the client or user to initiate an action on
the server.

The first line of the message includes the request message from the client to the server, the
method which is applied to the resource, identifier of the resource, and the protocol version.

Syntax
 Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

1. Request = Request-Line
2. *(( general-header
3. | request-header
4. | entity-header ) CRLF)
5. CRLF
6. [ message-body ]

Request Line
The Request-Line starts with a method token, which is followed by the Request-URI, the
protocol version, and ending with CRLF. Using the SP characters, the elements are
separated.

Syntax

1. Request-Line = Method SP Request-URI SP HTTP-Version CRLF

1) Method

The method token is used to indicate the method which was performed on the resource
identified by the Request-URI. The method is case sensitive.

Syntax

1. Method = "OPTIONS"
2. | "GET"
3. | "HEAD"
4. | "POST"
5. | "PUT"
6. | "DELETE"
7. | "TRACE"
8. | "CONNECT"
9. | extension-method
10. extension-method = token
A resource is allowed a list of methods and that methods can be specified in an Allow
header field. The response's return code always notifies the client whether a method is
currently allowed on a resource. Since the set of allowed methods can be changed
dynamically.

Method and Description:

i) GET

This method retrieves information from the given server using a given URI. GET request
can retrieve the data. It cannot apply other effects on the data.

ii) HEAD
 Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

The HEAD method is the same as the GET method. It is used to transfer the status line and
header section only.

iii) POST

The POST request sends the data to the server. For example, file upload, customer
information, etc. using the HTML forms.

iv) PUT

The PUT method is used to replace all the current representations of the target resource
with the uploaded content.

v) DELETE

The DELETE method is used to remove all the current representations of the target
resource, which is given by URI.

vi) CONNECT

The CONNECT method is used to establish a tunnel to the server, which is identified by a
given URI.

2) Return-URI

The Request-URI is a Uniform Resource Identifier. It is used to identify the resource upon
which to apply the request.

Syntax

1. Request-URI = "*" | absoluteURI | abs_path | authority

On the nature of the request, these four options for Request-URI depend.

a) The asterisk "*" is used to show that the request does not apply to a particular resource,
but it will apply to the server itself. It is allowed only when the method used does not
necessarily apply to a resource.

Example

OPTIONS * HTTP/1.1

b) The absoluteURI form is used only when the request is being made to a proxy. The
requested proxy is used to forward the request and return the response.
 Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
An Autonomous Institution Affiliated to Anna University | Approved by AICT
An Autonomous Institution, Approved by AICTE, New Delhi, Affiliated to Anna University, Chennai
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

Example

GET http://www.javatpoint.com/WWW/TheProject.html HTTP/1.1

c) The absolute path can't be empty. If in the original URI, none is present, it must be given
as "/".

d) The authority form is only used by the CONNECT method.

The Resource Identified by a Request

Using the examination of Request-URI and the Host header field, we can determine the
exact resource identified by the Internet request.

An origin server must use the following rules for determining the requested resource on an
HTTP/1.1 request if the origin server does differentiate based on the host requested.

1. The host will be part of the Request-URI if Request-URI is an absoluteURI.

2. The host will be determined by the Host header field value if the Request-URI is not an
absoluteURI, and the request includes a header field of the host.
3. The response MUST be a 400 (Bad Request) error message if the host as determined by
rule 1 or 2 is not a valid host on the server.

Request Header Fields

The request-header fields are used to allow the client to pass additional information to the
server like the request and the client itself. The request header fields act as request
modifiers, with semantics equivalent to the parameters on a programming language method
invocation.

Syntax

1. request-header = Accept
2. | Accept-Charset
3. | Accept-Encoding
4. | Accept-Language
5. | Authorization
6. | Expect
7. | From
8. | Host
9. | If-Match
10. | If-Modified-Since
11. | If-None-Match
12. | If-Range
13. | If-Unmodified-Since
14. | Max-Forwards
15. | Proxy-Authorization
 Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

16. | Range
17. | Referer
18. | TE
19. | User-Agent
The name of the request-header field can be extended reliably only in combination with a
change in the version of the protocol.

HTTP Response
HTTP Response sent by a server to the client. The response is used to provide the client
with the resource it requested. It is also used to inform the client that the action requested
has been carried out. It can also inform the client that an error occurred in processing its
request.

An HTTP response contains the following things:

1. Status Line
2. Response Header Fields or a series of HTTP headers
3. Message Body

In the request message, each HTTP header is followed by a carriage returns line feed
(CRLF). After the last of the HTTP headers, an additional CRLF is used and then begins the
message body.

Status Line
In the response message, the status line is the first line. The status line contains three
items:

a) HTTP Version Number

It is used to show the HTTP specification to which the server has tried to make the message
comply.

Example

1. HTTP-Version = HTTP/1.1
b) Status Code

It is a three-digit number that indicates the result of the request. The first digit defines the
class of the response. The last two digits do not have any categorization role. There are five
values for the first digit, which are as follows:

Code and Description

 Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

1xx: Information

It shows that the request was received and continuing the process.

2xx: Success

It shows that the action was received successfully, understood, and accepted.

3xx: Redirection

It shows that further action must be taken to complete the request.

4xx: Client Error

It shows that the request contains incorrect syntax, or it cannot be fulfilled.

5xx: Server Error

It shows that the server failed to fulfil a valid request.

c) Reason Phrase

It is also known as the status text. It is a human-readable text that summarizes the meaning
of the status code.

An example of the response line is as follows:

1. HTTP/1.1 200 OK
Here,

HTTP/1.1 is the HTTP version.

o 200 is the status code.

o OK is the reason phrase.

Response Header Fields

The HTTP Headers for the response of the server contain the information that a client can
use to find out more about the response, and about the server that sent it. This information
is used to assist the client with displaying the response to a user, with storing the response
for the use of future, and with making further requests to the server now or in the future.

1. response-header = Accept-Ranges
2. | Age
 Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

3. | ETag
4. | Location
5. | Proxy-Authenticate
6. | Retry-After
7. | Server
8. | Vary
9. | WWW-Authenticate
The name of the Response-header field can be extended reliably only in combination with a
change in the version of the protocol.

Message Body
The response's message body may be referred to for convenience as a response body.

The body of the message is used for most responses. The exceptions are where a server is
using certain status codes and where the server is responding to a client request, which
asks for the headers but not the response body.

For a response to a successful request, the body of the message contains either some
information about the status of the action which is requested by the client or the resource
which is requested by the client. For the response to an unsuccessful request, the body of
the message might provide further information about some action the client needs to take to
complete the request successfully or about the reason for the error.

Describe how a web client and a web server work together to deliver web content.

How a Web Client and Web Server Work Together to Deliver Web Content

The communication between a web client (typically a web browser) and a web server is
essential for delivering web content. This interaction relies on the client-server model and
happens over the HTTP/HTTPS protocol. The web client requests web resources, and the server
responds with the requested content (e.g., HTML, CSS, JavaScript, images). This process
involves several key steps and components to ensure that web pages are displayed to users.

Let’s examine in detail how a web client and a web server collaborate to deliver web content.

1. Web Client and Web Server Overview

a. Web Client
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

A web client is typically a web browser (such as Chrome, Firefox, or Safari) that acts on behalf
of the user to request and display web content. It interacts with the web server by sending HTTP
requests and rendering the HTTP responses received from the server.

Common functions of a web client include:

 Sending HTTP requests for web pages or other resources.

 Rendering HTML, CSS, and JavaScript to display web content.
 Managing sessions, cookies, and local storage to maintain a consistent user experience.

b. Web Server

A web server is a software application (such as Apache, Nginx, or IIS) that stores, processes,
and serves web content (HTML files, images, CSS, etc.). It listens for incoming requests from
web clients, processes them, and returns the appropriate response.

Common functions of a web server include:

 Hosting web resources such as HTML files, CSS, JavaScript, images, and multimedia
content.
 Handling HTTP requests and returning the appropriate HTTP responses.
 Managing server-side logic and dynamic content using server-side languages (e.g., PHP,
Python, Node.js).
 Maintaining security through HTTPS, access control, and session management.

2. The Process of Web Client and Web Server Interaction

The communication between the web client and server involves multiple steps. Here’s how the
process works from request to response:

Step 1: User Enters a URL

The process begins when the user enters a URL (e.g., www.example.com) into the address bar of
the web browser (client). The URL consists of:

 Protocol: HTTP or HTTPS

 Domain Name: The name of the server (e.g., www.example.com)
 Path: The specific resource being requested (e.g., /index.html)

Step 2: DNS Lookup

Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

Before the web client can send the request, it needs to know the IP address of the web server.
This is done via a DNS (Domain Name System) lookup:

 The browser queries a DNS server to convert the domain name (e.g., www.example.com)
into its corresponding IP address (e.g., 192.168.1.1).
 Once the IP address is resolved, the client knows where to send the request.

Step 3: Client Sends an HTTP Request

The web browser sends an HTTP request to the web server, which includes:

 Request Line: Method (e.g., GET), the target resource (e.g., /index.html), and the
HTTP version.
 Headers: Information about the client, such as User-Agent, Accept, Host, and more.
 Body (optional): Data that may be included, especially in POST or PUT requests.

Example of an HTTP request:

GET /index.html HTTP/1.1

Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

Step 4: Server Receives and Processes the Request

When the web server receives the HTTP request, it:

 Parses the Request: The server identifies the requested resource (e.g., /index.html)
and interprets the headers.
 Processes Server-Side Logic (if necessary): If the requested resource involves dynamic
content (e.g., PHP or Node.js scripts), the server processes the logic and prepares the
content dynamically.
 Fetches the Resource: For static content (e.g., HTML, CSS, JavaScript, or images), the
server retrieves the requested file from its file system.

Step 5: Server Sends an HTTP Response

The server responds to the client with an HTTP response. The response consists of:

 Status Line: HTTP version, status code (e.g., 200 OK for success, 404 Not Found for
missing resource), and reason phrase.
 Headers: Metadata about the response, such as Content-Type, Content-Length, Set-
Cookie, and more.
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

 Body: The content (e.g., HTML, CSS, JavaScript, images, etc.) of the requested resource.

Example of an HTTP response:

HTTP/1.1 200 OK
Date: Mon, 08 Sep 2024 10:00:00 GMT
Server: Apache/2.4.41
Content-Type: text/html
Content-Length: 512

<!DOCTYPE html>
<html>
<head><title>Example</title></head>
<body><h1>Welcome to Example.com</h1></body>
</html>

Step 6: Client Receives and Renders the Response

Once the web browser receives the HTTP response:

 Parse HTML: The browser starts interpreting the HTML content and builds the DOM
(Document Object Model) tree.
 Load Resources: It makes additional HTTP requests for external resources referenced in
the HTML (e.g., images, CSS files, JavaScript files).
 Render the Page: The browser renders the page, applying CSS for styling and executing
JavaScript for interactive features.

Step 7: Subsequent Requests for Additional Resources

If the HTML contains references to other resources (e.g., stylesheets, scripts, or images), the
browser makes additional HTTP requests to the server. The server handles these requests
similarly by returning the resources, which the browser then renders or executes.

3. Request and Response Example in Action

Consider a user accessing www.example.com:

 The user types the URL into their browser and presses "Enter".
 The browser performs a DNS lookup to find the IP address of www.example.com.
 The browser sends an HTTP GET request to the server:

GET /index.html HTTP/1.1

Host: www.example.com
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

 The server receives the request, locates the file index.html, and responds with an HTTP
response:

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 512

<!DOCTYPE html>
<html><head><title>Welcome</title></head><body>...</body></html>

 The browser receives the response, renders the HTML content, and displays the webpage
to the user.

4. Key Technologies Supporting Client-Server Interaction

Several key technologies facilitate the interaction between the web client and web server:

a. HTTP/HTTPS Protocol

HTTP (Hypertext Transfer Protocol) is the foundation of web communication, while HTTPS is
the secure version that encrypts the data between client and server. These protocols define the
format of requests and responses and enable communication between the client and server.

b. Cookies and Sessions

Cookies allow servers to store data (e.g., session IDs) on the client-side to track user behavior or
maintain a session across multiple requests. The server can send cookies via Set-Cookie
headers, and the client includes them in subsequent requests.

c. Caching

Web servers or clients may implement caching to store copies of responses temporarily. This
reduces the need for redundant requests, improves load times, and reduces server load. Caching
headers like Cache-Control or Expires dictate caching behavior.

d. Content Delivery Networks (CDNs)

CDNs are distributed networks of servers that deliver static resources (e.g., images, CSS files)
from a location closer to the user, reducing latency and improving speed.

Elaborate on CSS3 features in detail.

CSS3 Features in Detail

Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
An Autonomous Institution Affiliated to Anna University | Approved by AICT
An Autonomous Institution, Approved by AICTE, New Delhi, Affiliated to Anna University, Chennai
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

CSS3 (Cascading Style Sheets, version 3) introduced numerous features that revolutionized web
design by providing more powerful styling capabilities, improving performance, and enhancing
user experience. These features allow developers to create visually appealing, responsive, and
dynamic websites. Let’s delve into the key features of CSS3 in detail.

1. Selectors

CSS3 introduced many new selectors that enhance the ability to target specific elements in a
document based on attributes, states, or relationships between elements. Some of the new CSS3
selectors are:

 Attribute Selectors: These allow you to target elements based on their attributes or
attribute values.
o Example: [type="text"] selects all <input> elements with the type="text".

input[type="text"] {
background-color: lightgray;
}

 Pseudo-Classes: These allow styling elements based on their state (e.g., :hover, :focus,
:nth-child(), etc.).
o Example: :nth-child(odd) selects every odd-numbered child of a parent.

li:nth-child(odd) {
background-color: lightblue;
}

 Pseudo-Elements: These allow styling specific parts of elements, such as the first line or
first letter of a block of text (e.g., ::first-line, ::before, ::after).

p::first-line {
font-weight: bold;
}

2. Box Model and Box-Sizing

CSS3 introduced the box-sizing property, which changed how the width and height of an
element are calculated. Traditionally, the width and height were calculated based only on the
content box, excluding padding and borders. CSS3 allows developers to include padding and
borders in the width and height calculations.

 box-sizing: This property allows you to control whether padding and borders are
included in the element’s total width and height.
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

.box {
width: 200px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box; /* Includes padding and border in the width */
}

3. Media Queries

One of the most significant additions in CSS3 is media queries, which allow developers to apply
styles based on the characteristics of the user’s device, such as screen size, resolution,
orientation, and more. This feature is crucial for responsive web design.

 Media Queries: They allow applying different CSS rules based on device features,
making websites adaptive and responsive.

@media (max-width: 600px) {

body {
background-color: lightblue;
}
}

In this example, the background color changes to light blue on devices with a width of 600 pixels
or less.

4. Colors

CSS3 introduced new ways to define colors, such as rgba(), hsla(), and named colors. These
new formats provide more flexibility for developers when defining colors and adding
transparency.

 RGBA Colors: Defines colors with red, green, blue, and alpha (transparency).

background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */

 HSLA Colors: Defines colors based on hue, saturation, lightness, and alpha
(transparency).

color: hsla(240, 100%, 50%, 0.7); /* Semi-transparent blue */

 Named Colors: CSS3 extended the list of named colors, allowing developers to use
descriptive names instead of hexadecimal or RGB codes.
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

background-color: lightcoral;

5. Text Effects

CSS3 offers a variety of new text properties that allow designers to create more sophisticated
typography. These include text shadows, word wrapping, text overflow handling, and more.

 Text Shadow: Adds shadow to text, which can enhance readability or give a 3D effect.

h1 {
text-shadow: 2px 2px 5px gray;
}

 Text Overflow: Controls how overflowed text is handled, particularly when text exceeds
the size of its container.

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Adds "..." to indicate overflow */
}

 Word Wrap: Forces long words to break and wrap onto the next line to prevent layout
overflow.

p {
word-wrap: break-word;
}

6. Shadows

CSS3 introduced box-shadow, which adds shadows to elements without using images. This
feature can be used to create depth, 3D effects, or subtle shading for elements like buttons, divs,
or images.

 Box Shadow: Adds shadow effects to elements like divs or images.

.box {
width: 200px;
height: 200px;
background-color: lightgray;
box-shadow: 5px 5px 10px gray; /* Adds a shadow */
}
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
An Autonomous Institution Affiliated to Anna University | Approved by AICT
An Autonomous Institution, Approved by AICTE, New Delhi, Affiliated to Anna University, Chennai
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

7. Borders and Border Radius

CSS3 introduced new capabilities for styling borders, including border-radius, border-image,
and multiple borders. These features allow developers to create rounded corners, gradient
borders, and even image borders.

 Border Radius: Creates rounded corners for any box.

.box {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 20px; /* Rounded corners */
}

 Border Image: Uses images for borders, allowing for more creative designs.

.box {
border: 10px solid;
border-image: url(border.png) 30 round; /* Image as a border */
}

8. Gradients

CSS3 introduced support for gradients, allowing developers to create smooth transitions
between colors without the need for external images.

 Linear Gradients: A transition between colors along a straight line.

background: linear-gradient(to right, red, blue);

 Radial Gradients: A transition between colors starting from a central point and radiating
outward.

background: radial-gradient(circle, yellow, green);

9. Transitions and Animations

CSS3 introduced transitions and animations, making it easier to create dynamic and interactive
effects without JavaScript. These effects include hover states, menu animations, and more.

 Transitions: Allows smooth transitions between different states (e.g., on hover or focus).
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

.button {
background-color: red;
transition: background-color 0.5s ease;
}

.button:hover {
background-color: blue;
}

 Animations: Allows creating complex animations by defining keyframes.

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

.animated-box {
animation: example 3s infinite; /* Infinite animation */
}

10. Transforms

CSS3 introduced transforms, which allow developers to scale, rotate, skew, or translate
elements. These are used to create more dynamic layouts and 3D effects.

 2D Transforms:
o Rotate: Rotates an element.

.rotate {
transform: rotate(45deg); /* Rotate 45 degrees */
}

o Scale: Resizes an element.

.scale {
transform: scale(1.5); /* Scales 1.5 times larger */
}

 3D Transforms: Adds 3D perspective effects to elements.

.rotate-3d {
transform: rotateX(60deg) rotateY(30deg);
}

11. Flexbox
Hindusthan CollegeCollege
Hindusthan of Engineering and Technology
of Engineering and Tech
AnAn Autonomous
Autonomous Institution,Institution Affiliated
Approved by AICTE, to
New Delhi, AnnatoUniversity
Affiliated | Chennai
Anna University, Approved by AICT
Accredited by
Accredited NBA‘A’
with (AERO, AUTO,
Grade byCIVIL,
NAAC CSE,| ECE, EEE, IT, MECH,
Accredited by MCTS)
NB A (E CE , ME CH, E E E
Accredited by NAAC ‘A++’ Grade with CGPA of 3.69 out of 4 in Cycle 2
Valley Campus, Pollachi Highway, Coimbatore 641 032.| www.hicet.
Valley Campus, Coimbatore – 641 032, Tamil Nadu, INDIA
Tel: +91 422 4242424 www.hicet.ac.in

CSS3 introduced the flexbox layout model, which simplifies the process of creating flexible and
responsive layouts. Flexbox allows for easy alignment, distribution, and resizing of items in a
container.

 Display: Flex: Makes a container a flex container, and its children become flex items.

.container {
display: flex;
justify-content: space-between;
}

 Flex Properties: Control how flex items grow or shrink.

.item {
flex-grow: 1; /* Items grow to fill available space */
}

12. CSS Grid

CSS Grid is a powerful layout system introduced in CSS3 that allows for creating complex,
grid-based layouts. Unlike flexbox, which is one-dimensional, grid layouts work in two
dimensions (rows and columns).

 Grid Layout:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal-width columns */
grid-gap: 10px; /* Space between items */
}

Conclusion

CSS3 introduced numerous features that have significantly enhanced the flexibility, power, and
creativity of web design.