Praktik: Membuat galeri foto responsif

From OnnoWiki
Jump to navigation Jump to search

Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS

  • Mata Kuliah: Web Programming
  • Tingkat: S1 / Semester Awal
  • Sistem Operasi: Ubuntu 24.04
  • Tools: Gedit / GNOME Text Editor, Firefox, Terminal

Tujuan Pembelajaran:

  • Mahasiswa mampu membuat galeri foto menggunakan HTML dan CSS.
  • Mahasiswa memahami konsep layout responsif.
  • Mahasiswa mampu memanfaatkan tools open-source di Linux untuk web development.

Persiapan Tool

1. Editor Teks

Gunakan `gedit` atau `gnome-text-editor`: 

sudo apt install gedit

2. Browser

Pastikan Firefox sudah tersedia: 

firefox


3. Folder Kerja

Buat folder proyek: 

mkdir ~/galeri-foto
cd ~/galeri-foto


Struktur Folder Proyek

galeri-foto/
├── index.html
├── style.css
└── images/
     ├── foto1.jpg
     ├── foto2.jpg
     └── foto3.jpg

Letakkan 3–6 gambar di folder `images/` sebelum memulai.

Langkah 1: Buat HTML Dasar

Buka file `index.html`: 

gedit index.html

Isi dengan kode berikut: 

 <!DOCTYPE html>
 <html lang="id">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Galeri Foto Responsif</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <h1>Galeri Foto Responsif</h1>
     <div class="gallery">
         <img src="images/foto1.jpg" alt="Foto 1">
         <img src="images/foto2.jpg" alt="Foto 2">
         <img src="images/foto3.jpg" alt="Foto 3">
     </div>
 </body>
 </html>

Langkah 2: Buat File CSS

Buka file `style.css`: 

gedit style.css

Isi dengan kode berikut: 

body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f0f0f0;
}

h1 {
    text-align: center;
    color: #333;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 20px;
}

.gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

.gallery img:hover {
    transform: scale(1.05);
}

Langkah 3: Menjalankan Proyek

Buka terminal: 

firefox index.html


Output yang Diharapkan

  • Tampilan galeri yang rapi.
  • Setiap gambar berada dalam grid.
  • Tampilan menyesuaikan ukuran layar (ponsel, tablet, desktop).
  • Efek zoom saat hover pada gambar.

Tantangan Praktik Tambahan (Opsional)

  • Tambahkan caption di bawah gambar menggunakan elemen `<figure>` dan `<figcaption>`.
  • Tambahkan efek lightbox menggunakan JavaScript sederhana (untuk pertemuan selanjutnya).
  • Ganti grid menjadi flexbox, bandingkan hasilnya.

Materi Pendukung


Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Praktik:_Membuat_galeri_foto_responsif&oldid=72407"