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

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>

Contoh Penulisan Atribut align dalam gambar HTML - tag imgSeperti 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>

Contoh Penulisan Atribut border dalam gambar HTML - tag imgPenggunaan 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.


Tutorial Terkait:

51 Comments

  1. tarwo
    20 Oct 14
    • Andre
      21 Oct 14
  2. Jofny
    05 Nov 14
    • Andre
      06 Nov 14
  3. Renggatama
    05 Dec 14
    • Andre
      06 Dec 14
  4. Syahrudin
    01 Feb 15
    • Andre
      02 Feb 15
  5. mephizto
    22 Feb 15
    • Azman Abdullah
      17 Aug 17
  6. ajeng
    29 Mar 15
    • Andre
      30 Mar 15
  7. Febrian
    16 May 15
  8. asep aka taruna
    27 Nov 15
    • Andre
      27 Nov 15
  9. William
    06 Jan 16
    • Andre
      07 Jan 16
  10. adi
    27 Mar 16
    • Andre
      28 Mar 16
  11. Khi Taro
    23 Apr 16
  12. MSFalif
    21 May 16
    • Andre
      22 May 16
  13. Ari
    24 Jul 16
  14. danang
    23 Aug 16
    • Andre
      24 Aug 16
  15. mayong
    25 Sep 16
    • Andre
      25 Sep 16
  16. ALHUMAIDI
    22 Oct 16
    • Andre
      23 Oct 16
  17. Anonymous
    28 Oct 16
    • Andre
      29 Oct 16
  18. Anonymous
    03 Nov 16
    • Andre
      04 Nov 16
  19. hermansyah
    22 Jan 17
    • Andre
      23 Jan 17
  20. burhanudin
    25 Feb 17
    • Andre
      26 Feb 17
  21. Anonymous
    09 May 17
    • Andre
      11 May 17
      • Ikhsan
        13 May 17
  22. dito
    15 May 17
  23. dodi
    17 Jun 17
    • Andre
      17 Jun 17
      • dodi
        18 Jun 17
  24. Fardhi
    14 Aug 17
    • Andre
      16 Aug 17
  25. Filbert
    14 Sep 17
    • Andre
      15 Sep 17
  26. Ahmad
    06 Dec 17
    • Andre
      07 Dec 17

Add Comment