Image HTML atau memasukan gambar dalam laman HTML merupakan hal yang penting, selain untuk mempercantik tampilan, image html juga berfungsi sebagai ilustrasi maupun keterangan sebuah tulisan.

Kata pribahasa, gambar dapat mengatakan sesuatu yang tidak bisa dikatakan dengan kata-kata, jieee..

Lalu Bagaimana memasukan image ke dalam HTML?

Image dalam tag HTML dipanggil menggunakan tag img sehingga tag HTML untuk Image adalah <img>

Uniknya tag image html <img> adalah tag kosong alias tidak memiliki tag penutup, dia hanya terdiri dari tag pembuka dan attribute-nya saja.

Contoh:

<img src="logo-karyamaya.png" alt="logo karyamaya">

Hasil

Jenis File Image HTML dan nama file Image HTML

Meski hampir semua jenis file image sekarang sudah bisa dipanggil di HTML, akan tetapi jenis JPEG, JPG, PNG dan atau GIF adalah jenis yang paling familiar.

Hal yang terpenting adalah pastikan nama file image itu yang benar, sebaiknya nama file jangan menggunakan spasi, contoh: gambar.jgp atau karyamaya.png

Jika membutuhkan pemisah antar dua kata, gunakan kode strip (-) atau garis bawah (_) untuk memisah kata, contoh: karya_maya.png gambar-bagus.jpg

Penulisan juga harus lengkap dengan ekstensinya, tidak hanya karya-maya, atau karya_maya saja, tetapi harus karya-maya.png atau karyamaya.jpg

Lokasi File Image HTML

Lokasi file image HTML ini sangat penting dalam pengorganisasian file, kita kadang meletakannya dalam satu folder dengan file HTML, kadang kita membuat folder khusus untuk gambar atau image.

Jika file gambar dan file HTML dalam satu folder maka cara memanggilnya:

<img src="logo-karyamaya.png" alt="logo karyamaya">

Jika file gambar berada dalam folder khusus gambar yang misalnya foldernya kita kasih nama image untuk menyimpan semua file gambar, maka memanggilnya:

<img src="image/logo-karyamaya.png" alt="logo karyamaya">

Jika ingin memanggil gambar dari server lain, atau website lain maka harus ditulis lengkap, contoh:

<img src="https://cdn.webane.net/karyamaya/2020/04/logo-karyamaya.png" alt="logo karyamaya">

Attribute Image HTML

1. Attribute alt

Dari awal, Maya memberi contoh tag <img> selalu ada attribute alt, sebenarnya apa itu attribute alt?

Attribute alt atau alternative text adalah sebuah teks alternatif jika pengunjung website kita karena satu atau dua hal tidak dapat membuka image html yang kita taro.

Attribute alt harus berisi tentang informasi yang mendeskripsikan gambar atau img yang kita tampilkan tersebut

Contoh:

<img src="logo-karyamaya.png" alt="logo karyamaya">

Ingat! Attribute alt untuk tag img hukumnya wajib, sebuah laman website dianggap tidak valid jika mengandung tag image html yang tidak memiliki attribute alt.

Karya Maya

2. Ukuran image HTML

Dalam postingan Maya beberapa minggu lalu, sempat membahas tentang attribute style, nah dalam image html kali ini kita akan gunakan lagi.

Baca juga: Kombinasi Element dengan attribute style HTML

Attribute style atau CSS untuk mendeskripsikan ukuran gambar kita menggunakan properti width untuk lebar dan height untuk tinggi image

Contoh:

<img src="logo-karyamaya.png" alt="logo karyamaya" style="width: 100px; height: 50px;">

Hasil:

width dan height keduanya harus selalu ada dalam attribute image html, jika hanya width saja yang kita spesifikasikan ukurannya, maka tampilan pada browser nanti berpotensi untuk menampilkan gambar dengan ukuran yang kurang asik. Hehe.

3. Ukuran Image dalam bentuk persen (%)

Secara default ukuran yang digunakan dalam HTML adalah pixel atau kodenya px missal: 100px.

Tetapi di jaman modern dimana ukuran layer berbeda-beda, maka tidak jarang juga kita menggunakan persen yang merujuk pada persentase ukuran layar.

Contoh:

<img src="logo-karyamaya.png" alt="logo karyamaya" style="width: 100%; height: auto;">

Hasil:

Height-nya Maya gunakan auto, artinya dia akan menyesuaikan sesuai dengan dimensi ukuran asli gambar.

Perbedaannya, pada contoh ukuran dengan pixel, Maya menggunakan height: 50px, sehingga dimensi gambarnya tidak asik.

Oh iyam, persen artinya persentasi ukuran lebar layar, bukan ukuran image, dia akan melebar sesuai mengikuti lebar layar kita sampai maksimal 100% jika kita sett ukuran width-nya 100%

4. Float dalam Image HTML

Float di dalam CSS kalau dari arti Bahasa artinya “mengapung”. Property float digunakan untuk menentukan elemen box tertentu ingin mengapung (float) atau tidak.

Sebuah elemen bisa diposisikan seakan-akan dia mengapung diantara elemen setelahnya.

Mengapung berarti elemen yang mengalami float tersebut akan dipindahkan ke tepi paling kiri (float:left) atau tepi paling kanan (float:right) dari element induknya.

Untuk melihat hasilnya, Maya kombinasikan dengan paragraf. Agar terlihat jelas bagaimana sebuah element “mengapung” hehe.

Contoh:

<img src="logo-karyamaya.png" alt="logo karyamaya" style="float:left">
<p>Sebuah paragraf ini jika image memiliki properti float:left</p>

<img src="logo-karyamaya.png" alt="logo karyamaya" style="float:right">
<p>Sebuah paragraf ini jika image memiliki properti float:right</p>

Hasil:

Kesimpulan:

<img>	tag untuk memanggil gambar
src	attribute untuk menjelaskan lokasi gambar.
alt	attribute untuk mendeskripsikan teks alternative dari image jika tidak dapat ditampilkan.
width dan height	property dari attribute style untuk mendeskipsikan ukuran image html
float	property attribute style untuk mendeskripsikan sebuah element mengapung dr element berikutnya

Selamat berlatih!