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.

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:

Seperti itu.

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

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

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.

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

Barangkali Anda tertarik baca:
- Tutorial HTML untuk Pemula: Membuat Tabel di HTML
- Tutorial HTML untuk Pemula: Menambahkan Komentar di HTML
- Tutorial HTML untuk Pemula: Membuat Form di HTML

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:

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:

Sekarang, kita coba atur heightnya tapi hapus widthnya.

<img src="image/gambar-posting.png" alt="ini teks dari atribut alt.." height="300px" />

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.

AneIqbal

Cara Memasukkan Gambar di HTML