Tag HTML IMG memiliki atribut apa saja?

Question

Website tanpa gambar ibarat sayuran tanpa garam, akan terasa hambar. Sebab, kemungkinan website akan terasa membosankan, sulit dipahami, dan tidak menarik.

Table of Contents Show

Cara Memasukkan Gambar di HTML
Langkah 1: Memastikan Format Gambar Sudah Sesuai
Langkah 2: Memasukkan Atribut Sumber Gambar pada Tag HTML Images
Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images
Langkah 4: Mencantumkan Keterangan Gambar
Cara Mengatur Gambar di HTML
Cara 1: Mengubah Dimensi Gambar
Cara 2: Memberikan Bingkai Gambar
Cara 3: Mengatur Posisi Gambar
Bonus: Cara Membuat Floating Image di HTML
Percantik Website dengan Gambar yang Menarik
Sebutkan dan Jelaskan atribut apa saja yang digunakan pada tag img?
Apa saja atribut HTML?
Manakah yang termasuk atribut untuk gambar atau IMG adalah?
3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?

Oleh karena itu, memasukkan gambar pada website cukup penting. Website akan menjadi lebih cantik dan dapat menjalankan tujuannya dengan maksimal. Bahkan, kombinasi gambar dan teks 323% lebih efektif mengarahkan pengunjung ke action yang diharapkan

Sekarang, mungkin Anda bertanya-tanya bagaimana cara memberikan gambar ke website. Salah satu caranya yaitu dengan memahami cara memasukkan gambar di HTML.

Kenapa HTML adalah pilihannya? Alasannya, HTML merupakan salah satu tag yang paling umum digunakan untuk membangun struktur website. Bahkan, 90,4% website di dunia menggunakan HTML.

Nah, Anda sudah datang ke tempat yang tepat. Pada artikel ini, Anda akan mengetahui cara memasukkan gambar di HTML. Lengkap dengan cara mengaturnya supaya gambar lebih cantik dan fungsional.

Cara Memasukkan Gambar di HTML

Supaya gambar bisa tampil pada website, mari simak beberapa cara memasukkan gambar di HTML berikut ini dengan HTML editor manapun yang Anda sukai:

Langkah 1: Memastikan Format Gambar Sudah Sesuai

Langkah pertama yaitu memilih format gambar yang tepat untuk website Anda. Pastikan gambar yang ingin Anda masukkan ke dokumen HTML memiliki format yang sesuai. Jika format gambar tidak kompatibel, kemungkinan besar gambar akan gagal ditampilkan.

Berikut format gambar yang dapat disematkan pada dokumen HTML.

Format Gambar	Ekstensi Gambar
APNG	.apng
GIF	.gif
ICO	.ico atau .cur
JPEG	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	.png
SVG	.svg

Langkah 2: Memasukkan Atribut Sumber Gambar pada Tag HTML Images

Untuk menyematkan gambar pada website, Anda perlu menggunakan tag <img> pada dokumen HTML. Sebab, cara memasukkan gambar di HTML berbeda dengan menempel gambar pada dokumen biasa. Apa sih perbedaannya?

HTML tidak bisa langsung menampilkan gambar begitu saja. Dengan kata lain, HTML harus mengambil gambar dari suatu tempat penyimpanan atau direktori (drive, website, dan lain-lain). Oleh karena itu, diperlukan atribut untuk memanggil gambar tersebut agar bisa tampil pada browser.

Atribut untuk menarik gambar dari server penyimpanan tersebut dinamakan Src. Isi dari atribut ini bisa berupa link menuju direktori ataupun nama file gambar.

Untuk menggunakan atribut Src, Anda cukup memasukkan tag berikut.

<img src="langit.png">

Sedangkan pada text editor, Anda bisa langsung menempelkan syntax ini. Mudah, bukan?

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="langit.png">
</body>
</html>

Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images

Atribut Alt berfungsi untuk memberikan teks alternatif pada gambar. Jadi, jika karena sebab tertentu gambar gagal ditampilkan, teks alternatif akan muncul sehingga pengunjung website tetap bisa mengidentifikasi gambar.

