Scribd
Upload
6 views48 pages

Module 5

Module 5 covers the basics of HTML, including its structure, key elements, and common tags such as <head>, <body>, <h1> to <h6>, <p>, <a>, and <img>. It emphasizes the importance of the <title> tag for SEO and user experience, and explains how to control text flow and formatting using various HTML tags and CSS styles. The module also discusses aligning text and images, as well as using inline, internal, and external CSS for styling web pages.

Uploaded by

meherjharana72
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views48 pages

Module 5

Module 5 covers the basics of HTML, including its structure, key elements, and common tags such as <head>, <body>, <h1> to <h6>, <p>, <a>, and <img>. It emphasizes the importance of the <title> tag for SEO and user experience, and explains how to control text flow and formatting using various HTML tags and CSS styles. The module also discusses aligning text and images, as well as using inline, internal, and external CSS for styling web pages.

Uploaded by

meherjharana72
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Module 5

HTML BASICS

Introduction to HTML Basics


HTML (HyperText Markup Language) is the foundational language for creating web pages. It
structures the content on a web page, allowing you to define text, images, links, and other media.

Key elements include:

• Basic Structure: HTML documents consist of a <head> for meta-information and a <body> for
the visible content.
• Titles: The <title> tag in the <head> defines the page title, which appears in the browser tab.
• Text Structuring: Use <p> for paragraphs and <br> for line breaks to control text flow.
• Headings: Six levels of headings (<h1> to <h6>) organize content by importance.
• Text Formatting: Change text size and color using heading tags or inline styles.
• Images: The <img> tag embeds images, with src for the image path and alt for alternative text.
• Links: The <a> tag creates hyperlinks to other pages or resources.
• Alignment: CSS properties like text-align and margin:auto; align text and images.
• Iframes: The <iframe> tag embeds other web pages within the current page.

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph</p>
</body>
</html>

Basic Tags and Attributes in HTML

Definition:
HTML (Hypertext Markup Language) is the standard language used to create and design web
pages. It consists of various elements represented by tags, which can be enhanced with attributes
to define their properties and behavior.

Common HTML Tags

1. <html>
o Description: The root element that contains all other HTML elements.
o Example:

Prepared by [Link]. Pandi Prabha S


<html>
</html>

2. <head>
o Description: Contains meta-information about the document, such as title, links to
stylesheets, and scripts.
o Example:

<head>
<title>Page Title</title>
</head>

3. <title>
o Description: Sets the title of the web page, displayed on the browser's title bar or
tab.
o Example:

<title>My First Web Page</title>

4. <body>
o Description: Contains the content of the web page, including text, images, links,
etc.
o Example:

<body>
<h1>Hello, World!</h1>
</body>

5. <h1> to <h6>
o Description: Heading tags define headings of different levels, with <h1> being the
highest and <h6> the lowest.
o Example:

<h1>This is a Heading</h1>
<h2>This is a Subheading</h2>

6. <p>
o Description: Defines a paragraph of text.
o Example:

<p>This is a paragraph.</p>

7. <a>
o Description: Creates a hyperlink to another page or resource.
o Attributes:
▪ href: Specifies the URL of the page the link goes to.
o Example:

<a href="[Link] Example</a>

8. <img>

Prepared by [Link]. Pandi Prabha S


o Description: Embeds an image in the page.
o Attributes:
▪ src: Specifies the path to the image.
▪ alt: Provides alternative text for the image if it cannot be displayed.
o Example:

<img src="[Link]" alt="Description of Image">

9. <ul> and <ol>


o Description: Defines an unordered list (<ul>) or an ordered list (<ol>).
o Example:

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>

10. <li>
o Description: Represents a list item in both ordered and unordered lists.
o Example:

<li>List Item</li>

11. <div>
o Description: A block-level container for grouping content.
o Example:

<div>
<p>This is a paragraph inside a div.</p>
</div>

12. <span>
o Description: An inline container used to mark up a part of a text or a document.
o Example:

<span style="color: red;">This text is red.</span>

Common Attributes

• id
o Description: Assigns a unique identifier to an HTML element.
o Example:

<div id="uniqueId">Content</div>

• class

Prepared by [Link]. Pandi Prabha S


o Description: Assigns one or more class names to an element, which can be used for
styling with CSS.
o Example:

<p class="text-center">Centered Text</p>

• style
o Description: Applies inline CSS styles directly to an element.
o Example:

<h1 style="color: blue;">Blue Heading</h1>

• title
o Description: Provides additional information about an element, often displayed as a
tooltip on hover.
o Example:

<a href="#" title="Click here for more information">More Info</a>

• target
o Description: Specifies how to open the linked document.
o Example:

<a href="[Link] target="_blank">Open in New Tab</a>

1. Describing Web Page Contents with a Title

Concept:

• Every HTML document begins with a structure that includes a <head> and a <body> section.
• The <title> tag, placed inside the <head>, defines the title of the web page, which is displayed
on the browser tab, bookmarks, and search engine results.

HTML Code:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
</body>
</html>

Output: Explanation:

• The <title> element is crucial for SEO


(Search Engine Optimization) and user

Prepared by [Link]. Pandi Prabha S


experience. It helps users understand the content or purpose of the page before they click on
the link.
• The <h1> tag inside the <body> represents the main heading of the content, visually larger and
often used as the most important heading on the page.

2. Controlling the Flow of Text with Paragraph and Line Break Tags

Concept:

• HTML provides tags to control the flow and structure of text. The <p> tag is used to create
paragraphs, adding a block-level space before and after the content.
• The <br> tag creates a line break within text, without starting a new paragraph.

HTML Code:

<p>This is a paragraph of text.</p>


<p>This is another paragraph.</p>
This line breaks here.<br>And continues on the next line.

Output:

Explanation:

• The <p> tag wraps content into a block, ensuring it’s


visually separated from other content.
• The <br> tag forces a line break, useful for addresses,
poems, or where new lines are needed without starting a
new paragraph.

3. Changing the Size of Text Using Heading Level Tags and the Font Tag size Attribute

1. Heading Tags (<h1> to <h6>)

