Membuat Galeri Foto Sederhana

 

 

Awal Mula Ceritanya

Saya punya satu kebiasaan aneh setiap kali pegang HP: foto apa aja yang lewat. Kadang foto kucing tidur di teras, kadang foto gorengan di warung, bahkan pernah juga foto sandal jepit tetangga yang nyasar di halaman. Hasilnya? Galeri penuh, memori hampir nangis, tapi saya masih belum kapok.

Nah, suatu hari saya mikir: “Kenapa nggak bikin galeri foto online aja? Jadi orang lain bisa lihat juga, dan memori HP bisa sedikit lega.” Dari situ lahirlah ide bikin project galeri foto sederhana dengan HTML.

Waktu itu saya masih cupu, tapi dengan semangat ala-ala developer wannabe, saya buka laptop, bikin folder project, lalu ngotak-ngatik kode HTML.

Alat Tempur yang Saya Pakai

Karena masih pemula, saya nggak pakai framework canggih kayak React atau Vue. Cukup HTML, CSS seadanya, sama sedikit JavaScript buat gaya-gayaan.

Fokus saya ada di tiga tag HTML yang sering disepelekan padahal berguna banget:

1. <img> – buat nampilin gambar.

2. <figure> – wadah elegan untuk gambar plus keterangan.

3. <figcaption> – tempat kasih deskripsi biar nggak ada yang salah paham.

Jadi kalau ada foto kucing saya lagi tidur dengan posisi aneh, orang lain bisa tahu itu memang kucing, bukan bakso jatuh di lantai.

Percobaan Pertama: Berantakan

Awalnya saya langsung tempel banyak <img> gini:

<img src="kucing.jpg" alt="Kucing tidur" />
<img src="gorengan.jpg" alt="Gorengan hangat" />
<img src="sandal.jpg" alt="Sandal nyasar" />

Hasilnya? Berantakan banget. Foto-foto itu tampil kayak antrean panjang di warteg. Rapi sih, tapi hambar.

Selain itu, orang nggak tahu maksud dari tiap foto. Bisa aja mereka mikir:

• “Ini kucing sakit apa sehat?”

• “Gorengan ini tahu isi atau bakwan?”

• “Sandal ini merk lokal atau impor dari Mars?”

Makanya saya butuh keterangan yang jelas.

Kenalan Sama <figure> dan <figcaption>

Nah, di sinilah saya ketemu kombinasi sakti: <figure> + <figcaption>.

Contohnya saya bikin kayak gini:

<figure>
  <img src="kucing.jpg" alt="Kucing tidur" />
  <figcaption>Kucing saya tidur dengan gaya yoga tingkat dewa</figcaption>
</figure>

Tiba-tiba foto kucing itu jadi punya makna. Orang lihatnya nggak cuma gambar, tapi ada ceritanya juga.

Akhirnya saya coba bikin semua foto dengan gaya yang sama:

<figure>
  <img src="kucing.jpg" alt="Kucing tidur" />
  <figcaption>Kucing saya tidur dengan gaya yoga tingkat dewa</figcaption>
</figure>

<figure>
  <img src="gorengan.jpg" alt="Gorengan hangat" />
  <figcaption>Gorengan krispi yang bikin saya lupa diet</figcaption>
</figure>

<figure>
  <img src="sandal.jpg" alt="Sandal nyasar" />
  <figcaption>Sandal tetangga yang tiba-tiba migrasi ke halaman rumah</figcaption>
</figure>

Dan boom! Galerinya jadi lebih hidup.

Styling Biar Nggak Kayak Katalog Sensus

Saya nggak mau galeri saya kelihatan kayak brosur warung. Jadi saya tambahin CSS biar agak kece.

figure {
  display: inline-block;
  margin: 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  width: 200px;
  text-align: center;
}

img {
  max-width: 100%;
  border-radius: 5px;
}

figcaption {
  margin-top: 5px;
  font-size: 14px;
  color: #555;
}

Sekarang hasilnya jadi mirip Instagram versi KW. Foto ada di atas, caption lucu di bawah, semuanya dibungkus rapi kayak hadiah ulang tahun.

Reaksi Teman-Teman

Saya upload galeri ini ke hosting gratisan. Teman-teman saya lihat dan komentarnya macam-macam:

• “Wih, ini kayak galeri seni tapi versinya receh.”

• “Foto sandal nyasar kok bisa jadi lucu ya?”

• “Keren sih, tapi kapan kamu upload foto mantan?”

Saya cuma bisa ketawa. Tapi dalam hati bangga juga, karena ternyata kode HTML sederhana bisa bikin orang lain terhibur.

Manfaat yang Saya Rasakan

Setelah bikin galeri ini, saya belajar banyak:

1. Foto jadi lebih bermakna. Karena ada <figcaption>, orang nggak lagi salah paham lihat foto saya.

2. Belajar struktur HTML yang lebih rapi. Daripada spam <img> doang, ternyata <figure> bikin konten lebih terorganisir.

3. Bisa dipakai untuk portfolio. Kalau suatu saat saya melamar kerja front-end developer, saya bisa pamer: “Ini loh project galeri foto sederhana saya.”

Tips Kalau Mau Ikutan Bikin

Kalau kamu mau bikin juga, ini beberapa tips dari pengalaman saya:

1. Pilih foto yang bercerita. Jangan asal foto kabel colokan, kecuali kamu mau cerita tentang PLN.

2. Gunakan <alt> dengan deskripsi singkat. Ini penting buat SEO dan juga aksesibilitas. Jadi orang pakai screen reader bisa tahu gambarnya apa.

3. Jangan lupa kasih gaya dengan CSS. Galeri tanpa CSS itu ibarat kopi tanpa gula: pahit dan bikin kening berkerut.

4. Kasih caption yang seru. Jangan terlalu formal. Caption lucu bikin galeri terasa lebih dekat dengan pembaca.

Dari Iseng Jadi Berguna

Awalnya saya cuma iseng upload foto. Tapi ternyata dari project kecil ini saya dapat pelajaran berharga tentang HTML, struktur semantik, dan betapa pentingnya memberikan konteks pada konten visual.

Sekarang setiap kali lihat <figure> dan <figcaption>, saya jadi senyum-senyum sendiri. Ingat perjuangan bikin galeri sandal tetangga sampai tampil kece di browser.

Jadi kalau kamu juga punya foto-foto random di HP, kenapa nggak dicoba bikin galeri sederhana pakai HTML? Siapa tahu besok-besok sandal nyasar tetanggamu juga bisa jadi bintang di internet.

Membuat galeri foto sederhana ternyata bukan cuma soal menampilkan gambar, tapi juga soal bercerita. Dengan kombinasi <img>, <figure>, dan <figcaption>, sebuah foto bisa jadi punya nyawa. Ditambah sedikit CSS, hasilnya bisa keren dan siap dipamerkan.

Jadi, kalau kamu lagi belajar HTML, coba deh bikin project kayak gini. Dijamin seru, bikin ngakak, dan lumayan buat portfolio.