Pada artikel sebelumnya, kita sudah mempelajari Tutorial Belajar HTML 5 Bagian 9 : Cara Menambahkan Komentar di HTML, selanjutnya kita akan belajar fungsi tag image di HTML untuk menyisipkan gambar.
1 gambar mempunyai berjuta makna.
Selain untuk mempercantik konten, gambar berfungsi untuk menjelaskan sesuatu yang hanya bisa dipahami dengan cara melihat bentuk atau rupa.
Sebab, tidak semua hal bisa dijelaskan dengan tulisan saja.
Lewat tutorial ini, kita akan mempelajari fungsi dan cara menggunakan tag <img> pada HTML.
Sisipkan Gambar
Anda dapat memasukkan gambar apapun di halaman web dengan menggunakan tag <img>.
Berikut ini adalah sintaks sederhana untuk menggunakan tag ini.
<img src = "Image URL" ... attributes-list/>
Tag <img> disebut juga dengan self-tag, atau tag kosong yang artinya hanya dapat berisi daftar atribut dan tidak memiliki tag penutup.
Contoh :
Pada contoh kode ini, saya menggunakan sebuah gambar yang disimpan di folder yang sama dengan script html, dengan nama file gambar test.png.
Anda bisa menggunakan gambar lain dan folder yang berbeda, atau Anda bisa menggunakan URL dari external link.
<!DOCTYPE html>
<html>
<head>
<title>Menyisipkan Gambar di Halaman Web</title>
</head>
<body>
<p>Cara Menyisipkan Gambar ke Web </p>
<img src = "test.png" alt = "Gambar Percobaan " />
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Untuk jenis gambar, Anda dapat menggunakan file gambar PNG, JPEG atau GIF sesuai kebutuhan Anda, namun pastikan Anda menentukan nama file gambar yang benar di atribut src.
Untuk penamaan file gambar selalu bersifat peka huruf besar/kecil.
Atribut ‘alt’ adalah atribut wajib yang menentukan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.
Atur Lokasi Gambar
Biasanya, gambar disimpan di direktori terpisah.
Jadi silahkan simpan file HTML test.htm di direktori home dan buat gambar subdirektori bernama ‘gambar’ di dalam direktori home tempat kita akan menyimpan image test.png kita.
Contoh :
Dengan asumsi lokasi gambar kita adalah “test.png”, coba contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Menyisipkan Gambar di Halaman Web </title>
</head>
<body>
<p>Menyisipkan Gambar ke Web </p>
<img src = "test.png" alt = "Gambar Percobaan " />
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Lebar / Tinggi Gambar
Anda dapat mengatur lebar dan tinggi gambar berdasarkan kebutuhan, menggunakan atribut wide dan height.
Anda dapat menentukan lebar dan tinggi gambar dalam ukuran piksel atau persentase dari ukuran sebenarnya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Lebar dan Tinggi Gambar</title>
</head>
<body>
<p>Atur lebar dan tinggi gambar</p>
<img src = "test.png" alt = "Gambar Percobaan " width = "150" height = "100"/>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Border Gambar
Secara default, gambar akan memiliki border di sekelilingnya, Anda dapat menentukan ketebalan border dalam bentuk piksel menggunakan atribut border.
Ketebalan 0 berarti, tidak ada batas di sekeliling gambar.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Border Gambar </title>
</head>
<body>
<p>Mengatur Border Gambar </p>
<img src = "test.png" alt = "Gambar Percobaan " border = "3"/>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Image Alignment
Secara default, gambar akan diratakan di sisi kiri halaman, tetapi Anda dapat menggunakan atribut align untuk mengaturnya di tengah atau kanan.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Atur Alignment Gambar</title>
</head>
<body>
<p>Atur Alignment Gambar</p>
<img src = "test.png" alt = "Gambar Percobaan " border = "3" align = "right"/>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini bisa menambah pengetahuan Anda tentang fungsi tag image di HTML untuk menambahkan gambar di dokumen Anda.
Pada artikel selanjutnya kita akan mempelajari Tutorial Belajar HTML 5 Bagian 11 : Fungsi & Atribut Tag Table di HTML.
