HTML Gambar / Image

Contoh Norwegian Mountain Trip Coba sendiri »

---

Cobalah Sendiri - Contoh

Sisipkan gambar

Bagaimana menyisipkan gambar ke dalam dokumen HTML.

Sisipkan gambar dari lokasi yang berbeda

Cara memasukkan gambar dari folder lain atau server lain.

(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini).

---

HTML Tag <img> dan Atribut Src

Dalam HTML, gambar didefinisikan dengan tag <img>. 

Tag <img> kosong, yang berarti bahwa mengandung atribut saja, dan tidak memiliki tag penutup.

Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "Source". Nilai atribut src adalah URL gambar yang ingin ditampilkan.

Sintaks untuk mendefinisikan gambar:

<img src="url" alt="Nama File Gambar / Judul Gambar "/>

poin URL ke lokasi di mana gambar disimpan. Gambar bernama "boat.gif", yang terletak di direktori "images" pada "www.w3schools.com" memiliki URL: http://www.w3schools.com/images/boat.gif.

Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda memasang tag gambar antara dua paragraf, browser menampilkan paragraf pertama, maka gambar, kemudian paragraf kedua.

---

HTML Atribut Alt

Atribut alt diperlukan menentukan sebuah teks alternatif untuk sebuah gambar, jika gambar tidak dapat ditampilkan.

Nilai atribut alt adalah teks yang ditentukan penulis:

<img src="boat.gif" alt="Boat Besar " />

Atribut alt memberikan informasi alternatif untuk gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan screen reader).

---

Catatan Dasar - Tips Yang Berguna

Catatan: Jika file HTML berisi sepuluh gambar - file sebelas diperlukan untuk menampilkan halaman yang tepat. Loading gambar memakan waktu, jadi saran terbaik saya adalah: Gunakan gambar dengan hati-hati.

Catatan: Ketika sebuah halaman web dibuka, ini adalah browser, pada saat itu, yang benar-benar mendapatkan gambar dari web server dan memasukkan ke halaman. Karena itu, pastikan bahwa gambar benar-benar tinggal di tempat yang sama dalam hubungannya dengan halaman web, jika pengunjung Anda akan mendapatkan ikon link yang rusak. Ikon link rusak ditampilkan jika browser tidak dapat menemukan gambar.

---

Contoh Lainnya

Menyelaraskan gambar

Bagaimana untuk menyesuaikan gambar dalam teks.

Biarkan gambar float

Bagaimana membiarkan gambar float ke kiri atau kanan paragraf.

Membuat hyperlink dari suatu gambar

Cara menggunakan gambar sebagai link.

Buat peta gambar

Cara membuat peta gambar, dengan daerah diklik. Masing-masing daerah adalah hyperlink.

---

Gambar Tag HTML

Tag	Deskripsi
<img />	Mendefinisikan gambar
<map>	Mendefinisikan gambar-map
<area />	Mendefinisikan daerah yang dapat diklik dalam peta-image

Sumber www.w3schools.com