A. Pendahuluan
Untuk mengatur atau menata rapi sebuah gambar yang man di inputkan dengan html kita bisa menambah CSS style agar gambar yang kita inputkan terlihat rapi.
B. Tujuan
Menerapkan CSS Image Gallery
C. Alat dan Bahan
- Laptop
- Text Editor
- Web Browser
- Buka Text Editor
- Buat File index.html, dan ketikkan coding dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>image gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="1.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="2.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="3.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="4.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>- Buat file Style.css, dan ketikkan coding dibawah ini
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
} - Untuk hasil bisa langsung dilihat di Web Browser
E. Referensi
- https://www.w3schools.com/css/css_image_gallery.asp
.jpg "wxp+(23)")
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment