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>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<img src="bukit.jpg" />
</body>
</html>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.
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>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<img alt="gambar bukit" src="bukit.jpg"/>
</body>
</html>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.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<img alt="gambar bukit" src="bukit.psd"/>
</body>
</html>dalam contoh ini gambarnya saya ganti menjadi bukit.psd lalu saya kembali membukanya di browser.
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.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<img width="500" height="200" alt="gambar bukit" src="bukit.jpg"/>
</body>
</html>jika kita tampilkan di browser maka hasilnya gambarnya ditampilkan dengan ukuran yang tidak proposional.
lalu coba kita rubah yang kita atur hanya widthnya saja
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<img width="500" alt="gambar bukit" src="bukit.jpg"/>
</body>
</html>lalu saya tampilkan di browser, terlihat gambar yang ditampilkan memiliki ukuran yang proposional, hal tersebut dikarenakan ukuran tingginya otomatis menyesuaikan dari ukuran lebarnya.
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