Cara menambahkan gambar di html

Belajar HTML Part 18 Cara menambahkan gambar di HTML

Posted on Posted in Tutorial HTML

Hai Selamat datang lagi di warung belajar, kali ini kita akan membahas kembali mengenai tutorial HTML, jika tutorial sebelumnya kita sudah membahas mengenai cara membuat link di HTML, nah kali ini kita akan membahas mengenai cara menambahkan gambar di HTML, seperti yang anda ketahui bahwa gambar adalah elemen yang cukup penting dalam sebuah website, bisa anda bayangkan jika website tidak terdapat gambar sama sekali pasti akan sangat membosankan bukan.

HTML memiliki tag <img> yang dapat digunakan untuk menambahkan gambar di HTML, baik kita langsung saja kita mulai bahas mengenai cara menambahkan gambar di HTML dengan tag <img>

Attribute SRC di tag <img>

Attribute src merupakan singkatan dari source, attribute ini sangat penting di tag <img>

Attribute src digunakan untuk memberikan alamat dari gambar yang akan ditampilkan di HTML, anda dapat menampilkan gambar dari website lain (server lain), ataupun didalam website anda sendiri konsepnya sama seperti membuat link yang telah kita bahas di tutorial cara membuat link di HTML.

lalu pertanyaannya, apakah seluruh jenis gambar bisa ditambahkan di html ?

nah pertanyaan yang bagus, jadi hanya ada beberapa format gambar yang dapat ditampilkan di HTML, antara lain  jpg, png, gif.

gimana nih caranya untuk menambahkan gambar di html, contohin donk !

baik kita langsung coba buat ya, saya asumsikan kita itu akan menampilkan gambar dengan nama bukit.jpg yang telah saya letakkan di satu folder dengan file htmlnya, saya telah membuat skrip sederhana dengan menggunakan tag <img>

terlihat pada bagian <body> kita menambahkan tag <img> dan kita tuliskan src=”bukit.jpg” yang artinya kita akan menampilkan img dengan nama bukit.jpg

eia.. untuk bagian tag <img> tidak memiliki tag penutup, sehingga hanya ditutup dengan menggunakan tanda />

jika kita buka di browser maka akan menampilkan gambar sebagai berikut.

menampilkan gambar di html

nah gimana mudahkan untuk menambahkan gambar di html, baik kita akan lanjut ke attribute selanjutnya.

 

Attribute alt (alternate text) di tag <img>

Setelah membahas mengenai tag src, kita lanjut ke attribute alt, attribute ini memiliki fungsi yang cukup penting tetapi biasanya sering kita lupakan.

Fungsi penting apaan tuh ?

jadi fungsi dari attribute alt ini digunakan untuk menampilkan text yang nantinya akan ditampilkan di browser, jika gambar tidak berhasil ditampilkan.

Lho gambarnya tidak bisa ditampilkan bagaimana maksudnya ?

jadi gambar memiliki kemungkinan tidak bisa ditampilkan karena beberapa hal, seperti koneksi internet yang terputus, lalu gambar masih proses load dll, nah value dari attribute alt ini akan ditampilkan di browser sebagai ganti gambar yang gagal ditampilkan, selain itu juga search engine juga lebih mudah mengindex gambar yang menggunakan attribute alt.

baik kita akan lanjutkan skrip yang telah kita tulis diatas dengan menambahkan attribute alt pada tag <img>

kalau kita buka di browser maka hasilnya seperti gambar diatas, lalu apa yang membuat berbeda ?

baik kita coba merubah format gambar yang ditampilkan dengan format gambar yang tidak didukung oleh html, yang akan menyebabkan gambarnya gagal diload.

dalam contoh ini gambarnya saya ganti menjadi bukit.psd lalu saya kembali membukanya di browser.

fungsi attribute alt di tag img

maka hasilnya gambarnya akan hilang, dan tampil value yang kita isikan di attribute alt yaitu “gambar bukit”, nah itu fungsi dari attribute alt, yang akan menampilkan text ketika gambar gagal diload.

 

 

Attribute Width dan Height di Tag <img>

Seperti artinya Width (lebar) dan Height(Tinggi) kedua attribute ini digunakan untuk mengatur ukuran gambar yang ditampilkan, satuan yang digunakan untuk ukuran ini adalah pixel.

Meskipun dari HTML menyediakan 2 attribute untuk mengatur ukuran gambar, jika anda menggunakan kedua attribute tersebut secara bersamaan ada kemungkinan gambar akan ditampilkan dengan ukuran yang tidak proposional.

jadi ada baiknya anda hanya menggunakan salah satu attribute tersebut, baik itu width ataupun height saja, jadi semisal bila anda menggunakan attribute width saja maka ukuran tinggi akan otomatis menyesuaikan sehingga gambarnya ditampilkan dengan ukuran yang proposional.

baik kita coba untuk menampilkan gambarnya dengan mengatur kedua attribute tersebut, kita telah menyiapkan di contoh skrip html.

jika kita tampilkan di browser maka hasilnya gambarnya ditampilkan dengan ukuran yang tidak proposional.

attribute width dan height di html bagian 1

lalu coba kita rubah yang kita atur hanya widthnya saja

lalu saya tampilkan di browser, terlihat gambar yang ditampilkan memiliki ukuran yang proposional, hal tersebut dikarenakan ukuran tingginya otomatis menyesuaikan dari ukuran lebarnya.

attribute width di html bagian 2

bagaimana mudah kan cara untuk menambahkan gambar di html, baik seperti itu dulu yang warung belajar bisa bahas, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa ladi di tutorial html lainnya
 

Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box

Leave a Reply

Your email address will not be published. Required fields are marked *