Estimasi Waktu Baca: 5 menit

Pemanasan

Website beserta konten di dalamnya akan tampak membosankan bila hanya berisi kumpulan teks, seperti artikel contohnya, sangat sulit bagi para pembaca untuk bertahan pada suatu artikel bilamana hanya disuguhi teks dari awal hingga akhir.

Lantas bagaimana agar para pembaca ini tidak mudah bosan?

Sebenarnya ada beberapa poin untuk meningkatkan ketertarikan para pembaca agar nyaman berada di konten yang kita buat, salah satunya adalah dengan memberikan gambar pada konten.

Dengan adanya gambar, website maupun konten di dalamnya akan terlihat lebih menarik dan tidak terkesan kaku. Selain itu otak kita juga akan lebih mudah mencerna bila suatu informasi tersebut berupa visual seperti gambar dibandingkan dengan hanya berupa teks sepenuhnya.

Nah pertanyaannya sekarang,

Bang bagaimana cara untuk menampilkan gambar pada website yang kita buat? Apakah ada tag atau elemen tertentu yang dapat digunakan untuk melakukan hal tersebut? Lalu ekstensi gambar apa saja yang dapat ditampilkan pada website? dan……

Cukup, cukup sampai di situ saja pertanyaannya, saya tidak akan langsung menjawabnya di sini, untuk mendapatkan jawabannya kalian perlu baca sendiri tutorial di bawah ini ya, mari silahkan…

Menampilkan Gambar di HTML

Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element).

Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber. Nilai atau isi dari atribut src merupakan alamat lokasi (path) atau alamat url dari gambar yang ditampilkan.

Untuk bagian penutup tag, boleh ditutup menggunakan tanda slash (/) boleh juga tidak. Saran saya pakai tanda slash saja.

Contoh Penerapan

Buka teks editor, buat file dengan nama index.html dan tulis seperti di bawah ini.


<!DOCTYPE html>
<html>
<head>
	<title>Beranda</title>
</head>
<body>
	<h1>Selamat Datang di Website Saya!</h1>
	<img src="mobil.jpg" />
</body>
</html>

Keluaran:

Pastikan lokasi dari gambar benar, untuk contoh di atas karena gambar masih dalam satu folder dengan file index.html maka hanya dituliskan nama gambar beserta ekstensinya (“mobil.jpg”).

Jika nama atau alamat gambar yang ditentukan salah atau gambar tidak ada di alamat yang dimaksudkan, maka gambar tidak akan ditampilkan.

Sedangkan bila gambar berbeda folder dengan dokumen HTML yang akan menampilkannya, maka cara penulisannya sekaligus dengan nama folder yang bersangkutan.

Misalnya file gambar terletak di folder assets/images/. Maka cara penulisannya sebagai berikut:


<img src="assets/images/mobil.jpg" />

Nah sekarang coba kalian jalankan, bila berhasil mari lanjutkan belajarnya, bila gagal coba ulangi kembali.

Atribut Untuk Tag <img>

Atribut untuk tag <img> dapat mencakup atribut global dan atribut event. Namun untuk materi kali ini akan saya informasikan beberapa atribut yang umumnya sering digunakan bersamaan dengan tag <img>.

Atribut-atribut ini yaitu:

  • 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

Atribut src

Atribut src sudah dijelaskan sebelumnya, tapi sengaja saya masukkan kembali sebagai pengingat bahwa betapa pentingnya atribut ini. Atribut src merupakan atribut khusus bahkan wajib ada saat tag <img> didefinisikan.

Atribut src bagaikan jantung dari tag <img>. Bila tidak ada atribut src maka tag <img> hanya seperti tag kosong yang tidak berguna.


<!DOCTYPE html>
<html>
<head>
	<title>Beranda</title>
</head>
<body>
	<h1>Selamat Datang di Website Saya!</h1>
	<img src="kucing.jpg" />
</body>
</html>

Keluaran:

Atribut alt

Atribut alt adalah atribut yang berfungsi untuk menampilkan teks alternatif bilamana gambar yang bersangkutan gagal ditampilkan.


<!DOCTYPE html>
<html>
<head>
	<title>Beranda</title>
</head>
<body>
	<h1>Selamat Datang di Website Saya!</h1>
	<img src="" alt="Gambar Mobil" />
</body>
</html>

Pada kode di atas kita coba kosongi nilai dari atribut src dan sebagai gantinya kita tambahkan atribut alt dengan nilai “Gambar Mobil” untuk teks alternatif yang akan ditampilkan.

