Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Koding

Cara Memasukkan Gambar di HTML

Halo gan. Di postingan sebelumnya kita sudah membahas cara membuat link di HTML. Kali ini kita akan bahas cara memasukkan gambar di HTML.

Memasukkan Gambar di HTML

Cara memasukkan gambar di HTML

Selain paragraf, list, dan link, HTML juga dapat menampilkan objek berupa gambar. Tag yang digunakan yakni <img>.

..tag <img> ini merupakan self closing tag, artinya nggak punya tag penutup.

Benar:
<img />

Salah:
<img><img/>

Tag <img> selalu diikuti atribut src. Atribut src ini mirip seperti atribut href pada tag </a>. Bedanya, src merujuk ke nama file gambar yang ingin ditampilkan.

Contohnya, ane mau menampilkan gambar posting di atas ke halaman HTML. Nama file gambarnya: gambar-posting.png. Jadi seperti ni kodenya:
<!DOCTYPE html>
<html>
  <head>
    <title>Memasukkan gambar di HTML</title>
  </head>

  <body>
    <h1>Cara memasukkan gambar di HTML</h1>

    <img src="gambar-posting.png" />
  </body>
</html>

Simpan dengan nama file gambar.html. Web browser akan menampilkan:

Memasukkan Gambar di HTML

Seperti itu.

Kalo file HTML dan file gambarnya ada di folder yang sama, maka kita cukup panggil gambarnya dengan <img src="gambar-posting.png" />.

Memasukkan Gambar di HTML

Beda lagi kalo file HTML dan file gambarnya nggak di folder yang sama. Contohnya, file gambarnya ada di dalam subfolder image.

Memasukkan Gambar di HTML

Maka kita harus panggil gambarnya dengan: <img src="image/gambar-posting.png" />.


Atribut alt pada tag <img>

Tag <img> memiliki atribut alt. alt singkatan dari alternative description.

Berfungsi untuk menampilkan teks keterangan jika gambar gagal dipanggil/dimuat. Google juga membaca alt ini untuk mengenali/mengindex gambar yang ada di halaman web.

Atribut alt ini kita isi dengan deskripsi dari gambar tersebut.

Contohnya kita hapus nama folder di srcnya.
<img src="gambar-posting.png" alt="ini teks dari atribut alt.." />

Gambarnya akan gagal dimuat, karena srcnya nggak mengarah ke file gambar dengan benar.

Memasukkan Gambar di HTML

Nah teks pada atribut alt yang akan muncul menggantikan gambar yang gagal dimuat.

Atribut width dan height pada tag <img>

Lebar dan tinggi gambar dapat kita atur dengan atribut width dan height. Contohnya, kita atur lebar dan tinggi gambar di atas menjadi 300px.
<img src="image/gambar-posting.png" alt="ini teks dari atribut alt.." width="300px" height="300px" />

Akan seperti ini jadinya:

Memasukkan Gambar di HTML

Jadinya nggak proporsional, karena kita atur sama nilainya.

Supaya proporsional, kita harus tau lebar dan tingginya yang sama jika ditambah atau dikurangi nilainya. Tapi cara itu kelamaan.

Tipsnya, atur salah satu saja. Lebar atau tingginya, jangan keduanya.

..web browser akan secara otomatis menampilkan secara proporsional.

Contohnya, dari kode di atas, kita hapus heightnya.
<img src="image/gambar-posting.png" alt="ini teks dari atribut alt.." width="300px" />

Hasilnya akan proporsional:

Memasukkan Gambar di HTML


Sekarang, kita coba atur heightnya tapi hapus widthnya.
<img src="image/gambar-posting.png" alt="ini teks dari atribut alt.." height="300px" />

Memasukkan Gambar di HTML

Kalo kualitas gambarnya bagus (pixelnya tinggi), gambarnya tidak akan buram jika lebar dan tingginya diperbesar. Jika pixelnya rendah, gambar akan buram.

Selesai pembahasan kita kali ini tentang memasukkan gambar di HTML.

Selanjutnya, kita akan bahas cara membuat table di HTML.

4 komentar untuk "Cara Memasukkan Gambar di HTML"

  1. Unknown14 Desember 2017 10.44

    tutorial yg sangat membantu
    My blog

    BalasHapus
    Balasan
    1. AneIqbal9 Oktober 2018 21.37

      Alhamdulillah.. senang bisa membantu gan.
      Makasih kunjungannya gan.

      Hapus
  2. Unknown18 September 2018 23.40

    Sangat membantu sekali untuk para pemula memasukkan gambar di html. Tutorialnya lengkap. Semoga bermanfaat.
    Kunjungi juga http://www.atmaluhur.ac.id dan https://gianskr.mahasiswa.atmaluhur.ac.id/

    BalasHapus
    Balasan
    1. AneIqbal9 Oktober 2018 21.36

      Alhamdulillah.. senang bisa membantu kak.
      Makasih kunjungannya kak.

      Hapus

Silakan berkomentar dengan kalimat yang bijak.