Cara Menyisipkan Gambar Dalam Halaman HTML
Dengan gambar, kita dapat mempempercantik tampilan halaman sebuah website.
Sintaks Gambar HTML
Dalam HTML, gambar didefinisikan dengan tag <img>.
Tag <img> kosong, hanya berisi atribut saja, dan tidak memiliki tag penutup.
Atribut src menentukan URL (alamat web) gambar:
<img src="url">
Atribut alt
Atribut alt menyediakan teks alternatif untuk gambar, jika pengguna karena beberapa alasan tidak dapat melihatnya (karena koneksi lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar).
Nilai atribut alt harus menggambarkan gambar:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>Atribut alt harus mencerminkan konten gambar, sehingga pengguna yang tidak dapat melihat gambar mendapatkan pemahaman tentang isi dari gambar:</p>
<img src="img_chania.jpg" alt="Flowers in Chania">
</body>
</html>
Jika browser tidak dapat menemukan gambar, maka akan muncul nilai atribut alt:
Catatan: Atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.
Ukuran Gambar - Width dan Height
Anda dapat menggunakan atribut style untuk menentukan lebar dan tinggi gambar.
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
Sebagai alternatif, Anda dapat menggunakan atribut Width dan Height berikut:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
Atribut Width dan Height selalu mendefinisikan lebar dan tinggi gambar dalam piksel.
Catatan: Selalu tentukan lebar dan tinggi gambar. Jika lebar dan tinggi tidak ditentukan, halaman mungkin berkedip saat gambar dimuat.
Width dan Height, atau Style?
Atribut width, height, dan style berlaku di HTML5.
Namun, sebaiknya gunakan atribut style. Ini mencegah terjadinya perubahan ukuran gambar:
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<style>
/*Stylesheet ini menetapkan lebar semua gambar menjadi 100%: */
img {
width:100%;
}
</style>
</head>
<body>
<p>
Gambar di bawah memiliki atribut lebar yang disetel ke 128 piksel, namun stylesheet menimpanya, dan menetapkan lebar menjadi 100%.
</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<p>Gambar di bawah menggunakan atribut style, di mana lebarnya diatur ke 128 piksel yang menggantikan stylesheet:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Gambar di Folder Lain
Jika tidak ditentukan, browser mengharapkan untuk menemukan gambar di folder yang sama dengan halaman web.
Namun, jika menyimpan gambar di sub-folder. Anda kemudian harus menyertakan nama folder di atribut src:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Gambar di Server Lain
Beberapa situs web menyimpan gambar mereka di server gambar.
Sebenarnya, Anda bisa mengakses gambar dari alamat web manapun di dunia:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">
</body>
</html>
Anda dapat membaca lebih lanjut tentang path file di dalam Bab HTML File Paths.
Jalur File Relatif
Jalur file relatif mengarah ke file yang relatif ke halaman saat ini.
Dalam contoh ini path file menunjuk ke file dalam folder gambar yang terletak di root web saat ini:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>
Dalam contoh ini path file menunjuk ke file dalam folder gambar yang terletak di folder saat ini:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="../images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>
Praktek terbaik
Ini adalah praktik terbaik untuk menggunakan jalur file relatif (jika mungkin).
Bila menggunakan jalur file relatif, halaman web Anda tidak akan terikat pada URL dasar Anda saat ini. Semua tautan akan bekerja di komputer Anda sendiri (localhost) serta domain publik Anda saat ini dan domain publik masa depan Anda.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2