28 April 2013,
 19

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, adalah alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan 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. 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


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 web broser yang 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="koalas.jpg"/>
</body>
</html>

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 height ‘memaksa’ gambar untuk tampil dengan nilai yang kita tetapkan.

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)

19 responses on “Belajar HTML Dasar Part 11: Cara Menambahkan Gambar di HTML (tag image)

  1. putri fakhrun nisa says:

    Terimakasih yaaa, ini membantu banget, :)

  2. Dian says:

    mau tanya dong, saya pasti kalau memasukkan gambar format .jpeg pasti error atau gak mau keluar gambarnya kenapa ya?

    • Andre says:

      Seharusnya tidak ada masalah, coba bisa dipastikan lagi apakah gambarnya berekstensi .jpeg atau hanya .jpg, dan juga dipastikan agar kode HTMLnya bersesuaian, contoh: src=”koala.jpg” atau src=”koala.jpeg”. Mudah-mudahan bisa membantu ya, Dian..

  3. Fikar says:

    Info yg bagus gan
    Saya lagi belajar tentang edit html
    Lumayan buat nambah wawasan aja
    Di tunggu kunbalnya

  4. Nalendra says:

    kalo beda folder gimana gan?

    • Andre says:

      Jika gambarnya terletak di dalam folder, maka penulisan lokasi gambar menjadi: src=”nama_folder/koala.jpg”, namun jika foldernya berada di folder diatas halaman HTML tempat kode dijalankan, maka alamatnya menjadi src=”../koala.jpg”.

      Sebagai pemahaman dasar, Nelandra bisa membacanya di tutorial Belajar HTML Dasar: Cara Membuat link di HTML (tag a)

      Semoga bisa membantu… ^_^

  5. Jocelyne says:

    kak, gambarnya kalau di browsernya engga mau muncul gimana kak ?

    • Andre says:

      Biasanya sering kesalahan tag terletak di atribut src=”koala.jpg”, pastikan bahwa nama gambarnya tidak salah ketik, dan juga tidak salah dalam singkatan src=”koala.jpg”, bukan scr=”koala.jpg”.

      Semoga bisa membantu Joscelyne.. ^_^

  6. rizal says:

    tq info y

  7. bang, bagus kali artikelnya
    saya baru baca sampai sini
    ngga pa pa kan bang klw sering di baca ?? =)

    • Andre says:

      Hehe, tentunya saya malah senang artikelnya bermanfaat dan sering dibaca :)
      silahkan di bookmark agar duniailkom mudah diakses.

      Sukses buat belajarnya, andhika,. :)

  8. robby says:

    mau tanya gan, kalo taq buat ngubah posisi gambar di kanan ato dikiri bisa ga,..?

  9. dewi says:

    kalau cara memasukkan gambar supaya bisa di zoom bagaimana ya caranya ?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>