Nov 1, 2019

HTML lab work Exercises: 5

 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