Imej HTML

Dengan menggunakan HTML, gambar dapat dipaparkan di dokumen.

Contoh

Memasukkan gambar
Contoh ini memaparkan bagaimana gambar dipaparkan di halaman web.
Memasukkan gambar dari tempat yang berbeda
Contoh ini memaparkan bagaimana gambar dari folder lain atau pelayan dipaparkan di halaman web.

(Banyak contoh dapat ditemui di bawah halaman ini)

Tanda tag gambar (<img>) dan kelembagaan sumber (Src)

Dalam HTML, gambar diatur oleh tag <img>.

<img> adalah tag kosong, yang berarti ia hanya mengandungi kelembagaan dan tidak mempunyai tag penutup.

Untuk memaparkan gambar di halaman, anda perlu menggunakan kelembagaan sumber (src). src menunjukkan "source". Nilai kelembagaan sumber adalah alamat URL gambar.

Syarat untuk menentukan gambar adalah:

<img src="url" />

URL mengindikasikan tempat simpanan gambar. Jika gambar yang dinamakan "boat.gif" terletak di direktori "images" di www.codew3c.com, URL-nya adalah http://www.codew3c.com/images/boat.gif.

Pemaparan peta browser akan dipaparkan di tempat tanda tag gambar di dokumen. Jika anda meletakkan tanda tag gambar di antara dua paragraf, peta browser akan memaparkan paragraf pertama dahulu, kemudian gambar, dan akhirnya paragraf kedua.

Tukar kelembagaan teks (Alt)

Atribut alt digunakan untuk menentukan kalimat pengganti yang siap digunakan untuk gambar. Nilai atribut pengganti teks adalah yang ditentukan oleh pengguna.

<img src="boat.gif" alt="Big Boat">

Saat pemetaan browser tidak dapat memuat gambar, atribut pengganti teks dapat memberitahu para bacaan tentang informasi yang hilang. Pada saat ini, pemetaan browser akan menampilkan teks pengganti ini daripada gambar. Biasa memberikan atribut pengganti teks kepada gambar di halaman adalah hal yang baik, yang membantu menampilkan informasi dengan baik dan sangat berguna bagi mereka yang menggunakan pemetaan teks.

Perhatian Dasar - Tips yang Berharga:

Jika file HTML berisi sepuluh gambar, maka untuk menampilkan halaman ini dengan benar, perlu memuat 11 file. Memuat gambar memerlukan waktu, jadi saran kami adalah: gunakan gambar dengan bijak.

Beberapa Contoh Lainnya

Gambar Latar Belakang
Contoh ini menunjukkan bagaimana menambahkan gambar latar belakang ke halaman HTML.
Tata Gambar
Contoh ini menunjukkan bagaimana menata gambar dalam teks.
Gambar Bergerak
Contoh ini menunjukkan bagaimana membuang gambar ke kiri atau kanan paragraf.
Atur Ukuran Gambar
Contoh ini menunjukkan bagaimana mengatur ukuran gambar ke berbagai ukuran.
Tampilkan Teks Pengganti Gambar
Contoh ini menunjukkan bagaimana menampilkan teks pengganti untuk gambar. Saat gambar tidak dapat dimuat, atribut pengganti teks memberitahu para bacaan tentang informasi yang hilang. Biasa memberikan atribut pengganti teks kepada gambar di halaman adalah hal yang baik, yang membantu menampilkan informasi dengan baik dan sangat berguna bagi mereka yang menggunakan pemetaan teks.
Buat Tautan Gambar
Contoh ini menunjukkan bagaimana menggunakan gambar sebagai tautan.
Membuat Peta Gambar
Contoh ini menunjukkan bagaimana membuat peta gambar dengan kawasan yang dapat diklik. Setiap kawasan adalah tautan hyper.
Mengubah Gambar Menjadi Peta Gambar
Contoh ini menunjukkan bagaimana mengubah gambar biasa menjadi peta gambar.

Tanda Gambar

Tanda Deskripsi
<img> Tentukan gambar.
<map> Tentukan peta gambar.
<area> Tentukan kawasan yang dapat diklik dalam peta gambar.