Cara Membuat Gallery di HTML dan CSS

by

Cara Membuat Gallery di HTML dan CSS – Membuat sebuah galeri dengan HTML dan CSS dapat menjadi langkah yang menarik untuk mempelajari dasar-dasar desain web. Dalam dunia web design, galeri adalah salah satu fitur yang sering digunakan untuk menampilkan kumpulan gambar secara estetis. Dengan memahami langkah-langkah dasar dalam membuat galeri menggunakan HTML dan CSS, Anda dapat membuka pintu untuk kreativitas dalam mendesain halaman web Anda sendiri.

Dalam panduan ini, kita akan melangkah melalui langkah-langkahnya secara detail, sehingga dapat dipahami dengan mudah oleh pemula. Mulai dari pembuatan folder proyek hingga menampilkan galeri yang menarik, setiap langkah akan dijelaskan dengan jelas. Apakah Anda seorang pemula yang ingin belajar cara membuat galeri web yang menakjubkan? Mari kita mulai!

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat gallery di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Gallery di HTML dan CSS

1. Buat Folder Proyek Gallery

Langkah pertama yang perlu dilakukan adalah membuat folder proyek untuk galeri kita. Folder ini akan menjadi tempat kita menyimpan semua file yang terkait dengan proyek ini.

2. Buat Folder Img

Di dalam folder proyek, buatlah folder baru yang dinamakan “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan ditampilkan dalam galeri. Download gambar disini untuk di implementasikan ke dalam proyek Gallery Anda.

3. Buat Sebuah File gallery.html

Sekarang, mari kita buat file HTML yang akan menjadi dasar dari galeri kita. Berikut ini adalah langkah-langkahnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gallery</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Gallery</h1>
  </header>
  
  <div class="gallery">
    <div class="gallery-item">
      <img src="img/photo1.jpg" alt="Image 1">
      <div class="overlay">
        <h3>Image 1</h3>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/photo2.jpg" alt="Image 2">
      <div class="overlay">
        <h3>Image 2</h3>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/photo3.jpg" alt="Image 3">
      <div class="overlay">
        <h3>Image 3</h3>
      </div>
    </div>
    <!-- Tambahkan lebih banyak elemen galeri di sini -->
  </div>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita akan membuat file CSS untuk mengatur tampilan galeri. Buatlah file bernama “style.css” di dalam folder proyek Gallery Anda.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
  }
  
  .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
  }
  
  .gallery-item {
    margin: 10px;
    position: relative;
  }
  
  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .overlay:hover {
    opacity: 1;
  }
  
  .overlay h3 {
    color: #fff;
    font-size: 24px;
    text-align: center;
  }
 

5. Mengubah Tampilan Gallery

Sekarang kita akan menambahkan gambar ke dalam galeri. Buka file “gallery.html” dan tambahkan tag img di dalam div dengan class “gallery“.

<div class="gallery-item">
      <img src="img/photo1.jpg" alt="Image 1">
      <div class="overlay">
        <h3>Image 1</h3>
      </div>
    </div>
 

Pastikan untuk menyesuaikan src dengan lokasi dan nama file gambar yang ada di folder “img“.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Setelah menambahkan gambar ke dalam galeri, simpan semua perubahan yang telah dilakukan. Kemudian, buka file “gallery.html” dengan browser web Anda untuk melihat hasilnya.

Preview hasil

Berikut ini preview hasil gallery di html dan css jika Anda berhasil membuatnya:

Penutup

Dalam artikel ini, kita telah mempelajari cara membuat galeri sederhana menggunakan HTML dan CSS. Namun, dunia desain web memiliki banyak lagi yang bisa ditawarkan. Untuk itu, jangan ragu untuk terus menjelajahi dan belajar lebih banyak tentang teknologi web yang menarik.

Dengan memahami dasar-dasar HTML dan CSS yang kita bahas dalam panduan ini, Anda telah membuka pintu untuk mengembangkan keterampilan desain web Anda lebih lanjut. Mulailah dengan mencoba berbagai variasi tata letak, animasi, dan interaksi yang dapat Anda tambahkan ke galeri Anda.

Selain itu, jangan lupa untuk menjelajahi konsep-konsep seperti responsif design, framework CSS seperti Bootstrap, atau bahkan mempelajari JavaScript untuk menambahkan fungsionalitas interaktif ke galeri Anda.

Dengan terus berlatih dan eksperimen, Anda akan semakin mahir dalam merancang dan mengembangkan halaman web yang menarik dan fungsional. Jadi, teruslah belajar, berlatih, dan jangan ragu untuk berbagi karya Anda dengan dunia!

Terima kasih telah mengikuti panduan ini. Semoga sukses dalam perjalanan Anda dalam dunia desain web!

Related posts: