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.

74 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
      • Putu Deva
        30 May 18
        • Anonymous
          24 Jul 18
      • Rio
        25 Nov 19
  4. Syahrudin
    01 Feb 15
    • Andre
      02 Feb 15
      • taufik
        31 Jan 22
  5. mephizto
    22 Feb 15
    • Azman Abdullah
      17 Aug 17
      • Nishio
        19 Aug 19
        • Chan
          04 Sep 19
  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
  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
  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
  27. alfi
    19 Dec 17
    • Andre
      20 Dec 17
  28. Anonymous
    09 Jun 18
    • Andre
      11 Jun 18
      • Faikar
        13 Jul 18
  29. jiun
    02 Sep 19
  30. theory
    02 Sep 19
    • Andre
      03 Sep 19
  31. khojin
    18 Mar 20
    • Andre
      18 Mar 20
  32. Handika Dwi Kurniawan
    12 Jun 20
  33. nis
    02 Feb 21
  34. heyzzzz
    12 Sep 21
  35. Anonymous
    12 Sep 21
    • Andre
      12 Sep 21
  36. Anonymous
    29 Sep 21

Add Comment

Leave a Reply to Andre Cancel reply