info-b

Tutorial HTML Lanjutan: Cara Mengatur Tampilan Gambar dalam HTML (atribut align dan border)

Posted on

Di panduan HTML basic mengenai gambar, kita telah mempelajari cara memasukkan gambar ke dalam HTML. Pada panduan HTML lanjutan ini kita akan membahas 2 buah atribut yang sering digunakan di pada mengatur tampilan gambar pada HTML, yaitu atribut align dan atribut border.

Atribut align dan border yang akan kita bahas sebetulnya telah berstatus ‘deprecated’, yakni tak disarankan lagi bagi digunakan, dan mungkin tak akan didukung oleh web browser di waktu mendatang. Pengaturan tampilan gambar sebaiknya menggunakan CSS. Namun selaku bahan informasi, saya akan tetap membahasnya di panduan kali ini.


Mengenal Atribut Align di Tag <img>

Secara default, gambar akan tampil dengan text berada di sisi bawah gambar. Bagi mengubah atau mengatur tampilan gambar pada HTML, kita dapat menambahkan atribut align ke pada tag <img>. Atribut align dapat diisi dengan beberapa nilai, yakni bottom, left, middle, right dan top.

Sesuai dengan namanya, masing-masing nilai dari atribut align dapat digunakan bagi mengatur tampilan gambar. Berikut ialah contoh kode HTML dengan menggunakan atribut align=”left” di gambar.

 Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Selaku alat latihan, kamu dapat merubah kode diatas dengan mengubah-ubah nilai dari atribut align.


Mengenal Atribut Border di Tag <img>

Atribut border digunakan bagi menambahkan garis tepi (border) kedalam gambar. Nilai dari atribut ini ialah angka yang berisi ukuran lebar garis tepi pada satuan pixel. Berikut ialah contoh kode HTML dengan menggunakan atribut border=”5” di gambar:

 Pemakaian atribut border secara seketika ke pada tag <img> mempunyai banyak keterbatasan, misalnya kita tak dapat mengatur warna dan jenis border dari gambar. Pengaturan yang lebih disarankan ialah dengan menggunakan CSS.


Sumber https://www.duniailkom.com/