Belajar HTML Dasar Part 11: Cara Menambahkan Gambar di HTML (tag image)

Sulit membayangkan sebuah halaman HTML tanpa gambar untuk standard web saat ini. Pada tutorial belajar HTML cara menambahkan gambar di HTML ini kita akan mempelajari cara penggunaan tag image. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>.


Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML: Cara Membuat link di HTML).

Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.

Pada contoh dibawah ini saya menggunakan sebuah gambar koala.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai img.html

Contoh penggunaan tag <img>:

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img src="koala.jpg" />
</body>
</html>

Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />

Cara Menambahkan Gambar di HTML

Hati-hati dengan penulisan atribut src, sering gambar gagal tampil karena kita salah ketik atribut src menjadi “scr”.


Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, yaitu alt

Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar.

Contoh penggunaan atribut alt pada tag <img>: 

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img alt="gambar koala" src="koala.jpg"/>
</body>
</html>
Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.

Atribut width dan height dalam tag <img>

Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.

Contoh penggunaan atribut width dan height pada tag <img>:

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img alt="Gambar Koala" src="koala.jpg" height="200" width="100" />
</body>
</html>

Cara Menambahkan Gambar di HTML Width

Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan heightmemaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan.

Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan jika kita menetapkan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.

Biasanya web server akan menampilkan text terlebih dahulu, baru mengirim gambar setelahnya. Untuk web server yang sibuk, atau gambar dengan ukuran besar, hal ini akan menyebabkan text berpindah tempat karena gambar yang terlambat ditampilkan. Mencantumkan ukuran dari gambar dengan atribut width dan height akan memberikan kesempatan kepada browser untuk mempersiapkan ukuran tersebut untuk gambar, dan text tidak akan berpindah.
Update: Untuk mengatur posisi gambar dan membuat garis tepi (border), silahkan lanjut ke Tutorial HTML Lanjutan: Cara mengatur tampilan gambar dalam HTML (atribut align dan border)

Untuk menampilkan data, baik itu berasal dari database atau dari sumber lain, akan lebih rapi jika menggunakan tabel. Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas tentang Cara Membuat tabel di HTML menggunakan tag <table>.


eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

Tutorial Terkait:

114 Comments

  1. putri fakhrun nisa
    10 Nov 13
    • Andre
      16 Nov 13
    • julianty
      13 Apr 16
      • Andre
        16 Apr 16
  2. Dian
    22 Nov 13
    • Andre
      24 Nov 13
      • mq
        16 Aug 14
  3. Fikar
    01 Dec 13
    • Andre
      17 Dec 13
    • Savira
      12 Apr 15
  4. Nalendra
    28 Jan 14
    • Andre
      22 Feb 14
  5. Jocelyne
    15 Feb 14
    • Andre
      22 Feb 14
      • enjisme
        13 Mar 14
        • Andre
          30 Mar 14
  6. rizal
    27 Apr 14
    • Andre
      24 May 14
  7. robby
    07 Jun 14
  8. dewi
    21 Jun 14
    • Andre
      21 Jun 14
  9. andi
    12 Aug 14
    • Andre
      15 Aug 14
  10. Apip
    07 Sep 14
  11. Fajri Alhado
    15 Sep 14
    • Andre
      16 Sep 14
  12. Tommy
    18 Oct 14
  13. alif
    18 Oct 14
    • Andre
      21 Oct 14
    • federiawati
      13 Nov 14
  14. niaanggraini
    29 Oct 14
    • Andre
      31 Oct 14
  15. Anonymous
    21 Nov 14
  16. rizki heryandi
    29 Nov 14
  17. Ryan
    11 Dec 14
    • Andre
      11 Dec 14
  18. Mitha
    23 Dec 14
    • Andre
      23 Dec 14
  19. rzlfotocopy
    26 Dec 14
    • Andre
      29 Dec 14
  20. A-Anonymous
    04 Jan 15
  21. putri salju
    15 Jan 15
    • Andre
      19 Jan 15
  22. blingbling
    15 Jan 15
    • Andre
      19 Jan 15
  23. GIANCA
    19 Jan 15
  24. yan flow
    22 Feb 15
    • Andre
      22 Feb 15
  25. sepatu murah
    25 Feb 15
  26. iman yaqna
    28 Feb 15
  27. Hans
    28 Mar 15
    • Andre
      28 Mar 15
  28. Alfred
    13 May 15
    • Andre
      15 May 15
  29. Anonymous
    21 May 15
  30. pak D Didik
    27 May 15
    • Andre
      27 May 15
  31. Fernando
    16 Jul 15
    • Andre
      16 Jul 15
  32. marco
    04 Aug 15
    • Andre
      05 Aug 15
  33. PiPio
    08 Aug 15
    • Andre
      09 Aug 15
  34. tri wahyuni
    08 Aug 15
  35. munir
    13 Aug 15
    • Andre
      13 Aug 15
  36. Yan Stevanus
    21 Aug 15
    • Andre
      22 Aug 15
  37. Ryan
    08 Sep 15
    • Andre
      08 Sep 15
  38. Ulvia
    09 Sep 15
  39. Ulvia
    09 Sep 15
    • Andre
      10 Sep 15
  40. Wi indah
    09 Sep 15
  41. Tommy
    16 Sep 15
    • Andre
      16 Sep 15
  42. shin hee rin
    16 Sep 15
  43. fikri
    14 Oct 15
    • Andre
      15 Oct 15
  44. Agga
    16 Oct 15
    • Andre
      16 Oct 15
  45. Annisa
    25 Oct 15
    • Andre
      26 Oct 15
  46. ema
    27 Oct 15
  47. Tasya
    28 Oct 15
    • Andre
      29 Oct 15
  48. Aldhia
    29 Oct 15
    • Andre
      30 Oct 15
  49. andiry28
    06 Nov 15
  50. David
    22 Nov 15
  51. Anonymous
    03 Jan 16
    • Andre
      03 Jan 16
  52. ekky
    03 Jan 16
    • Andre
      03 Jan 16
  53. Anonymous
    19 Jan 16
    • Andre
      19 Jan 16
  54. Faisal
    22 Jan 16
    • Andre
      23 Jan 16
  55. Rid-one
    22 Feb 16
    • Andre
      22 Feb 16
  56. iyan
    28 Feb 16
  57. Aditasa
    07 Mar 16
    • Andre
      16 Apr 16
  58. Mesin Fotocopy
    27 Mar 16
  59. Jalal
    20 Apr 16
    • Andre
      20 Apr 16
  60. Herniawan
    01 May 16

Add Comment