5) Create a webpage to create a photo Album. When the user clicks on the Image and Video Link
it should open the corresponding album.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div>
<header><h1 align="center"><font color="green">PHOTO GALLERY</font></h1></header>
</div>
<div class="gallery">
<a target="_parent" href="01.jpg">
<img src="01.jpg" alt="5Terre" width="300" height="200">
</a>
</div>
<div class="gallery">
<a target="_parent" href="02.jpg">
<img src="02.jpg" alt="Forest" width="600" height="400">
</a>
</div>
<div class="gallery">
<a target="_parent" href="03.jpg">
<img src="03.jpg" alt="Northern Lights" width="600" height="400">
</a>
</div>
<div class="gallery">
<a target="_parent" href="04.jpg">
<img src="04.jpg" alt="Mountains" width="600" height="400">
</a>
</div>
<div class="gallery">
<a target="_parent" href="05.jpg">
<img src="05.jpg" alt="Mountains" width="600" height="400">
</a>
</div>
<div class="gallery">
<a target="_parent" href="06.jpg">
<img src="06.jpg" alt="Mountains" width="600" height="400">
</a>
</div>
<div class="gallery">
<a target="_parent" href="07.jpg">
<img src="07.jpg" alt="Mountains" width="600" height="400">
</a>
</div>
<center><video width="320" height="240" controls>
<source src="nature.webm" type="video/mp4">
Your browser does not support the video tag.
</video></center>
</p>
</body>
</html>
Output Screenshot
No comments:
Post a Comment