Scribd
Upload
14 views5 pages

HTML LAB Programs

The document contains multiple HTML programs demonstrating various web development concepts. It includes examples of different types of lists (ordered, unordered, nested, and definition lists), hyperlinks with the <a> tag, image navigation linking to profiles, and an image gallery using thumbnails. Each section is clearly labeled and showcases how to implement these features in HTML.

Uploaded by

manepallijayapravallika3
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
14 views5 pages

HTML LAB Programs

The document contains multiple HTML programs demonstrating various web development concepts. It includes examples of different types of lists (ordered, unordered, nested, and definition lists), hyperlinks with the <a> tag, image navigation linking to profiles, and an image gallery using thumbnails. Each section is clearly labeled and showcases how to implement these features in HTML.

Uploaded by

manepallijayapravallika3
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/ 5

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>

You might also like