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.
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.
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><title>Belajar HTML di Source Code Program</title><br/></head><br/><body><br/><h3 id=judul1>Saya sedang belajar HTML di Source Code Program.com</h3><br/> <br/><p>Duniailkom ialah situs Belajar Ilmu Komputer.<br/>Duniailkom didedikasikan untuk kamu yang ingin mempelajari<br/>mengenai dunia ilmu komputer.<br/><img src=duniailkom.png alt=Belajar HTML Basic Cara Menambahkan Gambar di HTML Panduan HTML Lanjutan: Cara Mengatur Tampilan Gambar pada HTML (atribut align dan border) height=100px<br/>align=left/><br/>Dikala ini duniailkom masih berfokus kepada panduan web programming,<br/>seperti Panduan Belajar HTML, Panduan CSS, Panduan PHP,<br/>Panduan JavaScript, dan Panduan MySQL.<br/></p><br/> <br/></body><br/></html> |
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:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><title>Belajar HTML di Source Code Program</title><br/></head><br/><body><br/><h3 id=judul1>Saya sedang belajar HTML di Source Code Program.com</h3><br/> <br/><p>Duniailkom ialah situs Belajar Ilmu Komputer.<br/><img src=duniailkom.png alt=Belajar HTML Basic Cara Menambahkan Gambar di HTML Panduan HTML Lanjutan: Cara Mengatur Tampilan Gambar pada HTML (atribut align dan border) height=100px<br/>align=right border=5/><br/>Duniailkom didedikasikan untuk kamu yang ingin mempelajari<br/>mengenai dunia ilmu komputer.<br/>Dikala ini duniailkom masih berfokus kepada panduan web programming,<br/>seperti Panduan Belajar HTML, Panduan CSS, Panduan PHP,<br/>Panduan JavaScript, dan Panduan MySQL.<br/></p><br/> <br/></body><br/></html> |
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/
