Suatu halaman web akan terlihat kaku, terkesan formal dan sedikit menjemukan bila tidak disertai gambar. Kita bias lihat saat ini, halaman web yang ada di internet, hamper semuanya memasukan unsure gambar, animasi bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya.
Sebagai contoh lain, misalnya ingin membuat halaman web yang berisi koleksi foto, maupun barang-barang yang sesuai dengan hobi. Dalam kasus ini, tentu harus memahami teknik untuk menampilkan foto tersebut ke halaman web sehingga tampil rapi dan menarik.
Cara yang diperlukan untuk memasukan atau menambahkan gambar ke dalam suatu halaman web sangatlah 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">
<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">
<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 dari Portable 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 gambar
- Teks bisa berada sejajar dengan bagian tengah gambar
- Teks bisa berada sejajar dengan bagian bawah gambar
- Teks bisa berada sejajar dengan bagian kiri teks/paragraf
- Teks 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.
<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 nama posisi_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.
Tks sdh di kasih banyak masukan hr ini
ReplyDeletethanks gan membantu
ReplyDeleteMantap mudah banget setelah saya coba ;D
ReplyDelete