Gambar: tag img dan src

Sampai sini halamanmu isinya tulisan semua. Kali ini kita pasang gambar. Kelihatannya sepele, tapi di sinilah hampir semua pemula tersandung: “kok gambarnya nggak muncul?”

Tenang. Kita bedah pelan-pelan, dan kali ini kamu bisa melihat sendiri apa yang terjadi kalau alamatnya salah.

Tag img: “taruh gambar di sini”

Tag untuk gambar namanya <img>, singkatan dari image (gambar). Bentuknya begini:

<img src="gambar/kucing.svg" alt="Kucing oranye">

Dua hal yang perlu kamu perhatikan:

1. <img> tidak punya tag penutup. Sama seperti <input>: ia tidak membungkus tulisan apa pun, jadi tidak ada yang perlu ditutup.
2. Tag ini butuh keterangan tambahan (atribut). Tanpa keterangan, browser tidak tahu gambar yang mana yang harus dipasang.

src: di mana gambarnya?

src singkatan dari source (sumber). Isinya adalah alamat gambar: browser harus mengambil berkasnya dari mana.

Alamat berkas punya nama resmi: pathPath (alamat berkas)Tulisan yang menunjukkan di folder mana sebuah berkas berada, misalnya gambar/kucing.svg.Penjelasan lengkap →. Kalau kamu belum nyaman dengan folder dan path, baca dulu pelajaran 5. Ringkasnya:

• Gambar itu berkas terpisah dari berkas HTML-mu. Ia tidak “tertulis” di dalam HTML.
• Kamu menaruhnya di dalam foldermu, di samping index.html, atau di dalam folder lain (biasanya diberi nama gambar).
• Di src, kamu menulis jalan dari index.html menuju gambar itu.

Foldermu di latihan nanti kira-kira begini:

proyek/
├── index.html
└── gambar/
    ├── kucing.svg
    └── bunga.svg

Dari index.html, jalan menuju kucing: masuk folder gambar, lalu ambil kucing.svg. Ditulis jadi:

gambar/kucing.svg

Garis miring / artinya “masuk ke dalam”. Itu saja.

Coba sendiri: pasang gambar kucing

Di kotak ini ada folder proyek (daftar berkas di kiri atas) dan editor untuk index.html. Klik nama gambar di daftar untuk melihatnya.

Tugasmu: di tempat komentar Tantangan, tulis tag <img> yang memasang kucing.svg. Lihat juga kotak Cek alamat berkas di bawah hasilnya: ia memberi tahu alamatmu ketemu atau tidak.

Kalau sudah muncul, selamat, kamu baru saja memanggil berkas dengan path.

Percobaan: sengaja bikin salah

Cara paling cepat paham adalah merusaknya. Coba satu per satu di kotak di atas, lalu lihat kotak Cek alamat berkas:

Perhatikan satu hal: browser tidak pernah marah. Kalau salah, ia diam saja dan menampilkan gambar rusak. Makanya kotak pengecek di atas berguna. Di dunia nyata, kamu harus jadi pengeceknya sendiri.

alt: tulisan pengganti gambar

Atribut kedua yang wajib adalah alt. Isinya teks altTeks altTulisan pengganti gambar, dibaca pembaca layar dan muncul kalau gambar gagal dimuat.Penjelasan lengkap →: deskripsi singkat tentang isi gambar. Kamu menulisnya karena tiga alasan:

1. Pembaca layar. Orang tunanetra memakai program yang membacakan halaman. Tanpa alt, gambarmu “hilang” bagi mereka.
2. Gambar gagal muncul. Kalau berkasnya salah atau internet lambat, tulisan alt yang tampil sebagai pengganti.
3. Mesin pencari. Google membaca alt untuk paham isi gambar.

Cara menulis yang bagus: jelaskan isinya, bukan “gambar” atau “foto”. Misalnya alt="Kucing oranye dengan mata bulat", bukan alt="gambar".

Mengatur ukuran

Gambar muncul sebesar aslinya. Untuk mengecilkan, tambahkan atribut width (lebar, dalam piksel):

<img src="gambar/kucing.svg" alt="Kucing oranye" width="120">

Tinggi ikut menyesuaikan otomatis supaya gambarnya tidak gepeng. Coba ubah angkanya di kotak di atas.

Gambar dari internet

Selain dari folder sendiri, src boleh diisi alamat web lengkap:

<img src="https://contoh.com/foto/kucing.jpg" alt="Kucing">

Ini jalan pintas, tapi ada risikonya: kalau situs itu menghapus gambarnya atau mati, gambarmu ikut hilang, dan pemilik gambar mungkin tidak mengizinkan dipakai. Untuk halaman milikmu, simpan gambar di foldermu sendiri.

Gambarnya nggak muncul? Cek urut

1. Berkasnya benar-benar ada di foldermu? (Lihat daftar berkas.)
2. Ejaan nama berkas sama persis, termasuk ekstensi (.svg, .jpg, .png)?
3. Huruf besar-kecil sama?
4. Folder disebut? (gambar/kucing.svg, bukan cuma kucing.svg)
5. Tanda kutip lengkap di kedua sisi?
6. Sudah disimpan dan halamannya direfresh?

Kebanyakan kasus “gambar nggak muncul” selesai di nomor 2 sampai 4.