Cara mengatur letak gambar di html

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

Table of Contents Show

Mengenal Atribut Align pada Tag <img>
Mengenal Atribut Border pada Tag <img>
Bagaimana cara memasukan gambar ke HTML?
Apa HTML yang benar untuk menyisipkan gambar latar?
Kenapa gambar tidak bisa muncul di HTML?
Apa nama atribut yang digunakan untuk mengatur tampilan gambar menjadi sebelah kiri teks?

08 Jun 14 | | Tutorial HTML | |

Pada tutorial HTML dasar tentang gambar, kita telah mempelajari cara memasukkan gambar ke dalam HTML. Dalam tutorial HTML lanjutan ini kita akan membahas 2 buah atribut yang sering digunakan di dalam mengatur tampilan gambar dalam HTML, yaitu atribut align dan atribut border.

Atribut align dan border yang akan kita bahas sebenarnya sudah berstatus ‘deprecated’, yakni tidak disarankan lagi untuk digunakan, dan mungkin tidak akan didukung oleh web browser pada masa mendatang. Pengaturan tampilan gambar sebaiknya menggunakan CSS. Namun sebagai bahan informasi, saya akan tetap membahasnya pada tutorial kali ini.

Mengenal Atribut Align pada Tag <img>

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

Sesuai dengan namanya, masing-masing nilai dari atribut align bisa digunakan untuk mengatur tampilan gambar. Berikut adalah contoh kode HTML dengan menggunakan atribut align=”left” pada gambar.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di Duniailkom.com</h3>
 
<p>Duniailkom adalah situs Belajar Ilmu Komputer.
Duniailkom didedikasikan bagi anda yang ingin mempelajari
tentang dunia ilmu komputer.
<img src="duniailkom.png" alt="gambar duniailkom" height="100px"
align="left"/>
Saat ini duniailkom masih berfokus kepada tutorial web programming,
seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP,
Tutorial JavaScript, dan Tutorial MySQL.
</p>
 
</body>
</html>

Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, anda bisa merubah kode diatas dengan mengubah-ubah nilai dari atribut align.

Mengenal Atribut Border pada Tag <img>

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

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di Duniailkom.com</h3>
 
<p>Duniailkom adalah situs Belajar Ilmu Komputer.
<img src="duniailkom.png" alt="gambar duniailkom" height="100px"
align="right" border="5"/>
Duniailkom didedikasikan bagi anda yang ingin mempelajari
tentang dunia ilmu komputer.
Saat ini duniailkom masih berfokus kepada tutorial web programming,
seperti Tutorial Belajar HTML, Tutorial CSS, Tutorial PHP,
Tutorial JavaScript, dan Tutorial MySQL.
</p>
 
</body>
</html>

Penggunaan atribut border secara langsung ke dalam tag <img> memiliki banyak keterbatasan, misalnya kita tidak bisa mengatur warna dan jenis border dari gambar. Pengaturan yang lebih disarankan adalah dengan menggunakan CSS.

Bagaimana cara memasukan gambar ke HTML?

Nah, tag yang digunakan untuk memasukan gambar pada dokumen HTML adalah menggunakan tag <img>. Tag <img> menentukan gambar yang akan ditampilkan dalam dokumen HTML. Tag <img> sendiri memiliki memiliki beberapa atribut atau turunan yang bisa kamu gunakan untuk memasukan gambar.

Apa HTML yang benar untuk menyisipkan gambar latar?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

Kenapa gambar tidak bisa muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.