Bahasa Penanda Hiperteks (HTML)/Imej

Mari kita mulakan bab ini dengan satu contoh mudah:

<img src="penguin.jpeg" />

Dan mari juga kita lihat satu contoh yang lebih lengkap pengekodannya:

<img src="penguin.jpeg" alt="Gambar seekor penguin"
     title="Gambar seekor penguin" />

Imej-imej lazimnya distor dalam fail berasingan dan tidak di dalam dokumen HTML (HTML sumber) itu sendiri. Untuk meletakkan imej ke dalam HTML sumber, gunakan tag img bersama-sama atribut src yang mengandungi URL fail imej. Bagi mendokong pelayar yang tidak memapar imej, anda boleh membekalkan atribut alt yang mengandungi pemerian teks berkaitan imej tersebut. Dan bagi menyediakan tooltip buat imej, gunakan atribut title.

Ruang sebelum /> dalam contoh-contoh di atas dimuatkan kerana ada sebab – beberapa pelayar tua tidak akan berfungsi dengan betul sekiranya ia tidak hadir.

Tempat letak

Secara lalainya, imej-imej diletakkan sebaris dengan sekitarannya. Untuk meletakkan imej sebagai blok atau apungan, anda boleh menggunakan perturan Lembaran Gaya Lata ataupun CSS.

Teks Alternatif dan Tooltip

Spesifikasi HTML memerlukan semua imej mempunyai atribut alt. Atribut ini memuatkan apa yang dipanggil alt text (teks gantian).

Imej-imej dapat dibahagikan kepada dua kategori:

• Imej yang menambah kepada kandungan halaman,
• Imej yang berfungsi sebagai perhiasan halaman, misalnya, sempadan, penambah ruang, dan "peluru".

Imej-imej perhiasan seharusnya memiliki alt text kosong, yakni, alt="". Imej yang digunakan sebagai tanda peluru boleh menggunakan tanda asterisk, alt="*".

Imej-imej lain perlu dibekalkan dengan teks (alt text) bermakna. Alt text bukan pemerian imej, akan tetapi sesuatu yang akan dibaca sebagai gantian kepada gambar. Untuk pemerian tentang imej, anda boleh gunakan atribut title buat pemerian pendek dan longdesc untuk memautkan imej ke pemerian yang lebih panjang.

Contoh:

 <img src="logo_syarikat.png" alt="???"> pembuat kopi terbaik dalam dunia.

Alt text seharusnya memuatkan nama syarikat dan bukan "Logo kami". Ini kerana sekiranya laman ini dibaca oleh pelayar teks, paparan akan berbunyi, "Logo kami pembuat kopi terbaik dalam dunia".

Atribut alt bermaksud alternate (ganti) yang digunakan pelayar teks atau pelayar bukan grafik (misalnya, Lynx) untuk membolehkan penggunanya menegrti maksud ataupun tujuan imej. Banyak pelayar, seperti Internet Explorer, mentakrifkan atribut alt tag bagi menjana tooltip imej. namun demikian, atribut title sepatutnya digunakan bagi tujuan ini. Pelayar-pelayar lain, seperti Firefox, memaparkan tooltips hanya apabila tag title hadir dalam dokumen.

Lebar dan Tinggi

Untuk memaparkan imej agar kelihatan lebih kecil daripada saiz sebenarnya, gunakan atribut width (lebar) dan height (tinggi).

Tambahan In addition, you can help web browsers layout your web pages more quickly by always supplying the width and height attributes. Make sure you give the correct values or your images will be distorted.

Semua Atribut

Kita sudah membincangkan beberapa atribut penting dalam unusr img. Berikut adalah senarai semua atribut yang dibenarkan dalam unsur img seperti termaktub dalam HTML 4 DTD:

Atribut unsur IMG

Atribut	Pemerian
src	URL imej yang harus dipaparkan pelayar.
alt	gantian teks pendek buat imej yang dapat digunakan pelayar bagi memaparkan teks sebagai gantian kepada imej, misalnya, bagi pengguna buta, pengguna pelayar teks, atau pengguna yang mematikan pemuatan imej pada pelayar grafik mereka..
longdesc	satu URL yang menyediakan pemerian panjang berkaitan imej.
name	bagi keserasian ke belakang, guna tag id dalam dokumen-dokumen baharu – nama imej yang dapat digunakan bahasa-bahasa penskripan.
id	pengenal pasti unik imej yang dapat digunakan bahasa-bahasa penskripan.
class	menhugaskan satu atau lebih kelas CSS pada imej bagi mengawal penampilan gaya.
lang	maklumat bahasa
dir	arah teks
title	tajuk imej, yang dipaprkan oleh sesetengah pelayar dalam kotak terkatung-katung (hover box) sebagai tooltip, lebih lagi apabila pengguna meletakkan tetikus pada imej.
style	maklumat CSS sebaris
ismap	(belum ditulis)
usemap	(belum ditulis)
align	dikecam, gunakan CSS dalam dokumen-dokumen baharu – penjajaran imej, yakni, bottom (bawah), middle (tengah), top (atas), left (kiri) atau right (kanan)
width	lebar imej, buat imej pet bit, arahn ini harus diberikan dalam angka biasa, misalnya, "200", yang akan menghasilkan lebar sebanyak 200 piksel
height	tinggi imej, lihat "width" bagi maklumat penggunaan
border	dikecam, gunakan CSS dalam dokumen-dokumen baharu – lebar sempadan apabila imej dipautkan kepada sesuatu, lazimnya ditetapkan pada "0" (sifar)
hspace	dikecam, gunakan CSS dalam dokumen-dokumen baharu
vspace	dikecam, gunakan CSS dalam dokumen-dokumen baharu