Penggunakan gambar dimaksudkan untuk menciptakan aplikasi web dan juga websitenya semoga tampak hidup. Gambar merupakan bab 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 perihal gaya hidup, tutorial, dan website ini juga harus menyediakaan gambar hasil tutorial semoga pengunjung bahagia dan ngerti hasilnya.
Pengertian Tag <img>
HTML telah menyediakan tag khusus yang diperuntukan untuk menambahkan gambar pada web yang akan dibentuk semoga lebih menarik. Tag yang dimaksud disini yakni Tag <img>. Apa itu tag <img>??
Tag <img> yakni salah satu yang kita gunakan untuk menampilkan gambar dengan attribut default-Nya yaitu scr. Semua bentuk format gambar sanggup 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 dipakai pada tag <img>. Fungsinya untuk memanggil dimana lokasi gambar berada. Kita sanggup memunculkan gambar dari komputer kita dengan syarat masih dalam satu folder yang sama dengan file tag <img> ini. Bisa juga kita eksklusif menjalankan dari server, dengan memakai domain kita.
Untuk teladan arahan HTML tentang image ini, sediakan sebuah gambar yang akan dipakai sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar sanggup berupa JPEG, PNG, maupun GIF. Berikut teladan arahan dalam penggunaan tag <img> :
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h1>Belajar memakai Tag Gambar</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4JMK_sRrOMLhlyDJTgoQIt53m-yo1y4XzztGUy1BcXrSIxecgqP5DL-hC8I3zFhnvrklhdS66hBckE_WiP9Vhw_GYr3oRVmboVKwD0ZuQrodlHZIFy6boFtmmRfaFPVyk1xvHDORv3g/s1600/Untitled-1.png" />
</body>
</html>
Lihat kesannya :
Atribut Alt Pada Tag <img>
Atribut alt akronim dari alternative description, Atribut ini mempunyai tugas penting bagi penggunaan tag <img> dimana fungsinya untuk memperlihatkan nama pada gambar yang kita telah tetapkan. Apabila suatu gambar tidak tampil maka atribut alt yang mempunyai kegunaan untuk memunculkan nama gambar yang tidak tampil tersebut. Kegagalan tersebut biasanya terjadi alasannya yakni file pada server tidak tersedia lagi atau problem koneksi jaringan lambat yang tidak sanggup mengunduh gambar tersebut. Berikut teladan arahan yang memakai 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/AVvXsEi4JMK_sRrOMLhlyDJTgoQIt53m-yo1y4XzztGUy1BcXrSIxecgqP5DL-hC8I3zFhnvrklhdS66hBckE_WiP9Vhw_GYr3oRVmboVKwD0ZuQrodlHZIFy6boFtmmRfaFPVyk1xvHDORv3g/s1600/Untitled-1.png" alt="Penggunakan gambar dimaksudkan untuk menciptakan aplikasi web dan juga websitenya semoga tampa √ Cara Menambahkan Gambar di HTML !">
</body>
</html>
dan akan terlihat pada web browser menyerupai ini :
Atribut alt juga berperan penting untuk mesin pencari menyerupai Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses goresan pena yang ada, Google �tidak mengerti� isi dari gambar tanpa sumbangan 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 sanggup menyesuaikan besar gambar yang ingin kita tampilkan. Akan tetapi apa bila kualitas gambar tidak memadai maka dikala kita buat tampilannya besar maka akan terlihat buram. Untuk itu kita sanggup menyesuaikan gambar semoga terlihat berkualitas. Berikut teladan penggunaan atribut height dan width :
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<img alt="Penggunakan gambar dimaksudkan untuk menciptakan aplikasi web dan juga websitenya semoga tampa √ Cara Menambahkan Gambar di HTML !" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4JMK_sRrOMLhlyDJTgoQIt53m-yo1y4XzztGUy1BcXrSIxecgqP5DL-hC8I3zFhnvrklhdS66hBckE_WiP9Vhw_GYr3oRVmboVKwD0ZuQrodlHZIFy6boFtmmRfaFPVyk1xvHDORv3g/s1600/Untitled-1.png" height="200" width="100" />
</body>
</html>
Dan Lihat kesannya :
Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini alasannya yakni penggunaan atribut width dan height �memaksa� gambar untuk tampil dengan nilai yang kita tetapkan.
Untuk mempertahankan proporsi gambar, namun tetap menciptakan gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan jikalau kita memutuskan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar semoga gambar tetap proporsional.
Sumber http://informasigameindo11.blogspot.com
EmoticonEmoticon