Difference between revisions of "Praktik: Membuat galeri foto responsif"
Jump to navigation
Jump to search
Onnowpurbo (talk | contribs) (Created page with "Berikut adalah **modul praktikum lengkap** berjudul: --- ## 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code) ### 🧑🏫 Mata...") |
Onnowpurbo (talk | contribs) |
||
| Line 1: | Line 1: | ||
| − | |||
| − | + | ==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: | Pastikan Firefox sudah tersedia: | ||
| − | |||
| − | |||
| − | |||
| − | + | firefox | |
| + | |||
| + | |||
| + | 3. '''Folder Kerja''' | ||
| + | |||
Buat folder proyek: | 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`: | Buka file `index.html`: | ||
| − | + | ||
| − | gedit index.html | + | gedit index.html |
| − | |||
Isi dengan kode berikut: | 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`: | Buka file `style.css`: | ||
| − | + | ||
| − | gedit style.css | + | gedit style.css |
| − | |||
Isi dengan kode berikut: | Isi dengan kode berikut: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | h1 { | + | 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 | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | 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]] | |
Revision as of 18:40, 6 April 2025
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>
Galeri Foto Responsif
<img src="images/foto1.jpg" alt="Foto 1">
<img src="images/foto2.jpg" alt="Foto 2">
<img src="images/foto3.jpg" alt="Foto 3">
</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
- [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)