• Definition: Used to define headings in an HTML document. The numbers indicate the
importance and size, where <h1> is the most important (largest) and <h6> is the least
important (smallest).
• Example: <h1>Heading 1</h1> renders a large text for titles or main headings.

HTML Heading Tags Overview:

• <h1>: Main title or most important heading (e.g., page or article title).
• <h2>: Subheading, used for sections under the main heading.
• <h3>: Subheading, used for subsections within an <h2> section.
• <h4>: Subheading, used for subsections within an <h3> section.
• <h5>: Subheading, used for subsections within an <h4> section.
• <h6>: Least important heading, typically used for small, less important subsections.

Prepared by [Link]. Pandi Prabha S


2. Font Tag (<font>)

• Definition: An older HTML tag used to change the appearance of text, such as its size,
color, and font family. Although outdated, it's still valid in older HTML documents.
• Example: <font size="4">This text is medium-sized</font>. This tag changes the size of text
based on values from 1 (smallest) to 7 (largest).

3. size Attribute

• Definition: An attribute used within the <font> tag to control the text size. It takes numeric
values from 1 (smallest) to 7 (largest).
• Example: <font size="3">This text is medium-sized</font> changes the font size to a
medium size.

Example

<!DOCTYPE html>
<html>
<head>
<title>Text Size Example</title>
</head>
<body>
<!-- Heading tags from largest to smallest -->
<h1>Heading 1: The largest heading</h1>
<h2>Heading 2: Slightly smaller than h1</h2>
<h3>Heading 3: Mid-sized heading</h3>
<h4>Heading 4: Smaller than h3</h4>
<h5>Heading 5: Second smallest heading</h5>
<h6>Heading 6: The smallest heading</h6>

<!-- Font tag with size attribute -->


<font size="1">This is the smallest text using the font tag</font><br>
<font size="3">This is medium-sized text using the font tag</font><br>
<font size="7">This is the largest text using the font tag</font>
</body>
</html>

Output :

Prepared by [Link]. Pandi Prabha S


4. Changing the Color of Text in an HTML Document

1. Using the <font> Tag with the color Attribute (Outdated)

The <font> tag allows you to specify the color using the color attribute. However, this method is
deprecated in modern HTML and should generally be avoided.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Change Text Color with Font Tag</title>
</head>
<body>
<font color="red">This text is red.</font><br>
<font color="blue">This text is blue.</font>
</body>
</html>

Output:

2. Using CSS Styles (Preferred Method)

Using CSS (Cascading Style Sheets) is the modern and preferred way to change text color in HTML.
You can use the style attribute directly in the HTML tags or define the styles in a separate CSS
section or file.

▪ a. Inline CSS

This method applies the color directly to the HTML element using the style attribute.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Change Text Color with Inline CSS</title>
</head>
<body>
<p style="color: red;">This text is red.</p>
<p style="color: blue;">This text is blue.</p>
</body>

Prepared by [Link]. Pandi Prabha S


</html>

▪ b. Internal CSS

This method allows you to define the text color inside a <style> block within the <head> section of
the document.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Change Text Color with Internal CSS</title>
<style>
p {
color: green; /* All paragraphs will be green */
}

h1 {
color: navy; /* All h1 headings will be navy */
}
</style>
</head>
<body>
<h1>Case Study Report</h1>
<p>This is a sample paragraph in green text.</p>
</body>
</html>

▪ c. External CSS (Separate File)

In this method, the CSS code is stored in a separate file, and the HTML file references it. This is the
most scalable and maintainable approach.

Example (HTML File):

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
<title>Change Text Color with External CSS</title>
</head>
<body>
<h1>Report Overview</h1>
<p>This is a sample paragraph with styles from an external CSS
file.</p>
</body>
</html>

Example (External CSS File - [Link]):

h1 {
color: purple;
}

p {

Prepared by [Link]. Pandi Prabha S


color: darkred;
}

Summary:

• Inline CSS is good for small, quick changes.


• Internal CSS is suitable for applying styles across multiple elements in the same document.
• External CSS is ideal for large projects where styles need to be shared across multiple HTML
files.

5. Adding Graphics to a Web Page Using a Basic <img> Tag

Concept:

• The <img> tag embeds images into a web page. The src attribute specifies the path to the image,
while the alt attribute provides alternative text for accessibility and when the image cannot be
displayed.

HTML Code:

<img src="[Link]" alt="Description of image">

Output:

Explanation:

• The src attribute is essential for pointing to the


correct image file. This can be a local file path or a URL.
• The alt attribute is vital for accessibility,
ensuring screen readers can describe the image to
visually impaired users and providing context when
images don’t load.

6. Changing the Alignment of Text and Graphics( (images, video, audio)

1. Aligning Text in HTML


You can align text using either the HTML align attribute or CSS styles.

a. Using the align Attribute

This was commonly used in older HTML versions.


<!DOCTYPE html>
<html>

Prepared by [Link]. Pandi Prabha S


<head>
<title>Align Text with Attribute</title>
</head>
<body>
<p align="left">This text is left-aligned.</p>
<p align="center">This text is center-aligned.</p>
<p align="right">This text is right-aligned.</p>
</body>
</html>

Output

b. Using CSS Text Alignment

CSS provides the text-align property, which is the modern way to align text.

<html>
<head>
<title>Align Text with CSS</title>
<style>
.left-align {
text-align: left;
}
.center-align {
text-align: center;
}
.right-align {
text-align: right;
}
</style>
</head>
<body>
<p class="left-align">This text is left-aligned.</p>
<p class="center-align">This text is center-aligned.</p>
<p class="right-align">This text is right-aligned.</p>
</body>
</html>

2. Aligning Graphics (Images) in HTML

You can align images using the HTML align attribute or CSS for modern web development.

Prepared by [Link]. Pandi Prabha S


a. Using the align Attribute

The align attribute could be used with <img> to align images relative to surrounding text or page
layout.

<!DOCTYPE html>
<html>
<head>
<title>Align Image with Attribute</title>
</head>
<body>
<img src="[Link]" align="left" alt="Sample Image" width="200" height="150">
<p>This text wraps around the image.</p>
</body>
</html>

Output:

b. Using CSS for Image Alignment

For better control and modern usage, CSS float and text-align properties are used to align images.

<!DOCTYPE html>
<html>
<head>
<title>Align Image with CSS</title>
<style>
.left-image {
float: left;
margin-right: 10px;
}
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
}
.right-image {
float: right;

Prepared by [Link]. Pandi Prabha S


margin-left: 10px;
}
</style>
</head>
<body>
<img src="[Link]" class="left-image" alt="Left Aligned Image"
width="200" height="150">
<p>This text is aligned to the right of the image, wrapping around
it.</p>

