Bagaimana tag untuk menyisipkan gambar pada HTML?

Dalam tutorial ini kita akan belajar bagaimana memasukkan gambar ke dalam html. Gambar dapat meningkatkan desain dan tampilan halaman web.

Memasukkan Gambar ke Halaman Web

untuk memasukkan gambar ke halaman web, gunakan tag gambar. Tag gambar (img) tidak memiliki tag penutup.

Dua atribut utama yang diberikan ke tag img adalah src, src singkatan dari source yaitu sumber gambar dan alt atau alternative text yaitu teks alternatif yang mendeskripsikan gambar.

<img src="images/world.png" alt="Hello World">
Code language: HTML, XML (xml)

kita juga bisa menampilkan gambar dari URL web:

<img src="https://i.imgur.com/YZ2FaZU.png" alt="Airports Around the World">
Code language: HTML, XML (xml)

Atribut src

Gambar secara teknis tidak dimasukkan ke dalam halaman HTML, gambar hanya disisipkan atau ditautkan ke halaman HTML. Jadi saat pertama halaman web dibuka, browser mengambil gambar dari server web dan memasukkannya ke dalam halaman.

Kita juga bisa menambahkan gambar langsung di dalam halaman menggunakan base64:

<img src="data:image/png;base64,ibIOK..." alt="Hello World">
Code language: HTML, XML (xml)

Cara membuat gambar menjadi link di html cukup letakkan tag <img> di dalam tag <a>.

baca juga : membuat link pada html

Atribut alt

Teks alternatif digunakan oleh pembaca layar jika pengguna tidak dapat melihatnya karena koneksi lambat atau kesalahan pada atribut src misal gambarnya tidak ada dan alt dibaca oleh mesin pencari. Karena itu penting untuk menulis teks alternatif yang bagus untuk gambar.

Gambar adalah salah satu media yang paling sering dimasukkan di halaman web. Dengan menambahkan gambar maka tampilan halaman web akan semakin menarik, selain itu gambar juga bisa mempermudah pembaca dalam memahami konten web.

Saat ini terdapat banyak format gambar yang berkembang. Format gambar yang paling sering digunakan adalah PNG, JPG dan JPEG. Hal tersebut dikarenakan ketiga format tersebut disupport dan dapat ditampilkan oleh semua web browser saat ini.

Cara Menambahkan Gambar di HTML

Untuk menampilkan atau menambahkan sebuah gambar di HTML maka tag yang digunakan adalah tag <img>. Lalu ditambahkan atribut src yang berfungsi untuk menentukan di mana lokasi gambar tersebut tersimpan. Elemen img yang berasal dari kata image merupakan elemen tunggal atau void element. Jadi penulisannya tidak memerlukan tag penutup. Untuk lebih jelasnya berikut format penulisan kodenya:

<img src="lokasi_gambar/nama_gambar.png" />

Penulisan value pada src (teks yang ada dalam tanda petik dua “”) harus benar dan dapat diakses. Karena jika salah pada penulisan value tersebut maka gambar tidak akan tampil. Simak juga materi lainnya seperti cara membuat list di html.

Cara Penulisan Value pada Atribut src

Kita dapat menampilkan gambar dari berbagai sumber baik dari URL internet atau dari folder kita.

1. Sumber gambar dari folder atau direktori komputer.

Jika gambar terletak pada folder yang sama dengan file HTML yang menampilkan gambar tersebut maka kita hanya perlu menulis nama filenya. Contoh kode di bawah ini disimpan dengan nama file “index.html” di folder praktek. Kode HTML tersebut menampilkan gambar bernama “html5” dengan ekstensi “.png” yang berada di folder yang sama dengan file “index.html” yaitu folder praktek.

Jika gambar terletak pada folder yang berbeda dengan file HTML tetapi folder tersebut masih berada di dalam maka kita harus menambahkan nama folder tempat gambar tersebut. Contoh kode di bawah ini disimpan dengan nama index.html di folder praktek. Kode HTML-nya menampilkan gambar yang berada di folder bernama “baru” dengan nama gambar “html5” dan ekstensi “.png”. Jadi file HTML dan gambar berada di folder yang berbeda.

Jika gambar terletak di luar folder maka ditambahkan “../” yang artinya “naik satu direktori”. Jika berada di luar direktori sebanyak 2 tingkat maka menjadi “../../” yang artinya “naik dua direktori” dan seterusnya. Contoh kode index.html yang berada di dalam folder praktek menampilkan gambar “html5.png” yang berada 1 tingkat di luar folder praktek.

2. Sumber gambar dari website

Jika sumber berasal dari website online (URL) maka kita harus menulis lokasi gambar secara lengkap mulai dari http:// atau https:// hingga ekstensinya. URL lokasi gambar dari suatu halaman web dapat kita dapatkan dengan cara klik kanan pada gambar di halaman web tersebut lalu klik “copy image address”. Contohnya kita akan menampilkan logo website itkoding di file HTML kita.

<!DOCTYPE html>
<html>
 <head>
  <title>Gambar dari Web Online</title>
 </head>
<body>
    <img src="https://itkoding.com/wp-content/themes/itk/img/header.png">
</body>
</html>

Selain atribut src, elemen <img> juga memiliki atribut lainnya yang memiliki fungsi berbeda. Pelajari juga cara membuat tabel di html.

