Scribd
Upload
2 views

4

The document provides an HTML program for creating an image gallery using thumbnails. Each thumbnail is set to 100x100 pixels and links to a full-sized image when clicked. The gallery is styled with CSS for layout and appearance.

Uploaded by

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

4

The document provides an HTML program for creating an image gallery using thumbnails. Each thumbnail is set to 100x100 pixels and links to a full-sized image when clicked. The gallery is styled with CSS for layout and appearance.

Uploaded by

devan.bharathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

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
PROGRAM :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
margin: 10px;
border: 2px solid #ddd;
border-radius: 4px;
width: 100px;
height: 100px;
}
.gallery a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="gallery">
<a href="full-size1.jpg" target="_blank">
<img src="thumbnail1.jpg" alt="Image 1 Thumbnail">
</a>
<a href="full-size2.jpg" target="_blank">
<img src="thumbnail2.jpg" alt="Image 2 Thumbnail">
</a>
<a href="full-size3.jpg" target="_blank">
<img src="thumbnail3.jpg" alt="Image 3 Thumbnail">
</a>
<!-- Add more images as needed -->
</div>
</body>
</html>
OUTPUT:
Image Gallery

You might also like