Nulis-Ilmu.com

Tutorial Elektronika dan Komputer

You are here: Home / HTML / Menampilkan Gambar Pada HTML

Menampilkan Gambar Pada HTML

By

Untuk membuat website terlihat cantik dan menarik ada baiknya kita menampatkan gambar berhubungan dengan artikel yang kita buat. HTML mendukung pemasangan gambar dalam format JPG, GIF dan PNG. Untuk memasang gambar pada HTML menggunakan tag <img src=”lokasi-file”> tanpa penutup. Atribut src menunjukkan nama file beserta lokasi (jika diperlukan) dan merupakan syarat wajib dalam pemasangan tag. Untuk mengatur tampilan gambar tersedia babarapa atribut lain yang bisa dipakai.

Contoh script paling sederhana untuk pemasangan gambar pada html :

 <img src="profil.jpg">

Beberapa atribut dalam pemasangan tag <img> :

Atribut SRC

Menunjukkan URL dari file gambar yang akan ditampilkan. Ini merupakan atribut wajib dalam pemasangan gambar HTML. Jika URL dari file gambar salah atau tidak ditemukan maka browser otomatis menampilkan gambar “broken-image” yang berupa foto terpecah.
Ada beberapa cara menuliskan URL file image, yaitu:


  • Menulis nama file saja, ini dilakukan jika letak file gambar berada satu folder dengan file HTML. Contoh: 
     <img src="profil.jpg">
  • Menulis nama folder dan nama file, ini dilakukan jika file gambar terletak di folder yang lain. Contoh: 
     <img src="/images/profil.jpg">
  • Menulis alamat website, lokasi folder dan nama file, ini dilakukan jika file gambar berada disitus lain. Contoh: 
     <img src="//nulis-ilmu.blogspot.com/images/profil.jpg">

Atribut ALT

Digunakan sebagai alternatif text manakala image tidak ditampilkan atau gagal ditampilkan. Teks pada atribut ALT sebaiknya merupakan deskripsi dari file gambar yang akan ditampilkan. Contoh penggunaan atribut ALT pada tag <img> :
 <img src="profil.jpg" alt="foto-profil">

Atribut WIDTH dan HEIGHT

Digunakan untuk mengatur lebar dan tinggi gambar yang akan ditampilkan. Nilai dari atribut WIDTH dan HEIGHT berupa angka tanpa disertai satuan px(pixel) sebagaimana ukuran gambar. Aspek rasio WIDTH dan HEIGHT tidak harus sama dengan ukuran gambar asli, namun untuk menjaga proporsi tampilan sebaiknya tidak meleset terlalu jauh.
Contoh penggunaan atribut WIDTH dan HEIGHT pada tag <img> :
 <img src="profil.jpg" alt="foto-profil" width="150" height="150">

Atribut BORDER

Adalah atribut untuk membuat border atau bingkai dari gambar yang akan ditampilkan. Ukuran border disini menggunakan satuan, misalnya: px (pixel). Contoh penggunaan atribut BORDER pada tag <img> :

 <img src="profil.jpg" alt="foto-profil" width="150" height="150" border="5px">

Menggunakan STYLE pada tag <img>

Sebenarnya ada cara alternatif yang lebih dianjurkan untuk mengatur setting width dan height gambar pada HTML, yaitu dengan metode style. Mengapa demikian, karena dengan metode ini kita bisa mencegah akses pengaturan gambar melalui style luar (misal=CSS) yang tidak kita sadari. Untuk nilai dari parameter width dan height pada style harus menggunakan satuan, misal: px (pixel). Selain itu mengatur boder bisa juga dilakukan dengan metode style.

Contoh mengatur width, height dan border gambar pada HTML dengan metode style :

 <img src="profil.jpg" alt="foto-profil" style="width:50px;height:50px;border:1px solid;">

Contoh script lengkap untuk menampilkan gambar pada website :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar Menampilkan gambar pada HTML</title>  
 <body>  
 Ini contoh tampilan gambar dengan <b>atribut</b> width, height dan border<br/>  
 <img src="profil.jpg" alt="foto-profil" width="150" height="150" border="5px"><br/>  
 Ini contoh tampilan gambar dengan <b>style</b> width, height dan border<br/>  
 <img src="profil.jpg" alt="foto-profil" style="width:150px;height:150px;border:5px solid;"><br/>  
 </body>  
 </html>

Tampilan script diatas pada browser :