Atribut width dan height

Kedua atribut ini juga sering digunakan pada tag <img>, keduanya berfungsi untuk mengatur lebar dan tinggi dari suatu elemen, khusus di sini elemennya berupa gambar.


<!DOCTYPE html>
<html>
<head>
	<title>Beranda</title>
</head>
<body>
	<p>	
		Gambar dengan ukuran asli<br />
		<img src="kucing.jpg"/><hr />
		Gambar dengan ukuran yang sudah dikustom<br />
		<img src="kucing.jpg" width="200px" height="150px" />
	</p>
</body>
</html>

Keluaran:

Sebenarnya ada dua cara untuk mengatur ukuran gambar yang ditampilkan, cara pertama dengan menggunakan cara di atas, yang kedua bisa melalui atribut di bawah ini…..

Atribut style

Atribut ini berfungsi untuk menentukan gaya atau style dari suatu elemen, tak terkecuali elemen berupa gambar.

Contoh Penerapan


<!DOCTYPE html>
<html>
<head>
	<title>Beranda</title>
</head>
<body>
	<img src="kucing.jpg" style="width: 200px; height: 150px;" />
	<img src="kucing.jpg" style="width: 200px; height: 150px; border: 5px solid green;" />
	<img src="kucing.jpg" style="width: 200px; height: 150px; border: 5px solid green; border-radius: 100%" />
</body>
</html>

Keluaran:

Sederhananya dengan atribut style, kita dapat menentukan bagaimana gambar akan ditampilkan.

Format File Gambar yang Didukung HTML

Dalam dunia teknologi informatika, terdapat banyak sekali macam ekstensi atau format file gambar, yang mana kegunaan dari tiap format sangat beragam sesuai dengan tujuannya.

Tidak semua format file gambar didukung oleh HTML. Tercatat hanya 7 ekstensi yang dapat ditampilkan di HTML, diantaranya

Nama FormatKepanjanganEkstensi
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
WebPWeb Picture.webp

Beberapa format file gambar terkadang bisa ditampilkan atau tidak bergantung pada versi browser yang digunakan.

Misalnya untuk format file WebP, yang merupakan format file buatan Google. Format file ini terbilang baru, jadi ketika kita menggunakan browser versi lama bisa jadi gambar yang menggunakan format ini tidak bisa ditampilkan.

Penerapan Lain dengan Gambar

Adapun contoh penerapan lain yang bisa kita lakukan dengan memanfaatkan file gambar.

Membuat Link Dengan Gambar

Percobaan ini sebelumnya sudah pernah dibahas pada materi sebelumnya di ….

Jadi intinya selain dengan teks, link juga bisa dikaitkan dengan sebuah gambar.

Contoh:


<!DOCTYPE html<
<html<
<head<
	<title<Beranda</title<
</head<
<body<
	<p<Klik gambar berikut untuk menuju halaman github kopiding.in</p<
	<a href="https://github.com/Kopidingin"<<img src="github-logo.svg" width="150px" height="100px" /<</a<
</body<
</html<

Kode di atas akan mengarahkan pengguna ke halaman github kopiding.in dengan cara menekan gambar logo github.

Hasil:

Membuat Link Pada Bagian Gambar

Kita dapat juga membuat link pada beberapa bagian gambar, berbeda dengan sebelumnya yang mana seluruh bagian gambar telah dikaitkan dengan link.

Untuk melakukan hal ini kita memerlukan dua tag yaitu <map> dan <area>


<!DOCTYPE html>
<html>
<head>
	<title>Beranda</title>
</head>
<body>
	<img src="meja-kerja.jpg" usemap="#imagemap">
	<map name="imagemap">
		<area shape="rect" coords="334,263,467,350" title="laptop" href="#">
		<area shape="rect" coords="99,328,147,384" title="pensil" href="#">
		<area shape="rect" coords="277,307,316,344" title="gelas" href="#">
	</map>
</body>
</html>

Hasilnya,

Membuat Gambar Background

Gambar juga sering digunakan sebagai background, untuk dapat melakukan hal ini perlu adanya sentuhan CSS yang dapat diterapkan melalui tag style, sebagai berikut:


<!DOCTYPE html>
<html>
<head>
	<title>Beranda</title>
</head>
<body style="background-image: url(meja-kerja.jpg);">
	<h1>Belajar Gambar di HTML</h1>
	<p>Selamat datang di website pertama saya!</p>
</body>
</html>

Hasilnya,