Selain itu, alt text pada gambar juga mampu meningkatkan ranking website. Sebab, alt text memudahkan mesin pencarian dalam memahami deskripsi dan konteks gambar. Dengan begitu, konten website pun akan lebih mudah diindeks dalam SERP.

Baca Juga: Panduan Lengkap Memaksimalkan Image SEO untuk Website

Supaya gambar memiliki alt text, Anda perlu menambahkan atribut alt text di dalam tag <img>.

<img src="langit.png" alt="Gambar_Langit">

Untuk penggunaan atribut alt text dalam dokumen HTML bisa Anda temukan pada cara di bawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="langit.png" alt="Gambar_Langit">
</body>
</html>

Langkah 4: Mencantumkan Keterangan Gambar

Dari poin sebelumnya, Anda sudah mengerti penggunaan teks alternatif pada gambar. Namun, bagaimana jika Anda ingin mencantumkan keterangan yang bisa pengunjung lihat saat cursor mengarah ke gambar?

Jawabannya yaitu dengan menambahkan atribut title di dalam tag <img>. Setelah menggunakan atribut ini, maka gambar bisa memiliki tooltips atau pesan yang muncul saat cursor diarahkan ke objek. Selain itu, halaman website juga tetap luas karena keterangan gambar tidak memakan tempat.

Tooltips pada dokumen HTML bisa Anda dapatkan melalui syntax ini.

<img src="langit.png" alt="Gambar_Langit" title="Ini adalah langit pagi">

Penempatan syntax atribut title silakan melihat contoh berikut.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="langit.png" alt="Gambar_Langit" title="Ini adalah langit pagi">
</body>
</html>

Baca Juga: Gambar Tidak Muncul di Web? Ini Dia Penyebab dan Solusinya!

Cara Mengatur Gambar di HTML

Sampai di sini, Anda sudah bisa memasukkan gambar di HTML. Namun, itu saja belum cukup. Penting untuk mengetahui cara mengatur gambar di HTML supaya gambar tampil lebih menawan dan tentunya sesuai dengan kebutuhan website.

Yuk simak beberapa cara mengatur gambar di HTML berikut in!

Cara 1: Mengubah Dimensi Gambar

Untuk mengatur dimensi gambar, gunakan atribut style. Atribut style mengandung elemen width dan height. Elemen width berfungsi untuk memodifikasi lebar gambar, sedangkan elemen height untuk mengubah tinggi gambar.

Atribut style cukup sederhana, berikut syntax-nya.

<img src="langit.png" alt="Gambar_Langit" style="width:500px;height:400px;">

Cara menggunakan atribut style juga mudah, cukup tempelkan kode ini pada text editor Anda.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="langit.png" alt="Gambar_Langit" style="width:500px;height:400px;">
</body>
</html>

Penting diingat, ketetapan ukuran gambar dalam dokumen HTML adalah pixel (px). Jadi, meski Anda tidak mencantumkan satuan dalam atribut Width dan Height, browser akan tetap menampilkan gambar dalam ukuran pixel.

Cara 2: Memberikan Bingkai Gambar

Ingin membingkai atau memberikan garis tepi pada gambar? Anda bisa menggunakan atribut border. Hasilnya kira-kira seperti pada gambar di bawah ini.

Anda juga bisa mengatur sendiri level ketebalan border sesuai keinginan, lho. Caranya yaitu dengan mengubah nilai di dalam atribut border. Atribut border itu sendiri dapat ditulis dengan syntax berikut:

<img src="langit.png" border="5">

Secara lengkapnya, Anda bisa memasukkan syntax ini pada text editor.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="langit.png" border="5">
</body>
</html>

Cara 3: Mengatur Posisi Gambar

Supaya gambar berada pada sisi yang tepat, Anda harus mengaturnya. Caranya yaitu dengan menggunakan atribut align. Atribut align akan membuat gambar berada pada posisi yang Anda inginkan. Teks yang ditampilkan pun akan menyesuaikan dengan penempatan gambar.

Anda bisa menempatkan gambar ke berbagai posisi: kiri, kanan, tengah, atas, dan bawah. Namun, setiap posisi memiliki syntax yang sedikit berbeda. Berikut adalah kode HTML untuk mengatur gambar ke masing-masing posisi.

