Praktik: Membuat galeri foto responsif: Difference between revisions

From OnnoCenterWiki
Jump to navigationJump to search
Unknown user (talk)
Created page with "Berikut adalah **modul praktikum lengkap** berjudul: --- ## 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code) ### 🧑‍🏫 Mata..."
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
Berikut adalah **modul praktikum lengkap** berjudul:


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


## 🌐 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


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


---
* 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.


### 🎯 Tujuan Pembelajaran:
==Persiapan Tool==
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.


---
1. '''Editor Teks'''


## 🛠️ Persiapan Alat
Gunakan `gedit` atau `gnome-text-editor`:
 
sudo apt install gedit


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


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


### 3. **Folder Kerja**
firefox
 
 
3. '''Folder Kerja'''
 
Buat folder proyek:
Buat folder proyek:
```bash
mkdir ~/galeri-foto
cd ~/galeri-foto
```


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


## 📁 Struktur Folder Proyek


```
==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.**
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
==Langkah 1: Buat HTML Dasar==


Buka file `index.html`:
Buka file `index.html`:
```bash
 
gedit index.html
gedit index.html
```


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


---
<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
==Langkah 2: Buat File CSS==


Buka file `style.css`:
Buka file `style.css`:
```bash
 
gedit style.css
gedit style.css
```


Isi dengan kode berikut:
Isi dengan kode berikut:
```css
body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f0f0f0;
}


h1 {
body {
    text-align: center;
    font-family: sans-serif;
    color: #333;
    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);
}


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


.gallery img {
Buka terminal:
    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
firefox index.html
 
Buka terminal:
```bash
firefox index.html
```


---


## ✅ Output yang Diharapkan
==Output yang Diharapkan==


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


---
==Tantangan Praktik Tambahan (Opsional)==


## 🔁 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.


1. Tambahkan **caption** di bawah gambar menggunakan elemen `<figure>` dan `<figcaption>`.
==Materi Pendukung==
2. Tambahkan efek **lightbox** menggunakan JavaScript sederhana (untuk pertemuan selanjutnya).
3. Ganti grid menjadi **flexbox**, bandingkan hasilnya.


---
* [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)


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


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?
* [[Web Programming]]

Latest revision as of 23:23, 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>
     <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://lms.onnocenter.or.id/wiki/index.php?title=Praktik:_Membuat_galeri_foto_responsif&oldid=72407"