Images & Alternative Text

Setelah lesson ini, kamu dapat menambahkan gambar dengan sumber, dimensi, dan teks alternatif sesuai konteks.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Sebuah gambar gagal dimuat. Apakah pembaca masih memahami informasi yang sebelumnya hanya ada pada gambar itu? Di sinilah alt membantu.

Menambahkan gambar dengan sumber, dimensi, dan teks alternatif sesuai konteks.

PAHAMI KONSEPNYA

Sumber dan ruang gambar

Img adalah void element. Src menunjuk berkas gambar. Width dan height memberi dimensi intrinsik dalam angka piksel tanpa px, membantu browser menyediakan ruang sebelum gambar selesai dimuat. Untuk contoh lokal ini, gunakan assets/observatory.svg berukuran 640 × 360.

Alt bergantung pada tujuan gambar

Gambar informatif memerlukan teks alternatif yang menjelaskan informasi penting dalam konteks. Untuk diagram observatorium contoh, “Teleskop mengarah ke Bulan di atas observatorium” lebih berguna daripada “gambar bagus” atau nama berkas. Alt tidak harus dimulai dengan “gambar”.

Dekoratif berbeda dari hilang

Jika gambar hanya menghias dan informasinya sudah lengkap di teks sekitar, alt="" sengaja mengosongkan alternatif. Menghilangkan atribut alt bukan hal yang sama: alat bantu mungkin membacakan nama berkas. Jangan memakai alt kosong pada gambar yang membawa informasi utama.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<h1>Mengamati Langit</h1>
<img src="assets/observatory.svg"
     alt="Teleskop mengarah ke Bulan di atas observatorium"
     width="640" height="360">
<p>Pengamatan dimulai dengan menentukan objek di langit.</p>

HASIL DI BROWSER

Aset diagram contoh disediakan dalam ruang latihan. Teks alternatif menyampaikan isi, sedangkan width dan height menyatakan ukuran.

KESALAHAN YANG SERING TERJADI

<img src="assets/observatory.svg" alt="observatory.svg">

Nama berkas tidak menjelaskan informasi gambar. Tulis deskripsi singkat yang relevan dengan tujuan kontennya.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Bagaimana menandai gambar yang murni dekoratif dan tidak memberi informasi baru?

Hilangkan atribut altGunakan alt=""Gunakan alt="gambar"

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Gambar yang tetap bisa dipahami

Tambahkan img dari assets/observatory.svg dengan width 640 dan height 360. Tulis alt yang menjelaskan teleskop dan Bulan pada ilustrasi, bukan nama berkas. Amati gambarnya di preview lalu sesuaikan kata-katamu.

<h1>Catatan Observatorium</h1>
<p>Teleskop digunakan untuk mengamati Bulan.</p>
<!-- Tambahkan gambar informatif -->

index.htmlHTMLLn 1, Col 13 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Src menunjuk sumber gambar; width dan height menyatakan dimensinya.
Alt menjelaskan fungsi atau informasi gambar dalam konteks.
Alt kosong untuk dekorasi; jangan samakan dengan alt yang hilang.

Gambar & mediaAksesibilitas

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Teks alternatif °Relative path °Accessibility °

Library: Gambar yang jernih, halaman yang ringan ↗

Ke lesson berikutnya →