Cara Menampilkan Gambar di HTML Dengan Tag img Beserta Atributnya

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 :
direktori gambar dengan file
Setelah membuat file gambar.html dan meletakkan gambar dalam direktori yang sama, sekarang perhatikan coding di bawah ini dan ketikkan di file gambar.html.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML - Makinrajin</title>
</head>
<body>
<img src="makinrajin.png">
</body>
</html>
Bisa dilihat hasilnya dengan cara double click pada gambar.html dan akan muncul hasil seperti di bawah (tampilan tergantung gambar Anda) :
hasil tag img
Lalu, coba modifikasi syntax menjadi seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML - Makinrajin</title>
</head>
<body>
<img src="makinrajin.png" width="300" height="70">
</body>
</html>
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 :
hasil tag img dengan atribut width
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 :
<img src="makinrajin.png" title="Ini title" width="300" height="70">
Maka ketika cursor berada pada gambar, akan muncul tulisan “ini title”. Berikut hasilnya :
hasil pada tag img diberi atribut title
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 :
<img src="gambar.png" alt="Ini alt">
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 :
fungsi atribut alt
Jika gambar tidak berada pada folder yang sama, Anda bisa memanggil gambar tersebut dengan menggunakan “../”. Jadi penerapannya adalah sebagai berikut :
<img src="../gambar.png">
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 :
<img src="../../gambar.png">
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 :
<a href=”url link”><img src=”url gambar”></a>
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.

Anda ingin memiliki web hosting dengan kualitas server tercepat di Indonesia ? Klik di sini

Leave a Reply

Your email address will not be published. Required fields are marked *