Gambar HTML

Dengan menggunakan HTML, Anda dapat menampilkan gambar di dokumen.

Contoh

Memasukkan gambar
Contoh ini menunjukkan bagaimana menampilkan gambar di halaman web.
Memasukkan gambar dari berbagai tempat
Contoh ini menunjukkan bagaimana menampilkan gambar lainnya dari folder atau server lain di halaman web.

（Lebih banyak contoh dapat ditemukan di bawah halaman ini)

Tag gambar (<img>) dan atribut sumber (Src)

Dalam HTML, gambar didefinisikan oleh tag <img>.

<img> adalah tag kosong, yang berarti bahwa ia hanya berisi atribut dan tidak memiliki tag penutup.

Untuk menampilkan gambar di halaman, Anda perlu menggunakan atribut sumber (src). src berarti "source". Nilai atribut sumber adalah alamat URL gambar.

Syntaks yang digunakan untuk mendefinisikan gambar adalah:

<img src="url" />

URL menunjukkan tempat simpan gambar. Jika gambar yang bernama "boat.gif" berada di direktori images di www.codew3c.com, maka URLnya adalah http://www.codew3c.com/images/boat.gif.

Browser akan menampilkan gambar di tempat tanda gambar muncul di dokumen. Jika Anda menempatkan tanda gambar di antara dua paragraf, browser akan menampilkan paragraf pertama dahulu, lalu gambar, dan akhirnya paragraf kedua.

Ganti atribut pengganti (Alt)

Atribut alt digunakan untuk mendefinisikan urutan teks yang dapat diganti untuk gambar. Nilai atribut teks pengganti adalah yang diatur pengguna.

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

Saat peramban tidak dapat memuat gambar, atribut teks pengganti memberitahu pembaca informasi yang hilang. Pada saat ini, peramban akan menampilkan teks pengganti ini daripada gambar. Biasa menambahkan atribut teks pengganti ke gambar di halaman adalah hal yang baik, yang membantu menampilkan informasi dengan baik dan sangat bermanfaat bagi mereka yang menggunakan peramban teks.

Perhatian Dasar - Tips yang Bermanfaat:

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 di 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.
Menampilkan Teks Pengganti Gambar
Contoh ini menunjukkan bagaimana menampilkan teks pengganti untuk gambar. Saat gambar tidak dapat dimuat, atribut teks pengganti memberitahu pembaca informasi yang hilang. Biasa menambahkan atribut teks pengganti ke gambar di halaman adalah hal yang baik.
Membuat Tautan Gambar
Contoh ini menunjukkan bagaimana menggunakan gambar sebagai tautan.
Membuat Peta Gambar
Contoh ini menunjukkan bagaimana membuat peta gambar dengan area yang dapat diklik. Setiap area adalah tautan super.
Mengubah Gambar Menjadi Peta Gambar
Contoh ini menunjukkan bagaimana mengubah gambar biasa menjadi peta gambar.

Tanda Gambar

Tanda Deskripsi
<img> Definisi gambar.
<map> Definisi peta gambar.
<area> Definisi area yang dapat diklik di peta gambar.