Scribd
Upload
10 views50 pages

Week 1: A) Write A HTML Program, To Explain The Working of Lists

The document contains a series of HTML programming exercises focusing on various elements such as lists, hyperlinks, images, tables, forms, and frames. Each section includes a brief description of the HTML concepts, followed by source code examples demonstrating their implementation. The exercises are structured to provide practical understanding of HTML tags and attributes, along with their usage in creating web pages.

Uploaded by

nandyalavenkateswara56
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
10 views50 pages

Week 1: A) Write A HTML Program, To Explain The Working of Lists

The document contains a series of HTML programming exercises focusing on various elements such as lists, hyperlinks, images, tables, forms, and frames. Each section includes a brief description of the HTML concepts, followed by source code examples demonstrating their implementation. The exercises are structured to provide practical understanding of HTML tags and attributes, along with their usage in creating web pages.

Uploaded by

nandyalavenkateswara56
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
You are on page 1/ 50

Regd No: 23X51A05C6

WEEK–1

1. a) Write a HTML program, to explain the working of lists.

Note: It should have an ordered list, unordered list, nested fists and
ordered list in an unordered list and definition lists. In HTML, a list is a
structured way to present a collection of items. There are three main types
of lists in HTML

1. Ordered List (<ol>): A numbered list where items are displayed in a

specific order.

2. Unordered List (<ul>): A bullet-point list where the order doesn’t


matter.

3. Definition List (<dl>): A list that pairs terms with descriptions.

4. Nested list (<ol>): A list within another list.

SOURCE CODE:

<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h1>HTML Lists Example</h1>

<h2>Ordered List</h2>
<p>An ordered list is used when the order of items is important.</p>
<ol>
<li>First step: Turn on the computer</li>
<li>Second step: Open the browser</li>
<li>Third step: Search for the website</li>
</ol>

<h2>Unordered List</h2>
Regd No: 23X51A05C6

<p>An unordered list is used when the order of items is not important.</p>
<ul>
<li>Pizza</li>
<li>Burger</li>
<li>Ice Cream</li>
</ul>

<h2>Definition List</h2>
<p>A definition list is used to define terms.</p>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language is the standard language for creating
webpages.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets describe the style of an HTML document,
including layout and design.</dd>

<dt>JavaScript</dt>
<dd>JavaScript is a programming language used to create interactive
effects within web browsers.</dd>
</dl>

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

1. b) Write a HTML program, to explain the working of hyperlinks using


tag and href, target attributes.

DESCRIPTION:

HYPERLINK STATEMENT:

The tag defines a hyperlink, which is used to link from one page to
another. The most important attribute of the element is the “href”
attribute, which indicates the link's destination.

SOURCE CODE:

<html>

<head>

<title>Hyperlinks</title>

<style>

h2{

color:red;

</style>

</head>

<body>

<h1>Hyperlinks</h1>
Regd No: 23X51A05C6

<h2>Go to google</h2>

<a href="https://www.google.com">Visit Google</a>


<br>

<h2>Visit wikipedia</h2>

<a href="https://www.wikipedia.org">Open Wikipedia in a new tab</a>

<br>

<h2>Go to youtube</h2>

<a href="https://www.youtube.com">Visit YouTube</a>

</body>

</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

1. c) Create a HTML document that has your image and your friend’s
image with a specific height and width. Also when clicked on the images it
should navigate to their respective profiles.

Image:
The <img> tag creates a holding space for the referenced image. The
<img> tag has two required attributes: src - Specifies the path to the
image.

SOURCE CODE:

<html>

<head>

<title>Image Hyperlinks</title>

