Di postingan sebelumnya, kita sudah membahas pengertian meta tag. Sekarang kita akan bahas cara mengatur posisi gambar di HTML. Silakan simak panduan lengkap AneIqbal berikut sampai akhir.
Mengatur tampilan gambar di HTML
Kita sudah pernah membahas cara memasukkan gambar di HTML. Sekarang kita akan bahas bagaimana cara mengatur posisinya.
Untuk mengatur tampilan gambar di HTML, ada 2 atribut yang digunakan. Pertama, atribut align. Kedua, atribut border.
Sebenarnya, untuk mengatur tampilan gambar disarankan menggunakan CSS bukan dengan atribut align dan border HTML. Tapi, nggak ada salahnya kan kalau kita bahas? Sebagai bahan informasi.
Yuk kita bahas satu per satu atributnya.
Atribut align pada tag <img>
Atribut align digunakan untuk mengatur posisi gambar dari objek di sekitarnya. Secara bawaan atau default, jika kita memasukkan gambar ke teks, maka teksnya akan berada di bagian bawah gambar.
Supaya teksnya tidak dibawah, kita ubah posisi gambarnya dengan atribut align ini. Atribut align punya 4 value atau nilai, yakni: left, top, right, middle, dan bottom.
left akan membuat gambar ada di sebelah kiri teks. right akan membuat gambar ada di sebelah kanan teks. Sesuai dengan nama valuenya.
Kita coba ubah posisi gambarnya menjadi di sebelah kiri. Jangan lupa siapkan gambarnya ya.
Kita buat kode HTMLnya.
<!DOCTPYE html>
<html>
<head>
<title>Mengatur tampilan gambar di HTML</title>
</head>
<body>
<p>
<img src="img/logo.png" align="left"/>
Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal.
</p>
</body>
</html>
Kita simpan dengan nama style-img.html. Lalu jalankan.
Gambar akan berada di sebelah kiri. Sehingga posisi teksnya juga akan ikut berubah mengisi kekosongan yang ditinggalkan gambar tersebut. Teksnya akan naik.
Monggo dicoba lagi dengan mengganti value atribut alignnya. Supaya lebih kelihatan perubahan-perubahannya.
Sudah?
Terlihat kan perbedaannya?
Kita lanjut ke atribut border.
Atribut border pada tag <img>
Kalau kita menambahkan atribut border pada tag <img>, maka digambarnya akan muncul garis di tiap sisinya.
Nilai atau value dari atribut border ini berupa angka. Secara default memiliki satuan pixel. Mari kita coba.
Kita coba tambahkan garis setebal 10 pixel pada gambar di atas. Tambahkan atribut border=”10″ pada kode HTML di atas. Seperti in jadinya.
<!DOCTPYE html>
<html>
<head>
<title>Mengatur tampilan gambar di HTML</title>
</head>
<body>
<p>
<img src="img/logo.png" align="left" border="10"/>
Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal. Halo gan, selamat datang di blog AneIqbal.
</p>
</body>
</html>
Maka, akan muncul garis tepi berwarna hitam di tiap sisi gambar.
Berubah kan tampilan gambarnya?
Begitulah cara mengubah tampilan gambar dengan atribut align dan border pada tag <img>. Tapi, lebih disarankan menggunakan CSS untuk mengubah tampilan gambarnya.
Sekian pembahasan kita kali ini mengenai cara mengatur posisi gambar di HTML. Selanjutnya kita akan bahas cara membuat deskripsi HTML atau description list.
