Cara yang diperlukan untuk memasukan atau menambahkan gambar ke dalam suatu halaman websangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini yaitu dengan menggunakan tag <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan (penutup). Atribut terpenting dari tag <img> adalah src (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img>adalah :
Untuk gambar yang disimpan di file komputer menggunakan tag
<img src=”nama_gambar.jpg">
atau
Untuk gambar yang diambil dari alamat situs lain menggunakan tag
<img src="http://www.abcde1234.com/image/nama_gambar.jpg">
Untuk lebih jelasnya ketiklah kode html dibawah ini di notepad anda.
<!doctype html>
<html>
<head>
<title>memasukan gambar</title>
</head>
<body>
<h1>Cara Menambah Gambar</h1>
<img src=”gambar.jpg”>
</body>
</html>
Simpan kode html diatas dengan nama gambar.html kemudian buka file nya di browser anda maka tampilannya adalah sebagai berikut.
Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif) dan JPEG (.jpeg atau .jpg). GIF adalah singkatan dari Graphics Inteface Group,sedangkan JPEG kepanjangan dari Joint Photographic Expert Group.Selain kedua format tersebut, saat ini juga sudah mulai banyak digunakan gambar dengan format PNG (.png), yang merupakan singkatan dariPortable Network Graphics.
Menggabung Gambar dan Teks
Jika kita ingin menggabungkan atau menyisipkan gambar di dalam suatu teks atau paragraph tertentu, terdapat pilihan posisi gambar yang harus diperhatikan secara vertical.
Teks bisa berada sejajar dengan bagian atas gambarTeks bisa berada sejajar dengan bagian tengah gambarTeks bisa berada sejajar dengan bagian bawah gambarTeks bisa berada sejajar dengan bagian kiri teks/paragrafTeks bisa berada sejajar dengan bagian kanan teks/paragraf
Untuk posisi gambar yang dilihat dari arah vertical dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM kedalam atribut ALIGN yang terdapat pada tag <img>. Untuk lebih jelasnya anda ketikan kode html berikut di editor notepad :
<!DOCTYPE HTML>
<html>
<head>
<title>Posisi Gambar</title>
<body>
<h1>Menggabung Gambar dan Teks, posisi terhadap teks secara vertikal</h1>
<img src="gambar.jpg" align="top"> Ini gambar 1<br><br>
<img src="gambar.jpg" align="middle"> Ini gambar 2<br><br>
<img src="gambar.jpg" align="bottom"> Ini gambar 3
</body>
<html>
Simpan kode html diatas dengan nama posisi_gambar.html, maka tampilannya adalah sebagai berikut.
Adapun untuk posisi gambar yang dilihat dari arah horisontal atribut ditentukan dengan mengisi nilai LEFT dan RIGHT pada ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks, begitupun sebaliknya.
Untuk lebih jelasnya silakan anda ketik kembali kode html dibawah ini di notepad.
<!DOCTYPE HTML>
<html>
<head>
<title>posisi gambar kiri kanan</title>
<h1>Menggabung Gambar dan Teks, posisi terhadap teks secara horisontal</h1>
<img src="gambar.jpg" align="left">Ini gambar 1 (menggunakan align="LEFT")
<br><br><br><br><br><br><br><br><br>
<img src="gambar.jpg" align="right">Ini gambar 2 (menggunakan align="RIGHT")
</body>
<html>
Simpan dokumen diatas dengan namaposisi_gambar2.html. Contoh hasil dokumen HTML di Web Browser seperti berikut :
Bagaiman pemirsa, mudah bukan. Sekian dulu artikel dari saya tentang Cara Memasukan Gambar Pada HTML ini semoga bermanfaat bagi anda semua.
