Belajar HTML (10): Menambahkan Gambar ke Dalam Halaman Web

Mari lanjutkan belajar bersama kita tentang Seri Belajar HTML, setelah sekian bulan saya vakum dan tidak menulis karena berbagai kesibukan. Oke, bahasan kita masih tetap dengan level yang tingkat bawah atau dasar ya, jadi kalau jatuh tidak terlalu sakit 😉

Terakhir kemarin kita bahas tentang bagaimana cara membuat link, kali ini kita bahas tentang cara menambahkan gambar ke dalam halaman web. Gambar ini nanti juga bisa digunakan sebagai link yang akan mengarah ke posisi lain atau halaman lain dari sebuah web, mengikuti fungsi dari link yang pernah kita bahas sebelumnya.

Yang perlu disediakan

Oke, untuk menambahkan atau menampilkan gambar, pastinya kita perlu sediakan file gambarnya terlebih dahulu. Yang perlu diperhatikan adalah ada di mana tempat atau lokasi atau posisi gambar yang akan ditampilkan tersebut, termasuk juga nama filenya. Ini penting, kenapa? Karena jika salah posisinya, atau salah nama filenya, maka gambar tidak akan bisa tampil walaupun gambar tersebut ada dan tersedia.

Lokasi gambar

Gambar yang mana yang bisa ditampilkan? Yang mana saja asal bisa diketahui lokasi dan nama filenya. Lokasi gambar bisa saja internal ataupun eksternal.

Internal maksudnya gambar berada pada lokasi yang sama dengan host atau tempat file untuk menampilkan gambar tersebut. Sedangkan eksternal maksudnya berada pada host yang berbeda dengan lokasi file penampil gambar tersebut, misalnya pada alamat situs yang berbeda.

Tag yang digunakan

Untuk menampilkan gambar, tag yang digunakan adalah <img>. Tag ini memerlukan atribut untuk menentukan lokasi dan nama file gambar yang akan ditampilkan, menggunakan atribut src="lokasi/nama_file_gambar". nama_file_gambar harus disertai juga dengan ekstensi atau tipenya, misal .jpg, .png, atau lainnya.

Contoh pertama untuk menampilkan gambar internal, posisi gambar sama dengan file latihan ini, silahkan ketik kode berikut dan beri nama filenya 24-html-gambar-benar.html, setelah itu coba jalankan, kalau lupa caranya, silahkan berkenalan kembali dengan HTML 😀

<!DOCTYPE html>
<html>
<head> 
  <title>Gambar Benar</title> 
</head> 
<body> 
  <h2>Menampilkan Gambar</h2> 
  <img src="banghaji_128.png"> 
  <p>Lokasi gambarnya adalah internal dan benar nama filenya, maka gambarnya akan muncul.</p> 
</body> 
</html>

Silahkan ganti nama file gambar sesuai dengan gambar yang Anda miliki. Untuk contoh saya di atas, hasilnya akan terlihat seperti gambar berikut.

Selanjutnya jika lokasinya atau nama file gambarnya salah bagaimana? Oke, saya akan ubah tipe filenya saja ya, banghaji_128.png menjadi banghaji_128.jpg. Nama file latihannya 25-html-gambar-salah.html.

<!DOCTYPE html>
<html>
<head>
   <title>Gambar Salah</title>
</head>
<body>
   <h2>Menampilkan Gambar</h2>
   <img src="banghaji_128.jpg">
   <p>Nama file gambarnya adalah <b>banghaji_128.png</b>, tetapi dipanggil <i>banghaji_128.jpg</i> (beda tipe file), maka gambarnya tidak akan muncul.</p>
</body>
</html>

Lihat hasilnya di sebelah ya 😎

1 2

Tinggalkan Balasan 2

Bagus

Saya punya pertanyaan nih bang, saya pasang gambar dengan kode iframe di blog saya, gambar tidak muncul karena blog saya https, sedangkan bolg yang dituju http. Cara ngatasinya gimana yah bang?.

Balas

banghaji

Salam mas Bagus, terima kasih telah berkunjung di blog saya 😀

Saya melakukan percobaan secara online dari 2 blog saya terkait pertanyaan mas Bagus, yang 1 pakai https dan yang 1 lagi http. Saya panggil gambarnya seperti ini melalui blog https dengan kode <iframe src=”http://alamatblog/namafile.png”></iframe> memang tidak bisa tampil, tetapi setelah diganti menjadi https seperti ini <iframe src=”https://alamatblog/namafile.png”></iframe>, bisa tampil gambarnya.

Ini contohnya 😀

Mungkin bisa dicoba dulu mas Bagus, semoga berhasil juga 😀

Salam…