Galeri Gambar

  1. Buat Dokumen HTML

    Mulailah dengan membuat dokumen HTML dasar. Anda dapat menggunakan teks editor favorit Anda, seperti Notepad atau Visual Studio Code, dan simpan file dengan ekstensi .html.

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Galeri Gambar</title>
</head>
<body>
   <!-- Galeri gambar akan ditambahkan di sini -->
</body>
</html>

  2. Tambahkan Gambar

    Letakkan gambar-gambar yang ingin Anda tampilkan di galeri dalam folder yang sama dengan file HTML Anda. Anda dapat menggunakan tag <img> untuk menambahkan gambar-gambar ini ke dalam dokumen HTML Anda.

    <img src="gambar1.jpg" alt="Deskripsi Gambar 1">
<img src="gambar2.jpg" alt="Deskripsi Gambar 2">
<!-- Tambahkan lebih banyak gambar sesuai kebutuhan -->

  3. Gunakan CSS (Opsional)

    Anda dapat menggunakan CSS untuk mengatur tata letak dan tampilan galeri gambar Anda. Berikut contoh CSS sederhana:

    <style>
   .galeri {
       display: flex;
       flex-wrap: wrap;
   }
   .gambar {
       flex: 1;
       margin: 10px;
   }
</style>

  4. Buat Galeri

    Tambahkan sebuah elemen div dengan class galeri untuk mengelompokkan gambar-gambar Anda.

    <div class="galeri">
   <img src="gambar1.jpg" alt="Deskripsi Gambar 1" class="gambar">
   <img src="gambar2.jpg" alt="Deskripsi Gambar 2" class="gambar">
   <!-- Tambahkan lebih banyak gambar dengan class "gambar" -->
</div>

  5. Selesai

    Simpan perubahan Anda, dan buka file HTML di browser Anda. Anda sekarang memiliki galeri gambar sederhana menggunakan HTML.

Selamat mencoba! Anda dapat menyesuaikan tata letak dan gaya galeri gambar sesuai dengan kebutuhan Anda dengan menggunakan CSS tambahan.