Admin: ←Membuat halaman berisi ' ==Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS== * Mata Pelajaran: Web Programming * Tingkat: 10 / 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. '''...'

2025-05-10T13:47:23Z

←Membuat halaman berisi ' ==Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS== * Mata Pelajaran: Web Programming * Tingkat: 10 / 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. '''...'

Halaman baru

==Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS==

* Mata Pelajaran: Web Programming
* Tingkat: 10 / 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:

<pre>
<!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>
</pre>

==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==

* [MDN Web Docs - CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
* [Responsive Design dengan CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)

==Pranala Menarik==

* [[Web Programming]]

Praktik: Membuat galeri foto responsif - Riwayat revisi