HTML Images
Cobalah Sendiri - Contoh
Menyisipkan gambar
Cara menyisipkan gambar ke dalam dokumen HTML.
Cara menyisipkan gambar ke dalam dokumen HTML.
Masukkan gambar dari lokasi yang berbeda
Cara menyisipkan gambar dari folder lain atau server lain.
Cara menyisipkan gambar dari folder lain atau server lain.
(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini).
HTML Images - The Tag <img> dan Atribut Src
Dalam HTML, gambar didefinisikan dengan tag <img>.
Tag <img> kosong, yang berarti mengandung atribut saja, dan tidak memiliki tag penutup.
Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "sumber". Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan.
Sintaks untuk mendefinisikan gambar:
<img src="url" alt="some_text">
URL yang menunjuk ke lokasi di mana gambar disimpan. Sebuah 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 menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, maka gambar, dan kemudian paragraf kedua.
HTML Images - The Alt Atribut
Alt atribut yang diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.
Nilai atribut alt adalah teks penulis-didefinisikan:
<img src="smiley.gif" alt="Smiley face">
Atribut alt menyediakan informasi alternatif bagi gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar).
HTML Images - Mengatur Tinggi dan Lebar dari suatu Gambar
Atribut tinggi dan lebar yang digunakan untuk menentukan tinggi dan lebar dari suatu gambar.
Nilai atribut yang ditetapkan dalam piksel secara default:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
Tip: Ini adalah praktik yang baik untuk menentukan baik atribut tinggi dan lebar untuk gambar. Jika atribut ini ditetapkan, ruang diperlukan untuk gambar dicadangkan saat halaman dimuat. Namun, tanpa atribut-atribut ini, browser tidak mengetahui ukuran gambar. Efeknya akan bahwa tata letak halaman akan berubah selama loading (sementara gambar beban).
Catatan Dasar - Tips Berguna
Catatan: Jika file HTML berisi sepuluh gambar - file sebelas diperlukan untuk menampilkan halaman yang tepat. Memuat gambar membutuhkan waktu, jadi saran terbaik saya adalah: Gunakan gambar dengan hati-hati.
Catatan: Ketika sebuah halaman web dimuat, itu adalah browser, pada saat itu, yang benar-benar mendapatkan gambar dari web server dan memasukkan ke dalam 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. Icon link rusak ditampilkan jika browser tidak dapat menemukan gambar.
Contoh lainnya
Biarkan mengambang gambar ke kiri dan ke kanan
Bagaimana untuk membiarkan mengambang gambar ke kiri atau kanan paragraf.
Bagaimana untuk membiarkan mengambang gambar ke kiri atau kanan paragraf.
Membuat hyperlink dari suatu gambar
Cara menggunakan gambar sebagai link.
Cara menggunakan gambar sebagai link.
Buat peta gambar
Cara membuat peta gambar, dengan daerah yang dapat diklik. Setiap daerah adalah hyperlink.
Cara membuat peta gambar, dengan daerah yang dapat diklik. Setiap daerah adalah hyperlink.
HTML Gambar Tags
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image-map |
| <area> | Defines a clickable area inside an image-map |
