Proyek: Galeri Foto

Kenapa Galeri Ini Penting

Foto adalah isi web yang paling berat sekaligus paling dilihat. Media sosial, toko online, situs berita, portofolio desainer, semuanya adalah galeri dalam berbagai bentuk. Proyek ini membuktikan kamu bisa menampilkan media dengan benar: cepat dimuat, bisa dinikmati semua orang termasuk pengguna pembaca layar, dan rapi secara semantik.

Dari sisi portofolio, galeri adalah proyek yang enak dipamerkan karena hasilnya visual. Orang yang membukanya langsung bisa menilai kualitas kerjamu tanpa harus membaca satu baris kode pun. Galeri yang rapi memberi kesan kamu teliti dan detail, galeri yang asal-asalan memberi kesan sebaliknya. Proyek ini juga melatih kepekaanmu soal performa, karena gambar adalah penyebab utama website lambat.

Syarat demi Syarat, dan Maksudnya

1. h1 judul galeri. Setiap halaman butuh satu judul utama, dan galeri tidak terkecuali. h1 memberi tahu pengunjung sekaligus mesin pencari tentang apa halaman ini dalam satu kalimat yang jelas.

2. Minimal 6 figure. Setiap figure adalah satu unit makna: img plus figcaption yang menjelaskannya. Pakai seed unik di picsum supaya keenam gambar benar-benar berbeda satu sama lain. Atribut width dan height wajib ada untuk mencegah layout shift, yaitu halaman yang lompat-lompat saat gambar selesai dimuat. loading="lazy" menunda pemuatan gambar yang belum terlihat di layar, jadi halaman terbuka cepat walau isinya banyak foto. Dan alt deskriptif yang berbeda untuk tiap gambar adalah jantung aksesibilitas galeri ini, jangan pernah asal isi.

3. Satu gambar dijadikan link. Bungkus img dengan tag a supaya gambarnya bisa diklik menuju sumber aslinya. Ini pola umum di galeri nyata: klik untuk melihat versi besar foto atau halaman sumbernya. Pastikan link-nya punya teks atau konteks yang jelas, bukan sekadar gambar tanpa penjelasan.

4. audio latar. Beri controls supaya pengunjung punya kendali penuh: memutar, menjeda, dan mengatur volume. Pasang juga preload="none" supaya audio tidak diunduh otomatis saat halaman dibuka, karena itu menghabiskan kuota pengunjung sebelum mereka menekan tombol play.

5. video profil destinasi. Atribut poster menampilkan gambar sampul sebelum video diputar. Tanpa poster, video terlihat seperti kotak hitam kosong yang tidak mengundang orang untuk mengkliknya. Poster yang menarik adalah undangan pertama bagi pengunjung.

6. Komentar penanda tiap bagian. Galeri dengan 6 figure plus audio dan video adalah file yang panjang. Komentar seperti <!-- Foto Pantai --> membantumu dan penilai bernavigasi di dalam kode tanpa tersesat, dan menunjukkan kamu menulis kode yang bisa dibaca orang lain.

Cara Mengerjakan Bertahap

Langkah 1: Kerangka dan pembagian bagian. Tulis struktur dasar HTML, pasang h1 judul galerimu, lalu tulis komentar untuk setiap bagian yang akan diisi: enam figure, audio, dan video. Kerangka yang jelas membuat sisanya tinggal mengisi, bukan berpikir dari nol lagi.

Langkah 2: Isi keenam figure dengan serius. Kerjakan satu per satu: img dengan seed unik, width, height, loading="lazy", dan alt deskriptif, lalu figcaption yang melengkapi gambar bukan mengulang isi alt. Tulis alt dengan sungguh-sungguh, bayangkan kamu mendeskripsikan foto itu lewat telepon kepada teman yang tidak bisa melihatnya.

Langkah 3: Media pendukung, link, dan pemeriksaan akhir. Bungkus satu gambar dengan link ke sumbernya, tambahkan audio dengan controls dan preload="none", lalu video dengan poster. Terakhir, baca ulang seluruh file dari atas ke bawah dan pastikan tidak ada satu pun gambar tanpa alt yang bermakna.

Catatan teknis: Alt yang baik menjelaskan isi gambar untuk yang tidak bisa melihatnya. "Foto 1" bukan alt. "Sunset di Pantai Kuta dengan perahu nelayan di kejauhan" adalah alt. AI tutor menilai kualitas alt-mu seketat kelengkapan atributnya.