<img src="langit.png" align="left">
<img src="langit.png" align="right">
<img src="langit.png" align="middle">
<img src="langit.png" align="top">
<img src="langit.png" align="bottom">

Untuk penerapan syntax di atas dalam dokumen HTML bisa dilihat pada contoh di bawah.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p>Ini adalah contoh gambar langit:<img src="langit.png" style="width:500px;height:400px;" align="middle"> dengan align="middle"</p>
</body>
</html>

Baca Juga: Cara Membuat JavaScript di HTML Sederhana

Bonus: Cara Membuat Floating Image di HTML

Pada poin sebelumnya, Anda telah memahami cara mengatur posisi gambar dengan atribut align. Sayangnya, atribut ini memiliki kelemahan seperti eksekusi gambar yang kurang rapi dan atribut ini juga tidak tersedia di versi HTML5.

Tapi, Anda tidak perlu khawatir karena hal tersebut bisa diakali dengan menggunakan property float. Atribut ini membuat teks berada pada posisi yang sesuai tanpa menabrak gambar. Teks dan gambar pun menjadi lebih rapi. Berbeda halnya dengan atribut align. Contohnya seperti gambar di bawah.

Cara membuat floating image pun cukup mudah. Anda hanya perlu menyisipkan property float di dalam atribut style.

<p>Floating image sebelah kanan<img src="langit.png" style="float:right;width:42px;height:42px;"></p>
<p>Floating image sebelah kiri<img src="langit.png" style="float:left;width:42px;height:42px;"></p>

Percantik Website dengan Gambar yang Menarik

Nah, sekarang Anda sudah memahami cara memasukkan dan mengatur gambar di HTML. Namun untuk lebih memudahkan, kami juga sudah merangkum pembahasan di atas untuk Anda.

Atribut	Fungsi
Src	Memberi tahu lokasi penyimpanan suatu gambar
Alt	Memberikan teks alternatif pada gambar
Title	Mencantumkan tooltips pada gambar
Width	Mengatur dimensi lebar pada gambar
Height	Mengatur dimensi tinggi pada gambar
Border	Memberikan garis tepi pada gambar
Align	Mengatur posisi gambar
Property Float	Mengatur gambar dan menyesuaikan posisi teks di sekitar gambar

Dengan menggunakan kode HTML di atas, Anda sudah bisa memasukkan dan mengatur gambar di website sesuai keinginan. Tapi penting diingat, gambar juga harus sesuai dengan konteks konten agar website tak sekadar cantik tapi juga informatif.

Nah, untuk membantu Anda menemukan gambar yang tepat, kami sudah mengumpulkan daftar website penyedia gambar gratis terbaik pada artikel berikut → 6 Website Penyedia Gambar Gratis untuk Konten Website Anda.

Semoga artikel ini membantu Anda untuk mempercantik website dengan gambar yang menarik, ya! Akhir kata, selamat mencoba!

Sebutkan dan Jelaskan atribut apa saja yang digunakan pada tag img?

Atribut Untuk Tag <img>.

src – menentukan alamat lokasi atau url gambar yang akan ditampilkan..

alt – membuat teks alternatif gambar..

width – menentukan lebar gambar..

height – menentukan tinggi gambar..

style – menentukan style atau gaya dari gambar..

Apa saja atribut HTML?

Terdapat 2 jenis atribut pada HTML yaitu atribut global dan atribut khusus. Atribut global dapat digunakan pada semua tag atau elemen HTML. Sedangkan atribut khusus hanya dapat digunakan untuk tag yang disupport atribut tersebut.

Manakah yang termasuk atribut untuk gambar atau IMG adalah?

Ada beberapa atribut yang sering digunakan pada tag <img> :.

alt untuk teks alternatif untuk gambar;.

width untuk menentukan lebar gambar;.

height untuk menentukan tinggi gambar;.

style untuk menentukan style CSS untuk gambar..

3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?

Atribut Alt berfungsi untuk memberikan teks alternatif pada gambar. Jadi, jika karena sebab tertentu gambar gagal ditampilkan, teks alternatif akan muncul sehingga pengunjung website tetap bisa mengidentifikasi gambar.

Cara Belajar Apa Img src HTML Elemen HTML