<style> h2{

color:violet

</style>

</head>

<body>

<h1>Image hyperlinks</h1>

<h2>my Eduskills profile</h2>


Regd No: 23X51A05C6

<a href="https://internship.eduskillsfoundation.org/update-profile "</a>

<img src="https://education.sakshi.com/sites/default/files/2022-
10/edu_skills_0.jpg " width="700" height="500">

<h2>Linkdin </h2>

<a href=" https://www.linkedin.com/in/marri-manoj-kumar-


4a8970277/">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSyzQkqTU_elyfEYqfilXlpl5Q23ELNsT
Dq7g&s " width="700" height="500">

</a>

</body>

</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

1. d) Write a HTML program, in such a way that, rather than placing large
images on a page, the preferred technique is to use thumbnails by setting
the height and width parameters to something like to 100*100 pixels.
Each thumbnail image is also a link to a full sized version of the image.
Create an image gallery using this technique.

Image as hyperlink:An image as a link is an image that can be clicked on to


navigate to a specific URL. It's also known as an HTML image link.

SOURCE CODE:
<html>
<head>
<title>Simple Image Gallery</title>
</head>
<body>
<h2>Image Gallery Using Thumbnails</h2>
<a href="https://www.pinterest.com/anithabhalan/god-photos/" target="_blank">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcS93fEUuLwNdHyUqnwnvhw49BUnuuIqcxo
NEw&s" alt="Image 1" width="100" height="100">
</a>
<br>
<a href="fullsize2.jpg" target="_blank"> <img
src="https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcQo6Y
6SeyfqkD8yfexdSNbaY2htkMA6eQ2xA&s" alt="Image 2" width="100"
height="100">
</a>
<br>
<a href="fullsize3.jpg" target="_blank">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTb_q0BJ8WmRYoVNbgcNU4VsgrWZIjtxEJ1Q
&s" alt="Image 3" width="100" height="100">
</a>

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

WEEK–2

2. a) Write a HTML program, to explain the working of tables. (use tags:


<table>, <tr>, <th>, <td> and attributes: border, rowspan, colspan).

TAGS:

<table>: Defines a table.

<tr>: Defines a row in a table.

<th>: Defines a header cell in the table (Bold and Centred by default).

<td>: Defines a data cell.

Attributes: border: Specifies the border width of the table.

rowspan: Merges a cell across multiple rows. colspan:

Merges a cell across multiple columns

SOURCE CODE:
<head>

<title>Employee Details Table</title>


<style>
table { width: 60%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
}
Regd No: 23X51A05C6

th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2 style="text-align: center;">Employee Details</h2>

<table>
<tr>
<th rowspan="2">Employee ID</th>
<th rowspan="2">Name</th>
<th colspan="2">Department</th>
</tr>
<tr>
<th>Role</th>
<th>Location</th>
</tr>
<tr>
<td>101</td>
<td>John Doe</td>
<td>Manager</td>
<td>New York</td>
</tr>
<tr>
<td>102</td>
<td>Sarah Smith</td>
<td>Engineer</td>
<td>London</td>
</tr>
<tr>
<td>103</td>
<td>Michael Brown</td>
<td rowspan="2">HR</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>104</td>
Regd No: 23X51A05C6

<td>Emily Davis</td>
<td>Chicago</td>
</tr>
</table>

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

2. b) Write a HTML program, to explain the working of tables by preparing a


timetable.

(Note: Use <caption> tag to set the caption to the table & also use cell
spacing, cell padding, border, rowspan, colspan etc.).

SOURCE CODE:

Here's a simple HTML timetable code:

Here's a simple HTML timetable code:

< html>
<head>
<title>Timetable</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}

th {
background-color: #4CAF50;
color: white;
}

td {
background-color: #f2f2f2;
}

h2 {
text-align: center;
}
</style>
</head>
Regd No: 23X51A05C6

<body>
<h2>Weekly Timetable</h2>
<table>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>8:00 AM - 9:00 AM</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Biology</td>
</tr>
<tr>
<td>9:00 AM - 10:00 AM</td>
<td>English</td>
<td>Math</td>
<td>History</td>
<td>Geography</td>
<td>Physics</td>
</tr>
<tr>
<td>10:00 AM - 11:00 AM</td>
<td>Science</td>
<td>History</td>
<td>Math</td>
<td>Biology</td>
<td>Chemistry</td>
</tr>
<tr>
<td>11:00 AM - 12:00 PM</td>
<td>Geography</td>
<td>Science</td>
<td>English</td>
<td>History</td>
<td>Math</td>
</tr>
Regd No: 23X51A05C6

