Beranda
HTML

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

Subscribe channel BangHaji CotCom

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.

HTML Gambar Benar

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 😎

Kalau terjadi kesalahan atau gagal memanggil gambar, hasilnya kira-kira seperti ini.

HTML Gambar Salah

Atribut alternatif

Jika gambar gagal dipanggil, entah karena kesalahan nama atau lokasi, atau karena memang gambar tersebut tidak ada, maka kita bisa memberikan keterangan gambar tersebut tentang apa. Misal seperti contoh di atas, ingin menampilkan logo banghaji dot com, maka seandainya gambar tersebut gagal ditampilkan, maka bisa kita tampilkan keterangan bahwa itu adalah gambar logo banghaji dot com.

Untuk menampilkan keterangan ini, digunakan atribut dengan cara penulisan berikut: alt="keterangan gambar", ditambahkan pada tag <img>. Langsung saja coba ubah dan simpan dengan nama file baru untuk latihan di atas menjadi 26-html-gambar-alt.html menjadi sebagai berikut:

<!DOCTYPE html><html><head>   <title>Gambar Alt</title></head><body>   <h2>Menampilkan Gambar</h2>   <img src="banghaji_128.jpg" alt="logo banghaji dot com">   <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>   <p>Tetapi karena ditambahkan atribut <b>alt</b> maka muncul keterangan tentang gambar tersebut.</p></body></html>

Yang diberi tanda panah adalah keterangan gambar yang muncul karena gambar gagal ditampilkan.

HTML Gambar Alt

Atribut lainnya

Jika ingin memberikan baris pada bagian tepi gambar, bisa ditambahkan atribut border="?", ganti tanda tanya (?) dengan angka bilangan bulat, misal 1, 2, atau lainnya. Atribut align="rata" juga bisa digunakan pada gambar, ganti rata menjadi left, right, center. Atribut lainnya adalah horizontal space dan vertical space.

Horizontal space adalah spasi atau jarak dengan posisi horizontal atau mendatar (ke samping kanan dan kiri). Untuk mengaturnya gunakan atribut hspace="berapa". Sedangkan vertical space adalah spasi atau jarak dengan posisi vertical atau tegak (ke atas dan ke bawah). Gunakan atribut vspace="berapa" jika ingin menerapkannya. Ganti berapa menjadi angka bilangan bulat.

Atribut lain yang bisa digunakan adalah width="berapa" dan height="berapa". Satuannya pixel, misalnya width="100" height="50".

Langsung saja coba kode berikut ini, gabungan semuanya, simpan dengan nama file 27-html-gambar-border-align-hspace-vspace.html.

<!DOCTYPE html><html><head>   <title>Gambar</title></head><body>   <h2>Menampilkan Gambar</h2>   <img src="banghaji_128.png" hspace="20" vspace="10" align="left" width="100" height="50">   <p>Gambar di samping kiri ini diatur tanpa <b>alt</b>, tanpa <b>border</b>, <b>hspace</b>: 20 pixel dan <b>vspace</b>: 10 pixel. Posisi gambar berada di sebelah kiri karena gambar diatur dengan <b>align</b>: left. Gambar diatur <b>width</b>: 100 pixel dan <b>height</b>: 50 pixel.</p>   <img src="banghaji_128.jpg" alt="logo banghaji dot com" border="1" hspace="20" vspace="0" align="right">   <p>Gambar di samping kanan ini diatur dengan <b>alt</b>: banghaji dot com, dan nama file dibuat salah, <b>border</b>: 1 pixel, <b>hspace</b>: 20 pixel dan <b>vspace</b>: 0 pixel. Posisi gambar berada di sebelah kanan karena gambar diatur dengan <b>align</b>: right. Gambar tidak diatur <b>width</b> dan <b>height</b> sehingga menampilkan gambar dengan ukuran asli.</p></body></html>

Lihat perbedaan gambar atas dan bawahnya.

HTML Gambar Border Align Hspace Vspace

Silahkan coba diutak-atik lagi ya, sementara untuk tutorial menampilkan gambar pada halaman web ini saya cukupkan dulu. Kita ketemu lagi pada tulisan-tulisan lainnya, insyaa Allah 😎 Sampai jumpa…

Related Posts