Atribut-Atribut untuk Elemen <img>

Elemen <img> memiliki beberapa atribut khusus yang dapat digunakan untuk mengatur bagaimana gambar ditampilkan. Atribut tersebut adalah src, alt, height, width, crossorigin, ismap, longdesc, sizes, srcset dan usemap. Atribut-atribut tersebut valid untuk HTML5. Namun, ada juga atribut yang sudah tidak valid yang sangat populer sebelumnya yaitu align, border, hspace dan vspace.

Pada materi belajar HTML dasar ini, kita hanya akan membahas atribut src, alt, height dan width karena 4 atribut tersebut sudah mampu mengatur gambar yang akan ditampilkan.

Atribut alt

Atribut

<!DOCTYPE html>
<html>
 <head>
  <title>Gambar dari Web Online</title>
 </head>
<body>
    <img src="https://itkoding.com/wp-content/themes/itk/img/header.png">
</body>
</html>

Atribut alt sangat direkomendasikan untuk dimasukkan dan diisi karena akan membantu mengoptimasi search engine seperti Google, Bing dan lainnya. Dalam SEO, dianjurkan untuk mengisi alt sesuai dengan kata kunci dan diskripsi gambar yang ditampilkan secara singkat. Dengan kata lain, alt merupakan diskripsi singkat sebuah gambar.

Contoh penggunaan atribut alt

<!DOCTYPE html>
<html>
 <head>
  <title>html5</title>
 </head>
<body>
  <img src="html5.png" alt="logo html5">
  <img src="html5.png">
</body>
</html>

Hasil tampilan pada browser:

Penjelasan: Pada contoh di atas kita menampilkan gambar logo HTML5. Kita dapat menuliskan pada alt diskripsi singkat tentang gambar yang kita tampilkan. Jika dilihat pada web browser, gambar dengan atribut alt dan gambar yang tidak menggunakan alt memiliki tampilan yang sama dan tidak memiliki perbedaan dalam tampilan. Hal ini karena gambar berhasil ditampilkan oleh browser. Untuk mengetahui perbedaannya kita dapat lihat di praktek selanjutnya di bawah ini.

Contoh penggunaan alt pada gambar yang gagal di tampilkan:

<!DOCTYPE html>
<html>
 <head>
  <title>html5</title>
 </head>
<body>
  <img src="tidak-ada-gambar.png" alt="ini isi altnya">

  <br><br><br>

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

Hasilnya:

Penjelasan: Pada percobaan ini tidak tampil gambarnya. Disini terlihat bahwa jika menggunakan atribut alt gambar yang tidak tampil digantikan dengan teks alt, sedangkan jika tidak menggunakan alt tidak ada teks penggantinya.

Atribut width dan height

Atribut width dan height digunakan untuk mengatur ukuran gambar (size) di HTML. Atribut width digunakan untuk mengatur ukuran lebar gambar yang ditampilkan sedangkan atribut height akan mengatur ukuran tinggi gambar. Secara default, web browser akan menampilkan gambar sesuai dengan ukuran aslinya.

Value dari atribut width dan height adalah angka dalam ukuran pixel. Jadi kita tidak perlu menambahkan huruf “px” di belakang angka.

Contoh penggunaan width dan height:

<!DOCTYPE html>
<html>
 <head>
  <title>Kode HTML width dan height</title>
 </head>
<body>
  <img src="html5.png" alt="logo html5">
  <img src="html5.png" alt="logo html5" width="200" height="200">
  <img src="html5.png" alt="logo html5" width="100" height="50">
</body>
</html>

Hasilnya:

Penjelasan: Pada contoh kode di atas, ukuran asli lebar gambar (width) adalah 225px. Kita dapat mengubah ukuran yang tampil pada HTML dengan menentukan width dan height-nya.

Mengubah ukuran gambar dengan menggunakan width dan height sangat tidak dianjurkan karena gambar hanya diperkecil pada penampilan sedangkan gambar yang ditransfer tetap dalam ukuran asli.

Sangat disarankan agar kita mengisi width dan height setiap memasukkan gambar di HTML sesuai dengan ukuran asli gambar. Baca juga struktur dasar html.

Atribut Populer Lainnya

Atribut align: Atibut ini berfungsi untuk mengatur posisi gambar yaitu top, bottom, middle, left dan right. Namun atribut align tidak disarankan untuk dipakai karena sudah ditinggalkan dan tidak disupport di HTML5.

Atribut border: Atribut ini biasa juga digunakan pada elemen img. Sintak

<!DOCTYPE html>
<html>
 <head>
  <title>Gambar dari Web Online</title>
 </head>
<body>
    <img src="https://itkoding.com/wp-content/themes/itk/img/header.png">
</body>
</html>

Untuk mengatur posisi gambar disarankan menggunakan CSS karena semua yang berhubungan pada tampilan atau style akan diatus di CSS. Tentang hal ini kita akan pelajari pada tutorial CSS tersendiri nantinya. Jika ada pertanyaan tentang materi gambar di HTML ini silahkan kirimkan komentar di kolom komentar.

Bagaimana cara menyisipkan gambar dalam HTML?

Apa tag untuk menampilkan gambar?

Apa itu tag img?

3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?