<tr>
<td>12:00 PM - 1:00 PM</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
</tr>
<tr>
<td>1:00 PM - 2:00 PM</td>
<td>Math</td>
<td>Chemistry</td>
<td>Biology</td>
<td>Physics</td>
<td>Geography</td>
</tr>
<tr>
<td>2:00 PM - 3:00 PM</td>
<td>Physics</td>
<td>Biology</td>
<td>Chemistry</td>
<td>Math</td>
<td>English</td>
</tr>
</table>
</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

2. c) Write a HTML program, to explain the working of forms by designing


Registration form.
(Note: Include text field, password field, number field, date of birth field,
checkboxes, radio buttons, list boxes using <select> & <option>tags,
<textarea> and two buttons ie: submit and reset. Use tables to provide a
better view).

HTML Form Elements

1. <form>: Defines an HTML form for user input.

2. <input>: Defines an input field within a form.

type="text": A single-line text field. type="password": A password field

that hides input characters. type="number": Allows numeric input.

type="date": Provides a date picker for selecting a date. type="checkbox":

Allows multiple selections (checkboxes). type="radio": Allows single

selection from multiple options

(radio buttons).

3. <select>: Creates a dropdown list.

4. <option>: Defines an option inside a <select> dropdown.

5. <textarea>: Allows multi-line text input.

6. <table>: Organizes form elements in a structured way.

7. <tr>: Defines a table row.

8. <th> & <td>: Define table headers and data cells, respectively.

9. <button> or <input type="submit/reset">:

SOURCE CODE:
< html>
Regd No: 23X51A05C6

<head>

<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form>
<label>Full Name:</label>
<input type="text" name="fullname" required><br><br>
<label>Email:</label>
<input type="email" name="email" required><br><br>

<label>Password:</label>
<input type="password" name="password" required><br><br>

<label>Phone Number:</label>
<input type="number" name="phone" required><br><br>
<label>Date of Birth:</label>
<input type="date" name="dob" required><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br><br>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="Reading"> Reading
<input type="checkbox" name="hobby" value="Music"> Music<br><br>
<label>Country:</label>
<select name="country">
<option value="">Select</option>
<option value="USA">USA</option>
<option value="India">India</option>
<option value="UK">UK</option>
</select><br><br>

<label>Address:</label><br>
<textarea name="address" rows="4" cols="30"></textarea><br><br>
Regd No: 23X51A05C6

<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>

</body></html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

2. d) Write a HTML program, to explain the working of frames, such that page
is to be divided into 3 parts on either direction.

(Note: first frame image, second frame paragraph, third frame hyperlink. And
also make sure of using “no frame” attribute such that frames to be fixed).
Frames:

The <frame> HTML element defines a particular area in which another HTML
document can be displayed. A frame should be used within a <frameset>. Using
the <frame> element is not encouraged because of certain disadvantages such
as performance problems and lack of accessibility for users with screen
readers.

FrameSet Code:

<frameset cols="40%, 40%, 40%">


<frame src="/image.html">
<frame src="/para.html">
<frame src="/hyper.html">
</frameset>

SOURCE CODE:

IMAGE CODE:

<html>

<head>

<title>Image</title>

</head>

<body>

<h1>Forest</h1>
<img src="/forest.jpeg" alt="Beutiful Forest">

</body>
Regd No: 23X51A05C6

</html>
Paragraph Code:

<html>

<body>
<h1>Forests</h1>

<p>
Forests cover about 31% of Earth's land area and are home to 80% of
terrestrial species. They play a vital role in absorbing carbon dioxide and
providing oxygen.
</p>
</body>

</html>

HyperLink Code:

