Penggunakan gambar dimaksudkan untuk membuat aplikasi web dan juga websitenya agar tampak hidup. Gambar merupakan bagian yang sangat penting untuk sebuah halaman web. Pentingnya kalau tidak ada gambar disuatu halaman web maka halaman web itu sendiri terlihat gersang dan tidak menarik pengunjung sama sekali. Apa lagi website-website yang membahas tentang gaya hidup, tutorial, dan website ini juga harus menyediakaan gambar hasil tutorial agar pengunjung senang dan ngerti hasilnya.
Pengertian Tag <img>
HTML telah menyediakan tag khusus yang diperuntukan untuk menambahkan gambar pada web yang akan dibuat agar lebih menarik. Tag yang dimaksud disini adalah Tag <img>. Apa itu tag <img>??
Tag <img> adalah salah satu yang kita gunakan untuk menampilkan gambar dengan attribut default-Nya yaitu scr. Semua bentuk format gambar bisa ditampilkan dengan tag image mulai dari format jpg, jpeg, png, gif, tiff, dan bmp. Lihat format tag dalam HTML :
<img src="alamat-gambar-yang-akan-ditampilkan">
Atribut Scr Pada Tag <img>
Atribut scr merupakan atribut default yang harus digunakan pada tag <img>. Fungsinya untuk memanggil dimana lokasi gambar berada. Kita bisa memunculkan gambar dari komputer kita dengan syarat masih dalam satu folder yang sama dengan file tag <img> ini. Bisa juga kita langsung menjalankan dari server, dengan menggunakan domain kita.
Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF. Berikut contoh kode dalam penggunaan tag <img> :
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h1>Belajar menggunakan Tag Gambar</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawL9evvXydr-k_P7z85Pav4p-tCReZFSvGZjIODbtdbPSWlRHnwWbHmZpgF-oIHQfjrEBNvLvHFn7HCl-pZgce5eTjiWtfecBIk5wh33MJcBzP2W38N_U1L4f-A_rdh668nGkyZIhcg/s1600/Untitled-1.png" />
</body>
</html>
Lihat hasilnya :
Atribut Alt Pada Tag <img>
Atribut alt singkatan dari alternative description, Atribut ini memiliki peran penting bagi penggunaan tag <img> dimana fungsinya untuk memberikan nama pada gambar yang kita telah tetapkan. Apabila suatu gambar tidak tampil maka atribut alt yang berguna untuk memunculkan nama gambar yang tidak tampil tersebut. Kegagalan tersebut biasanya terjadi karena file pada server tidak tersedia lagi atau masalah koneksi jaringan lambat yang tidak bisa mengunduh gambar tersebut. Berikut contoh kode yang menggunakan atribut alt :
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h2>Belajar Menggunakan Tag Image</h2>
<h4>Cara Menggunakan alt</h4>
<p>apakah berhasil</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawL9evvXydr-k_P7z85Pav4p-tCReZFSvGZjIODbtdbPSWlRHnwWbHmZpgF-oIHQfjrEBNvLvHFn7HCl-pZgce5eTjiWtfecBIk5wh33MJcBzP2W38N_U1L4f-A_rdh668nGkyZIhcg/s1600/Untitled-1.png" alt="logo">
</body>
</html>
dan akan terlihat pada web browser seperti ini :
Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.
Atribut Width dan Height Pada Tag <img>
Untuk atribut widht dan height, mungkin dari artinya kita sudah tahu widht (lebar) dan height (tinggi). Dimana atribut ini kita bisa menyesuaikan besar gambar yang ingin kita tampilkan. Akan tetapi apa bila kualitas gambar tidak memadai maka saat kita buat tampilannya besar maka akan terlihat buram. Untuk itu kita bisa menyesuaikan gambar agar terlihat berkualitas. Berikut contoh penggunaan atribut height dan width :
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<img alt="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawL9evvXydr-k_P7z85Pav4p-tCReZFSvGZjIODbtdbPSWlRHnwWbHmZpgF-oIHQfjrEBNvLvHFn7HCl-pZgce5eTjiWtfecBIk5wh33MJcBzP2W38N_U1L4f-A_rdh668nGkyZIhcg/s1600/Untitled-1.png" height="200" width="100" />
</body>
</html>
Dan Lihat hasilnya :
Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan.
Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan jika kita menetapkan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.
0 komentar:
Bijaklah saat Anda memberikan komentar atau kritik !!