316 Views

Belajar Pemrograman HTML & CSS (Part 8) – Menambahkan Gambar

html css jquery javascript

hai.. semua sobat belajar hebat bertemu lagi dengan saya. kali ini kita akan membahas cara memasukkan gambar di html. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>.Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.

Pada contoh dibawah ini saya menggunakan sebuah gambar koala.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai img.html

Contoh penggunaan tag <img>:

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img src="koala.jpg"/>
</body>
</html>
Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />

 hasil-tag-image

 

 

 

 

 

 

 

Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.

Contoh penggunaan atribut width dan height pada tag <img>:

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img alt="Gambar Koala" src="koala.jpg" height="200" width="100" />
</body>
</html>

 hasil-tag-image-wh

Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan heightmemaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan.

Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan jika kita menetapkan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.

sekian dari saya semoga bermanfaat bagi anda semua

SALAM HEBAT

Share
You can leave a response, or trackback from your own site.

Leave a Reply