Unknown user at 23:23, 6 April 2025

2025-04-06T23:23:08Z

← Older revision		Revision as of 23:23, 6 April 2025
Line 56:		Line 56:
	Isi dengan kode berikut:		Isi dengan kode berikut:

			<pre>
	<!DOCTYPE html>		<!DOCTYPE html>
	<html lang="id">		<html lang="id">
Line 73:		Line 74:
	</body>		</body>
	</html>		</html>
			</pre>

	==Langkah 2: Buat File CSS==		==Langkah 2: Buat File CSS==

Unknown user at 11:40, 6 April 2025

2025-04-06T11:40:52Z

Show changes

Unknown user: Created page with "Berikut adalah modul praktikum lengkap berjudul: --- ## 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code) ### 🧑‍🏫 Mata..."

2025-04-05T12:25:47Z

Created page with "Berikut adalah **modul praktikum lengkap** berjudul: --- ## 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code) ### 🧑‍🏫 Mata..."

New page

Berikut adalah **modul praktikum lengkap** berjudul:

---

## 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code)

### 🧑‍🏫 Mata Kuliah: Web Programming
### 🎓 Tingkat: S1 / Semester Awal
### 🖥️ Sistem Operasi: Ubuntu 24.04
### 🛠️ Tools: Gedit / GNOME Text Editor, Firefox, Terminal

---

### 🎯 Tujuan Pembelajaran:
1. Mahasiswa mampu membuat galeri foto menggunakan HTML dan CSS.
2. Mahasiswa memahami konsep layout responsif.
3. Mahasiswa mampu memanfaatkan tools open-source di Linux untuk web development.

---

## 🛠️ Persiapan Alat

### 1. **Editor Teks**
Gunakan `gedit` atau `gnome-text-editor`:
```bash
sudo apt install gedit
```

### 2. **Browser**
Pastikan Firefox sudah tersedia:
```bash
firefox
```

### 3. **Folder Kerja**
Buat folder proyek:
```bash
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`:
```bash
gedit index.html
```

Isi dengan kode berikut:
```html
<!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`:
```bash
gedit style.css
```

Isi dengan kode berikut:
```css
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:
```bash
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)

1. Tambahkan **caption** di bawah gambar menggunakan elemen `<figure>` dan `<figcaption>`.
2. Tambahkan efek **lightbox** menggunakan JavaScript sederhana (untuk pertemuan selanjutnya).
3. 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)

---

Kalau kamu mau, aku bisa bantu buatkan **file ZIP galeri foto siap pakai** atau contoh tambahan pakai Tailwind CSS atau Bootstrap (tanpa VS Code tetap bisa kok). Mau lanjut ke situ?

Praktik: Membuat galeri foto responsif - Revision history

Unknown user at 23:23, 6 April 2025

Unknown user at 11:40, 6 April 2025

Unknown user: Created page with "Berikut adalah **modul praktikum lengkap** berjudul: --- ## 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code) ### 🧑‍🏫 Mata..."

Unknown user: Created page with "Berikut adalah modul praktikum lengkap berjudul: --- ## 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code) ### 🧑‍🏫 Mata..."