Inserting Images in HTML Documents
Web bukan hanya berisi tentang teks, multi-media dan fitur multimedia HTML saja tetapi memungkinkan kalian untuk memasukkan gambar, klip audio, klip video, dan elemen multimedia lainnya di halaman web.
Tag <img> digunakan untuk menyisipkan gambar dalam dokumen HTML. Ini merupakan elemen kosong dan hanya berisi atribut saja. Sintaks tag <img> dapat diberikan dengan:
<img src="url" alt="some_text">
Contoh berikut kita akan mencoba untuk memasukkan tiga gambar di halaman web:
<img src="kites.jpg" alt="Flying Kites"> <img src="sky.jpg" alt="Cloudy Sky"> <img src="balloons.jpg" alt="Hot Air Balloons">
Catatan: Seperti <br>, elemen <img> juga merupakan elemen kosong, dan tidak memiliki tag penutup. Dalam XHTML elemen tersebut akan otomatis tertutup sendiri diakhiri dengan “/>”.
Atribut Gambar Src
Setiap gambar memiliki atribut src (src adalah singkatan dari source). Atribut src memberi tahu browser tempat penyimpanan gambar yang ingin kalian tampilkan. URL gambar yang disediakan sebagai nilai atribut src menunjuk ke lokasi di mana gambar disimpan.
Sebagai Contoh, Gambar bernama “sky.jpg”, terletak di direktori “gambar” di “www.tutorialrepublic.com” memiliki URL:
<img url="https://www.tutorialrepublic.com/images/sky.jpg" alt="Sky">
Atribut ALT Gambar
Atribut alt adalah deskripsi alternatif dari sebuah gambar, jika gambar yang dimaksud gagal ditampilkan. Nilai dari atribut alt adalah teks yang kita tentukan sendiri.
<img url="https://www.tutorialrepublic.com/images/kites.jpg" alt="Kites">
Catatan: Atribut ALT akan memberikan informasi berupa tulisan apabila gambar dalam sebuah halaman gagal untuk di tampilkan karena kesalahan, misal seperti kesalahan dalam penulisan atribut src, koneksi yang lambat dll
Mengatur Lebar dan Tinggi Gambar
Atribut width dan height digunakan untuk menentukan tinggi dan lebar gambar. Nilai atribut ditentukan dalam pixel secara default ataupun secara persentase.
<img src="kites.jpg" alt="Flying Kites" width="300" height="300"> <img src="sky.jpg" alt="Cloudy Sky" width="250" height="150"> <img src="balloons.jpg" alt="Hot Air Balloons" width="200" height="200">