<html>
<head>
<title>resource</title>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/Forest">
<h2>click to know more about Forests</h2>
</a>
</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

WEEK–3

3. a) Write a HTML Program, that makes use of <article>, <aside>, <figure>,


<figcaption>, <footer>, <header>, <main>, <nav>, <section>, <div>, <span>
tags.

Explanation of Tags:

<header>: Contains the website's title.

<nav>: Holds the navigation menu.

<main>: The main content area.

<article>: Represents an independent content section.

<section>: Divides the article into subsections.

<figure>: Wraps an image with a <figcaption>.

<figcaption>: Provides a caption for the image.

<aside>: Used for related information (e.g., ads, sidebars).

<footer>: Contains footer information.

<div>: A generic container for styling.

<span>: Used for styling inline text.

SOURCE CODE:

<html>
<head>
<title>Simple Semantic HTML</title>
</head>
<body>
<header>
Regd No: 23X51A05C6

<h1>My Simple Website</h1>


</header>

<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<main>
<hr>
<section>
<h2>About This Website</h2>
<article>
<h3>Introduction</h3>
<p>This is a beginner-friendly example of how to use **semantic
HTML** to structure a webpage.</p>
</article>
</section>

</hr>
<figure>
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRD1hXorr7MRtaMr_CwadWao19Gz
B7m7lh3Sw&s" alt="Sample Image" width="200">
<figcaption>This is a sample image.</figcaption>
</figure>

<hr>
<aside>
<h3>Side Information</h3>
<p>This is additional content that is placed in the sidebar.</p>
</aside>

</main>

</hr>
Regd No: 23X51A05C6

<footer>
<p>&copy; 2025 My Website</p>
</footer>

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

3. b) . Write a HTML program, to embed audio and video into HTML web
page.

Audio:

The <audio> tag is used to embed sound content in a document, such as music
or other audio stream.

Video:

The HTML <video> element is used to show a video on a web page.

CODE:

< html>
<head>
<title>Embed Audio & Video</title>
</head>
<body>
<img
src="https://i.ytimg.com/vi/sc8NOJH_Ndo/hq720.jpg?sqp=oaymwEhCK4FEIIDSFry
q4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLDHJX
b9aMaNHEIfLU7HD89IAMbDMw" swidth="300";height="300";>
<h2>Embedding Audio in HTML</h2>
<audio controls>
<source src="https://pagalfree.com/musics/128-
Pushpa%20Pushpa%20%20Pushpa%202%20The%20Rule%20128%20Kbps.mp3"
type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
<h2>Embedding Video in HTML</h2>
<video width="400" controls>
<source src="https://www.youtube.com/watch?v=ietprsshiSs"
type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

3. c)Write a program to apply different types (or levels of styles or style


specification formats) - inline, internal, external styles to HTML elements.
(identify selector, property and value).

Inline CSS:

Inline CSS refers to applying styles directly to an HTML element using the style
attribute.

This method allows for specific styling to be applied to individual elements


without affecting other elements on the page.

Selector: Inline styles do not use a selector like classes or IDs. The style is
applied directly to the element.

Property: The CSS property (e.g., color, font-size, background-color) to be


styled.

