28 April 2013,
 33

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>.

33 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..

      • mq says:

        iya,,saya juga sama,,pas saya memasukkan gambar,gambarnya ga keluar…mohon pencerahannya,,terimakasih atas ilmu yang sudah diberikan,dan sangat bermanfaat untuk saya…

  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 ?

  10. andi says:

    pada tutorial img ini,saya tidak bisa menampilkan gambar di laman browser,mhn petunjuk,kira kira kesalahan dimana.tq

    • Andre says:

      Biasanya gambar tidak tampil karena kesalahan lokasi gambar (untuk tutorial ini, file gambar harus berada di dalam 1 folder dengan file html-nya), atau kesalahan ketik seperti : src=”koala.jpg” yang ditulis menjadi src=”koala.jpeg”.

      Mudah2an bisa membantu…

  11. Apip says:

    Ternyata Mudah bangget

  12. Fajri Alhado says:

    Mau tanya nih
    Saya kan mau menyisipkan gambar pakai html
    Posisi nya gambar dari komputer
    Nah jadi saya mau buat banyak gambar
    Jadi misal gambar 1 saya klik, otomatis berlanjut ke gambar 2 dan begitu seterusnya.
    Nah cara membuat banyak gambar gimana?

    • Andre says:

      Mungkin maksudnya membuat slideshow ya? jadi kalau gambar saat ini di klik, akan muncul gambar berikutnya.

      Untuk membuat efek slideshow ini biasanya menggunakan HTML + JavaScript, untuk kodenya fajri bisa search di google dengan kata kunci “JavaScript Sildeshow” atau “jQuery Slideshow”, salah satunya bisa dilihat seperti ini: http://zurb.com/playground/orbit-jquery-image-slider.

      Namun karena mempelajari JavaScript + jQuery sedikit “lebih rumit” dari pada HTML, untuk mendapatkan efek “misal gambar 1 saya klik, otomatis berlanjut ke gambar 2 dan begitu seterusnya“, maka kita bisa mengakali dengan membuat banyak halaman HTML, dimana 1 gambar di dalam 1 halaman HTML, contohnya: gambar1.html berisi gambar1.jpg, gambar2.html berisi gambar2.jpg, dst. Kemudian kita membuat link dari gambar 1 ke halaman gambar 2, seperti berikut ini:

      <a href=”gambar2.html”><img alt=”gambar1″ src=”gambar1.jpg”/></a>

      Namun jika fajari memiliki waktu luang, silahkan pelajari JavaScript+Jquery, duniailkom telah membuat tutorial dasar JavaScript pada Tutorial dasar JavaScript untuk pemula.

  13. Tommy says:

    Sangat bermanfaat, ijin bookmark

  14. alif says:

    <img src="Fotoo425.jpg" width="240px"
    kok gk muncul yha gmbrnya

    • Andre says:

      Waduh, saya juga tidak tahu penyebabnya, karena kodenya terlihat sudah benar. Bisa jadi nama gambarnya salah ketik, atau gambar tidak berada di dalam folder yang sama dengan file HTML yang sedang dijalankan.

    • federiawati says:

      wiiihh bagus niihh..
      makasih yah kaak infonya :DComment

  15. niaanggraini says:

    menyenangkan dapat belajar di duniailkom.com

  16. Anonymous says:

    makasih banyak sangat membantu,

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>