Belajar HTML Part 12: Cara Menambahkan Gambar di HTML (tag image)
Halo Kawan-kawan
Pada Kesempatan kali ini kita akan belajar Cara Menambahkan Gambar di HTML (tag image). Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>. Tag <img> sendiri dapat di gunakan untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico dan lain-lain.
Atribut dalam tag <img>
Tag img memiliki beberapa atribut yaitu
- ‐ src: letak file gambar yang akan ditampilkan, Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML: Cara Membuat link di HTML).
- - alt: singkatan dari alternative description, untuk mendeskripsikan gambar. Bagus terutama utuk membantumesin pencari seperti googel untuk meng-index situs.
- ‐ border: tebal bingkai gambar
- ‐ height: menentukan tinggi image/gambar
- ‐ width: menentukan lebar image/gambar
Sebelum membuat kode HTMLnya, masukan dahulu gambar yang ingin ditampilkan pada folder yang sama dengan file HTMLnya. (Penjelasan Lengkapnya silahkan nonton videonya)
Langsung saja, Kita buka file Notepat++ dan ketikan Kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>
<p><b>Tag img hanya dengan atribut <i>src</i></b></p>
<img src="PPD.png">
<p><b>Tag img dengan atribut <i>src</i> dan <i>alt</i></b></p>
<img alt="Nama Gambar" src="PPD.png">
<p><b>Tag img dengan border="1"</b></p>
<img src="PPD.png" border="1"</b><p>
<p><b>Tag img dengan height dan width</b></p>
<img src="PPD.png" border="1" height="300" width="200">
</body>
</html>
Hasil Code
Pada penggunaan tag image dengan atribut height dan width 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.
Memasukan Link Halaman Lain Ke Gambar
Masih ingat dengan tag <a> yang menjadi kode HTML untuk Link, Jika lupa mari lihat kembali penjelasan sebelumnya tentang “Belajar HTML Part 11: Cara Membuat link di HTML (tag a)”.
Sebenarnya cara memasukan link halaman lain ke gambar cukup mudah, disini kita hanya perlu memasukan kode linknya.
Contohnya sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Cara Mamasukan Link dalam Gambar di HTML</title>
</head>
<body>
<p><b>Tag img hanya dengan atribut <i>src</i></b></p>
<a href="https://nusantaracoding.blogspot.co.id/"><img src="PPD.png"></a>
<p><b>Tag img dengan atribut <i>src</i> dan <i>alt</i></b></p>
<a href="https://www.facebook.com/" target="_bank"><img alt="Nama Gambar" src="PPD.png"></a>
<p><b>Tag img dengan border="1"</b></p>
<a href="https://www.youtube.com/" target="_bank"><img src="PPD.png" border="1"</b><p></a>
<p><b>Tag img dengan height dan width</b></p>
<a href="https://twitter.com/login?lang=id" target="_bank"><img src="PPD.png" border="1" height="200"></a>
</body>
</html>
Hasil Codenya
Dengan memasang link halaman lain pada gambar, memungkin halaman tersebut dapat diakses ketika gambar itu diklick.
Untuk pembahasan selanjutnya kita akan belajar Cara Menambahkan video di HTML menggunakan tag video.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2