Pada sebuah halaman website, gambar merupakan unsur yang penting yang mampu membuat website menjadi lebih indah. Semua website profesional pasti memiliki gambar pada halamannya. Karena jika tidak ada gambar, maka sebuah website sangat tidak menarik bagi pengunjung. Di sini kita akan belajar HTML yaitu menampilkan gambar di HTML dengan tag <img>.
Tag <img> merupakan kependekan dari image. Jadi, tag <img> ini berfungsi untuk menambahkan gambar di HTML. Tag <img> memiliki banyak atribut, seperti src, alt, dll yang akan kita bahas sekarang.
Cara Menampilkan Gambar di HTML
Ada beberapa atribut pada tag img yang perlu (dan wajib) Anda gunakan supaya gambar pada website Anda lebih optimal. Berikut adalah beberapa atribut yang penting pada tag img.
- src : Atribut src merupakan kependekan dari source. Atribut ini wajib digunakan karena berfungsi menampilkan gambar karena kita akan meletakkan sumber atau nama gambar di atribut src ini.
- alt : Pernahkah Anda membuka sebuah website tapi karena koneksi internet Anda yang lambat atau kendala lain, gambar pada website tersebut tidak terbuka dan muncul tulisan ? Nah fungsi dari atribut alt adalah untuk menampilkan tulisan pada gambar ketika tidak berhasil ditampilkan.
- title : Atribut ini berfungsi untuk memberi keterangan ketika cursor mouse berada pada gambar.
- width : Anda pasti membutuhkan atribut ini untuk mengatur ukuran lebar pada gambar.
- height : Atribut ini berfungsi untuk mengatur tinggi gambar. Anda juga bisa belajar CSS tentang mengatur lebar dan tinggi.
Sekarang, langsung kita masuk praktiknya. Buatlah file dengan nama gambar.html dan letakkan di folder manapun. Setelah itu, letakkan gambar dengan nama makinrajin.png di dalam folder yang sama dengan file gambar.html. Contoh :
Setelah membuat file gambar.html dan meletakkan gambar dalam direktori yang sama, sekarang perhatikan coding di bawah ini dan ketikkan di file gambar.html.
[sourcecode language=”plain”]
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML – Makinrajin</title>
</head>
<body>
<img src="makinrajin.png">
</body>
</html>
[/sourcecode]
Bisa dilihat hasilnya dengan cara double click pada gambar.html dan akan muncul hasil seperti di bawah (tampilan tergantung gambar Anda) :
Lalu, coba modifikasi syntax menjadi seperti di bawah ini :
[sourcecode language=”plain”]
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML – Makinrajin</title>
</head>
<body>
<img src="makinrajin.png" width="300" height="70">
</body>
</html>
[/sourcecode]
Di sini kita memodifikasi gambar dengan menambahkan atribut width dan height. Artinya kita memberikan tinggi sebesar 70 px dan lebar sebesar 300 px. Maka hasilnya akan seperti di bawah ini :
Anda juga bisa hanya menggunakan salah satu atribut tersebut seperti width atau height saja, tergantung kebutuhan. Selanjutnya kita akan mencoba menambahkan atribut title pada tag img menjadi seperti di bawah ini :
[sourcecode language=”plain”]<img src="makinrajin.png" title="Ini title" width="300" height="70">[/sourcecode]
Maka ketika cursor berada pada gambar, akan muncul tulisan “ini title”. Berikut hasilnya :
Sekarang kita coba untuk menguji atribut alt. Atribut alt itu berfungsi untuk menampilkan tulisan ketika gambar tidak berhasil dimuat (mungkin karena koneksi internet yang lambat atau nama dan path gambar yang salah).
Kita akan coba mengubah nama gambar menjadi salah untuk mengetahui fungsi atribut alt. Coba ubah tag img menjadi seperti di bawah :
[sourcecode language=”plain”]<img src="gambar.png" alt="Ini alt">[/sourcecode]
Gambar.png kan tidak ada pada folder yang telah kita buat sebelumnya, jadi otomatis gambar tidak akan tampil dan akan keluar hasil seperti di bawah :
Jika gambar tidak berada pada folder yang sama, Anda bisa memanggil gambar tersebut dengan menggunakan “../”. Jadi penerapannya adalah sebagai berikut :
[sourcecode language=”plain”]<img src="../gambar.png">[/sourcecode]
Artinya adalah kita memanggil gambar yang berada 1 tingkatan di luar folder milik file .html. Jika letak gambar berada 2 tingkatan di luar file .html, Anda bisa menambahkan 2 kali “../”, yaitu seperti di bawah :
[sourcecode language=”plain”]<img src="../../gambar.png">[/sourcecode]
Anda bisa membuat gambar tersebut menjadi bisa diklik dan mengarah ke halaman lain maupun domain lain dengan cara menambahkan tag <a> di luar gambar. Contoh penggunaan link pada gambar adalah seperti di bawah ini :
[sourcecode language=”plain”]<a href=”url link”><img src=”url gambar”></a>[/sourcecode]
Jadi, ketika gambar diklik akan mengarah ke url pada tag <a>. Untuk lebih jelasnya, Anda bisa baca panduan cara membuat link pada HTML. Demikianlah cara menampilkan gambar di HTML dengan menggunakan tag <img>. Apabila ada pertanyaan, silahkan tanyakan melalui kolom komentar.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development