<img src="[Link]" class="center-image" alt="Center Aligned Image"


width="200" height="150">
<p>This image is centered on the page.</p>

<img src="[Link]" class="right-image" alt="Right Aligned Image"


width="200" height="150">
<p>This text is aligned to the left of the image, wrapping around
it.</p>
</body>
</html>

3. Aligning a Video using the align Attribute (Older HTML)

Aligning multimedia elements in HTML allows images, videos, and audio to be positioned
relative to surrounding text or page layout, enhancing content flow and user experience.

<html>
<head>
<title>Align Video with Attribute</title>
</head>
<body>
<video src="sample-video.mp4" align="right" width="320" height="240"
controls>
</video>
<p>This text wraps around the video.</p>
</body>
</html>

Output:

Prepared by [Link]. Pandi Prabha S


3.1. Aligning a Video with CSS (Modern Approach)
<html>
<head>
<title>Align Video with CSS</title>
<style>
.video-left {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<video src="sample-video.mp4" class="video-left" width="320"
height="240" controls>
Your browser does not support the video tag.
</video>
<p>This text wraps around the video using CSS.</p>
</body>
</html>

4. Aligning Audio using the align Attribute (Older HTML)

Although align is not supported on <audio> elements in HTML5, here’s an example for the sake of
understanding:

<html>
<head>
<title>Align Audio with Attribute</title>
</head>
<body>
<audio src="sample-audio.mp3" align="left" controls>
Your browser does not support the audio element.
</audio>
<p>This text appears beside the audio player (if align attribute were
supported).</p>
</body>
</html>

Output:

Prepared by [Link]. Pandi Prabha S


4.1 Aligning Audio using CSS (Modern Approach)

For audio, since there's no align attribute, we use CSS exclusively:

<html>
<head>
<title>Align Audio with CSS</title>
<style>
.audio-left {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<audio src="sample-audio.mp3" class="audio-left" controls>
Your browser does not support the audio element.
</audio>
<p>This text wraps around the audio player using CSS.</p>
</body>
</html>

7. Adding a Hypertext Link to a Web Page

Concept:

• The <a> tag (anchor tag) creates a hyperlink to another web page or resource. The href attribute
specifies the link’s target destination.

HTML Code:

<a href="[Link] Example</a>

Output:

Explanation:

• Hyperlinks are the


foundation of web navigation,
allowing users to move
between different pages and
websites.
• The <a> tag can also link
to sections within the same
page, files, email addresses,
and more.

Prepared by [Link]. Pandi Prabha S


8. Displaying Multiple Web Pages Onscreen at the Same Time

Concept:

• The <iframe> tag embeds another HTML document within the current page, allowing multiple
pages to be displayed simultaneously.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Multiple Web Pages</title>
</head>
<body>

<h1>Multiple Web Pages Displayed at the Same Time</h1>

<!-- Embedding the first web page -->


<iframe src="[Link] width="600" height="400" title="Example
Page"></iframe>

<!-- Embedding the second web page -->


<iframe src="[Link] width="600" height="400"
title="Wikipedia"></iframe>

<!-- Embedding the third web page -->


<iframe src="[Link] width="600" height="400"
title="W3Schools"></iframe>

<!-- Embedding the fourth web page -->


<iframe src="[Link] width="600" height="400"
title="Google"></iframe>

</body>
</html>

Explanation:

• <iframe> tag: Embeds an external web page inside the current HTML page.
• src attribute: Specifies the URL of the web page to be embedded.
• width and height attributes: Set the dimensions of the iframe (you can adjust these values
to fit your needs).
• title attribute: Provides a description of the iframe content for accessibility purposes.

Prepared by [Link]. Pandi Prabha S


Output:

Web Page Layout Using HTML

Definition of Semantic HTML

Semantic HTML refers to the use of HTML markup that conveys meaning about the content it
contains. Using appropriate semantic elements helps improve accessibility, enhance search engine
optimization (SEO), and create a clearer structure for developers and users alike.

HTML Layout Components

A well-structured web page typically consists of several key components. Below is an example of a
basic semantic web page layout using only HTML tags:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Blog</title>
</head>
<body>

<header>
<h1>Explore the World</h1>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#destinations">Destinations</a></li>
<li><a href="#travel-tips">Travel Tips</a></li>

Prepared by [Link]. Pandi Prabha S


<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<main>
<article>
<h2>Featured Destination: Bali</h2>
<p>Bali is known for its stunning beaches, vibrant culture, and lush
landscapes. Discover the hidden gems and tourist spots that make Bali a must-
visit.</p>
</article>
<aside>
<h2>Travel Resources</h2>
<p>Planning your next adventure can be an exciting yet overwhelming
task, but there are plenty of helpful resources to make the process smoother and
more enjoyable. Travel blogs often provide firsthand accounts and tips from
travelers who have experienced the destinations you’re considering. Websites like
TripAdvisor and Lonely Planet offer reviews, recommendations, and detailed
itineraries that can help you decide where to go and what to see. For those
interested in cultural experiences, platforms like Airbnb Experiences allow you to
book unique activities hosted by locals, from cooking classes to guided tours. If
you prefer a more structured approach, consider using travel planning apps like
Roadtrippers or Kayak, which allow you to map out your journey, find
accommodations, and track your budget all in one place.

Social media platforms, especially Instagram and Pinterest, are invaluable for
visual inspiration, showcasing breathtaking landscapes and hidden gems through
stunning photographs. Additionally, YouTube channels dedicated to travel can
provide you with video tours and travel vlogs that showcase destinations from the
perspective of fellow adventurers. For those concerned about budgeting, websites
like Skyscanner and Google Flights can help you compare flight prices, while
Hostelworld offers affordable lodging options. Don’t forget to check out travel
forums like Reddit's r/travel, where you can ask questions and gain insights from
seasoned travelers. Finally, local tourism websites often have valuable resources,
including maps, event calendars, and travel guides tailored to specific regions.
With these resources at your fingertips, your next adventure can be well-planned
and truly memorable.</p>
<ul>
<li><a href="#flights">Best Flight Deals</a></li>
<li><a href="#accommodations">Top Accommodations</a></li>
<li><a href="#itineraries">Sample Itineraries</a></li>
</ul>
Flights are often the first step in your travel planning process. Selecting the
right flight can not only save you money but also enhance your overall travel
experience. It’s essential to compare various airlines and booking platforms, as
prices can fluctuate significantly. Consider factors like layover times, flight
durations, and departure/arrival times that suit your schedule. Flexible travel

Prepared by [Link]. Pandi Prabha S


dates can also provide better pricing options, so using fare comparison tools like
Skyscanner or Google Flights can be beneficial in finding the best deals.

Accommodations are another vital aspect of travel planning. The type of lodging you
choose can greatly impact your experience, from luxurious hotels to budget-friendly
hostels and vacation rentals. Platforms like Airbnb and [Link] offer a wide
range of options tailored to different preferences and budgets. Consider the
location of your accommodation in relation to major attractions, transportation
options, and local dining. Reviews and ratings can guide you in making informed
choices, ensuring your stay is comfortable and enjoyable.
</aside>
</main>

<footer>
<p>&copy; 2024 Explore the World. All rights reserved.</p>
</footer>
</body>
</html>

Output:

Explanation of Semantic HTML Elements

1. <header>
o Purpose: This element contains introductory content for the webpage, such as the
title or logo.
2. <nav>

Prepared by [Link]. Pandi Prabha S


o Purpose: Represents the navigation section of the webpage, containing links to other
sections or pages.
3. <main>
o Purpose: Encloses the main content of the webpage, which is the focus of the page.
4. <article>
o Purpose: Represents a self-contained piece of content that can be independently
distributed or reused.
5. <aside>
o Purpose: Contains supplementary content that is related to the main content, often
used for sidebars or additional information.
6. <footer>
o Purpose: Represents the footer of the webpage, typically containing copyright
information, links to privacy policies, or contact details.

Benefits of Using Semantic HTML

• Accessibility: Enhances navigation for users relying on assistive technologies by providing


a meaningful structure.
• SEO: Improves the indexing of the webpage by search engines, potentially boosting
visibility in search results.
• Maintainability: Clear structure makes it easier for developers to understand and modify
the code.
• User Experience: A well-organized layout helps users find the information they need
quickly and efficiently.

Basic Structure of a Web Page with CSS

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Page Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px 0;
}
nav {
background-color: #333;

Prepared by [Link]. Pandi Prabha S


overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
main {
display: flex;
margin: 20px;
}
.content {
flex: 70%;
padding: 20px;
background-color: #f1f1f1;
}
.sidebar {
flex: 30%;
padding: 20px;
background-color: #f9f9f9;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>My Web Page</h1>
</header>

<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>

Prepared by [Link]. Pandi Prabha S


<a href="#contact">Contact</a>
</nav>

<main>
<div class="content">
<h2>Main Content Area</h2>
<p>This is where the main content of the web page goes.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar area where additional information can be
placed.</p>
</div>
</main>

<footer>
<p>Footer &copy; 2024</p>
</footer>
</body>
</html>

Explanation of the Code

1. <!DOCTYPE html>: Declares the document type and version of HTML being used (HTML5).
2. <html lang="en">: The root element of the HTML document, specifying the language as
English.
3. <head>: Contains meta-information about the document, such as character set, viewport
settings, and the title.
4. <style>: Inline CSS styles define the appearance of different sections of the page.
5. <body>: Contains all the visible content of the web page.
6. <header>: Represents the introductory content or header of the page. It often contains the
title or logo.
7. <nav>: The navigation bar contains links to other sections or pages of the website.
8. <main>: The main content area where the primary information is displayed. It uses a
flexbox layout to create two sections: content and sidebar.
o .content: The main section for displaying content.
o .sidebar: A side area for additional information or links.
9. <footer>: Represents the footer of the page, often containing copyright information and
links to privacy policies or terms of service.

Sections
In HTML, a <section> element is a semantic tag used to define a standalone section of content
within a document. This element is typically used to group related content and can contain various
types of content, such as headings, paragraphs, images, and more.

Key Features of the <section> Element:

Prepared by [Link]. Pandi Prabha S


1. Semantic Meaning:
o The <section> element provides meaning to the content, indicating that the
enclosed content is related and forms a distinct section of the document.
2. Structure:
o Each <section> should ideally have a heading (using <h1>, <h2>, etc.) to describe
the content it contains, making it easier for both users and search engines to
understand the structure of the page.
3. Accessibility:
o Using semantic HTML elements like <section> helps improve accessibility, allowing
assistive technologies to navigate the document more effectively.
4. Styling and Layout:
o You can style sections with CSS to create a visually distinct appearance, making it
easier to organize and present content on a web page.

Example of Using the <section> Element:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Section Element</title>
</head>
<body>

<header>
<h1>Welcome to My Website</h1>
</header>

<section>
<h2>About Us</h2>
<p>We are a company dedicated to providing the best services in the
industry.</p>
</section>

<section>
<h2>Our Services</h2>
<p>We offer a wide range of services to meet our clients' needs.</p>
</section>

<section>
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us!</p>
</section>

<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>
</body>

Prepared by [Link]. Pandi Prabha S


</html>

Output:

When to Use <section>

• Use the <section>


element when you want to
create distinct, thematic
groupings of content within
your web page. For example,
different topics on a blog post,
different features of a product,
or various parts of a single
article.

Difference from Other Elements

• Unlike <div>, which is a generic container without semantic meaning, the <section>
element carries significance regarding the document's structure. Other semantic elements
include <article>, <header>, <footer>, and <aside>, each serving specific purposes in
organizing and clarifying content within the HTML document.

HTML TABLES

Overview
HTML tables are used to organize and display data in a structured, grid-like format, consisting of rows
and columns. They are particularly useful for presenting tabular data such as schedules, financial
reports, or comparison charts.

Basic Structure:

• <table>: The main container for the table.


• <tr>: Defines a row.
• <th>: Header cells, usually bold and centered.
• <td>: Standard data cells.

Example:

<table>
<tr><th>Product</th><th>Price</th></tr>

Prepared by [Link]. Pandi Prabha S


<tr><td>Apple</td><td>$1.00</td></tr>
</table>

Styling:

• Use border for basic borders or CSS for advanced styling like padding and background colors.

Spanning:

• colspan: Merges cells across columns.


• rowspan: Merges cells across rows.

Example:

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

Caption:

• <caption>: Adds a title to the table.

HTML tables are essential for displaying structured data clearly and efficiently.

1. Creating a Table with Cells that Span Multiple Columns or Multiple Rows

Definition:
Creating tables with cells that span multiple columns or rows is a way to organize data effectively
in a structured format. In HTML, you can achieve this by using the colspan and rowspan attributes
within the <td> (table data) or <th> (table header) tags. This allows for a more flexible layout of
tabular data.

Example: Table with Colspan and Rowspan

<html>
<head>
<title>Table with Colspan and Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Student Information</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>

Prepared by [Link]. Pandi Prabha S


</tr>
<tr>
<td>Jill</td>
<td>15</td>
<td>10th</td>
</tr>
<tr>
<td>Eve</td>
<td>16</td>
<td>11th</td>
</tr>
<tr>
<td rowspan="2">John</td>
<td>17</td>
<td>12th</td>
</tr>
<tr>
<td>18</td>
<td>Graduated</td>
</tr>
</table>
</body>
</html>

Output:

Explanation:

• <th colspan="3">Student Information</th>:


This header cell spans across three columns. It
merges the cells in the header row to create a
single header for the table.
• <td rowspan="2">John</td>: This data cell
spans two rows. It merges the rows for John, so the
name "John" appears in the first column for both
rows below it.

Table Structure:

• The first row contains a single header cell that spans three columns.
• The second row contains headers for Name, Age, and Grade.
• The third and fourth rows contain data for Jill and Eve.
• The fifth and sixth rows contain data for John, with "John" occupying the first column of
both rows.

Prepared by [Link]. Pandi Prabha S


2. Working with Table and Cell Border Widths & Colors

Definition:
Setting the border width and colors for tables and their cells in HTML enhances the visual appeal
and readability of tabular data. You can specify the width and color of the table border and cell
borders directly within the HTML markup using attributes in the <table> and <td> (table data) tags.

Example: Table with Border Widths and Colors

<html>
<head>
<title>Table with Borders</title>
</head>
<body>
<table border="2" bordercolor="blue" cellspacing="0" cellpadding="5">
<tr>
<th style="border: 2px solid red;">Firstname</th>
<th style="border: 2px solid red;">Lastname</th>
<th style="border: 2px solid red;">Age</th>
</tr>
<tr>
<td style="border: 1px solid green;">Jill</td>
<td style="border: 1px solid green;">Smith</td>
<td style="border: 1px solid green;">50</td>
</tr>
<tr>
<td style="border: 1px solid green;">Eve</td>
<td style="border: 1px solid green;">Jackson</td>
<td style="border: 1px solid green;">94</td>
</tr>
<tr>
<td style="border: 1px solid green;">John</td>
<td style="border: 1px solid green;">Doe</td>
<td style="border: 1px solid green;">80</td>
</tr>
</table>
</body>
</html>

Output:

Prepared by [Link]. Pandi Prabha S


Explanation:

• border="2": Sets the overall border


width of the table to 2 pixels.
• bordercolor="blue": Specifies the color
of the table's outer border (blue).
• cellspacing="0": Removes space
between cells.
• cellpadding="5": Adds padding inside
the cells, creating space between the cell
content and the cell borders.
• style="border: 2px solid red;" (for <th>
elements): Sets the border width to 2 pixels, with a solid line and red color for header cells.
• style="border: 1px solid green;" (for <td> elements): Sets the border width to 1 pixel, with
a solid line and green color for data cells.

3. Working with Background Images and Colors

Definition:
Using background images and colors in HTML allows you to enhance the visual appeal of your web
pages. While CSS is typically used for styling, you can set background colors and images directly in
HTML by using attributes within HTML tags.

Example: Setting Background Colors and Images

Here’s how to set a background color and a background image using only HTML tags.

1. Background Color Example

To set a background color for the entire page, you can use the bgcolor attribute in the <body> tag:

<html>
<head>
<title>Background Color Example</title>
</head>
<body bgcolor="lightblue">
<h1>Welcome to My Web Page</h1>
<p>This is an example of a web page with a light blue background color.</p>
</body>
</html>

• bgcolor="lightblue": Sets the background color of the entire web page to light blue.

Output:

Prepared by [Link]. Pandi Prabha S


2. Background Image Example

To set a background image for the entire page, you can use the background attribute in the
<body> tag:

<html>
<head>
<title>Background Image Example</title>
</head>
<body background="[Link]">
<h1>Welcome to My Web Page</h1>
<p>This is an example of a web page with a background image.</p>
</body>
</html>

• background="[Link]": Specifies the URL of the image to be used as the


background for the entire web page. Replace [Link] with the actual path to
your image file.

Output

Combining Background Color and Image

Prepared by [Link]. Pandi Prabha S


You can also combine a background color with a background image by using both attributes in the
<body> tag:

<html>
<head>
<title>Background Color and Image Example</title>
</head>
<body bgcolor="lightblue" background="[Link]">
<h1>Welcome to My Web Page</h1>
<p>This is an example of a web page with a light blue background color and a
background image.</p>
</body>
</html>

• In this example, the light blue color will show through the areas of the image that are
transparent.

4. Aligning a Table on a Web Page

Definition:
Aligning a table on a web page involves positioning the table at specific locations like the center,
left, or right. This can be done using the align attribute in the HTML <table> tag.

Example: Center Aligning a Table

<html>
<head>
<title>Center Aligned Table</title>
</head>
<body>
<table align="center" border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>

Prepared by [Link]. Pandi Prabha S


<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Output :

• The align="center" attribute centers the table on the web page.


• The border="1" attribute adds a border around the table.

Change to Left Align

To align the table to the left, simply change the align value in the <table> tag like this:

<table align="left" border="1">

Change to Right Align

To align the table to the right, change the align value to:

<table align="right" border="1">

Summary of Changes:

• Center Alignment: align="center"


• Left Alignment: align="left"
• Right Alignment: align="right"

By changing the value of the align attribute, you can easily control the positioning of the table on
your web page.

5. Displaying a Gallery of Thumbnails Within a Table

Definition:
Displaying a gallery of thumbnails within a table is an effective way to present images on a
website. It organizes images into a structured layout, allowing visitors to easily browse and select

Prepared by [Link]. Pandi Prabha S


full-size images with a simple click. This method enhances user experience by minimizing loading
times and providing a clean interface.

Use Case Example

For instance, if you own a real estate company, you might want to showcase photographs of
various homes you are marketing. By providing a thumbnail gallery, you give site visitors the
option to view a larger image by clicking on a smaller version. This approach is beneficial as it
reduces loading times and lets users choose what they want to view.

Creating a Thumbnail Gallery with HTML

To create a thumbnail gallery using a table, you can set up a table where each cell contains a
thumbnail image. The thumbnail images are linked to their corresponding full-size images using
<a> tags with the href attribute.

<html>
<head>
<title>Thumbnail Gallery</title>
</head>
<body>
<h1>Gallery of Homes</h1>
<table border="4" cellpadding="0" cellspacing="2" width="137"
bgcolor="#ffccff">
<tr>
<td align="center" valign="middle">
<a href="[Link]
<img src="D:\A-JAIN\FCA\LAB\[Link]" alt="Home 1">
</a>
</td>
<tr>
<td align="center" valign="middle">
<a target="_blank" href="D:\A-JAIN\FCA\LAB\[Link]">
<img src="D:\A-JAIN\FCA\LAB\[Link]" alt="Forest" style="width:150px">
</a>
</td>

<td align="center" valign="middle">


<a href="[Link]
<img src="home_2.jpg" alt="Home 2">
</a>
</td>
<td align="center" valign="middle">
<a href="[Link]
<img src="home_3.jpg" alt="Home 3">
</a>
</td>
<td align="center" valign="middle">

Prepared by [Link]. Pandi Prabha S


<a href="[Link]
<img src="home_4.jpg" alt="Home 4">
</a>
</td>
</tr>
</table> </body>
</html>

<a target="_blank" href="img_forest.jpg">


<img src="img_forest.jpg" alt="Forest" style="width:150px">
</a>

Output:

Explanation of the Code:

• Table Structure: The <table> tag creates a table with a border, cell padding, and cell
spacing defined. Each <td> (table data) cell contains a thumbnail image.
• Linking Thumbnails: The <a> tag wraps around each <img> tag. The href attribute in the
<a> tag links to the web page containing the full-size image. For example, <a
href="page_1.htm"> links the thumbnail home_1.jpg to its full-size counterpart on
page_1.htm.
• Image Source: The src attribute of the <img> tag specifies the path to the thumbnail image.

HTML FORMS

Overview
HTML forms are used to collect user input and send it to a server for processing. They are crucial for
interactive websites and applications. Here's an overview of key elements and attributes related to
HTML forms:

Key Elements

• <form>: Container for form controls.


<form action="/submit" method="post">
<!-- Form controls -->
</form>

Prepared by [Link]. Pandi Prabha S


• <input>: Versatile element for different types of inputs (text, password, checkbox, etc.).
<input type="text">
<input type="submit">

• <textarea>: Multi-line text input.


<textarea rows="4" cols="50"></textarea>

• <select>: Drop-down list.


<select>
<option>Option 1</option>
<option>Option 2</option>
</select>

• <button>: Clickable button.


<button type="submit">Submit</button>

• <label>: Label for form controls.


<label for="name">Name:</label>
<input type="text" id="name">

Key Attributes

• action: URL to send form data.


• method: HTTP method (GET or POST).
• name: Name of the form control.
• value: Value of the control.
• required: Makes the control mandatory.

Example
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="you@[Link]" required><br><br>

<input type="submit" value="Submit">


</form>

Understanding HTML Forms Processing

Definition:

HTML forms processing involves the interaction between a web browser and a web server when a
visitor submits information via a web form. This process includes sending form data to the server,
executing scripts to handle the data, and providing feedback to the user.

Steps in HTML Forms Processing

Prepared by [Link]. Pandi Prabha S


1. Web Server Sends the Form:
o The web server sends the
form to the visitor's web
browser.
2. Display of the Form:
o The web browser displays
the form, allowing the
visitor to fill it out.
3. Submission of the Form:
o When the visitor clicks the
Submit button, the data is
sent back to the web
server.
4. Passing Form Data:
o The web server passes the submitted form data (also known as form results) to the
CGI (Common Gateway Interface) script.
5. Processing the Data:
o The CGI script processes the form results and may format the data to be sent to an
application program for further handling.
6. Confirmation Message:
o The CGI script generates a confirmation message and sends it back to the web
server.
7. Display Confirmation:
o The web server sends the confirmation message to the web browser for display.

Explanation of the Process

• Webpage Request: The visitor's browser requests a webpage from the web server.
• Form Display: The server sends the form to the browser for the visitor to fill out.
• Form Submission: Upon clicking Submit, the browser sends the form data back to the
server.
• Data Processing: The server uses a CGI script to process the form results, which may
involve storing data or initiating transactions.
• Confirmation: The script generates a confirmation message and sends it to the web server.
• User Feedback: The server delivers the confirmation message back to the visitor's browser
for display.

1. Single-Line Input Field

Description:
A single-line input field is used for short text entries such as names, email addresses, or usernames.

HTML Code:

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Prepared by [Link]. Pandi Prabha S


Explanation:

• <label for="name">: Provides a label for the input field with the for attribute linking it to the
input field's id.
• <input type="text">: Defines a single-line text input field.
• id: Identifies the input element uniquely.
• name: Defines the name of the input field, used when submitting form data.

Output:

2. Multiline Input Field

Description:
A multiline input field (textarea) allows users to enter longer blocks of text, such as comments or
messages.

HTML Code:

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

Explanation:

• <textarea>: Defines a multi-line text input area.


• rows: Sets the number of visible text lines.
• cols: Sets the width of the text area in characters.

Output:

Displays a larger text area where users can input and view multiple lines of text.

3. Text Element
Description:
The text element is used for standard text input fields.

Prepared by [Link]. Pandi Prabha S


HTML Code:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Explanation:

• <input type="text">: Creates a field for entering text.


• The id attribute associates the label with the input field.

Output:

Displays a text box for entering a username.

4. Number Element

Description:
The number element allows users to input numeric values with optional constraints on the range.

HTML Code:

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120">

Explanation:

• <input type="number">: Creates a field for numeric input.


• min: Specifies the minimum allowed value.
• max: Specifies the maximum allowed value.

Output:

Displays a number input field with constraints on the value range.

5. Checkboxes

Description:
Checkboxes let users select one or more options from a list.

Prepared by [Link]. Pandi Prabha S


HTML Code:

<label><input type="checkbox" name="subscribe" value="newsletter"> Subscribe to


newsletter</label>
<label><input type="checkbox" name="terms" value="accept"> Accept terms and
conditions</label>

Explanation:

• <input type="checkbox">: Defines a checkbox.


• name: Identifies the checkbox in form submissions.
• value: The value submitted if the checkbox is checked.

Output:

Displays checkboxes for subscribing to a newsletter and accepting terms.

6. Radio Buttons

Description:
Radio buttons allow users to select only one option from a set of choices.

HTML Code:
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

Explanation:

• <input type="radio">: Defines a radio button.


• name: Groups radio buttons so only one option can be selected.

Output:

Displays radio buttons for selecting gender.

7. Drop-Down List (Selection Menu)

Description:
A drop-down list allows users to select one option from a list of options.

Prepared by [Link]. Pandi Prabha S


HTML Code:

<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>

Explanation:

• <select>: Creates a drop-down menu.


• <option>: Defines options within the drop-down list.

Output:

Displays a drop-down list for selecting a country.

8. Reset Button

Description:
A reset button clears all the fields in the form to their default values.

HTML Code:

<input type="reset" value="Reset">

Explanation:

• <input type="reset">: Creates a button that resets form fields.

Output:

Displays a button that clears all input fields when clicked.

9. Preventing Accidental Clearing

1. Omitting the Reset Button

Prepared by [Link]. Pandi Prabha S


The most straightforward way is simply not including a reset button in your form. This will avoid
any chance of accidentally resetting the form.

<html>
<head>
<title>Form without Reset Button</title>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>

2. Including a Disabled Reset Button

If you still want to show a reset button but prevent its use, you can include the disabled attribute
to disable it.

<html>
<head>
<title>Disabled Reset Button</title>
</head> <body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<input type="submit" value="Submit">


<input type="reset" value="Reset" disabled>
</form>
</body>
</html>

3. Use JavaScript

Description:
To prevent accidental clearing of form data, use a confirmation dialog.

Prepared by [Link]. Pandi Prabha S


HTML Code:

<form onreset="return confirm('Are you sure you want to reset the form?');">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="reset" value="Reset">
</form>

Explanation:

• onreset: JavaScript event handler that shows a confirmation dialog when resetting the form.

Output:

Displays a
confirmation
dialog when the
reset button is
clicked,
preventing
accidental form
clearing.

10. Submit Button

Description:
A submit button sends the form data to the server for processing.

HTML Code:

<input type="submit" value="Submit">

Explanation:

• <input type="submit">: Creates a button that submits the form data.

Output:

Displays a button that, when clicked, submits the form.

Prepared by [Link]. Pandi Prabha S


Registration Form Example: Including Single-Line Input, Multi-Line Input,
Number Input, Checkboxes, Radio Buttons, Dropdown List, Reset Button,
and Submit Button

Example HTML Form

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="/submit" method="post" onsubmit="return confirm('Do you really
want to submit the form?');">
<!-- Single-line Input Field -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>

<!-- Multi-line Input Field -->


<label for="biography">Biography:</label>
<textarea id="biography" name="biography" rows="4" cols="50"
required></textarea>
<br><br>

<!-- Text Element -->


<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100" required>
<br><br>

<!-- Check Boxes -->


<label>Interests:</label><br>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label><br>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label><br>
<br>

<!-- Radio Buttons -->


<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">

Prepared by [Link]. Pandi Prabha S


<label for="female">Female</label><br>
<br>

<!-- Drop-Down List -->


<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
<option value="australia">Australia</option>
</select>
<br><br>

<!-- Reset Button -->


<input type="reset" value="Clear Form" onclick="return confirm('Are you
sure you want to clear the form?');">
<br><br>

<!-- Submit Button -->


<input type="submit" value="Submit">
</form>
</body> </html>

Explanation of Form Elements

• Single-line Input Field: For entering the username.


• Multi-line Input Field: For entering a short biography.
• Text Element (Number Element): For age input, with minimum and maximum limits.
• Checkboxes: To select interests.
• Radio Buttons: For gender selection.
• Drop-Down List: For selecting the country.
• Reset Button: Clears the form but prompts the user for confirmation.
• Submit Button: To submit the form.

Output:

Prepared by [Link]. Pandi Prabha S


Additional Features

• The onsubmit attribute in the <form> tag ensures that the user is prompted to confirm
before submitting.
• The onclick attribute in the reset button prompts the user to confirm before clearing the
form.

Form element contributes to the form’s functionality and usability

Form Element Functionality Usability


Encourages quick entry, making it easy
Allows users to enter their
Single-line Input Field for users to input their usernames
username.
without complexity.

Prepared by [Link]. Pandi Prabha S


Provides a larger area for Offers ample space for users to express
Multi-line Input Field detailed information input, such themselves, enhancing engagement and
as a biography. thoughtful input.
Serves as a guide, providing
Improves accessibility with clear labels
Text Element context and explaining what
and instructions, reducing user errors.
information is required.
Designed for numeric input,
Offers ease of selection with spinner
Number Element ensuring only numbers are
controls for numeric inputs (e.g., age).
accepted.
Allows users to accept terms Straightforward design helps users easily
Checkboxes and conditions or consent to agree to terms, a common practice in
policies. forms.
Enables selection of one option Intuitive layout clarifies that only one
Radio Buttons from a predefined set (e.g., option can be selected, simplifying the
gender). selection process.
Saves space and reduces clutter, while
Provides a list of options for
Drop-Down List limiting selections to prevent incorrect
users to select their country.
data entry.
Allows quick form clearance without
Clears all fields in the form for a
Reset Button manual deletion, especially useful for
fresh start.
lengthy forms.
Clearly labeled button indicates
Submits the form data to the
Submit Button finalization of input, guiding users to
server for processing.
complete their action.

Information Technology Act 2000 and Amendments 2008

Overview:

• IT Act 2000: Aims to provide legal recognition to electronic records, digital signatures, and
electronic contracts. It promotes e-commerce and addresses cybercrimes and digital
transactions.
• Amendments 2008: Updates the Act to address new cyber threats and enhance data privacy
protections.

Key Sections:

• Section 43: Defines penalties for damage to computer systems, unauthorized access, and
data destruction.
• Section 66: Addresses offenses like hacking, identity theft, and cyber terrorism. It prescribes
penalties and imprisonment.
• Section 72: Deals with breach of confidentiality and privacy by individuals who have access
to personal information due to their professional roles.

Details:

Prepared by [Link]. Pandi Prabha S


• Cyber Offenses: Includes unauthorized access, data theft, and cyber terrorism.
• Data Protection: Includes provisions to safeguard sensitive personal data.
• Legal Framework: Establishes the framework for adjudication of cybercrimes and disputes
related to electronic records and signatures.

Digital Personal Data Protection Act 2024

Overview: The Digital Personal Data Protection Act 2024 (DPDPA 2024) is a comprehensive
legislation enacted in India to regulate the processing of personal data. It aims to safeguard
individual privacy by setting out clear guidelines for data collection, usage, and management.

Salient Features:

1. Definition of Personal Data:


o Personal data refers to any data that can identify an individual directly or indirectly.
This includes names, contact information, and biometric data.
2. Scope and Applicability:
o The Act applies to the processing of personal data by entities operating in India or
offering goods and services to individuals in India.
o It also applies to data processors and data fiduciaries, including both government and
private sector organizations.
3. Consent:
o Data processing must be based on explicit and informed consent obtained from the
data subject.
o Consent should be freely given, specific, informed, and unambiguous.
4. Data Subject Rights:
o Right to Access: Individuals can request access to their personal data held by
organizations.
o Right to Correction: Individuals can request corrections to inaccurate or incomplete
data.
o Right to Data Portability: Individuals can obtain and transfer their data from one data
fiduciary to another.
o Right to Erasure: Individuals can request the deletion of their data under certain
conditions.
5. Data Protection Officer (DPO):
o Organizations must appoint a Data Protection Officer (DPO) to oversee data
processing activities and ensure compliance with the Act.
6. Data Processing and Collection Principles:
o Purpose Limitation: Data should be collected only for specific, legitimate purposes
and not further processed in a way that is incompatible with those purposes.
o Data Minimization: Only data necessary for the intended purpose should be
collected.
o Accuracy: Data should be accurate and kept up-to-date.
7. Cross-Border Data Transfer:
o Transfer of personal data outside India is allowed only if the recipient country
ensures an adequate level of data protection or if certain conditions are met.
8. Data Breach Notification:

Prepared by [Link]. Pandi Prabha S


o Organizations must notify the Data Protection Authority and affected individuals
about any data breaches within a specified timeframe.
9. Penalties and Enforcement:
o Non-compliance with the Act can result in significant fines and penalties.
o The Data Protection Authority (DPA) is empowered to investigate complaints,
conduct audits, and enforce compliance.
10. Data Protection Authority (DPA):
o A regulatory body established to oversee the implementation and enforcement of
the Act.
o The DPA is responsible for handling complaints, conducting investigations, and
promoting awareness about data protection.
11. Impact Assessments:
o Organizations must conduct Data Protection Impact Assessments (DPIAs) for
processing activities that may pose a high risk to individuals' privacy.
12. Children’s Data:
o Special provisions apply to the processing of personal data of children under the age
of 18. Consent must be obtained from a parent or guardian.

Key Takeaways:

• The DPDPA 2024 emphasizes protecting individual privacy and ensuring responsible data
handling practices by organizations.
• It establishes clear rights for data subjects and outlines obligations for data controllers and
processors.
• Organizations must stay compliant with the Act to avoid penalties and contribute to the
protection of personal data in India.

Basic Validation Using HTML Attributes

Definition of HTML Form Validation

HTML Form Validation refers to the process of ensuring that the data entered by users in a web
form meets specified criteria before the form can be submitted. This validation helps improve user
experience by preventing errors and ensuring that only valid data is sent to the server.

Basic HTML Form with Validation

Below is an example of a simple form that includes validation for required fields, email format, and
password length using HTML attributes.

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
</head>
<body>

Prepared by [Link]. Pandi Prabha S


<h1>User Registration Form</h1>
<form action="#" method="post">
<label for="username">Username (required):</label>
<input type="text" id="username" name="username" required>
<br><br>

<label for="email">Email (required):</label>


<input type="email" id="email" name="email" required>
<br><br>

<label for="password">Password (required, min 8 characters):</label>


<input type="password" id="password" name="password" required
minlength="8">
<br><br>

<label for="confirm-password">Confirm Password (required):</label>


<input type="password" id="confirm-password" name="confirm-password"
required minlength="8">
<br><br>

<input type="submit" value="Register">


</form>
</body>
</html>

Output:

Explanation of Validation Attributes

1. required:
o Definition: This attribute specifies that the user must fill out this field before
submitting the form.
2. type="email":

Prepared by [Link]. Pandi Prabha S


o Definition: This attribute specifies that the input must be in the format of an email
address (e.g., user@[Link]).
3. minlength="8":
o Definition: This attribute requires that the input length is at least 8 characters for
password fields.

Prepared by [Link]. Pandi Prabha S

You might also like