Value: The value assigned to the property (e.g., red, 16px, #ff0000).

Internal CSS:

Internal CSS refers to styling that is defined within a <style> tag placed in the
<head> section of an HTML document. It is used to style multiple elements on
the same page without affecting external styles.

External CSS:

External CSS refers to defining styles in a separate CSS file (typically with a .css
extension) and linking it to an HTML document using the <link> tag in the
<head> section. This method is highly efficient for styling multiple pages
consistently across a website.

SORCE CODE:

INLINE CODE:

<html>

<head>

<title>Inline CSS</title>
Regd No: 23X51A05C6

</head>
<body>
<h1 style="text-align: center; color: blue;">BTech Courses</h1>

<table border="1" style="width: 100%; border-collapse: collapse;


color:darkblue">

<tr style="background-color: #f2f2f2; color: crimson

;">

<th style="padding: 8px; text-align: left;">Course Code</th>

<th style="padding: 8px; text-align: left;">Course Name</th>

<th style="padding: 8px; text-align: left;">Credits</th>

<th style="padding: 8px; text-align: left;">Semester</th>

</tr>

<tr>

<td style="padding: 8px;">CS101</td>

<td style="padding: 8px;">Introduction to Programming</td>

<td style="padding: 8px;">4</td>

<td style="padding: 8px;">1</td>

</tr>

<tr>

<td style="padding: 8px;">EE201</td>

<td style="padding: 8px;">Circuit Theory</td>

<td style="padding: 8px;">3</td>

<td style="padding: 8px;">2</td>

</tr>
Regd No: 23X51A05C6

<tr style="background-color: #f2f2f2; color: forestgreen;">


<td style="padding: 8px;">ME301</td>
<td style="padding: 8px;">Thermodynamics</td>

<td style="padding: 8px;">3</td>

<td style="padding: 8px;">3</td>

</tr>

<tr>

<td style="padding: 8px;">CS401</td>

<td style="padding: 8px;">Data Structures</td>

<td style="padding: 8px;">4</td>

<td style="padding: 8px;">4</td>

</tr>

</table>

</body>

</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

INTERNAL CODE: <html>

<head>

<style> body { font-family: Arial,

sans-serif; margin: 20px;

backgroundcolor: ghostwhite;

} h1 {

color:

rebeccapurple;

} h2{

color:

crimson;

.mobile-type { marginbottom:

20px;

.mobile-type h2 { textdecoration:

underline;

.mobile-type p {

color: royalblue;

text-align:justify

</style>
Regd No: 23X51A05C6

</head>

<body>

<h1>Types of Mobiles</h1>

<div class="mobile-type">

<h2>Smartphones</h2>

<p>Smartphones are mobile phones that offer advanced features and


capabilities, often with PC-like functionality. They typically include internet
access, a touchscreen interface, and an operating system capable of running
downloaded apps.</p>

</div>

<div class="mobile-type">

<h2>Feature Phones</h2>

<p>Feature phones are mobile phones that have more features than a
standard cell phone but are not as advanced as smartphones. They often
include basic multimedia and internet capabilities but lack the advanced
functionality of smartphones.</p>

</div>

<div class="mobile-type">

<h2>Basic Phones</h2>

<p>Basic phones are mobile phones that offer essential features such as
calling and texting. They are designed for users who need a simple and reliable
device without the additional features found in smartphones and feature
phones.</p>

</div>

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

EXTERNAL CODE:

CSS CODE: body { font-family:

Arial, sans-serif; margin: 0;

padding: 0; background-color:

#f3f9f1; color: #333;

header { background-color:

#4CAF50; color: white;

padding: 15px; text-align:

center;

nav { background-color:

#333; overflow: hidden;

nav a {

color: white; text-


decoration: none; padding:
14px 20px; display: inline-
block;
Regd No: 23X51A05C6

nav a:hover { backgroundcolor:

#ddd; color: black;

main { padding:

20px;

h1, h2 { color:

#2e7d32;

footer { text-align: center;

background-color: #4CAF50;

color: white; padding: 10px;

position: fixed; bottom: 0;

width: 100%;

HTML CODE-1:

<html>
<head>
Regd No: 23X51A05C6

<title>Forests</title>

</head>

<body>

<header>

<h1>Forests</h1>

</header>

<nav>

<a href="forests.html">Forests</a>

<a href="oceans.html">Oceans</a>

<a href="mountains.html">Mountains</a>

</nav>

<main>

<h2>The Lungs of the Earth</h2>

<p>Forests cover about 31% of Earth's land area and are home to 80% of
terrestrial species. They play a vital role in absorbing carbon dioxide and
providing oxygen.</p>

<img src="forest.jpeg" alt="Beautiful Forest" style="width: 100%;


maxwidth: 600px;">

</main>
<footer>

<p>&copy; 2025 Nature Explorer</p>

</footer>

</body>

</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

WEEK–4

4. Write a program to apply different types of selector forms

i. Simple selector (element, id, class, group, universal) ii. Combinator

selector (descendant, child, adjacent sibling, general sibling) iii.Pseudoclass

selector iv. Pseudo-element selector

v. Attribute selector

i. Simple CSS Selectors Definition:

Simple CSS selectors are used to target HTML elements in order to apply styles.
They are basic and straightforward selectors that do not require complex logic
or structure.

1. Element Selector: Targets all elements of a given type (e.g., p, div).

2. Class Selector: Targets elements with a specific class (e.g., .highlight).

3. ID Selector: Targets an element with a specific id (e.g., #main-header).

4. Universal Selector: Targets all elements on the page (*).

SORCE CODE:
<html>
<head>

<title>CSS Selectors Example</title>


<link rel="stylesheet" href="styles.css"> <!-- Linking External CSS -->
</head>
<body>

<h1>CSS Selectors Example</h1>

<p>This is a paragraph styled using an element selector.</p>


Regd No: 23X51A05C6

<p class="highlight">This paragraph uses a class selector.</p>


<p id="unique">This paragraph uses an ID selector.</p>

<h2>This is an H2 heading.</h2>
<div>
<p>This is inside a div (styled using a descendant selector).</p>
<span>
<p>This is another paragraph inside a span in a div.</p>
</span>
</div>

<div class="parent">
<p>This is a direct child paragraph inside a div.</p>
<section>
<p>This paragraph is inside a section (not a direct child).</p>
</section>
</div>

<input type="text" placeholder="Styled using an attribute selector">

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:
Regd No: 23X51A05C6

ii. Combinator Selectors in CSS:

Combinator selectors are used to combine multiple simple selectors to select


elements based on their relationships with other elements. These selectors
allow you to target elements that are related in some way, such as being inside
or adjacent to other elements.

1. Descendant Selector (Space): Targets elements nested anywhere inside a


parent (e.g., div p).

2. Child Selector (>): Targets elements that are direct children of a specified
parent (e.g., div > p). <html>

3. Adjacent Sibling Selector (+): Targets the next sibling element


immediately after a specified element (e.g., h1 + p).

4. General Sibling Selector (~): Targets all sibling elements that share the
same parent (e.g., h1~p).

SOURCE CODE:

<head>
<title>Combinator Example</title>
<style>
.place p {
color:
blue;
}
.void > div { background-color:
sandybrown;
} h1 +
p{
font-style: italic;
} h1 ~
p{
color: rebeccapurple;
}
</style>
</head>
Regd No: 23X51A05C6

<body>
<div class="place">
<p>particular point or part of space or of a surface, esp that occupied by a
person or thing. a geographical point, such as a town, city,
etc.</p>
</div>
<div class="void">
<div> referring to a statute, contract, ruling or anything which is null
and of
no effect. A law or judgment found by an appeals court to be
unconstitutional is void, a rescinded
(mutually cancelled) contract is void, and a marriage which has been
annulled by court judgment is void. </div>
<span>completely empty</span>
</div>
<h1>NATURE</h1>
<p>
Nature is the physical world, including all living things, forces, and
processes that exist independently of humans. It can also refer to
the inherent character of
the universe or the ecosphere.
</p>
<h1>NUTRITION</h1>
<p>
Nutrition is the study of food and how it affects the health and growth of
the body. Nutrients are
substances found in foods that our bodies use to grow, reproduce and
survive.</p>
<p>
Nutrients are normally divided into five categories: Water,
protein, carbohydrates, minerals, and vitamins. Water is the main
constituent of the body. Two-thirds of the body is water, thus, an animal can
live much longer without feed than
water. Water helps the body digest food and carries
nutrients to body tissues. </p>
Regd No: 23X51A05C6

</body>
</html>
Regd No: 23X51A05C6

OUTPUT:

You might also like