a) Write a HTML program, to explain the working of lists.
Note: It should have an ordered list,
unordered list, nested lists and ordered list in an unordered list and definition lists.
<html >
<head>
<title>List Demonstration</title>
</head>
<body>
<h1>Demonstrating Various Types of Lists in HTML</h1>
<!-- Ordered List -->
<h2>1. Ordered List (Numbered)</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<!-- Unordered List -->
<h2>2. Unordered List (Bulleted)</h2>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<!-- Nested Lists -->
<h2>3. Nested List (Combination of Ordered and Unordered)</h2>
<ul>
<li>Category 1
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ol>
</li>
<li>Category 2
<ul>
<li>Sub-item A</li>
<li>Sub-item B</li>
</ul>
</li>
</ul>
<!-- Definition List -->
<h2>4. Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - the standard language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used to style HTML elements.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to make web pages interactive.</dd>
</dl>
</body>
</html>
b) Write a HTML program, to explain the working of hyperlinks using <a> tag and href, target
Attributes
<html>
<head>
<title>Hyperlinks Example</title>
</head>
<body>
<h1>Working with Hyperlinks in HTML</h1>
<!-- Basic Hyperlink -->
<h2>1. Basic Hyperlink</h2>
<p>
Visit the official
<a href="https://www.google.com">Google website</a>.
</p>
<!-- Hyperlink opening in a new tab -->
<h2>2. Open Hyperlink in a New Tab</h2>
<p>
Check out the latest news on
<a href="https://www.bbc.com" target="_blank">BBC News</a>.
</p>
</body>
</html>
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.
<html>
<head>
<title>Image Navigation</title>
</head>
<body>
<h1>My Profile and My Friend's Profile</h1>
<!-- Your Image -->
<h2>My Profile</h2>
<a href="https://www.myprofile.com" target="_blank">
<img src="my-image.jpg" alt="My Image" width="200" height="200">
</a>
<!-- Friend's Image -->
<h2>My Friend's Profile</h2>
<a href="https://www.friendsprofile.com" target="_blank">
<img src="friend-image.jpg" alt="Friend's Image" width="200" height="200">
</a>
</body>
</html>
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.
<html>
<head>
<title>Image Gallery with Thumbnails</title>
</head>
<body>
<h1>Image Gallery</h1>
<p>Click on the thumbnails to view the full-sized images.</p>
<!-- Thumbnail Gallery -->
<a href="images/full-image1.jpg" target="_blank">
<img src="images/thumb-image1.jpg" alt="Image 1" width="100" height="100">
</a>
<a href="images/full-image2.jpg" target="_blank">
<img src="images/thumb-image2.jpg" alt="Image 2" width="100" height="100">
</a>
</body>
</html>
